@spark-apps/quickpeek 1.1.2 → 1.2.0

package/dist/web.mjs

@@ -0,0 +1,978 @@
+// src/lib/utils.ts
+import { hexToAss } from "@spark-apps/video-kit";
+import { windowsDrivePathToWsl } from "@spark-apps/video-kit";
+var LANGUAGE_NAMES = {
+  ar: "Arabic",
+  es: "Spanish",
+  fr: "French",
+  de: "German",
+  zh: "Chinese",
+  ja: "Japanese",
+  ko: "Korean",
+  pt: "Portuguese",
+  ru: "Russian",
+  hi: "Hindi",
+  tr: "Turkish",
+  it: "Italian"
+};
+function getLanguageName(lang) {
+  if (!lang || lang === "en") return null;
+  return LANGUAGE_NAMES[lang] || lang.toUpperCase();
+}
+function rgbaToHex(color) {
+  if (color.startsWith("#")) return color;
+  const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (!match) return "#000000";
+  const r = parseInt(match[1], 10).toString(16).padStart(2, "0");
+  const g = parseInt(match[2], 10).toString(16).padStart(2, "0");
+  const b = parseInt(match[3], 10).toString(16).padStart(2, "0");
+  return `#${r}${g}${b}`.toUpperCase();
+}
+var LOWERCASE_WORDS = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "and",
+  "but",
+  "or",
+  "nor",
+  "for",
+  "yet",
+  "so",
+  "at",
+  "by",
+  "in",
+  "of",
+  "on",
+  "to",
+  "up",
+  "as",
+  "if",
+  "off",
+  "per",
+  "via",
+  "from",
+  "into",
+  "onto",
+  "upon",
+  "with",
+  "over",
+  "under",
+  "than"
+]);
+function parsePartial(partial) {
+  if (!partial) return {};
+  const parts = partial.split("-");
+  if (parts.length !== 2) return {};
+  const ts = parts[0] ? parseFloat(parts[0]) : NaN;
+  const te = parts[1] ? parseFloat(parts[1]) : NaN;
+  const result = {};
+  if (!Number.isNaN(ts)) result.trimStart = ts;
+  if (!Number.isNaN(te)) result.trimEnd = te;
+  return result;
+}
+function getErrorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function toTitleCase(text) {
+  return text.replace(/\w+/g, (word, index) => {
+    if (index === 0) {
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    }
+    if (LOWERCASE_WORDS.has(word.toLowerCase())) {
+      return word.toLowerCase();
+    }
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  });
+}
+
+// src/lib/api-client.ts
+var SPARK_AI_BASE = "https://sparkbrain.app";
+var SPARK_AI_CHAT = `${SPARK_AI_BASE}/api/chat`;
+var SPARK_AI_TOKEN = `${SPARK_AI_BASE}/api/models/token`;
+var RELAY_BASE = process.env.QUICKPEEK_API_BASE || "https://quickpeek.co";
+var RELAY_TOKEN_URL = `${RELAY_BASE}/api/cli/token`;
+var RELAY_CHAT_URL = `${RELAY_BASE}/api/cli/ai`;
+var API_KEY = process.env.SPARK_AI_KEY || "";
+var cachedDirectToken = null;
+async function getOrRefreshDirectToken() {
+  const now = Date.now();
+  if (cachedDirectToken && cachedDirectToken.expiresAt > now + 3e5) {
+    return cachedDirectToken.token;
+  }
+  try {
+    const response = await fetch(SPARK_AI_TOKEN, {
+      method: "POST",
+      headers: { "X-Api-Key": API_KEY }
+    });
+    if (!response.ok) {
+      throw new Error(`Token exchange failed: ${response.status} ${response.statusText}`);
+    }
+    const data = await response.json();
+    if (!data.success || !data.token) {
+      throw new Error(data.error || `Token exchange failed: unexpected response`);
+    }
+    cachedDirectToken = {
+      token: data.token,
+      expiresAt: data.expiresAt || now + 36e5
+    };
+    return data.token;
+  } catch (err) {
+    throw new Error(`Failed to get Spark AI token: ${getErrorMessage(err)}`);
+  }
+}
+async function executeChat(chatUrl, bearerToken, systemPrompt, userPrompt, tier) {
+  let lastRateLimitError = null;
+  for (let attempt = 1; attempt <= 3; attempt++) {
+    try {
+      const response = await fetch(chatUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${bearerToken}`
+        },
+        body: JSON.stringify({
+          messages: [
+            { role: "system", content: systemPrompt },
+            { role: "user", content: userPrompt }
+          ]
+        })
+      });
+      let data = {};
+      const contentType = response.headers.get("content-type") ?? "";
+      if (contentType.includes("application/json")) {
+        data = await response.json();
+      }
+      if (!response.ok) {
+        const error = data.error || `Spark AI error: ${response.status} ${response.statusText}`;
+        if (response.status === 429 && attempt < 3) {
+          const retryAfter = response.headers.get("Retry-After");
+          const delayMs = retryAfter ? parseInt(retryAfter, 10) * 1e3 : 1e3 * 2 ** (attempt - 1);
+          lastRateLimitError = {
+            success: false,
+            error,
+            isRateLimit: true,
+            ...retryAfter ? { retryAfterSeconds: parseInt(retryAfter, 10) } : {}
+          };
+          await new Promise((resolve) => setTimeout(resolve, Math.min(delayMs, 3e4)));
+          continue;
+        }
+        return {
+          success: false,
+          error,
+          isRateLimit: response.status === 429,
+          isAuthError: response.status === 401 || response.status === 403
+        };
+      }
+      if (!data.success || !data.response) {
+        return {
+          success: false,
+          error: data.error || "No response from Spark AI"
+        };
+      }
+      return {
+        success: true,
+        content: data.response,
+        limits: {
+          used: data.limits?.used ?? 0,
+          limit: data.limits?.limit ?? 100,
+          tier,
+          ...data.limits?.resetAt ? { resetAt: data.limits.resetAt } : {}
+        }
+      };
+    } catch (err) {
+      if (attempt === 3) throw err;
+      const delayMs = 1e3 * 2 ** (attempt - 1);
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
+    }
+  }
+  return lastRateLimitError || { success: false, error: "Request failed after retries" };
+}
+async function callAI(systemPrompt, userPrompt, tier = "free") {
+  if (!API_KEY) {
+    return {
+      success: false,
+      error: "AI service is not configured. Please report this issue.",
+      isAuthError: true
+    };
+  }
+  try {
+    const token = await getOrRefreshDirectToken();
+    return await executeChat(SPARK_AI_CHAT, token, systemPrompt, userPrompt, tier);
+  } catch (err) {
+    return { success: false, error: `Spark AI error: ${getErrorMessage(err)}` };
+  }
+}
+function parseAIPlanResponse(content) {
+  try {
+    let processedContent = content;
+    const codeBlockMatch = processedContent.match(/```(?:json)?\s*([\s\S]*?)```/);
+    if (codeBlockMatch?.[1]) {
+      processedContent = codeBlockMatch[1].trim();
+    }
+    const jsonMatch = processedContent.match(/\{[\s\S]*\}/);
+    if (!jsonMatch) {
+      return { success: false, error: "No valid JSON found in AI response" };
+    }
+    const parsed = JSON.parse(jsonMatch[0]);
+    return { success: true, plan: parsed };
+  } catch (err) {
+    return {
+      success: false,
+      error: `Failed to parse AI response: ${err instanceof Error ? err.message : String(err)}`
+    };
+  }
+}
+function normalizeUrl(input) {
+  let url = input.trim();
+  url = url.replace(/^(https?:\/\/)?(www\.)?/i, "");
+  return `https://${url}`;
+}
+
+// src/lib/crawl.ts
+import { chromium } from "playwright";
+
+// src/lib/scraping.ts
+var EXCLUDED_LINK_PATTERNS = [
+  // Legal & Policy
+  "privacy",
+  "terms",
+  "cookie",
+  "legal",
+  "policy",
+  "disclaimer",
+  "copyright",
+  "gdpr",
+  // Auth & Account
+  "login",
+  "signin",
+  "sign in",
+  "signup",
+  "sign up",
+  "register",
+  "logout",
+  "sign out",
+  "my account",
+  "profile",
+  "settings",
+  // Support
+  "contact",
+  "about",
+  "help",
+  "support",
+  "faq",
+  // Social Media
+  "facebook",
+  "twitter",
+  "linkedin",
+  "instagram",
+  "youtube",
+  "tiktok",
+  "github",
+  // Company
+  "blog",
+  "news",
+  "press",
+  "careers",
+  "jobs",
+  "team",
+  // Developer
+  "docs",
+  "documentation",
+  "api",
+  "developers",
+  // Commerce
+  "pricing",
+  "plans",
+  "subscribe",
+  "newsletter",
+  "upgrade",
+  "buy",
+  "purchase",
+  // Misc
+  "accessibility",
+  "sitemap",
+  "rss",
+  "feed",
+  "home"
+];
+var INTERACTIVE_SELECTORS = [
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "a[href]",
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="switch"]',
+  '[role="slider"]',
+  '[role="combobox"]',
+  '[role="menuitem"]',
+  '[type="submit"]',
+  "[onclick]"
+];
+function isExcludedLink(text, href = "") {
+  const lowerText = text.toLowerCase();
+  const lowerHref = href.toLowerCase();
+  return EXCLUDED_LINK_PATTERNS.some((p) => lowerText.includes(p) || lowerHref.includes(p));
+}
+function shouldSkipLink(text, href, currentPath) {
+  if (!href || href === "#") return true;
+  try {
+    const linkPath = new URL(href).pathname;
+    if (linkPath === "/" || linkPath === currentPath) return true;
+  } catch {
+    return true;
+  }
+  return isExcludedLink(text, href);
+}
+
+// src/lib/crawl.ts
+function getActionForType(type) {
+  switch (type) {
+    case "button":
+    case "link":
+      return "click";
+    case "file":
+      return "upload";
+    case "range":
+      return "drag";
+    case "select":
+      return "select";
+    case "checkbox":
+      return "check";
+    default:
+      return "type";
+  }
+}
+var noopTask = () => ({ succeed: () => {
+} });
+var CRAWL_CACHE_TTL_MS = 5 * 60 * 1e3;
+var CRAWL_CACHE_MAX_ENTRIES = 50;
+var crawlCache = /* @__PURE__ */ new Map();
+async function crawlPage(url, task = noopTask, storageStatePath) {
+  const cached = crawlCache.get(url);
+  if (cached && Date.now() - cached.timestamp < CRAWL_CACHE_TTL_MS) {
+    task("Using cached crawl").succeed(`Found ${cached.elements.length} interactive elements (cached)`);
+    return { title: cached.title, elements: [...cached.elements] };
+  }
+  const browserTask = task("Launching browser");
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext(storageStatePath ? { storageState: storageStatePath } : {});
+  const page = await context.newPage();
+  browserTask.succeed(storageStatePath ? "Browser launched (signed in)" : "Browser launched");
+  const crawlTask = task("Crawling page");
+  await page.goto(url, { waitUntil: "networkidle", timeout: 3e4 });
+  const title = await page.title();
+  const rawElements = await page.evaluate(`
+    (() => {
+      const items = [];
+
+      // Helper to get parent context
+      const getCtx = (el) => {
+        let p = el.parentElement;
+        while (p && p !== document.body) {
+          if (p.id) return '#' + p.id;
+          const cls = Array.from(p.classList).find(c =>
+            /toolbar|header|footer|sidebar|panel|modal|dialog|nav|menu|controls|actions/i.test(c)
+          );
+          if (cls) return '.' + cls;
+          if (['header', 'footer', 'nav', 'main', 'aside', 'form'].includes(p.tagName.toLowerCase())) {
+            return p.tagName.toLowerCase();
+          }
+          p = p.parentElement;
+        }
+        return '';
+      };
+
+      // Buttons (use textContent to catch hidden elements too)
+      document.querySelectorAll('button, [role="button"]').forEach(el => {
+        const text = (el.textContent || el.innerText || '').trim().replace(/\\s+/g, ' ').slice(0, 40);
+        const testId = el.getAttribute('data-testid');
+        const ariaLabel = el.getAttribute('aria-label');
+        if (!text && !testId && !ariaLabel) return;
+        items.push({ type: 'button', text: text || ariaLabel || testId, testId, ctx: getCtx(el) });
+      });
+
+      // Inputs (including file inputs, range sliders, checkboxes, selects)
+      document.querySelectorAll('input, textarea, select').forEach(el => {
+        if (el.type === 'hidden') return;
+        const testId = el.getAttribute('data-testid');
+        const inputType = el.type || 'text';
+
+        // Get label text for any input type
+        let labelText = '';
+        if (el.labels?.[0]) {
+          labelText = el.labels[0].textContent?.trim() || '';
+        } else if (el.id) {
+          const label = document.querySelector('label[for="' + el.id + '"]');
+          if (label) labelText = label.textContent?.trim() || '';
+        }
+
+        const text = labelText || el.placeholder || el.name || el.id || '';
+
+        // Include file, range, and checkbox inputs even without text
+        const alwaysInclude = ['file', 'range', 'checkbox'].includes(inputType);
+        if (!text && !testId && !alwaysInclude) return;
+
+        items.push({
+          type: inputType,
+          text: text || (inputType === 'file' ? 'file upload' : inputType === 'range' ? 'slider' : inputType === 'checkbox' ? 'checkbox' : testId),
+          testId,
+          id: el.id,
+          name: el.name,
+          placeholder: el.placeholder,
+          isFile: inputType === 'file'
+        });
+      });
+
+      // Links (use textContent to catch hidden elements too)
+      document.querySelectorAll('a[href]').forEach(el => {
+        const text = (el.textContent || el.innerText || '').trim().replace(/\\s+/g, ' ').slice(0, 40);
+        if (text && text.length >= 2) items.push({ type: 'link', text });
+      });
+
+      return items.slice(0, 40);
+    })()
+  `);
+  const filteredElements = rawElements.filter((el) => {
+    if (!el.text) return true;
+    const text = el.text.toLowerCase().trim();
+    return !EXCLUDED_LINK_PATTERNS.some((pattern) => text.includes(pattern));
+  });
+  const btnTexts = {};
+  for (const el of filteredElements) {
+    if (el.type === "button" && el.text) {
+      btnTexts[el.text] = (btnTexts[el.text] || 0) + 1;
+    }
+  }
+  const elements = filteredElements.map((el) => {
+    let selector;
+    if (el.testId) {
+      selector = `[data-testid="${el.testId}"]`;
+    } else if (el.isFile || el.type === "file") {
+      selector = 'input[type="file"]';
+    } else if (el.type === "range") {
+      selector = el.id ? `#${el.id}` : 'input[type="range"]';
+    } else if (el.type === "checkbox") {
+      selector = el.id ? `#${el.id}` : 'input[type="checkbox"]';
+    } else if (el.type === "button") {
+      if (btnTexts[el.text] === 1) {
+        selector = `text="${el.text}"`;
+      } else {
+        selector = el.ctx ? `${el.ctx} >> text="${el.text}"` : `button:has-text("${el.text}")`;
+      }
+    } else if (el.type === "link") {
+      selector = `text="${el.text}"`;
+    } else if (el.id) {
+      selector = `#${el.id}`;
+    } else if (el.name) {
+      selector = `[name="${el.name}"]`;
+    } else if (el.placeholder) {
+      selector = `[placeholder="${el.placeholder}"]`;
+    } else {
+      selector = `text="${el.text}"`;
+    }
+    let normalizedType;
+    if (el.isFile || el.type === "file") {
+      normalizedType = "file";
+    } else if (el.type === "range") {
+      normalizedType = "range";
+    } else if (el.type === "checkbox") {
+      normalizedType = "checkbox";
+    } else if (el.type === "select" || el.type === "select-one" || el.type === "select-multiple") {
+      normalizedType = "select";
+    } else if (el.type === "button" || el.type === "link") {
+      normalizedType = el.type;
+    } else {
+      normalizedType = "input";
+    }
+    const action = getActionForType(normalizedType);
+    const target = normalizedType === "file" ? selector : (el.text || "").toLowerCase();
+    return { type: normalizedType, text: el.text, selector, action, target };
+  });
+  await browser.close();
+  crawlTask.succeed(`Found ${elements.length} interactive elements`);
+  crawlCache.set(url, { timestamp: Date.now(), title, elements: [...elements] });
+  if (crawlCache.size > CRAWL_CACHE_MAX_ENTRIES) {
+    const oldest = crawlCache.keys().next().value;
+    if (oldest !== void 0) crawlCache.delete(oldest);
+  }
+  return { title, elements };
+}
+
+// src/lib/plan-validation.ts
+var INVALID_TARGETS = [
+  /\.png$/i,
+  /\.jpg$/i,
+  /\.gif$/i,
+  /\.webp$/i,
+  /\.svg$/i,
+  /sprite_sheet/i,
+  /downloaded/i
+];
+var ACTIONS_REQUIRING_TARGET = ["click", "type", "select", "check", "drag"];
+function isFilePath(value) {
+  if (!value) return false;
+  return /\.\w{2,5}$/.test(value) && (/[/\\]/.test(value) || /^[a-zA-Z]:/.test(value));
+}
+function isInvalidTarget(target) {
+  return INVALID_TARGETS.some((pattern) => pattern.test(target));
+}
+function validateStep(step) {
+  if (!step?.action) {
+    return "Missing action";
+  }
+  if (step.action === "navigate") {
+    if (!step.target) return "Navigate requires a URL target";
+    if (!step.target.startsWith("http://") && !step.target.startsWith("https://")) {
+      return "Navigate target must be a valid URL";
+    }
+  }
+  if (step.action === "media") {
+    if (!step.mediaFile && !isFilePath(step.value)) {
+      return "Media step requires a file (image or video)";
+    }
+  }
+  if (step.action === "upload") {
+    if (!step.mediaFile && !isFilePath(step.value)) {
+      return "Upload step requires a file";
+    }
+  }
+  if (ACTIONS_REQUIRING_TARGET.includes(step.action)) {
+    if (!step.target) return `${step.action} requires a target`;
+    if (isInvalidTarget(step.target)) return `Invalid target pattern: ${step.target}`;
+  }
+  return null;
+}
+function isValidStep(step) {
+  return validateStep(step) === null;
+}
+function filterValidSteps(steps) {
+  return steps.filter(isValidStep);
+}
+var REFINE_PLAN_SYSTEM_PROMPT = `You refine demo video plans based on user feedback.
+
+AVAILABLE ACTIONS (use these exact formats):
+
+1. WAIT - Pause for narration (intro/outro/explanations)
+   Format: { "action": "wait", "caption": "Your narration text..." }
+   Use when: Starting intro, ending outro, explaining something without interaction
+   NO target needed
+
+2. CLICK - Click buttons, links, or interactive elements
+   Format: { "action": "click", "target": "button text", "caption": "Click description..." }
+   Target: Just the button/link text (case insensitive, partial match OK)
+   Examples: "extract frame", "download", "submit", "next"
+   Use when: User says "click", "press", "tap", "select button", "open", "close"
+
+3. TYPE - Enter text into input fields
+   Format: { "action": "type", "target": "input[name=\\"field\\"]", "value": "text to type", "caption": "..." }
+   Selectors: input[type="text"], input[name="..."], textarea, #id
+   Use when: User says "type", "enter", "input", "fill in", "write"
+   CRITICAL: PRESERVE existing value - never change what's being typed
+
+4. UPLOAD - Upload a file to a web form's file input element
+   Format: { "action": "upload", "target": "input[type=\\"file\\"]", "value": "path/to/file", "caption": "..." }
+   Target: REQUIRED - CSS selector for file input, usually input[type="file"]
+   Value: Path to file being uploaded
+   Use when: Uploading a file TO a website's form (the page has a file picker)
+   CRITICAL: PRESERVE existing value - never change the file path
+
+5. SCROLL - Scroll page or zoom camera
+   Format: { "action": "scroll", "value": "direction", "caption": "..." }
+   Values: "up", "down", "bottom", "80%" (page scroll) OR "-10", "10" (zoom: negative=out, positive=in)
+   Use when: User says "scroll", "zoom in", "zoom out", "show more", "go to bottom"
+   NO target needed
+
+6. DRAG - Drag sliders or rotate 3D objects
+   Format: { "action": "drag", "target": "input[type=\\"range\\"]", "value": "50", "caption": "..." }
+   Values: "0"-"100" for sliders, "rotate" for 3D rotation (stays at new angle), "around" for full 360\xB0 (returns to start)
+   Selectors: input[type="range"], canvas, .slider
+   Use when: User says "drag", "slide", "adjust slider", "rotate", "spin", "move"
+   NOTE: Use "rotate" (not "around") for showcasing 3D models - it rotates ~270\xB0 and stays at the new position
+
+7. SELECT - Choose option from dropdown
+   Format: { "action": "select", "target": "select[name=\\"..\\"]", "value": "option text", "caption": "..." }
+   Selector: select, select[name="..."], #id
+   Use when: User says "select", "choose", "pick from dropdown", "change option"
+
+8. CHECK - Toggle checkbox
+   Format: { "action": "check", "target": "input[type=\\"checkbox\\"]", "caption": "..." }
+   Selector: input[type="checkbox"], [role="checkbox"]
+   Use when: User says "check", "uncheck", "toggle", "enable", "disable"
+
+9. MEDIA - Display a media file fullscreen (NOT for uploading to a form!)
+   Format: { "action": "media", "value": "path/to/file.png", "caption": "..." }
+   Target: OPTIONAL - "scale" (fill viewport) or "center" (original size). Defaults to center.
+   Value: REQUIRED - File path to display
+   Supported: .png, .jpg, .jpeg, .gif, .webp, .mp4, .webm, .mov, .glb
+   Use when: Showing a file directly in the demo (screenshot, 3D model, video clip)
+   NOT for uploading - use UPLOAD action if page has a file input
+   CRITICAL: PRESERVE existing value - never change the file path
+
+10. SHOW_DOWNLOAD - Display a download animation/result
+    Format: { "action": "showDownload", "caption": "..." }
+    Use when: Showing the final result after a download action
+    NO target needed
+
+IMPORTANT - UPLOAD vs MEDIA:
+\u2022 UPLOAD: File goes INTO a web form (page has <input type="file">). Requires target selector.
+\u2022 MEDIA: File is DISPLAYED fullscreen in demo (no web interaction). No target needed.
+Example: "Show the 3D model" \u2192 use MEDIA action
+Example: "Upload a file to the converter" \u2192 use UPLOAD action
+
+TARGET SYNTAX (simplified):
+\u2022 Buttons/Links: Just use the text! "extract frame", "download", "submit" (case insensitive)
+\u2022 Inputs: input[type="text"], input[name="field"], input[type="file"], input[type="range"]
+\u2022 By ID: #elementId (only if text won't work)
+\u2022 By class: .className (only if text won't work)
+
+PREFER SIMPLE TEXT for buttons: "download" instead of button:has-text("Download")
+
+DETECTING USER INTENT:
+\u2022 "add intro/outro" \u2192 add wait step at start/end
+\u2022 "remove step X" \u2192 delete that step
+\u2022 "change caption" \u2192 update the caption text only
+\u2022 "click X instead" \u2192 change target to X
+\u2022 "add a click on X" \u2192 insert new click step
+\u2022 "show the slider" \u2192 add drag step for input[type="range"]
+\u2022 "zoom in/out" \u2192 add scroll with numeric value
+\u2022 "reorder" \u2192 rearrange step sequence
+
+RULES:
+\u2022 Return ONLY valid JSON
+\u2022 Keep step ids sequential (1, 2, 3...)
+\u2022 PRESERVE upload/type values EXACTLY - copy from input unchanged
+\u2022 Only modify steps mentioned in feedback
+\u2022 Use available elements list when provided to find correct selectors
+
+Return ONLY the modified JSON plan:
+{
+  "steps": [
+    { "id": 1, "action": "wait", "caption": "intro text" },
+    { "id": 2, "action": "click", "target": "start", "caption": "Click to begin" },
+    { "id": 3, "action": "upload", "target": "input[type=\\"file\\"]", "value": "path/to/file.png", "caption": "Upload the file" },
+    { "id": 4, "action": "click", "target": "extract", "caption": "Process the file" },
+    { "id": 5, "action": "media", "value": "path/to/result.png", "caption": "Here's the result" },
+    ...
+  ]
+}`;
+var FIX_PLAN_SYSTEM_PROMPT = `You are a web automation expert. Fix demo plan steps that failed validation.
+
+RULES:
+\u2022 Return ONLY valid JSON with the complete plan structure
+\u2022 Fix ONLY the failed steps - keep working steps unchanged
+\u2022 Use the available page elements to find correct selectors
+\u2022 For click targets: use simplified button text like "extract frame", "download" (case insensitive)
+\u2022 For elements not found, check if a similar element exists in the page elements list
+\u2022 If an element truly doesn't exist, remove the step or change the action
+\u2022 Preserve file paths in "value" fields
+\u2022 Keep step ids sequential starting from 1
+
+TARGET PATTERNS:
+\u2022 Buttons/Links: Just the text! "extract frame", "download", "submit" (case insensitive)
+\u2022 File inputs: input[type="file"]
+\u2022 Sliders: input[type="range"]
+\u2022 Text inputs: input[name="field"], #id, [placeholder="..."]
+
+ACTION FORMATS:
+\u2022 click: { "target": "download" } - use simplified button text
+\u2022 scroll: { "value": "up|down" } for page, { "value": "10|-10" } for zoom (positive=in, negative=out)
+\u2022 drag: { "target": "input[type=\\"range\\"]", "value": "10" } for sliders, { "value": "rotate" } for 3D rotation (auto-targets canvas)
+\u2022 media: { "value": "path/to/file.png" } - display file fullscreen (NOT upload!)
+\u2022 upload: { "target": "input[type=\\"file\\"]", "value": "path/to/file" } - upload to form
+
+IMPORTANT: Only use elements that actually exist on the page based on the provided list.`;
+function collectPreservedValues(steps) {
+  const uploadSteps = [];
+  const mediaSteps = [];
+  const otherValues = /* @__PURE__ */ new Map();
+  for (const step of steps) {
+    if (step.action === "upload") {
+      uploadSteps.push({
+        value: step.value,
+        target: step.target,
+        mediaFile: step.mediaFile,
+        mediaType: step.mediaType
+      });
+    } else if (step.action === "media") {
+      mediaSteps.push({
+        mediaFile: step.mediaFile,
+        mediaType: step.mediaType,
+        target: step.target
+      });
+    } else if (step.value && step.target) {
+      otherValues.set(`${step.action}:${step.target}`, step.value);
+    }
+  }
+  return { uploadSteps, mediaSteps, otherValues };
+}
+function restorePreservedValues(step, preserved, indices) {
+  let { uploadIdx, mediaIdx } = indices;
+  if (step.action === "upload" && uploadIdx < preserved.uploadSteps.length) {
+    const original = preserved.uploadSteps[uploadIdx];
+    if (original.value !== void 0) step.value = original.value;
+    if (original.target !== void 0) step.target = original.target;
+    if (original.mediaFile !== void 0) step.mediaFile = original.mediaFile;
+    if (original.mediaType !== void 0) step.mediaType = original.mediaType;
+    uploadIdx++;
+  }
+  if (step.action === "media" && mediaIdx < preserved.mediaSteps.length) {
+    const original = preserved.mediaSteps[mediaIdx];
+    if (original.mediaFile !== void 0) step.mediaFile = original.mediaFile;
+    if (original.mediaType !== void 0) step.mediaType = original.mediaType;
+    if (!step.target && original.target) step.target = original.target;
+    mediaIdx++;
+  }
+  if (step.action !== "upload" && step.action !== "media" && step.target) {
+    const original = preserved.otherValues.get(`${step.action}:${step.target}`);
+    if (original) step.value = original;
+  }
+  return { uploadIdx, mediaIdx };
+}
+
+// src/lib/prompts.ts
+function buildSystemPrompt(maxSteps) {
+  let scope;
+  if (maxSteps <= 5) {
+    scope = `SCOPE: Minimal demo (${maxSteps} steps max) - ONE complete user journey only`;
+  } else if (maxSteps <= 8) {
+    scope = `SCOPE: Standard demo (${maxSteps} steps max) - One journey with 1-2 options`;
+  } else {
+    scope = `SCOPE: Extended demo (${maxSteps} steps max) - Journey plus key settings`;
+  }
+  return `You create demo video scripts for web apps.
+
+${scope}
+
+CORE FLOW (always follow this structure):
+1. wait - Intro (what does this app do?)
+2. Actions - Complete ONE user journey (upload\u2192process\u2192result)
+3. wait - Outro (what was accomplished?)
+
+TARGET SYNTAX (simplified):
+\u2022 Buttons/Links: Use plain text like "extract frame", "download" (case insensitive, partial match OK)
+\u2022 File inputs: input[type="file"] - ALWAYS use this exact selector
+\u2022 Sliders/Range: input[type="range"] - ALWAYS use this for sliders
+\u2022 Select: select or select[name="..."]
+\u2022 Text inputs: input[type="text"], input[name="..."], or #id
+
+SKIP THESE ELEMENTS (never include in demo):
+\u2022 Navigation: Home, About, Contact, Help, Support, FAQ
+\u2022 Auth: Login, Sign In, Sign Up, Register, My Account
+\u2022 Business: Pricing, Plans, Subscribe, Buy, Upgrade
+\u2022 Footer: Privacy, Terms, Blog, Careers, Social media
+
+FORBIDDEN:
+\u2022 Repeating same action multiple times (e.g., multiple clicks on same button)
+\u2022 Clicking downloaded files or result images
+\u2022 Vague targets like "slider", "animation", "options" - use CSS selectors instead
+\u2022 More steps than maxSteps allows
+
+ACTION FORMATS (STRICT - follow exactly):
+\u2022 click: { "action": "click", "target": "extract frame" } - use simplified button text
+\u2022 type: { "action": "type", "target": "input[name=\\"field\\"]", "value": "text to type" }
+\u2022 upload: { "action": "upload", "target": "input[type=\\"file\\"]", "value": "[file]" }
+\u2022 wait: { "action": "wait" } - for intro/outro captions
+\u2022 scroll: { "action": "scroll", "value": "-80" } - negative=zoom out, positive=zoom in
+\u2022 drag: { "action": "drag", "target": "input[type=\\"range\\"]", "value": "50" }
+\u2022 select: { "action": "select", "target": "select[name=\\"..\\"]", "value": "option" }
+\u2022 check: { "action": "check", "target": "input[type=\\"checkbox\\"]" }
+
+EXAMPLES:
+\u2022 Click button: "target": "extract frame" or "target": "download"
+\u2022 File upload: "target": "input[type=\\"file\\"]"
+\u2022 Slider: "target": "input[type=\\"range\\"]"`;
+}
+function buildUserPrompt(url, title, elements, langName, description, maxSteps) {
+  const lang = langName ? `
+Language: Write ALL captions in ${langName}.` : "";
+  const purpose = description ? `
+Purpose: ${description}` : "";
+  const minSteps = Math.max(3, Math.floor(maxSteps * 0.6));
+  const clickables = elements.filter((e) => e.action === "click");
+  const uploadables = elements.filter((e) => e.action === "upload");
+  const typables = elements.filter((e) => e.action === "type");
+  const draggables = elements.filter((e) => e.action === "drag");
+  const selectables = elements.filter((e) => e.action === "select");
+  const checkables = elements.filter((e) => e.action === "check");
+  const elementDict = [];
+  if (clickables.length > 0) {
+    elementDict.push(`CLICK targets (use simplified text):
+${clickables.map((e) => `\u2022 "${e.target || e.text.toLowerCase()}"`).join("\n")}`);
+  }
+  if (uploadables.length > 0) {
+    elementDict.push(`UPLOAD targets (use selector):
+${uploadables.map((e) => `\u2022 ${e.selector}`).join("\n")}`);
+  }
+  if (typables.length > 0) {
+    elementDict.push(`TYPE targets (use selector):
+${typables.map((e) => `\u2022 "${e.text}" \u2192 ${e.selector}`).join("\n")}`);
+  }
+  if (draggables.length > 0) {
+    elementDict.push(`DRAG targets (use selector):
+${draggables.map((e) => `\u2022 "${e.text}" \u2192 ${e.selector}`).join("\n")}`);
+  }
+  if (selectables.length > 0) {
+    elementDict.push(`SELECT targets (use selector):
+${selectables.map((e) => `\u2022 "${e.text}" \u2192 ${e.selector}`).join("\n")}`);
+  }
+  if (checkables.length > 0) {
+    elementDict.push(`CHECK targets (use selector):
+${checkables.map((e) => `\u2022 "${e.text}" \u2192 ${e.selector}`).join("\n")}`);
+  }
+  const elementSummary = elementDict.length > 0 ? elementDict.join("\n\n") : "(no interactive elements found)";
+  return `URL: ${url}
+Title: ${title}${purpose}
+
+AVAILABLE ELEMENTS (grouped by action):
+${elementSummary}
+
+REQUIREMENTS:
+\u2022 ${minSteps}-${maxSteps} steps total (start with wait intro, end with wait outro)
+\u2022 Complete ONE user journey: input \u2192 process \u2192 output
+\u2022 For CLICK: use simplified text target like "extract frame" or "download"
+\u2022 For UPLOAD/DRAG/TYPE: use the CSS selector shown above
+\u2022 For buttons that appear after actions: use partial text like "extract" or "download"${lang}
+
+Return JSON:
+{
+  "url": "${url}",
+  "title": "Short demo title",
+  "description": "What this app does",
+  "steps": [
+    { "id": 1, "action": "wait", "caption": "Welcome! This app..." },
+    { "id": 2, "action": "upload", "target": "input[type=\\"file\\"]", "caption": "Upload your file...", "value": "[file]" },
+    { "id": 3, "action": "drag", "target": "input[type=\\"range\\"]", "caption": "Adjust the slider...", "value": "50" },
+    { "id": 4, "action": "click", "target": "process", "caption": "Click to process..." },
+    { "id": 5, "action": "click", "target": "download", "caption": "Download your result..." },
+    { "id": 6, "action": "wait", "caption": "Done! Your file is ready." }
+  ]
+}
+
+TARGET SYNTAX:
+\u2022 Buttons/Links: Plain text like "extract frame", "download" (case insensitive)
+\u2022 File inputs: input[type="file"]
+\u2022 Sliders: input[type="range"]
+\u2022 Text inputs: Use selector from list above`;
+}
+
+// src/lib/SparkStripe-feature-gating.ts
+var APP_ID = process.env.SPARK_APP_ID ?? "quickpeek";
+var BASE = "https://sparkstripe.com";
+var TIERS = {
+  price_1TADnPEf9opkuWid9NtqOYON: "pro",
+  price_1TADnPEf9opkuWidgbvvX9ma: "pro",
+  price_1TADm7Ef9opkuWid3I9tquIB: "pro",
+  price_1TADm8Ef9opkuWid1RSA2wCa: "pro",
+  price_1TCREmEf9opkuWidvhuqzqDM: "pro",
+  price_1TCREmEf9opkuWidacf1tiC7: "pro"
+};
+var RANK = {
+  free: 0,
+  pro: 1
+};
+var FEATURES = {
+  free: [],
+  pro: [
+    "Everything in Free",
+    "No watermark",
+    "Full video composition (voiceover + captions + music + transitions)",
+    "Unlimited videos",
+    "Priority support"
+  ]
+};
+async function _fetch(email, init) {
+  const r = await fetch(
+    `${BASE}/api/public/subscription/status-public?email=${encodeURIComponent(email)}&app_id=${APP_ID}`,
+    init
+  );
+  if (!r.ok) throw new Error(`spark-stripe: ${r.status}`);
+  return r.json();
+}
+var getStatus = (email) => _fetch(email);
+var _cache = /* @__PURE__ */ new Map();
+async function getStatusCached(email) {
+  const k = email.toLowerCase(), hit = _cache.get(k);
+  if (hit && Date.now() < hit.exp) return hit.data;
+  const data = await getStatus(email);
+  _cache.set(k, { data, exp: Date.now() + 6e4 });
+  return data;
+}
+function getTier(d) {
+  if (!d.subscription || !d.registered) return "free";
+  if (d.subscription.status === "canceled" || d.subscription.status === "past_due") return "free";
+  return TIERS[d.subscription.price_id] ?? "free";
+}
+var isPaid = (d) => getTier(d) !== "free";
+var hasAccess = (d, min) => (RANK[getTier(d)] ?? 0) >= (RANK[min] ?? 0);
+var hasTrialRemaining = (d) => isPaid(d) || !!d.trial && !d.trial.is_expired && d.trial.uses_remaining > 0;
+var showPaywall = (d) => !isPaid(d) && !hasTrialRemaining(d);
+var isCanceling = (d) => !!d.subscription && d.subscription.cancel_at_period_end && d.subscription.status !== "canceled";
+async function getTierByEmail(email) {
+  try {
+    return getTier(await getStatusCached(email));
+  } catch {
+    return "free";
+  }
+}
+async function isVerified(email) {
+  try {
+    return (await getStatusCached(email)).verified;
+  } catch {
+    return false;
+  }
+}
+function pricingUrl(opts) {
+  const u = new URL(`${BASE}/pricing/${APP_ID}`);
+  if (opts?.email) u.searchParams.set("email", opts.email);
+  if (opts?.returnUrl) u.searchParams.set("return_url", opts.returnUrl);
+  return u.toString();
+}
+
+// src/lib/voices.ts
+import { WIDE_VOICES } from "@spark-apps/video-kit";
+export {
+  ACTIONS_REQUIRING_TARGET,
+  EXCLUDED_LINK_PATTERNS,
+  FEATURES,
+  FIX_PLAN_SYSTEM_PROMPT,
+  INTERACTIVE_SELECTORS,
+  INVALID_TARGETS,
+  WIDE_VOICES as LANGUAGE_VOICES,
+  REFINE_PLAN_SYSTEM_PROMPT,
+  buildSystemPrompt,
+  buildUserPrompt,
+  callAI,
+  collectPreservedValues,
+  crawlPage,
+  filterValidSteps,
+  getErrorMessage,
+  getLanguageName,
+  getStatus,
+  getStatusCached,
+  getTier,
+  getTierByEmail,
+  hasAccess,
+  hasTrialRemaining,
+  hexToAss as hexToASS,
+  isCanceling,
+  isExcludedLink,
+  isInvalidTarget,
+  isPaid,
+  isValidStep,
+  isVerified,
+  normalizeUrl,
+  parseAIPlanResponse,
+  parsePartial,
+  pricingUrl,
+  restorePreservedValues,
+  rgbaToHex,
+  shouldSkipLink,
+  showPaywall,
+  toTitleCase,
+  validateStep,
+  windowsDrivePathToWsl as windowsPathToWSL
+};