loopwind 0.9.1 → 0.9.3

package/website/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "dsgn-docs",
+  "name": "loopwind-docs",
   "type": "module",
   "version": "0.0.1",
   "scripts": {

package/website/public/robots.txt

@@ -1,5 +1,5 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://dsgn.dev/sitemap.xml
+Sitemap: https://loopwind.dev/sitemap.xml
 

package/_dsgn/templates/banner-hero/banner-hero.tsx

@@ -1,57 +0,0 @@
-
-export const meta = {
-  name: "banner-hero",
-  description: "A hero banner with shadcn design system",
-  type: "image",
-  size: {
-    width: 1600,
-    height: 900
-  },
-  props: {
-    title: "string",
-    subtitle: "string?",
-    image: "string?"
-  }
-};
-
-interface BannerHeroProps {
-  title: string;
-  subtitle?: string;
-  image?: string;
-  config?: any;
-  tw?: (classes: string) => any;
-}
-
-export default function BannerHero({
-  title,
-  subtitle,
-  image,
-  config,
-  tw = (classes: string) => ({})
-}: BannerHeroProps) {
-  return (
-    <div style={tw('w-full h-full flex flex-col justify-center p-20 bg-background')}>
-      <div style={tw('bg-card rounded-xl p-16 border flex flex-col')}>
-        <h1 style={tw('text-8xl font-bold mb-5 text-foreground')}>
-          {title}
-        </h1>
-
-        {subtitle && (
-          <p style={tw('text-4xl text-muted-foreground')}>
-            {subtitle}
-          </p>
-        )}
-
-        {image && (
-          <img
-            src={image}
-            style={{
-              ...tw('rounded-lg mt-10'),
-              width: '192px',
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}

package/_dsgn/templates/banner-hero/meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "banner-hero",
-  "description": "A hero banner with shadcn design system",
-  "type": "image",
-  "size": {
-    "width": 1600,
-    "height": 900
-  },
-  "props": {
-    "title": "string",
-    "subtitle": "string?",
-    "image": "string?"
-  }
-}

package/_dsgn/templates/composite-card/meta.json

@@ -1,16 +0,0 @@
-{
-  "name": "composite-card",
-  "description": "Card that embeds other templates",
-  "type": "image",
-  "size": {
-    "width": 1200,
-    "height": 800
-  },
-  "props": {
-    "title": "string",
-    "subtitle": "string?",
-    "qrUrl": "string?",
-    "bannerTitle": "string?",
-    "bannerSubtitle": "string?"
-  }
-}

package/_dsgn/templates/composite-card/template.tsx

@@ -1,44 +0,0 @@
-
-// Template metadata is defined in meta.json
-
-export default function Template({ title, subtitle, qrUrl, bannerTitle, bannerSubtitle, template, qr, tw }) {
-  return (
-    <div style={tw('w-full h-full flex flex-col bg-gradient-to-br from-slate-900 to-slate-800 p-12')}>
-      {/* Main Content */}
-      <div style={tw('bg-white rounded-3xl p-10 flex flex-col shadow-2xl')}>
-        {/* Title */}
-        <h1 style={tw('text-5xl font-bold text-gray-900 mb-3')}>
-          {title}
-        </h1>
-
-        {subtitle && (
-          <p style={tw('text-2xl text-gray-600 mb-8')}>
-            {subtitle}
-          </p>
-        )}
-
-        {/* Embedded Template - pass props directly, uses template's own meta.json for size */}
-        <div style={tw('mb-8 rounded-xl overflow-hidden flex')}>
-          {template('image', { title: bannerTitle, subtitle: bannerSubtitle })}
-        </div>
-
-        {/* QR Code if URL provided */}
-        {qrUrl && (
-          <div style={tw('flex items-center gap-6')}>
-            <div style={tw('bg-gray-100 p-4 rounded-xl flex')}>
-              <img
-                src={qr(qrUrl)}
-                width={120}
-                height={120}
-                alt="QR Code"
-              />
-            </div>
-            <p style={tw('text-lg text-gray-700 font-mono flex-1')}>
-              {qrUrl}
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/_dsgn/templates/image/meta.json

@@ -1,13 +0,0 @@
-{
-  "name": "image",
-  "description": "Simple image starter template",
-  "type": "image",
-  "size": {
-    "width": 1200,
-    "height": 630
-  },
-  "props": {
-    "title": "string",
-    "description": "string?"
-  }
-}

package/_dsgn/templates/image/template.tsx

@@ -1,28 +0,0 @@
-
-export const meta = {
-  name: "image",
-  description: "Simple image starter template",
-  type: "image",
-  size: { width: 1200, height: 630 },
-  props: {
-    title: "string",
-    description: "string?"
-  }
-};
-
-export default function Template({ title, description, tw }) {
-  return (
-    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-gradient-to-br from-gray-900 to-gray-950 p-16')}>
-      <div style={tw('bg-white border rounded-xl p-12 flex flex-col max-w-4xl')}>
-        <h1 style={tw('text-7xl font-bold text-gray-900 mb-4')}>
-          {title}
-        </h1>
-        {description && (
-          <p style={tw('text-3xl text-gray-600')}>
-            {description}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

package/_dsgn/templates/kitchen-sink/meta.json

@@ -1,13 +0,0 @@
-{
-  "name": "kitchen-sink",
-  "description": "Comprehensive example showcasing all supported Tailwind features",
-  "type": "image",
-  "size": {
-    "width": 1200,
-    "height": 630
-  },
-  "props": {
-    "title": "string",
-    "subtitle": "string?"
-  }
-}

package/_dsgn/templates/kitchen-sink/template.tsx

@@ -1,72 +0,0 @@
-
-export const meta = {
-  name: "kitchen-sink",
-  description: "Comprehensive example showcasing all supported Tailwind features",
-  type: "image",
-  size: { width: 1200, height: 630 },
-  props: {
-    title: "string",
-    subtitle: "string?"
-  }
-};
-
-export default function Template({ title, subtitle, tw }) {
-  return (
-    <div style={tw('w-full h-full flex flex-col bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-8')}>
-      {/* Header Card with Shadow */}
-      <div style={tw('bg-white rounded-2xl shadow-2xl p-8 mb-4 max-w-5xl flex flex-col')}>
-        <h1 style={tw('text-6xl font-extrabold text-indigo-600 mb-3 uppercase tracking-wide')}>
-          {title}
-        </h1>
-        {subtitle && (
-          <p style={tw('text-2xl text-gray-600 italic leading-relaxed')}>
-            {subtitle}
-          </p>
-        )}
-      </div>
-
-      {/* Feature Cards Grid */}
-      <div style={tw('flex flex-wrap gap-4 max-w-6xl flex-1')}>
-        {/* Card 1: Gradients & Shadows */}
-        <div style={tw('bg-gradient-to-br from-cyan-400 to-blue-500 rounded-xl shadow-lg p-6 flex-1 min-w-0 flex flex-col')}>
-          <h2 style={tw('text-2xl font-bold text-white mb-2 tracking-wider')}>
-            Gradients
-          </h2>
-          <p style={tw('text-sm text-white text-opacity-90 leading-normal')}>
-            Full gradient support
-          </p>
-        </div>
-
-        {/* Card 2: Borders & Transforms */}
-        <div style={tw('bg-white rounded-lg border-4 border-emerald-500 p-6 flex-1 min-w-0 flex flex-col shadow-md rotate-1')}>
-          <h2 style={tw('text-2xl font-semibold text-emerald-700 mb-2')}>
-            Transforms
-          </h2>
-          <p style={tw('text-sm text-gray-600 leading-tight')}>
-            Rotation supported!
-          </p>
-        </div>
-
-        {/* Card 3: Typography */}
-        <div style={tw('bg-gray-900 rounded-xl shadow-xl p-6 flex-1 min-w-0 flex flex-col')}>
-          <h2 style={tw('text-2xl font-black text-yellow-400 mb-2 uppercase letter-spacing-wide')}>
-            TYPOGRAPHY
-          </h2>
-          <p style={tw('text-xs text-gray-300 tracking-tight leading-loose')}>
-            All text styles work
-          </p>
-        </div>
-      </div>
-
-      {/* Bottom Info Bar */}
-      <div style={tw('mt-4 bg-white bg-opacity-20 rounded-lg px-6 py-3 max-w-5xl flex flex-row justify-between items-center')}>
-        <p style={tw('text-sm font-medium text-white')}>
-          Kitchen Sink Template
-        </p>
-        <p style={tw('text-xs text-white text-opacity-75 tracking-wide')}>
-          All features demonstrated
-        </p>
-      </div>
-    </div>
-  );
-}

package/_dsgn/templates/qr-card/meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "qr-card",
-  "description": "QR code card with title and URL",
-  "type": "image",
-  "size": {
-    "width": 800,
-    "height": 1000
-  },
-  "props": {
-    "title": "string",
-    "url": "string",
-    "subtitle": "string?"
-  }
-}

package/_dsgn/templates/qr-card/template.tsx

@@ -1,39 +0,0 @@
-
-// Template metadata is defined in meta.json
-
-export default function Template({ title, url, subtitle, qr, tw }) {
-  return (
-    <div style={tw('w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-indigo-600 to-purple-600 p-16')}>
-      <div style={tw('bg-white rounded-3xl p-12 flex flex-col items-center shadow-2xl max-w-2xl')}>
-        {/* Title */}
-        <h1 style={tw('text-5xl font-bold text-gray-900 mb-4 text-center')}>
-          {title}
-        </h1>
-
-        {/* Subtitle */}
-        {subtitle && (
-          <p style={tw('text-xl text-gray-600 mb-8 text-center')}>
-            {subtitle}
-          </p>
-        )}
-
-        {/* QR Code - automatically generated from the url prop */}
-        <div style={tw('bg-white p-6 rounded-2xl border-4 border-gray-200 mb-8 flex')}>
-          <img
-            src={qr(url)}
-            width={300}
-            height={300}
-            alt="QR Code"
-          />
-        </div>
-
-        {/* URL Display */}
-        <div style={tw('bg-gray-100 rounded-xl px-6 py-4 flex')}>
-          <p style={tw('text-lg text-gray-700 font-mono')}>
-            {url}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

package/_dsgn/templates/test-parent/child/meta.json

@@ -1,11 +0,0 @@
-{
-  "name": "Child Template",
-  "description": "A simple child template for testing relative paths",
-  "size": {
-    "width": 400,
-    "height": 300
-  },
-  "props": {
-    "text": "string"
-  }
-}

package/_dsgn/templates/test-parent/child/template.tsx

@@ -1,27 +0,0 @@
-
-interface ChildProps {
-  text: string;
-  tw: (classes: string) => any;
-  template: (name: string, props: any) => any;
-}
-
-export default function Child({ text, tw, template }: ChildProps) {
-  return (
-    <div
-      style={{
-        ...tw('bg-blue-500 text-white p-4 rounded-lg'),
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '10px',
-      }}
-    >
-      <div style={tw('text-2xl font-bold')}>Child Template</div>
-      <div style={tw('text-lg')}>{text}</div>
-
-      {/* Use parent-relative path to load sibling template */}
-      {template('../test-sibling', { message: 'Loaded via ../ path!' })}
-    </div>
-  );
-}

package/_dsgn/templates/test-parent/meta.json

@@ -1,12 +0,0 @@
-{
-  "name": "Parent Template",
-  "description": "A parent template that uses relative paths to load child templates",
-  "size": {
-    "width": 800,
-    "height": 600
-  },
-  "props": {
-    "title": "string",
-    "childText": "string"
-  }
-}

package/_dsgn/templates/test-parent/template.tsx

@@ -1,30 +0,0 @@
-
-interface ParentProps {
-  title: string;
-  childText: string;
-  tw: (classes: string) => any;
-  template: (name: string, props: any) => any;
-}
-
-export default function Parent({ title, childText, tw, template }: ParentProps) {
-  return (
-    <div
-      style={{
-        ...tw('bg-gradient-to-br from-purple-500 to-pink-500 p-8'),
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-        gap: '20px',
-      }}
-    >
-      <div style={tw('text-4xl font-bold text-white')}>{title}</div>
-      <div style={tw('text-lg text-white opacity-80')}>Testing relative template paths</div>
-
-      {/* Use relative path to load child template */}
-      {template('./child', { text: childText })}
-    </div>
-  );
-}

package/_dsgn/templates/test-sibling/meta.json

@@ -1,11 +0,0 @@
-{
-  "name": "Sibling Template",
-  "description": "A sibling template for testing parent-relative paths",
-  "size": {
-    "width": 300,
-    "height": 100
-  },
-  "props": {
-    "message": "string"
-  }
-}

package/_dsgn/templates/test-sibling/template.tsx

@@ -1,20 +0,0 @@
-
-interface SiblingProps {
-  message: string;
-  tw: (classes: string) => any;
-}
-
-export default function Sibling({ message, tw }: SiblingProps) {
-  return (
-    <div
-      style={{
-        ...tw('bg-green-500 text-white p-3 rounded'),
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div style={tw('text-sm font-semibold')}>Sibling: {message}</div>
-    </div>
-  );
-}

package/_dsgn/templates/video/.tmp/template-1763421345296.mjs

@@ -1,43 +0,0 @@
-import * as React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
-const meta = {
-  name: "video",
-  description: "Animated video starter template",
-  type: "video",
-  size: { width: 1200, height: 630 },
-  props: {
-    title: "string",
-    description: "string?"
-  },
-  video: {
-    fps: 30,
-    duration: 3
-  }
-};
-function Template({ title, description, frame, progress, tw }) {
-  const opacity = Math.min(1, progress * 2);
-  const translateY = 20 - progress * 20;
-  return /* @__PURE__ */ React.createElement("div", { style: tw("w-full h-full flex flex-col justify-center items-center bg-background p-16") }, /* @__PURE__ */ React.createElement("div", { style: tw("bg-card border rounded-xl p-12 flex flex-col max-w-4xl") }, /* @__PURE__ */ React.createElement(
-    "h1",
-    {
-      style: {
-        ...tw("text-7xl font-bold text-foreground mb-4"),
-        opacity,
-        transform: `translateY(${translateY}px)`
-      }
-    },
-    title
-  ), description && /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      style: {
-        ...tw("text-3xl text-muted-foreground"),
-        opacity: Math.min(1, (progress - 0.3) * 2)
-      }
-    },
-    description
-  )));
-}
-export {
-  Template as default,
-  meta
-};

package/_dsgn/templates/video/.tmp/template-1763421362228.mjs

@@ -1,43 +0,0 @@
-import * as React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
-const meta = {
-  name: "video",
-  description: "Animated video starter template",
-  type: "video",
-  size: { width: 1200, height: 630 },
-  props: {
-    title: "string",
-    description: "string?"
-  },
-  video: {
-    fps: 30,
-    duration: 3
-  }
-};
-function Template({ title, description, frame, progress, tw }) {
-  const opacity = Math.min(1, progress * 2);
-  const translateY = 20 - progress * 20;
-  return /* @__PURE__ */ React.createElement("div", { style: tw("w-full h-full flex flex-col justify-center items-center bg-background p-16") }, /* @__PURE__ */ React.createElement("div", { style: tw("bg-card border rounded-xl p-12 flex flex-col max-w-4xl") }, /* @__PURE__ */ React.createElement(
-    "h1",
-    {
-      style: {
-        ...tw("text-7xl font-bold text-foreground mb-4"),
-        opacity,
-        transform: `translateY(${translateY}px)`
-      }
-    },
-    title
-  ), description && /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      style: {
-        ...tw("text-3xl text-muted-foreground"),
-        opacity: Math.min(1, (progress - 0.3) * 2)
-      }
-    },
-    description
-  )));
-}
-export {
-  Template as default,
-  meta
-};

package/_dsgn/templates/video/.tmp/template-1763421377706.mjs

@@ -1,43 +0,0 @@
-import * as React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
-const meta = {
-  name: "video",
-  description: "Animated video starter template",
-  type: "video",
-  size: { width: 1200, height: 630 },
-  props: {
-    title: "string",
-    description: "string?"
-  },
-  video: {
-    fps: 30,
-    duration: 3
-  }
-};
-function Template({ title, description, frame, progress, tw }) {
-  const opacity = Math.min(1, progress * 2);
-  const translateY = 20 - progress * 20;
-  return /* @__PURE__ */ React.createElement("div", { style: tw("w-full h-full flex flex-col justify-center items-center bg-background p-16") }, /* @__PURE__ */ React.createElement("div", { style: tw("bg-card border rounded-xl p-12 flex flex-col max-w-4xl") }, /* @__PURE__ */ React.createElement(
-    "h1",
-    {
-      style: {
-        ...tw("text-7xl font-bold text-foreground mb-4"),
-        opacity,
-        transform: `translateY(${translateY}px)`
-      }
-    },
-    title
-  ), description && /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      style: {
-        ...tw("text-3xl text-muted-foreground"),
-        opacity: Math.min(1, (progress - 0.3) * 2)
-      }
-    },
-    description
-  )));
-}
-export {
-  Template as default,
-  meta
-};

package/_dsgn/templates/video/meta.json

@@ -1,17 +0,0 @@
-{
-  "name": "video",
-  "description": "Animated video starter template",
-  "type": "video",
-  "size": {
-    "width": 1200,
-    "height": 630
-  },
-  "props": {
-    "title": "string",
-    "description": "string?"
-  },
-  "video": {
-    "fps": 30,
-    "duration": 3
-  }
-}

package/_dsgn/templates/video/template.tsx

@@ -1,48 +0,0 @@
-export const meta = {
-  name: "video",
-  description: "Animated video starter template",
-  type: "video",
-  size: { width: 1200, height: 630 },
-  props: {
-    title: "string",
-    description: "string?"
-  },
-  video: {
-    fps: 30,
-    duration: 3
-  }
-};
-
-export default function Template({ title, description, frame, progress, tw }) {
-  // Fade in animation
-  const opacity = Math.min(1, progress * 2);
-
-  // Slide up animation
-  const translateY = 20 - (progress * 20);
-
-  return (
-    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-16')}>
-      <div style={tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl')}>
-        <h1
-          style={{
-            ...tw('text-7xl font-bold text-foreground mb-4'),
-            opacity,
-            transform: `translateY(${translateY}px)`
-          }}
-        >
-          {title}
-        </h1>
-        {description && (
-          <p
-            style={{
-              ...tw('text-3xl text-muted-foreground'),
-              opacity: Math.min(1, (progress - 0.3) * 2)
-            }}
-          >
-            {description}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

package/test-templates/_dsgn/templates/absolute-spin/meta.json

@@ -1,7 +0,0 @@
-{
-  "name": "absolute-spin",
-  "type": "video",
-  "size": { "width": 1920, "height": 1080 },
-  "video": { "fps": 30, "duration": 3 },
-  "props": {}
-}