loopwind 0.23.0 → 0.24.0

package/website/dist/_worker.js/pages/api/playground/templates.astro.mjs

@@ -1,92 +0,0 @@
-globalThis.process ??= {}; globalThis.process.env ??= {};
-import { readdir, readFile } from 'node:fs/promises';
-import { join } from 'node:path';
-export { r as renderers } from '../../../chunks/_@astro-renderers_-YVK7NHa.mjs';
-
-const prerender = false;
-const GET = async () => {
-  try {
-    const templatesDir = join(process.cwd(), "_loopwind", "templates");
-    const entries = await readdir(templatesDir, { withFileTypes: true });
-    const templateFiles = entries.filter(
-      (entry) => entry.isFile() && entry.name.endsWith(".tsx") && !entry.name.startsWith(".")
-    );
-    const templates = [];
-    for (const file of templateFiles) {
-      try {
-        const templatePath = join(templatesDir, file.name);
-        const templateContent = await readFile(templatePath, "utf-8");
-        const metaMatch = templateContent.match(/export const meta\s*=\s*({[\s\S]*?});/);
-        let meta = {};
-        if (metaMatch) {
-          try {
-            const cleanedMeta = metaMatch[1].replace(/\s+as\s+const/g, "").replace(/(\w+):/g, '"$1":').replace(/'/g, '"');
-            eval(`meta = ${cleanedMeta}`);
-          } catch (e) {
-            console.warn(`Failed to parse meta for ${file.name}:`, e);
-          }
-        }
-        const defaultProps = {};
-        if (meta.props) {
-          for (const [key, type] of Object.entries(meta.props)) {
-            const typeStr = String(type).toLowerCase();
-            if (typeStr === "string" || typeStr === '"string"' || typeStr === "'string'") {
-              if (key === "title") defaultProps[key] = "Hello World";
-              else if (key === "subtitle") defaultProps[key] = "Welcome to loopwind";
-              else if (key === "text") defaultProps[key] = "Sample text";
-              else if (key === "name") defaultProps[key] = "John Doe";
-              else if (key === "description") defaultProps[key] = "This is a sample description";
-              else if (key === "label") defaultProps[key] = "Label";
-              else defaultProps[key] = `Sample ${key}`;
-            } else if (typeStr === "number" || typeStr === '"number"' || typeStr === "'number'") {
-              if (key.includes("progress") || key.includes("percent")) defaultProps[key] = 75;
-              else if (key.includes("count") || key.includes("total")) defaultProps[key] = 100;
-              else defaultProps[key] = 42;
-            } else if (typeStr === "array" || typeStr === '"array"' || typeStr === "'array'") {
-              if (key === "items") defaultProps[key] = ["Item 1", "Item 2", "Item 3"];
-              else if (key === "colors") defaultProps[key] = ["#3b82f6", "#8b5cf6", "#ec4899"];
-              else defaultProps[key] = ["First", "Second", "Third"];
-            } else if (typeStr === "object" || typeStr === '"object"' || typeStr === "'object'") {
-              defaultProps[key] = {};
-            } else if (typeStr === "boolean" || typeStr === '"boolean"' || typeStr === "'boolean'") {
-              defaultProps[key] = true;
-            }
-          }
-        }
-        const id = file.name.replace(/\.tsx$/, "");
-        templates.push({
-          id,
-          name: meta.name || id.replace(/^example-/, "").replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
-          description: meta.description || `${meta.type === "video" ? "Video" : "Image"} template (${meta.size?.width}x${meta.size?.height})`,
-          template: templateContent,
-          props: defaultProps
-        });
-      } catch (err) {
-        console.warn(`Failed to load template ${file.name}:`, err);
-      }
-    }
-    return new Response(JSON.stringify({ templates }), {
-      status: 200,
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch (error) {
-    console.error("Failed to load templates:", error);
-    return new Response(JSON.stringify({
-      message: `Failed to load templates: ${error.message}`,
-      templates: []
-    }), {
-      status: 500,
-      headers: { "Content-Type": "application/json" }
-    });
-  }
-};
-
-const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  GET,
-  prerender
-}, Symbol.toStringTag, { value: 'Module' }));
-
-const page = () => _page;
-
-export { page };

package/website/dist/_worker.js/pages/api/raw-markdown/_---path_.astro.mjs

@@ -1,44 +0,0 @@
-globalThis.process ??= {}; globalThis.process.env ??= {};
-import { readFile } from 'fs/promises';
-import { join } from 'path';
-export { r as renderers } from '../../../chunks/_@astro-renderers_-YVK7NHa.mjs';
-
-const GET = async ({ params }) => {
-  const pathParam = params.path || "index";
-  console.log("API called with path param:", pathParam);
-  try {
-    const mdxFile = pathParam === "index" ? "index.mdx" : `${pathParam}.mdx`;
-    const filePath = join(process.cwd(), "src", "pages", mdxFile);
-    console.log("Attempting to read file:", filePath);
-    const content = await readFile(filePath, "utf-8");
-    return new Response(content, {
-      status: 200,
-      headers: {
-        "Content-Type": "text/plain; charset=utf-8"
-      }
-    });
-  } catch (error) {
-    console.error("Error reading file:", error);
-    return new Response(JSON.stringify({
-      error: String(error),
-      path: pathParam,
-      message: "File not found"
-    }), {
-      status: 404,
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-  }
-};
-const prerender = false;
-
-const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  GET,
-  prerender
-}, Symbol.toStringTag, { value: 'Module' }));
-
-const page = () => _page;
-
-export { page };

package/website/dist/_worker.js/pages/config.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/fonts.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/getting-started.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/helpers.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/images.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/index.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/llm.txt.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/playground/_example_.astro.mjs

@@ -1,95 +0,0 @@
-globalThis.process ??= {}; globalThis.process.env ??= {};
-import { c as createAstro, a as createComponent, b as addAttribute, e as renderHead, f as renderComponent, r as renderTemplate } from '../../chunks/astro/server_CsUrSZgd.mjs';
-/* empty css                                     */
-import { $ as $$Logo } from '../../chunks/Logo_Cud5QvBJ.mjs';
-import { readFile } from 'node:fs/promises';
-import { join } from 'node:path';
-/* empty css                                        */
-export { r as renderers } from '../../chunks/_@astro-renderers_-YVK7NHa.mjs';
-
-const $$Astro = createAstro("https://loopwind.dev");
-const prerender = false;
-const $$example = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro = $$result.createAstro($$Astro, $$props, $$slots);
-  Astro.self = $$example;
-  const { example: exampleId } = Astro.params;
-  const templatesDir = join(process.cwd(), "_loopwind", "templates");
-  const templatePath = join(templatesDir, `${exampleId}.tsx`);
-  let defaultTemplate = "";
-  let defaultProps = "{}";
-  let templateName = exampleId;
-  try {
-    defaultTemplate = await readFile(templatePath, "utf-8");
-    const metaMatch = defaultTemplate.match(/export const meta\s*=\s*({[\s\S]*?});/);
-    let meta = {};
-    if (metaMatch) {
-      try {
-        const cleanedMeta = metaMatch[1].replace(/\s+as\s+const/g, "");
-        eval(`meta = ${cleanedMeta}`);
-        templateName = meta.name || exampleId;
-        const props = {};
-        if (meta.props) {
-          for (const [key, type] of Object.entries(meta.props)) {
-            const typeStr = String(type).toLowerCase();
-            if (typeStr === "string" || typeStr === '"string"' || typeStr === "'string'") {
-              if (key === "title") props[key] = "Hello World";
-              else if (key === "subtitle") props[key] = "Welcome to loopwind";
-              else if (key === "text") props[key] = "Sample text";
-              else if (key === "name") props[key] = "John Doe";
-              else if (key === "description") props[key] = "This is a sample description";
-              else if (key === "label") props[key] = "Label";
-              else props[key] = `Sample ${key}`;
-            } else if (typeStr === "number" || typeStr === '"number"' || typeStr === "'number'") {
-              if (key.includes("progress") || key.includes("percent")) props[key] = 75;
-              else if (key.includes("count") || key.includes("total")) props[key] = 100;
-              else props[key] = 42;
-            } else if (typeStr === "array" || typeStr === '"array"' || typeStr === "'array'") {
-              if (key === "items") props[key] = ["Item 1", "Item 2", "Item 3"];
-              else if (key === "colors") props[key] = ["#3b82f6", "#8b5cf6", "#ec4899"];
-              else props[key] = ["First", "Second", "Third"];
-            } else if (typeStr === "object" || typeStr === '"object"' || typeStr === "'object'") {
-              props[key] = {};
-            } else if (typeStr === "boolean" || typeStr === '"boolean"' || typeStr === "'boolean'") {
-              props[key] = true;
-            }
-          }
-        }
-        defaultProps = JSON.stringify(props, null, 2);
-      } catch (e) {
-        console.warn(`Failed to parse meta for ${exampleId}:`, e);
-      }
-    }
-  } catch (error) {
-    console.error(`Failed to load template ${exampleId}:`, error);
-    return Astro.redirect("/playground");
-  }
-  const defaultConfig = JSON.stringify({
-    colors: {
-      primary: "#3b82f6",
-      background: "#ffffff",
-      foreground: "#0a0a0a"
-    },
-    fonts: {
-      sans: ["Inter", "sans-serif"]
-    }
-  }, null, 2);
-  return renderTemplate`<html lang="en" data-astro-cid-n7kzklju> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><title>${templateName} - Playground - loopwind</title><meta name="description"${addAttribute(`${templateName} template - Try loopwind in your browser`, "content")}>${renderHead()}</head> <body data-astro-cid-n7kzklju> <div class="playground-container" data-astro-cid-n7kzklju> <!-- Header --> <header class="playground-header" data-astro-cid-n7kzklju> <a href="/sdk" class="btn btn-secondary" style="margin-right: 1rem;" data-astro-cid-n7kzklju> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-n7kzklju> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" data-astro-cid-n7kzklju></path> </svg> </a> <a href="/" class="logo-link" data-astro-cid-n7kzklju> ${renderComponent($$result, "Logo", $$Logo, { "size": "sm", "data-astro-cid-n7kzklju": true })} </a> <div class="header-actions" data-astro-cid-n7kzklju> <button id="render-btn" class="btn btn-primary" data-astro-cid-n7kzklju> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-n7kzklju> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" data-astro-cid-n7kzklju></path> </svg>
-Export
-</button> </div> </header> <!-- Main Content --> <div class="playground-content" data-astro-cid-n7kzklju> <!-- Editor Panel --> ${renderComponent($$result, "PlaygroundEditor", null, { "client:only": "react", "defaultTemplate": defaultTemplate, "defaultProps": defaultProps, "defaultConfig": defaultConfig, "currentExample": exampleId, "onRefresh": () => {
-  }, "client:component-hydration": "only", "data-astro-cid-n7kzklju": true, "client:component-path": "/Users/tommyvedvik/Dev/dsgn/website/src/components/PlaygroundEditor", "client:component-export": "default" })} <!-- Preview Panel --> <div class="preview-panel" data-astro-cid-n7kzklju> <div class="preview-content" data-astro-cid-n7kzklju> <div id="image-preview-container" style="display: none;" data-astro-cid-n7kzklju></div> <div id="video-preview-container" data-astro-cid-n7kzklju> ${renderComponent($$result, "VideoPreviewClient", null, { "client:only": "react", "frames": null, "client:component-hydration": "only", "data-astro-cid-n7kzklju": true, "client:component-path": "/Users/tommyvedvik/Dev/dsgn/website/src/components/VideoPreviewClient", "client:component-export": "default" })} </div> </div> </div> </div> </div>  </body> </html>`;
-}, "/Users/tommyvedvik/Dev/dsgn/website/src/pages/playground/[example].astro", void 0);
-
-const $$file = "/Users/tommyvedvik/Dev/dsgn/website/src/pages/playground/[example].astro";
-const $$url = "/playground/[example]";
-
-const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  default: $$example,
-  file: $$file,
-  prerender,
-  url: $$url
-}, Symbol.toStringTag, { value: 'Module' }));
-
-const page = () => _page;
-
-export { page };

package/website/dist/_worker.js/pages/playground.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/preview.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/sdk.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/sitemap.xml.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/styling.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/templates.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/pages/video.astro.mjs

@@ -1 +0,0 @@
-// Contents removed by Astro as it's used for prerendering only

package/website/dist/_worker.js/renderers.mjs

@@ -1,2 +0,0 @@
-globalThis.process ??= {}; globalThis.process.env ??= {};
-export { r as renderers } from './chunks/_@astro-renderers_-YVK7NHa.mjs';

package/website/dist/agents/index.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html><html lang="en" data-astro-cid-mw7aashj> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/agents/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation, serverless, WASM, Open Graph, social media, marketing automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/agents/"><meta property="og:title"><meta property="og:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/api/og/agents"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt"><meta property="og:site_name" content="loopwind"><meta property="og:locale" content="en_US"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/agents/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/api/og/agents"><meta name="twitter:image:alt"><meta name="twitter:creator" content="@loopwind"><meta name="twitter:site" content="@loopwind"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="language" content="English"><meta name="revisit-after" content="7 days"><meta name="rating" content="general"><!-- Mobile Web App --><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="loopwind"><!-- Structured Data (JSON-LD) --><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"loopwind","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","description":"CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates.","url":"https://loopwind.dev/","author":{"@type":"Organization","name":"loopwind","url":"https://loopwind.dev/"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"softwareVersion":"0.11.0","releaseNotes":"https://github.com/loopwind/loopwind/releases","screenshot":"https://loopwind.dev/api/og/agents","featureList":["Image generation from React templates","Video generation with animations","Tailwind CSS support","shadcn/ui design system","CLI-based workflow","Serverless rendering","TypeScript support","AI Agent friendly"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"loopwind","url":"https://loopwind.dev/","logo":"https://loopwind.dev/favicon.svg","sameAs":["https://github.com/loopwind/loopwind","https://www.npmjs.com/package/loopwind"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://loopwind.dev/"},{"@type":"ListItem","position":2,"name":"Agents","item":"https://loopwind.dev/agents"}]}</script><link rel="stylesheet" href="/_astro/agents.CZXv4DCM.css">
-<style>.hero[data-astro-cid-bbe6dxrz]{position:relative}html{scroll-behavior:smooth}.mobile-header[data-astro-cid-mw7aashj]{display:none}.toc-sidebar[data-astro-cid-mw7aashj]{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar{width:4px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-track{background:transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb{background-color:#ffffff1a;border-radius:2px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb:hover{background-color:#fff3}#copy-to-llm-btn[data-astro-cid-mw7aashj]{cursor:pointer}@media (max-width: 768px){.mobile-header[data-astro-cid-mw7aashj]{display:block}.desktop-sidebar[data-astro-cid-mw7aashj]{display:none}main[data-astro-cid-mw7aashj]{margin-left:0;margin-right:0!important;padding:5rem 1.5rem 1.5rem}.toc-sidebar[data-astro-cid-mw7aashj]{display:none}#copy-to-llm-btn[data-astro-cid-mw7aashj]{width:100%;justify-content:center}}@media (max-width: 1280px){.toc-sidebar[data-astro-cid-mw7aashj]{display:none!important}main[data-astro-cid-mw7aashj]{margin-right:0!important}}
-</style><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
-</script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/playground" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Playground </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </div> </div> <!-- Desktop Sidebar --> <aside class="desktop-sidebar fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <div class="block mb-3" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-3xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-4xl">➰</span> <span>loopwind</span> </h1> </a> </div> <nav data-astro-cid-mw7aashj> <ul class="space-y-0" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/playground" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Playground </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64 mr-64" data-astro-cid-mw7aashj>  <div class="p-12" data-astro-cid-mw7aashj> <button id="copy-to-llm-btn" class="mb-6 px-4 py-2 bg-accent hover:bg-accent/80 text-accent-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2" aria-label="Copy raw markdown to clipboard" data-astro-cid-mw7aashj> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" data-astro-cid-mw7aashj></path> </svg> <span id="copy-btn-text" data-astro-cid-mw7aashj>Copy to LLM</span> </button> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="ai-agents">AI Agents</h1>
-<p>loopwind is designed to work with AI coding assistants. Simply add the <code>_loopwind</code> folder to context.</p>
-<h2 id="using-with-ai-code-agents">Using with AI Code Agents</h2>
-<p>In Cursor or Claude Code (Cline), type <code>@_loopwind</code> to add the folder to context, then ask:</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Generate an Open Graph image for my blog post about React hooks</span></span>
-<span class="line"><span></span></span></code></pre>
-<p>The AI will read the templates and generate the appropriate command.</p>
-<h2 id="the-agentsmd-file">The AGENTS.md File</h2>
-<p>When you run <code>loopwind init</code>, a <code>_loopwind/AGENTS.md</code> file is created with:</p>
-<ul>
-<li>Essential commands</li>
-<li>Template helpers reference</li>
-<li>Common workflows</li>
-</ul>
-<p>This gives AI agents everything they need to use loopwind effectively.</p>
-<h2 id="example-workflows">Example Workflows</h2>
-<h3 id="simple-image-generation">Simple Image Generation</h3>
-<p><strong>Prompt:</strong></p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Create a social media card using the og-image template:</span></span>
-<span class="line"><span>- Title: &quot;10 React Tips&quot;  </span></span>
-<span class="line"><span>- Description: &quot;Learn advanced patterns&quot;</span></span>
-<span class="line"><span></span></span></code></pre>
-<p><strong>AI generates:</strong></p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> og-image</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;10 React Tips&quot;,&quot;description&quot;:&quot;Learn advanced patterns&quot;}&#39;</span></span>
-<span class="line"></span></code></pre>
-<p><strong>Output:</strong> <code>_loopwind/outputs/og-image.png</code></p>
-<h3 id="changelog-image">Changelog Image</h3>
-<p><strong>Prompt:</strong></p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Create a changelog image for 3 recent changes:</span></span>
-<span class="line"><span>- Added video rendering support</span></span>
-<span class="line"><span>- Improved template validation</span></span>
-<span class="line"><span>- Fixed font loading issues</span></span>
-<span class="line"><span></span></span></code></pre>
-<p><strong>AI generates:</strong></p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> changelog-card</span><span style="color:#9ECBFF"> &#39;{</span></span>
-<span class="line"><span style="color:#9ECBFF">  &quot;title&quot;:&quot;Version 1.2.0&quot;,</span></span>
-<span class="line"><span style="color:#9ECBFF">  &quot;changes&quot;:[</span></span>
-<span class="line"><span style="color:#9ECBFF">    &quot;Added video rendering support&quot;,</span></span>
-<span class="line"><span style="color:#9ECBFF">    &quot;Improved template validation&quot;,</span></span>
-<span class="line"><span style="color:#9ECBFF">    &quot;Fixed font loading issues&quot;</span></span>
-<span class="line"><span style="color:#9ECBFF">  ]</span></span>
-<span class="line"><span style="color:#9ECBFF">}&#39;</span></span>
-<span class="line"></span></code></pre>
-<p><strong>Output:</strong> <code>_loopwind/outputs/changelog-card.png</code></p>
-<h2 id="next-steps">Next Steps</h2>
-<ul>
-<li><a href="/templates">Learn about Templates</a></li>
-<li><a href="/images">Image Rendering</a></li>
-<li><a href="/video">Video Rendering</a></li>
-<li><a href="/helpers">Built-in Helpers</a></li>
-</ul> </article> </div> </main> <!-- Table of Contents Sidebar (Desktop only) --> <aside id="toc-sidebar" class="toc-sidebar fixed top-0 right-0 h-screen w-64 overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="px-6 py-8" data-astro-cid-mw7aashj> <h3 class="text-xs font-semibold text-muted-foreground mb-4 uppercase tracking-wider" data-astro-cid-mw7aashj>On this page</h3> <nav id="toc-nav" data-astro-cid-mw7aashj> <!-- TOC will be populated by JavaScript --> </nav> </div> </aside> </div>  </body></html>