@linktr.ee/linkapp 0.0.9 → 0.0.11

package/dev-server/classic/main.tsx

@@ -1,13 +1,47 @@
+import Classic from "@/app/classic";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import Layout from "@/app/layout";
-import Classic from "@/app/classic";
 import "@/app/globals.css";
 
-// Mock Linktree context for development
-const mockContext = {
+// Conditionally import Layout if it exists
+const layoutModules = import.meta.glob("@/app/layout.{ts,tsx}", {
+  eager: true,
+});
+const Layout = Object.values(layoutModules)[0]?.default as
+  | React.ComponentType<{ children: React.ReactNode; theme?: any }>
+  | undefined;
+
+// Preview props injected by dev server via Vite define
+declare const __PREVIEW_PROPS__: Record<string, unknown>;
+
+const previewProps = __PREVIEW_PROPS__ || {
   linkUrl: "https://example.com/demo",
-  showTitle: true,
+  theme: {
+    cssVariables: {
+      "--button-style-text": "#000000",
+      "--button-style-background": "#ffffff",
+      "--button-style-inner-radius": "12px",
+      "--button-style-border-color": "#e5e7eb",
+      "--button-style-background-hover": "#f3f4f6",
+      "--button-style-contrast-color": "#ffffff",
+      "--profileBackground": "#ffffff",
+    },
+    // Legacy properties (deprecated)
+    textColor: "#000000",
+    backgroundColor: "#ffffff",
+    borderRadius: "12px",
+    borderColor: "#e5e7eb",
+    backgroundHover: "#f3f4f6",
+    contrastColor: "#ffffff",
+    textHoverColor: "#111827",
+  },
+  locale: "en-US",
+  currency: "USD",
+  username: "demo-user",
+  viewport: {
+    width: 680,
+    height: 800,
+  },
 };
 
 const rootElement = document.getElementById("root");
@@ -17,8 +51,12 @@ if (!rootElement) {
 
 createRoot(rootElement).render(
   <StrictMode>
-    <Layout>
-      <Classic {...mockContext} />
-    </Layout>
+    {Layout ? (
+      <Layout theme={previewProps.theme}>
+        <Classic {...previewProps} />
+      </Layout>
+    ) : (
+      <Classic {...previewProps} />
+    )}
   </StrictMode>,
 );

package/dev-server/classic.html

@@ -4,6 +4,64 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Classic - LinkApp</title>
+
+    <!-- Linktree theme variables will be injected here -->
+    <style id="linktree-theme"></style>
+
+    <script>
+      /**
+       * Helper function to convert CSS variables object to CSS string
+       * @param {Record<string, string>} vars - Object with CSS variable names as keys
+       * @returns {string} CSS string like "--var1: value1; --var2: value2;"
+       */
+      function renderCssVariables(vars) {
+        return Object.entries(vars)
+          .map((entry) => entry.join(': '))
+          .join('; ') + ';'
+      }
+
+      /**
+       * Listen for theme updates from parent window
+       * Applies CSS variables to the document root
+       */
+      window.addEventListener('message', function(event) {
+        // Only process messages with the correct structure
+        if (
+          event.data &&
+          typeof event.data === 'object' &&
+          event.data.type === 'THEME_UPDATE'
+        ) {
+          const themeUpdate = event.data
+
+          // Get the style element where theme variables are injected
+          const themeStyle = document.getElementById('linktree-theme')
+
+          if (!themeStyle) {
+            console.warn('linktree-theme style element not found')
+            return
+          }
+
+          // Inject CSS variables into :root
+          themeStyle.textContent = ':root { ' + renderCssVariables(themeUpdate.payload.variables) + ' }'
+
+          // Remove any existing theme classes
+          const classesToRemove = []
+          document.documentElement.classList.forEach((className) => {
+            if (className.startsWith('linktree-theme-')) {
+              classesToRemove.push(className)
+            }
+          })
+          classesToRemove.forEach((className) => {
+            document.documentElement.classList.remove(className)
+          })
+
+          // Add theme class for additional styling hooks
+          if (themeUpdate.payload.name && themeUpdate.payload.name !== 'legacy') {
+            document.documentElement.classList.add('linktree-theme-' + themeUpdate.payload.name)
+          }
+        }
+      }, false)
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/dev-server/components/ui/dialog.tsx

@@ -1,45 +1,31 @@
-"use client"
+'use client'
 
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
 
-import { cn } from "../../lib/utils"
+import { cn } from '../../lib/utils'
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50",
-        className
-      )}
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
       {...props}
     />
   )
@@ -59,7 +45,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           className
         )}
         {...props}
@@ -79,50 +65,41 @@ function DialogContent({
   )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
       {...props}
     />
   )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
       {...props}
     />
   )
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn('text-lg leading-none font-semibold', className)}
       {...props}
     />
   )
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   )

package/dev-server/components/ui/tabs.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { cn } from "../../lib/utils"
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '../../lib/utils'
 
 const Tabs = TabsPrimitive.Root
 
@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
       className
     )}
     {...props}
@@ -41,7 +41,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       className
     )}
     {...props}

package/dev-server/featured/main.tsx

@@ -1,13 +1,47 @@
+import Featured from "@/app/featured";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import Layout from "@/app/layout";
-import Featured from "@/app/featured";
 import "@/app/globals.css";
 
-// Mock Linktree context for development
-const mockContext = {
+// Conditionally import Layout if it exists
+const layoutModules = import.meta.glob("@/app/layout.{ts,tsx}", {
+  eager: true,
+});
+const Layout = Object.values(layoutModules)[0]?.default as
+  | React.ComponentType<{ children: React.ReactNode; theme?: any }>
+  | undefined;
+
+// Preview props injected by dev server via Vite define
+declare const __PREVIEW_PROPS__: Record<string, unknown>;
+
+const previewProps = __PREVIEW_PROPS__ || {
   linkUrl: "https://example.com/demo",
-  showTitle: true,
+  theme: {
+    cssVariables: {
+      "--button-style-text": "#000000",
+      "--button-style-background": "#ffffff",
+      "--button-style-inner-radius": "12px",
+      "--button-style-border-color": "#e5e7eb",
+      "--button-style-background-hover": "#f3f4f6",
+      "--button-style-contrast-color": "#ffffff",
+      "--profileBackground": "#ffffff",
+    },
+    // Legacy properties (deprecated)
+    textColor: "#000000",
+    backgroundColor: "#ffffff",
+    borderRadius: "12px",
+    borderColor: "#e5e7eb",
+    backgroundHover: "#f3f4f6",
+    contrastColor: "#ffffff",
+    textHoverColor: "#111827",
+  },
+  locale: "en-US",
+  currency: "USD",
+  username: "demo-user",
+  viewport: {
+    width: 680,
+    height: 800,
+  },
 };
 
 const rootElement = document.getElementById("root");
@@ -17,8 +51,12 @@ if (!rootElement) {
 
 createRoot(rootElement).render(
   <StrictMode>
-    <Layout>
-      <Featured {...mockContext} />
-    </Layout>
+    {Layout ? (
+      <Layout theme={previewProps.theme}>
+        <Featured {...previewProps} />
+      </Layout>
+    ) : (
+      <Featured {...previewProps} />
+    )}
   </StrictMode>,
 );

package/dev-server/featured.html

@@ -4,6 +4,64 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Featured - LinkApp</title>
+
+    <!-- Linktree theme variables will be injected here -->
+    <style id="linktree-theme"></style>
+
+    <script>
+      /**
+       * Helper function to convert CSS variables object to CSS string
+       * @param {Record<string, string>} vars - Object with CSS variable names as keys
+       * @returns {string} CSS string like "--var1: value1; --var2: value2;"
+       */
+      function renderCssVariables(vars) {
+        return Object.entries(vars)
+          .map((entry) => entry.join(': '))
+          .join('; ') + ';'
+      }
+
+      /**
+       * Listen for theme updates from parent window
+       * Applies CSS variables to the document root
+       */
+      window.addEventListener('message', function(event) {
+        // Only process messages with the correct structure
+        if (
+          event.data &&
+          typeof event.data === 'object' &&
+          event.data.type === 'THEME_UPDATE'
+        ) {
+          const themeUpdate = event.data
+
+          // Get the style element where theme variables are injected
+          const themeStyle = document.getElementById('linktree-theme')
+
+          if (!themeStyle) {
+            console.warn('linktree-theme style element not found')
+            return
+          }
+
+          // Inject CSS variables into :root
+          themeStyle.textContent = ':root { ' + renderCssVariables(themeUpdate.payload.variables) + ' }'
+
+          // Remove any existing theme classes
+          const classesToRemove = []
+          document.documentElement.classList.forEach((className) => {
+            if (className.startsWith('linktree-theme-')) {
+              classesToRemove.push(className)
+            }
+          })
+          classesToRemove.forEach((className) => {
+            document.documentElement.classList.remove(className)
+          })
+
+          // Add theme class for additional styling hooks
+          if (themeUpdate.payload.name && themeUpdate.payload.name !== 'legacy') {
+            document.documentElement.classList.add('linktree-theme-' + themeUpdate.payload.name)
+          }
+        }
+      }, false)
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/dev-server/lib/utils.ts

@@ -1,5 +1,5 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))