@linktr.ee/linkapp 0.0.21 → 0.0.23

package/dev-server/README.md

@@ -1,13 +1,13 @@
 # Development Server Setup
 
-This directory contains a custom Vite-based development server for previewing LinkApp components with multiple routes and iframe embeds.
+This directory contains a custom Rsbuild-based development server for previewing LinkApp components with multiple routes and iframe embeds.
 
 ## Structure
 
 ```
 dev-server/
 ├── index.html              # Root preview page entry
-├── vite.config.ts         # Vite configuration (MPA setup)
+├── rsbuild.config.ts      # Rsbuild configuration
 ├── server.ts              # TypeScript server launcher
 ├── preview/
 │   ├── main.tsx          # Preview page React entry
@@ -44,12 +44,12 @@ dev-server/
 npm run dev:preview
 ```
 
-This command uses `tsx` to run the TypeScript server script, which programmatically starts Vite with the custom configuration.
+This command uses `tsx` to run the TypeScript server script, which programmatically starts Rsbuild with the custom configuration.
 
 ## Technical Details
 
 ### Multi-Page Application (MPA)
-The setup uses Vite's MPA capability with multiple HTML entry points:
+The setup uses Rsbuild's MPA capability with multiple HTML entry points:
 - Root: `index.html` → Preview page
 - `/classic/`: `classic/index.html` → Classic layout
 - `/featured/`: `featured/index.html` → Featured layout
@@ -77,6 +77,6 @@ Server runs on port 3000 with `strictPort: true` to match requirements.
 This implementation follows a clean separation of concerns:
 - Original app files (`1-demo/app/*`) remain untouched
 - New dev-server directory contains all preview infrastructure
-- Uses Vite's native MPA support for clean routing (no client-side router)
+- Uses Rsbuild's native MPA support for clean routing (no client-side router)
 - TypeScript throughout for type safety
 - Programmatic server creation for flexibility

package/dev-server/components/SettingsPreview.tsx

@@ -0,0 +1,330 @@
+import { LinkAppSettings, SettingsElement } from "../../src/types";
+
+interface SettingsPreviewProps {
+  settings: LinkAppSettings;
+}
+
+export function SettingsPreview({ settings }: SettingsPreviewProps) {
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="space-y-2">
+        <h2 className="text-2xl font-bold">{settings.title}</h2>
+        {settings.overview && (
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            {settings.overview.title && (
+              <h3 className="font-semibold text-blue-900 mb-1">
+                {settings.overview.title}
+              </h3>
+            )}
+            <p className="text-blue-800 text-sm">
+              {settings.overview.description}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Metadata */}
+      <div className="grid grid-cols-2 gap-4 bg-gray-50 border border-gray-200 rounded-lg p-4">
+        <div>
+          <span className="text-sm font-medium text-gray-600">Uses URL:</span>
+          <span className="ml-2 text-sm">
+            {settings.uses_url || settings.has_url ? "Yes" : "No"}
+          </span>
+        </div>
+        <div>
+          <span className="text-sm font-medium text-gray-600">
+            Supports Featured Layout:
+          </span>
+          <span className="ml-2 text-sm">
+            {settings.supports_featured_layout ? "Yes" : "No"}
+          </span>
+        </div>
+        {settings.icon && (
+          <div>
+            <span className="text-sm font-medium text-gray-600">Icon:</span>
+            <span className="ml-2 text-sm">{settings.icon}</span>
+          </div>
+        )}
+        {settings.settings_tab_title && (
+          <div>
+            <span className="text-sm font-medium text-gray-600">
+              Settings Tab Title:
+            </span>
+            <span className="ml-2 text-sm">{settings.settings_tab_title}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Setup Instructions */}
+      {settings.setup_instructions && (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+          {settings.setup_instructions.title && (
+            <h3 className="font-semibold text-green-900 mb-1">
+              {settings.setup_instructions.title}
+            </h3>
+          )}
+          <p className="text-green-800 text-sm">
+            {settings.setup_instructions.description}
+          </p>
+        </div>
+      )}
+
+      {/* Settings Elements */}
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Settings Elements</h3>
+        {settings.elements.length === 0 ? (
+          <p className="text-gray-500 italic">No settings elements defined</p>
+        ) : (
+          <div className="space-y-4">
+            {settings.elements.map((element, index) => (
+              <SettingsElementCard key={element.id} element={element} index={index} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface SettingsElementCardProps {
+  element: SettingsElement;
+  index: number;
+}
+
+function SettingsElementCard({ element, index }: SettingsElementCardProps) {
+  return (
+    <div className="border border-gray-300 rounded-lg p-4 bg-white shadow-sm">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-mono bg-gray-100 px-2 py-1 rounded">
+              {index + 1}
+            </span>
+            <h4 className="font-semibold text-lg">{element.title || element.label}</h4>
+          </div>
+          <p className="text-sm text-gray-600 mt-1">
+            <span className="font-mono text-xs bg-blue-100 text-blue-800 px-1.5 py-0.5 rounded">
+              {element.id}
+            </span>
+          </p>
+        </div>
+        <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+          {element.inputType}
+        </span>
+      </div>
+
+      {element.description && (
+        <p className="text-sm text-gray-700 mb-3">{element.description}</p>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+        {element.placeholder && (
+          <div>
+            <span className="font-medium text-gray-600">Placeholder:</span>
+            <span className="ml-2 text-gray-800">{element.placeholder}</span>
+          </div>
+        )}
+
+        {element.defaultValue !== undefined && (
+          <div>
+            <span className="font-medium text-gray-600">Default Value:</span>
+            <span className="ml-2 text-gray-800 font-mono text-xs">
+              {typeof element.defaultValue === "boolean"
+                ? element.defaultValue.toString()
+                : Array.isArray(element.defaultValue)
+                  ? `[${element.defaultValue.join(", ")}]`
+                  : element.defaultValue}
+            </span>
+          </div>
+        )}
+
+        {element.validation && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Validation:</span>
+            <div className="ml-2 mt-1 space-y-1">
+              {element.validation.required && (
+                <div className="text-xs">
+                  <span className="bg-red-100 text-red-800 px-2 py-0.5 rounded">
+                    Required
+                  </span>
+                </div>
+              )}
+              {element.validation.minLength !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Min Length: {element.validation.minLength}
+                </div>
+              )}
+              {element.validation.maxLength !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Max Length: {element.validation.maxLength}
+                </div>
+              )}
+              {element.validation.min !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Min: {element.validation.min}
+                </div>
+              )}
+              {element.validation.max !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Max: {element.validation.max}
+                </div>
+              )}
+              {element.validation.maxSize !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Max Size: {element.validation.maxSize}
+                </div>
+              )}
+              {element.validation.pattern && (
+                <div className="text-xs text-gray-600 font-mono">
+                  Pattern: {element.validation.pattern}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {element.options && element.options.length > 0 && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Options:</span>
+            <div className="ml-2 mt-1 space-y-1">
+              {element.options.map((option) => (
+                <div key={option.value} className="text-xs bg-gray-50 px-2 py-1 rounded">
+                  <span className="font-mono text-blue-700">{option.value}</span>
+                  <span className="mx-1 text-gray-400">→</span>
+                  <span>{option.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {element.linkBehaviorLabels && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Link Behavior Labels:</span>
+            <div className="ml-2 mt-1 space-y-1">
+              <div className="text-xs">
+                <span className="font-medium">Embed:</span> {element.linkBehaviorLabels.embedLabel}
+              </div>
+              <div className="text-xs">
+                <span className="font-medium">Link Off:</span> {element.linkBehaviorLabels.linkOffLabel}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {element.accept && element.accept.length > 0 && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Accepted Files:</span>
+            <span className="ml-2 text-xs font-mono">
+              {element.accept.join(", ")}
+            </span>
+          </div>
+        )}
+
+        {element.multiple && (
+          <div>
+            <span className="bg-orange-100 text-orange-800 px-2 py-0.5 rounded text-xs">
+              Multiple values allowed
+            </span>
+          </div>
+        )}
+
+        {element.capability && (
+          <div>
+            <span className="font-medium text-gray-600">Integration Capability:</span>
+            <span className="ml-2 text-xs">{element.capability}</span>
+          </div>
+        )}
+
+        {element.vendor && (
+          <div>
+            <span className="font-medium text-gray-600">Vendor:</span>
+            <span className="ml-2 text-xs">{element.vendor}</span>
+          </div>
+        )}
+
+        {element.array_options && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Array Options:</span>
+            <div className="ml-2 mt-1 space-y-1 text-xs">
+              {element.array_options.add_item_button_text && (
+                <div>Add Button: "{element.array_options.add_item_button_text}"</div>
+              )}
+              {element.array_options.add_item_title && (
+                <div>Add Title: "{element.array_options.add_item_title}"</div>
+              )}
+              {element.array_options.edit_item_title && (
+                <div>Edit Title: "{element.array_options.edit_item_title}"</div>
+              )}
+              {element.array_options.item_format && (
+                <div>Item Format: "{element.array_options.item_format}"</div>
+              )}
+              {element.array_options.min !== undefined && (
+                <div>Min Items: {element.array_options.min}</div>
+              )}
+              {element.array_options.max !== undefined && (
+                <div>Max Items: {element.array_options.max}</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {element.array_elements && element.array_elements.length > 0 && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Array Elements:</span>
+            <div className="ml-2 mt-2 space-y-2">
+              {element.array_elements.map((arrayElement, arrayIndex) => (
+                <div key={arrayElement.id} className="bg-gray-50 border border-gray-200 rounded p-3">
+                  <div className="text-xs font-mono text-blue-700 mb-1">
+                    {arrayElement.id}
+                  </div>
+                  <div className="text-xs">
+                    <span className="font-medium">Type:</span> {arrayElement.inputType}
+                  </div>
+                  {arrayElement.label && (
+                    <div className="text-xs">
+                      <span className="font-medium">Label:</span> {arrayElement.label}
+                    </div>
+                  )}
+                  {arrayElement.placeholder && (
+                    <div className="text-xs">
+                      <span className="font-medium">Placeholder:</span> {arrayElement.placeholder}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {element.conditionalDisplay && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Conditional Display:</span>
+            <div className="ml-2 mt-1 text-xs bg-yellow-50 border border-yellow-200 rounded p-2">
+              Depends on <span className="font-mono">{element.conditionalDisplay.dependsOn}</span>
+              {" "}
+              {element.conditionalDisplay.operator || "equals"}
+              {" "}
+              <span className="font-mono">{String(element.conditionalDisplay.value)}</span>
+            </div>
+          </div>
+        )}
+
+        {element.action && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Action:</span>
+            <div className="ml-2 mt-1 text-xs">
+              On {element.action.on}: {element.action.type}
+              {element.action.data && (
+                <div className="font-mono text-xs mt-1 bg-gray-50 p-1 rounded">
+                  {JSON.stringify(element.action.data, null, 2)}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -45,12 +45,15 @@ 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 w-full translate-x-[-50%] translate-y-[-50%] rounded-3xl duration-200',
           className
         )}
         {...props}
       >
-        {children}
+        <div className="flex h-full flex-col">
+          {children}
+        </div>
+
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
@@ -69,7 +72,7 @@ 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(className)}
       {...props}
     />
   )

package/dev-server/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="@rsbuild/core/types" />
+
+import type { LinkAppSettings } from '../src/types'
+
+declare global {
+  const __PREVIEW_PROPS__: Record<string, unknown>
+  const __SETTINGS_CONFIG__: LinkAppSettings
+}

package/dev-server/featured/main.tsx

@@ -2,61 +2,66 @@ import Featured from "@/app/featured";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@/app/globals.css";
+import { THEME_PRESETS } from "../shared/theme-presets";
+import { getThemeFromUrl, mergeThemeProps } from "../shared/theme-utils";
 
-// 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;
+// Try to import FeaturedCarousel if it exists
+let FeaturedCarousel: React.ComponentType<any> | null = null;
+try {
+  FeaturedCarousel = require("@/app/featured-carousel").default;
+} catch (e) {
+  // featured-carousel.tsx doesn't exist, that's ok
+}
+
+// Declare global window property for theme application
+declare global {
+  interface Window {
+    __linkapp_applyTheme?: (variables: Record<string, string>) => void
+  }
+}
 
 // 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",
-  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,
-  },
-};
+// Extract just the variables from THEME_PRESETS for theme lookups
+const THEME_VARS = Object.fromEntries(
+  Object.entries(THEME_PRESETS).map(([key, { variables }]) => [key, variables])
+);
+
+// Get theme variables and groupLayoutOption from URL
+const params = new URLSearchParams(window.location.search);
+const groupLayoutOptionParam = params.get('groupLayoutOption');
+const themeVariables = getThemeFromUrl(THEME_VARS);
+
+// Merge with preview props and add groupLayoutOption
+const previewProps = __PREVIEW_PROPS__ || {};
+const mergedProps = mergeThemeProps(themeVariables, previewProps, {
+  groupLayoutOption: groupLayoutOptionParam || undefined,
+});
+
+// Apply theme CSS variables on mount
+if (themeVariables && window.__linkapp_applyTheme) {
+  window.__linkapp_applyTheme(themeVariables);
+}
 
 const rootElement = document.getElementById("root");
 if (!rootElement) {
   throw new Error("Root element not found");
 }
 
+// Select the appropriate component based on groupLayoutOption parameter
+const LayoutComponent = (groupLayoutOptionParam === 'carousel' && FeaturedCarousel)
+  ? FeaturedCarousel
+  : Featured;
+
+console.log('[Featured Dev Server] Rendering:', {
+  groupLayoutOption: groupLayoutOptionParam,
+  component: groupLayoutOptionParam === 'carousel' && FeaturedCarousel ? 'FeaturedCarousel' : 'Featured',
+  hasFeaturedCarousel: !!FeaturedCarousel,
+});
+
 createRoot(rootElement).render(
   <StrictMode>
-    {Layout ? (
-      <Layout theme={previewProps.theme}>
-        <Featured {...previewProps} />
-      </Layout>
-    ) : (
-      <Featured {...previewProps} />
-    )}
+    <LayoutComponent {...mergedProps} />
   </StrictMode>,
 );

package/dev-server/featured.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Featured - LinkApp</title>
 
+    <!-- iframe-resizer: Required for iframe height auto-adjustment -->
+    <script crossorigin src="https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.js"></script>
+
     <!-- Linktree theme variables will be injected here -->
     <style id="linktree-theme"></style>
 
@@ -21,46 +24,29 @@
       }
 
       /**
-       * Listen for theme updates from parent window
-       * Applies CSS variables to the document root
+       * Apply theme CSS variables to :root
+       * Called once on mount from main.tsx
+       * @param {Record<string, string>} variables - CSS variables to apply
        */
-      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')
+      function applyTheme(variables) {
+        if (!variables || typeof variables !== 'object') {
+          return
+        }
 
-          if (!themeStyle) {
-            console.warn('linktree-theme style element not found')
-            return
-          }
+        // Get the style element where theme variables are injected
+        const themeStyle = document.getElementById('linktree-theme')
 
-          // Inject CSS variables into :root
-          themeStyle.textContent = ':root { ' + renderCssVariables(themeUpdate.payload.variables) + ' }'
+        if (!themeStyle) {
+          console.warn('linktree-theme style element not found')
+          return
+        }
 
-          // 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)
-          })
+        // Inject CSS variables into :root
+        themeStyle.textContent = ':root { ' + renderCssVariables(variables) + ' }'
+      }
 
-          // 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)
+      // Export applyTheme to be used by main.tsx
+      window.__linkapp_applyTheme = applyTheme
     </script>
   </head>
   <body>

package/dev-server/index.html

@@ -5,8 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Preview - LinkApp</title>
 
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Linktree" />
+    <link rel="manifest" href="/site.webmanifest" />
+
     <!-- iframe-resizer: Required for LinkApps to communicate with Linktree parent frame -->
-    <script crossorigin src="https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.min.js"></script>
+    <script crossorigin src="https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/dev-server/lib/utils.ts

@@ -4,3 +4,9 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export const renderCssVariables = (vars: Record<string, string>): string => {
+  return Object.entries(vars)
+    .map((entry) => entry.join(': '))
+    .join('; ') + ';'
+}