@vanillaskyai/video 0.8.8 → 0.10.0

package/dist/chunk-5CDAM24P.js

@@ -1,31 +0,0 @@
-// src/visual-system/scene-templates/external-video-backdrop.tsx
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var DEFAULT = { mode: false, audioMuted: true, audioVolume: 1 };
-var sharedContext = globalThis;
-var BackdropContext = sharedContext.__vanillaskyVideoBackdropContext ??= React.createContext(DEFAULT);
-function ExternalVideoBackdropProvider({
-  mode,
-  audioMuted = true,
-  audioVolume = 1,
-  children
-}) {
-  const value = React.useMemo(
-    () => ({ mode, audioMuted, audioVolume }),
-    [mode, audioMuted, audioVolume]
-  );
-  return /* @__PURE__ */ jsx(BackdropContext.Provider, { value, children });
-}
-function useExternalVideoBackdrop() {
-  return React.useContext(BackdropContext).mode;
-}
-function useMediaAudio() {
-  const { audioMuted, audioVolume } = React.useContext(BackdropContext);
-  return { muted: audioMuted, volume: audioVolume };
-}
-
-export {
-  ExternalVideoBackdropProvider,
-  useExternalVideoBackdrop,
-  useMediaAudio
-};

package/dist/chunk-AOWSXU2K.js

@@ -1,18 +0,0 @@
-// src/protocol/types.ts
-var VIDEO_PROTOCOL_VERSION = "0.5";
-var VIDEO_SCHEMA_VERSION = "0.1";
-function createVideoRequest(input, options) {
-  return {
-    protocolVersion: VIDEO_PROTOCOL_VERSION,
-    requestId: options.requestId,
-    input,
-    ...options.capabilities ? { capabilities: options.capabilities } : {},
-    ...options.resume ? { resume: options.resume } : {}
-  };
-}
-
-export {
-  VIDEO_PROTOCOL_VERSION,
-  VIDEO_SCHEMA_VERSION,
-  createVideoRequest
-};

package/dist/chunk-CJ7F2CE6.js

@@ -1,104 +0,0 @@
-import {
-  getCelebrationParticleTiming
-} from "./chunk-QAAO7OAY.js";
-
-// src/visual-system/scene-templates/confetti-layer.tsx
-import { Fragment, jsx } from "react/jsx-runtime";
-var PARTICLE_COUNT = 200;
-var COLORS = ["#ef4444", "#ff6b6b", "#f97316", "#fb923c", "#ffd93d", "#34d399", "#6bcbff", "#818cf8", "#a78bfa", "#f472b6", "#ffffff"];
-function seededRandom(seed) {
-  const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
-  return x - Math.floor(x);
-}
-function easeOutQuad(p) {
-  return 1 - (1 - p) * (1 - p);
-}
-function hexHue(hex) {
-  const r = parseInt(hex.slice(1, 3), 16) / 255;
-  const g = parseInt(hex.slice(3, 5), 16) / 255;
-  const b = parseInt(hex.slice(5, 7), 16) / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const d = max - min;
-  if (d === 0) return 0;
-  let h = 0;
-  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-  else if (max === g) h = ((b - r) / d + 2) / 6;
-  else h = ((r - g) / d + 4) / 6;
-  return h * 360;
-}
-function hueDistance(a, b) {
-  const d = Math.abs(a - b) % 360;
-  return d > 180 ? 360 - d : d;
-}
-var ConfettiLayer = ({
-  progress,
-  width,
-  height,
-  beatIntensity = 0,
-  bgColor
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const BURST_RADIUS = Math.max(width, height) * 0.95;
-  let allColors = COLORS;
-  if (bgColor) {
-    const bgHue = hexHue(bgColor);
-    const filtered = COLORS.filter((c) => c === "#ffffff" || hueDistance(hexHue(c), bgHue) > 35);
-    if (filtered.length >= 4) allColors = filtered;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: PARTICLE_COUNT }, (_, i) => {
-    const seed = i + 1;
-    const angle = i / PARTICLE_COUNT * Math.PI * 2;
-    const forceFactor = 0.75 + seededRandom(seed * 1) * 0.5;
-    const durationFactor = 1.1 + seededRandom(seed * 3) * 0.6;
-    const color = allColors[i % allColors.length];
-    const isCircle = seededRandom(seed * 4) > 0.85;
-    const startRot = seededRandom(seed * 5) * 360;
-    const rotSpeed = (seededRandom(seed * 6) - 0.5) * 1440;
-    const flipSpeed = 3 + seededRandom(seed * 7) * 4;
-    const flipPhase = seededRandom(seed * 8) * Math.PI * 2;
-    const widthFactor = 0.45 + seededRandom(seed * 9) * 0.6;
-    const heightFactor = 0.7 + seededRandom(seed * 10) * 0.6;
-    const timing = getCelebrationParticleTiming(progress, i, durationFactor);
-    if (!timing) return null;
-    const p = timing.progress;
-    const reach = BURST_RADIUS * forceFactor;
-    const radialP = easeOutQuad(p);
-    const gravity = height * 0.08 * p * p;
-    const x = width * 0.5 + Math.cos(angle) * reach * radialP;
-    const y = height * 0.5 + Math.sin(angle) * reach * radialP + gravity;
-    const flip = Math.cos(p * Math.PI * flipSpeed + flipPhase);
-    const rot = startRot + rotSpeed * p;
-    const baseSize = (8 + seededRandom(seed * 11) * 10) * s;
-    const w = baseSize * widthFactor;
-    const h = isCircle ? w : baseSize * heightFactor;
-    const popScale = Math.min(1, p * 30);
-    const particleOpacity = p < 0.85 ? 1 : Math.max(0, 1 - (p - 0.85) / 0.15);
-    const opacity = particleOpacity * timing.opacity;
-    const beatPulse = 1 + beatIntensity * 0.15;
-    if (opacity <= 0) return null;
-    if (y > height + 120 || y < -120 || x < -120 || x > width + 120) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: x - w / 2,
-          top: y - h / 2,
-          width: w,
-          height: h,
-          borderRadius: isCircle ? "50%" : 1,
-          backgroundColor: color,
-          opacity,
-          transform: `rotate(${rot}deg) scaleX(${flip}) scale(${popScale * beatPulse})`,
-          pointerEvents: "none"
-        }
-      },
-      i
-    );
-  }) });
-};
-
-export {
-  ConfettiLayer
-};

package/dist/chunk-FRN6WKHA.js

@@ -1,185 +0,0 @@
-import {
-  getBackgroundTransform
-} from "./chunk-W3VDIBGR.js";
-import {
-  useMediaAudio
-} from "./chunk-5CDAM24P.js";
-
-// src/visual-system/scene-templates/scene-video-backdrop.tsx
-import { useEffect, useRef, useState } from "react";
-
-// src/visual-system/scene-templates/media-position.ts
-var MEDIA_POSITIONS = {
-  center: "center center",
-  top: "center top",
-  bottom: "center bottom",
-  left: "left center",
-  right: "right center"
-};
-function resolveMediaPosition(value) {
-  return MEDIA_POSITIONS[value] ?? MEDIA_POSITIONS.center;
-}
-
-// src/visual-system/scene-templates/scene-video-backdrop.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SceneVideoBackdrop = ({
-  mediaUrl,
-  mediaPoster,
-  mediaPosition = "center",
-  backgroundEffect,
-  progress,
-  beatIntensity = 0,
-  isPlaying,
-  muted,
-  volume,
-  playbackId = mediaUrl,
-  retainPoster = false,
-  persistent = false,
-  preparedPoster,
-  onReady,
-  onError
-}) => {
-  const inheritedAudio = useMediaAudio();
-  const resolvedMuted = muted ?? inheritedAudio.muted;
-  const resolvedVolume = volume ?? inheritedAudio.volume;
-  const resolvedPosition = resolveMediaPosition(mediaPosition);
-  const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);
-  const [decodedVideoUrl, setDecodedVideoUrl] = useState();
-  const videoRef = useRef(null);
-  const startedVideoUrl = useRef(void 0);
-  const startedPlaybackId = useRef(void 0);
-  const videoPresentationKey = `${playbackId}\0${mediaUrl}`;
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    if (video.getAttribute("src") !== mediaUrl) {
-      video.setAttribute("src", mediaUrl);
-      video.load();
-    }
-    return () => {
-      video.pause();
-      video.removeAttribute("src");
-      video.load();
-      startedVideoUrl.current = void 0;
-      startedPlaybackId.current = void 0;
-    };
-  }, [mediaUrl]);
-  useEffect(() => {
-    const video = videoRef.current;
-    if (video) video.volume = resolvedVolume;
-  }, [resolvedVolume]);
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    if (!isPlaying) {
-      video.pause();
-      startedVideoUrl.current = void 0;
-      startedPlaybackId.current = void 0;
-      return;
-    }
-    if (startedPlaybackId.current === playbackId) return;
-    const changingSource = startedVideoUrl.current !== void 0 && startedVideoUrl.current !== mediaUrl;
-    video.playbackRate = 1;
-    if (!changingSource && video.currentTime > 0) video.currentTime = 0;
-    video.play().catch(() => {
-    });
-    startedVideoUrl.current = mediaUrl;
-    startedPlaybackId.current = playbackId;
-  }, [isPlaying, mediaUrl, playbackId]);
-  const mediaStyle = {
-    position: "absolute",
-    inset: 0,
-    width: "100%",
-    height: "100%",
-    objectFit: "cover",
-    objectPosition: resolvedPosition,
-    transform: bgTransform.transform,
-    transformOrigin: bgTransform.transformOrigin,
-    zIndex: persistent ? 1 : void 0
-  };
-  const preparedPosition = preparedPoster ? resolveMediaPosition(preparedPoster.mediaPosition) : resolvedPosition;
-  const preparedTransform = getBackgroundTransform(preparedPoster?.backgroundEffect, 0, 0);
-  const posterPlanes = [
-    ...persistent && mediaPoster ? [{
-      presentationKey: videoPresentationKey,
-      mediaPoster,
-      mediaPosition: resolvedPosition,
-      transform: bgTransform.transform,
-      transformOrigin: bgTransform.transformOrigin,
-      opacity: 1,
-      zIndex: 0,
-      role: "current"
-    }] : [],
-    ...preparedPoster && preparedPoster.presentationKey !== videoPresentationKey ? [{
-      presentationKey: preparedPoster.presentationKey,
-      mediaPoster: preparedPoster.mediaPoster,
-      mediaPosition: preparedPosition,
-      transform: preparedTransform.transform,
-      transformOrigin: preparedTransform.transformOrigin,
-      opacity: preparedPoster.opacity ?? 0,
-      zIndex: 2,
-      role: "prepared"
-    }] : []
-  ];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    posterPlanes.map((posterPlane) => /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: posterPlane.mediaPoster,
-        alt: "",
-        "aria-hidden": "true",
-        draggable: false,
-        "data-video-poster-plane": posterPlane.role,
-        "data-video-poster-visible": posterPlane.opacity > 0 ? "true" : "false",
-        style: {
-          position: "absolute",
-          inset: 0,
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          objectPosition: posterPlane.mediaPosition,
-          transform: posterPlane.transform,
-          transformOrigin: posterPlane.transformOrigin,
-          zIndex: posterPlane.zIndex,
-          opacity: posterPlane.opacity,
-          pointerEvents: "none"
-        }
-      },
-      posterPlane.presentationKey
-    )),
-    /* @__PURE__ */ jsx(
-      "video",
-      {
-        ref: videoRef,
-        src: mediaUrl,
-        poster: retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || void 0 : void 0,
-        muted: resolvedMuted,
-        loop: true,
-        playsInline: true,
-        preload: "auto",
-        onLoadedData: (event) => {
-          const video = event.currentTarget;
-          const markPresented = () => {
-            if (!video.isConnected) return;
-            onReady?.();
-            if (!retainPoster) setDecodedVideoUrl(mediaUrl);
-          };
-          if (video.requestVideoFrameCallback) {
-            video.requestVideoFrameCallback(markPresented);
-            return;
-          }
-          markPresented();
-        },
-        onError,
-        "data-media-position": mediaPosition,
-        "data-video-backdrop": persistent ? "persistent" : "scene",
-        style: mediaStyle
-      }
-    )
-  ] });
-};
-
-export {
-  resolveMediaPosition,
-  SceneVideoBackdrop
-};

package/dist/chunk-G5JPHBX7.js

@@ -1,336 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import {
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  TOKEN_DEFAULTS
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/devices/product-surface-config.ts
-function resolveProductSurfaceMotion(value) {
-  return value === "still" || value === "pan" ? value : "pushIn";
-}
-
-// src/visual-system/primitives/devices/DesignedScreenFill.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function parseHex(hex) {
-  const m = String(hex).match(/^#([0-9a-f]{3,8})$/i);
-  if (!m) return null;
-  const h = m[1];
-  if (h.length === 3) {
-    return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)];
-  }
-  if (h.length >= 6) {
-    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
-  }
-  return null;
-}
-function rgba(hex, a) {
-  const p = parseHex(hex);
-  if (!p) return hex;
-  return `rgba(${p[0]},${p[1]},${p[2]},${a})`;
-}
-function isDark(hex) {
-  const p = parseHex(hex);
-  if (!p) return false;
-  const [r, g, b] = p;
-  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.5;
-}
-function surface(bg) {
-  const dark = bg ? isDark(bg) : false;
-  return dark ? {
-    dark,
-    page: "#15171c",
-    panel: "#1e2128",
-    line: "rgba(255,255,255,0.07)",
-    block: "rgba(255,255,255,0.10)",
-    blockSoft: "rgba(255,255,255,0.055)"
-  } : {
-    dark,
-    page: "#f5f6f8",
-    panel: "#ffffff",
-    line: "rgba(15,20,30,0.07)",
-    block: "rgba(15,20,30,0.10)",
-    blockSoft: "rgba(15,20,30,0.05)"
-  };
-}
-var stroke = (s, c) => `${Math.max(1, Math.round(1 * s))}px solid ${c}`;
-var WebScreenFill = ({ accent, secondary, bg, font, s, w, h, progress }) => {
-  const c = surface(bg);
-  const pad = Math.round(h * 0.055);
-  const headerH = Math.round(h * 0.13);
-  const sidebarW = Math.round(w * 0.18);
-  const grow = interpolate(progress, [0.1, 0.7], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const bars = [0.55, 0.78, 0.4, 0.92, 0.66, 0.84, 0.5];
-  const chartH = h - headerH - pad * 2 - Math.round(h * 0.22) - Math.round(h * 0.04);
-  const card = (i) => {
-    const tint = [accent, secondary, accent][i % 3];
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          flex: 1,
-          height: Math.round(h * 0.22),
-          backgroundColor: c.panel,
-          borderRadius: Math.round(12 * s),
-          border: stroke(s, c.line),
-          padding: Math.round(h * 0.03),
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          boxSizing: "border-box"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: Math.round(8 * s) }, children: [
-            /* @__PURE__ */ jsx("div", { style: { width: Math.round(h * 0.05), height: Math.round(h * 0.05), borderRadius: Math.round(7 * s), backgroundColor: rgba(tint, c.dark ? 0.28 : 0.16) } }),
-            /* @__PURE__ */ jsx("div", { style: { width: "42%", height: Math.round(h * 0.018), borderRadius: 99, backgroundColor: c.blockSoft } })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { width: "62%", height: Math.round(h * 0.05), borderRadius: Math.round(5 * s), backgroundColor: c.block } }),
-          /* @__PURE__ */ jsx("div", { style: { width: "34%", height: Math.round(h * 0.016), borderRadius: 99, backgroundColor: rgba(tint, c.dark ? 0.7 : 0.55) } })
-        ]
-      },
-      i
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%", backgroundColor: c.page, fontFamily: font, display: "flex", flexDirection: "column", boxSizing: "border-box", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          height: headerH,
-          backgroundColor: accent,
-          display: "flex",
-          alignItems: "center",
-          paddingLeft: pad,
-          paddingRight: pad,
-          gap: Math.round(10 * s),
-          flexShrink: 0
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { width: Math.round(h * 0.05), height: Math.round(h * 0.05), borderRadius: Math.round(8 * s), backgroundColor: "rgba(255,255,255,0.92)" } }),
-          /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.18), height: Math.round(h * 0.022), borderRadius: 99, backgroundColor: "rgba(255,255,255,0.85)" } }),
-          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-          /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.1), height: Math.round(h * 0.04), borderRadius: 99, backgroundColor: "rgba(255,255,255,0.22)" } }),
-          /* @__PURE__ */ jsx("div", { style: { width: Math.round(h * 0.06), height: Math.round(h * 0.06), borderRadius: "50%", backgroundColor: "rgba(255,255,255,0.85)" } })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { width: sidebarW, backgroundColor: c.panel, borderRight: stroke(s, c.line), padding: pad, display: "flex", flexDirection: "column", gap: Math.round(h * 0.028), boxSizing: "border-box", flexShrink: 0 }, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: Math.round(8 * s) }, children: [
-        /* @__PURE__ */ jsx("div", { style: { width: Math.round(h * 0.032), height: Math.round(h * 0.032), borderRadius: Math.round(5 * s), backgroundColor: i === 0 ? accent : c.block } }),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, height: Math.round(h * 0.016), borderRadius: 99, backgroundColor: i === 0 ? rgba(accent, 0.55) : c.blockSoft } })
-      ] }, i)) }),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, padding: pad, display: "flex", flexDirection: "column", gap: pad, minWidth: 0, boxSizing: "border-box" }, children: [
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: pad }, children: [0, 1, 2].map(card) }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, backgroundColor: c.panel, borderRadius: Math.round(12 * s), border: stroke(s, c.line), padding: Math.round(h * 0.03), display: "flex", flexDirection: "column", boxSizing: "border-box", minHeight: 0 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { width: "30%", height: Math.round(h * 0.02), borderRadius: 99, backgroundColor: c.block, marginBottom: Math.round(h * 0.03) } }),
-          /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", alignItems: "flex-end", gap: Math.round(w * 0.018), minHeight: 0 }, children: bars.map((bh, i) => /* @__PURE__ */ jsx("div", { style: { flex: 1, height: Math.max(2, Math.round(chartH * bh * grow)), borderRadius: Math.round(4 * s), backgroundColor: i % 2 === 0 ? accent : rgba(secondary, c.dark ? 0.85 : 0.7) } }, i)) })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-var PhoneScreenFill = ({ accent, secondary, bg, font, s, w, h, progress }) => {
-  const c = surface(bg);
-  const pad = Math.round(w * 0.07);
-  const statusH = Math.round(h * 0.04);
-  const headerH = Math.round(h * 0.14);
-  const grow = interpolate(progress, [0.12, 0.7], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const onAccent = "rgba(255,255,255,";
-  const listItem = (i) => {
-    const tint = [accent, secondary][i % 2];
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          backgroundColor: c.panel,
-          borderRadius: Math.round(16 * s),
-          border: stroke(s, c.line),
-          padding: Math.round(w * 0.05),
-          display: "flex",
-          alignItems: "center",
-          gap: Math.round(w * 0.045),
-          boxSizing: "border-box"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.13), height: Math.round(w * 0.13), borderRadius: Math.round(12 * s), backgroundColor: rgba(tint, c.dark ? 0.3 : 0.18), flexShrink: 0 } }),
-          /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: Math.round(h * 0.012) }, children: [
-            /* @__PURE__ */ jsx("div", { style: { width: `${70 - i * 8}%`, height: Math.round(h * 0.018), borderRadius: 99, backgroundColor: c.block } }),
-            /* @__PURE__ */ jsx("div", { style: { width: `${48 - i * 4}%`, height: Math.round(h * 0.014), borderRadius: 99, backgroundColor: c.blockSoft } })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.12), height: Math.round(h * 0.026), borderRadius: 99, backgroundColor: rgba(tint, c.dark ? 0.6 : 0.5) } })
-        ]
-      },
-      i
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%", backgroundColor: c.page, fontFamily: font, display: "flex", flexDirection: "column", boxSizing: "border-box", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { height: statusH, display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: pad, paddingRight: pad, flexShrink: 0 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.1), height: Math.round(h * 0.012), borderRadius: 99, backgroundColor: c.block } }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: Math.round(4 * s) }, children: [
-        /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.04), height: Math.round(h * 0.012), borderRadius: 2, backgroundColor: c.block } }),
-        /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.03), height: Math.round(h * 0.012), borderRadius: 2, backgroundColor: c.block } })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { height: headerH, backgroundColor: accent, padding: pad, display: "flex", flexDirection: "column", justifyContent: "center", gap: Math.round(h * 0.018), flexShrink: 0 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { width: "44%", height: Math.round(h * 0.02), borderRadius: 99, backgroundColor: `${onAccent}0.5)` } }),
-      /* @__PURE__ */ jsx("div", { style: { width: "70%", height: Math.round(h * 0.032), borderRadius: Math.round(5 * s), backgroundColor: `${onAccent}0.92)` } })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { padding: pad, paddingBottom: 0 }, children: /* @__PURE__ */ jsxs("div", { style: { backgroundColor: c.panel, borderRadius: Math.round(16 * s), border: stroke(s, c.line), padding: Math.round(w * 0.05), display: "flex", flexDirection: "column", gap: Math.round(h * 0.018), boxSizing: "border-box" }, children: [
-      /* @__PURE__ */ jsx("div", { style: { width: "50%", height: Math.round(h * 0.016), borderRadius: 99, backgroundColor: c.blockSoft } }),
-      /* @__PURE__ */ jsx("div", { style: { width: "100%", height: Math.round(h * 0.012), borderRadius: 99, backgroundColor: c.blockSoft, position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, width: `${Math.round(grow * 72)}%`, borderRadius: 99, backgroundColor: accent } }) })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, padding: pad, display: "flex", flexDirection: "column", gap: Math.round(h * 0.018), minHeight: 0 }, children: [0, 1, 2, 3].map(listItem) }),
-    /* @__PURE__ */ jsx("div", { style: { height: Math.round(h * 0.075), backgroundColor: c.panel, borderTop: stroke(s, c.line), display: "flex", alignItems: "center", justifyContent: "space-around", flexShrink: 0 }, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { style: { width: Math.round(w * 0.06), height: Math.round(w * 0.06), borderRadius: Math.round(7 * s), backgroundColor: i === 0 ? accent : c.block } }, i)) })
-  ] });
-};
-
-// src/visual-system/primitives/devices/ProductSurface.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function clampPercent(value, fallback) {
-  if (!Number.isFinite(value)) return fallback;
-  return Math.min(100, Math.max(0, value));
-}
-var ProductSurface = ({
-  mediaUrl = "",
-  progress,
-  width,
-  height,
-  fit = "cover",
-  focusX = 50,
-  focusY = 50,
-  motion = "pushIn",
-  calloutText = "",
-  calloutX = 70,
-  calloutY = 35,
-  accent = TOKEN_DEFAULTS.primary,
-  font = TOKEN_DEFAULTS.font,
-  placeholder
-}) => {
-  const resolvedFit = fit === "contain" ? "contain" : "cover";
-  const resolvedMotion = resolveProductSurfaceMotion(motion);
-  const resolvedFocusX = clampPercent(Number(focusX), 50);
-  const resolvedFocusY = clampPercent(Number(focusY), 50);
-  const resolvedCalloutX = clampPercent(Number(calloutX), 70);
-  const resolvedCalloutY = clampPercent(Number(calloutY), 35);
-  const cleanCallout = stripPipe(String(calloutText || "")).trim();
-  const s = Math.min(width, height) / 1080;
-  const cameraProgress = interpolate(progress, [0.12, 0.94], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const cameraTransform = resolvedMotion === "pushIn" ? `scale(${1 + cameraProgress * 0.06})` : resolvedMotion === "pan" ? `translateX(${2.5 - cameraProgress * 5}%) scale(1.08)` : "none";
-  const calloutProgress = spring(
-    interpolate(progress, [0.42, 0.62], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    }),
-    SPRING_SMOOTH
-  );
-  const calloutPointsLeft = resolvedCalloutX > 58;
-  const calloutFontSize = Math.max(18, 36 * s);
-  const dotSize = Math.max(11, 22 * s);
-  const labelOffset = Math.max(18, 34 * s);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "data-product-surface": "true",
-      "data-camera-motion": resolvedMotion,
-      style: {
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        backgroundColor: "#0b1020"
-      },
-      children: [
-        mediaUrl ? /* @__PURE__ */ jsx2(
-          "img",
-          {
-            src: mediaUrl,
-            alt: "",
-            style: {
-              position: "absolute",
-              inset: 0,
-              width: "100%",
-              height: "100%",
-              display: "block",
-              objectFit: resolvedFit,
-              objectPosition: `${resolvedFocusX}% ${resolvedFocusY}%`,
-              transform: cameraTransform,
-              transformOrigin: `${resolvedFocusX}% ${resolvedFocusY}%`
-            }
-          }
-        ) : placeholder ?? null,
-        mediaUrl && cleanCallout ? /* @__PURE__ */ jsxs2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: `${resolvedCalloutX}%`,
-              top: `${resolvedCalloutY}%`,
-              opacity: calloutProgress,
-              transform: `translate(-50%, -50%) scale(${0.82 + calloutProgress * 0.18})`,
-              transformOrigin: "center",
-              pointerEvents: "none",
-              zIndex: 2
-            },
-            children: [
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    width: dotSize,
-                    height: dotSize,
-                    borderRadius: "50%",
-                    backgroundColor: accent,
-                    border: `${Math.max(2, 4 * s)}px solid #ffffff`,
-                    boxShadow: `0 0 0 ${Math.max(3, 8 * s)}px ${accent}55, 0 ${Math.max(4, 10 * s)}px ${Math.max(10, 26 * s)}px rgba(0,0,0,0.32)`
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    ...calloutPointsLeft ? { right: labelOffset } : { left: labelOffset },
-                    transform: "translateY(-50%)",
-                    maxWidth: width * 0.48,
-                    padding: `${Math.max(5, 10 * s)}px ${Math.max(8, 16 * s)}px`,
-                    borderRadius: Math.max(7, 14 * s),
-                    backgroundColor: "rgba(7,10,18,0.82)",
-                    border: "1px solid rgba(255,255,255,0.22)",
-                    boxShadow: `0 ${Math.max(5, 12 * s)}px ${Math.max(14, 34 * s)}px rgba(0,0,0,0.28)`,
-                    color: "#ffffff",
-                    fontFamily: font,
-                    fontSize: calloutFontSize,
-                    fontWeight: 650,
-                    lineHeight: 1.05,
-                    letterSpacing: "-0.01em",
-                    whiteSpace: "nowrap"
-                  },
-                  children: renderWithEmoji(cleanCallout, calloutFontSize)
-                }
-              )
-            ]
-          }
-        ) : null
-      ]
-    }
-  );
-};
-
-export {
-  WebScreenFill,
-  PhoneScreenFill,
-  resolveProductSurfaceMotion,
-  ProductSurface
-};