@linktr.ee/linkapp 0.0.22 → 0.0.23

package/dev-server/preview/Preview.tsx

@@ -15,337 +15,30 @@ import {
 } from "../components/ui/tabs";
 import { cn, renderCssVariables } from "../lib/utils";
 import { SettingsPreview } from "../components/SettingsPreview";
-
-// Theme presets for testing
-// Based on actual CSS variables from live Linktree profiles
-const THEME_PRESETS = {
-  default: {
-    name: "Default (Light)",
-    variables: {
-      "--button-style-text": "#000000",
-      "--button-style-background": "#ffffff",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #ffffff 93%, #000000 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#000000",
-      "--button-style-radius": "8px",
-      "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
-      "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "8px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#eceef1",
-      "--background-contrast-color": "#000000",
-      "--bodyText": "#000000",
-      "--profileTitleText": "#000000",
-      "--profileDescriptionText": "#000000",
-      "--defaultAvatarBackground": "#000000",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#000000",
-      "--linkBackground": "#ffffff",
-      "--linkText": "#000000",
-      "--linkHoverBackground": "color-mix(in srgb, #ffffff 93%, #000000 7%)",
-      "--linkHoverText": "#000000",
-      "--linkShadow": "#000000",
-      "--bannerBackground": "#ffffff",
-      "--bannerText": "#000000",
-      "--desktop-frame-color": "color-mix(in srgb, #eceef1 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#000000",
-    },
-  },
-  dark: {
-    name: "Dark",
-    variables: {
-      "--button-style-text": "#ffffff",
-      "--button-style-background": "#1f2937",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#ffffff",
-      "--button-style-radius": "8px",
-      "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
-      "--button-style-skeleton-color": "rgba(255, 255, 255, 0.1)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "8px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#111827",
-      "--background-contrast-color": "#ffffff",
-      "--bodyText": "#ffffff",
-      "--profileTitleText": "#ffffff",
-      "--profileDescriptionText": "#ffffff",
-      "--defaultAvatarBackground": "#ffffff",
-      "--defaultAvatarText": "#000000",
-      "--socialLinkFill": "#ffffff",
-      "--linkBackground": "#1f2937",
-      "--linkText": "#ffffff",
-      "--linkHoverBackground": "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
-      "--linkHoverText": "#ffffff",
-      "--linkShadow": "#000000",
-      "--bannerBackground": "#1f2937",
-      "--bannerText": "#ffffff",
-      "--desktop-frame-color": "color-mix(in srgb, #111827 88%, white 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#ffffff",
-    },
-  },
-  purple: {
-    name: "Purple",
-    variables: {
-      "--button-style-text": "#ffffff",
-      "--button-style-background": "#7c3aed",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#ede9fe",
-      "--button-style-radius": "16px",
-      "--button-style-inner-radius": "min(16px, max(4px, calc(16px - 8px)))",
-      "--button-style-skeleton-color": "rgba(124, 58, 237, 0.1)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "16px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#faf5ff",
-      "--background-contrast-color": "#1f2937",
-      "--bodyText": "#1f2937",
-      "--profileTitleText": "#1f2937",
-      "--profileDescriptionText": "#1f2937",
-      "--defaultAvatarBackground": "#7c3aed",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#1f2937",
-      "--linkBackground": "#7c3aed",
-      "--linkText": "#ffffff",
-      "--linkHoverBackground": "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
-      "--linkHoverText": "#ffffff",
-      "--linkShadow": "#7c3aed",
-      "--bannerBackground": "#7c3aed",
-      "--bannerText": "#ffffff",
-      "--desktop-frame-color": "color-mix(in srgb, #faf5ff 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#1f2937",
-    },
-  },
-  outline: {
-    name: "Outline Style",
-    variables: {
-      "--button-style-text": "#000000",
-      "--button-style-background": "transparent",
-      "--button-style-background-hover": "rgba(0, 0, 0, 0.05)",
-      "--button-style-border": "2px solid currentColor",
-      "--button-style-border-color": "#000000",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#ffffff",
-      "--button-style-radius": "24px",
-      "--button-style-inner-radius": "min(24px, max(4px, calc(24px - 8px)))",
-      "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "24px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#ffffff",
-      "--background-contrast-color": "#000000",
-      "--bodyText": "#000000",
-      "--profileTitleText": "#000000",
-      "--profileDescriptionText": "#000000",
-      "--defaultAvatarBackground": "#000000",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#000000",
-      "--linkBackground": "transparent",
-      "--linkText": "#000000",
-      "--linkHoverBackground": "rgba(0, 0, 0, 0.05)",
-      "--linkHoverText": "#000000",
-      "--linkShadow": "#000000",
-      "--bannerBackground": "#ffffff",
-      "--bannerText": "#000000",
-      "--desktop-frame-color": "color-mix(in srgb, #ffffff 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#000000",
-    },
-  },
-  rounded: {
-    name: "Fully Rounded",
-    variables: {
-      "--button-style-text": "#ffffff",
-      "--button-style-background": "#059669",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #059669 93%, #ffffff 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#d1fae5",
-      "--button-style-radius": "28px",
-      "--button-style-inner-radius": "28px",
-      "--button-style-skeleton-color": "rgba(5, 150, 105, 0.1)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "28px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#ecfdf5",
-      "--background-contrast-color": "#1f2937",
-      "--bodyText": "#1f2937",
-      "--profileTitleText": "#1f2937",
-      "--profileDescriptionText": "#1f2937",
-      "--defaultAvatarBackground": "#059669",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#1f2937",
-      "--linkBackground": "#059669",
-      "--linkText": "#ffffff",
-      "--linkHoverBackground": "color-mix(in srgb, #059669 93%, #ffffff 7%)",
-      "--linkHoverText": "#ffffff",
-      "--linkShadow": "#059669",
-      "--bannerBackground": "#059669",
-      "--bannerText": "#ffffff",
-      "--desktop-frame-color": "color-mix(in srgb, #ecfdf5 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#1f2937",
-    },
-  },
-};
-
-let iframeCount = 0;
+import { THEME_PRESETS } from "../shared/theme-presets";
 
 export default function Preview() {
   // Initialize state from localStorage
-  const [selectedTab, setSelectedTab] = useState<"classic" | "featured" | "settings">(() => {
+  const [selectedTab, setSelectedTab] = useState<"sheet" | "featured" | "settings">(() => {
     const saved = localStorage.getItem("linkapp-preview-tab");
-    return (saved as "classic" | "featured" | "settings") || "classic";
+    return (saved as "sheet" | "featured" | "settings") || "sheet";
   });
   const [selectedTheme, setSelectedTheme] = useState<keyof typeof THEME_PRESETS>(() => {
     const saved = localStorage.getItem("linkapp-preview-theme");
     return (saved as keyof typeof THEME_PRESETS) || "default";
   });
+  const [selectedGroupLayoutOption, setSelectedGroupLayoutOption] = useState<string | undefined>(() => {
+    const saved = localStorage.getItem("linkapp-preview-groupLayoutOption");
+    return saved || undefined;
+  });
+
+  // Popup dialog state
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
 
-  // Generate unique IDs for iframes
-  const classicIframeId = useMemo(() => `preview-iframe-classic-${iframeCount++}`, []);
-  const featuredIframeId = useMemo(() => `preview-iframe-featured-${iframeCount++}`, []);
+  // Generate unique IDs for iframes using timestamp
+  const sheetIframeId = useMemo(() => `preview-iframe-sheet-${Date.now()}`, []);
+  const featuredIframeId = useMemo(() => `preview-iframe-featured-${Date.now()}`, []);
+  const popupIframeId = useMemo(() => `preview-iframe-popup-${Date.now()}`, []);
 
   // Save selected tab to localStorage
   useEffect(() => {
@@ -357,18 +50,42 @@ export default function Preview() {
     localStorage.setItem("linkapp-preview-theme", selectedTheme);
   }, [selectedTheme]);
 
+  // Save selected groupLayoutOption to localStorage
+  useEffect(() => {
+    if (selectedGroupLayoutOption) {
+      localStorage.setItem("linkapp-preview-groupLayoutOption", selectedGroupLayoutOption);
+    } else {
+      localStorage.removeItem("linkapp-preview-groupLayoutOption");
+    }
+  }, [selectedGroupLayoutOption]);
+
   // 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 mainly for debugging or additional logic if needed
-      if (!ev.height) {
-        console.warn('Preview iframe reported zero height');
-      }
+      // This callback is available for debugging if needed
     },
     []
   );
 
+  // Handle postMessage from featured iframe for OPEN_POPUP
+  const handleMessage = useCallback((event: MessageEvent) => {
+    if (
+      event.data &&
+      typeof event.data === 'object' &&
+      event.data.source === 'linkapp' &&
+      event.data.type === 'OPEN_POPUP'
+    ) {
+      setIsPopupOpen(true);
+    }
+  }, []);
+
+  // Add message listener
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [handleMessage]);
+
 
   const renderedCssVariables = useMemo(() => {
     const themeVariables = THEME_PRESETS[selectedTheme] || THEME_PRESETS.default
@@ -391,7 +108,7 @@ export default function Preview() {
       <Tabs
         value={selectedTab}
         onValueChange={(value) =>
-          setSelectedTab(value as "classic" | "featured" | "settings")
+          setSelectedTab(value as "sheet" | "featured" | "settings")
         }
       >
         <Portal>
@@ -400,7 +117,7 @@ export default function Preview() {
             style={{ zIndex: 1000000 }}
           >
             <TabsList>
-              <TabsTrigger value="classic">Classic</TabsTrigger>
+              <TabsTrigger value="sheet">Sheet</TabsTrigger>
               <TabsTrigger value="featured">Featured</TabsTrigger>
               <TabsTrigger value="settings">Settings</TabsTrigger>
             </TabsList>
@@ -425,26 +142,46 @@ export default function Preview() {
                 ))}
               </select>
             </div>
+
+            {/* Group Layout Option Switcher - Only show for Featured tab */}
+            {selectedTab === "featured" && (
+              <div className="flex items-center gap-2">
+                <label htmlFor="groupLayoutOption-select" className="text-sm font-medium">
+                  Layout:
+                </label>
+                <select
+                  id="groupLayoutOption-select"
+                  value={selectedGroupLayoutOption || "default"}
+                  onChange={(e) =>
+                    setSelectedGroupLayoutOption(e.target.value === "default" ? undefined : e.target.value)
+                  }
+                  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"
+                >
+                  <option value="default">Default</option>
+                  <option value="carousel">Carousel</option>
+                </select>
+              </div>
+            )}
           </div>
         </Portal>
 
         {/* Main Content with Padding for Fixed Tabs */}
         <div className="pt-20">
-          <TabsContent value="classic" className="m-0">
-            {/* Classic Modal - Always Open */}
+          <TabsContent value="sheet" className="m-0">
+            {/* Sheet 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-[64px] grid-cols-[32px_auto_32px] items-center gap-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">
-                      Classic
+                      Sheet
                     </DialogTitle>
 
                     <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
@@ -456,10 +193,10 @@ 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={`classic-${selectedTheme}`}
-                      id={classicIframeId}
-                      src={`/classic?theme=${selectedTheme}`}
-                      style={{ height: '0px', width: '1px', minWidth: '100%', border: 0, borderRadius: '0.5rem' }}
+                      key={`sheet-${selectedTheme}`}
+                      id={sheetIframeId}
+                      src={`/sheet?theme=${selectedTheme}`}
+                      style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
                       checkOrigin={false}
                       onResized={handleResized}
                       heightCalculationMethod="max"
@@ -475,12 +212,12 @@ export default function Preview() {
             <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-linktree-profile-bg">
 
               <div className="w-full max-w-[524px]">
-                <div className="bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button">
+                <div className="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">
                   <IframeResizer
-                    key={`featured-${selectedTheme}`}
+                    key={`featured-${selectedTheme}-${selectedGroupLayoutOption || 'default'}`}
                     id={featuredIframeId}
-                    src={`/featured?theme=${selectedTheme}`}
-                    style={{ height: '0px', width: '1px', minWidth: '100%', border: 0, borderRadius: '0.5rem' }}
+                    src={`/featured?theme=${selectedTheme}${selectedGroupLayoutOption ? `&groupLayoutOption=${selectedGroupLayoutOption}` : ''}`}
+                    style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
                     checkOrigin={false}
                     onResized={handleResized}
                     heightCalculationMethod="max"
@@ -495,6 +232,44 @@ export default function Preview() {
           </TabsContent>
         </div>
       </Tabs>
+
+      {/* Popup Dialog for OPEN_POPUP message */}
+      <Dialog open={isPopupOpen} onOpenChange={setIsPopupOpen} 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">
+                Sheet
+              </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={`popup-${selectedTheme}`}
+                id={popupIframeId}
+                src={`/sheet?theme=${selectedTheme}`}
+                style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
+                checkOrigin={false}
+                onResized={handleResized}
+                heightCalculationMethod="max"
+              />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
     </>
   );

package/dev-server/preview/preview.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@source "../components";
+@source "../preview";
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

package/dev-server/rsbuild.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    // Define fallback values - these will be overridden by dev.ts
+    define: {
+      __PREVIEW_PROPS__: 'undefined',
+      __SETTINGS_CONFIG__: 'undefined',
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, '..'),
+      '@/components': resolve(__dirname, 'components'),
+      '@/lib': resolve(__dirname, 'lib'),
+    },
+  },
+  html: {
+    template: resolve(__dirname, 'index.html'),
+  },
+  server: {
+    port: 3000,
+    strictPort: true,
+  },
+  tools: {
+    postcss: (opts) => {
+      // Support Tailwind CSS v4 via PostCSS
+      opts.postcssOptions = opts.postcssOptions || {}
+      opts.postcssOptions.plugins = opts.postcssOptions.plugins || []
+
+      // Add Tailwind CSS PostCSS plugin
+      try {
+        const tailwindPostcss = require('@tailwindcss/postcss')
+        opts.postcssOptions.plugins.push(tailwindPostcss())
+      } catch {
+        // @tailwindcss/postcss not installed
+      }
+
+      return opts
+    },
+  },
+})