wao 0.41.3 → 0.41.5

package/lp/src/sections/Testing.module.css

@@ -0,0 +1,124 @@
+.section {
+  padding: var(--section-padding);
+}
+
+.header {
+  text-align: center;
+  max-width: 640px;
+  margin: 0 auto 64px;
+}
+
+.inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
+
+/* Spectrum bar */
+.spectrum {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding: 0 8px;
+}
+
+.specLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-3);
+}
+
+.specBar {
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #34d399, #60a5fa, #a78bfa, #f43f5e, #f59e0b);
+  margin-bottom: 32px;
+  opacity: 0.4;
+  position: relative;
+  overflow: hidden;
+}
+
+.specBar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: specGlow 3s ease-in-out infinite;
+}
+
+@keyframes specGlow {
+  0%, 100% { transform: translateX(-100%); }
+  50% { transform: translateX(100%); }
+}
+
+/* Staircase cards row */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+}
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--card-color, var(--accent));
+  border-radius: 14px;
+  padding: 24px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: border-color 0.2s, transform 0.2s;
+}
+
+.card:hover {
+  border-color: var(--card-color, var(--accent));
+  transform: translateY(-4px);
+}
+
+.cardNum {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.75rem;
+  color: var(--card-color, var(--accent));
+  opacity: 0.6;
+}
+
+.cardTitle {
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.cardSpeed {
+  font-size: 0.8rem;
+  color: var(--text-3);
+  margin-top: auto;
+}
+
+@media (max-width: 900px) {
+  .cards {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .cards {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .card {
+    transform: none;
+  }
+
+  .card:hover {
+    transform: translateY(-4px);
+  }
+}
+
+@media (max-width: 400px) {
+  .cards {
+    grid-template-columns: 1fr;
+  }
+}

package/lp/src/sections/Vision.jsx

@@ -0,0 +1,93 @@
+import SectionWrapper from '../components/SectionWrapper'
+import { scrollTo } from '../utils/scrollTo'
+import s from './Vision.module.css'
+
+const STEPS = [
+  {
+    num: '01',
+    label: 'Learn',
+    title: 'The knowledge base',
+    desc: 'The most comprehensive AO reference — 139 modules across 7 chapters, built for devs and agents alike.',
+    id: 'book',
+    color: '#3b82f6',
+  },
+  {
+    num: '02',
+    label: 'Code',
+    title: 'Write less code',
+    desc: '3 lines instead of 30+. A radically simplified SDK for deploying and messaging on AO.',
+    id: 'sdk',
+    color: '#a855f7',
+  },
+  {
+    num: '03',
+    label: 'Test',
+    title: 'Lightning fast testing',
+    desc: '5 environments from sub-second in-memory to full remote — one API, zero code changes.',
+    id: 'testing',
+    color: '#f43f5e',
+  },
+  {
+    num: '04',
+    label: 'Build with AI',
+    title: 'Write no code',
+    desc: 'AI agents that scaffold, build, test, and ship your AO apps — with persistent context and quality gates.',
+    id: 'hyperadd',
+    color: '#f59e0b',
+  },
+  {
+    num: '05',
+    label: 'Deploy',
+    title: 'Full AO on the edge',
+    desc: 'All 5 AO/Arweave units in one Cloudflare Worker. Free tier, instant reset.',
+    id: 'devnet',
+    color: '#22c55e',
+  },
+]
+
+export default function Vision() {
+  const handleClick = (e, id) => {
+    e.preventDefault()
+    scrollTo(id)
+  }
+
+  return (
+    <SectionWrapper id="journey" className={s.section}>
+      <div className={s.inner}>
+        <div className={s.header}>
+          <span className="eyebrow">Your Journey</span>
+          <h2 className={s.title}>
+            From first line to<br />
+            <span className={s.titleGradient}>production app.</span>
+          </h2>
+          <p className="section-subtitle" style={{ margin: '0 auto' }}>
+            Everything you need to go from learning AO and HyperBEAM
+            to shipping verifiable applications — in one toolkit.
+          </p>
+        </div>
+
+        <div className={s.path}>
+          {STEPS.map((step) => (
+            <a
+              href={`#${step.id}`}
+              className={s.step}
+              key={step.num}
+              style={{ '--step-color': step.color }}
+              onClick={e => handleClick(e, step.id)}
+            >
+              <div className={s.stepLeft}>
+                <span className={s.stepNum}>{step.num}</span>
+                <div className={s.stepLine} />
+              </div>
+              <div className={s.stepContent}>
+                <span className={s.stepLabel}>{step.label}</span>
+                <h3 className={s.stepTitle}>{step.title}</h3>
+                <p className={s.stepDesc}>{step.desc}</p>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}

package/lp/src/sections/Vision.module.css

@@ -0,0 +1,147 @@
+.section {
+  padding: 140px 24px;
+  position: relative;
+}
+
+.inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 80px;
+}
+
+.title {
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.12;
+  margin-bottom: 20px;
+}
+
+.titleGradient {
+  background: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Journey path */
+.path {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.step {
+  display: grid;
+  grid-template-columns: 48px 1fr;
+  gap: 24px;
+  align-items: start;
+  padding: 28px 16px;
+  text-decoration: none;
+  color: inherit;
+  border-radius: 16px;
+  transition: background 0.25s;
+}
+
+.step:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+/* Left column: number + vertical line */
+.stepLeft {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding-top: 4px;
+}
+
+.stepNum {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.75rem;
+  color: var(--step-color);
+  border: 2px solid var(--step-color);
+  background: rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
+  transition: background 0.25s, box-shadow 0.25s;
+}
+
+.step:hover .stepNum {
+  background: color-mix(in srgb, var(--step-color) 15%, transparent);
+  box-shadow: 0 0 20px color-mix(in srgb, var(--step-color) 30%, transparent);
+}
+
+.stepLine {
+  width: 2px;
+  flex: 1;
+  min-height: 40px;
+  background: linear-gradient(180deg, var(--step-color), rgba(107, 90, 138, 0.2));
+}
+
+.step:last-child .stepLine {
+  display: none;
+}
+
+/* Content column */
+.stepContent {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.stepLabel {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--step-color);
+}
+
+.stepTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.stepDesc {
+  font-size: 0.9rem;
+  color: var(--text-2);
+  line-height: 1.6;
+  max-width: 420px;
+}
+
+@media (max-width: 768px) {
+  .step {
+    grid-template-columns: 40px 1fr;
+    gap: 16px;
+  }
+
+  .stepNum {
+    width: 36px;
+    height: 36px;
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .section {
+    padding: 100px 20px;
+  }
+
+  .header {
+    margin-bottom: 56px;
+  }
+}

package/lp/src/styles/globals.css

@@ -0,0 +1,285 @@
+/* ── Tokens ─────────────────────────────────────────── */
+:root {
+  --bg-primary: #0a0515;
+  --bg-card: #110b24;
+  --bg-code: #080312;
+  --accent: #a855f7;
+  --accent-light: #c084fc;
+  --accent-glow: rgba(168, 85, 247, 0.15);
+  --text-1: #f5f0ff;
+  --text-2: #a89bc2;
+  --text-3: #6b5a8a;
+  --border: rgba(168, 85, 247, 0.12);
+  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-display: 'Orbitron', monospace;
+  --max-width: 1200px;
+  --section-padding: 120px 24px;
+  --section-accent: var(--accent);
+  --section-glow: var(--accent-glow);
+}
+
+/* ── Animated angle for conic-gradient borders ───── */
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* ── Reset ──────────────────────────────────────────── */
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg-primary);
+  color: var(--text-1);
+  line-height: 1.6;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* ── Selection ─────────────────────────────────────── */
+::selection {
+  background: rgba(168, 85, 247, 0.3);
+  color: #f5f0ff;
+}
+
+/* ── Reveal Animations ─────────────────────────────── */
+.reveal {
+  opacity: 0;
+  transform: translateY(32px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-slide-right {
+  opacity: 0;
+  transform: translateX(60px);
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-slide-right.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-scale {
+  opacity: 0;
+  transform: scale(0.92);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-scale.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* stagger children */
+.reveal-stagger > * {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
+.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
+.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
+.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
+.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
+.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
+.reveal-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
+.reveal-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }
+
+.reveal-stagger.visible > * {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ── Shared Button Styles ──────────────────────────── */
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border: 1px solid rgba(168, 85, 247, 0.3);
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 8px;
+  background: rgba(168, 85, 247, 0.1);
+  color: var(--accent-light);
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.btn-primary:hover {
+  background: rgba(168, 85, 247, 0.2);
+  border-color: rgba(168, 85, 247, 0.5);
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-2);
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: var(--text-1);
+}
+
+/* ── Section Shared ────────────────────────────────── */
+.eyebrow {
+  display: inline-block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--section-accent, var(--accent));
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  font-weight: 700;
+  line-height: 1.15;
+  margin-bottom: 20px;
+}
+
+.section-subtitle {
+  font-size: 1.15rem;
+  color: var(--text-2);
+  max-width: 640px;
+  line-height: 1.7;
+}
+
+/* ── Browser Chrome Utility ────────────────────────── */
+.browser-chrome {
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  overflow: hidden;
+  background: var(--bg-card);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+
+.browser-chrome-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-code);
+}
+
+.browser-chrome-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.browser-chrome-dot:nth-child(1) { background: #ef4444; }
+.browser-chrome-dot:nth-child(2) { background: #f59e0b; }
+.browser-chrome-dot:nth-child(3) { background: #22c55e; }
+
+.browser-chrome-url {
+  flex: 1;
+  text-align: center;
+  font-size: 0.78rem;
+  color: var(--text-3);
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
+
+.browser-chrome img {
+  display: block;
+  width: 100%;
+}
+
+/* ── Responsive ────────────────────────────────────── */
+@media (max-width: 768px) {
+  :root {
+    --section-padding: 80px 20px;
+  }
+
+  .section-title {
+    font-size: clamp(1.6rem, 5vw, 2.2rem);
+  }
+
+  .section-subtitle {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --section-padding: 64px 16px;
+  }
+
+  .btn-primary,
+  .btn-ghost {
+    padding: 10px 16px;
+    font-size: 0.8rem;
+  }
+}
+
+/* ── Scrollbar ─────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--text-3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-2);
+}

package/lp/src/utils/scrollTo.js

@@ -0,0 +1,4 @@
+export function scrollTo(id) {
+  const el = document.getElementById(id)
+  if (el) el.scrollIntoView({ behavior: 'smooth' })
+}

package/lp/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  base: './',
+})

package/make.js

@@ -0,0 +1,39 @@
+import { writeFileSync, readFileSync, cpSync, existsSync, mkdirSync } from "fs"
+import { resolve } from "path"
+
+const packageJson = resolve(import.meta.dirname, "package.json")
+const packageJsonDist = resolve(import.meta.dirname, "dist/package.json")
+const packageJsonDist2 = resolve(import.meta.dirname, "dist/esm/package.json")
+const json = JSON.parse(readFileSync(packageJson, "utf8"))
+delete json.type
+delete json.scripts
+json.main = "cjs/index.js"
+json.module = "esm/index.js"
+json.bin = {
+  wao: "./cjs/cli.js",
+  "wao-esm": "./esm/cli.js",
+}
+// Ship a postinstall script that patches @permaweb/ao-loader@0.0.44 for
+// Node 24+ wasm-memory64. patch-package can't reach ao-loader when npm
+// hoists it out of node_modules/wao/node_modules/, so we use a custom
+// script that resolves the file directly and edits in place. The script
+// is idempotent and fail-open: re-runs are no-ops, version drift skips.
+const scriptSrc = resolve(
+  import.meta.dirname,
+  "scripts/postinstall-patch-ao-loader.cjs"
+)
+const scriptDst = resolve(import.meta.dirname, "dist/postinstall.cjs")
+if (existsSync(scriptSrc)) {
+  cpSync(scriptSrc, scriptDst)
+}
+json.scripts = {
+  server: "node cjs/run.js",
+  postinstall: "node postinstall.cjs || true",
+}
+
+writeFileSync(packageJsonDist, JSON.stringify(json, undefined, 2))
+
+const json2 = {
+  type: "module",
+}
+writeFileSync(packageJsonDist2, JSON.stringify(json2, undefined, 2))