@linktr.ee/linkapp 0.0.47 → 0.0.49

package/dev-server/preview/Preview.tsx

@@ -1,25 +1,22 @@
-import { Portal } from "@radix-ui/react-portal";
-import IframeResizer, { type IFrameComponent } from "iframe-resizer-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { SettingsPreview } from "../components/settings-preview";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogOverlay,
-  DialogTitle,
-} from "../components/ui/dialog";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../components/ui/tabs";
-import { cn, renderCssVariables } from "../lib/utils";
-import { THEME_PRESETS } from "../shared/theme-presets";
+import { Portal } from '@radix-ui/react-portal'
+import IframeResizer from 'iframe-resizer-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { SettingsPreview } from '../components/settings-preview'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../components/ui/dialog'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs'
+import { cn } from '../lib/utils'
+import { broadcastThemeUpdate, createDevParentSimulator } from '../shared/dev-parent-simulator'
+import { THEME_PRESETS } from '../shared/theme-presets'
+
+const IFRAME_STYLE = {
+  height: '0px',
+  width: '1px',
+  minWidth: '100%',
+  border: 0,
+} as const
 
 function Chin({ title }: { title?: string }) {
-  if (!title) return null;
+  if (!title) return null
 
   return (
     <div
@@ -31,370 +28,340 @@ function Chin({ title }: { title?: string }) {
         {title}
       </div>
     </div>
-  );
+  )
 }
 
 export default function Preview() {
-  // These are injected by the dev server
-  // @ts-expect-error - injected by dev server
-  const hasFeatured =
-    typeof __HAS_FEATURED__ !== "undefined" && __HAS_FEATURED__;
-  // @ts-expect-error - injected by dev server
-  const hasCarousel =
-    typeof __HAS_CAROUSEL__ !== "undefined" && __HAS_CAROUSEL__;
+  // These are injected by the dev server via source.define
+  const hasFeatured = typeof __HAS_FEATURED__ !== 'undefined' && __HAS_FEATURED__
+  const hasCarousel = typeof __HAS_FEATURED_CAROUSEL__ !== 'undefined' && __HAS_FEATURED_CAROUSEL__
 
   // Initialize state from localStorage
-  const [selectedTab, setSelectedTab] = useState<
-    "expanded" | "featured" | "carousel" | "settings"
-  >(() => {
-    const saved = localStorage.getItem("linkapp-preview-tab");
-    if (saved === "featured" && !hasFeatured) {
-      return "expanded";
-    }
-    if (saved === "carousel" && !hasCarousel) {
-      return "expanded";
-    }
-    if (saved === "sheet") {
-      return "expanded";
-    }
-    return (
-      (saved as "expanded" | "featured" | "carousel" | "settings") || "expanded"
-    );
-  });
-  const [selectedTheme, setSelectedTheme] = useState<
-    keyof typeof THEME_PRESETS
-  >(() => {
-    const saved = localStorage.getItem("linkapp-preview-theme");
-    return (saved as keyof typeof THEME_PRESETS) || "default";
-  });
+  const [selectedTab, setSelectedTab] = useState<'expanded' | 'featured' | 'carousel' | 'settings'>(() => {
+    const saved = localStorage.getItem('linkapp-preview-tab')
+    if (saved === 'featured' && !hasFeatured) return 'expanded'
+    if (saved === 'carousel' && !hasCarousel) return 'expanded'
+    return (saved as 'expanded' | 'featured' | 'carousel' | 'settings') || 'expanded'
+  })
+  const [selectedTheme, setSelectedTheme] = useState<keyof typeof THEME_PRESETS>(() => {
+    const saved = localStorage.getItem('linkapp-preview-theme')
+    return (saved as keyof typeof THEME_PRESETS) || 'default'
+  })
 
   // Chin configuration from build-time constants
-  const chinPosition = __SETTINGS_CONFIG__?.featured_chin_position;
-  const chinTitle = __PREVIEW_PROPS__?.linkTitle as string | undefined;
-  const isOverlay =
-    chinPosition === "overlayAbove" || chinPosition === "overlayBelow";
+  const chinPosition = __SETTINGS_CONFIG__?.featured_chin_position
+  const chinTitle = __PREVIEW_PROPS__?.linkTitle as string | undefined
 
-  // Popup dialog state
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  // Click and sheet behavior from config
+  const clickBehavior = __SETTINGS_CONFIG__?.featured_head_click_behavior ?? 'default'
+  const sheetBehavior = __SETTINGS_CONFIG__?.sheet_behavior ?? 'default'
+  const canExpand = sheetBehavior !== 'none'
+  const isClickable = clickBehavior !== 'linkOff' && clickBehavior !== 'custom'
+
+  // Expanded overlay state (triggered by EXPAND_LINK_APP message)
+  const [isExpandedOpen, setIsExpandedOpen] = useState(false)
 
   // Generate unique IDs for iframes using timestamp
-  const expandedIframeId = useMemo(
-    () => `preview-iframe-expanded-${Date.now()}`,
-    [],
-  );
-  const featuredIframeId = useMemo(
-    () => `preview-iframe-featured-${Date.now()}`,
-    [],
-  );
-  const carouselIframeId = useMemo(
-    () => `preview-iframe-carousel-${Date.now()}`,
-    [],
-  );
-  const popupIframeId = useMemo(() => `preview-iframe-popup-${Date.now()}`, []);
+  const expandedIframeId = useMemo(() => `preview-iframe-expanded-${Date.now()}`, [])
+  const featuredIframeId = useMemo(() => `preview-iframe-featured-${Date.now()}`, [])
+  const carouselIframeId = useMemo(() => `preview-iframe-carousel-${Date.now()}`, [])
+  const expandedOverlayIframeId = useMemo(() => `preview-iframe-expanded-overlay-${Date.now()}`, [])
 
   // Save selected tab to localStorage
   useEffect(() => {
-    localStorage.setItem("linkapp-preview-tab", selectedTab);
-  }, [selectedTab]);
+    localStorage.setItem('linkapp-preview-tab', selectedTab)
+  }, [selectedTab])
 
-  // Save selected theme to localStorage
+  // Save selected theme to localStorage and broadcast to iframes
   useEffect(() => {
-    localStorage.setItem("linkapp-preview-theme", selectedTheme);
-  }, [selectedTheme]);
-
-  // Handle iframe resize events
-  const handleResized = useCallback(
-    (ev: {
-      iframe: IFrameComponent;
-      height: number;
-      width: number;
-      type: string;
-    }): void => {
-      // IframeResizer automatically handles height adjustments
-      // This callback is available for debugging if needed
-    },
-    [],
-  );
+    localStorage.setItem('linkapp-preview-theme', selectedTheme)
+    // Broadcast theme update to iframes for CSS variable live updates
+    const theme = THEME_PRESETS[selectedTheme] || THEME_PRESETS.default
+    broadcastThemeUpdate(theme.variables, selectedTheme)
+  }, [selectedTheme])
 
   // Handle postMessage from featured iframe for EXPAND_LINK_APP
   const handleMessage = useCallback((event: MessageEvent) => {
     if (
       event.data &&
-      typeof event.data === "object" &&
-      event.data.source === "linkapp" &&
-      event.data.type === "EXPAND_LINK_APP"
+      typeof event.data === 'object' &&
+      event.data.source === 'linkapp' &&
+      event.data.type === 'EXPAND_LINK_APP'
     ) {
-      setIsPopupOpen(true);
+      setIsExpandedOpen(true)
     }
-  }, []);
+  }, [])
+
+  // Handle click on featured preview based on config
+  const handleFeaturedClick = useCallback(() => {
+    if (!canExpand || !isClickable) return
+    setIsExpandedOpen(true)
+  }, [canExpand, isClickable])
 
   // Add message listener
   useEffect(() => {
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [handleMessage]);
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [handleMessage])
 
-  const renderedCssVariables = useMemo(() => {
-    const themeVariables =
-      THEME_PRESETS[selectedTheme] || THEME_PRESETS.default;
-    return renderCssVariables(themeVariables.variables);
-  }, [selectedTheme]);
+  // Initialize dev parent simulator for SDK hooks
+  useEffect(() => {
+    const simulator = createDevParentSimulator({
+      getCurrentTheme: () => THEME_PRESETS[selectedTheme] || THEME_PRESETS.default,
+    })
+    simulator.init()
+    return () => simulator.destroy()
+  }, [selectedTheme])
+
+  // Update favicon to use app icon
+  useEffect(() => {
+    let link = document.querySelector('link[rel="icon"][type="image/svg+xml"]') as HTMLLinkElement | null
+    if (!link) {
+      link = document.createElement('link')
+      link.rel = 'icon'
+      link.type = 'image/svg+xml'
+      document.head.appendChild(link)
+    }
+    link.href = '/app-icon.svg'
+  }, [])
+
+  const themeVariables = useMemo(() => {
+    const theme = THEME_PRESETS[selectedTheme] || THEME_PRESETS.default
+    return theme.variables
+  }, [selectedTheme])
 
   return (
     <>
-      <style>{`:root {
-        ${renderedCssVariables}
-        }`}</style>
-
       <div
-        className={cn("min-h-screen", {
-          "bg-black/50": selectedTab === "expanded",
-          "bg-linktree-frame":
-            selectedTab === "featured" || selectedTab === "carousel",
+        className={cn('min-h-screen', {
+          'bg-black/50': selectedTab === 'expanded',
+          'bg-linktree-frame': selectedTab === 'featured' || selectedTab === 'carousel',
         })}
         id="preview"
       >
-        <Tabs
-          value={selectedTab}
-          onValueChange={(value) =>
-            setSelectedTab(
-              (value === "sheet" ? "expanded" : value) as
-                | "expanded"
-                | "featured"
-                | "carousel"
-                | "settings",
-            )
-          }
-        >
-          <Portal>
-            <div
-              className="fixed top-0 left-0 right-0 p-4 flex justify-center gap-4 bg-background border-b"
-              style={{ zIndex: 1000000 }}
-            >
-              <TabsList>
-                <TabsTrigger value="expanded">Expanded</TabsTrigger>
-                {hasFeatured && (
-                  <TabsTrigger value="featured">Featured</TabsTrigger>
-                )}
-                {hasCarousel && (
-                  <TabsTrigger value="carousel">Carousel</TabsTrigger>
-                )}
-                <TabsTrigger value="settings">Settings</TabsTrigger>
-              </TabsList>
-
-              {/* Theme Switcher */}
-              <div className="flex items-center gap-2">
-                <label htmlFor="theme-select" className="text-sm font-medium">
-                  Theme:
-                </label>
-                <select
-                  id="theme-select"
-                  value={selectedTheme}
-                  onChange={(e) =>
-                    setSelectedTheme(
-                      e.target.value as keyof typeof THEME_PRESETS,
-                    )
-                  }
-                  className="h-9 px-3 py-1 text-sm border border-input bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
-                >
-                  {Object.entries(THEME_PRESETS).map(([key, theme]) => (
-                    <option key={key} value={key}>
-                      {theme.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-          </Portal>
-
-          {/* Main Content with Padding for Fixed Tabs */}
-          <div className="pt-20">
-            <TabsContent value="expanded" className="m-0">
-              {/* Expanded Modal - Always Open */}
-              <Dialog open={true} modal={false}>
-                <DialogContent
-                  className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
-                  showCloseButton={false}
-                >
-                  <DialogHeader className="sticky top-0 bg-white px-4">
-                    <div className="grid h-16 grid-cols-[32px_auto_32px] items-center gap-4">
-                      <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 16 16"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          className=" "
-                          role="img"
-                          aria-hidden="true"
-                        >
-                          <path
-                            fill="currentColor"
-                            d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"
-                          ></path>
-                        </svg>
-                      </button>
-
-                      <DialogTitle className="self-center truncate py-3 text-center">
-                        Expanded
-                      </DialogTitle>
-
-                      <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 16 16"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          className=" "
-                          role="img"
-                          aria-hidden="true"
-                        >
-                          <path
-                            fill="currentColor"
-                            d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"
-                          ></path>
-                        </svg>
-                      </button>
-                    </div>
-                  </DialogHeader>
-
-                  <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
-                    <div className="h-full overflow-y-auto overflow-x-hidden">
-                      <IframeResizer
-                        key={`expanded-${selectedTheme}`}
-                        id={expandedIframeId}
-                        src={`/expanded?theme=${selectedTheme}`}
-                        style={{
-                          height: "0px",
-                          width: "1px",
-                          minWidth: "100%",
-                          border: 0,
-                        }}
-                        checkOrigin={false}
-                        onResized={handleResized}
-                        heightCalculationMethod="max"
-                      />
-                    </div>
-                  </div>
-                </DialogContent>
-              </Dialog>
-            </TabsContent>
-
-            {hasFeatured && (
-              <TabsContent
-                value="featured"
-                className="m-0 flex justify-center p-8"
+        <div style={themeVariables}>
+          <Tabs
+            value={selectedTab}
+            onValueChange={(value) => setSelectedTab(value as 'expanded' | 'featured' | 'carousel' | 'settings')}
+          >
+            <Portal>
+              <div
+                className="fixed top-0 left-0 right-0 p-4 flex justify-center gap-4 bg-background border-b"
+                style={{ zIndex: 1000000 }}
               >
-                <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-gray-100">
-                  <div className="w-full max-w-[524px]">
-                    {chinPosition === "above" && <Chin title={chinTitle} />}
-
-                    <div
-                      className={cn(
-                        "bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button overflow-hidden",
-                        isOverlay && "relative",
-                      )}
-                    >
-                      {chinPosition === "overlay_above" && (
-                        <div className="absolute top-0 left-0 right-0 z-10">
-                          <Chin title={chinTitle} />
-                        </div>
-                      )}
-
-                      <IframeResizer
-                        key={`featured-${selectedTheme}`}
-                        id={featuredIframeId}
-                        src={`/featured?theme=${selectedTheme}`}
-                        style={{
-                          height: "0px",
-                          width: "1px",
-                          minWidth: "100%",
-                          border: 0,
-                        }}
-                        checkOrigin={false}
-                        onResized={handleResized}
-                        heightCalculationMethod="max"
-                      />
-
-                      {chinPosition === "overlayBelow" && (
-                        <div className="absolute bottom-0 left-0 right-0 z-10">
-                          <Chin title={chinTitle} />
-                        </div>
-                      )}
-                    </div>
-
-                    {chinPosition === "below" && <Chin title={chinTitle} />}
-                  </div>
+                <TabsList>
+                  <TabsTrigger value="expanded">Expanded</TabsTrigger>
+                  {hasFeatured && <TabsTrigger value="featured">Featured</TabsTrigger>}
+                  {hasCarousel && <TabsTrigger value="carousel">Carousel</TabsTrigger>}
+                  <TabsTrigger value="settings">Settings</TabsTrigger>
+                </TabsList>
+
+                {/* Theme Switcher */}
+                <div className="flex items-center gap-2">
+                  <label htmlFor="theme-select" className="text-sm font-medium">
+                    Theme:
+                  </label>
+                  <select
+                    id="theme-select"
+                    value={selectedTheme}
+                    onChange={(e) => setSelectedTheme(e.target.value as keyof typeof THEME_PRESETS)}
+                    className="h-9 px-3 py-1 text-sm border border-input bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    {Object.entries(THEME_PRESETS).map(([key, theme]) => (
+                      <option key={key} value={key}>
+                        {theme.name}
+                      </option>
+                    ))}
+                  </select>
                 </div>
+              </div>
+            </Portal>
+
+            {/* Main Content with Padding for Fixed Tabs */}
+            <div className="pt-20">
+              <TabsContent value="expanded" className="m-0">
+                {/* Expanded Modal - Always Open */}
+                <Dialog open={true} modal={false}>
+                  <DialogContent
+                    className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
+                    showCloseButton={false}
+                  >
+                    <DialogHeader className="sticky top-0 bg-white px-4">
+                      <div className="grid h-16 grid-cols-[32px_auto_32px] items-center gap-4">
+                        <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            role="img"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"
+                            />
+                          </svg>
+                        </button>
+
+                        <DialogTitle className="self-center truncate py-3 text-center">Expanded</DialogTitle>
+
+                        <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            role="img"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </DialogHeader>
+
+                    <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
+                      <div className="h-full overflow-y-auto overflow-x-hidden">
+                        <IframeResizer
+                          key={`expanded-${selectedTheme}`}
+                          id={expandedIframeId}
+                          src={`/expanded?theme=${selectedTheme}`}
+                          style={IFRAME_STYLE}
+                          checkOrigin={false}
+                          heightCalculationMethod="max"
+                        />
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
               </TabsContent>
-            )}
 
-            {hasCarousel && (
-              <TabsContent
-                value="carousel"
-                className="m-0 flex justify-center p-8"
-              >
-                <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-gray-100">
-                  <div className="w-full max-w-[524px]">
-                    {chinPosition === "above" && <Chin title={chinTitle} />}
-
-                    <div
-                      className={cn(
-                        "bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button overflow-hidden",
-                        isOverlay && "relative",
-                      )}
-                      style={
-                        !__SETTINGS_CONFIG__?.featured_head_allow_unlocked_aspect_ratio
-                          ? { aspectRatio: "11 / 8" }
-                          : undefined
-                      }
-                    >
-                      {chinPosition === "overlay_above" && (
-                        <div className="absolute top-0 left-0 right-0 z-10">
-                          <Chin title={chinTitle} />
-                        </div>
-                      )}
-
-                      <IframeResizer
-                        key={`carousel-${selectedTheme}`}
-                        id={carouselIframeId}
-                        src={`/featured-carousel?theme=${selectedTheme}`}
-                        style={{
-                          height: "0px",
-                          width: "1px",
-                          minWidth: "100%",
-                          border: 0,
-                        }}
-                        checkOrigin={false}
-                        onResized={handleResized}
-                        heightCalculationMethod="max"
-                      />
-
-                      {chinPosition === "overlayBelow" && (
-                        <div className="absolute bottom-0 left-0 right-0 z-10">
-                          <Chin title={chinTitle} />
-                        </div>
-                      )}
+              {hasFeatured && (
+                <TabsContent value="featured" className="m-0 flex justify-center p-8">
+                  <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-gray-100">
+                    <div className="w-full max-w-[524px]">
+                      {chinPosition === 'above' && <Chin title={chinTitle} />}
+
+                      <div
+                        className={cn(
+                          'relative bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button overflow-hidden',
+                          canExpand && isClickable && 'cursor-pointer'
+                        )}
+                        style={
+                          __SETTINGS_CONFIG__?.featured_head_allow_unlocked_aspect_ratio === false
+                            ? { aspectRatio: '16 / 9' }
+                            : undefined
+                        }
+                        onClick={handleFeaturedClick}
+                      >
+                        {chinPosition === 'overlayAbove' && (
+                          <div className="absolute top-0 left-0 right-0 z-10">
+                            <Chin title={chinTitle} />
+                          </div>
+                        )}
+
+                        <IframeResizer
+                          key={`featured-${selectedTheme}`}
+                          id={featuredIframeId}
+                          src={`/featured?theme=${selectedTheme}`}
+                          style={IFRAME_STYLE}
+                          checkOrigin={false}
+                          heightCalculationMethod="max"
+                        />
+
+                        <button
+                          type="button"
+                          data-testid="NewLinkShareButton"
+                          className="flex h-6 w-6 items-center justify-center rounded-xl text-[var(--button-style-text)] opacity-50 hover:bg-black/10 hover:opacity-100 absolute right-3 !top-auto bottom-[22px]"
+                        >
+                          <svg width="3" height="11" viewBox="0 0 3 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <title>Share</title>
+                            <path
+                              className="fill-[currentColor]"
+                              d="M1.33333 10.6667C0.966667 10.6667 0.652778 10.5361 0.391667 10.275C0.130556 10.0139 0 9.7 0 9.33333C0 8.96667 0.130556 8.65278 0.391667 8.39167C0.652778 8.13056 0.966667 8 1.33333 8C1.7 8 2.01389 8.13056 2.275 8.39167C2.53611 8.65278 2.66667 8.96667 2.66667 9.33333C2.66667 9.7 2.53611 10.0139 2.275 10.275C2.01389 10.5361 1.7 10.6667 1.33333 10.6667ZM1.33333 6.66667C0.966667 6.66667 0.652778 6.53611 0.391667 6.275C0.130556 6.01389 0 5.7 0 5.33333C0 4.96667 0.130556 4.65278 0.391667 4.39167C0.652778 4.13056 0.966667 4 1.33333 4C1.7 4 2.01389 4.13056 2.275 4.39167C2.53611 4.65278 2.66667 4.96667 2.66667 5.33333C2.66667 5.7 2.53611 6.01389 2.275 6.275C2.01389 6.53611 1.7 6.66667 1.33333 6.66667ZM1.33333 2.66667C0.966667 2.66667 0.652778 2.53611 0.391667 2.275C0.130556 2.01389 0 1.7 0 1.33333C0 0.966667 0.130556 0.652778 0.391667 0.391667C0.652778 0.130556 0.966667 0 1.33333 0C1.7 0 2.01389 0.130556 2.275 0.391667C2.53611 0.652778 2.66667 0.966667 2.66667 1.33333C2.66667 1.7 2.53611 2.01389 2.275 2.275C2.01389 2.53611 1.7 2.66667 1.33333 2.66667Z"
+                            />
+                          </svg>
+                        </button>
+
+                        {chinPosition === 'overlayBelow' && (
+                          <div className="absolute bottom-0 left-0 right-0 z-10">
+                            <Chin title={chinTitle} />
+                          </div>
+                        )}
+                      </div>
+
+                      {chinPosition === 'below' && <Chin title={chinTitle} />}
                     </div>
-
-                    {chinPosition === "below" && <Chin title={chinTitle} />}
                   </div>
-                </div>
+                </TabsContent>
+              )}
+
+              {hasCarousel && (
+                <TabsContent value="carousel" className="m-0 flex justify-center p-8">
+                  <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-gray-100">
+                    <div className="w-full max-w-[220px]">
+                      {chinPosition === 'above' && <Chin title={chinTitle} />}
+
+                      <div
+                        className="relative bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button overflow-hidden"
+                        style={
+                          __SETTINGS_CONFIG__?.featured_head_allow_unlocked_aspect_ratio === false
+                            ? { aspectRatio: '11 / 8' }
+                            : undefined
+                        }
+                      >
+                        {chinPosition === 'overlayAbove' && (
+                          <div className="absolute top-0 left-0 right-0 z-10">
+                            <Chin title={chinTitle} />
+                          </div>
+                        )}
+
+                        <IframeResizer
+                          key={`carousel-${selectedTheme}`}
+                          id={carouselIframeId}
+                          src={`/featured-carousel?theme=${selectedTheme}`}
+                          style={IFRAME_STYLE}
+                          checkOrigin={false}
+                          heightCalculationMethod="max"
+                        />
+
+                        {chinPosition === 'overlayBelow' && (
+                          <div className="absolute bottom-0 left-0 right-0 z-10">
+                            <Chin title={chinTitle} />
+                          </div>
+                        )}
+                      </div>
+
+                      {chinPosition === 'below' && <Chin title={chinTitle} />}
+                    </div>
+                  </div>
+                </TabsContent>
+              )}
+
+              <TabsContent value="settings" className="m-0">
+                <SettingsPreview
+                  settings={__SETTINGS_CONFIG__}
+                  manifest={__MANIFEST_CONFIG__}
+                  previewProps={__PREVIEW_PROPS__ as Record<string, unknown> | undefined}
+                />
               </TabsContent>
-            )}
-
-            <TabsContent value="settings" className="m-0">
-              <SettingsPreview settings={__SETTINGS_CONFIG__} />
-            </TabsContent>
-          </div>
-        </Tabs>
+            </div>
+          </Tabs>
+        </div>
 
-        {/* Popup Dialog for EXPAND_LINK_APP message */}
-        <Dialog open={isPopupOpen} onOpenChange={setIsPopupOpen}>
+        {/* Expanded Overlay Dialog for EXPAND_LINK_APP message */}
+        <Dialog open={isExpandedOpen} onOpenChange={setIsExpandedOpen}>
           <DialogContent
-            className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
+            className={cn(
+              'h-[calc(100dvh-2rem)] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto',
+              sheetBehavior === 'expandVideo' ? 'max-w-[800px]' : 'max-w-[608px]'
+            )}
             showCloseButton={false}
           >
             <DialogHeader className="sticky top-0 bg-white px-4">
@@ -406,20 +373,17 @@ export default function Preview() {
                     viewBox="0 0 16 16"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    className=" "
                     role="img"
                     aria-hidden="true"
                   >
                     <path
                       fill="currentColor"
                       d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"
-                    ></path>
+                    />
                   </svg>
                 </button>
 
-                <DialogTitle className="self-center truncate py-3 text-center">
-                  Expanded
-                </DialogTitle>
+                <DialogTitle className="self-center truncate py-3 text-center">Expanded</DialogTitle>
 
                 <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
                   <svg
@@ -428,14 +392,13 @@ export default function Preview() {
                     viewBox="0 0 16 16"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    className=" "
                     role="img"
                     aria-hidden="true"
                   >
                     <path
                       fill="currentColor"
                       d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"
-                    ></path>
+                    />
                   </svg>
                 </button>
               </div>
@@ -444,17 +407,11 @@ export default function Preview() {
             <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
               <div className="h-full overflow-y-auto overflow-x-hidden">
                 <IframeResizer
-                  key={`popup-${selectedTheme}`}
-                  id={popupIframeId}
+                  key={`expanded-overlay-${selectedTheme}`}
+                  id={expandedOverlayIframeId}
                   src={`/expanded?theme=${selectedTheme}`}
-                  style={{
-                    height: "0px",
-                    width: "1px",
-                    minWidth: "100%",
-                    border: 0,
-                  }}
+                  style={IFRAME_STYLE}
                   checkOrigin={false}
-                  onResized={handleResized}
                   heightCalculationMethod="max"
                 />
               </div>
@@ -463,5 +420,5 @@ export default function Preview() {
         </Dialog>
       </div>
     </>
-  );
+  )
 }