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

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

@@ -107,7 +107,6 @@ import {
   OpenaiLogoGreyIcon,
   PenEditIcon,
   PencilIcon,
-  PlayIcon,
   PlusIcon,
   PowershellLogoIcon,
   PythonLogoIcon,
@@ -13140,7 +13139,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, useMemo as useMemo12, useRef as useRef18, useState as useState29 } from "react";
+import { useEffect as useEffect22, 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([
@@ -13273,10 +13272,6 @@ 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,
@@ -13285,79 +13280,49 @@ function YouTubeFacadeInner({
   minimalControls
 }) {
   const [activated, setActivated] = useState29(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");
-    }
-    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]);
+  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;
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-    function subscribe() {
-      iframe?.contentWindow?.postMessage(
-        '{"event":"listening"}',
-        YT_NOCOOKIE_ORIGIN
-      );
+    function handleOutsideClick(event) {
+      const target = event.target;
+      if (!target) return;
+      if (wrapperRef.current?.contains(target)) return;
+      setActivated(false);
     }
-    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);
-      }
+    document.addEventListener("pointerdown", handleOutsideClick);
+    return () => document.removeEventListener("pointerdown", handleOutsideClick);
+  }, [activated]);
+  useEffect22(() => {
+    if (!activated) return;
+    function handleEscape(event) {
+      if (event.key === "Escape") setActivated(false);
     }
-    window.addEventListener("message", handleMessage);
-    return () => {
-      iframe.removeEventListener("load", subscribe);
-      window.removeEventListener("message", handleMessage);
-      if (blurTimer !== null) clearTimeout(blurTimer);
-    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
   }, [activated]);
   const wrapperClass = `relative w-full ${className ?? ""}`;
   const wrapperStyle = { paddingBottom: "56.25%" };
   if (activated) {
-    return /* @__PURE__ */ jsx97("div", { className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, 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,
@@ -13366,7 +13331,7 @@ function YouTubeFacadeInner({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx97("div", { className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: /* @__PURE__ */ jsxs78(
     "button",
     {
       type: "button",
@@ -13388,7 +13353,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(PlayIcon, { size: 24, color: "currentColor", className: "ml-1" }) }) })
+        /* @__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" }) }) }) })
       ]
     }
   ) });
@@ -13535,7 +13500,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(PlayIcon, { size: 12, color: "white" }) }) }),
+          (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" }) }) }) }),
           isActive && /* @__PURE__ */ jsx98("div", { className: "absolute bottom-1 right-1 w-2 h-2 bg-[#FFC008] rounded-full" })
         ]
       },
@@ -19763,7 +19728,7 @@ function TabContent({
 
 // src/components/ui/tab-navigation.tsx
 init_cn();
-import { useState as useState40, useEffect as useEffect31, useMemo as useMemo13, useRef as useRef23, useCallback as useCallback20 } from "react";
+import { useState as useState40, useEffect as useEffect31, useMemo as useMemo12, 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({
@@ -19784,7 +19749,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 = useMemo13(() => new Set(tabs.map((t) => t.id)), [tabs]);
+  const validTabIds = useMemo12(() => new Set(tabs.map((t) => t.id)), [tabs]);
   const getInitialTab = () => {
     if (isUrlSyncEnabled) {
       const fromUrl = searchParams?.get(paramName) || "";
@@ -20112,7 +20077,7 @@ function SortColumnItem({ column, currentDirection, onSort, onClear }) {
 
 // src/components/ui/tag-key-value-filter.tsx
 init_cn();
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { jsx as jsx174, jsxs as jsxs141 } from "react/jsx-runtime";
 function TagKeyValueFilter({
   keys,
@@ -20121,7 +20086,7 @@ function TagKeyValueFilter({
   keysTitle = "Tag Keys",
   className
 }) {
-  const selectedMap = useMemo14(() => {
+  const selectedMap = useMemo13(() => {
     const map = /* @__PURE__ */ new Map();
     for (const tag of selectedTags) {
       const colonIdx = tag.indexOf(":");
@@ -20133,7 +20098,7 @@ function TagKeyValueFilter({
     }
     return map;
   }, [selectedTags]);
-  const activeKeys = useMemo14(() => {
+  const activeKeys = useMemo13(() => {
     return new Set(selectedMap.keys());
   }, [selectedMap]);
   const handleKeyToggle = (key, checked) => {
@@ -21905,7 +21870,7 @@ function OrganizationCard({
 
 // src/components/ui/service-card.tsx
 init_cn();
-import { useMemo as useMemo16, useState as useState44 } from "react";
+import { useMemo as useMemo15, useState as useState44 } from "react";
 import { ExternalLink as ExternalLink3 } from "lucide-react";
 
 // src/components/logs-list.tsx
@@ -22211,7 +22176,7 @@ function ServiceCard({ title, subtitle, icon, tag, rows, className }) {
 function ServiceCardRowItem({ row }) {
   const [revealed, setRevealed] = useState44(false);
   const { copy, copied } = useCopyToClipboard();
-  const actions = useMemo16(() => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }), [row]);
+  const actions = useMemo15(() => ({ 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 = () => {
@@ -23506,7 +23471,7 @@ function TableTimestampCell({
 // src/components/ui/query-report-table/query-report-table.tsx
 init_cn();
 init_button2();
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo16 } from "react";
 
 // src/components/ui/query-report-table/query-report-table-header.tsx
 init_cn();
@@ -23744,7 +23709,7 @@ function QueryReportTable({
   tableClassName
 }) {
   const isCompact = variant === "compact";
-  const columns = useMemo17(
+  const columns = useMemo16(
     () => deriveColumns(data, columnOrder),
     [data, columnOrder]
   );
@@ -23880,7 +23845,7 @@ init_cn();
 
 // src/components/ui/data-table/data-table-column-filter.tsx
 init_cn();
-import { useCallback as useCallback23, useMemo as useMemo18 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo17 } from "react";
 
 // src/components/ui/data-table/utils.ts
 function getHideClasses2(hideAt) {
@@ -23924,7 +23889,7 @@ function DataTableColumnFilter({
 }) {
   const currentValue = column.getFilterValue();
   const activeCount = currentValue?.length ?? 0;
-  const sections = useMemo18(
+  const sections = useMemo17(
     () => [
       {
         id: column.id,
@@ -23936,7 +23901,7 @@ function DataTableColumnFilter({
     ],
     [column.id, label, options]
   );
-  const currentFilters = useMemo18(
+  const currentFilters = useMemo17(
     () => ({ [column.id]: currentValue ?? EMPTY_ARRAY }),
     [column.id, currentValue]
   );
@@ -24489,7 +24454,7 @@ var DataTable = Object.assign(DataTableRoot, {
 });
 
 // src/components/ui/phone-input.tsx
-import { useCallback as useCallback25, useEffect as useEffect36, useMemo as useMemo19, useRef as useRef30, useState as useState47 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect36, useMemo as useMemo18, useRef as useRef30, useState as useState47 } from "react";
 import { jsx as jsx230, jsxs as jsxs188 } from "react/jsx-runtime";
 function PhoneInput({
   value,
@@ -24501,8 +24466,8 @@ function PhoneInput({
   placeholder = "Phone Number (optional)",
   onKeyDown
 }) {
-  const { priority, others } = useMemo19(() => getCountryPhoneData(), []);
-  const selectedCountry = useMemo19(
+  const { priority, others } = useMemo18(() => getCountryPhoneData(), []);
+  const selectedCountry = useMemo18(
     () => [...priority, ...others].find((c) => c.code === countryCode),
     [countryCode, priority, others]
   );
@@ -27258,7 +27223,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 useMemo23 } from "react";
+import { useState as useState59, useRef as useRef36, useEffect as useEffect44, useCallback as useCallback28, useMemo as useMemo22 } from "react";
 
 // src/components/features/section-selector.tsx
 init_cn();
@@ -27648,15 +27613,15 @@ var FigmaPrototypeViewer = ({
   const activeSection = externalActiveSection || internalActiveSection;
   const [isNavigating, setIsNavigating] = useState59(false);
   const [containerDimensions, setContainerDimensions] = useState59({ width: 1200, height: 800 });
-  const viewMode = useMemo23(
+  const viewMode = useMemo22(
     () => getViewMode(screenWidth, isTouchDevice),
     [screenWidth, isTouchDevice]
   );
-  const scaling = useMemo23(
+  const scaling = useMemo22(
     () => calculateScaling(viewMode, containerDimensions, config),
     [viewMode, containerDimensions, config]
   );
-  const embedUrl = useMemo23(() => {
+  const embedUrl = useMemo22(() => {
     try {
       const startingNodeId = resolveStartingPoint(config, viewMode);
       return generateEmbedUrl(config, viewMode, startingNodeId, clientId);
@@ -27665,7 +27630,7 @@ var FigmaPrototypeViewer = ({
       return "";
     }
   }, [config, viewMode, clientId]);
-  const unifiedState = useMemo23(() => ({
+  const unifiedState = useMemo22(() => ({
     viewMode,
     iframeState,
     screenWidth,
@@ -30277,7 +30242,7 @@ function groupByAspectRatio(items, getAspectRatio) {
 }
 
 // src/components/features/video-bites-display.tsx
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo23 } from "react";
 import { jsx as jsx272, jsxs as jsxs224 } from "react/jsx-runtime";
 var RATIO_TO_CSS_ASPECT = {
   portrait: "9 / 16",
@@ -30294,7 +30259,7 @@ function VideoBitesDisplay({
   filterPublished = true,
   showTitle = true
 }) {
-  const grouped = useMemo24(() => {
+  const grouped = useMemo23(() => {
     const filtered = filterPublished ? bites.filter((b) => b.published) : bites;
     const sorted = [...filtered].sort((a, b) => {
       if (!a.created_at && !b.created_at) return 0;
@@ -30461,8 +30426,8 @@ function VideoSourceSelector({
   onVideoSourceTypeChange,
   youtubeUrl,
   onYoutubeUrlChange,
-  mainVideoUrl,
-  onMainVideoUrlChange,
+  uploadedVideoUrl,
+  onUploadedVideoUrlChange,
   onUploadVideo,
   showAIBadge = true,
   isAIGenerated = false,
@@ -30500,7 +30465,7 @@ function VideoSourceSelector({
         });
         setUploadProgress(100);
         setUploadMessage("Upload complete!");
-        onMainVideoUrlChange(url);
+        onUploadedVideoUrlChange(url);
       } catch (err) {
         setUploadError(err instanceof Error ? err.message : "Failed to upload video");
       } finally {
@@ -30512,10 +30477,10 @@ function VideoSourceSelector({
       }
     };
     input.click();
-  }, [onUploadVideo, onMainVideoUrlChange]);
+  }, [onUploadVideo, onUploadedVideoUrlChange]);
   const handleDeleteVideo = useCallback30(() => {
-    onMainVideoUrlChange("");
-  }, [onMainVideoUrlChange]);
+    onUploadedVideoUrlChange("");
+  }, [onUploadedVideoUrlChange]);
   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" }),
@@ -30606,10 +30571,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 }),
-      mainVideoUrl ? VideoPreviewComponent ? /* @__PURE__ */ jsx274(
+      uploadedVideoUrl ? VideoPreviewComponent ? /* @__PURE__ */ jsx274(
         VideoPreviewComponent,
         {
-          videoUrl: mainVideoUrl,
+          videoUrl: uploadedVideoUrl,
           onDelete: handleDeleteVideo,
           isAIGenerated
         }
@@ -30619,7 +30584,7 @@ function VideoSourceSelector({
           /* @__PURE__ */ jsx274(
             "video",
             {
-              src: mainVideoUrl,
+              src: uploadedVideoUrl,
               className: "w-full h-auto max-h-[300px] object-contain bg-black",
               controls: true
             }
@@ -33813,4 +33778,4 @@ export {
   TMCG_SOCIAL_PLATFORMS,
   assets
 };
-//# sourceMappingURL=chunk-Z2A6RJCK.js.map
+//# sourceMappingURL=chunk-CLZ3QQMJ.js.map