@flamingo-stack/openframe-frontend-core 0.0.182 → 0.0.183-snapshot.20260514223203

package/dist/{chunk-CLZ3QQMJ.js → chunk-G7HSS5WZ.js}

@@ -107,6 +107,7 @@ import {
   OpenaiLogoGreyIcon,
   PenEditIcon,
   PencilIcon,
+  PlayIcon,
   PlusIcon,
   PowershellLogoIcon,
   PythonLogoIcon,
@@ -13139,7 +13140,7 @@ init_cn();
 import { useState as useState30, useRef as useRef19, useEffect as useEffect23, memo as memo3, useCallback as useCallback16 } from "react";
 
 // src/components/features/video.tsx
-import { useEffect as useEffect22, useRef as useRef18, useState as useState29 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo12, useRef as useRef18, useState as useState29 } from "react";
 import MuxPlayer from "@mux/mux-player-react";
 import { jsx as jsx97, jsxs as jsxs78 } from "react/jsx-runtime";
 var YT_HOSTS = /* @__PURE__ */ new Set([
@@ -13245,7 +13246,7 @@ function FilePlayer({
       playsInline: true,
       muted,
       preferCmcd: "header",
-      accentColor: "var(--ods-accent)",
+      accentColor: "var(--ods-accent, var(--color-accent-primary))",
       className,
       style: { width: "100%", height: "100%" },
       children: captionsUrl ? /* @__PURE__ */ jsx97(
@@ -13272,6 +13273,10 @@ function YouTubeFacade({
   if (!videoId) return null;
   return /* @__PURE__ */ jsx97(YouTubeFacadeInner, { videoId, title, priority, className, minimalControls });
 }
+var YT_NOCOOKIE_ORIGIN = "https://www.youtube-nocookie.com";
+var YT_STATE_ENDED = 0;
+var YT_STATE_PLAYING = 1;
+var YT_PLAYING_BLUR_DELAY_MS = 1e3;
 function YouTubeFacadeInner({
   videoId,
   title,
@@ -13280,49 +13285,79 @@ function YouTubeFacadeInner({
   minimalControls
 }) {
   const [activated, setActivated] = useState29(false);
-  const wrapperRef = useRef18(null);
-  const embedParams = new URLSearchParams({
-    autoplay: "1",
-    rel: "0",
-    modestbranding: "1",
-    playsinline: "1"
-  });
-  if (minimalControls) {
-    embedParams.set("controls", "0");
-    embedParams.set("showinfo", "0");
-    embedParams.set("fs", "0");
-    embedParams.set("iv_load_policy", "3");
-    embedParams.set("cc_load_policy", "0");
-    embedParams.set("disablekb", "1");
-  }
-  const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?${embedParams.toString()}`;
-  const posterJpg = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;
-  const posterWebp = `https://i.ytimg.com/vi_webp/${videoId}/mqdefault.webp`;
-  useEffect22(() => {
-    if (!activated) return;
-    function handleOutsideClick(event) {
-      const target = event.target;
-      if (!target) return;
-      if (wrapperRef.current?.contains(target)) return;
-      setActivated(false);
+  const iframeRef = useRef18(null);
+  const { embedUrl, posterJpg, posterWebp } = useMemo12(() => {
+    const params = new URLSearchParams({
+      autoplay: "1",
+      rel: "0",
+      modestbranding: "1",
+      playsinline: "1",
+      enablejsapi: "1"
+    });
+    if (minimalControls) {
+      params.set("controls", "0");
+      params.set("fs", "0");
+      params.set("iv_load_policy", "3");
+      params.set("cc_load_policy", "0");
+      params.set("disablekb", "1");
     }
-    document.addEventListener("pointerdown", handleOutsideClick);
-    return () => document.removeEventListener("pointerdown", handleOutsideClick);
-  }, [activated]);
+    return {
+      embedUrl: `${YT_NOCOOKIE_ORIGIN}/embed/${videoId}?${params.toString()}`,
+      posterJpg: `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`,
+      posterWebp: `https://i.ytimg.com/vi_webp/${videoId}/mqdefault.webp`
+    };
+  }, [videoId, minimalControls]);
   useEffect22(() => {
     if (!activated) return;
-    function handleEscape(event) {
-      if (event.key === "Escape") setActivated(false);
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    function subscribe() {
+      iframe?.contentWindow?.postMessage(
+        '{"event":"listening"}',
+        YT_NOCOOKIE_ORIGIN
+      );
     }
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
+    iframe.addEventListener("load", subscribe);
+    subscribe();
+    let blurTimer = null;
+    function handleMessage(event) {
+      if (event.origin !== YT_NOCOOKIE_ORIGIN) return;
+      if (typeof event.data !== "string") return;
+      let payload = null;
+      try {
+        payload = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+      if (!payload || payload.event !== "infoDelivery") return;
+      const state = payload.info?.playerState;
+      if (typeof state !== "number") return;
+      if (state === YT_STATE_PLAYING) {
+        if (blurTimer !== null) return;
+        blurTimer = setTimeout(() => {
+          blurTimer = null;
+          iframeRef.current?.blur();
+        }, YT_PLAYING_BLUR_DELAY_MS);
+        return;
+      }
+      if (state === YT_STATE_ENDED) {
+        setActivated(false);
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => {
+      iframe.removeEventListener("load", subscribe);
+      window.removeEventListener("message", handleMessage);
+      if (blurTimer !== null) clearTimeout(blurTimer);
+    };
   }, [activated]);
   const wrapperClass = `relative w-full ${className ?? ""}`;
   const wrapperStyle = { paddingBottom: "56.25%" };
   if (activated) {
-    return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx97("div", { className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsx97(
       "iframe",
       {
+        ref: iframeRef,
         src: embedUrl,
         allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
         allowFullScreen: true,
@@ -13331,7 +13366,7 @@ function YouTubeFacadeInner({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsx97("div", { className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsxs78(
     "button",
     {
       type: "button",
@@ -13353,7 +13388,7 @@ function YouTubeFacadeInner({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx97("div", { className: "absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30", children: /* @__PURE__ */ jsx97("span", { className: "flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent text-ods-text-on-accent shadow-lg transition-transform duration-200 group-hover:scale-110", children: /* @__PURE__ */ jsx97("svg", { width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", className: "ml-1", children: /* @__PURE__ */ jsx97("polygon", { points: "5,3 19,12 5,21" }) }) }) })
+        /* @__PURE__ */ jsx97("div", { className: "absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30", children: /* @__PURE__ */ jsx97("span", { className: "flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent text-ods-text-on-accent shadow-lg transition-transform duration-200 group-hover:scale-110", children: /* @__PURE__ */ jsx97(PlayIcon, { size: 24, color: "currentColor", className: "ml-1" }) }) })
       ]
     }
   ) });
@@ -13500,7 +13535,7 @@ var MediaCarousel = memo3(function MediaCarousel2({
               loading: "lazy"
             }
           ),
-          (item.type === "video" || item.type === "youtube") && /* @__PURE__ */ jsx98("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx98("div", { className: "bg-black/70 rounded-full p-1", children: /* @__PURE__ */ jsx98("svg", { width: "12", height: "12", fill: "white", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx98("path", { d: "M8 5v14l11-7z" }) }) }) }),
+          (item.type === "video" || item.type === "youtube") && /* @__PURE__ */ jsx98("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx98("div", { className: "bg-black/70 rounded-full p-1", children: /* @__PURE__ */ jsx98(PlayIcon, { size: 12, color: "white" }) }) }),
           isActive && /* @__PURE__ */ jsx98("div", { className: "absolute bottom-1 right-1 w-2 h-2 bg-[#FFC008] rounded-full" })
         ]
       },
@@ -19728,7 +19763,7 @@ function TabContent({
 
 // src/components/ui/tab-navigation.tsx
 init_cn();
-import { useState as useState40, useEffect as useEffect31, useMemo as useMemo12, useRef as useRef23, useCallback as useCallback20 } from "react";
+import { useState as useState40, useEffect as useEffect31, useMemo as useMemo13, useRef as useRef23, useCallback as useCallback20 } from "react";
 import { useSearchParams as useSearchParams3, useRouter as useRouter5, usePathname as usePathname3 } from "next/navigation";
 import { Fragment as Fragment22, jsx as jsx168, jsxs as jsxs137 } from "react/jsx-runtime";
 function TabNavigation({
@@ -19749,7 +19784,7 @@ function TabNavigation({
   const isUrlSyncEnabled = !!urlSync;
   const paramName = typeof urlSync === "object" ? urlSync.paramName || "tab" : "tab";
   const replaceState = typeof urlSync === "object" ? urlSync.replaceState !== false : true;
-  const validTabIds = useMemo12(() => new Set(tabs.map((t) => t.id)), [tabs]);
+  const validTabIds = useMemo13(() => new Set(tabs.map((t) => t.id)), [tabs]);
   const getInitialTab = () => {
     if (isUrlSyncEnabled) {
       const fromUrl = searchParams?.get(paramName) || "";
@@ -20077,7 +20112,7 @@ function SortColumnItem({ column, currentDirection, onSort, onClear }) {
 
 // src/components/ui/tag-key-value-filter.tsx
 init_cn();
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 import { jsx as jsx174, jsxs as jsxs141 } from "react/jsx-runtime";
 function TagKeyValueFilter({
   keys,
@@ -20086,7 +20121,7 @@ function TagKeyValueFilter({
   keysTitle = "Tag Keys",
   className
 }) {
-  const selectedMap = useMemo13(() => {
+  const selectedMap = useMemo14(() => {
     const map = /* @__PURE__ */ new Map();
     for (const tag of selectedTags) {
       const colonIdx = tag.indexOf(":");
@@ -20098,7 +20133,7 @@ function TagKeyValueFilter({
     }
     return map;
   }, [selectedTags]);
-  const activeKeys = useMemo13(() => {
+  const activeKeys = useMemo14(() => {
     return new Set(selectedMap.keys());
   }, [selectedMap]);
   const handleKeyToggle = (key, checked) => {
@@ -21870,7 +21905,7 @@ function OrganizationCard({
 
 // src/components/ui/service-card.tsx
 init_cn();
-import { useMemo as useMemo15, useState as useState44 } from "react";
+import { useMemo as useMemo16, useState as useState44 } from "react";
 import { ExternalLink as ExternalLink3 } from "lucide-react";
 
 // src/components/logs-list.tsx
@@ -22176,7 +22211,7 @@ function ServiceCard({ title, subtitle, icon, tag, rows, className }) {
 function ServiceCardRowItem({ row }) {
   const [revealed, setRevealed] = useState44(false);
   const { copy, copied } = useCopyToClipboard();
-  const actions = useMemo15(() => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }), [row]);
+  const actions = useMemo16(() => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }), [row]);
   const displayValue = row.isSecret ? /* @__PURE__ */ jsx201(MaskedValue, { value: row.value, isRevealed: revealed }) : /* @__PURE__ */ jsx201("span", { children: row.value });
   const handleCopy = () => copy(row.copyValue ?? row.value);
   const openInNewTab = () => {
@@ -23471,7 +23506,7 @@ function TableTimestampCell({
 // src/components/ui/query-report-table/query-report-table.tsx
 init_cn();
 init_button2();
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 
 // src/components/ui/query-report-table/query-report-table-header.tsx
 init_cn();
@@ -23709,7 +23744,7 @@ function QueryReportTable({
   tableClassName
 }) {
   const isCompact = variant === "compact";
-  const columns = useMemo16(
+  const columns = useMemo17(
     () => deriveColumns(data, columnOrder),
     [data, columnOrder]
   );
@@ -23845,7 +23880,7 @@ init_cn();
 
 // src/components/ui/data-table/data-table-column-filter.tsx
 init_cn();
-import { useCallback as useCallback23, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo18 } from "react";
 
 // src/components/ui/data-table/utils.ts
 function getHideClasses2(hideAt) {
@@ -23889,7 +23924,7 @@ function DataTableColumnFilter({
 }) {
   const currentValue = column.getFilterValue();
   const activeCount = currentValue?.length ?? 0;
-  const sections = useMemo17(
+  const sections = useMemo18(
     () => [
       {
         id: column.id,
@@ -23901,7 +23936,7 @@ function DataTableColumnFilter({
     ],
     [column.id, label, options]
   );
-  const currentFilters = useMemo17(
+  const currentFilters = useMemo18(
     () => ({ [column.id]: currentValue ?? EMPTY_ARRAY }),
     [column.id, currentValue]
   );
@@ -24454,7 +24489,7 @@ var DataTable = Object.assign(DataTableRoot, {
 });
 
 // src/components/ui/phone-input.tsx
-import { useCallback as useCallback25, useEffect as useEffect36, useMemo as useMemo18, useRef as useRef30, useState as useState47 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect36, useMemo as useMemo19, useRef as useRef30, useState as useState47 } from "react";
 import { jsx as jsx230, jsxs as jsxs188 } from "react/jsx-runtime";
 function PhoneInput({
   value,
@@ -24466,8 +24501,8 @@ function PhoneInput({
   placeholder = "Phone Number (optional)",
   onKeyDown
 }) {
-  const { priority, others } = useMemo18(() => getCountryPhoneData(), []);
-  const selectedCountry = useMemo18(
+  const { priority, others } = useMemo19(() => getCountryPhoneData(), []);
+  const selectedCountry = useMemo19(
     () => [...priority, ...others].find((c) => c.code === countryCode),
     [countryCode, priority, others]
   );
@@ -27223,7 +27258,7 @@ var ErrorBoundary = class extends Component {
 
 // src/components/features/figma-prototype-viewer.tsx
 init_cn();
-import { useState as useState59, useRef as useRef36, useEffect as useEffect44, useCallback as useCallback28, useMemo as useMemo22 } from "react";
+import { useState as useState59, useRef as useRef36, useEffect as useEffect44, useCallback as useCallback28, useMemo as useMemo23 } from "react";
 
 // src/components/features/section-selector.tsx
 init_cn();
@@ -27613,15 +27648,15 @@ var FigmaPrototypeViewer = ({
   const activeSection = externalActiveSection || internalActiveSection;
   const [isNavigating, setIsNavigating] = useState59(false);
   const [containerDimensions, setContainerDimensions] = useState59({ width: 1200, height: 800 });
-  const viewMode = useMemo22(
+  const viewMode = useMemo23(
     () => getViewMode(screenWidth, isTouchDevice),
     [screenWidth, isTouchDevice]
   );
-  const scaling = useMemo22(
+  const scaling = useMemo23(
     () => calculateScaling(viewMode, containerDimensions, config),
     [viewMode, containerDimensions, config]
   );
-  const embedUrl = useMemo22(() => {
+  const embedUrl = useMemo23(() => {
     try {
       const startingNodeId = resolveStartingPoint(config, viewMode);
       return generateEmbedUrl(config, viewMode, startingNodeId, clientId);
@@ -27630,7 +27665,7 @@ var FigmaPrototypeViewer = ({
       return "";
     }
   }, [config, viewMode, clientId]);
-  const unifiedState = useMemo22(() => ({
+  const unifiedState = useMemo23(() => ({
     viewMode,
     iframeState,
     screenWidth,
@@ -30242,7 +30277,7 @@ function groupByAspectRatio(items, getAspectRatio) {
 }
 
 // src/components/features/video-bites-display.tsx
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo24 } from "react";
 import { jsx as jsx272, jsxs as jsxs224 } from "react/jsx-runtime";
 var RATIO_TO_CSS_ASPECT = {
   portrait: "9 / 16",
@@ -30259,7 +30294,7 @@ function VideoBitesDisplay({
   filterPublished = true,
   showTitle = true
 }) {
-  const grouped = useMemo23(() => {
+  const grouped = useMemo24(() => {
     const filtered = filterPublished ? bites.filter((b) => b.published) : bites;
     const sorted = [...filtered].sort((a, b) => {
       if (!a.created_at && !b.created_at) return 0;
@@ -30426,8 +30461,8 @@ function VideoSourceSelector({
   onVideoSourceTypeChange,
   youtubeUrl,
   onYoutubeUrlChange,
-  uploadedVideoUrl,
-  onUploadedVideoUrlChange,
+  mainVideoUrl,
+  onMainVideoUrlChange,
   onUploadVideo,
   showAIBadge = true,
   isAIGenerated = false,
@@ -30465,7 +30500,7 @@ function VideoSourceSelector({
         });
         setUploadProgress(100);
         setUploadMessage("Upload complete!");
-        onUploadedVideoUrlChange(url);
+        onMainVideoUrlChange(url);
       } catch (err) {
         setUploadError(err instanceof Error ? err.message : "Failed to upload video");
       } finally {
@@ -30477,10 +30512,10 @@ function VideoSourceSelector({
       }
     };
     input.click();
-  }, [onUploadVideo, onUploadedVideoUrlChange]);
+  }, [onUploadVideo, onMainVideoUrlChange]);
   const handleDeleteVideo = useCallback30(() => {
-    onUploadedVideoUrlChange("");
-  }, [onUploadedVideoUrlChange]);
+    onMainVideoUrlChange("");
+  }, [onMainVideoUrlChange]);
   return /* @__PURE__ */ jsxs226("div", { className: `space-y-4 p-6 bg-ods-card border border-ods-border rounded-lg ${className}`, children: [
     showTitle && /* @__PURE__ */ jsxs226("h3", { className: "font-['Azeret_Mono'] text-[18px] font-semibold uppercase text-ods-text-primary flex items-center gap-2", children: [
       /* @__PURE__ */ jsx274(Video6, { className: "h-5 w-5" }),
@@ -30571,10 +30606,10 @@ function VideoSourceSelector({
         /* @__PURE__ */ jsx274("p", { className: "text-xs text-ods-text-secondary", children: uploadMessage })
       ] }),
       uploadError && /* @__PURE__ */ jsx274("p", { className: "text-sm text-ods-attention-red-error mb-3", children: uploadError }),
-      uploadedVideoUrl ? VideoPreviewComponent ? /* @__PURE__ */ jsx274(
+      mainVideoUrl ? VideoPreviewComponent ? /* @__PURE__ */ jsx274(
         VideoPreviewComponent,
         {
-          videoUrl: uploadedVideoUrl,
+          videoUrl: mainVideoUrl,
           onDelete: handleDeleteVideo,
           isAIGenerated
         }
@@ -30584,7 +30619,7 @@ function VideoSourceSelector({
           /* @__PURE__ */ jsx274(
             "video",
             {
-              src: uploadedVideoUrl,
+              src: mainVideoUrl,
               className: "w-full h-auto max-h-[300px] object-contain bg-black",
               controls: true
             }
@@ -33778,4 +33813,4 @@ export {
   TMCG_SOCIAL_PLATFORMS,
   assets
 };
-//# sourceMappingURL=chunk-CLZ3QQMJ.js.map
+//# sourceMappingURL=chunk-G7HSS5WZ.js.map