npm - eyeling - Versions diffs - 1.16.2 → 1.16.4 - Mend

eyeling 1.16.2 → 1.16.4

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

package/HANDBOOK.md +4 -0
package/README.md +0 -1
package/examples/ershov-mixed-computation.n3 +106 -0
package/examples/output/ershov-mixed-computation.n3 +15 -0
package/eyeling.js +510 -263
package/lib/cli.js +22 -12
package/lib/engine.js +488 -251
package/package.json +2 -3
package/arctifacts/README.md +0 -59
package/arctifacts/ackermann.html +0 -678
package/arctifacts/auroracare.html +0 -1297
package/arctifacts/bike-trip.html +0 -752
package/arctifacts/binomial-theorem.html +0 -631
package/arctifacts/bmi.html +0 -511
package/arctifacts/building-performance.html +0 -750
package/arctifacts/clinical-care.html +0 -726
package/arctifacts/collatz.html +0 -403
package/arctifacts/complex.html +0 -321
package/arctifacts/control-system.html +0 -482
package/arctifacts/delfour.html +0 -849
package/arctifacts/earthquake-epicenter.html +0 -982
package/arctifacts/eco-route.html +0 -662
package/arctifacts/euclid-infinitude.html +0 -564
package/arctifacts/euler-identity.html +0 -667
package/arctifacts/exoplanet-transit.html +0 -1000
package/arctifacts/faltings-theorem.html +0 -1046
package/arctifacts/fibonacci.html +0 -299
package/arctifacts/fundamental-theorem-arithmetic.html +0 -398
package/arctifacts/godel-numbering.html +0 -743
package/arctifacts/gps-bike.html +0 -759
package/arctifacts/gps-clinical-bench.html +0 -792
package/arctifacts/graph-french.html +0 -449
package/arctifacts/grass-molecular.html +0 -592
package/arctifacts/group-theory.html +0 -740
package/arctifacts/health-info.html +0 -833
package/arctifacts/kaprekar-constant.html +0 -576
package/arctifacts/lee.html +0 -805
package/arctifacts/linked-lists.html +0 -502
package/arctifacts/lldm.html +0 -612
package/arctifacts/matrix-multiplication.html +0 -502
package/arctifacts/matrix.html +0 -651
package/arctifacts/newton-raphson.html +0 -944
package/arctifacts/peano-factorial.html +0 -456
package/arctifacts/pi.html +0 -363
package/arctifacts/polynomial.html +0 -646
package/arctifacts/prime.html +0 -366
package/arctifacts/pythagorean-theorem.html +0 -468
package/arctifacts/rest-path.html +0 -469
package/arctifacts/roots-of-unity.html +0 -363
package/arctifacts/turing.html +0 -409
package/arctifacts/wind-turbines.html +0 -726

package/arctifacts/grass-molecular.html DELETED Viewed

@@ -1,592 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Grass seed — molecular germination</title>
-    <style>
-      :root {
-        --fg: #101014;
-        --bg: #ffffff;
-        --muted: #666;
-        --accent: #2563eb;
-        --chip: #eef2ff;
-        --ok: #16a34a;
-        --bad: #dc2626;
-        --warn: #ca8a04;
-        --w: #2563eb;
-        --s: #ea580c;
-        --e: #16a34a;
-        --g: #7c3aed;
-        --aba: #b91c1c;
-        --d: #0ea5e9;
-        --x: #d97706;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --fg: #eaeaf0;
-          --bg: #0b0b10;
-          --muted: #a0a0b0;
-          --accent: #60a5fa;
-          --chip: #0e1a32;
-          --w: #60a5fa;
-          --s: #fb923c;
-          --e: #34d399;
-          --g: #c084fc;
-          --aba: #ef4444;
-          --d: #67e8f9;
-          --x: #fbbf24;
-        }
-      }
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        background: var(--bg);
-        color: var(--fg);
-        font:
-          15px/1.6 ui-sans-serif,
-          system-ui,
-          -apple-system,
-          Segoe UI,
-          Roboto,
-          Helvetica,
-          Arial;
-      }
-      main {
-        max-width: 1100px;
-        margin: 0 auto;
-        padding: 28px 16px 80px;
-      }
-      h1 {
-        font-size: clamp(1.6rem, 2.6vw + 1rem, 2.2rem);
-        margin: 0 0 6px;
-      }
-      header p {
-        margin: 0;
-        color: var(--muted);
-      }
-      section {
-        margin: 18px 0 22px;
-        padding: 14px 14px 16px;
-        border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
-        border-radius: 14px;
-        background: color-mix(in srgb, var(--accent) 4%, transparent);
-      }
-      section h2 {
-        margin: 0 0 8px;
-        font-size: 1.15rem;
-      }
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        gap: 10px;
-      }
-      .chip {
-        display: inline-block;
-        padding: 2px 8px;
-        border-radius: 999px;
-        background: var(--chip);
-        font-weight: 600;
-      }
-      .muted {
-        color: var(--muted);
-      }
-      .row {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        flex-wrap: wrap;
-      }
-      .btn {
-        appearance: none;
-        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-        background: color-mix(in srgb, var(--accent) 8%, transparent);
-        color: var(--fg);
-        border-radius: 10px;
-        padding: 8px 12px;
-        font-weight: 700;
-        cursor: pointer;
-      }
-      .btn:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-      .mono {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
-      }
-      .tbl {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      .tbl th,
-      .tbl td {
-        padding: 6px 8px;
-        border-bottom: 1px dashed color-mix(in srgb, var(--fg) 18%, transparent);
-        vertical-align: top;
-      }
-      .tbl th {
-        text-align: left;
-      }
-      .ok {
-        color: var(--ok);
-      }
-      .bad {
-        color: var(--bad);
-      }
-      .warn {
-        color: var(--warn);
-      }
-      .small {
-        font-size: 0.92em;
-      }
-      code {
-        background: color-mix(in srgb, var(--accent) 10%, transparent);
-        padding: 0.1rem 0.35rem;
-        border-radius: 0.35rem;
-      }
-      input[type='number'] {
-        padding: 8px 10px;
-        border-radius: 10px;
-        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
-        min-width: 120px;
-      }
-      .timeline {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        flex-wrap: wrap;
-      }
-      .badge {
-        border-radius: 999px;
-        padding: 4px 10px;
-        background: var(--chip);
-        border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
-      }
-      .badge .day {
-        font-weight: 700;
-        margin-left: 6px;
-      }
-      .legend {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-        align-items: center;
-      }
-      .dot {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 6px;
-      }
-      .spark {
-        width: 100%;
-        height: 72px;
-        border-radius: 10px;
-        background: color-mix(in srgb, var(--accent) 6%, transparent);
-        border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
-      }
-      details summary {
-        cursor: pointer;
-        font-weight: 700;
-      }
-      #advanced-rules {
-        white-space: pre-line;
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-      <header class="row">
-        <div>
-          <h1>Grass seed — molecular germination</h1>
-          <p>A simple, visual story of what happens inside a seed right after it takes up water.</p>
-        </div>
-        <div class="row" style="margin-left: auto">
-          <label class="muted small" for="days">Days to simulate (1–60):</label>
-          <input id="days" type="number" min="1" max="60" step="1" value="20" aria-label="Days to simulate" />
-          <button id="run" class="btn">Run</button>
-        </div>
-      </header>
-      <section>
-        <h2>What this is?</h2>
-        <p>
-          A friendly walkthrough of early <em>germination</em>. We track a few helpful dials: water in the seed, two
-          hormones (a “brake” and a “go” signal), an enzyme that frees up food, the amount of usable sugar, and a
-          “wall‑softening” factor that lets the root tip push out. When the three key needs are met — enough water,
-          enough sugar, and soft walls — the <strong>radicle</strong> (first root) pops out. A few days later, the
-          <strong>coleoptile</strong> (shoot sheath) shows.
-        </p>
-        <div class="grid small">
-          <div>
-            <strong>How to use it</strong><br />Pick the number of days and press <em>Run</em>. Read the milestones and
-            watch the trend lines.
-          </div>
-          <div>
-            <strong>What to look for</strong><br />Do water (W), sugar (S), and wall‑softening (E) cross their marks?
-            That’s the radicle moment.
-          </div>
-          <div>
-            <strong>Keep in mind</strong><br />This is an <em>educational toy</em>: numbers are illustrative, not
-            lab‑calibrated.
-          </div>
-        </div>
-      </section>
-      <section>
-        <h2>Glossary (plain → scientific)</h2>
-        <div class="grid small">
-          <div>
-            <span class="dot" style="background: var(--w)"></span><strong>Water level</strong> → <em>W</em> (hydration,
-            0–1)
-          </div>
-          <div>
-            <span class="dot" style="background: var(--aba)"></span><strong>Brake hormone</strong> →
-            <em>ABA</em> (abscisic acid)
-          </div>
-          <div>
-            <span class="dot" style="background: var(--g)"></span><strong>Go hormone</strong> →
-            <em>GA</em> (gibberellin)
-          </div>
-          <div>
-            <span class="dot" style="background: var(--d)"></span><strong>Growth brakes</strong> →
-            <em>DELLA</em> proteins
-          </div>
-          <div>
-            <span class="dot" style="background: var(--x)"></span><strong>Starch‑unlocker</strong> → <em>α‑amylase</em>
-          </div>
-          <div>
-            <span class="dot" style="background: var(--s)"></span><strong>Fuel</strong> → <em>S</em> (metabolizable
-            sugar)
-          </div>
-          <div>
-            <span class="dot" style="background: var(--e)"></span><strong>Wall softeners</strong> →
-            <em>E</em> (expansins)
-          </div>
-        </div>
-      </section>
-      <section id="answer">
-        <h2>Answer</h2>
-        <div id="timeline" class="timeline small"></div>
-        <div id="charts"></div>
-        <div id="answer-body"><em class="muted">Not computed yet.</em></div>
-      </section>
-      <section id="reason">
-        <h2>Reason why</h2>
-        <div class="mono small" id="advanced-rules"></div>
-      </section>
-      <section id="check">
-        <h2>Check (harness)</h2>
-        <div id="check-body"><em class="muted">Not computed yet.</em></div>
-      </section>
-    </main>
-    <script>
-      (function () {
-        'use strict';
-        const $ = (id) => document.getElementById(id);
-        const setHTML = (id, html) => {
-          const el = $(id);
-          if (el) el.innerHTML = html;
-        };
-        // ------------------ Parameters & thresholds (dimensionless) ------------------
-        const P = {
-          kw: 0.45, // hydration speed
-          ka: 0.3, // ABA decay weight (scaled by W)
-          kg: 0.35, // GA rise
-          kd: 0.4, // DELLA degradation by GA
-          kx: 0.25, // amylase induction by GA
-          ks: 0.2, // sugar accumulation per amylase
-          ke: 0.22, // expansin induction by GA
-          // thresholds
-          W_hydrated: 0.85,
-          ABA_low: 0.2,
-          G_active: 0.6,
-          D_low: 0.2,
-          X_on: 0.6,
-          S_ready: 1.0,
-          E_soft: 0.8,
-          coleoptile_delay: 3,
-        };
-        // Render advanced rules text
-        (function () {
-          const txt = [
-            'State: 0 ≤ W,G,X,E ≤ 1; ABA,DELLA ≥ 0; sugar S ≥ 0.',
-            'Hydration: W_{t+1} = W_t + k_w(1 − W_t).',
-            'ABA decay: ABA_{t+1} = ABA_t · (1 − k_a W_t).',
-            'GA rise: G_{t+1} = G_t + k_g W_t (1 − G_t).',
-            'DELLA degradation: D_{t+1} = D_t · (1 − k_d G_t).',
-            'α‑amylase: X_{t+1} = X_t + k_x G_t (1 − X_t).',
-            'Sugar: S_{t+1} = S_t + k_s X_t.',
-            'Expansins: E_{t+1} = E_t + k_e G_t (1 − E_t).',
-            'Milestones at first t with thresholds; coleoptile = radicle + 3 days.',
-          ];
-          const el = $('advanced-rules');
-          if (el) el.textContent = txt.join('\n');
-        })();
-        // ------------------ Simulator ------------------
-        function clamp01(x) {
-          return Math.max(0, Math.min(1, x));
-        }
-        function run(days = 20) {
-          // Initial conditions
-          let W = 0.1,
-            ABA = 1.0,
-            G = 0.0,
-            D = 1.0,
-            X = 0.0,
-            S = 0.0,
-            E = 0.0;
-          const hist = [{ day: 0, W, ABA, G, D, X, S, E }];
-          for (let t = 0; t < days; t++) {
-            W = clamp01(W + P.kw * (1 - W));
-            ABA = Math.max(0, ABA * (1 - P.ka * W));
-            G = clamp01(G + P.kg * W * (1 - G));
-            D = Math.max(0, D * (1 - P.kd * G));
-            X = clamp01(X + P.kx * G * (1 - X));
-            S = Math.max(0, S + P.ks * X);
-            E = clamp01(E + P.ke * G * (1 - E));
-            hist.push({ day: t + 1, W, ABA, G, D, X, S, E });
-          }
-          return hist;
-        }
-        function firstDay(hist, pred) {
-          for (const row of hist) {
-            if (pred(row)) return row.day;
-          }
-          return null;
-        }
-        function computeMilestones(hist) {
-          const m = {};
-          m.hydrated = firstDay(hist, (r) => r.W >= P.W_hydrated);
-          m.ABA_low = firstDay(hist, (r) => r.ABA <= P.ABA_low);
-          m.G_active = firstDay(hist, (r) => r.G >= P.G_active);
-          m.D_low = firstDay(hist, (r) => r.D <= P.D_low);
-          m.X_on = firstDay(hist, (r) => r.X >= P.X_on);
-          m.S_ready = firstDay(hist, (r) => r.S >= P.S_ready);
-          m.E_soft = firstDay(hist, (r) => r.E >= P.E_soft);
-          m.radicle = firstDay(hist, (r) => r.W >= P.W_hydrated && r.S >= P.S_ready && r.E >= P.E_soft);
-          m.coleoptile = m.radicle == null ? null : m.radicle + P.coleoptile_delay;
-          return m;
-        }
-        // ------------------ Rendering helpers ------------------
-        function fmt2(x) {
-          return (Math.round(x * 100) / 100).toFixed(2);
-        }
-        function badge(label, day, colorVar) {
-          const dayStr =
-            day == null ? '<span class="bad">not reached</span>' : '<span class="day">' + day + '</span> d';
-          return `<span class="badge"><span class="dot" style="background:var(${colorVar})"></span>${label}: ${dayStr}</span>`;
-        }
-        function renderTimeline(m) {
-          const html = [
-            badge('Hydrated', m.hydrated, '--w'),
-            badge('ABA low', m.ABA_low, '--aba'),
-            badge('GA active', m.G_active, '--g'),
-            badge('DELLA low', m.D_low, '--d'),
-            badge('Amylase on', m.X_on, '--x'),
-            badge('Sugar ready', m.S_ready, '--s'),
-            badge('Wall soft', m.E_soft, '--e'),
-            badge('Radicle', m.radicle, '--e'),
-            badge('Coleoptile', m.coleoptile, '--g'),
-          ].join('');
-          setHTML('timeline', html);
-        }
-        function renderAnswer(hist, m) {
-          renderTimeline(m);
-          // Table
-          const milestoneRows = [
-            ['Hydrated (W ≥ 0.85)', m.hydrated],
-            ['Brake hormone low (ABA ≤ 0.20)', m.ABA_low],
-            ['Go hormone active (GA ≥ 0.60)', m.G_active],
-            ['Growth brakes low (DELLA ≤ 0.20)', m.D_low],
-            ['Starch‑unlocker on (α‑amylase ≥ 0.60)', m.X_on],
-            ['Fuel ready (Sugar ≥ 1.00)', m.S_ready],
-            ['Walls soft (Expansins ≥ 0.80)', m.E_soft],
-            ['Radicle emergence', m.radicle],
-            ['Coleoptile visible', m.coleoptile],
-          ];
-          let html = '<table class="tbl small"><thead><tr><th>Milestone</th><th>Day</th></tr></thead><tbody>';
-          for (const [name, day] of milestoneRows) {
-            const pretty = day == null ? '<span class="bad">not reached</span>' : day;
-            html += `<tr><td>${name}</td><td>${pretty}</td></tr>`;
-          }
-          html += '</tbody></table>';
-          // State trace (first 16 days)
-          const tail = hist
-            .slice(0, 16)
-            .map(
-              (r) =>
-                `${r.day.toString().padStart(2)}  W=${fmt2(r.W)}  ABA=${fmt2(r.ABA)}  GA=${fmt2(r.G)}  DELLA=${fmt2(r.D)}  α-amylase=${fmt2(r.X)}  S=${fmt2(r.S)}  E=${fmt2(r.E)}`,
-            );
-          html += `<p class="small muted">First 16 days (state trace):</p>`;
-          html += `<pre class="mono" style="white-space:pre-wrap">${tail.join('\n')}</pre>`;
-          setHTML('answer-body', html);
-          // Mini‑charts
-          renderSparklines(hist);
-        }
-        // Simple sparklines (inline SVG)
-        function sparkline(id, series, colorVar, yMax) {
-          const w = 1000,
-            h = 72,
-            pad = 6;
-          const maxX = series.length - 1;
-          const maxY = yMax !== undefined ? yMax : Math.max(...series);
-          const pts = series
-            .map((v, i) => {
-              const x = pad + (w - 2 * pad) * (i / maxX);
-              const y = h - pad - (h - 2 * pad) * (v / (maxY || 1));
-              return `${x.toFixed(2)},${y.toFixed(2)}`;
-            })
-            .join(' ');
-          return `<svg class="spark" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" role="img" aria-label="trend">
-        <polyline fill="none" stroke="var(${colorVar})" stroke-width="3" points="${pts}" />
-      </svg>`;
-        }
-        function renderSparklines(hist) {
-          const W = hist.map((r) => r.W),
-            S = hist.map((r) => r.S),
-            E = hist.map((r) => r.E),
-            G = hist.map((r) => r.G);
-          const box = document.getElementById('charts');
-          let html = '<div class="legend small">';
-          html += '<span><span class="dot" style="background:var(--w)"></span>Water (W)</span>';
-          html += '<span><span class="dot" style="background:var(--s)"></span>Sugar (S)</span>';
-          html += '<span><span class="dot" style="background:var(--e)"></span>Wall softening (E)</span>';
-          html += '<span><span class="dot" style="background:var(--g)"></span>Go hormone (GA)</span>';
-          html += '</div>';
-          html += sparkline('w', W, '--w', 1);
-          html += sparkline('s', S, '--s', Math.max(1, Math.max(...S)));
-          html += sparkline('e', E, '--e', 1);
-          html += sparkline('g', G, '--g', 1);
-          box.innerHTML = html;
-        }
-        // ------------------ Checks ------------------
-        function runChecks(hist, m) {
-          const lines = [];
-          let okAll = true;
-          // 1) In-range & trend direction
-          function nonDecreasing(seq) {
-            for (let i = 1; i < seq.length; i++) {
-              if (seq[i] + 1e-12 < seq[i - 1]) return false;
-            }
-            return true;
-          }
-          function nonIncreasing(seq) {
-            for (let i = 1; i < seq.length; i++) {
-              if (seq[i] - 1e-12 > seq[i - 1]) return false;
-            }
-            return true;
-          }
-          const Wseries = hist.map((r) => r.W),
-            ABAseries = hist.map((r) => r.ABA),
-            Dseries = hist.map((r) => r.D);
-          const Gseries = hist.map((r) => r.G),
-            Xseries = hist.map((r) => r.X),
-            Eseries = hist.map((r) => r.E),
-            Sseries = hist.map((r) => r.S);
-          const okBounds =
-            Math.min(...Wseries) >= 0 &&
-            Math.max(...Wseries) <= 1 &&
-            Math.min(...Gseries) >= 0 &&
-            Math.max(...Gseries) <= 1 &&
-            Math.min(...Xseries) >= 0 &&
-            Math.max(...Xseries) <= 1 &&
-            Math.min(...Eseries) >= 0 &&
-            Math.max(...Eseries) <= 1 &&
-            Math.min(...ABAseries) >= 0 &&
-            Math.min(...Dseries) >= 0 &&
-            Math.min(...Sseries) >= 0;
-          const okMono =
-            nonDecreasing(Wseries) &&
-            nonDecreasing(Gseries) &&
-            nonDecreasing(Xseries) &&
-            nonDecreasing(Eseries) &&
-            nonDecreasing(Sseries) &&
-            nonIncreasing(ABAseries) &&
-            nonIncreasing(Dseries);
-          lines.push(
-            `Signals stay within sensible ranges and move in the expected direction: ${okBounds && okMono ? 'OK' : 'Issue'}`,
-          );
-          okAll = okAll && okBounds && okMono;
-          // 2) Logical ordering
-          const orderOK =
-            (m.ABA_low ?? 1e9) >= (m.hydrated ?? -1) &&
-            (m.G_active ?? 1e9) >= (m.hydrated ?? -1) &&
-            (m.D_low ?? 1e9) >= (m.G_active ?? -1) &&
-            (m.X_on ?? 1e9) >= (m.G_active ?? -1) &&
-            (m.S_ready ?? 1e9) >= (m.X_on ?? -1) &&
-            (m.E_soft ?? 1e9) >= (m.G_active ?? -1) &&
-            (m.radicle ?? 1e9) >= Math.max(m.S_ready ?? -1, m.E_soft ?? -1, m.hydrated ?? -1);
-          lines.push(`Milestones happen in a sensible order: ${orderOK ? 'OK' : 'Check thresholds'}`);
-          okAll = okAll && orderOK;
-          // 3) Radicle condition equivalence
-          let okRad = true;
-          if (m.radicle != null) {
-            const r = hist[m.radicle];
-            okRad = r && r.W >= P.W_hydrated && r.S >= P.S_ready && r.E >= P.E_soft;
-          }
-          lines.push(
-            `On the radicle day, water + sugar + soft walls are all high enough: ${okRad ? 'OK' : 'Not satisfied'}`,
-          );
-          okAll = okAll && okRad;
-          // 4) Coleoptile offset
-          const okCol = (m.coleoptile == null && m.radicle == null) || m.coleoptile === m.radicle + P.coleoptile_delay;
-          lines.push(`Coleoptile appears ${P.coleoptile_delay} days after radicle: ${okCol ? 'OK' : 'Mismatch'}`);
-          lines.push('');
-          lines.push(`All checks passed? ${okAll ? 'Yes ✓' : 'Some items need attention'}`);
-          return lines;
-        }
-        function renderChecks(hist, m) {
-          const lines = runChecks(hist, m);
-          const wrap = $('check-body');
-          const pre = document.createElement('pre');
-          pre.className = 'mono';
-          pre.style.whiteSpace = 'pre-wrap';
-          pre.textContent = lines.join('\n');
-          wrap.replaceChildren(pre);
-        }
-        // ------------------ Wire up ------------------
-        function runAll() {
-          const days = Math.max(1, Math.min(60, parseInt($('days').value || '20', 10)));
-          const hist = run(days);
-          const m = computeMilestones(hist);
-          renderAnswer(hist, m);
-          renderChecks(hist, m);
-        }
-        $('run').addEventListener('click', runAll);
-        // initial
-        runAll();
-      })();
-    </script>
-  </body>
-</html>