@easybits.cloud/html-tailwind-generator 0.2.77 → 0.2.79

package/dist/{chunk-4GB4ALVO.js → chunk-4AQKIQEQ.js}

@@ -1,7 +1,7 @@
 import {
   dataUrlToImagePart,
   streamGenerate
-} from "./chunk-MCDFYIZR.js";
+} from "./chunk-ZPKB3WII.js";
 
 // src/generateDocument.ts
 var DOCUMENT_SYSTEM_PROMPT = `You are a professional document designer who creates stunning letter-sized (8.5" \xD7 11") document pages using HTML + Tailwind CSS.
@@ -246,4 +246,4 @@ export {
   DOCUMENT_PROMPT_SUFFIX,
   generateDocument
 };
-//# sourceMappingURL=chunk-4GB4ALVO.js.map
+//# sourceMappingURL=chunk-4AQKIQEQ.js.map

package/dist/{chunk-6V6DJEVR.js → chunk-GX7HHTBE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-N5FPMOXI.js";
 import {
   enrichImages
-} from "./chunk-GW5ZUYWT.js";
+} from "./chunk-N5VJ3WSJ.js";
 
 // src/refine.ts
 import { streamText } from "ai";
@@ -146,4 +146,4 @@ export {
   extractSectionDescription,
   refineLanding
 };
-//# sourceMappingURL=chunk-6V6DJEVR.js.map
+//# sourceMappingURL=chunk-GX7HHTBE.js.map

package/dist/{chunk-GW5ZUYWT.js → chunk-N5VJ3WSJ.js}

@@ -8,8 +8,8 @@ async function searchImage(query, apiKey) {
       { headers: { Authorization: key } }
     );
     if (!res.ok) {
-      console.warn(`[pexels] ${res.status} for "${query}"`);
-      return null;
+      console.warn(`[pexels] ${res.status} for "${query}", trying unsplash fallback`);
+      return searchUnsplash(query);
     }
     const data = await res.json();
     const photos = data.photos;
@@ -23,6 +23,25 @@ async function searchImage(query, apiKey) {
       photographer: photo.photographer,
       alt: photo.alt || query
     };
+  } catch {
+    return searchUnsplash(query);
+  }
+}
+async function searchUnsplash(query) {
+  try {
+    const res = await fetch(
+      `https://unsplash.com/napi/search/photos?query=${encodeURIComponent(query)}&per_page=5&orientation=landscape`
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    const results = data.results;
+    if (!results || results.length === 0) return null;
+    const photo = results[Math.floor(Math.random() * results.length)];
+    return {
+      url: photo.urls?.regular || photo.urls?.small,
+      photographer: photo.user?.name || "Unsplash",
+      alt: photo.alt_description || query
+    };
   } catch {
     return null;
   }
@@ -175,4 +194,4 @@ export {
   findImageSlots,
   enrichImages
 };
-//# sourceMappingURL=chunk-GW5ZUYWT.js.map
+//# sourceMappingURL=chunk-N5VJ3WSJ.js.map

package/dist/chunk-N5VJ3WSJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/images/pexels.ts","../src/images/dalleImages.ts","../src/images/enrichImages.ts"],"sourcesContent":["export interface PexelsResult {\n  url: string;\n  photographer: string;\n  alt: string;\n}\n\nexport async function searchImage(query: string, apiKey?: string): Promise<PexelsResult | null> {\n  const key = apiKey || process.env.PEXELS_API_KEY;\n  if (!key) return null;\n  try {\n    const res = await fetch(\n      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=5&orientation=landscape&locale=en-US`,\n      { headers: { Authorization: key } }\n    );\n    if (!res.ok) {\n      console.warn(`[pexels] ${res.status} for \"${query}\", trying unsplash fallback`);\n      return searchUnsplash(query);\n    }\n    const data = await res.json();\n    const photos = data.photos;\n    if (!photos || photos.length === 0) {\n      console.warn(`[pexels] 0 results for \"${query}\"`);\n      return null;\n    }\n    const photo = photos[Math.floor(Math.random() * photos.length)];\n    return {\n      url: photo.src.large,\n      photographer: photo.photographer,\n      alt: photo.alt || query,\n    };\n  } catch {\n    return searchUnsplash(query);\n  }\n}\n\nasync function searchUnsplash(query: string): Promise<PexelsResult | null> {\n  try {\n    const res = await fetch(\n      `https://unsplash.com/napi/search/photos?query=${encodeURIComponent(query)}&per_page=5&orientation=landscape`\n    );\n    if (!res.ok) return null;\n    const data = await res.json();\n    const results = data.results;\n    if (!results || results.length === 0) return null;\n    const photo = results[Math.floor(Math.random() * results.length)];\n    return {\n      url: photo.urls?.regular || photo.urls?.small,\n      photographer: photo.user?.name || \"Unsplash\",\n      alt: photo.alt_description || query,\n    };\n  } catch {\n    return null;\n  }\n}\n","/**\n * Generate an image using DALL-E 3 API.\n */\nexport async function generateImage(\n  query: string,\n  openaiApiKey: string\n): Promise<string> {\n  const res = await fetch(\"https://api.openai.com/v1/images/generations\", {\n    method: \"POST\",\n    headers: {\n      Authorization: `Bearer ${openaiApiKey}`,\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify({\n      model: \"dall-e-3\",\n      prompt: query,\n      n: 1,\n      size: \"1792x1024\",\n    }),\n  });\n\n  if (!res.ok) {\n    const err = await res.text().catch(() => \"Unknown error\");\n    throw new Error(`DALL-E API error ${res.status}: ${err}`);\n  }\n\n  const data = await res.json();\n  return data.data[0].url;\n}\n","import { searchImage } from \"./pexels\";\nimport { generateImage } from \"./dalleImages\";\n\ninterface ImageMatch {\n  query: string;\n  searchStr: string;\n  replaceStr: string;\n}\n\nexport interface EnrichImagesOptions {\n  pexelsApiKey?: string;\n  openaiApiKey?: string;\n  /** Called with temp URL + query, returns permanent URL. Use to persist DALL-E images to S3/etc. */\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n}\n\nconst FAKE_DOMAINS = [\n  \"images.unsplash.com\",\n  \"unsplash.com\",\n  \"via.placeholder.com\",\n  \"placeholder.com\",\n  \"placehold.co\",\n  \"placehold.it\",\n  \"placekitten.com\",\n  \"picsum.photos\",\n  \"loremflickr.com\",\n  \"source.unsplash.com\",\n  \"dummyimage.com\",\n  \"fakeimg.pl\",\n  \"example.com\",\n  \"img.freepik.com\",\n  \"cdn.pixabay.com\",\n];\n\n/**\n * Find all images in HTML that need Pexels enrichment.\n * Two strategies:\n * 1. data-image-query=\"...\" — AI followed instructions\n * 2. <img src=\"fake-url\" — detect fake domains, use alt/class/nearby text as query\n */\nexport function findImageSlots(html: string): ImageMatch[] {\n  const matches: ImageMatch[] = [];\n  const seen = new Set<string>();\n\n  // 1. data-image-query=\"...\" — match the full <img> tag so we can replace src + data-image-query together\n  const diqRegex = /<img\\s[^>]*data-image-query=\"([^\"]+)\"[^>]*>/gi;\n  let m: RegExpExecArray | null;\n  while ((m = diqRegex.exec(html)) !== null) {\n    const fullTag = m[0];\n    const query = m[1];\n    if (seen.has(query)) continue;\n    seen.add(query);\n    // Build replacement tag: replace src (if any) and data-image-query with final src\n    const cleanedTag = fullTag\n      .replace(/\\ssrc=\"[^\"]*\"/, \"\")\n      .replace(/\\sdata-image-query=\"[^\"]*\"/, \"\");\n    // Insert src and data-enriched right after <img\n    const replaceTag = cleanedTag.replace(\n      /^<img/,\n      `<img src=\"{url}\" data-enriched=\"true\"`\n    );\n    matches.push({\n      query,\n      searchStr: fullTag,\n      replaceStr: replaceTag,\n    });\n  }\n\n  // 2. <img with fake/non-existent src URLs\n  const imgRegex = /<img\\s[^>]*src=\"(https?:\\/\\/[^\"]+)\"[^>]*>/gi;\n  while ((m = imgRegex.exec(html)) !== null) {\n    const fullTag = m[0];\n    const srcUrl = m[1];\n\n    if (fullTag.includes(\"data-enriched\")) continue;\n    if (srcUrl.includes(\"pexels.com\")) continue;\n    if (seen.has(srcUrl)) continue;\n\n    // Check if domain is fake\n    let isFake = false;\n    try {\n      const domain = new URL(srcUrl).hostname;\n      isFake = FAKE_DOMAINS.some((d) => domain.includes(d));\n    } catch {\n      isFake = true;\n    }\n    if (!isFake) continue;\n\n    // Extract query: try alt, then class context, then URL path words\n    const altMatch = fullTag.match(/alt=\"([^\"]*?)\"/);\n    let query = altMatch?.[1]?.trim() || \"\";\n\n    if (!query) {\n      // Try to extract meaningful words from the URL path\n      try {\n        const path = new URL(srcUrl).pathname;\n        const words = path\n          .replace(/[^a-zA-Z]/g, \" \")\n          .split(/\\s+/)\n          .filter((w) => w.length > 2)\n          .slice(0, 4)\n          .join(\" \");\n        if (words.length > 3) query = words;\n      } catch { /* ignore */ }\n    }\n\n    if (!query) query = \"professional website hero image\";\n\n    seen.add(srcUrl);\n    matches.push({\n      query,\n      searchStr: `src=\"${srcUrl}\"`,\n      replaceStr: `src=\"{url}\" data-enriched=\"true\"`,\n    });\n  }\n\n  return matches;\n}\n\n/**\n * Enrich all images in an HTML string.\n * Strategy: Pexels (free) → DALL-E fallback (if openaiApiKey) → placeholder.\n * All images resolved in parallel. If persistImage callback provided, temp DALL-E URLs are persisted.\n */\nexport async function enrichImages(html: string, pexelsApiKeyOrOpts?: string | EnrichImagesOptions, openaiApiKey?: string): Promise<string> {\n  // Support both legacy (string, string) and new (options object) signatures\n  let opts: EnrichImagesOptions;\n  if (typeof pexelsApiKeyOrOpts === \"object\" && pexelsApiKeyOrOpts !== null) {\n    opts = pexelsApiKeyOrOpts;\n  } else {\n    opts = { pexelsApiKey: pexelsApiKeyOrOpts, openaiApiKey };\n  }\n\n  const slots = findImageSlots(html);\n  if (slots.length === 0) return html;\n\n  // Resolve all images in parallel\n  const resolved = await Promise.allSettled(\n    slots.map(async (slot) => {\n      let url: string | null = null;\n\n      // 1. Pexels first (free)\n      if (opts.pexelsApiKey) {\n        const img = await searchImage(slot.query, opts.pexelsApiKey).catch(() => null);\n        url = img?.url || null;\n      }\n\n      // 2. DALL-E fallback if Pexels found nothing\n      if (!url && opts.openaiApiKey) {\n        try {\n          const tempUrl = await generateImage(slot.query, opts.openaiApiKey);\n          url = opts.persistImage\n            ? await opts.persistImage(tempUrl, slot.query)\n            : tempUrl;\n        } catch (e) {\n          console.warn(`[dalle] failed for \"${slot.query}\":`, e);\n        }\n      }\n\n      // 3. Placeholder fallback\n      url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n\n      return { slot, url };\n    })\n  );\n\n  let result = html;\n  for (const r of resolved) {\n    if (r.status === \"fulfilled\" && r.value) {\n      const { slot, url } = r.value;\n      const replacement = slot.replaceStr.replace(\"{url}\", url);\n      result = result.replaceAll(slot.searchStr, replacement);\n    }\n  }\n\n  // Catch any remaining <img> tags without src\n  result = result.replace(/<img\\s(?![^>]*\\bsrc=)([^>]*?)>/gi, (_match, attrs) => {\n    const altMatch = attrs.match(/alt=\"([^\"]*?)\"/);\n    const query = altMatch?.[1] || \"professional image\";\n    return `<img src=\"https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}\" ${attrs}>`;\n  });\n\n  return result;\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-23WSYKLM.js → chunk-YUGB2BAI.js}

@@ -1,7 +1,7 @@
 import {
   dataUrlToImagePart,
   streamGenerate
-} from "./chunk-MCDFYIZR.js";
+} from "./chunk-ZPKB3WII.js";
 
 // src/generate.ts
 var SYSTEM_PROMPT = `You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.
@@ -130,4 +130,4 @@ export {
   PROMPT_SUFFIX,
   generateLanding
 };
-//# sourceMappingURL=chunk-23WSYKLM.js.map
+//# sourceMappingURL=chunk-YUGB2BAI.js.map

package/dist/{chunk-MCDFYIZR.js → chunk-ZPKB3WII.js}

@@ -8,7 +8,7 @@ import {
   findImageSlots,
   generateImage,
   searchImage
-} from "./chunk-GW5ZUYWT.js";
+} from "./chunk-N5VJ3WSJ.js";
 
 // src/streamCore.ts
 import { streamText } from "ai";
@@ -282,4 +282,4 @@ export {
   extractJsonObjects,
   streamGenerate
 };
-//# sourceMappingURL=chunk-MCDFYIZR.js.map
+//# sourceMappingURL=chunk-ZPKB3WII.js.map

package/dist/directions.d.ts

@@ -47,6 +47,8 @@ declare function generateHeroPreview(options: {
     product?: "landing" | "document";
     /** Use 4o-mini instead of Haiku for cheaper previews */
     useOpenai?: boolean;
+    /** Called with partial HTML as it streams in */
+    onChunk?: (partialHtml: string) => void;
 }): Promise<string>;
 
 export { type DesignDirection, DesignDirectionSchema, type DirectionsOptions, generateDirections, generateHeroPreview };

package/dist/directions.js

@@ -56,7 +56,7 @@ Generate ${count} design directions. Make them as visually distinct as possible.
   return object.directions;
 }
 async function generateHeroPreview(options) {
-  const { prompt, direction, anthropicApiKey, openaiApiKey, product = "landing", useOpenai = false } = options;
+  const { prompt, direction, anthropicApiKey, openaiApiKey, product = "landing", useOpenai = false, onChunk } = options;
   let model;
   if (useOpenai) {
     const apiKey = openaiApiKey || process.env.OPENAI_API_KEY;
@@ -80,7 +80,11 @@ Use real-looking content specific to the brief (Spanish text).
 Include: document title (large), subtitle or description, date, optional author/company name.
 NO buttons or CTAs \u2014 this is a print document cover.
 NO emoji \u2014 use geometric shapes or SVG icons for decoration.
-MANDATORY: Include at least 1 image using <img data-image-query="specific english search query" alt="description" class="..."/>. NEVER include src attribute \u2014 only data-image-query. The system resolves real photos automatically.` : `You create stunning hero sections with HTML + Tailwind CSS.
+MANDATORY IMAGE: Include exactly 1 full-bleed background image covering the entire page or a large section.
+Pattern: <img data-image-query="specific english search query" alt="description" class="absolute inset-0 w-full h-full object-cover"/>
+Then overlay text on top with a semi-transparent backdrop: <div class="absolute inset-0 bg-black/40"></div> or similar.
+NEVER include a src attribute \u2014 ONLY data-image-query. The system resolves real Unsplash photos automatically.
+NEVER place images in small corners \u2014 they must be dramatic, full-bleed backgrounds.` : `You create stunning hero sections with HTML + Tailwind CSS.
 Output ONLY the raw HTML \u2014 no markdown fences, no explanation.
 The HTML must include a <link> tag for Google Fonts and a <section> tag.
 Use the EXACT fonts and colors provided. The hero must feel premium and polished.
@@ -112,9 +116,15 @@ Mood: ${direction.mood}
 ${sectionInstruction}`
   });
   let html = "";
+  let chunkCount = 0;
   for await (const chunk of result.textStream) {
     html += chunk;
+    chunkCount++;
+    if (onChunk && chunkCount % 3 === 0) {
+      onChunk(html);
+    }
   }
+  if (onChunk) onChunk(html);
   html = html.trim();
   if (html.startsWith("```")) {
     html = html.replace(/^```(?:html|xml)?\s*/, "").replace(/\s*```$/, "");

package/dist/directions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/directions.ts"],"sourcesContent":["import { generateObject, streamText } from \"ai\";\nimport { createAnthropic } from \"@ai-sdk/anthropic\";\nimport { createOpenAI } from \"@ai-sdk/openai\";\nimport { z } from \"zod\";\nimport { nanoid } from \"nanoid\";\n\nexport const DesignDirectionSchema = z.object({\n  name: z.string().describe(\"Creative direction name, e.g. 'The Editorial'\"),\n  tagline: z\n    .string()\n    .describe(\"One-line vibe description, e.g. 'Bold serif typography meets minimalist space'\"),\n  headingFont: z\n    .string()\n    .describe(\"Google Font name for headings, e.g. 'Playfair Display'\"),\n  bodyFont: z\n    .string()\n    .describe(\"Google Font name for body text, e.g. 'Inter'\"),\n  colors: z.object({\n    primary: z.string().describe(\"Main brand color as hex, e.g. '#6366f1'\"),\n    accent: z.string().describe(\"Accent/CTA color as hex, e.g. '#f59e0b'\"),\n    surface: z.string().describe(\"Background surface color as hex, e.g. '#ffffff'\"),\n    surfaceAlt: z.string().describe(\"Alt surface (cards, alternating sections) as hex, e.g. '#f8fafc'\"),\n    text: z.string().describe(\"Main text color as hex, e.g. '#0f172a'\"),\n  }),\n  mood: z.enum([\"dark\", \"light\", \"warm\", \"cool\", \"vibrant\"]),\n  layoutHint: z\n    .string()\n    .describe(\"Layout archetype: 'split-screen', 'editorial', 'immersive-gallery', 'community-feed', 'bento-grid', 'magazine'\"),\n});\n\nexport type DesignDirection = z.infer<typeof DesignDirectionSchema>;\n\nexport interface DirectionsOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  count?: number;\n  /** \"landing\" generates hero sections, \"document\" generates cover pages */\n  product?: \"landing\" | \"document\";\n}\n\nconst DIRECTIONS_SYSTEM = `You are an elite creative director at a top design agency (Pentagram, Sagmeister, Collins).\n\nGiven a project brief, propose design directions that are MAXIMALLY diverse from each other.\n\nRULES:\n- Each direction must feel like a completely DIFFERENT design agency made it\n- Vary these axes: typography style (geometric sans, humanist sans, serif, slab, display/decorative), color mood (dark, light, warm, cool, vibrant), layout approach (editorial, split-screen, immersive, bento-grid, community)\n- Fonts MUST be popular Google Fonts that render well. Good examples:\n  SANS: Inter, DM Sans, Space Grotesk, Outfit, Plus Jakarta Sans, Manrope, Sora, Figtree, Urbanist\n  SERIF: Playfair Display, Lora, Merriweather, Source Serif 4, Cormorant Garamond, Libre Baskerville, DM Serif Display\n  DISPLAY: Bebas Neue, Oswald, Archivo Black, Righteous, Anton, Alfa Slab One\n  MONO: JetBrains Mono, Space Mono, IBM Plex Mono\n- NEVER use the same heading font twice\n- NEVER use the same color palette twice\n- AT LEAST one direction must be dark-mode\n- AT LEAST one must use serif headings\n- AT LEAST one must be bold/editorial with huge typography\n- Colors must be cohesive palettes, not random. Think Dribbble-worthy.\n- Names should be evocative (\"The Chronicle\", \"Neon Pulse\", \"Warm Atelier\")`;\n\n/**\n * Generate N design directions for a landing page.\n * Uses generateObject for type-safe structured output.\n */\nexport async function generateDirections(\n  options: DirectionsOptions\n): Promise<DesignDirection[]> {\n  const { prompt, count = 4, openaiApiKey } = options;\n\n  const apiKey = openaiApiKey || process.env.OPENAI_API_KEY;\n  if (!apiKey) throw new Error(\"OpenAI API key required for generateDirections\");\n\n  const openai = createOpenAI({ apiKey });\n  const model = openai(\"gpt-4o-mini\");\n\n  const { object } = await generateObject({\n    model,\n    schema: z.object({\n      directions: z.array(DesignDirectionSchema).length(count),\n    }),\n    system: DIRECTIONS_SYSTEM,\n    prompt: `Project brief: \"${prompt}\"\n\nGenerate ${count} design directions. Make them as visually distinct as possible.`,\n  });\n\n  return object.directions;\n}\n\n/**\n * Generate a hero section preview for a given design direction.\n * Fast Haiku call, returns raw HTML string with Google Fonts link.\n */\nexport async function generateHeroPreview(options: {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  direction: DesignDirection;\n  product?: \"landing\" | \"document\";\n  /** Use 4o-mini instead of Haiku for cheaper previews */\n  useOpenai?: boolean;\n}): Promise<string> {\n  const { prompt, direction, anthropicApiKey, openaiApiKey, product = \"landing\", useOpenai = false } = options;\n\n  let model: any;\n  if (useOpenai) {\n    const apiKey = openaiApiKey || process.env.OPENAI_API_KEY;\n    if (!apiKey) throw new Error(\"OpenAI API key required\");\n    const openai = createOpenAI({ apiKey });\n    model = openai(\"gpt-4o-mini\");\n  } else {\n    const apiKey = anthropicApiKey || process.env.ANTHROPIC_API_KEY;\n    if (!apiKey) throw new Error(\"Anthropic API key required\");\n    const anthropic = createAnthropic({ apiKey });\n    model = anthropic(\"claude-haiku-4-5-20251001\");\n  }\n\n  const fontsUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(direction.headingFont).replace(/%20/g, \"+\")}:wght@400;700;900&family=${encodeURIComponent(direction.bodyFont).replace(/%20/g, \"+\")}:wght@400;500;600&display=swap`;\n\n  const isDocument = product === \"document\";\n\n  const systemPrompt = isDocument\n    ? `You create stunning document cover pages with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nThis is a LETTER-SIZE document cover page (8.5\" × 11\"), NOT a website hero.\nUse the EXACT fonts and colors provided. The cover must feel premium and print-ready.\nUse real-looking content specific to the brief (Spanish text).\nInclude: document title (large), subtitle or description, date, optional author/company name.\nNO buttons or CTAs — this is a print document cover.\nNO emoji — use geometric shapes or SVG icons for decoration.\nMANDATORY: Include at least 1 image using <img data-image-query=\"specific english search query\" alt=\"description\" class=\"...\"/>. NEVER include src attribute — only data-image-query. The system resolves real photos automatically.`\n    : `You create stunning hero sections with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nUse the EXACT fonts and colors provided. The hero must feel premium and polished.\nUse real-looking content specific to the brief (Spanish text).\nInclude: headline (huge), subtitle, 1-2 CTAs, and optionally a hero image via <img data-image-query=\"...\" alt=\"...\" class=\"...\">.\nNEVER use src on img tags. Use data-image-query with English search terms.`;\n\n  const sectionInstruction = isDocument\n    ? `Generate a document cover page. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section class=\"w-[8.5in] h-[11in] relative overflow-hidden\"> sized for letter paper.\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nUse full-bleed backgrounds, geometric accents, elegant typography hierarchy.\nMake it look like a $50K design agency document cover.`\n    : `Generate a hero section. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section> with min-h-[80vh].\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nMake it look like a $50K agency landing page hero.`;\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    prompt: `Brief: \"${prompt}\"\n\nDesign direction: \"${direction.name}\" — ${direction.tagline}\nLayout: ${direction.layoutHint}\nHeading font: ${direction.headingFont}\nBody font: ${direction.bodyFont}\nColors: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}, surfaceAlt=${direction.colors.surfaceAlt}, text=${direction.colors.text}\nMood: ${direction.mood}\n\n${sectionInstruction}`,\n  });\n\n  let html = \"\";\n  for await (const chunk of result.textStream) {\n    html += chunk;\n  }\n\n  // Clean markdown fences if present\n  html = html.trim();\n  if (html.startsWith(\"```\")) {\n    html = html.replace(/^```(?:html|xml)?\\s*/, \"\").replace(/\\s*```$/, \"\");\n  }\n\n  return html;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/directions.ts"],"sourcesContent":["import { generateObject, streamText } from \"ai\";\nimport { createAnthropic } from \"@ai-sdk/anthropic\";\nimport { createOpenAI } from \"@ai-sdk/openai\";\nimport { z } from \"zod\";\nimport { nanoid } from \"nanoid\";\n\nexport const DesignDirectionSchema = z.object({\n  name: z.string().describe(\"Creative direction name, e.g. 'The Editorial'\"),\n  tagline: z\n    .string()\n    .describe(\"One-line vibe description, e.g. 'Bold serif typography meets minimalist space'\"),\n  headingFont: z\n    .string()\n    .describe(\"Google Font name for headings, e.g. 'Playfair Display'\"),\n  bodyFont: z\n    .string()\n    .describe(\"Google Font name for body text, e.g. 'Inter'\"),\n  colors: z.object({\n    primary: z.string().describe(\"Main brand color as hex, e.g. '#6366f1'\"),\n    accent: z.string().describe(\"Accent/CTA color as hex, e.g. '#f59e0b'\"),\n    surface: z.string().describe(\"Background surface color as hex, e.g. '#ffffff'\"),\n    surfaceAlt: z.string().describe(\"Alt surface (cards, alternating sections) as hex, e.g. '#f8fafc'\"),\n    text: z.string().describe(\"Main text color as hex, e.g. '#0f172a'\"),\n  }),\n  mood: z.enum([\"dark\", \"light\", \"warm\", \"cool\", \"vibrant\"]),\n  layoutHint: z\n    .string()\n    .describe(\"Layout archetype: 'split-screen', 'editorial', 'immersive-gallery', 'community-feed', 'bento-grid', 'magazine'\"),\n});\n\nexport type DesignDirection = z.infer<typeof DesignDirectionSchema>;\n\nexport interface DirectionsOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  count?: number;\n  /** \"landing\" generates hero sections, \"document\" generates cover pages */\n  product?: \"landing\" | \"document\";\n}\n\nconst DIRECTIONS_SYSTEM = `You are an elite creative director at a top design agency (Pentagram, Sagmeister, Collins).\n\nGiven a project brief, propose design directions that are MAXIMALLY diverse from each other.\n\nRULES:\n- Each direction must feel like a completely DIFFERENT design agency made it\n- Vary these axes: typography style (geometric sans, humanist sans, serif, slab, display/decorative), color mood (dark, light, warm, cool, vibrant), layout approach (editorial, split-screen, immersive, bento-grid, community)\n- Fonts MUST be popular Google Fonts that render well. Good examples:\n  SANS: Inter, DM Sans, Space Grotesk, Outfit, Plus Jakarta Sans, Manrope, Sora, Figtree, Urbanist\n  SERIF: Playfair Display, Lora, Merriweather, Source Serif 4, Cormorant Garamond, Libre Baskerville, DM Serif Display\n  DISPLAY: Bebas Neue, Oswald, Archivo Black, Righteous, Anton, Alfa Slab One\n  MONO: JetBrains Mono, Space Mono, IBM Plex Mono\n- NEVER use the same heading font twice\n- NEVER use the same color palette twice\n- AT LEAST one direction must be dark-mode\n- AT LEAST one must use serif headings\n- AT LEAST one must be bold/editorial with huge typography\n- Colors must be cohesive palettes, not random. Think Dribbble-worthy.\n- Names should be evocative (\"The Chronicle\", \"Neon Pulse\", \"Warm Atelier\")`;\n\n/**\n * Generate N design directions for a landing page.\n * Uses generateObject for type-safe structured output.\n */\nexport async function generateDirections(\n  options: DirectionsOptions\n): Promise<DesignDirection[]> {\n  const { prompt, count = 4, openaiApiKey } = options;\n\n  const apiKey = openaiApiKey || process.env.OPENAI_API_KEY;\n  if (!apiKey) throw new Error(\"OpenAI API key required for generateDirections\");\n\n  const openai = createOpenAI({ apiKey });\n  const model = openai(\"gpt-4o-mini\");\n\n  const { object } = await generateObject({\n    model,\n    schema: z.object({\n      directions: z.array(DesignDirectionSchema).length(count),\n    }),\n    system: DIRECTIONS_SYSTEM,\n    prompt: `Project brief: \"${prompt}\"\n\nGenerate ${count} design directions. Make them as visually distinct as possible.`,\n  });\n\n  return object.directions;\n}\n\n/**\n * Generate a hero section preview for a given design direction.\n * Fast Haiku call, returns raw HTML string with Google Fonts link.\n */\nexport async function generateHeroPreview(options: {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  direction: DesignDirection;\n  product?: \"landing\" | \"document\";\n  /** Use 4o-mini instead of Haiku for cheaper previews */\n  useOpenai?: boolean;\n  /** Called with partial HTML as it streams in */\n  onChunk?: (partialHtml: string) => void;\n}): Promise<string> {\n  const { prompt, direction, anthropicApiKey, openaiApiKey, product = \"landing\", useOpenai = false, onChunk } = options;\n\n  let model: any;\n  if (useOpenai) {\n    const apiKey = openaiApiKey || process.env.OPENAI_API_KEY;\n    if (!apiKey) throw new Error(\"OpenAI API key required\");\n    const openai = createOpenAI({ apiKey });\n    model = openai(\"gpt-4o-mini\");\n  } else {\n    const apiKey = anthropicApiKey || process.env.ANTHROPIC_API_KEY;\n    if (!apiKey) throw new Error(\"Anthropic API key required\");\n    const anthropic = createAnthropic({ apiKey });\n    model = anthropic(\"claude-haiku-4-5-20251001\");\n  }\n\n  const fontsUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(direction.headingFont).replace(/%20/g, \"+\")}:wght@400;700;900&family=${encodeURIComponent(direction.bodyFont).replace(/%20/g, \"+\")}:wght@400;500;600&display=swap`;\n\n  const isDocument = product === \"document\";\n\n  const systemPrompt = isDocument\n    ? `You create stunning document cover pages with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nThis is a LETTER-SIZE document cover page (8.5\" × 11\"), NOT a website hero.\nUse the EXACT fonts and colors provided. The cover must feel premium and print-ready.\nUse real-looking content specific to the brief (Spanish text).\nInclude: document title (large), subtitle or description, date, optional author/company name.\nNO buttons or CTAs — this is a print document cover.\nNO emoji — use geometric shapes or SVG icons for decoration.\nMANDATORY IMAGE: Include exactly 1 full-bleed background image covering the entire page or a large section.\nPattern: <img data-image-query=\"specific english search query\" alt=\"description\" class=\"absolute inset-0 w-full h-full object-cover\"/>\nThen overlay text on top with a semi-transparent backdrop: <div class=\"absolute inset-0 bg-black/40\"></div> or similar.\nNEVER include a src attribute — ONLY data-image-query. The system resolves real Unsplash photos automatically.\nNEVER place images in small corners — they must be dramatic, full-bleed backgrounds.`\n    : `You create stunning hero sections with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nUse the EXACT fonts and colors provided. The hero must feel premium and polished.\nUse real-looking content specific to the brief (Spanish text).\nInclude: headline (huge), subtitle, 1-2 CTAs, and optionally a hero image via <img data-image-query=\"...\" alt=\"...\" class=\"...\">.\nNEVER use src on img tags. Use data-image-query with English search terms.`;\n\n  const sectionInstruction = isDocument\n    ? `Generate a document cover page. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section class=\"w-[8.5in] h-[11in] relative overflow-hidden\"> sized for letter paper.\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nUse full-bleed backgrounds, geometric accents, elegant typography hierarchy.\nMake it look like a $50K design agency document cover.`\n    : `Generate a hero section. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section> with min-h-[80vh].\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nMake it look like a $50K agency landing page hero.`;\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    prompt: `Brief: \"${prompt}\"\n\nDesign direction: \"${direction.name}\" — ${direction.tagline}\nLayout: ${direction.layoutHint}\nHeading font: ${direction.headingFont}\nBody font: ${direction.bodyFont}\nColors: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}, surfaceAlt=${direction.colors.surfaceAlt}, text=${direction.colors.text}\nMood: ${direction.mood}\n\n${sectionInstruction}`,\n  });\n\n  let html = \"\";\n  let chunkCount = 0;\n  for await (const chunk of result.textStream) {\n    html += chunk;\n    chunkCount++;\n    if (onChunk && chunkCount % 3 === 0) {\n      onChunk(html);\n    }\n  }\n  if (onChunk) onChunk(html);\n\n  // Clean markdown fences if present\n  html = html.trim();\n  if (html.startsWith(\"```\")) {\n    html = html.replace(/^```(?:html|xml)?\\s*/, \"\").replace(/\\s*```$/, \"\");\n  }\n\n  return html;\n}\n"],"mappings":"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","names":[]}

package/dist/generate.js

@@ -2,13 +2,13 @@ import {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,
   generateLanding
-} from "./chunk-23WSYKLM.js";
+} from "./chunk-YUGB2BAI.js";
 import {
   extractJsonObjects
-} from "./chunk-MCDFYIZR.js";
+} from "./chunk-ZPKB3WII.js";
 import "./chunk-4NOYN34W.js";
 import "./chunk-N5FPMOXI.js";
-import "./chunk-GW5ZUYWT.js";
+import "./chunk-N5VJ3WSJ.js";
 export {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,

package/dist/generateDocument.js

@@ -2,11 +2,11 @@ import {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,
   generateDocument
-} from "./chunk-4GB4ALVO.js";
-import "./chunk-MCDFYIZR.js";
+} from "./chunk-4AQKIQEQ.js";
+import "./chunk-ZPKB3WII.js";
 import "./chunk-4NOYN34W.js";
 import "./chunk-N5FPMOXI.js";
-import "./chunk-GW5ZUYWT.js";
+import "./chunk-N5VJ3WSJ.js";
 export {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,

package/dist/images.js

@@ -7,7 +7,7 @@ import {
   findImageSlots,
   generateImage,
   searchImage
-} from "./chunk-GW5ZUYWT.js";
+} from "./chunk-N5VJ3WSJ.js";
 export {
   enrichImages,
   findImageSlots,

package/dist/index.js

@@ -10,29 +10,29 @@ import {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,
   generateLanding
-} from "./chunk-23WSYKLM.js";
+} from "./chunk-YUGB2BAI.js";
 import {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,
   generateDocument
-} from "./chunk-4GB4ALVO.js";
+} from "./chunk-4AQKIQEQ.js";
 import {
   extractJsonObjects
-} from "./chunk-MCDFYIZR.js";
+} from "./chunk-ZPKB3WII.js";
 import {
   generateSvg
 } from "./chunk-4NOYN34W.js";
 import {
   REFINE_SYSTEM,
   refineLanding
-} from "./chunk-6V6DJEVR.js";
+} from "./chunk-GX7HHTBE.js";
 import "./chunk-N5FPMOXI.js";
 import {
   enrichImages,
   findImageSlots,
   generateImage,
   searchImage
-} from "./chunk-GW5ZUYWT.js";
+} from "./chunk-N5VJ3WSJ.js";
 import {
   deployToEasyBits,
   deployToS3

package/dist/refine.js

@@ -2,9 +2,9 @@ import {
   REFINE_SYSTEM,
   extractSectionDescription,
   refineLanding
-} from "./chunk-6V6DJEVR.js";
+} from "./chunk-GX7HHTBE.js";
 import "./chunk-N5FPMOXI.js";
-import "./chunk-GW5ZUYWT.js";
+import "./chunk-N5VJ3WSJ.js";
 export {
   REFINE_SYSTEM,
   extractSectionDescription,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.2.77",
+  "version": "0.2.79",
   "description": "AI-powered landing page generator with Tailwind CSS — canvas editor, streaming generation, and one-click deploy",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",
@@ -99,7 +99,7 @@
     }
   },
   "dependencies": {
-    "@easybits.cloud/html-tailwind-generator": "^0.2.74",
+    "@easybits.cloud/html-tailwind-generator": "^0.2.78",
     "nanoid": "^5.1.5"
   },
   "devDependencies": {

package/dist/chunk-GW5ZUYWT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/images/pexels.ts","../src/images/dalleImages.ts","../src/images/enrichImages.ts"],"sourcesContent":["export interface PexelsResult {\n  url: string;\n  photographer: string;\n  alt: string;\n}\n\nexport async function searchImage(query: string, apiKey?: string): Promise<PexelsResult | null> {\n  const key = apiKey || process.env.PEXELS_API_KEY;\n  if (!key) return null;\n  try {\n    const res = await fetch(\n      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=5&orientation=landscape&locale=en-US`,\n      { headers: { Authorization: key } }\n    );\n    if (!res.ok) {\n      console.warn(`[pexels] ${res.status} for \"${query}\"`);\n      return null;\n    }\n    const data = await res.json();\n    const photos = data.photos;\n    if (!photos || photos.length === 0) {\n      console.warn(`[pexels] 0 results for \"${query}\"`);\n      return null;\n    }\n    const photo = photos[Math.floor(Math.random() * photos.length)];\n    return {\n      url: photo.src.large,\n      photographer: photo.photographer,\n      alt: photo.alt || query,\n    };\n  } catch {\n    return null;\n  }\n}\n","/**\n * Generate an image using DALL-E 3 API.\n */\nexport async function generateImage(\n  query: string,\n  openaiApiKey: string\n): Promise<string> {\n  const res = await fetch(\"https://api.openai.com/v1/images/generations\", {\n    method: \"POST\",\n    headers: {\n      Authorization: `Bearer ${openaiApiKey}`,\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify({\n      model: \"dall-e-3\",\n      prompt: query,\n      n: 1,\n      size: \"1792x1024\",\n    }),\n  });\n\n  if (!res.ok) {\n    const err = await res.text().catch(() => \"Unknown error\");\n    throw new Error(`DALL-E API error ${res.status}: ${err}`);\n  }\n\n  const data = await res.json();\n  return data.data[0].url;\n}\n","import { searchImage } from \"./pexels\";\nimport { generateImage } from \"./dalleImages\";\n\ninterface ImageMatch {\n  query: string;\n  searchStr: string;\n  replaceStr: string;\n}\n\nexport interface EnrichImagesOptions {\n  pexelsApiKey?: string;\n  openaiApiKey?: string;\n  /** Called with temp URL + query, returns permanent URL. Use to persist DALL-E images to S3/etc. */\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n}\n\nconst FAKE_DOMAINS = [\n  \"images.unsplash.com\",\n  \"unsplash.com\",\n  \"via.placeholder.com\",\n  \"placeholder.com\",\n  \"placehold.co\",\n  \"placehold.it\",\n  \"placekitten.com\",\n  \"picsum.photos\",\n  \"loremflickr.com\",\n  \"source.unsplash.com\",\n  \"dummyimage.com\",\n  \"fakeimg.pl\",\n  \"example.com\",\n  \"img.freepik.com\",\n  \"cdn.pixabay.com\",\n];\n\n/**\n * Find all images in HTML that need Pexels enrichment.\n * Two strategies:\n * 1. data-image-query=\"...\" — AI followed instructions\n * 2. <img src=\"fake-url\" — detect fake domains, use alt/class/nearby text as query\n */\nexport function findImageSlots(html: string): ImageMatch[] {\n  const matches: ImageMatch[] = [];\n  const seen = new Set<string>();\n\n  // 1. data-image-query=\"...\" — match the full <img> tag so we can replace src + data-image-query together\n  const diqRegex = /<img\\s[^>]*data-image-query=\"([^\"]+)\"[^>]*>/gi;\n  let m: RegExpExecArray | null;\n  while ((m = diqRegex.exec(html)) !== null) {\n    const fullTag = m[0];\n    const query = m[1];\n    if (seen.has(query)) continue;\n    seen.add(query);\n    // Build replacement tag: replace src (if any) and data-image-query with final src\n    const cleanedTag = fullTag\n      .replace(/\\ssrc=\"[^\"]*\"/, \"\")\n      .replace(/\\sdata-image-query=\"[^\"]*\"/, \"\");\n    // Insert src and data-enriched right after <img\n    const replaceTag = cleanedTag.replace(\n      /^<img/,\n      `<img src=\"{url}\" data-enriched=\"true\"`\n    );\n    matches.push({\n      query,\n      searchStr: fullTag,\n      replaceStr: replaceTag,\n    });\n  }\n\n  // 2. <img with fake/non-existent src URLs\n  const imgRegex = /<img\\s[^>]*src=\"(https?:\\/\\/[^\"]+)\"[^>]*>/gi;\n  while ((m = imgRegex.exec(html)) !== null) {\n    const fullTag = m[0];\n    const srcUrl = m[1];\n\n    if (fullTag.includes(\"data-enriched\")) continue;\n    if (srcUrl.includes(\"pexels.com\")) continue;\n    if (seen.has(srcUrl)) continue;\n\n    // Check if domain is fake\n    let isFake = false;\n    try {\n      const domain = new URL(srcUrl).hostname;\n      isFake = FAKE_DOMAINS.some((d) => domain.includes(d));\n    } catch {\n      isFake = true;\n    }\n    if (!isFake) continue;\n\n    // Extract query: try alt, then class context, then URL path words\n    const altMatch = fullTag.match(/alt=\"([^\"]*?)\"/);\n    let query = altMatch?.[1]?.trim() || \"\";\n\n    if (!query) {\n      // Try to extract meaningful words from the URL path\n      try {\n        const path = new URL(srcUrl).pathname;\n        const words = path\n          .replace(/[^a-zA-Z]/g, \" \")\n          .split(/\\s+/)\n          .filter((w) => w.length > 2)\n          .slice(0, 4)\n          .join(\" \");\n        if (words.length > 3) query = words;\n      } catch { /* ignore */ }\n    }\n\n    if (!query) query = \"professional website hero image\";\n\n    seen.add(srcUrl);\n    matches.push({\n      query,\n      searchStr: `src=\"${srcUrl}\"`,\n      replaceStr: `src=\"{url}\" data-enriched=\"true\"`,\n    });\n  }\n\n  return matches;\n}\n\n/**\n * Enrich all images in an HTML string.\n * Strategy: Pexels (free) → DALL-E fallback (if openaiApiKey) → placeholder.\n * All images resolved in parallel. If persistImage callback provided, temp DALL-E URLs are persisted.\n */\nexport async function enrichImages(html: string, pexelsApiKeyOrOpts?: string | EnrichImagesOptions, openaiApiKey?: string): Promise<string> {\n  // Support both legacy (string, string) and new (options object) signatures\n  let opts: EnrichImagesOptions;\n  if (typeof pexelsApiKeyOrOpts === \"object\" && pexelsApiKeyOrOpts !== null) {\n    opts = pexelsApiKeyOrOpts;\n  } else {\n    opts = { pexelsApiKey: pexelsApiKeyOrOpts, openaiApiKey };\n  }\n\n  const slots = findImageSlots(html);\n  if (slots.length === 0) return html;\n\n  // Resolve all images in parallel\n  const resolved = await Promise.allSettled(\n    slots.map(async (slot) => {\n      let url: string | null = null;\n\n      // 1. Pexels first (free)\n      if (opts.pexelsApiKey) {\n        const img = await searchImage(slot.query, opts.pexelsApiKey).catch(() => null);\n        url = img?.url || null;\n      }\n\n      // 2. DALL-E fallback if Pexels found nothing\n      if (!url && opts.openaiApiKey) {\n        try {\n          const tempUrl = await generateImage(slot.query, opts.openaiApiKey);\n          url = opts.persistImage\n            ? await opts.persistImage(tempUrl, slot.query)\n            : tempUrl;\n        } catch (e) {\n          console.warn(`[dalle] failed for \"${slot.query}\":`, e);\n        }\n      }\n\n      // 3. Placeholder fallback\n      url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n\n      return { slot, url };\n    })\n  );\n\n  let result = html;\n  for (const r of resolved) {\n    if (r.status === \"fulfilled\" && r.value) {\n      const { slot, url } = r.value;\n      const replacement = slot.replaceStr.replace(\"{url}\", url);\n      result = result.replaceAll(slot.searchStr, replacement);\n    }\n  }\n\n  // Catch any remaining <img> tags without src\n  result = result.replace(/<img\\s(?![^>]*\\bsrc=)([^>]*?)>/gi, (_match, attrs) => {\n    const altMatch = attrs.match(/alt=\"([^\"]*?)\"/);\n    const query = altMatch?.[1] || \"professional image\";\n    return `<img src=\"https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}\" ${attrs}>`;\n  });\n\n  return result;\n}\n"],"mappings":"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","names":[]}