@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/presenter-mode-reveal/style.css

@@ -0,0 +1,216 @@
+/* tpl-presenter-mode-reveal · scoped styles
+ * Presenter-mode demo deck. Inherits tokens from active theme.
+ * Minimal overrides — focus is on content + notes structure.
+ */
+
+.tpl-presenter-mode-reveal .slide {
+  padding: 72px 96px;
+}
+
+.tpl-presenter-mode-reveal .kicker {
+  font-family: var(--font-mono, monospace);
+  font-size: 13px;
+  color: var(--text-3);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin: 0 0 18px 0;
+}
+
+.tpl-presenter-mode-reveal .h1 {
+  font-size: clamp(44px, 5.6vw, 76px);
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  margin: 0 0 24px 0;
+}
+
+.tpl-presenter-mode-reveal .h2 {
+  font-size: clamp(32px, 3.6vw, 48px);
+  line-height: 1.22;
+  letter-spacing: -0.01em;
+  margin: 0 0 28px 0;
+}
+
+.tpl-presenter-mode-reveal .lede {
+  font-size: 20px;
+  line-height: 1.55;
+  color: var(--text-2);
+}
+
+.tpl-presenter-mode-reveal .mono {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.9em;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(255,255,255,0.08);
+  color: var(--accent, #58a6ff);
+}
+
+.tpl-presenter-mode-reveal .accent {
+  color: var(--accent, #f0883e);
+  font-weight: 700;
+}
+
+.tpl-presenter-mode-reveal .speaker {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 32px;
+}
+.tpl-presenter-mode-reveal .speaker .av {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent, #58a6ff), #bc8cff);
+}
+.tpl-presenter-mode-reveal .speaker b {
+  display: block;
+  font-size: 16px;
+}
+.tpl-presenter-mode-reveal .speaker span {
+  font-size: 13px;
+  color: var(--text-3);
+}
+
+/* Agenda rows */
+.tpl-presenter-mode-reveal .agenda-row {
+  display: grid;
+  grid-template-columns: 48px 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 14px 18px;
+  border: 1px solid var(--border, rgba(255,255,255,0.1));
+  border-radius: 10px;
+  margin-bottom: 10px;
+  background: var(--surface, rgba(255,255,255,0.03));
+}
+.tpl-presenter-mode-reveal .agenda-row .num {
+  font-family: var(--font-mono, monospace);
+  font-size: 14px;
+  color: var(--accent, #58a6ff);
+  font-weight: 700;
+}
+.tpl-presenter-mode-reveal .agenda-row .t {
+  font-size: 17px;
+  font-weight: 500;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .agenda-row .d {
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  color: var(--text-3);
+}
+
+/* Cards */
+.tpl-presenter-mode-reveal .card {
+  background: var(--surface, rgba(255,255,255,0.03));
+  border: 1px solid var(--border, rgba(255,255,255,0.1));
+  border-radius: 12px;
+  padding: 22px 24px;
+}
+.tpl-presenter-mode-reveal .card-accent {
+  border-top: 3px solid var(--accent, #58a6ff);
+}
+.tpl-presenter-mode-reveal .card h4 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .card .dim {
+  color: var(--text-2);
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* Feature rows (presenter view features) */
+.tpl-presenter-mode-reveal .feature-row {
+  display: flex;
+  gap: 14px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
+}
+.tpl-presenter-mode-reveal .feature-row:last-child { border-bottom: none; }
+.tpl-presenter-mode-reveal .feature-row .num {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.tpl-presenter-mode-reveal .feature-row b {
+  display: block;
+  font-size: 17px;
+  margin-bottom: 4px;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .feature-row .dim {
+  font-size: 14px;
+  color: var(--text-2);
+  line-height: 1.55;
+  margin: 0;
+}
+.tpl-presenter-mode-reveal .blue { color: #58a6ff; }
+.tpl-presenter-mode-reveal .green { color: #3fb950; }
+.tpl-presenter-mode-reveal .orange { color: #f0883e; }
+.tpl-presenter-mode-reveal .purple { color: #bc8cff; }
+.tpl-presenter-mode-reveal .red { color: #f85149; }
+
+/* Rule rows (3 铁律) */
+.tpl-presenter-mode-reveal .rule-row {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 20px;
+  align-items: start;
+  padding: 18px 22px;
+  border: 1px solid var(--border, rgba(255,255,255,0.1));
+  border-radius: 12px;
+  margin-bottom: 14px;
+  background: var(--surface, rgba(255,255,255,0.03));
+}
+.tpl-presenter-mode-reveal .rule-row .num {
+  font-size: 28px;
+  font-weight: 800;
+  font-family: var(--font-mono, monospace);
+  line-height: 1;
+}
+.tpl-presenter-mode-reveal .rule-row b {
+  display: block;
+  font-size: 18px;
+  margin-bottom: 6px;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .rule-row .dim {
+  font-size: 15px;
+  color: var(--text-2);
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* Code block */
+.tpl-presenter-mode-reveal .code-block {
+  background: #0d1117;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 12px;
+  padding: 20px 26px;
+  font-family: var(--font-mono, "SF Mono", monospace);
+  font-size: 15px;
+  line-height: 1.8;
+  color: #e6edf3;
+  white-space: pre-wrap;
+  text-align: left;
+}
+.tpl-presenter-mode-reveal .code-block .comment { color: #8b949e; }
+.tpl-presenter-mode-reveal .code-block .cmd { color: #3fb950; font-weight: 600; }
+.tpl-presenter-mode-reveal .code-block .flag { color: #f0883e; }
+
+/* Stack helper */
+.tpl-presenter-mode-reveal .stack > * + * { margin-top: 0; }
+
+/* Grid helpers */
+.tpl-presenter-mode-reveal .grid { display: grid; gap: 20px; }
+.tpl-presenter-mode-reveal .grid.g2 { grid-template-columns: 1fr 1fr; }
+.tpl-presenter-mode-reveal .grid.g3 { grid-template-columns: repeat(3, 1fr); }
+
+.tpl-presenter-mode-reveal .mt-m { margin-top: 20px; }
+.tpl-presenter-mode-reveal .mt-l { margin-top: 32px; }
+.tpl-presenter-mode-reveal .mt-s { margin-top: 10px; }
+.tpl-presenter-mode-reveal .tc { text-align: center; }

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/product-launch/README.md

@@ -0,0 +1,8 @@
+# product-launch
+
+8-slide consumer product announcement deck: hero cover, "introducing" moment, three feature slides, how-it-works, pricing tiers, and a closing testimonial + pre-order CTA.
+
+Mixes dark hero slides (for show-off moments) with light slides (for details and pricing). Warm orange→peach gradient accent feels confident and human; easy to re-skin for any brand.
+
+**Use when:** launching a product, announcing a v2, internal all-hands reveals, press kit decks.
+**Feel:** Apple-event-on-a-budget — confident, tactile, uncluttered.

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/product-launch/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Halo v2 · Launch</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-product-launch">
+<div class="deck">
+
+  <!-- 1. Cover / hero -->
+  <section class="slide dark" data-title="Cover">
+    <div class="hero-shot"></div>
+    <div style="position:absolute;top:56px;left:112px" class="brand">◎ Halo</div>
+    <p class="kicker">Launch · April 2026</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">Meet Halo v2.<br>Your ears,<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">rewritten.</span></h1>
+    <p class="lede mt-m" style="max-width:42ch">Studio-grade spatial audio in the lightest open-ear earbuds ever made.</p>
+    <div class="deck-footer"><span>halo.audio</span><span class="slide-number" data-current="1" data-total="8"></span></div>
+  </section>
+
+  <!-- 2. Introducing -->
+  <section class="slide center tc" data-title="Introducing">
+    <div>
+      <p class="kicker">Introducing</p>
+      <h1 class="h1" style="font-size:140px">Halo v2</h1>
+      <p class="lede" style="margin:24px auto;max-width:56ch">Four years of research. Three generations of silicon. One product you'll forget you're wearing.</p>
+    </div>
+  </section>
+
+  <!-- 3. Feature 1 -->
+  <section class="slide" data-title="Sound">
+    <p class="kicker">01 · The sound</p>
+    <h2 class="h2">Hear the room<br>around the music.</h2>
+    <div class="grid g3 mt-l">
+      <div class="feature-card"><div class="icon">♪</div><h4>Open-ear spatial</h4><p class="dim">16mm titanium drivers angled into the ear canal. You hear the song and the world at once.</p></div>
+      <div class="feature-card"><div class="icon">◈</div><h4>Lossless 24-bit</h4><p class="dim">aptX Lossless and Hi-Res LDAC over Bluetooth 5.4. No dongles, no compromises.</p></div>
+      <div class="feature-card"><div class="icon">◐</div><h4>Adaptive EQ</h4><p class="dim">Tunes itself to the shape of your ear every 120 seconds.</p></div>
+    </div>
+  </section>
+
+  <!-- 4. Feature 2 -->
+  <section class="slide dark" data-title="Fit">
+    <p class="kicker">02 · The fit</p>
+    <h2 class="h2">4.9 grams.<br>All-day forgettable.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card"><h4>Liquid-silicone hook</h4><p>Wraps behind the ear like a glasses arm. Never falls out on a run.</p></div>
+      <div class="card"><h4>IP57 sweat + rain</h4><p>Take them in the ocean. Rinse them under the tap. We dare you.</p></div>
+      <div class="card"><h4>14h + 42h case</h4><p>A full workweek of commutes on one charge of the case.</p></div>
+    </div>
+  </section>
+
+  <!-- 5. Feature 3 -->
+  <section class="slide" data-title="Intelligence">
+    <p class="kicker">03 · The intelligence</p>
+    <h2 class="h2">An AI that listens<br>so you don't have to.</h2>
+    <div class="grid g2 mt-l">
+      <div class="feature-card"><div class="icon">✦</div><h4>Live translate</h4><p class="dim">Real-time translation in 41 languages. Whispered directly into your ear, with a 380ms lag.</p></div>
+      <div class="feature-card"><div class="icon">✧</div><h4>Meeting recap</h4><p class="dim">Double-tap to record. Walk away with a summary, action items, and a searchable transcript.</p></div>
+    </div>
+  </section>
+
+  <!-- 6. How it works -->
+  <section class="slide" data-title="How it works">
+    <p class="kicker">How it works</p>
+    <h2 class="h2">Three taps. You're in.</h2>
+    <div class="stack mt-l" style="max-width:900px">
+      <div class="step"><div class="n">1</div><div><h4>Open the case near your phone</h4><p class="dim">iOS and Android pair automatically over Bluetooth LE. No app downloads required.</p></div></div>
+      <div class="step"><div class="n">2</div><div><h4>Pick your profile</h4><p class="dim">Commute, Focus, Workout, Cinema. Each is a complete audio + transparency recipe.</p></div></div>
+      <div class="step"><div class="n">3</div><div><h4>Just listen</h4><p class="dim">Halo adapts to your ear shape, your environment, and your hearing profile — continuously.</p></div></div>
+    </div>
+  </section>
+
+  <!-- 7. Pricing -->
+  <section class="slide" data-title="Pricing">
+    <p class="kicker">Pricing</p>
+    <h2 class="h2">Pick your Halo.</h2>
+    <div class="grid g3 mt-l" style="align-items:start">
+      <div class="price-card">
+        <h4>Halo Lite</h4>
+        <div class="amount">$179</div>
+        <p class="dim">Open-ear audio, IP57, 12h battery.</p>
+        <ul><li>AAC + SBC</li><li>Single-tap controls</li><li>USB-C charging</li></ul>
+      </div>
+      <div class="price-card pro">
+        <h4>Halo v2 · Pro</h4>
+        <div class="amount">$279</div>
+        <p class="dim">Everything, in its best form.</p>
+        <ul><li>Hi-Res Lossless</li><li>Live translate · 41 lang</li><li>Wireless + MagSafe charging</li><li>Adaptive EQ</li></ul>
+      </div>
+      <div class="price-card">
+        <h4>Halo Studio</h4>
+        <div class="amount">$399</div>
+        <p class="dim">For creators and field recorders.</p>
+        <ul><li>32-bit binaural capture</li><li>XLR dongle included</li><li>Lifetime firmware</li></ul>
+      </div>
+    </div>
+  </section>
+
+  <!-- 8. Testimonial + CTA combined? Task says 8 slides w/ testimonial + CTA as separate. Keep 8: testimonial on 7, but we've used 7 already. Re-plan: cover(1) intro(2) f1(3) f2(4) f3(5) how(6) pricing(7) testimonial+CTA(8) -->
+  <section class="slide dark" data-title="Ship">
+    <p class="kicker">One more thing</p>
+    <div class="row" style="gap:80px;align-items:center">
+      <div style="flex:1">
+        <p class="testimonial">"I forgot I was wearing them. Then I remembered, and I didn't want to take them off."</p>
+        <p class="dim mt-m">— Marques Lin, The Verge · early review</p>
+      </div>
+      <div style="flex:0 0 auto;text-align:center">
+        <p class="dim mb-m">Ships May 14 · from</p>
+        <div style="font-size:96px;font-weight:900;letter-spacing:-.04em">$279</div>
+        <a class="cta-btn mt-l" href="#">Pre-order Halo v2 →</a>
+        <p class="dim mt-m" style="font-size:13px">Free shipping · 45-day return · 2-year warranty</p>
+      </div>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/product-launch/style.css

@@ -0,0 +1,39 @@
+/* product-launch — modern announcement deck */
+.tpl-product-launch{
+  --bg:#ffffff;--bg-soft:#f5f5f7;--surface:#ffffff;--surface-2:#f2f2f6;
+  --ink:#0a0a12;--ink-2:#3a3a44;
+  --border:rgba(10,10,18,.08);--border-strong:rgba(10,10,18,.18);
+  --text-1:#0a0a12;--text-2:#4a4a58;--text-3:#8a8a96;
+  --accent:#ff5a36;--accent-2:#ff8c5a;--accent-3:#ffb36b;
+  --grad:linear-gradient(120deg,#ff5a36 0%,#ff8c5a 60%,#ffb36b 100%);
+  --radius:22px;--radius-lg:32px;
+  --shadow:0 20px 60px rgba(10,10,18,.1);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-product-launch .slide{padding:80px 112px}
+.tpl-product-launch .slide.dark{background:#0a0a12;color:#f5f5f7}
+.tpl-product-launch .slide.dark .h1,.tpl-product-launch .slide.dark .h2,.tpl-product-launch .slide.dark h3,.tpl-product-launch .slide.dark h4{color:#fff}
+.tpl-product-launch .slide.dark .lede,.tpl-product-launch .slide.dark .dim{color:rgba(245,245,247,.72)}
+.tpl-product-launch .slide.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(20px)}
+.tpl-product-launch .slide.dark .kicker{color:var(--accent-2)}
+.tpl-product-launch .h1{font-size:96px;line-height:.98;font-weight:900;letter-spacing:-.045em}
+.tpl-product-launch .h2{font-size:64px;font-weight:800;letter-spacing:-.035em}
+.tpl-product-launch .hero-shot{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:640px;height:640px;border-radius:50%;background:var(--grad);filter:blur(2px);opacity:.85}
+.tpl-product-launch .hero-shot::after{content:"";position:absolute;inset:80px;border-radius:40px;background:linear-gradient(160deg,rgba(255,255,255,.3),transparent 60%),#1a1a28;box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
+.tpl-product-launch .hero-shot::before{content:"Halo v2";position:absolute;inset:80px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:900;letter-spacing:-.02em;z-index:2;border-radius:40px}
+.tpl-product-launch .brand{font-size:18px;font-weight:800;letter-spacing:-.02em}
+.tpl-product-launch .feature-card{padding:40px 36px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
+.tpl-product-launch .feature-card .icon{width:60px;height:60px;border-radius:18px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:900;margin-bottom:20px}
+.tpl-product-launch .step{display:flex;gap:24px;align-items:flex-start}
+.tpl-product-launch .step .n{flex:none;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px}
+.tpl-product-launch .price-card{padding:40px 32px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--surface);text-align:left}
+.tpl-product-launch .price-card.pro{background:#0a0a12;color:#fff;border-color:#0a0a12;transform:scale(1.04);box-shadow:0 30px 80px rgba(255,90,54,.25)}
+.tpl-product-launch .price-card.pro .dim{color:rgba(255,255,255,.7)}
+.tpl-product-launch .price-card h4{font-size:16px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
+.tpl-product-launch .price-card.pro h4{color:var(--accent-2)}
+.tpl-product-launch .price-card .amount{font-size:64px;font-weight:900;letter-spacing:-.035em;margin:14px 0}
+.tpl-product-launch .price-card ul{list-style:none;padding:0;margin:20px 0 0}
+.tpl-product-launch .price-card li{padding:8px 0;font-size:15px;color:var(--text-2);border-top:1px solid var(--border)}
+.tpl-product-launch .price-card.pro li{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)}
+.tpl-product-launch .cta-btn{display:inline-block;padding:20px 40px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:20px;box-shadow:0 20px 50px rgba(255,90,54,.4)}
+.tpl-product-launch .testimonial{max-width:44ch;font-family:'Playfair Display',serif;font-size:44px;line-height:1.25;font-weight:500;letter-spacing:-.01em}

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/tech-sharing/README.md

@@ -0,0 +1,8 @@
+# tech-sharing · 技术分享
+
+8-slide engineering talk deck: cover (topic + speaker), agenda, context, two deep-dive slides, a code example, takeaways, Q&A.
+
+Dark GitHub-ish palette (`#0d1117`) with JetBrains Mono accents and syntax-highlighted terminal blocks. Built to be screenshotted and shared on an internal wiki or Twitter.
+
+**Use when:** tech-sharing Fridays, brown-bag talks, lunch & learns, conference submissions.
+**Feel:** GitHub README meets a good conference talk — dark, monospaced, dense but readable.

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/tech-sharing/index.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Rust 异步运行时内部机制 · Tech Sharing</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-tech-sharing">
+<div class="deck">
+
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <p class="kicker">tech-sharing / 2026-04-15</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">Rust 异步运行时<br>到底在<span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">调度什么</span>?</h1>
+    <p class="lede mt-m">从 <span class="mono">Future::poll</span> 到 tokio 的 work-stealing，一次讲清楚。</p>
+    <div class="speaker"><div class="av"></div><div><b>@lewis</b><span>platform infra · 45 min + Q&amp;A</span></div></div>
+    <div class="deck-footer"><span class="mono">#async #rust #tokio</span><span class="slide-number" data-current="1" data-total="8"></span></div>
+  </section>
+
+  <!-- 2. Agenda -->
+  <section class="slide" data-title="Agenda">
+    <p class="kicker">agenda.toml</p>
+    <h2 class="h2">今天的路线图</h2>
+    <div class="stack mt-l">
+      <div class="agenda-row"><span class="num">01</span><span class="t">Context: 为什么需要 async</span><span class="d">~5min</span></div>
+      <div class="agenda-row"><span class="num">02</span><span class="t">Deep dive 1: Future &amp; Waker</span><span class="d">~12min</span></div>
+      <div class="agenda-row"><span class="num">03</span><span class="t">Deep dive 2: Tokio scheduler</span><span class="d">~15min</span></div>
+      <div class="agenda-row"><span class="num">04</span><span class="t">Code: 手写一个 mini-runtime</span><span class="d">~8min</span></div>
+      <div class="agenda-row"><span class="num">05</span><span class="t">Takeaways + Q&amp;A</span><span class="d">~5min</span></div>
+    </div>
+  </section>
+
+  <!-- 3. Context -->
+  <section class="slide" data-title="Context">
+    <p class="kicker">// context</p>
+    <h2 class="h2">问题：一个线程一个连接，<br>撑不住 10 万并发。</h2>
+    <div class="grid g3 mt-l">
+      <div class="card card-accent"><h4>Thread-per-conn</h4><p class="dim">每条连接一根 OS 线程，栈 2–8MB。10 万连接 = 几百 GB RAM。</p><span class="tag mt-s">❌ 不现实</span></div>
+      <div class="card card-accent"><h4>Event loop (C)</h4><p class="dim">epoll/kqueue + 回调地狱。快，但写起来痛苦且容易出 bug。</p><span class="tag mt-s">😩 callback hell</span></div>
+      <div class="card card-accent"><h4>Async / await</h4><p class="dim">看起来像同步代码，编译成状态机。一根线程跑几千任务。</p><span class="tag mt-s">✅ Rust 选这个</span></div>
+    </div>
+  </section>
+
+  <!-- 4. Deep dive 1 -->
+  <section class="slide" data-title="Deep Dive 1">
+    <p class="kicker">deep-dive · 1 / 2</p>
+    <h2 class="h2">Future 其实只有一个方法。</h2>
+    <div class="grid g2 mt-l" style="align-items:start">
+      <div>
+        <p class="lede">编译器把 <span class="mono">async fn</span> 变成一个实现了 <span class="mono">Future</span> trait 的匿名状态机。运行时只做一件事：反复 <span class="mono">poll</span> 它，直到返回 <span class="mono">Ready</span>。</p>
+        <div class="mt-l">
+          <span class="tag">Pending</span> <span class="tag">Ready(T)</span> <span class="tag">Waker.wake()</span>
+        </div>
+      </div>
+      <div class="terminal">
+        <div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>future.rs</span></div>
+<pre><span class="kw">pub trait</span> <span class="fn">Future</span> {
+    <span class="kw">type</span> Output;
+    <span class="kw">fn</span> <span class="fn">poll</span>(
+        <span class="kw">self</span>: Pin&lt;&amp;<span class="kw">mut Self</span>&gt;,
+        cx: &amp;<span class="kw">mut</span> Context&lt;<span class="str">'_</span>&gt;,
+    ) -&gt; Poll&lt;<span class="kw">Self</span>::Output&gt;;
+}
+
+<span class="cmt">// Poll::Pending   → 挂起，等 waker 唤醒</span>
+<span class="cmt">// Poll::Ready(v)  → 完成，产出 v</span></pre>
+      </div>
+    </div>
+  </section>
+
+  <!-- 5. Deep dive 2 -->
+  <section class="slide" data-title="Deep Dive 2">
+    <p class="kicker">deep-dive · 2 / 2</p>
+    <h2 class="h2">Tokio 是一个偷任务的小工。</h2>
+    <div class="grid g2 mt-l" style="align-items:start">
+      <div>
+        <p class="lede">Multi-thread runtime = N 个 worker，每个 worker 有自己的本地队列。空闲的 worker 会去别人队列里"偷"任务。</p>
+        <div class="stack mt-m">
+          <div class="tag">✦ local queue · 256 slots</div>
+          <div class="tag">✦ global injection queue</div>
+          <div class="tag">✦ work-stealing @ 50% steal ratio</div>
+          <div class="tag">✦ LIFO slot for cache locality</div>
+        </div>
+      </div>
+      <div class="card" style="padding:32px">
+        <h4 class="mono" style="color:var(--accent-2)">scheduler tick loop</h4>
+        <div class="stack mt-m" style="font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.9;color:var(--text-2)">
+          <div><span style="color:var(--accent)">1.</span> pop from LIFO slot</div>
+          <div><span style="color:var(--accent)">2.</span> else pop from local queue</div>
+          <div><span style="color:var(--accent)">3.</span> else drain global queue (every 61 ticks)</div>
+          <div><span style="color:var(--accent)">4.</span> else steal from random victim</div>
+          <div><span style="color:var(--accent)">5.</span> else park the thread</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 6. Code example -->
+  <section class="slide" data-title="Code">
+    <p class="kicker">mini-runtime.rs · ~40 LOC</p>
+    <h2 class="h2">手写一个最小 runtime。</h2>
+    <div class="terminal mt-m">
+      <div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>src/main.rs</span></div>
+<pre><span class="kw">use</span> std::collections::VecDeque;
+<span class="kw">use</span> std::sync::{Arc, Mutex};
+<span class="kw">use</span> std::task::{Context, Poll, Wake, Waker};
+
+<span class="kw">struct</span> Task(Mutex&lt;Pin&lt;Box&lt;<span class="kw">dyn</span> Future&lt;Output = ()&gt; + Send&gt;&gt;&gt;);
+
+<span class="kw">impl</span> Wake <span class="kw">for</span> Task {
+    <span class="kw">fn</span> <span class="fn">wake</span>(<span class="kw">self</span>: Arc&lt;<span class="kw">Self</span>&gt;) { QUEUE.lock().unwrap().push_back(<span class="kw">self</span>); }
+}
+
+<span class="kw">fn</span> <span class="fn">block_on</span>&lt;F: Future&lt;Output = ()&gt; + Send + <span class="str">'static</span>&gt;(fut: F) {
+    <span class="fn">spawn</span>(fut);
+    <span class="kw">while let Some</span>(task) = QUEUE.lock().unwrap().pop_front() {
+        <span class="kw">let</span> waker = Waker::from(task.clone());
+        <span class="kw">let mut</span> cx = Context::from_waker(&amp;waker);
+        <span class="kw">let mut</span> fut = task.<span class="num">0</span>.lock().unwrap();
+        <span class="kw">let</span> _ = fut.as_mut().<span class="fn">poll</span>(&amp;<span class="kw">mut</span> cx); <span class="cmt">// 就是这一行</span>
+    }
+}</pre>
+    </div>
+  </section>
+
+  <!-- 7. Takeaways -->
+  <section class="slide" data-title="Takeaways">
+    <p class="kicker">// takeaways</p>
+    <h2 class="h2">三件事带回去。</h2>
+    <div class="grid g3 mt-l">
+      <div class="card card-accent"><h4>1 · async 是零成本抽象</h4><p class="dim">编译成状态机，没有运行时虚表，没有 GC。</p></div>
+      <div class="card card-accent"><h4>2 · Waker 是脉搏</h4><p class="dim">Future 不主动做事，运行时靠 waker 决定"什么时候再 poll"。</p></div>
+      <div class="card card-accent"><h4>3 · 别在 async 里阻塞</h4><p class="dim">一行 <span class="mono">std::fs::read</span> 能让整个 worker 停摆。用 <span class="mono">spawn_blocking</span>。</p></div>
+    </div>
+    <p class="lede mt-l">延伸阅读：<span class="mono">tokio.rs/blog/2019-10-scheduler</span> · <span class="mono">rust-lang.github.io/async-book</span></p>
+  </section>
+
+  <!-- 8. Q&A -->
+  <section class="slide center tc" data-title="Q and A">
+    <div>
+      <div class="mono" style="font-size:120px;color:var(--accent);font-weight:800;letter-spacing:-.04em">?</div>
+      <h2 class="h2">Questions?</h2>
+      <p class="lede" style="margin:14px auto">github.com/lewis · @lewis on slack</p>
+      <div class="row mt-l" style="justify-content:center">
+        <span class="tag">slides: git.co/rt-deck</span>
+        <span class="tag">code: git.co/mini-rt</span>
+      </div>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/tech-sharing/style.css

@@ -0,0 +1,49 @@
+/* tech-sharing — 技术分享 dark, code-forward */
+.tpl-tech-sharing{
+  --bg:#0d1117;--bg-soft:#161b22;--surface:#161b22;--surface-2:#1c2230;
+  --border:rgba(139,148,158,.22);--border-strong:rgba(139,148,158,.4);
+  --text-1:#e6edf3;--text-2:#8b949e;--text-3:#6e7681;
+  --accent:#7ee787;--accent-2:#79c0ff;--accent-3:#ff7b72;
+  --grad:linear-gradient(120deg,#7ee787 0%,#79c0ff 60%,#d2a8ff 100%);
+  --radius:14px;--radius-lg:20px;
+  --shadow:0 20px 60px rgba(0,0,0,.5);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-tech-sharing{background:#0d1117;color:var(--text-1)}
+.tpl-tech-sharing .slide{padding:72px 96px;background:#0d1117;color:var(--text-1)}
+.tpl-tech-sharing .slide::before{content:"";position:absolute;inset:0;background:
+  radial-gradient(60% 50% at 90% 10%,rgba(121,192,255,.12),transparent 60%),
+  radial-gradient(50% 50% at 10% 90%,rgba(126,231,135,.08),transparent 60%);
+  pointer-events:none;z-index:0}
+.tpl-tech-sharing .slide>*{position:relative;z-index:1}
+.tpl-tech-sharing .h1{font-size:78px;line-height:1.03;font-weight:800;letter-spacing:-.03em;color:#fff}
+.tpl-tech-sharing .h2{font-size:54px;font-weight:700;letter-spacing:-.025em;color:#fff}
+.tpl-tech-sharing h3,.tpl-tech-sharing h4{color:#fff}
+.tpl-tech-sharing .kicker{color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;text-transform:none;letter-spacing:.02em}
+.tpl-tech-sharing .kicker::before{content:"> "}
+.tpl-tech-sharing .mono{font-family:'JetBrains Mono','IBM Plex Mono',monospace}
+.tpl-tech-sharing .terminal{background:#010409;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.65}
+.tpl-tech-sharing .terminal .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161b22;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-3)}
+.tpl-tech-sharing .terminal .dot{width:12px;height:12px;border-radius:50%;background:#ff5f56}
+.tpl-tech-sharing .terminal .dot:nth-child(2){background:#ffbd2e}
+.tpl-tech-sharing .terminal .dot:nth-child(3){background:#27c93f}
+.tpl-tech-sharing .terminal pre{margin:0;padding:24px 28px;color:#e6edf3;overflow:auto;max-height:440px}
+.tpl-tech-sharing .kw{color:#ff7b72}
+.tpl-tech-sharing .fn{color:#d2a8ff}
+.tpl-tech-sharing .str{color:#a5d6ff}
+.tpl-tech-sharing .cmt{color:#8b949e;font-style:italic}
+.tpl-tech-sharing .num{color:#79c0ff}
+.tpl-tech-sharing .card{background:var(--surface);border:1px solid var(--border);box-shadow:none}
+.tpl-tech-sharing .card-accent{border-top:3px solid var(--accent)}
+.tpl-tech-sharing .pill{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
+.tpl-tech-sharing .pill-accent{background:rgba(126,231,135,.12);color:var(--accent);border-color:rgba(126,231,135,.35)}
+.tpl-tech-sharing .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
+.tpl-tech-sharing .agenda-row{display:flex;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px dashed var(--border);font-family:'JetBrains Mono',monospace}
+.tpl-tech-sharing .agenda-row .num{color:var(--accent);flex:none;width:48px}
+.tpl-tech-sharing .agenda-row .t{color:#fff;font-size:24px;flex:1;font-family:'Inter',sans-serif;font-weight:600}
+.tpl-tech-sharing .agenda-row .d{color:var(--text-3);font-size:13px}
+.tpl-tech-sharing .speaker{display:flex;align-items:center;gap:14px;margin-top:28px}
+.tpl-tech-sharing .speaker .av{width:56px;height:56px;border-radius:50%;background:var(--grad)}
+.tpl-tech-sharing .speaker b{display:block;color:#fff;font-size:18px}
+.tpl-tech-sharing .speaker span{color:var(--text-3);font-size:13px;font-family:'JetBrains Mono',monospace}
+.tpl-tech-sharing .lede{color:var(--text-2)}

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/testing-safety-alert/README.md

@@ -0,0 +1,11 @@
+# testing-safety-alert
+
+白底 + 红琥珀警示色 + 条纹危险边 + 大红 strike 和 pill。灵感来自 `20260412-AI测试与安全/xhs-ai-testing-safety-v2.html` 的 `.focus` 黑底白字块、hero quote box 和高对比 black-on-white 气质 —— 但把语气推到「警示 / 风控 / 事故报告」层级。
+
+**Visual traits:** 顶部 45° 红黑斜条纹警示带、底部副条纹、`strike-through` 红色斜切的否定大字、L1/L2/L3 三档色卡 (绿/琥珀/红)、圆形前置指示灯 alert-box、policy-yaml 深色代码块带红色左边框 + `bad` 关键词高亮、红/绿复选框 checklist、Q1 事故柱状图。
+
+**Use when:** 讲安全 / 风控 / 事故复盘 / 红队测试 / AI 上线前评估 / policy as code；你需要让观众立刻感到「这事严肃，别马虎」。
+
+**Source inspiration:** `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`.
+
+**Path:** `templates/full-decks/testing-safety-alert/index.html`