@linktr.ee/linkapp 0.0.21 → 0.0.23

package/dev-server/preview/preview.css

@@ -1,7 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
+@source "../components";
+@source "../preview";
 
 @theme inline {
   --color-background: var(--background);
@@ -41,6 +42,26 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  --color-linktree-button-bg: var(--button-style-background);
+  --color-linktree-button-bg-hover: var(--button-style-background-hover);
+  --color-linktree-button-text: var(--button-style-text);
+  --color-linktree-button-border: var(--button-style-border-color);
+  --color-linktree-button-contrast: var(--button-style-contrast-color);
+  --color-linktree-profile-bg: var(--profileBackground);
+  --color-linktree-body-text: var(--bodyText);
+  --color-linktree-link-bg: var(--linkBackground);
+  --color-linktree-link-text: var(--linkText);
+  --color-linktree-link-bg-hover: var(--linkHoverBackground);
+  --color-linktree-link-hover-text: var(--linkHoverText);
+  --color-linktree-frame: var(--desktop-frame-color);
+  --radius-linktree-button: var(--button-style-radius);
+  --radius-linktree-button-inner: var(--button-style-inner-radius);
+  --spacing-linktree-link-gap: var(--link-gap);
+  --spacing-linktree-inner-padding: var(--link-inner-padding);
+  --font-linktree-primary: var(--profileFontFamilyPrimary);
+  --font-linktree-secondary: var(--profileFontFamilySecondary);
+  --shadow-linktree-button: var(--button-style-shadow);
 }
 
 :root {
@@ -78,39 +99,6 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
 
 @layer base {
   * {

package/dev-server/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="500" height="500" rx="132" fill="#45E55F"></rect>
+<path d="M226.993 168.546L173.931 114L143.128 145.546L198.786 198.607H120.499V242.395H199.157L143.128 296.822L173.931 327.745L249.993 251.312L326.055 327.745L356.859 296.941L300.829 242.515H379.501V198.607H301.214L356.872 145.546L326.069 114L273.007 168.546V91H226.993V168.546ZM273.007 305.102H226.993V409H273.007V305.102Z" fill="black"></path>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>

package/dev-server/public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Linktree",
+  "short_name": "Linktree",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

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
+    },
+  },
+})

package/dev-server/shared/theme-presets.ts

@@ -0,0 +1,315 @@
+/**
+ * Theme presets for testing LinkApps in dev mode
+ * Based on actual CSS variables from live Linktree profiles
+ */
+export 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",
+    },
+  },
+};

package/dev-server/shared/theme-utils.ts

@@ -0,0 +1,38 @@
+/**
+ * Utility functions for theme handling in dev mode
+ */
+
+/**
+ * Merges theme CSS variables with preview props and creates a theme object
+ * compatible with the LinkApp runtime
+ */
+export function mergeThemeProps(
+  themeVariables: Record<string, string>,
+  previewProps: Record<string, unknown> = {},
+  additionalProps: Record<string, unknown> = {}
+) {
+  return {
+    ...previewProps,
+    ...additionalProps,
+    theme: {
+      cssVariables: themeVariables,
+      // Legacy properties (deprecated) - derived from cssVariables
+      textColor: themeVariables["--button-style-text"] || "#000000",
+      backgroundColor: themeVariables["--button-style-background"] || "#ffffff",
+      borderRadius: themeVariables["--button-style-inner-radius"] || "12px",
+      borderColor: themeVariables["--button-style-border-color"] || "#e5e7eb",
+      backgroundHover: themeVariables["--button-style-background-hover"] || "#f3f4f6",
+      contrastColor: themeVariables["--button-style-contrast-color"] || "#ffffff",
+      textHoverColor: themeVariables["--linkHoverText"] || "#111827",
+    },
+  };
+}
+
+/**
+ * Gets theme variables from URL parameters
+ */
+export function getThemeFromUrl(presets: Record<string, Record<string, string>>): Record<string, string> {
+  const params = new URLSearchParams(window.location.search);
+  const themeParam = params.get('theme') || 'default';
+  return presets[themeParam] || presets.default;
+}

package/dev-server/sheet/main.tsx

@@ -0,0 +1,44 @@
+import Sheet from "@/app/sheet";
+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";
+
+// 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>;
+
+// 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 from URL
+const themeVariables = getThemeFromUrl(THEME_VARS);
+
+// Merge with preview props
+const previewProps = __PREVIEW_PROPS__ || {};
+const mergedProps = mergeThemeProps(themeVariables, previewProps);
+
+// 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");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <Sheet {...mergedProps} />
+  </StrictMode>,
+);

package/dev-server/sheet.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sheet - 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>
+
+    <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('; ') + ';'
+      }
+
+      /**
+       * Apply theme CSS variables to :root
+       * Called once on mount from main.tsx
+       * @param {Record<string, string>} variables - CSS variables to apply
+       */
+      function applyTheme(variables) {
+        if (!variables || typeof variables !== 'object') {
+          return
+        }
+
+        // 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(variables) + ' }'
+      }
+
+      // Export applyTheme to be used by main.tsx
+      window.__linkapp_applyTheme = applyTheme
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/sheet/main.tsx"></script>
+  </body>
+</html>

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

@@ -1 +1 @@
-{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAKD,wBAAsB,UAAU,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,iBA+D5E"}
+{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAUA,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAKD,wBAAsB,UAAU,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,iBAoE5E"}