@luxfi/ui 8.0.0 → 8.2.0

package/dist/underline-navigation-bar.cjs

@@ -0,0 +1,51 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var UnderlineNavigationBar = React__namespace.forwardRef(({ className, items = [], ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      tag: "nav",
+      ref,
+      className: ui.cn("border-b bg-background", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "container flex h-16 items-center gap-6", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
+        {
+          tag: "a",
+          href: item.href,
+          className: "text-sm font-medium transition-colors hover:text-primary",
+          children: item.label
+        },
+        item.href
+      )) })
+    }
+  );
+});
+UnderlineNavigationBar.displayName = "UnderlineNavigationBar";
+
+exports.UnderlineNavigationBar = UnderlineNavigationBar;

package/dist/underline-navigation-bar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface UnderlineNavigationBarProps extends React.HTMLAttributes<HTMLElement> {
+    items?: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+declare const UnderlineNavigationBar: React.ForwardRefExoticComponent<UnderlineNavigationBarProps & React.RefAttributes<HTMLElement>>;
+export { UnderlineNavigationBar };
+//# sourceMappingURL=underline-navigation-bar.d.ts.map

package/dist/underline-navigation-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"underline-navigation-bar.d.ts","sourceRoot":"","sources":["../src/underline-navigation-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC/C;AAED,QAAA,MAAM,sBAAsB,iGAuB1B,CAAA;AAGF,OAAO,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/underline-navigation-bar.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+var UnderlineNavigationBar = React.forwardRef(({ className, items = [], ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      tag: "nav",
+      ref,
+      className: cn("border-b bg-background", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Box, { className: "container flex h-16 items-center gap-6", children: items.map((item) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          tag: "a",
+          href: item.href,
+          className: "text-sm font-medium transition-colors hover:text-primary",
+          children: item.label
+        },
+        item.href
+      )) })
+    }
+  );
+});
+UnderlineNavigationBar.displayName = "UnderlineNavigationBar";
+
+export { UnderlineNavigationBar };

package/dist/utils/cn.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var ui = require('@hanzo/ui');
+
+
+
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return ui.cn; }
+});

package/dist/utils/cn.js

@@ -0,0 +1 @@
+export { cn } from '@hanzo/ui';

package/dist/white-label.d.ts

@@ -1,9 +1,9 @@
 export declare const LUX_BRAND: {
-    readonly lux: "#7000FF";
-    readonly zoo: "#6C5EFB";
-    readonly hanzo: "#EA580C";
-    readonly pars: "#1C3879";
-    readonly bootnode: "#3B82F6";
+    readonly lux: '#7000FF';
+    readonly zoo: '#6C5EFB';
+    readonly hanzo: '#EA580C';
+    readonly pars: '#1C3879';
+    readonly bootnode: '#3B82F6';
 };
 export declare const PARS_GOLD = "#C8A45C";
 export type LuxBrand = keyof typeof LUX_BRAND;

package/dist/white-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"white-label.d.ts","sourceRoot":"","sources":["../src/white-label.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,SAAS;;;;;;CAQZ,CAAC;AAEX,eAAO,MAAM,SAAS,YAAY,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAE9C,MAAM,MAAM,GAAG,GAAG,QAAQ,CAAC;AAE3B,MAAM,WAAW,WAAW;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;CACnC;AAGD,QAAA,MAAM,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAmD5C,CAAC;AAkCF,eAAO,MAAM,WAAW,EAAE,GAAW,CAAC;AAEtC,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,UAAU,CAclE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,WAAW,CAEjD;AAED,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC"}
+{"version":3,"file":"white-label.d.ts","sourceRoot":"","sources":["../src/white-label.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,SAAS;aACpB,GAAG,EAAE,SAAS;aACd,GAAG,EAAE,SAAS;aACd,KAAK,EAAE,SAAS;aAChB,IAAI,EAAE,SAAS;aAGf,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,eAAO,MAAM,SAAS,YAAY,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAE9C,MAAM,MAAM,GAAG,GAAG,QAAQ,CAAC;AAE3B,MAAM,WAAW,WAAW;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;CACnC;AAGD,QAAA,MAAM,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAmD5C,CAAC;AAkCF,eAAO,MAAM,WAAW,EAAE,GAAW,CAAC;AAEtC,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,UAAU,CAclE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,WAAW,CAEjD;AAED,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC"}

package/dist/youtube-pip-player.cjs

@@ -0,0 +1,489 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var pipPositionStyles = {
+  "bottom-right": {
+    defaultX: (w, pipW) => w - pipW - 24,
+    defaultY: (h, pipH) => h - pipH - 24
+  },
+  "bottom-left": {
+    defaultX: () => 24,
+    defaultY: (h, pipH) => h - pipH - 24
+  },
+  "top-right": {
+    defaultX: (w, pipW) => w - pipW - 24,
+    defaultY: () => 24
+  },
+  "top-left": { defaultX: () => 24, defaultY: () => 24 }
+};
+var youtubePipPlayerVariants = ui.variants(
+  "relative bg-black rounded-[30px] overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "aspect-video max-w-md",
+        md: "aspect-video max-w-2xl",
+        lg: "aspect-video max-w-4xl",
+        full: "w-full aspect-video",
+        hero: "w-full max-h-[calc(100vh-160px)]"
+      }
+    },
+    defaultVariants: {
+      size: "hero"
+    }
+  }
+);
+var YouTubePipPlayer = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    videoId,
+    rotationInterval = 3e4,
+    enablePip = true,
+    defaultMuted = true,
+    showLiveIndicator = true,
+    enableTvEffects = true,
+    pipPosition = "bottom-right",
+    onPlay,
+    onPause,
+    onPipEnter,
+    onPipExit,
+    onMuteChange,
+    ...props
+  }, ref) => {
+    const videoIds = React__namespace.useMemo(
+      () => Array.isArray(videoId) ? videoId : [videoId],
+      [videoId]
+    );
+    const [currentVideoIndex, setCurrentVideoIndex] = React__namespace.useState(0);
+    const [isMuted, setIsMuted] = React__namespace.useState(defaultMuted);
+    const [isPip, setIsPip] = React__namespace.useState(false);
+    const [showPip, setShowPip] = React__namespace.useState(true);
+    const [pipSize, setPipSize] = React__namespace.useState("normal");
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const [isPipHovered, setIsPipHovered] = React__namespace.useState(false);
+    const [showStatic, setShowStatic] = React__namespace.useState(false);
+    const [pipPos, setPipPos] = React__namespace.useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = React__namespace.useState(false);
+    const [dragStart, setDragStart] = React__namespace.useState({ x: 0, y: 0 });
+    const [hasDragged, setHasDragged] = React__namespace.useState(false);
+    const containerRef = React__namespace.useRef(null);
+    const pipContainerRef = React__namespace.useRef(null);
+    const PIP_WIDTH_BASE = 384;
+    const PIP_MARGIN = 24;
+    const getCurrentPipWidth = React__namespace.useCallback(() => {
+      return pipSize === "double" ? PIP_WIDTH_BASE * 2 : PIP_WIDTH_BASE;
+    }, [pipSize]);
+    const getYouTubeEmbedUrl = React__namespace.useCallback(
+      (forPip = false) => {
+        const currentId = videoIds[currentVideoIndex];
+        const muteParam = forPip && isPip ? isMuted ? "1" : "0" : isMuted ? "1" : "0";
+        return `https://www.youtube.com/embed/${currentId}?autoplay=1&mute=${muteParam}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1`;
+      },
+      [videoIds, currentVideoIndex, isMuted, isPip]
+    );
+    React__namespace.useEffect(() => {
+      const checkMobile = () => setIsMobile(window.innerWidth < 768);
+      checkMobile();
+      window.addEventListener("resize", checkMobile);
+      return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    React__namespace.useEffect(() => {
+      if (videoIds.length <= 1) return;
+      const interval = setInterval(() => {
+        setCurrentVideoIndex((prev) => (prev + 1) % videoIds.length);
+      }, rotationInterval);
+      return () => clearInterval(interval);
+    }, [videoIds.length, rotationInterval]);
+    React__namespace.useEffect(() => {
+      if (!enableTvEffects) return;
+      const interval = setInterval(() => {
+        setShowStatic(true);
+        setTimeout(() => setShowStatic(false), 200);
+      }, 3e4);
+      return () => clearInterval(interval);
+    }, [enableTvEffects]);
+    React__namespace.useEffect(() => {
+      if (!enablePip) return;
+      const handleScroll = () => {
+        if (!containerRef.current) return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const shouldShowPip = rect.bottom < 100;
+        const wasInPip = isPip;
+        setIsPip(shouldShowPip);
+        if (shouldShowPip !== wasInPip) {
+          if (shouldShowPip) {
+            onPipEnter?.();
+          } else {
+            onPipExit?.();
+          }
+        }
+      };
+      window.addEventListener("scroll", handleScroll);
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [enablePip, isPip, onPipEnter, onPipExit]);
+    React__namespace.useEffect(() => {
+      if (typeof window === "undefined") return;
+      const pipWidth = getCurrentPipWidth();
+      const pipHeight = pipWidth * 9 / 16;
+      const pos = pipPositionStyles[pipPosition];
+      setPipPos({
+        x: pos.defaultX(window.innerWidth, pipWidth),
+        y: pos.defaultY(window.innerHeight, pipHeight)
+      });
+    }, [getCurrentPipWidth, pipPosition]);
+    React__namespace.useEffect(() => {
+      if (pipSize === "fullscreen" || typeof window === "undefined") return;
+      const pipWidth = getCurrentPipWidth();
+      const pipHeight = pipWidth * 9 / 16;
+      const pos = pipPositionStyles[pipPosition];
+      setPipPos({
+        x: pos.defaultX(window.innerWidth, pipWidth),
+        y: pos.defaultY(window.innerHeight, pipHeight)
+      });
+    }, [pipSize, getCurrentPipWidth, pipPosition]);
+    const handleMouseDown = React__namespace.useCallback(
+      (e) => {
+        if (pipSize === "fullscreen") return;
+        setIsDragging(true);
+        setHasDragged(false);
+        setDragStart({
+          x: e.clientX - pipPos.x,
+          y: e.clientY - pipPos.y
+        });
+      },
+      [pipSize, pipPos]
+    );
+    const handleMouseMove = React__namespace.useCallback(
+      (e) => {
+        if (!isDragging || pipSize === "fullscreen") return;
+        const newX = e.clientX - dragStart.x;
+        const newY = e.clientY - dragStart.y;
+        const distanceMoved = Math.sqrt(
+          Math.pow(newX - pipPos.x, 2) + Math.pow(newY - pipPos.y, 2)
+        );
+        if (distanceMoved > 5) setHasDragged(true);
+        const pipWidth = getCurrentPipWidth();
+        const maxX = window.innerWidth - pipWidth - PIP_MARGIN;
+        const maxY = window.innerHeight - pipWidth * 9 / 16 - PIP_MARGIN;
+        setPipPos({
+          x: Math.max(PIP_MARGIN, Math.min(newX, maxX)),
+          y: Math.max(PIP_MARGIN, Math.min(newY, maxY))
+        });
+      },
+      [isDragging, pipSize, dragStart, pipPos, getCurrentPipWidth]
+    );
+    const handleMouseUp = React__namespace.useCallback(() => {
+      if (isDragging && hasDragged) {
+        const pipWidth = getCurrentPipWidth();
+        const pipHeight = pipWidth * 9 / 16;
+        const pos = pipPositionStyles[pipPosition];
+        setPipPos({
+          x: pos.defaultX(window.innerWidth, pipWidth),
+          y: pos.defaultY(window.innerHeight, pipHeight)
+        });
+      }
+      setIsDragging(false);
+      setHasDragged(false);
+    }, [isDragging, hasDragged, getCurrentPipWidth, pipPosition]);
+    React__namespace.useEffect(() => {
+      if (!isDragging) return;
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    const toggleMute = React__namespace.useCallback(
+      (e) => {
+        e.stopPropagation();
+        const newMuted = !isMuted;
+        setIsMuted(newMuted);
+        onMuteChange?.(newMuted);
+      },
+      [isMuted, onMuteChange]
+    );
+    const cyclePipSize = React__namespace.useCallback((e) => {
+      e.stopPropagation();
+      setPipSize((prev) => {
+        if (prev === "normal") return "double";
+        if (prev === "double") return "fullscreen";
+        return "normal";
+      });
+    }, []);
+    const closePip = React__namespace.useCallback((e) => {
+      e.stopPropagation();
+      setShowPip(false);
+    }, []);
+    const requestFullscreen = React__namespace.useCallback((e) => {
+      e.stopPropagation();
+      if (!containerRef.current) return;
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else {
+        containerRef.current.requestFullscreen();
+      }
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Box,
+        {
+          ref: containerRef,
+          className: ui.cn(
+            youtubePipPlayerVariants({ size }),
+            "group transition-all duration-500",
+            className
+          ),
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          ...props,
+          children: [
+            enableTvEffects && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute -inset-24 bg-gradient-radial from-white/40 via-white/20 to-transparent blur-[100px] opacity-80 pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute -inset-12 bg-gradient-radial from-white/30 via-white/15 to-transparent blur-[60px] opacity-70 pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute -inset-2 rounded-[30px] bg-gradient-to-r from-white/80 via-white/60 to-white/80 opacity-100 blur-2xl animate-pulse pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 rounded-[30px] border-2 border-white/30 shadow-[0_0_60px_rgba(255,255,255,0.5)] pointer-events-none" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                className: "absolute inset-0 rounded-[30px] border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent",
+                style: {
+                  boxShadow: "var(--shadow-bezel)"
+                }
+              }
+            ) }),
+            enableTvEffects && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                className: "absolute inset-0 z-20 pointer-events-none",
+                style: { boxShadow: "var(--shadow-vignette)" }
+              }
+            ),
+            showStatic && enableTvEffects && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "absolute inset-0 z-40 pointer-events-none", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "h-full w-full bg-white/3 animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Box,
+                {
+                  className: "absolute inset-0 opacity-20",
+                  style: {
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E")`
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                tag: "iframe",
+                className: "absolute inset-0 w-full h-full",
+                src: getYouTubeEmbedUrl(),
+                title: "Video",
+                frameBorder: "0",
+                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                allowFullScreen: true
+              }
+            ),
+            enableTvEffects && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 pointer-events-none opacity-[0.02] z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                className: "h-full w-full",
+                style: {
+                  backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                className: ui.cn(
+                  "absolute bottom-6 left-6 flex items-center gap-3 z-30 transition-opacity duration-300",
+                  isHovered ? "opacity-100" : "opacity-0"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Box,
+                    {
+                      tag: "button",
+                      onClick: toggleMute,
+                      className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10",
+                      children: [
+                        isMuted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { style: ui.css("h-4 w-4 text-white") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { style: ui.css("h-4 w-4 text-white") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: isMuted ? "Unmute" : "Mute" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Box,
+                    {
+                      tag: "button",
+                      onClick: requestFullscreen,
+                      className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { style: ui.css("h-4 w-4 text-white") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: "Fullscreen" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            showLiveIndicator && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "absolute top-6 left-6 flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 z-30", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "w-2 h-2 bg-[var(--lux-state-error)] rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "text-xs text-white/90 font-medium tracking-widest uppercase", children: "Live" })
+            ] })
+          ]
+        }
+      ),
+      enablePip && isPip && showPip && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
+        {
+          ref: pipContainerRef,
+          className: ui.cn(
+            "fixed z-50 transition-all ease-out group",
+            pipSize === "fullscreen" ? "inset-0 bg-black/98 backdrop-blur-xl duration-500" : isDragging ? "duration-75" : "duration-300",
+            isDragging ? "cursor-grabbing scale-105 shadow-2xl" : pipSize === "fullscreen" ? "" : "cursor-grab hover:scale-105"
+          ),
+          style: pipSize !== "fullscreen" ? {
+            left: `${pipPos.x}px`,
+            top: `${pipPos.y}px`,
+            filter: isDragging ? "brightness(1.1) drop-shadow(0 20px 40px rgba(0,0,0,0.5))" : "brightness(1)"
+          } : {},
+          onMouseDown: handleMouseDown,
+          onMouseEnter: () => setIsPipHovered(true),
+          onMouseLeave: () => setIsPipHovered(false),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Box,
+            {
+              className: ui.cn(
+                "relative bg-black overflow-hidden transition-all duration-500",
+                pipSize === "fullscreen" ? "w-full h-full" : pipSize === "double" ? "aspect-video rounded-2xl" : "w-96 aspect-video rounded-2xl"
+              ),
+              style: pipSize === "double" ? { width: "768px" } : {},
+              children: [
+                enableTvEffects && pipSize !== "fullscreen" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute -inset-12 rounded-full bg-gradient-radial from-white/30 via-white/10 to-transparent blur-3xl opacity-60 pointer-events-none" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute -inset-1 rounded-2xl bg-gradient-to-r from-white/40 via-white/20 to-white/40 opacity-75 blur-xl animate-pulse pointer-events-none" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Box,
+                    {
+                      className: "absolute inset-0 rounded-2xl border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent",
+                      style: {
+                        boxShadow: "var(--shadow-bezel)"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 pointer-events-none z-10 opacity-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Box,
+                    {
+                      className: "h-full w-full animate-scan",
+                      style: {
+                        backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)"
+                      }
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "absolute inset-0 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Box,
+                    {
+                      tag: "iframe",
+                      className: ui.cn(
+                        "absolute top-0 left-0 w-full h-full object-cover",
+                        pipSize !== "fullscreen" && "rounded-2xl"
+                      ),
+                      style: { aspectRatio: "16 / 9", pointerEvents: "none" },
+                      src: getYouTubeEmbedUrl(true),
+                      title: "Video PiP",
+                      frameBorder: "0",
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowFullScreen: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 z-5" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Box,
+                  {
+                    className: ui.cn(
+                      "absolute flex items-center gap-2 z-30 transition-opacity duration-300",
+                      pipSize === "fullscreen" ? "bottom-10 right-10" : "bottom-3 right-3",
+                      isPipHovered ? "opacity-100" : "opacity-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.Box,
+                        {
+                          tag: "button",
+                          onClick: toggleMute,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: isMuted ? "Unmute" : "Mute",
+                          children: isMuted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { style: ui.css("h-4 w-4 text-white") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { style: ui.css("h-4 w-4 text-white") })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.Box,
+                        {
+                          tag: "button",
+                          onClick: cyclePipSize,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: pipSize === "fullscreen" ? "Normal Size" : pipSize === "double" ? "Fullscreen" : "Double Size",
+                          children: pipSize === "fullscreen" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { style: ui.css("h-4 w-4 text-white") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { style: ui.css("h-4 w-4 text-white") })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.Box,
+                        {
+                          tag: "button",
+                          onClick: closePip,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-[var(--lux-state-error)] transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: "Close",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { style: ui.css("h-4 w-4 text-white") })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showLiveIndicator && pipSize !== "fullscreen" && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute top-3 right-3 z-20", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "w-2 h-2 bg-[var(--lux-state-error)] rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "text-[10px] text-white/80 font-medium tracking-widest uppercase", children: "Live" })
+                ] }) })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+YouTubePipPlayer.displayName = "YouTubePipPlayer";
+
+exports.YouTubePipPlayer = YouTubePipPlayer;
+exports.youtubePipPlayerVariants = youtubePipPlayerVariants;

package/dist/youtube-pip-player.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { VariantProps } from '@hanzo/ui';
+export interface YouTubePipPlayerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause"> {
+    /** YouTube video ID or array of IDs for rotation */
+    videoId: string | string[];
+    /** Auto-rotate videos every N seconds (default: 30) */
+    rotationInterval?: number;
+    /** Enable scroll-based PIP mode */
+    enablePip?: boolean;
+    /** Initial muted state (default: true) */
+    defaultMuted?: boolean;
+    /** Show live indicator */
+    showLiveIndicator?: boolean;
+    /** Enable TV-style visual effects */
+    enableTvEffects?: boolean;
+    /** PIP position (default: bottom-right) */
+    pipPosition?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Callbacks */
+    onPlay?: () => void;
+    onPause?: () => void;
+    onPipEnter?: () => void;
+    onPipExit?: () => void;
+    onMuteChange?: (muted: boolean) => void;
+}
+declare const youtubePipPlayerVariants: (choice?: (import("@hanzo/ui").Choice<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+        hero: string;
+    };
+}> & {
+    class?: import("@hanzo/ui").ClassValue;
+    className?: import("@hanzo/ui").ClassValue;
+}) | undefined) => string;
+export interface YouTubePipPlayerVariantProps extends VariantProps<typeof youtubePipPlayerVariants> {
+}
+declare const YouTubePipPlayer: React.ForwardRefExoticComponent<YouTubePipPlayerProps & YouTubePipPlayerVariantProps & React.RefAttributes<HTMLDivElement>>;
+export { YouTubePipPlayer, youtubePipPlayerVariants };
+//# sourceMappingURL=youtube-pip-player.d.ts.map

package/dist/youtube-pip-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube-pip-player.d.ts","sourceRoot":"","sources":["../src/youtube-pip-player.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,YAAY,EAAiB,MAAM,WAAW,CAAA;AAc5D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACxE,oDAAoD;IACpD,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,qCAAqC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAA;IACvE,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACxC;AAkBD,QAAA,MAAM,wBAAwB;;QAKtB,EAAE;QACF,EAAE;QACF,EAAE;QACF,IAAI;QACJ,IAAI;;;;;yBAOX,CAAA;AAED,MAAM,WAAW,4BACf,SAAQ,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAE1D,QAAA,MAAM,gBAAgB,6HA2gBrB,CAAA;AAID,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,CAAA"}