npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.9 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

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 (1706) hide show

package/dist/__w3kits/assets/design-templates/web-prototype-taste-soft/example.html ADDED Viewed

@@ -0,0 +1,542 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Halcyon — calmer infrastructure for AI agents</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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --canvas: #F2F2F0;
+      --canvas-2: #E8E8E5;
+      --ink: #0A0A0A;
+      --ink-2: #18181B; /* zinc-900 */
+      --muted: #57575A;
+      --hairline: rgba(10,10,10,0.08);
+      --hairline-strong: rgba(10,10,10,0.12);
+      --innerlight: rgba(255,255,255,0.65);
+      --accent: #1F4D3F;       /* deep sage */
+      --accent-glow: #5A8C7A;
+      --sans: 'Plus Jakarta Sans', 'Geist', 'Cabinet Grotesk', system-ui, sans-serif;
+      --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
+      --ease: cubic-bezier(0.32, 0.72, 0, 1);
+      --ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1);
+      --shell-radius: 2.25rem;
+      --core-radius: calc(2.25rem - 0.4rem);
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; }
+    body {
+      background: var(--canvas);
+      color: var(--ink);
+      font-family: var(--sans);
+      font-size: 16px;
+      line-height: 1.5;
+      letter-spacing: -0.005em;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+    .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
+    /* ============ AMBIENT MESH (fixed, pointer-events-none) ============ */
+    .mesh {
+      position: fixed; inset: 0; z-index: 0; pointer-events: none;
+      overflow: hidden;
+    }
+    .mesh::before, .mesh::after {
+      content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
+      opacity: 0.18; will-change: transform;
+    }
+    .mesh::before {
+      width: 720px; height: 720px;
+      background: radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 60%);
+      top: -180px; left: -160px;
+      animation: drift1 28s var(--ease) infinite alternate;
+    }
+    .mesh::after {
+      width: 560px; height: 560px;
+      background: radial-gradient(circle at 60% 60%, #C9B79A, transparent 60%);
+      top: 120px; right: -140px;
+      animation: drift2 36s var(--ease) infinite alternate;
+    }
+    @keyframes drift1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(80px, 60px, 0); } }
+    @keyframes drift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px, 40px, 0); } }
+    @media (prefers-reduced-motion: reduce) { .mesh::before, .mesh::after { animation: none; } }
+    main, header, footer { position: relative; z-index: 1; }
+    /* ============ FLOATING PILL NAV ============ */
+    .nav-shell {
+      position: sticky; top: 24px; z-index: 50;
+      margin: 24px auto 0;
+      padding: 6px;
+      width: max-content; max-width: calc(100% - 56px);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.42);
+      backdrop-filter: saturate(160%) blur(22px);
+      -webkit-backdrop-filter: saturate(160%) blur(22px);
+      box-shadow:
+        0 1px 0 rgba(255,255,255,0.45) inset,
+        0 0 0 1px rgba(10,10,10,0.05),
+        0 12px 36px -18px rgba(10,10,10,0.18);
+    }
+    .nav {
+      display: flex; align-items: center; gap: 18px;
+      padding: 6px 8px 6px 18px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.55);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
+    }
+    .nav .brand { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; }
+    .nav .brand-mark {
+      width: 22px; height: 22px; border-radius: 8px;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 100%);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(10,10,10,0.18);
+    }
+    .nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
+    .nav ul a {
+      display: inline-block; padding: 9px 14px; border-radius: 999px;
+      color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500;
+      transition: background 300ms var(--ease);
+    }
+    .nav ul a:hover { background: rgba(10,10,10,0.05); }
+    .pill {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 7px 7px 7px 16px;
+      border-radius: 999px;
+      background: var(--ink); color: var(--canvas);
+      font: 600 13px/1 var(--sans); cursor: pointer; border: none;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
+      transition: transform 300ms var(--ease);
+    }
+    .pill .icon-wrap {
+      width: 26px; height: 26px; border-radius: 999px;
+      background: rgba(255,255,255,0.14);
+      display: inline-flex; align-items: center; justify-content: center;
+      transition: transform 360ms var(--ease-spring), background 300ms var(--ease);
+    }
+    .pill:hover .icon-wrap { transform: translate(2px, -1px) scale(1.06); background: rgba(255,255,255,0.22); }
+    .pill:active { transform: scale(0.98); }
+    .pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
+    /* ============ HERO ============ */
+    .hero {
+      min-height: 100dvh;
+      padding: 96px 0 120px;
+      display: grid;
+      grid-template-columns: 1.05fr 0.95fr;
+      gap: 48px;
+      align-items: center;
+    }
+    .eyebrow {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 6px 12px; border-radius: 999px;
+      background: rgba(255,255,255,0.6);
+      box-shadow: inset 0 0 0 1px var(--hairline);
+      font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
+      color: var(--muted);
+    }
+    .eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(31,77,63,0.18); }
+    .hero h1 {
+      font-size: clamp(48px, 7vw, 92px);
+      font-weight: 700;
+      line-height: 0.96;
+      letter-spacing: -0.038em;
+      margin: 22px 0 28px;
+      max-width: 14ch;
+    }
+    .hero h1 .soft { color: var(--muted); font-weight: 500; }
+    .hero p.lede {
+      color: var(--muted);
+      font-size: 18px;
+      max-width: 52ch;
+      margin: 0 0 34px;
+      line-height: 1.55;
+    }
+    .hero .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+    .ghost {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 11px 18px; border-radius: 999px;
+      background: rgba(255,255,255,0.5);
+      box-shadow: inset 0 0 0 1px var(--hairline-strong);
+      font: 500 13.5px/1 var(--sans); color: var(--ink); cursor: pointer; border: none;
+      transition: background 300ms var(--ease), transform 300ms var(--ease);
+    }
+    .ghost:hover { background: rgba(255,255,255,0.85); }
+    .ghost:active { transform: scale(0.98); }
+    /* ============ HERO PREVIEW (DOUBLE-BEZEL CARD) ============ */
+    .hero-preview {
+      position: relative;
+      padding: 10px;
+      border-radius: var(--shell-radius);
+      background: rgba(255,255,255,0.45);
+      box-shadow:
+        inset 0 1px 0 var(--innerlight),
+        0 0 0 1px var(--hairline),
+        0 30px 60px -28px rgba(10,10,10,0.22),
+        0 12px 24px -16px rgba(10,10,10,0.10);
+    }
+    .hero-preview .core {
+      position: relative;
+      border-radius: var(--core-radius);
+      background: linear-gradient(180deg, #FAFAF7 0%, #EFEFEB 100%);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px var(--hairline);
+      padding: 22px;
+      overflow: hidden;
+    }
+    .preview-bar {
+      display: flex; gap: 6px; margin-bottom: 18px;
+    }
+    .preview-bar span { width: 10px; height: 10px; border-radius: 999px; background: rgba(10,10,10,0.10); }
+    .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+    .pv-cell {
+      border-radius: 16px;
+      background: rgba(255,255,255,0.8);
+      box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255,255,255,0.8);
+      padding: 14px;
+    }
+    .pv-cell.span2 { grid-column: span 2; }
+    .pv-cell h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
+    .pv-cell p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
+    .pv-cell .meta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
+    .pv-cell .num { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 4px; }
+    .pv-cell .num small { font-size: 12px; color: var(--muted); margin-left: 4px; font-weight: 500; }
+    .ring {
+      width: 38px; height: 38px; border-radius: 999px;
+      background: conic-gradient(var(--accent) 0 67%, rgba(10,10,10,0.08) 67% 100%);
+      mask: radial-gradient(circle 14px, transparent 12px, black 13px);
+      -webkit-mask: radial-gradient(circle 14px, transparent 12px, black 13px);
+      margin-top: 6px;
+    }
+    .pv-cell .row { display: flex; align-items: center; gap: 10px; }
+    .pulse {
+      width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
+      box-shadow: 0 0 0 0 rgba(31,77,63,0.4);
+      animation: pulse 2.4s var(--ease) infinite;
+    }
+    @keyframes pulse {
+      0%   { box-shadow: 0 0 0 0 rgba(31,77,63,0.4); }
+      70%  { box-shadow: 0 0 0 10px rgba(31,77,63,0); }
+      100% { box-shadow: 0 0 0 0 rgba(31,77,63,0); }
+    }
+    /* ============ SECTION DEFAULTS ============ */
+    section.block { padding: 112px 0; position: relative; }
+    .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
+    .section-head h2 {
+      font-size: clamp(38px, 5vw, 64px);
+      font-weight: 700;
+      letter-spacing: -0.035em;
+      line-height: 1;
+      margin: 16px 0 0;
+      max-width: 14ch;
+    }
+    .section-head p { color: var(--muted); font-size: 16.5px; max-width: 46ch; margin: 0; line-height: 1.55; }
+    /* ============ BENTO (double-bezel cards) ============ */
+    .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
+    .b-card {
+      padding: 8px;
+      border-radius: var(--shell-radius);
+      background: rgba(255,255,255,0.5);
+      box-shadow:
+        inset 0 1px 0 var(--innerlight),
+        0 0 0 1px var(--hairline),
+        0 24px 48px -28px rgba(10,10,10,0.18);
+      transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
+    }
+    .b-card:hover {
+      transform: translateY(-3px);
+      box-shadow:
+        inset 0 1px 0 var(--innerlight),
+        0 0 0 1px var(--hairline),
+        0 30px 70px -22px rgba(10,10,10,0.22);
+    }
+    .b-card .core {
+      border-radius: var(--core-radius);
+      background: #FCFCFA;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px var(--hairline);
+      padding: 32px;
+      height: 100%;
+      display: flex; flex-direction: column;
+    }
+    .b-card.dark .core {
+      background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
+      color: #ECECEA;
+    }
+    .b-card.dark .core .meta { color: rgba(255,255,255,0.55); }
+    .b-card.dark .core p { color: rgba(255,255,255,0.6); }
+    .b-card .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
+    .b-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 10px; }
+    .b-card.dark h3 { color: #FFFFFF; }
+    .b-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; max-width: 36ch; }
+    .span-3 { grid-column: span 3; }
+    .span-2 { grid-column: span 2; }
+    .span-4 { grid-column: span 4; }
+    .span-6 { grid-column: span 6; }
+    .row-2 { grid-row: span 2; }
+    .stat { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
+    .stat .big { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
+    .stat .unit { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
+    .codeblock {
+      margin-top: auto; padding: 18px;
+      border-radius: 18px;
+      background: #0E0E0E; color: #ECECEA;
+      font-family: var(--mono); font-size: 12px; line-height: 1.65;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
+      overflow: hidden;
+    }
+    .codeblock .k { color: #5A8C7A; }
+    .codeblock .s { color: #C9B79A; }
+    .codeblock .c { color: rgba(236,236,234,0.4); }
+    /* ============ MARQUEE ============ */
+    .marquee {
+      padding: 56px 0;
+      overflow: hidden;
+      mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
+      -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
+    }
+    .marquee-track {
+      display: flex; gap: 64px; width: max-content;
+      animation: track 32s linear infinite;
+      will-change: transform;
+    }
+    .marquee:hover .marquee-track { animation-play-state: paused; }
+    @keyframes track { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+    .marquee-item {
+      font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
+      opacity: 0.55;
+      white-space: nowrap;
+    }
+    .marquee-item em { font-style: normal; color: var(--muted); margin: 0 12px; }
+    /* ============ CLOSING (inverted soft surface) ============ */
+    .closing {
+      padding: 112px 0;
+      margin: 56px 28px 28px;
+      border-radius: 40px;
+      background: linear-gradient(180deg, #131313 0%, #050505 100%);
+      color: #F2F2F0;
+      position: relative; overflow: hidden;
+      box-shadow:
+        inset 0 1px 0 rgba(255,255,255,0.08),
+        0 30px 80px -40px rgba(10,10,10,0.6);
+    }
+    .closing::before {
+      content: ''; position: absolute; inset: 0;
+      background: radial-gradient(700px 360px at 30% 0%, rgba(90,140,122,0.32), transparent 70%);
+      pointer-events: none;
+    }
+    .closing-inner { position: relative; max-width: 1040px; padding: 0 32px; margin: 0 auto; text-align: center; }
+    .closing h2 { font-size: clamp(40px, 5.5vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: 0 0 18px; max-width: 18ch; margin-inline: auto; }
+    .closing p { color: rgba(242,242,240,0.65); font-size: 17px; margin: 0 auto 32px; max-width: 48ch; line-height: 1.55; }
+    .closing .pill { background: var(--canvas); color: var(--ink); }
+    .closing .pill .icon-wrap { background: rgba(10,10,10,0.08); }
+    /* ============ FOOTER ============ */
+    footer {
+      padding: 36px 28px 28px;
+      font-family: var(--mono); font-size: 11px; color: var(--muted);
+      letter-spacing: 0.06em;
+    }
+    footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
+    footer a { color: var(--muted); text-decoration: none; }
+    footer a:hover { color: var(--ink); }
+    /* ============ RESPONSIVE COLLAPSE ============ */
+    @media (max-width: 980px) {
+      .hero { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 80px; }
+      .nav ul { display: none; }
+      .section-head { grid-template-columns: 1fr; gap: 18px; }
+      .bento { grid-template-columns: 1fr; }
+      .span-3, .span-2, .span-4, .span-6 { grid-column: span 1; }
+      .row-2 { grid-row: auto; }
+      .closing { margin: 28px 16px; padding: 80px 0; }
+    }
+    /* ============ MOTION ENTRY ============ */
+    .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease); }
+    .reveal.is-in { opacity: 1; transform: none; filter: none; }
+    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } }
+  </style>
+</head>
+<body>
+  <div class="mesh" aria-hidden="true"></div>
+  <div class="nav-shell" data-od-id="topnav">
+    <header class="nav">
+      <span class="brand"><span class="brand-mark"></span>Halcyon</span>
+      <ul>
+        <li><a href="#bento">Platform</a></li>
+        <li><a href="#metrics">Metrics</a></li>
+        <li><a href="#docs">Docs</a></li>
+        <li><a href="#changelog">Changelog</a></li>
+      </ul>
+      <button class="pill">
+        <span>Get started</span>
+        <span class="icon-wrap"><svg viewBox="0 0 12 12" stroke-width="1.6"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5"/></svg></span>
+      </button>
+    </header>
+  </div>
+  <main>
+    <section class="wrap hero reveal" data-od-id="hero">
+      <div class="hero-copy">
+        <span class="eyebrow"><span class="dot"></span>Series A · 2026 · Bordeaux</span>
+        <h1>Calmer infrastructure for the agents <span class="soft">already running your business.</span></h1>
+        <p class="lede">Halcyon is a runtime for long-running AI agents that need stable identity, predictable cost, and an audit trail you can hand to legal. We replace the YAML scaffolding teams keep rebuilding from scratch.</p>
+        <div class="actions">
+          <button class="pill">
+            <span>Open the console</span>
+            <span class="icon-wrap"><svg viewBox="0 0 12 12" stroke-width="1.6"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5"/></svg></span>
+          </button>
+          <button class="ghost">
+            Read the runtime spec
+          </button>
+        </div>
+      </div>
+      <aside class="hero-preview" data-od-id="hero-preview">
+        <div class="core">
+          <div class="preview-bar"><span></span><span></span><span></span></div>
+          <div class="preview-grid">
+            <div class="pv-cell span2">
+              <div class="meta">runtime · live</div>
+              <div class="row" style="justify-content: space-between;">
+                <div>
+                  <h4 style="font-size: 14px;">research-agent / tier-3</h4>
+                  <div class="row" style="margin-top: 4px;"><span class="pulse"></span><p style="margin:0; font-size: 11px;">healthy · 7d 14h uptime</p></div>
+                </div>
+                <div class="ring" aria-hidden="true"></div>
+              </div>
+            </div>
+            <div class="pv-cell">
+              <div class="meta">spend / 24h</div>
+              <div class="num">$47.18<small>USD</small></div>
+            </div>
+            <div class="pv-cell">
+              <div class="meta">tasks / 24h</div>
+              <div class="num">1,284<small>ok</small></div>
+            </div>
+            <div class="pv-cell span2">
+              <div class="meta">audit · last entry</div>
+              <p style="font-size: 11.5px; line-height: 1.6;">
+                <code style="font-family: var(--mono); color: var(--accent);">04:12:09</code> · ticket <code style="font-family: var(--mono);">PRD-4731</code> dispatched to <b>research-agent/tier-3</b> by <b>quentin.albrecht</b>. Resolved in 41.7s.
+              </p>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </section>
+    <section class="block reveal" id="bento">
+      <div class="wrap">
+        <div class="section-head">
+          <span class="eyebrow"><span class="dot"></span>02 · platform</span>
+          <p>Five primitives. No agent framework lock-in. Bring your own model, your own tools, your own sandbox — keep the runtime, the policies, and the bill in one place.</p>
+        </div>
+        <div class="section-head" style="margin-bottom: 56px;">
+          <h2>The runtime is the boring part. We're <em style="font-weight:500; color: var(--muted); font-style: normal;">obsessed</em> with the boring part.</h2>
+          <span></span>
+        </div>
+        <div class="bento">
+          <div class="b-card span-3 row-2">
+            <div class="core">
+              <div class="meta">01 · identity</div>
+              <h3>Stable identities, not session tokens.</h3>
+              <p>Every agent gets a long-lived identity with revocable credentials, scoped policies, and a portable memory layer that survives model swaps. Rotate keys without re-onboarding the agent.</p>
+              <div class="codeblock">
+                <span class="c">// stable across model swaps</span><br>
+                <span class="k">agent</span>.identity = {<br>
+                &nbsp;&nbsp;id: <span class="s">"agent_q7_research"</span>,<br>
+                &nbsp;&nbsp;policy: <span class="s">"tier-3:read-only"</span>,<br>
+                &nbsp;&nbsp;memory: halcyon.memory(<span class="s">"q7"</span>),<br>
+                };
+              </div>
+            </div>
+          </div>
+          <div class="b-card span-3">
+            <div class="core">
+              <div class="meta">02 · spend</div>
+              <h3>One bill. One cap. One alarm.</h3>
+              <p>Set budgets per agent, per workspace, per provider. Halcyon throttles before the bill becomes a Slack post-mortem.</p>
+              <div class="stat"><span class="big">$0.018</span><span class="unit">avg / task</span></div>
+            </div>
+          </div>
+          <div class="b-card span-3 dark">
+            <div class="core">
+              <div class="meta">03 · audit</div>
+              <h3>An audit log shaped like an audit log.</h3>
+              <p>Append-only. Cryptographically chained. Streams to your SIEM. Every tool call, every prompt, every model swap, every refund — in one place legal can actually subpoena.</p>
+            </div>
+          </div>
+          <div class="b-card span-2">
+            <div class="core">
+              <div class="meta">04 · sandbox</div>
+              <h3>Real sandboxes.</h3>
+              <p>Firecracker microVMs per task. Boots in 110ms.</p>
+            </div>
+          </div>
+          <div class="b-card span-2">
+            <div class="core">
+              <div class="meta">05 · routing</div>
+              <h3>Model-agnostic routing.</h3>
+              <p>Cheapest model that passes your eval. Updated nightly.</p>
+            </div>
+          </div>
+          <div class="b-card span-2">
+            <div class="core">
+              <div class="meta">06 · ergonomics</div>
+              <h3>Three SDKs. Two CLIs.</h3>
+              <p>Python, TypeScript, Go. <code style="font-family: var(--mono); color: var(--accent);">halcyon</code> & <code style="font-family: var(--mono); color: var(--accent);">hl</code>.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="marquee reveal">
+      <div class="marquee-track">
+        <span class="marquee-item">Anthropic<em>·</em>Stripe<em>·</em>Linear<em>·</em>Vercel<em>·</em>Cursor<em>·</em>Brex<em>·</em>Ramp<em>·</em>Replicate<em>·</em>Hex<em>·</em>Notion<em>·</em></span>
+        <span class="marquee-item" aria-hidden="true">Anthropic<em>·</em>Stripe<em>·</em>Linear<em>·</em>Vercel<em>·</em>Cursor<em>·</em>Brex<em>·</em>Ramp<em>·</em>Replicate<em>·</em>Hex<em>·</em>Notion<em>·</em></span>
+      </div>
+    </section>
+    <section class="closing reveal" data-od-id="closing">
+      <div class="closing-inner">
+        <h2>Less duct tape between the model and the bill.</h2>
+        <p>14-day evaluation, then choose pay-as-you-go or annual. We'll send a real engineer for setup. No SDR funnel.</p>
+        <button class="pill">
+          <span>Talk to an engineer</span>
+          <span class="icon-wrap"><svg viewBox="0 0 12 12" stroke-width="1.6"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5"/></svg></span>
+        </button>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <div class="row">
+      <span>Halcyon Runtime · SOC 2 · ISO 27001 · v2026.05</span>
+      <span><a href="#">Docs</a> · <a href="#">Changelog</a> · <a href="#">Status</a> · <a href="#">Privacy</a> · <a href="#">Contact</a></span>
+    </div>
+  </footer>
+  <script>
+    const io = new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
+      }
+    }, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });
+    document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
+  </script>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/weekly-update/SKILL.md ADDED Viewed

@@ -0,0 +1,50 @@
+---
+name: weekly-update
+description: |
+  Single-file horizontal-swipe slide deck for a weekly team update —
+  shipped, in flight, blocked, metrics, asks. 6–8 slides. Use when the
+  brief mentions "weekly update", "team update slides", "weekly status",
+  "周报演示".
+triggers:
+  - "weekly update"
+  - "team update slides"
+  - "weekly status"
+  - "weekly review"
+  - "周报演示"
+od:
+  mode: deck
+  scenario: operations
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Make a weekly update deck for the Growth squad — what shipped, in flight, blocked, metrics, asks for next week."
+---
+# Weekly Update Deck Skill
+Produce a single-file horizontal-swipe HTML deck for a weekly team update.
+## Workflow
+1. Read DESIGN.md.
+2. Identify squad name, week range, and audience (squad-internal vs cross-functional).
+3. Slides:
+   1. Cover (squad + week + author + date)
+   2. Headline (one sentence + one number that matters this week)
+   3. What shipped (3–5 items, link-style affordance)
+   4. In flight (3–5 items, owner avatars)
+   5. Blocked (1–3 items + clear ask)
+   6. Metrics that matter (1–2 inline charts)
+   7. Asks for next week (named owners)
+   8. Closing + thanks
+4. Arrow keys or click navigation. Each slide is 100vw wide.
+## Output contract
+```
+<artifact identifier="weekly-update-w42" type="text/html" title="Weekly Update — Growth · W42">
+<!doctype html>...</artifact>
+```