appfunnel 0.4.0 → 0.6.0

package/dist/index.js

@@ -48,7 +48,6 @@ var init_errors = __esm({
 });
 
 // src/lib/logger.ts
-import { readFileSync } from "fs";
 import pc2 from "picocolors";
 import ora from "ora";
 function success(msg) {
@@ -73,12 +72,12 @@ var init_logger = __esm({
 });
 
 // src/lib/auth.ts
-import { readFileSync as readFileSync2, writeFileSync, mkdirSync } from "fs";
+import { readFileSync, writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
 import { homedir } from "os";
 function readCredentials() {
   try {
-    const raw = readFileSync2(CREDENTIALS_PATH, "utf-8");
+    const raw = readFileSync(CREDENTIALS_PATH, "utf-8");
     const data = JSON.parse(raw);
     if (!data.token) return null;
     return data;
@@ -212,12 +211,12 @@ async function initCommand(name) {
           publish: "appfunnel publish"
         },
         dependencies: {
-          "@appfunnel-dev/sdk": "^0.3.0",
+          "@appfunnel-dev/sdk": "^0.6.0",
           react: "^18.3.0",
           "react-dom": "^18.3.0"
         },
         devDependencies: {
-          appfunnel: "^0.3.0",
+          appfunnel: "^0.6.0",
           typescript: "^5.4.0",
           "@types/react": "^18.2.0",
           "@types/react-dom": "^18.2.0",
@@ -365,7 +364,7 @@ import { randomUUID } from "crypto";
 import open from "open";
 async function loginCommand() {
   const state = randomUUID();
-  return new Promise((resolve6, reject) => {
+  return new Promise((resolve5, reject) => {
     const server = createServer((req, res) => {
       const url = new URL(req.url || "/", `http://localhost`);
       if (url.pathname !== "/callback") {
@@ -404,7 +403,7 @@ async function loginCommand() {
       spinner2.stop();
       success(`Logged in as ${email || userId}`);
       server.close();
-      resolve6();
+      resolve5();
     });
     server.listen(0, "127.0.0.1", () => {
       const addr = server.address();
@@ -493,7 +492,7 @@ var init_whoami = __esm({
 });
 
 // src/lib/config.ts
-import { existsSync as existsSync2, readFileSync as readFileSync3 } from "fs";
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
 import { join as join3, resolve } from "path";
 async function loadConfig(cwd) {
   const configPath = join3(cwd, CONFIG_FILE);
@@ -505,7 +504,7 @@ async function loadConfig(cwd) {
     );
   }
   const { transform } = await import("esbuild");
-  const raw = readFileSync3(configPath, "utf-8");
+  const raw = readFileSync2(configPath, "utf-8");
   const result = await transform(raw, {
     loader: "ts",
     format: "esm",
@@ -537,10 +536,10 @@ var init_config = __esm({
 });
 
 // src/lib/version.ts
-import { readFileSync as readFileSync4 } from "fs";
+import { readFileSync as readFileSync3 } from "fs";
 import { join as join4 } from "path";
 function checkVersionCompatibility(cwd) {
-  const cliVersion = getCliVersion();
+  const cliVersion = "0.6.0";
   const sdkVersion = getSdkVersion(cwd);
   const [cliMajor, cliMinor] = cliVersion.split(".").map(Number);
   const [sdkMajor, sdkMinor] = sdkVersion.split(".").map(Number);
@@ -552,19 +551,6 @@ function checkVersionCompatibility(cwd) {
     );
   }
 }
-function getCliVersion() {
-  try {
-    const pkg = JSON.parse(
-      readFileSync4(
-        new URL("../../package.json", import.meta.url),
-        "utf-8"
-      )
-    );
-    return pkg.version;
-  } catch {
-    return "0.0.0";
-  }
-}
 function getSdkVersion(cwd) {
   try {
     const pkgPath = join4(
@@ -574,7 +560,7 @@ function getSdkVersion(cwd) {
       "sdk",
       "package.json"
     );
-    const pkg = JSON.parse(readFileSync4(pkgPath, "utf-8"));
+    const pkg = JSON.parse(readFileSync3(pkgPath, "utf-8"));
     return pkg.version;
   } catch {
     throw new CLIError(
@@ -592,7 +578,7 @@ var init_version = __esm({
 });
 
 // src/extract/pages.ts
-import { readdirSync, readFileSync as readFileSync5, existsSync as existsSync3 } from "fs";
+import { readdirSync, readFileSync as readFileSync4, existsSync as existsSync3 } from "fs";
 import { join as join5, basename } from "path";
 function scanPages(cwd) {
   const pagesDir = resolvePagesDir(cwd);
@@ -619,7 +605,7 @@ async function extractPageDefinitions(cwd, pageKeys) {
   const result = {};
   for (const key of pageKeys) {
     const filePath = join5(pagesDir, `${key}.tsx`);
-    const source = readFileSync5(filePath, "utf-8");
+    const source = readFileSync4(filePath, "utf-8");
     const definition = extractDefinePage(ts, source, filePath);
     if (definition) {
       result[key] = definition;
@@ -708,6 +694,7 @@ var init_pages = __esm({
 
 // src/vite/entry.ts
 import { join as join6 } from "path";
+import { existsSync as existsSync4 } from "fs";
 function generateEntrySource(options) {
   const { config, pages, pagesDir, funnelTsxPath, isDev } = options;
   const pageKeys = Object.keys(pages);
@@ -735,76 +722,197 @@ function generateEntrySource(options) {
   for (const [key, def] of Object.entries(pages)) {
     slugMap[def.slug || key] = key;
   }
+  const priceDataCode = isDev ? options.priceData && options.priceData.size > 0 ? `const priceData = new Map(${JSON.stringify([...options.priceData.entries()])});` : `const priceData = undefined;` : `const priceData = (() => {
+  const rd = typeof window !== 'undefined' && window.__APPFUNNEL_DATA__;
+  if (!rd || !rd.products?.items) return undefined;
+  // Build price map from server-injected product data
+  const map = new Map();
+  for (const item of rd.products.items) {
+    if (item.priceData && item.storePriceId) map.set(item.storePriceId, item.priceData);
+    if (item.trialPriceData && item.trialStorePriceId) map.set(item.trialStorePriceId, item.trialPriceData);
+  }
+  return map.size > 0 ? map : undefined;
+})();`;
   const trackingCode = isDev ? `
 // Dev mode: mock tracking \u2014 log events to console
-const originalFetch = globalThis.fetch;
 globalThis.__APPFUNNEL_DEV__ = true;
 ` : "";
+  const appCssPath = join6(pagesDir, "..", "app.css").replace(/\\/g, "/");
+  const hasAppCss = existsSync4(join6(pagesDir, "..", "app.css"));
   return `
-import { StrictMode, lazy, Suspense, useState, useEffect, useCallback } from 'react'
+import { StrictMode, Component, lazy, Suspense, useState, useCallback, useEffect, useTransition, useDeferredValue, useSyncExternalStore } from 'react'
 import { createRoot } from 'react-dom/client'
-import { FunnelProvider } from '@appfunnel-dev/sdk/internal'
+import { FunnelProvider, useNavigation } from '@appfunnel-dev/sdk'
+${hasAppCss ? `import '${appCssPath}'` : ""}
 import FunnelWrapper from '${funnelTsxPath.replace(/\\/g, "/")}'
 
 ${trackingCode}
 
-const pages = {
+const pageComponents = {
 ${pageImports}
 }
 
+${priceDataCode}
+
 const config = ${JSON.stringify(fullConfig, null, 2)}
 
-const slugToKey = ${JSON.stringify(slugMap)}
 const keyToSlug = ${JSON.stringify(
     Object.fromEntries(Object.entries(slugMap).map(([s, k]) => [k, s]))
   )}
+const slugToKey = ${JSON.stringify(slugMap)}
+
+const DEV_CAMPAIGN_SLUG = 'campaign'
+const DEFAULT_INITIAL = '${config.initialPageKey || pageKeys[0] || "index"}'
+
+/**
+ * Parse the URL to extract basePath, campaignSlug, and initial page.
+ *
+ * URL pattern: /f/<campaignSlug>[/<pageSlug>]
+ *
+ * In dev, redirects bare / to /f/<projectId> so the URL matches production.
+ */
+function parseUrl() {
+  const parts = window.location.pathname.split('/').filter(Boolean)
+
+  // /f/<campaignSlug>[/<pageSlug>]
+  if (parts[0] === 'f' && parts.length >= 2) {
+    const campaignSlug = parts[1]
+    const pageSlug = parts[2] || ''
+    const pageKey = pageSlug ? (slugToKey[pageSlug] || '') : ''
+    return {
+      basePath: '/f/' + campaignSlug,
+      campaignSlug,
+      initialPage: pageKey || DEFAULT_INITIAL,
+    }
+  }
 
-function getInitialPage() {
-  const path = window.location.pathname.split('/').filter(Boolean).pop() || ''
-  return slugToKey[path] || '${config.initialPage || pageKeys[0] || "index"}'
+  // Bare URL \u2192 redirect to /f/<slug> in dev
+  ${isDev ? `
+  window.history.replaceState(null, '', '/f/' + DEV_CAMPAIGN_SLUG)
+  return {
+    basePath: '/f/' + DEV_CAMPAIGN_SLUG,
+    campaignSlug: DEV_CAMPAIGN_SLUG,
+    initialPage: DEFAULT_INITIAL,
+  }` : `
+  return {
+    basePath: '',
+    campaignSlug: '',
+    initialPage: DEFAULT_INITIAL,
+  }`}
 }
 
-function App() {
-  const [currentPage, setCurrentPage] = useState(getInitialPage)
+const { basePath, campaignSlug, initialPage } = parseUrl()
+
+${isDev ? `
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+  componentDidCatch(error, info) {
+    console.error('[AppFunnel] Render error:', error, info)
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: '2rem', fontFamily: 'monospace' }}>
+          <h2 style={{ color: 'red' }}>AppFunnel Error</h2>
+          <pre style={{ whiteSpace: 'pre-wrap', color: '#333' }}>{this.state.error.message}</pre>
+          <pre style={{ whiteSpace: 'pre-wrap', color: '#666', fontSize: '12px' }}>{this.state.error.stack}</pre>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+` : ""}
 
+/**
+ * PageRenderer lives inside FunnelProvider so it can use SDK hooks.
+ * Subscribes to the router \u2014 re-renders when the page changes.
+ * Uses useTransition to keep showing the current page while the next one loads.
+ */
+function PageRenderer() {
+  const { currentPage, goToPage } = useNavigation()
+  const routerPageKey = currentPage?.key || ''
+
+  // Track the displayed page separately so we can transition smoothly
+  const [displayedKey, setDisplayedKey] = useState(routerPageKey)
+  const [isPending, startTransition] = useTransition()
+
+  // When the router's page changes, transition to the new page
+  useEffect(() => {
+    if (routerPageKey && routerPageKey !== displayedKey) {
+      startTransition(() => {
+        setDisplayedKey(routerPageKey)
+      })
+    }
+  }, [routerPageKey, displayedKey])
+
+  // Sync URL with current page
+  const slug = currentPage?.slug || routerPageKey
+  useEffect(() => {
+    const expectedPath = basePath ? basePath + '/' + slug : '/' + slug
+    if (slug && window.location.pathname !== expectedPath) {
+      window.history.pushState(null, '', expectedPath)
+    }
+  }, [slug])
+
+  // Handle browser back/forward
   useEffect(() => {
     const handlePopState = () => {
       const path = window.location.pathname.split('/').filter(Boolean).pop() || ''
-      const pageKey = slugToKey[path]
-      if (pageKey && pageKey !== currentPage) {
-        setCurrentPage(pageKey)
+      const key = slugToKey[path]
+      if (key && key !== routerPageKey) {
+        goToPage(key)
       }
     }
     window.addEventListener('popstate', handlePopState)
     return () => window.removeEventListener('popstate', handlePopState)
-  }, [currentPage])
-
-  // Expose navigation to FunnelProvider's router
-  useEffect(() => {
-    window.__APPFUNNEL_NAVIGATE__ = (pageKey) => {
-      setCurrentPage(pageKey)
-      const slug = keyToSlug[pageKey] || pageKey
-      window.history.pushState(null, '', '/' + slug)
-    }
-    return () => { delete window.__APPFUNNEL_NAVIGATE__ }
-  }, [])
+  }, [routerPageKey, goToPage])
 
-  const PageComponent = pages[currentPage]
+  const PageComponent = pageComponents[displayedKey]
 
   if (!PageComponent) {
-    return <div style={{ padding: '2rem', color: 'red' }}>Page not found: {currentPage}</div>
+    return <div style={{ padding: '2rem', color: 'red' }}>Page not found: {displayedKey}</div>
   }
 
+  return (
+    <Suspense fallback={null}>
+      <PageComponent />
+    </Suspense>
+  )
+}
+
+// Runtime data injected by the server (production only)
+const __rd = typeof window !== 'undefined' && window.__APPFUNNEL_DATA__
+
+function App() {
+  // In production, merge server-injected integrations into config
+  const runtimeConfig = __rd && __rd.integrations
+    ? { ...config, integrations: { ...config.integrations, ...__rd.integrations } }
+    : config
+
+  const sessionData = __rd ? {
+    campaignId: __rd.campaignId || '',
+    funnelId: __rd.funnelId || config.funnelId || '',
+    experimentId: __rd.experimentId || null,
+  } : undefined
+
   return (
     <FunnelProvider
-      config={config}
-      initialPage={currentPage}
-      apiBaseUrl={${isDev ? "''" : "config.settings?.apiBaseUrl || ''"}}
+      config={runtimeConfig}
+      initialPage={initialPage}
+      basePath={basePath}
+      campaignSlug={campaignSlug}
+      priceData={priceData}
+      sessionData={sessionData}
     >
       <FunnelWrapper>
-        <Suspense fallback={null}>
-          <PageComponent />
-        </Suspense>
+        <PageRenderer />
       </FunnelWrapper>
     </FunnelProvider>
   )
@@ -812,9 +920,14 @@ function App() {
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    ${isDev ? "<ErrorBoundary>" : ""}
+      <App />
+    ${isDev ? "</ErrorBoundary>" : ""}
   </StrictMode>
 )
+
+// Reveal body (the host page may set opacity:0 for a loading transition)
+document.body.style.opacity = '1'
 `;
 }
 var init_entry = __esm({
@@ -846,54 +959,66 @@ var init_html = __esm({
 
 // src/vite/plugin.ts
 import { resolve as resolve2, join as join7 } from "path";
-import { existsSync as existsSync4 } from "fs";
+import { existsSync as existsSync5, writeFileSync as writeFileSync3, mkdirSync as mkdirSync3, readFileSync as readFileSync5 } from "fs";
 function appfunnelPlugin(options) {
   const { cwd, config, isDev } = options;
   let pages = options.pages;
   const pagesDir = resolve2(cwd, "src", "pages");
   const funnelTsxPath = resolve2(cwd, "src", "funnel.tsx");
-  let server;
+  const appfunnelDir = join7(cwd, APPFUNNEL_DIR);
+  const htmlPath = join7(appfunnelDir, "index.html");
   function getEntrySource() {
     return generateEntrySource({
       config,
       pages,
       pagesDir,
       funnelTsxPath,
-      isDev
+      isDev,
+      priceData: options.priceData
     });
   }
   return {
     name: "appfunnel",
     config() {
+      mkdirSync3(appfunnelDir, { recursive: true });
+      writeFileSync3(htmlPath, generateHtml(config.name || "AppFunnel"));
       return {
+        // Don't let Vite auto-serve index.html — we handle it ourselves
+        appType: "custom",
         resolve: {
           alias: {
             "@": resolve2(cwd, "src")
           }
         },
-        // Ensure we can import .tsx files
         esbuild: {
           jsx: "automatic"
         },
         optimizeDeps: {
-          include: ["react", "react-dom", "react/jsx-runtime"]
+          include: ["react", "react-dom", "react/jsx-runtime"],
+          force: true
         }
       };
     },
     resolveId(id) {
-      if (id === VIRTUAL_ENTRY_ID) {
+      if (id === VIRTUAL_ENTRY_ID || id === "/" + VIRTUAL_ENTRY_ID) {
         return RESOLVED_VIRTUAL_ENTRY_ID;
       }
       return null;
     },
-    load(id) {
+    async load(id) {
       if (id === RESOLVED_VIRTUAL_ENTRY_ID) {
-        return getEntrySource();
+        const { transform } = await import("esbuild");
+        const source = getEntrySource();
+        const result = await transform(source, {
+          loader: "tsx",
+          jsx: "automatic",
+          sourcefile: "appfunnel-entry.tsx"
+        });
+        return result.code;
       }
       return null;
     },
     configureServer(devServer) {
-      server = devServer;
       const watcher = devServer.watcher;
       watcher.add(pagesDir);
       const handlePagesChange = async () => {
@@ -917,7 +1042,7 @@ function appfunnelPlugin(options) {
         }
       });
       const configPath = join7(cwd, "appfunnel.config.ts");
-      if (existsSync4(configPath)) {
+      if (existsSync5(configPath)) {
         watcher.add(configPath);
         watcher.on("change", (file) => {
           if (file === configPath) {
@@ -926,33 +1051,129 @@ function appfunnelPlugin(options) {
         });
       }
       return () => {
-        devServer.middlewares.use((req, res, next) => {
-          if (req.url?.startsWith("/@") || req.url?.startsWith("/node_modules") || req.url?.startsWith("/src") || req.url?.includes(".")) {
+        devServer.middlewares.use(async (req, res, next) => {
+          const url = req.url?.split("?")[0] || "";
+          if (url.includes(".") || url.startsWith("/@") || url.startsWith("/node_modules")) {
             return next();
           }
-          const html = generateHtml(config.name || "AppFunnel");
-          devServer.transformIndexHtml(req.url || "/", html).then((transformed) => {
+          try {
+            const rawHtml = readFileSync5(htmlPath, "utf-8");
+            const html = await devServer.transformIndexHtml(req.url || "/", rawHtml);
             res.statusCode = 200;
             res.setHeader("Content-Type", "text/html");
-            res.end(transformed);
-          }).catch(next);
+            res.end(html);
+          } catch (err) {
+            next(err);
+          }
         });
       };
     },
-    // For production build: inject the HTML as the input
     transformIndexHtml(html) {
       return html;
     }
   };
 }
-var VIRTUAL_ENTRY_ID, RESOLVED_VIRTUAL_ENTRY_ID;
+var VIRTUAL_ENTRY_ID, RESOLVED_VIRTUAL_ENTRY_ID, APPFUNNEL_DIR;
 var init_plugin = __esm({
   "src/vite/plugin.ts"() {
     "use strict";
     init_entry();
     init_html();
     VIRTUAL_ENTRY_ID = "@appfunnel/entry";
-    RESOLVED_VIRTUAL_ENTRY_ID = "\0" + VIRTUAL_ENTRY_ID;
+    RESOLVED_VIRTUAL_ENTRY_ID = "\0" + VIRTUAL_ENTRY_ID + ".tsx";
+    APPFUNNEL_DIR = ".appfunnel";
+  }
+});
+
+// src/lib/api.ts
+async function apiFetch(path, options) {
+  const { token, apiBaseUrl, ...fetchOpts } = options;
+  const base = apiBaseUrl || DEFAULT_API_BASE3;
+  const url = `${base}${path}`;
+  const isFormData = fetchOpts.body instanceof FormData;
+  const headers = {
+    Authorization: token,
+    ...fetchOpts.headers || {}
+  };
+  if (!isFormData) {
+    headers["Content-Type"] = "application/json";
+  }
+  const response = await fetch(url, {
+    ...fetchOpts,
+    headers
+  });
+  if (!response.ok) {
+    const body = await response.text().catch(() => "");
+    let message = `API request failed: ${response.status} ${response.statusText}`;
+    try {
+      const parsed = JSON.parse(body);
+      if (parsed.error) message = parsed.error;
+      if (parsed.message) message = parsed.message;
+    } catch {
+    }
+    const error2 = new CLIError("API_ERROR", message);
+    error2.statusCode = response.status;
+    throw error2;
+  }
+  return response;
+}
+async function fetchPrices(projectId, storePriceIds, options) {
+  if (storePriceIds.length === 0) return /* @__PURE__ */ new Map();
+  const response = await apiFetch(`/project/${projectId}/headless/prices`, {
+    ...options,
+    method: "POST",
+    body: JSON.stringify({ storePriceIds })
+  });
+  const data = await response.json();
+  return new Map(Object.entries(data.prices || {}));
+}
+async function publishBuild(projectId, funnelId, manifest, assets, options) {
+  const formData = new FormData();
+  formData.set("manifest", JSON.stringify(manifest));
+  if (funnelId) {
+    formData.set("funnelId", funnelId);
+  }
+  for (const asset of assets) {
+    formData.append(
+      "assets",
+      new Blob([new Uint8Array(asset.content)], { type: asset.contentType }),
+      asset.path
+    );
+  }
+  try {
+    const response = await apiFetch(`/project/${projectId}/headless/publish`, {
+      ...options,
+      method: "POST",
+      body: formData
+    });
+    return await response.json();
+  } catch (err) {
+    if (err instanceof CLIError && err.code === "API_ERROR") {
+      if (err.statusCode === 413) {
+        throw new CLIError(
+          "BUNDLE_TOO_LARGE",
+          err.message,
+          "Reduce page bundle sizes. Check for large dependencies."
+        );
+      }
+      if (err.statusCode === 409) {
+        throw new CLIError(
+          "FUNNEL_NOT_HEADLESS",
+          err.message,
+          "Remove funnelId from config to create a new headless funnel."
+        );
+      }
+      throw new CLIError("PUBLISH_FAILED", err.message);
+    }
+    throw err;
+  }
+}
+var DEFAULT_API_BASE3;
+var init_api = __esm({
+  "src/lib/api.ts"() {
+    "use strict";
+    init_errors();
+    DEFAULT_API_BASE3 = "https://api.appfunnel.net";
   }
 });
 
@@ -961,7 +1182,7 @@ var dev_exports = {};
 __export(dev_exports, {
   devCommand: () => devCommand
 });
-import { readFileSync as readFileSync6, writeFileSync as writeFileSync3 } from "fs";
+import { readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
 import { join as join8 } from "path";
 import pc6 from "picocolors";
 async function devCommand(options) {
@@ -978,12 +1199,21 @@ async function devCommand(options) {
     config.projectId = projectId;
     const configPath = join8(cwd, "appfunnel.config.ts");
     const configSource = readFileSync6(configPath, "utf-8");
-    const updated = configSource.replace(
-      /projectId:\s*['"].*?['"]/,
-      `projectId: '${projectId}'`
-    );
+    let updated;
+    if (/projectId:\s*['"]/.test(configSource)) {
+      updated = configSource.replace(
+        /projectId:\s*['"].*?['"]/,
+        `projectId: '${projectId}'`
+      );
+    } else {
+      updated = configSource.replace(
+        /(defineConfig\(\{[\t ]*\n)/,
+        `$1	projectId: '${projectId}',
+`
+      );
+    }
     if (updated !== configSource) {
-      writeFileSync3(configPath, updated);
+      writeFileSync4(configPath, updated);
       success(`Updated projectId in appfunnel.config.ts`);
     } else {
       warn(`Could not auto-update appfunnel.config.ts \u2014 add projectId: '${projectId}' manually.`);
@@ -994,8 +1224,43 @@ async function devCommand(options) {
   let pages = await extractPageDefinitions(cwd, pageKeys);
   s2.stop();
   info(`Found ${pageKeys.length} pages: ${pageKeys.join(", ")}`);
+  let priceData = /* @__PURE__ */ new Map();
+  if (config.projectId && config.products?.items?.length) {
+    try {
+      const storePriceIds = [
+        ...new Set(
+          config.products.items.flatMap(
+            (item) => [item.storePriceId, item.trialStorePriceId].filter(Boolean)
+          )
+        )
+      ];
+      info(`Fetching ${storePriceIds.length} store prices: ${storePriceIds.join(", ")}`);
+      const s3 = spinner("Fetching store prices...");
+      priceData = await fetchPrices(config.projectId, storePriceIds, { token: creds.token });
+      s3.stop();
+      const missingIds = storePriceIds.filter((id) => !priceData.has(id));
+      if (missingIds.length > 0) {
+        error(`Missing store prices: ${missingIds.join(", ")}`);
+        error("Make sure these storePriceId values in your config match prices in your project.");
+        process.exit(1);
+      }
+      success(`Fetched ${priceData.size}/${storePriceIds.length} store prices`);
+    } catch (err) {
+      error(`Failed to fetch store prices: ${err.message}`);
+      process.exit(1);
+    }
+  }
   const { createServer: createServer2 } = await import("vite");
   const react = await import("@vitejs/plugin-react");
+  let tailwindPlugin = null;
+  try {
+    const { createRequire } = await import("module");
+    const require2 = createRequire(join8(cwd, "package.json"));
+    const tailwindPath = require2.resolve("@tailwindcss/vite");
+    const tailwindVite = await import(tailwindPath);
+    tailwindPlugin = tailwindVite.default;
+  } catch {
+  }
   const server = await createServer2({
     root: cwd,
     server: {
@@ -1004,11 +1269,13 @@ async function devCommand(options) {
     },
     plugins: [
       react.default(),
+      ...tailwindPlugin ? [tailwindPlugin()] : [],
       appfunnelPlugin({
         cwd,
         config,
         pages,
         isDev: true,
+        priceData,
         async onPagesChange() {
           pageKeys = scanPages(cwd);
           pages = await extractPageDefinitions(cwd, pageKeys);
@@ -1042,6 +1309,7 @@ var init_dev = __esm({
     init_pages();
     init_plugin();
     init_projects();
+    init_api();
   }
 });
 
@@ -1050,8 +1318,9 @@ var build_exports = {};
 __export(build_exports, {
   buildCommand: () => buildCommand
 });
-import { resolve as resolve4, join as join9 } from "path";
-import { readFileSync as readFileSync7, writeFileSync as writeFileSync4, statSync, readdirSync as readdirSync2 } from "fs";
+import { resolve as resolve3, join as join9 } from "path";
+import { randomUUID as randomUUID2 } from "crypto";
+import { readFileSync as readFileSync7, writeFileSync as writeFileSync5, statSync, readdirSync as readdirSync2 } from "fs";
 import pc7 from "picocolors";
 async function buildCommand() {
   const cwd = process.cwd();
@@ -1072,15 +1341,25 @@ async function buildCommand() {
   s.stop();
   validateRoutes(config, pages, pageKeys);
   info(`Building ${pageKeys.length} pages...`);
-  const outDir = resolve4(cwd, ".appfunnel");
+  const outDir = resolve3(cwd, "dist");
   const { build } = await import("vite");
   const react = await import("@vitejs/plugin-react");
-  const htmlPath = resolve4(cwd, "index.html");
+  let tailwindPlugin = null;
+  try {
+    const { createRequire } = await import("module");
+    const require2 = createRequire(join9(cwd, "package.json"));
+    const tailwindPath = require2.resolve("@tailwindcss/vite");
+    const tailwindVite = await import(tailwindPath);
+    tailwindPlugin = tailwindVite.default;
+  } catch {
+  }
+  const htmlPath = resolve3(cwd, "index.html");
   const htmlContent = generateHtml(config.name || "AppFunnel");
-  writeFileSync4(htmlPath, htmlContent);
+  writeFileSync5(htmlPath, htmlContent);
   try {
     await build({
       root: cwd,
+      base: "./",
       build: {
         outDir,
         emptyOutDir: true,
@@ -1101,6 +1380,7 @@ async function buildCommand() {
       },
       plugins: [
         react.default(),
+        ...tailwindPlugin ? [tailwindPlugin()] : [],
         appfunnelPlugin({
           cwd,
           config,
@@ -1136,9 +1416,12 @@ async function buildCommand() {
   const totalSize = assets.reduce((sum, a) => sum + a.size, 0);
   const manifest = {
     version: 1,
+    buildHash: randomUUID2(),
     sdkVersion: getSdkVersion2(cwd),
     projectId: config.projectId,
     funnelId: config.funnelId,
+    name: config.name,
+    initialPageKey: config.initialPageKey,
     pages: { ...config.pages, ...mergedPages },
     routes: { ...config.routes, ...mergedRoutes },
     responses: config.responses || {},
@@ -1148,11 +1431,11 @@ async function buildCommand() {
     assets,
     totalSize
   };
-  writeFileSync4(join9(outDir, "manifest.json"), JSON.stringify(manifest, null, 2) + "\n");
+  writeFileSync5(join9(outDir, "manifest.json"), JSON.stringify(manifest, null, 2) + "\n");
   console.log();
   success("Build complete");
   console.log();
-  console.log(`  ${pc7.dim("Output:")}  .appfunnel/`);
+  console.log(`  ${pc7.dim("Output:")}  dist/`);
   console.log(`  ${pc7.dim("Pages:")}   ${pageKeys.length}`);
   console.log(`  ${pc7.dim("Size:")}    ${formatSize(totalSize)}`);
   console.log();
@@ -1299,83 +1582,25 @@ var init_build = __esm({
   }
 });
 
-// src/lib/api.ts
-async function apiFetch(path, options) {
-  const { token, apiBaseUrl, ...fetchOpts } = options;
-  const base = apiBaseUrl || DEFAULT_API_BASE3;
-  const url = `${base}${path}`;
-  const isFormData = fetchOpts.body instanceof FormData;
-  const headers = {
-    Authorization: token,
-    ...fetchOpts.headers || {}
-  };
-  if (!isFormData) {
-    headers["Content-Type"] = "application/json";
-  }
-  const response = await fetch(url, {
-    ...fetchOpts,
-    headers
-  });
-  if (!response.ok) {
-    const body = await response.text().catch(() => "");
-    let message = `API request failed: ${response.status} ${response.statusText}`;
-    try {
-      const parsed = JSON.parse(body);
-      if (parsed.error) message = parsed.error;
-      if (parsed.message) message = parsed.message;
-    } catch {
-    }
-    const error2 = new CLIError("API_ERROR", message);
-    error2.statusCode = response.status;
-    throw error2;
-  }
-  return response;
-}
-async function publishBuild(projectId, funnelId, manifest, assets, options) {
-  const formData = new FormData();
-  formData.set("manifest", JSON.stringify(manifest));
-  formData.set("funnelId", funnelId);
-  for (const asset of assets) {
-    formData.append(
-      "assets",
-      new Blob([new Uint8Array(asset.content)], { type: asset.contentType }),
-      asset.path
-    );
-  }
-  try {
-    const response = await apiFetch(`/project/${projectId}/headless/publish`, {
-      ...options,
-      method: "POST",
-      body: formData
-    });
-    return await response.json();
-  } catch (err) {
-    if (err instanceof CLIError && err.code === "API_ERROR") {
-      if (err.statusCode === 413) {
-        throw new CLIError(
-          "BUNDLE_TOO_LARGE",
-          err.message,
-          "Reduce page bundle sizes. Check for large dependencies."
-        );
-      }
-      if (err.statusCode === 409) {
-        throw new CLIError(
-          "FUNNEL_NOT_HEADLESS",
-          err.message,
-          "Create a new headless funnel from the dashboard, or remove funnelId from config."
-        );
-      }
-      throw new CLIError("PUBLISH_FAILED", err.message);
-    }
-    throw err;
+// src/lib/config-patch.ts
+import { join as join10 } from "path";
+import { readFileSync as readFileSync8, writeFileSync as writeFileSync6 } from "fs";
+function patchConfigFunnelId(cwd, funnelId) {
+  const configPath = join10(cwd, "appfunnel.config.ts");
+  let content = readFileSync8(configPath, "utf-8");
+  if (content.includes("funnelId")) return;
+  const patched = content.replace(
+    /(projectId:\s*['"][^'"]+['"],?\s*\n)/,
+    `$1  funnelId: '${funnelId}',
+`
+  );
+  if (patched !== content) {
+    writeFileSync6(configPath, patched, "utf-8");
   }
 }
-var DEFAULT_API_BASE3;
-var init_api = __esm({
-  "src/lib/api.ts"() {
+var init_config_patch = __esm({
+  "src/lib/config-patch.ts"() {
     "use strict";
-    init_errors();
-    DEFAULT_API_BASE3 = "https://api.appfunnel.net";
   }
 });
 
@@ -1384,34 +1609,49 @@ var publish_exports = {};
 __export(publish_exports, {
   publishCommand: () => publishCommand
 });
-import { resolve as resolve5, join as join10 } from "path";
-import { readFileSync as readFileSync8, existsSync as existsSync5 } from "fs";
+import { resolve as resolve4, join as join11 } from "path";
+import { readFileSync as readFileSync9, existsSync as existsSync6 } from "fs";
 import pc8 from "picocolors";
 function getMimeType(path) {
   const ext = path.substring(path.lastIndexOf("."));
   return MIME_TYPES[ext] || "application/octet-stream";
 }
+function formatSize2(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
+}
 async function publishCommand() {
   const cwd = process.cwd();
   const creds = requireAuth();
   checkVersionCompatibility(cwd);
   const config = await loadConfig(cwd);
-  const outDir = resolve5(cwd, ".appfunnel");
-  const manifestPath = join10(outDir, "manifest.json");
-  if (!existsSync5(manifestPath)) {
+  const projectId = config.projectId;
+  if (!projectId) {
+    throw new CLIError(
+      "CONFIG_NOT_FOUND",
+      "No projectId in appfunnel.config.ts.",
+      "Add projectId to your config. You can find it in the dashboard."
+    );
+  }
+  const outDir = resolve4(cwd, "dist");
+  const manifestPath = join11(outDir, "manifest.json");
+  if (!existsSync6(manifestPath)) {
     throw new CLIError(
       "BUILD_NOT_FOUND",
       "No build output found.",
       "Run 'appfunnel build' first."
     );
   }
-  const manifest = JSON.parse(readFileSync8(manifestPath, "utf-8"));
+  const manifest = JSON.parse(readFileSync9(manifestPath, "utf-8"));
   const assets = manifest.assets || [];
-  const s = spinner("Uploading build...");
+  const s = spinner("Preparing assets...");
   const assetPayloads = [];
-  for (const asset of assets) {
-    const fullPath = join10(outDir, asset.path);
-    if (!existsSync5(fullPath)) {
+  let totalBytes = 0;
+  for (let i = 0; i < assets.length; i++) {
+    const asset = assets[i];
+    const fullPath = join11(outDir, asset.path);
+    if (!existsSync6(fullPath)) {
       s.stop();
       throw new CLIError(
         "BUILD_NOT_FOUND",
@@ -1419,44 +1659,37 @@ async function publishCommand() {
         "Run 'appfunnel build' to regenerate."
       );
     }
+    const content = readFileSync9(fullPath);
+    totalBytes += content.length;
     assetPayloads.push({
       path: asset.path,
-      content: readFileSync8(fullPath),
+      content,
       contentType: getMimeType(asset.path)
     });
+    s.text = `Preparing assets... ${i + 1}/${assets.length} ${pc8.dim(`(${formatSize2(totalBytes)})`)}`;
   }
-  const projectId = config.projectId;
-  const funnelId = config.funnelId;
-  if (!projectId) {
-    s.stop();
-    throw new CLIError(
-      "CONFIG_NOT_FOUND",
-      "No projectId in appfunnel.config.ts.",
-      "Add projectId to your config. You can find it in the dashboard."
-    );
-  }
-  if (!funnelId) {
-    s.stop();
-    throw new CLIError(
-      "CONFIG_NOT_FOUND",
-      "No funnelId in appfunnel.config.ts.",
-      "Add funnelId to your config, or create a new funnel from the dashboard."
-    );
-  }
+  s.text = `Uploading ${assets.length} assets ${pc8.dim(`(${formatSize2(totalBytes)})`)}`;
   const result = await publishBuild(
     projectId,
-    funnelId,
+    config.funnelId || "",
     manifest,
     assetPayloads,
     { token: creds.token }
   );
   s.stop();
+  if (result.created && result.funnelId) {
+    patchConfigFunnelId(cwd, result.funnelId);
+    info(`Funnel created \u2014 funnelId added to appfunnel.config.ts`);
+  }
   console.log();
   success("Published successfully");
   console.log();
   console.log(`  ${pc8.dim("Build ID:")}  ${result.buildId}`);
+  if (result.funnelId && !config.funnelId) {
+    console.log(`  ${pc8.dim("Funnel:")}   ${result.funnelId}`);
+  }
   console.log(`  ${pc8.dim("URL:")}       ${pc8.cyan(result.url)}`);
-  console.log(`  ${pc8.dim("Assets:")}    ${assets.length} files`);
+  console.log(`  ${pc8.dim("Assets:")}    ${assets.length} files ${pc8.dim(`(${formatSize2(totalBytes)})`)}`);
   console.log();
 }
 var MIME_TYPES;
@@ -1469,6 +1702,7 @@ var init_publish = __esm({
     init_version();
     init_api();
     init_errors();
+    init_config_patch();
     MIME_TYPES = {
       ".js": "application/javascript",
       ".css": "text/css",
@@ -1485,21 +1719,10 @@ var init_publish = __esm({
 
 // src/index.ts
 init_errors();
-import { readFileSync as readFileSync9 } from "fs";
 import { Command } from "commander";
 import pc9 from "picocolors";
-function getCliVersion2() {
-  try {
-    const pkg = JSON.parse(
-      readFileSync9(new URL("../package.json", import.meta.url), "utf-8")
-    );
-    return pkg.version;
-  } catch {
-    return "0.0.0";
-  }
-}
 var program = new Command();
-program.name("appfunnel").description("Build and publish headless AppFunnel projects").version(getCliVersion2());
+program.name("appfunnel").description("Build and publish headless AppFunnel projects").version("0.6.0");
 program.command("init <name>").description("Create a new AppFunnel project").action(async (name) => {
   const { initCommand: initCommand2 } = await Promise.resolve().then(() => (init_init(), init_exports));
   await initCommand2(name);