@linktr.ee/linkapp 0.0.36 → 0.0.38

package/README.md

@@ -190,6 +190,9 @@ export default defineConfig({
     title: 'My LinkApp Settings',
     uses_url: true,
     featured_chin_position: 'below',
+    featured_head_allow_unlocked_aspect_ratio: true,
+    sheet_behavior: 'expandGeneric',
+    featured_head_click_behavior: 'expand',
     elements: [
       {
         type: 'text',

package/dev-server/featured/main.tsx

@@ -20,7 +20,7 @@ declare global {
   }
 }
 
-// Preview props injected by dev server via Vite define
+// Preview props injected by dev server via define
 declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
 // Extract just the variables from THEME_PRESETS for theme lookups

package/dev-server/preview/main.tsx

@@ -1,15 +1,15 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Preview from './Preview'
-import './preview.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import Preview from "./preview";
+import "./preview.css";
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById("root");
 if (!rootElement) {
-  throw new Error('Root element not found')
+  throw new Error("Root element not found");
 }
 
 createRoot(rootElement).render(
   <StrictMode>
     <Preview />
-  </StrictMode>
-)
+  </StrictMode>,
+);

package/dev-server/preview/preview.tsx

@@ -0,0 +1,417 @@
+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";
+
+function Chin({ title }: { title?: string }) {
+  if (!title) return null;
+
+  return (
+    <div
+      data-testid="NewLinkChin"
+      data-animation-target="link-chin"
+      className="relative flex min-h-16 flex-col justify-center gap-[1px] py-2 tracking-[-0.2px] items-center px-8"
+    >
+      <div className="w-full overflow-hidden overflow-ellipsis text-balance text-[14px] font-medium leading-[1.2] text-[var(--button-style-text)] sm:text-[16px] line-clamp-2 text-center">
+        {title}
+      </div>
+    </div>
+  );
+}
+
+export default function Preview() {
+  // Initialize state from localStorage
+  const [selectedTab, setSelectedTab] = useState<
+    "sheet" | "featured" | "settings"
+  >(() => {
+    const saved = localStorage.getItem("linkapp-preview-tab");
+    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;
+  });
+
+  // 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";
+
+  // Popup dialog state
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  // 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(() => {
+    localStorage.setItem("linkapp-preview-tab", selectedTab);
+  }, [selectedTab]);
+
+  // Save selected theme to localStorage
+  useEffect(() => {
+    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 available for debugging if needed
+    },
+    [],
+  );
+
+  // 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"
+    ) {
+      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;
+    return renderCssVariables(themeVariables.variables);
+  }, [selectedTheme]);
+
+  return (
+    <>
+      <style>{`:root {
+        ${renderedCssVariables}
+        }`}</style>
+
+      <div
+        className={cn("min-h-screen", {
+          "bg-black/50": selectedTab === "sheet",
+          "bg-linktree-frame": selectedTab === "featured",
+        })}
+        id="preview"
+      >
+        <Tabs
+          value={selectedTab}
+          onValueChange={(value) =>
+            setSelectedTab(value as "sheet" | "featured" | "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="sheet">Sheet</TabsTrigger>
+                <TabsTrigger value="featured">Featured</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>
+
+              {/* 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="sheet" className="m-0">
+              {/* Sheet Modal - Always Open */}
+              <Dialog open={true} modal={false}>
+                <DialogOverlay />
+                <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={`sheet-${selectedTheme}`}
+                        id={sheetIframeId}
+                        src={`/sheet?theme=${selectedTheme}`}
+                        style={{
+                          height: "0px",
+                          width: "1px",
+                          minWidth: "100%",
+                          border: 0,
+                        }}
+                        checkOrigin={false}
+                        onResized={handleResized}
+                        heightCalculationMethod="max"
+                      />
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </TabsContent>
+
+            <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(
+                      "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: "16 / 9" }
+                        : undefined
+                    }
+                  >
+                    {chinPosition === "overlay_above" && (
+                      <div className="absolute top-0 left-0 right-0 z-10">
+                        <Chin title={chinTitle} />
+                      </div>
+                    )}
+
+                    <IframeResizer
+                      key={`featured-${selectedTheme}-${selectedGroupLayoutOption || "default"}`}
+                      id={featuredIframeId}
+                      src={`/featured?theme=${selectedTheme}${selectedGroupLayoutOption ? `&groupLayoutOption=${selectedGroupLayoutOption}` : ""}`}
+                      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>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="settings" className="m-0">
+              <SettingsPreview settings={__SETTINGS_CONFIG__} />
+            </TabsContent>
+          </div>
+        </Tabs>
+
+        {/* Popup Dialog for EXPAND_LINK_APP 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/sheet/main.tsx

@@ -12,7 +12,7 @@ declare global {
   }
 }
 
-// Preview props injected by dev server via Vite define
+// Preview props injected by dev server via define
 declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
 // Extract just the variables from THEME_PRESETS for theme lookups

package/dist/commands/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAoBA,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAkXD,wBAAsB,UAAU,CAAC,OAAO,EAAE,UAAU,iBAsSnD"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAmBA,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAmSD,wBAAsB,UAAU,CAAC,OAAO,EAAE,UAAU,iBAsUnD"}