npm - agent-devkit - Versions diffs - 0.0.1 - Mend

agent-devkit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4610) hide show

package/runtime/vendor/plugins/open-design/_official/examples/stellar-launch/example.html ADDED Viewed

@@ -0,0 +1,498 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Stellar Launch — Launchex Awards</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://db.onlinewebfonts.com/c/69f2576e7ca287875bf8d089130e292c?family=TT+Firs+Neue" rel="stylesheet">
+  <style>
+    :root {
+      --dark: #154359;
+      --teal: #066377;
+      --bg-light: #F0F0F0;
+      --bg-lighter: #F0F5F7;
+      --nom-stroke: rgba(6, 99, 119, 0.25);
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      background: #ffffff;
+    }
+    .font-firs { font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif; }
+    .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
+    .no-scrollbar::-webkit-scrollbar { display: none; }
+    a { color: inherit; text-decoration: none; }
+    img, video { display: block; }
+    /* ───── OUTER SHELL ───── */
+    .shell {
+      height: 100vh; background: #fff; padding: 12px;
+    }
+    .frame {
+      position: relative; width: 100%; height: 100%;
+      overflow: hidden; border-radius: 28px; background: #fff;
+    }
+    .scroll {
+      position: absolute; inset: 0;
+      overflow-y: auto; overflow-x: hidden;
+    }
+    @media (min-width: 640px) {
+      .shell { padding: 20px; }
+      .frame { border-radius: 36px; }
+    }
+    /* ───── SECTION 1: HERO ───── */
+    .hero {
+      position: relative; min-height: calc(100vh - 40px);
+      overflow: hidden; display: flex; flex-direction: column;
+    }
+    .hero-video {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+      object-fit: cover; z-index: 0;
+    }
+    .hero-overlay {
+      position: absolute; inset: 0; z-index: 1;
+      background: linear-gradient(to bottom, rgba(0,0,0,0.10), transparent 50%, rgba(0,0,0,0.20));
+    }
+    .hero-topbar {
+      position: relative; z-index: 20;
+      display: flex; justify-content: space-between; align-items: flex-start;
+      padding: 20px 16px 0;
+    }
+    .logo { display: flex; align-items: flex-start; gap: 8px; color: #fff; }
+    .logo svg { width: 20px; height: 20px; }
+    .logo-text-main { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
+    .logo-text-sub { font-size: 10px; font-weight: 300; opacity: 0.9; margin-top: -2px; }
+    .cta {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: var(--teal); color: #fff;
+      font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
+      padding: 12px 18px;
+      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
+      transition: filter 0.25s ease;
+    }
+    .cta:hover { filter: brightness(1.25); }
+    .cta svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
+    .cta:hover svg { transform: translate(2px, -2px); }
+    .cta .cta-full { display: none; }
+    .cta .cta-short { display: inline; }
+    .hero-center {
+      position: relative; z-index: 10; flex: 1;
+      display: flex; flex-direction: column; align-items: center; text-align: center;
+      color: var(--dark); padding: 128px 16px 96px;
+    }
+    .eyebrow {
+      font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 500;
+      margin-bottom: 24px; opacity: 0.9;
+    }
+    .hero-heading {
+      font-weight: 400; letter-spacing: -0.04em; line-height: 0.9;
+      font-size: 48px; text-transform: none;
+    }
+    .hero-sub {
+      font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500;
+      max-width: 28rem; line-height: 1.8; opacity: 0.9; margin-top: 32px;
+    }
+    @media (min-width: 640px) {
+      .hero-topbar { padding: 32px 40px 0; }
+      .logo svg { width: 24px; height: 24px; }
+      .logo-text-main { font-size: 15px; }
+      .logo-text-sub { font-size: 11px; }
+      .cta { font-size: 11px; }
+      .cta .cta-full { display: inline; }
+      .cta .cta-short { display: none; }
+      .hero-center { padding-top: 160px; }
+      .eyebrow { font-size: 12px; }
+      .hero-heading { font-size: 76px; }
+      .hero-sub { font-size: 14px; }
+    }
+    @media (min-width: 1024px) { .hero-heading { font-size: 100px; } }
+    @media (min-width: 1280px) { .hero-heading { font-size: 120px; } }
+    /* ───── SECTION 2: SUBMISSIONS ───── */
+    .submissions {
+      position: relative; overflow: hidden;
+      background: var(--bg-light);
+      padding: 80px 24px;
+    }
+    .sub-grid {
+      max-width: 64rem; margin: 0 auto;
+      display: flex; flex-direction: column; gap: 40px;
+    }
+    .sub-center { order: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
+    .sub-left { order: 2; }
+    .sub-right { order: 3; }
+    .sub-kicker { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dark); }
+    .sub-title {
+      font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; color: var(--dark);
+      font-size: 44px; line-height: 1; margin-top: 4px;
+    }
+    .sub-video {
+      width: 220px; height: 220px; object-fit: cover; margin-top: 24px;
+    }
+    .nom-col { display: flex; flex-direction: column; gap: 16px; align-items: center; }
+    .nom-card {
+      position: relative; display: block;
+      width: 100%; max-width: 20em; height: 5em;
+      transition: transform 0.25s ease;
+    }
+    .nom-card:hover { transform: translateY(-2px); }
+    .nom-card svg.nom-border { position: absolute; inset: 0; width: 100%; height: 100%; }
+    .nom-inner {
+      position: absolute; inset: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      text-align: center; padding: 0 12px; color: var(--dark);
+    }
+    .nom-title { font-size: 13px; font-weight: 600; }
+    .nom-sub { font-size: 12px; font-weight: 400; opacity: 0.8; }
+    .sub-fade {
+      pointer-events: none; position: absolute; bottom: 0; left: 0; width: 100%;
+      height: 160px; z-index: 10;
+      background: linear-gradient(to bottom, rgba(240,245,247,0) 0%, rgba(240,245,247,0.7) 60%, #F0F5F7 100%);
+    }
+    @media (min-width: 640px) {
+      .submissions { padding: 112px 40px; }
+      .sub-title { font-size: 54px; }
+      .sub-video { width: 380px; height: 380px; margin-top: 32px; }
+      .sub-fade { height: 224px; }
+    }
+    @media (min-width: 1024px) {
+      .sub-grid {
+        flex-direction: row; align-items: flex-start; gap: 48px;
+      }
+      .sub-left { order: 1; margin-top: 144px; flex: 1; }
+      .sub-center { order: 2; flex: 1; }
+      .sub-right { order: 3; margin-top: 144px; flex: 1; }
+      .sub-video { width: 460px; height: 460px; }
+    }
+    /* ───── SECTION 3: ABOUT ───── */
+    .about {
+      position: relative; overflow: hidden;
+      background: var(--bg-lighter);
+      padding: 80px 24px;
+    }
+    .about-inner { max-width: 80rem; margin: 0 auto; }
+    .about-top {
+      display: flex; flex-direction: column; gap: 24px; color: var(--dark);
+    }
+    .about-heading {
+      font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95;
+      font-size: 36px;
+    }
+    .about-right { max-width: 36rem; }
+    .about-right p { font-size: 17px; line-height: 1.5; color: var(--dark); }
+    .about-right p + p { margin-top: 16px; }
+    .about-link {
+      display: inline-flex; align-items: center; gap: 12px;
+      margin-top: 24px; font-size: 14px; font-weight: 500; color: var(--dark);
+    }
+    .about-arrow {
+      display: grid; place-items: center; width: 32px; height: 32px;
+      border: 1px solid var(--dark);
+      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
+      transition: transform 0.25s ease;
+    }
+    .about-link:hover .about-arrow { transform: translateY(-2px); }
+    .about-arrow svg { width: 14px; height: 14px; }
+    .stats {
+      display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 56px;
+    }
+    .stat-card {
+      position: relative; width: 100%; height: 280px;
+      background-color: rgba(255,255,255,0.8); padding: 1.5px;
+    }
+    .stat-img {
+      width: 100%; height: 100%; overflow: hidden;
+      background-size: cover; background-position: center;
+      mix-blend-mode: plus-darker;
+    }
+    .stat-overlay { position: absolute; }
+    .stat-value {
+      font-weight: 600; text-transform: uppercase; font-size: 36px;
+      background: linear-gradient(294deg, #185B7B 20%, #4BBDF0);
+      -webkit-background-clip: text; background-clip: text; color: transparent;
+    }
+    .stat-desc { font-size: 14px; line-height: 1.4; color: var(--dark); margin-top: 12px; max-width: 66%; }
+    .stat-1 {
+      clip-path: polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px);
+    }
+    .stat-2 {
+      clip-path: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px));
+    }
+    .stat-3 {
+      clip-path: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px));
+    }
+    .stat-overlay-1 { left: 24px; right: 24px; bottom: 24px; }
+    .stat-overlay-2 { left: 24px; bottom: 80px; }
+    .stat-overlay-3 { left: 24px; right: 112px; bottom: 24px; }
+    .about-fade {
+      pointer-events: none; position: absolute; bottom: 0; left: 0; width: 100%;
+      height: 160px; z-index: 10;
+      background: linear-gradient(to bottom, rgba(240,245,247,0) 0%, rgba(240,245,247,0.7) 60%, #F0F5F7 100%);
+    }
+    @media (min-width: 640px) {
+      .about { padding: 112px 40px; }
+      .about-heading { font-size: 48px; }
+      .about-right p { font-size: 18px; }
+      .stat-card { height: 340px; }
+      .stat-value { font-size: 52px; }
+      .about-fade { height: 224px; }
+    }
+    @media (min-width: 768px) {
+      .stats { grid-template-columns: repeat(2, 1fr); }
+    }
+    @media (min-width: 1024px) {
+      .about-top { flex-direction: row; justify-content: space-between; }
+      .about-heading { font-size: 54px; }
+      .stats { grid-template-columns: repeat(3, 1fr); }
+      .stat-2-wrap { margin-top: 96px; }
+    }
+    /* ───── PERSISTENT OVERLAYS ───── */
+    .topnav {
+      display: none;
+      position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 40;
+      background: #fff; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px;
+      padding: 16px 24px; gap: 24px; align-items: center;
+    }
+    .topnav a {
+      font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
+      color: #262626; transition: color 0.2s ease;
+    }
+    .topnav a:hover { color: #737373; }
+    .topnav .corner { position: absolute; bottom: 0; width: 24px; height: 24px; background: #fff; }
+    .topnav .corner-left {
+      left: -24px;
+      -webkit-mask-image: radial-gradient(circle at 0 100%, transparent 24px, black 25px);
+      mask-image: radial-gradient(circle at 0 100%, transparent 24px, black 25px);
+    }
+    .topnav .corner-right {
+      right: -24px;
+      -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 24px, black 25px);
+      mask-image: radial-gradient(circle at 100% 100%, transparent 24px, black 25px);
+    }
+    @media (min-width: 768px) { .topnav { display: flex; } }
+    @media (min-width: 1024px) { .topnav { padding-left: 40px; padding-right: 40px; gap: 40px; } }
+    .page-indicator {
+      pointer-events: none; position: absolute; bottom: 16px; right: 16px; z-index: 40;
+      display: flex; align-items: center; gap: 12px;
+      color: rgba(255,255,255,0.8); font-size: 10px; font-weight: 500;
+      text-transform: uppercase; letter-spacing: 0.18em; mix-blend-mode: difference;
+    }
+    .page-indicator .line { width: 32px; height: 1px; background: rgba(255,255,255,0.4); }
+    .scroll-hint {
+      pointer-events: none; position: absolute; bottom: 16px; left: 16px; z-index: 40;
+      color: rgba(255,255,255,0.8); font-size: 10px; font-weight: 500;
+      text-transform: uppercase; letter-spacing: 0.18em; mix-blend-mode: difference;
+    }
+    @media (min-width: 640px) {
+      .page-indicator { bottom: 24px; right: 32px; }
+      .scroll-hint { bottom: 24px; left: 32px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <div class="frame">
+      <div class="scroll no-scrollbar" id="scroller">
+        <!-- ───── SECTION 1: HERO ───── -->
+        <section class="hero">
+          <video class="hero-video" autoplay loop muted playsinline
+            src="https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260511_151648_2bdfbd1c-6bde-4f5d-a967-f57cbced97f6-fb3729.mp4"></video>
+          <div class="hero-overlay"></div>
+          <div class="hero-topbar">
+            <div class="logo">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3L12 3z"/>
+                <path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/>
+              </svg>
+              <div>
+                <div class="logo-text-main">launchex</div>
+                <div class="logo-text-sub">awards</div>
+              </div>
+            </div>
+            <a class="cta" href="#">
+              <span class="cta-full">Send in your entry form</span>
+              <span class="cta-short">Enter</span>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M7 17L17 7"/><path d="M7 7h10v10"/>
+              </svg>
+            </a>
+          </div>
+          <div class="hero-center">
+            <div class="eyebrow">Prize for ventures</div>
+            <h1 class="hero-heading font-firs">launchex<br/>prizes</h1>
+            <p class="hero-sub">Bridging visions with reality, helping ventures soar up to the stars</p>
+          </div>
+        </section>
+        <!-- ───── SECTION 2: SUBMISSIONS ───── -->
+        <section class="submissions">
+          <div class="sub-grid">
+            <div class="sub-left">
+              <div class="nom-col">
+                <a class="nom-card" href="#">
+                  <svg class="nom-border" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <polygon points="14,0 100,0 100,86 86,100 0,100 0,14" fill="none" stroke="rgba(6,99,119,0.25)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+                  </svg>
+                  <div class="nom-inner"><span class="nom-title">Lead</span><span class="nom-sub">AI venture for commerce</span></div>
+                </a>
+                <a class="nom-card" href="#">
+                  <svg class="nom-border" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <polygon points="14,0 100,0 100,86 86,100 0,100 0,14" fill="none" stroke="rgba(6,99,119,0.25)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+                  </svg>
+                  <div class="nom-inner"><span class="nom-title">Emerging innovations</span><span class="nom-sub">in food commerce</span></div>
+                </a>
+                <a class="nom-card" href="#">
+                  <svg class="nom-border" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <polygon points="14,0 100,0 100,86 86,100 0,100 0,14" fill="none" stroke="rgba(6,99,119,0.25)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+                  </svg>
+                  <div class="nom-inner"><span class="nom-title">The finest innovations</span><span class="nom-sub">for learners and young students</span></div>
+                </a>
+              </div>
+            </div>
+            <div class="sub-center">
+              <div class="sub-kicker">[submissions]</div>
+              <div class="sub-title font-firs">submissions</div>
+              <video class="sub-video" autoplay loop muted playsinline
+                src="https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154120_b89bfedd-530d-4ebb-9eb7-42eeafe08667-c6b971.mp4"></video>
+            </div>
+            <div class="sub-right">
+              <div class="nom-col">
+                <a class="nom-card" href="#">
+                  <svg class="nom-border" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <polygon points="14,0 100,0 100,86 86,100 0,100 0,14" fill="none" stroke="rgba(6,99,119,0.25)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+                  </svg>
+                  <div class="nom-inner"><span class="nom-title">Innovations for advanced</span><span class="nom-sub">career training</span></div>
+                </a>
+                <a class="nom-card" href="#">
+                  <svg class="nom-border" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <polygon points="14,0 100,0 100,86 86,100 0,100 0,14" fill="none" stroke="rgba(6,99,119,0.25)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+                  </svg>
+                  <div class="nom-inner"><span class="nom-title">The finest innovations</span><span class="nom-sub">in finance</span></div>
+                </a>
+                <a class="nom-card" href="#">
+                  <svg class="nom-border" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <polygon points="14,0 100,0 100,86 86,100 0,100 0,14" fill="none" stroke="rgba(6,99,119,0.25)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+                  </svg>
+                  <div class="nom-inner"><span class="nom-title">Categories</span><span class="nom-sub">coming soon</span></div>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="sub-fade"></div>
+        </section>
+        <!-- ───── SECTION 3: ABOUT ───── -->
+        <section class="about">
+          <div class="about-inner">
+            <div class="about-top">
+              <h2 class="about-heading font-firs">About the<br/>founders</h2>
+              <div class="about-right">
+                <p>Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations.</p>
+                <p>Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation.</p>
+                <a class="about-link" href="https://base.launchex.vc/">
+                  <span>Launchex.Hub website</span>
+                  <span class="about-arrow">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M7 17L17 7"/><path d="M7 7h10v10"/>
+                    </svg>
+                  </span>
+                </a>
+              </div>
+            </div>
+            <div class="stats">
+              <div class="stat-card stat-1">
+                <div class="stat-img" style="background-image:url('https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8-158c74.webp&w=1280&q=85')"></div>
+                <div class="stat-overlay stat-overlay-1">
+                  <div class="stat-value font-firs">7+ years</div>
+                  <div class="stat-desc">Launchex has served the market, guiding ventures and their journeys</div>
+                </div>
+              </div>
+              <div class="stat-2-wrap">
+                <div class="stat-card stat-2">
+                  <div class="stat-img" style="background-image:url('https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8-71cb96.webp&w=1280&q=85')"></div>
+                  <div class="stat-overlay stat-overlay-2">
+                    <div class="stat-value font-firs">15000+</div>
+                    <div class="stat-desc">innovation ventures moved through the Launchex pipeline</div>
+                  </div>
+                </div>
+              </div>
+              <div class="stat-card stat-3">
+                <div class="stat-img" style="background-image:url('https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637-8b9102.webp&w=1280&q=85')"></div>
+                <div class="stat-overlay stat-overlay-3">
+                  <div class="stat-value font-firs">120+</div>
+                  <div class="stat-desc">accelerator sessions delivered by Launchex across Eastern Europe</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="about-fade"></div>
+        </section>
+      </div>
+      <!-- ───── PERSISTENT OVERLAYS ───── -->
+      <nav class="topnav">
+        <span class="corner corner-left"></span>
+        <a href="#">About</a>
+        <a href="#">Submissions</a>
+        <a href="#">Venue</a>
+        <a href="#">Judges</a>
+        <a href="#">Connect</a>
+        <span class="corner corner-right"></span>
+      </nav>
+      <div class="page-indicator">
+        <span id="pi-current">01</span>
+        <span class="line"></span>
+        <span>05</span>
+      </div>
+      <div class="scroll-hint">Scroll to discover</div>
+    </div>
+  </div>
+  <script>
+    // Page indicator reacts to scroll position across the 3 sections (mapped to 01..05).
+    (function () {
+      var scroller = document.getElementById('scroller');
+      var current = document.getElementById('pi-current');
+      if (!scroller || !current) return;
+      function update() {
+        var max = scroller.scrollHeight - scroller.clientHeight;
+        var ratio = max > 0 ? scroller.scrollTop / max : 0;
+        var n = Math.min(5, Math.max(1, Math.round(ratio * 4) + 1));
+        current.textContent = ('0' + n).slice(-2);
+      }
+      scroller.addEventListener('scroll', update, { passive: true });
+      update();
+    })();
+  </script>
+</body>
+</html>

package/runtime/vendor/plugins/open-design/_official/examples/stellar-launch/open-design.json ADDED Viewed

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-stellar-launch",
+  "title": "Stellar Launch — Launchex Awards",
+  "title_i18n": {
+    "zh-CN": "Stellar Launch — Launchex 创投大奖落地页",
+    "zh-TW": "Stellar Launch — Launchex 創投大獎落地頁",
+    "ja": "Stellar Launch — Launchex Awards",
+    "ko": "Stellar Launch — Launchex Awards",
+    "de": "Stellar Launch — Launchex Awards",
+    "fr": "Stellar Launch — Launchex Awards",
+    "ru": "Stellar Launch — Launchex Awards",
+    "es": "Stellar Launch — Launchex Awards",
+    "pt-BR": "Stellar Launch — Launchex Awards",
+    "it": "Stellar Launch — Launchex Awards",
+    "vi": "Stellar Launch — Launchex Awards",
+    "pl": "Stellar Launch — Launchex Awards",
+    "id": "Stellar Launch — Launchex Awards",
+    "nl": "Stellar Launch — Launchex Awards",
+    "ar": "Stellar Launch — Launchex Awards",
+    "tr": "Stellar Launch — Launchex Awards",
+    "uk": "Stellar Launch — Launchex Awards",
+    "en": "Stellar Launch — Launchex Awards"
+  },
+  "version": "0.1.0",
+  "description": "Premium awards / venture-prize landing page: an inset white card shell with rounded corners, a fullscreen video hero with chamfered clip-path CTA, a three-column submissions section with angular nomination cards around a square video, and an about-the-founders stats grid using plus-darker image cards and gradient-text figures.",
+  "description_i18n": {
+    "zh-CN": "高端创投大奖落地页：内嵌白色圆角卡片外壳、全屏视频 Hero 配斜切 clip-path CTA、围绕方形视频的三栏几何提名卡区，以及使用 plus-darker 图像卡和渐变文字数字的创始人统计网格。",
+    "zh-TW": "高端創投大獎落地頁：內嵌白色圓角卡片外殼、全螢幕影片 Hero 搭配斜切 clip-path CTA、環繞方形影片的三欄幾何提名卡區，以及使用 plus-darker 圖像卡與漸層文字數字的創辦人統計網格。",
+    "ja": "プレミアムなアワード／ベンチャー賞のランディングページ。角丸のインセット白カードシェル、面取り clip-path CTA を備えたフルスクリーン動画ヒーロー、正方形動画を囲む角張ったノミネートカードの3カラム応募セクション、そして plus-darker の画像カードとグラデーション文字の数字を用いた創業者紹介の統計グリッド。",
+    "ko": "프리미엄 어워드/벤처 프라이즈 랜딩 페이지. 둥근 모서리의 인셋 화이트 카드 셸, 모따기 clip-path CTA를 갖춘 풀스크린 비디오 히어로, 정사각형 비디오를 둘러싼 각진 노미네이션 카드의 3단 출품 섹션, 그리고 plus-darker 이미지 카드와 그라데이션 텍스트 숫자를 사용한 창업자 소개 통계 그리드.",
+    "de": "Premium-Landingpage für Awards bzw. Venture-Preise: eine eingelassene weiße Karten-Hülle mit abgerundeten Ecken, ein Vollbild-Video-Hero mit gefastem Clip-Path-CTA, ein dreispaltiger Einreichungsbereich mit kantigen Nominierungskarten rund um ein quadratisches Video sowie ein Statistik-Grid über die Gründer mit Plus-Darker-Bildkarten und Verlaufstext-Zahlen.",
+    "fr": "Landing page premium pour des prix / récompenses d'entreprises : une coque de carte blanche encastrée à coins arrondis, un hero vidéo plein écran avec CTA en clip-path chanfreiné, une section de candidatures à trois colonnes avec des cartes de nomination anguleuses autour d'une vidéo carrée, et une grille de statistiques sur les fondateurs avec des cartes-images en plus-darker et des chiffres en texte dégradé.",
+    "ru": "Премиальный лендинг для наград / венчурных премий: утопленная белая карточная оболочка со скруглёнными углами, полноэкранный видео-герой с CTA на основе скошенного clip-path, трёхколоночный раздел заявок с угловатыми карточками номинаций вокруг квадратного видео и сетка статистики об основателях с изображениями в режиме plus-darker и градиентными цифрами.",
+    "es": "Landing page premium para premios / galardones de venture: una carcasa de tarjeta blanca embutida con esquinas redondeadas, un hero de vídeo a pantalla completa con CTA de clip-path biselado, una sección de candidaturas a tres columnas con tarjetas de nominación angulares alrededor de un vídeo cuadrado y una cuadrícula de estadísticas sobre los fundadores con tarjetas de imagen plus-darker y cifras de texto en degradado.",
+    "pt-BR": "Landing page premium para prêmios / premiações de venture: um invólucro de cartão branco embutido com cantos arredondados, um hero de vídeo em tela cheia com CTA em clip-path chanfrado, uma seção de inscrições em três colunas com cartões de indicação angulares ao redor de um vídeo quadrado e uma grade de estatísticas sobre os fundadores usando cartões de imagem plus-darker e números em texto com gradiente.",
+    "it": "Landing page premium per premi / riconoscimenti venture: un guscio a card bianca incassata con angoli arrotondati, un hero video a tutto schermo con CTA in clip-path smussato, una sezione candidature a tre colonne con card di nomination angolari attorno a un video quadrato e una griglia di statistiche sui fondatori con card immagine plus-darker e numeri in testo sfumato.",
+    "vi": "Trang đích cao cấp cho giải thưởng / giải venture: lớp vỏ thẻ trắng lồng vào với góc bo tròn, hero video toàn màn hình với CTA dùng clip-path vát cạnh, khu vực đề cử ba cột với các thẻ đề cử góc cạnh bao quanh một video vuông, và lưới thống kê về các nhà sáng lập dùng thẻ hình plus-darker cùng các con số chữ gradient.",
+    "pl": "Premium landing page dla nagród / wyróżnień venture: osadzona biała karta-obudowa z zaokrąglonymi narożnikami, pełnoekranowy hero wideo z CTA opartym na sfazowanym clip-path, trzykolumnowa sekcja zgłoszeń z kanciastymi kartami nominacji wokół kwadratowego wideo oraz siatka statystyk o założycielach z kartami obrazkowymi plus-darker i liczbami w gradientowym tekście.",
+    "id": "Landing page premium untuk penghargaan / hadiah venture: cangkang kartu putih bertakuk dengan sudut membulat, hero video layar penuh dengan CTA clip-path bersudut serong, bagian pengajuan tiga kolom dengan kartu nominasi bersudut tajam mengelilingi video persegi, serta grid statistik tentang para pendiri yang memakai kartu gambar plus-darker dan angka teks gradien.",
+    "nl": "Premium landingspagina voor awards / venture-prijzen: een verzonken witte kaartschil met afgeronde hoeken, een schermvullende video-hero met afgeschuinde clip-path-CTA, een driekoloms inzendingssectie met hoekige nominatiekaarten rond een vierkante video, en een statistiekgrid over de oprichters met plus-darker beeldkaarten en gradient-tekstcijfers.",
+    "ar": "صفحة هبوط فاخرة لجوائز / جوائز المشاريع الناشئة: غلاف بطاقة أبيض غائر بزوايا دائرية، وقسم بطل (hero) بفيديو ملء الشاشة مع زر CTA بقصّ clip-path مشطوف الحواف، وقسم ترشيحات من ثلاثة أعمدة ببطاقات ترشيح زاويّة تحيط بفيديو مربّع، وشبكة إحصاءات عن المؤسسين تستخدم بطاقات صور بنمط plus-darker وأرقامًا بنص متدرّج الألوان.",
+    "tr": "Ödüller / girişim ödülleri için premium açılış sayfası: yuvarlatılmış köşeli, içe gömülü beyaz kart kabuğu, pahlanmış clip-path CTA'lı tam ekran video hero, kare bir videonun çevresinde köşeli aday kartlarıyla üç sütunlu başvuru bölümü ve plus-darker görsel kartları ile gradyan metinli rakamlar kullanan kurucu tanıtım istatistik ızgarası.",
+    "uk": "Преміальний лендинг для нагород / венчурних премій: утоплена біла карткова оболонка зі скругленими кутами, повноекранний відеогерой із CTA на основі скошеного clip-path, тристовпцевий розділ заявок із кутастими картками номінацій навколо квадратного відео та сітка статистики про засновників із зображеннями в режимі plus-darker і градієнтними цифрами.",
+    "en": "Premium awards / venture-prize landing page: an inset white card shell with rounded corners, a fullscreen video hero with chamfered clip-path CTA, a three-column submissions section with angular nomination cards around a square video, and an about-the-founders stats grid using plus-darker image cards and gradient-text figures."
+  },
+  "license": "CC-BY-4.0",
+  "author": {
+    "name": "Eli"
+  },
+  "homepage": "https://motionsites.ai/sections",
+  "tags": [
+    "example",
+    "first-party",
+    "prototype",
+    "design",
+    "web",
+    "desktop",
+    "awards",
+    "landing-page",
+    "editorial",
+    "video-hero"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "prototype",
+    "platform": "desktop",
+    "scenario": "design",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "Build a Launchex Awards landing page using React + Vite + Tailwind CSS + TypeScript + lucide-react. The page has 3 sections plus persistent overlay navigation elements. Use the fonts \"Inter\" (body) and \"TT Firs Neue\" (display headings). The entire page lives inside a white container with 20px padding (p-3 on mobile, p-5 on desktop) creating an inset card effect with large rounded corners (28px mobile, 36px desktop). The scrollable content lives in an absolutely-positioned div inside this container with hidden scrollbars.\n\n---\n\n## FONTS\n\nLoad via `<link>` in index.html:\n- Google Fonts Inter: weights 300, 400, 500, 600, 700\n- TT Firs Neue from: `https://db.onlinewebfonts.com/c/69f2576e7ca287875bf8d089130e292c?family=TT+Firs+Neue`\n\nIn CSS define:`html, body {  font-family: 'Inter', system-ui, -apple-system, sans-serif;  -webkit-font-smoothing: antialiased;  background: #ffffff;}.font-firs {  font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif;}.no-scrollbar {  scrollbar-width: none;  -ms-overflow-style: none;}.no-scrollbar::-webkit-scrollbar {  display: none;}`\n\n---\n\n## COLOR PALETTE\n\n- Primary dark: `#154359`\n- Teal accent: `#066377`\n- Light background: `#F0F0F0` (nominations section)\n- Lighter background: `#F0F5F7` (about section)\n- Gradient text: `linear-gradient(294deg, #185B7B 20%, #4BBDF0)`\n- Nomination stroke: `rgba(6, 99, 119, 0.25)`\n\n---\n\n## OUTER SHELL STRUCTURE\n\n`div.h-screen.bg-white.p-3.sm:p-5  div.relative.w-full.h-full.overflow-hidden.rounded-[28px].sm:rounded-[36px].bg-white    div.absolute.inset-0.overflow-y-auto.overflow-x-hidden.no-scrollbar      [SECTIONS GO HERE]    [NAV BAR - absolute positioned]    [BOTTOM OVERLAYS - absolute positioned]`\n\n---\n\n## SECTION 1: HERO\n\n- Full viewport height: `min-height: calc(100vh - 40px)`\n- Background: autoplaying, looping, muted video filling the section with `object-cover`\n- Video URL: `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260511_151648_2bdfbd1c-6bde-4f5d-a967-f57cbced97f6-fb3729.mp4`\n- Overlay gradient on the video: `bg-gradient-to-b from-black/10 via-transparent to-black/20`\n\nTop bar (z-20): flex row, justify-between, px-4 sm:px-10, pt-5 sm:pt-8\n- Left: Logo using lucide-react `Sparkles` icon (w-5 h-5 sm:w-6 sm:h-6, strokeWidth 1.5) + text \"launchex\" (14px sm:15px, font-semibold, tracking-tight) and \"awards\" below (10px sm:11px, font-light, opacity-90, -mt-0.5). All white.\n- Right: CTA button \"Send in your entry form\" (hidden on mobile, shows \"Enter\" on mobile). Teal background `#066377`, white text, 10px sm:11px, uppercase, tracking-[0.14em], font-medium. Has a chamfered/clipped shape using `clipPath: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)`. Includes `ArrowUpRight` icon (w-3.5 h-3.5) that moves on hover (translate-x-0.5, -translate-y-0.5). Button has `hover:brightness-125` transition.\n\nCenter content (z-10): flex-col, items-center, text-center, color `#154359`, pt-32 sm:pt-40, pb-24\n- Eyebrow: \"Prize for ventures\" - 11px sm:12px, uppercase, tracking-[0.3em], font-medium, mb-6, opacity-90\n- Heading: \"launchex prizes\" (two lines with `<br/>`), using `.font-firs`, font-normal, tracking-[-0.04em], leading-[0.9], sizes: 48px / 76px / 100px / 120px (responsive breakpoints)\n- Subtext: \"Bridging visions with reality, helping ventures soar up to the stars\" - 12px sm:14px, uppercase, tracking-[0.22em], font-medium, max-w-md, leading-[1.8], opacity-90, mt-8\n\n---\n\n## SECTION 2: SUBMISSIONS (NOMINATIONS)\n\n- Background: `#F0F0F0`\n- Padding: py-20 sm:py-28, px-6 sm:px-10\n- Overflow hidden, relative positioning\n\nLayout: 3-column on large (left nominations | center video | right nominations), stacked on mobile (center first, then left, then right). max-w-5xl, mx-auto, gap-10 lg:gap-12.\n\nCenter column:\n- Header text: \"[submissions]\" (12px, tracking-[0.24em], uppercase) and \"submissions\" below (font-firs, 44px sm:54px, font-semibold, tracking-tight, uppercase). Color `#154359`.\n- Video below (mt-6 sm:mt-8): 220px/380px/460px square (responsive), object-cover\n- URL: `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154120_b89bfedd-530d-4ebb-9eb7-42eeafe08667-c6b971.mp4`\n- autoPlay, loop, muted, playsInline\n\nLeft nominations (3 cards), pushed down with lg:mt-36:\n- \"Lead\" / \"AI venture for commerce\"\n- \"Emerging innovations\" / \"in food commerce\"\n- \"The finest innovations\" / \"for learners and young students\"\n\nRight nominations (3 cards), pushed down with lg:mt-36:\n- \"Innovations for advanced\" / \"career training\"\n- \"The finest innovations\" / \"in finance\"\n- \"Categories\" / \"coming soon\"\n\nNominationCard component:\n- `<a>` tag, max-w-[20em], h-[5em], hover:-translate-y-0.5 transition\n- Contains an SVG with a chamfered rectangle (polygon points=\"14,0 100,0 100,86 86,100 0,100 0,14\") as border - stroke `rgba(6, 99, 119, 0.25)`, strokeWidth 1, vectorEffect non-scaling-stroke, fill none, preserveAspectRatio=\"none\", viewBox=\"0 0 100 100\"\n- Text centered inside: title in 13px font-semibold, subtitle in 12px font-normal opacity-80. Color `#154359`.\n\nBottom fade gradient (pointer-events-none, absolute, bottom-0, full width, h-40 sm:h-56, z-10):\n- `linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)`\n\n---\n\n## SECTION 3: ABOUT THE FOUNDERS\n\n- Background: `#F0F5F7`\n- Padding: py-20 sm:py-28, px-6 sm:px-10\n- max-w-7xl mx-auto\n\nTop row: flex-col on mobile, flex-row on lg. Color `#154359`.\n- Left: Heading \"About the founders\" (two lines) - font-firs, 36px/48px/54px, font-semibold, uppercase, tracking-tight, leading-[0.95]\n- Right: max-w-xl column\n- Two paragraphs (17px sm:18px, leading-[1.5]):\n- \"Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations.\"\n- \"Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation.\"\n- Link \"Launchex.Hub website\" with arrow icon (mt-6, 14px, font-medium). Arrow in a chamfered 32x32 box with border in `#154359`, clipPath `polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`. Hover: -translate-y-0.5. Links to `https://base.launchex.vc/`\n\nStats grid (mt-14): 1 col / 2 col md / 3 col lg, gap-5. Three cards:\n\nCard 1: \"7+ years\" / \"Launchex has served the market, guiding ventures and their journeys\"\n- Image: `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8-158c74.webp&w=1280&q=85`\n- No vertical offset\n- clipPath: `polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px)`\n- Text position: left-6 right-6 bottom-6\n\nCard 2: \"15000+\" / \"innovation ventures moved through the Launchex pipeline\"\n- Image: `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8-71cb96.webp&w=1280&q=85`\n- Offset: lg:mt-24 (pushed down on desktop)\n- clipPath: `polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px))`\n- Text position: left-6 bottom-20\n\nCard 3: \"120+\" / \"accelerator sessions delivered by Launchex across Eastern Europe\"\n- Image: `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637-8b9102.webp&w=1280&q=85`\n- No vertical offset\n- clipPath: `polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px))`\n- Text position: left-6 right-28 bottom-6\n\nEach stat card structure:\n- Outer div: w-full, h-[280px] sm:h-[340px], backgroundColor `rgba(255, 255, 255, 0.8)`, padding `1.5px` (acts as border), clipPath applied\n- Inner div: w-full h-full, overflow-hidden, background-image set to the image URL, bg-cover bg-center, same clipPath applied, `mixBlendMode: 'plus-darker'`\n- Text overlay (absolute positioned): value in font-firs, font-semibold, uppercase, 36px sm:52px, gradient text (`linear-gradient(294deg, #185B7B 20%, #4BBDF0)` with background-clip text, color transparent). Description in 14px, leading-[1.4], color `#154359`, mt-3. Max-width 66%.\n\nBottom fade gradient (same as section 2):\n- `linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)`\n\n---\n\n## PERSISTENT OVERLAY ELEMENTS (inside the outer rounded container, outside the scrollable area)\n\nTop navigation bar:\n- Hidden on mobile (`hidden md:flex`), absolute, top-0, centered horizontally (left-1/2 -translate-x-1/2), z-40\n- White background, border-bottom-left-radius and border-bottom-right-radius: 28px\n- Padding: px-6 lg:px-10, py-4, gap-6 lg:gap-10\n- Links: \"About\", \"Submissions\", \"Venue\", \"Judges\", \"Connect\" - 11px, uppercase, tracking-[0.14em], font-medium, text-neutral-800, hover:text-neutral-500\n- Two decorative `<span>` elements on left (-left-6) and right (-right-6) that create inverted rounded corners using radial-gradient masks:\n- Left: `radial-gradient(circle at 0 100%, transparent 24px, black 25px)`\n- Right: `radial-gradient(circle at 100% 100%, transparent 24px, black 25px)`\n\nBottom-right page indicator:\n- pointer-events-none, absolute, bottom-4 sm:bottom-6, right-4 sm:right-8, z-40\n- \"01\" [line] \"05\" - flex, gap-3, text-white/80, 10px, font-medium, uppercase, tracking-[0.18em], mix-blend-difference\n- Line is a span: w-8 h-px bg-white/40\n\nBottom-left scroll indicator:\n- pointer-events-none, absolute, bottom-4 sm:bottom-6, left-4 sm:left-8, z-40\n- \"Scroll to discover\" - text-white/80, 10px, font-medium, uppercase, tracking-[0.18em], mix-blend-difference\n\n---\n\n## KEY IMPLEMENTATION DETAILS\n\n- All clip-paths use the `polygon()` function with pixel-based chamfers creating angular/geometric cut corners\n- The page is fully responsive with sm/md/lg breakpoints\n- Videos use autoPlay, loop, muted, playsInline attributes\n- Use lucide-react for Sparkles and ArrowUpRight icons only\n- The stat card images use `mix-blend-mode: plus-darker` for a deeper tonal effect\n- No scrollbar is visible (custom CSS utility)\n- All transitions are subtle: translate, color changes, brightness\n- The outer container clips all content with its rounded corners - the scroll happens inside",
+        "zh-CN": "构建 Launchex Awards 创投大奖落地页（内嵌圆角白卡外壳 + 全屏视频 Hero + 三栏提名区 + 创始人统计网格，全程斜切 clip-path 几何切角）。完整规格以 en 字段为准。"
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "Stellar Launch — Launchex Awards"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write",
+      "network"
+    ]
+  }
+}