npm - @echomem/mcp - Versions diffs - 1.4.9 → 1.4.10 - Mend

@echomem/mcp 1.4.9 → 1.4.10

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

package/assets/hud/github.svg +1 -0
package/dist/city/README.md +9 -0
package/dist/city/echo-ai-city-only.html +54 -93
package/dist/context-analysis/claude-canonical-adapter.js +315 -0
package/dist/context-analysis/claude-native-canonical.js +35 -12
package/dist/context-metrics/calculate.js +2 -15
package/dist/context-metrics/estimator.js +45 -0
package/dist/context-metrics/ledger.js +507 -0
package/dist/context-metrics/parse-claude.js +227 -0
package/dist/context-metrics/parse-codex.js +276 -0
package/dist/hud/adapters.js +69 -198
package/dist/hud/cli.js +0 -0
package/dist/hud/efficiency.js +447 -0
package/dist/hud/electron-main.js +3 -2
package/dist/hud/fs.js +14 -0
package/dist/hud/metric.js +4 -98
package/dist/hud/monitor.js +1 -12
package/dist/hud/render.js +4 -3
package/dist/hud/server.js +30 -0
package/dist/hud/web.js +409 -186
package/dist/index.js +0 -0
package/dist/setup-page/client-core.js +475 -0
package/dist/setup-page/client-extraction.js +550 -0
package/dist/setup-page/client-lifecycle.js +116 -0
package/dist/setup-page/client-report-audit.js +818 -0
package/dist/setup-page/client-report-city.js +204 -0
package/dist/setup-page/client-report.js +6 -0
package/dist/setup-page/client.js +15 -0
package/dist/setup-page/document.js +37 -0
package/dist/setup-page/styles-city-report.js +880 -0
package/dist/setup-page/styles-context-audit.js +470 -0
package/dist/setup-page/styles-extraction.js +821 -0
package/dist/setup-page/styles-foundation.js +231 -0
package/dist/setup-page/styles.js +11 -0
package/dist/setup-page.js +6 -5623
package/dist/setup.js +24 -10
package/package.json +4 -4
package/dist/city/10-problems-report.html +0 -649
package/dist/city/_live.html +0 -37
package/dist/city/_serve.mjs +0 -45
package/dist/city/card-data.json +0 -15
package/dist/city/chaos-to-clarity-pencil.html +0 -582
package/dist/city/city-data.json +0 -248
package/dist/city/echo-ai-city-only.template.html +0 -2271
package/dist/city/generate-echo-city-only.mjs +0 -112
package/dist/city/pencil-pie-generator.html +0 -883
package/dist/city/pencil-webgl-landscape.html +0 -1239
package/dist/city/spatial-fan-story.html +0 -479

package/dist/city/_serve.mjs DELETED Viewed

@@ -1,45 +0,0 @@
-import http from "node:http";
-import fs from "node:fs";
-import path from "node:path";
-const root = path.resolve("artifacts");
-const PORT = 8787;
-const types = {
-  ".html": "text/html; charset=utf-8",
-  ".png": "image/png",
-  ".json": "application/json",
-  ".css": "text/css",
-  ".js": "text/javascript",
-  ".svg": "image/svg+xml",
-  ".wasm": "application/wasm",
-  ".riv": "application/octet-stream",
-};
-http
-  .createServer((req, res) => {
-    let p = decodeURIComponent(req.url.split("?")[0]);
-    if (p === "/") p = "/_live.html";
-    const f = path.join(root, p);
-    if (!f.startsWith(root)) {
-      res.writeHead(403);
-      return res.end();
-    }
-    fs.stat(f, (err, st) => {
-      if (err || !st.isFile()) {
-        res.writeHead(404);
-        return res.end("not found");
-      }
-      const headers = {
-        "Last-Modified": st.mtime.toUTCString(),
-        "Cache-Control": "no-store",
-      };
-      if (req.method === "HEAD") {
-        res.writeHead(200, headers);
-        return res.end();
-      }
-      headers["Content-Type"] = types[path.extname(f)] || "application/octet-stream";
-      res.writeHead(200, headers);
-      fs.createReadStream(f).pipe(res);
-    });
-  })
-  .listen(PORT, () => console.log(`serving ${root} on http://localhost:${PORT}`));

package/dist/city/card-data.json DELETED Viewed

@@ -1,15 +0,0 @@
-{
-  "_note": "Frozen snapshot for the Repo City share card (Kobe). Only the keys generate-echo-city-only.mjs actually renders remain — dead fields were pruned in the Carmack cleanup. For multi-user / the setup flow these must be DERIVED from buildForensicReport(), not frozen — see docs/repo-city-setup-integration-plan.md.",
-  "computeCost": "$13,689",
-  "attentionHours": 191.1,
-  "split": { "codexPct": 26, "claudePct": 74 },
-  "dirty": { "pct": "85.0" },
-  "persona": {
-    "primary": "bossy",
-    "rank": "the architect",
-    "rhythm": "marathoner",
-    "sides": ["loopy", "lusty", "maxxy"],
-    "verdict": "you don't write code, you run a daycare for <b>163</b> sleepless interns who reread the same file into amnesia and bill every typo to Opus — <b>$13,689</b> later, you wanted a helper and became a dad. 🗿"
-  },
-  "counterfactual": { "reachDate": "Jun 2", "insteadOf": "Jun 20", "daysEarlier": 18 }
-}

package/dist/city/chaos-to-clarity-pencil.html DELETED Viewed

@@ -1,582 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Chaos to Clarity — Pencil Study</title>
-  <style>
-    * { box-sizing: border-box; }
-    html, body { min-height: 100%; }
-    body {
-      margin: 0;
-      display: grid;
-      place-items: center;
-      padding: clamp(12px, 4vw, 48px);
-      background: #d8d4ca;
-    }
-    .sheet {
-      position: relative;
-      width: min(92vw, 900px);
-      aspect-ratio: 1;
-      overflow: hidden;
-      background: #f2eee4;
-      box-shadow: 0 24px 70px rgba(39, 38, 31, .18), 0 2px 5px rgba(39, 38, 31, .12);
-    }
-    canvas {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  </style>
-</head>
-<body>
-  <main class="sheet" aria-label="混乱经过透镜转化为清晰方向的铅笔插画">
-    <canvas id="art" width="1200" height="1200"></canvas>
-  </main>
-  <script>
-    const canvas = document.getElementById("art");
-    const g = canvas.getContext("2d");
-    const TAU = Math.PI * 2;
-    const ink = "#292a25";
-    const paper = "#f2eee4";
-    function randomFactory(seed) {
-      return function random() {
-        let t = seed += 0x6D2B79F5;
-        t = Math.imul(t ^ t >>> 15, t | 1);
-        t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-        return ((t ^ t >>> 14) >>> 0) / 4294967296;
-      };
-    }
-    function pencil(path, width = 2, alpha = .72, repeats = 2, seed = 1) {
-      const random = randomFactory(seed);
-      for (let i = 0; i < repeats; i++) {
-        g.save();
-        g.translate((random() - .5) * 2.1, (random() - .5) * 1.6);
-        path();
-        g.strokeStyle = ink;
-        g.globalAlpha = alpha / Math.max(1, repeats * .7);
-        g.lineWidth = width + random() * .7;
-        g.lineCap = "round";
-        g.lineJoin = "round";
-        g.stroke();
-        g.restore();
-      }
-    }
-    function line(x1, y1, x2, y2, width = 1.5, alpha = .6, seed = 1) {
-      pencil(() => {
-        g.beginPath();
-        g.moveTo(x1, y1);
-        g.lineTo(x2, y2);
-      }, width, alpha, 2, seed);
-    }
-    function poly(points, close = false, width = 1.8, alpha = .7, seed = 1) {
-      pencil(() => {
-        g.beginPath();
-        g.moveTo(points[0][0], points[0][1]);
-        for (let i = 1; i < points.length; i++) g.lineTo(points[i][0], points[i][1]);
-        if (close) g.closePath();
-      }, width, alpha, 2, seed);
-    }
-    function ellipse(cx, cy, rx, ry, width = 1.7, alpha = .68, seed = 1) {
-      pencil(() => {
-        g.beginPath();
-        g.ellipse(cx, cy, rx, ry, 0, 0, TAU);
-      }, width, alpha, 2, seed);
-    }
-    function arrow(x1, y1, x2, y2, seed = 1, alpha = .68) {
-      line(x1, y1, x2, y2, 1.5, alpha, seed);
-      const angle = Math.atan2(y2 - y1, x2 - x1);
-      const size = 12;
-      poly([
-        [x2 - Math.cos(angle - .55) * size, y2 - Math.sin(angle - .55) * size],
-        [x2, y2],
-        [x2 - Math.cos(angle + .55) * size, y2 - Math.sin(angle + .55) * size]
-      ], false, 1.5, alpha, seed + 2);
-    }
-    /*
-      PencilLight is the reusable drawing model for this document.
-      1. Curve tangent = direction of the form.
-      2. Curve normal = candidate side for light or shadow.
-      3. Depth controls width, contrast and spacing: far is thin/light/open;
-         near is heavier/darker/closer.
-      4. Shadow is made from continuous pressure strokes following the form,
-         never from mechanical dashed fills.
-      5. A ribbon is a perspective surface: its two edges come from the curve
-         normal, while its width grows toward the viewer.
-    */
-    const PencilLight = Object.freeze({
-      light: { x: -.82, y: -.57 },
-      cubic(p0, p1, p2, p3, steps = 36) {
-        const points = [];
-        for (let i = 0; i <= steps; i++) {
-          const t = i / steps;
-          const u = 1 - t;
-          points.push({
-            x: u*u*u*p0.x + 3*u*u*t*p1.x + 3*u*t*t*p2.x + t*t*t*p3.x,
-            y: u*u*u*p0.y + 3*u*u*t*p1.y + 3*u*t*t*p2.y + t*t*t*p3.y,
-            depth: t
-          });
-        }
-        return points;
-      },
-      frames(points) {
-        return points.map((point, i) => {
-          const a = points[Math.max(0, i - 1)];
-          const b = points[Math.min(points.length - 1, i + 1)];
-          const tx = b.x - a.x;
-          const ty = b.y - a.y;
-          const length = Math.hypot(tx, ty) || 1;
-          return { ...point, tx: tx / length, ty: ty / length, nx: -ty / length, ny: tx / length };
-        });
-      },
-      curve(points, { width = 1.4, alpha = .58, seed = 1, repeats = 2 } = {}) {
-        pencil(() => {
-          g.beginPath();
-          g.moveTo(points[0].x, points[0].y);
-          for (let i = 1; i < points.length; i++) g.lineTo(points[i].x, points[i].y);
-        }, width, alpha, repeats, seed);
-      },
-      ribbon(points, widthAt, { seed = 1 } = {}) {
-        const frames = this.frames(points);
-        const left = [];
-        const right = [];
-        frames.forEach((frame, i) => {
-          const half = widthAt(frame.depth, i) * .5;
-          left.push({ x: frame.x + frame.nx * half, y: frame.y + frame.ny * half });
-          right.push({ x: frame.x - frame.nx * half, y: frame.y - frame.ny * half });
-        });
-        g.beginPath();
-        g.moveTo(left[0].x, left[0].y);
-        for (let i = 1; i < left.length; i++) g.lineTo(left[i].x, left[i].y);
-        for (let i = right.length - 1; i >= 0; i--) g.lineTo(right[i].x, right[i].y);
-        g.closePath();
-        g.fillStyle = "rgba(244,241,233,.96)";
-        g.fill();
-        this.curve(left, { width: 1.2, alpha: .54, seed });
-        this.curve(right, { width: 1.2, alpha: .54, seed: seed + 1 });
-        // The edge whose normal points away from the light receives pressure.
-        const mid = frames[Math.floor(frames.length * .58)];
-        const shadowSign = mid.nx * -this.light.x + mid.ny * -this.light.y >= 0 ? 1 : -1;
-        const shadowEdge = shadowSign > 0 ? left : right;
-        for (let band = 0; band < 4; band++) {
-          const shaded = shadowEdge.map((point, i) => {
-            const frame = frames[i];
-            const depth = frame.depth;
-            const distance = 2 + band * (2.2 + depth * 1.8);
-            return {
-              x: point.x + frame.nx * shadowSign * distance,
-              y: point.y + frame.ny * shadowSign * distance
-            };
-          });
-          this.curve(shaded, {
-            width: .75 + band * .08,
-            alpha: .34 - band * .055,
-            seed: seed + 20 + band,
-            repeats: 1
-          });
-        }
-      },
-      slopeFacet({ ridge, foot, spread, strokes, darkness, seed }) {
-        const random = randomFactory(seed);
-        for (let i = 0; i < strokes; i++) {
-          const lane = strokes === 1 ? 0 : i / (strokes - 1) - .5;
-          const start = {
-            x: ridge.x + lane * spread,
-            y: ridge.y + Math.abs(lane) * spread * .28
-          };
-          const end = {
-            x: foot.x + lane * spread * 1.5,
-            y: foot.y - random() * 8
-          };
-          const points = this.cubic(
-            start,
-            { x: start.x + (end.x - start.x) * .22, y: start.y + (end.y - start.y) * .4 },
-            { x: start.x + (end.x - start.x) * .72, y: start.y + (end.y - start.y) * .82 },
-            end,
-            18
-          );
-          this.curve(points, {
-            width: .65 + darkness * .55,
-            alpha: .12 + darkness * .3,
-            seed: seed + i,
-            repeats: 1
-          });
-        }
-      },
-      meshSurface({ height, project, columns = 17, rows = 12, samples = 58, seed = 1 }) {
-        const clamp = value => Math.max(0, Math.min(1, value));
-        // Depth rows behave like soft contour lines across the terrain.
-        for (let row = 0; row < rows; row++) {
-          const v = row / (rows - 1);
-          const points = [];
-          for (let i = 0; i <= samples; i++) {
-            const u = -1 + i / samples * 2;
-            points.push(project(u, v, height(u, v)));
-          }
-          this.curve(points, {
-            width: .52 + v * .42,
-            alpha: .13 + v * .16,
-            seed: seed + row,
-            repeats: 1
-          });
-        }
-        // Flow lines run continuously from the far ridge toward the viewer.
-        // Their pressure is derived from surface slope relative to the light.
-        for (let column = 0; column < columns; column++) {
-          const u = -1 + column / (columns - 1) * 2;
-          const points = [];
-          for (let i = 0; i <= samples; i++) {
-            const v = i / samples;
-            points.push(project(u, v, height(u, v)));
-          }
-          const slope = height(Math.min(1, u + .025), .42) - height(Math.max(-1, u - .025), .42);
-          const darkness = clamp(.48 + slope * 2.4);
-          this.curve(points, {
-            width: .55 + darkness * .36,
-            alpha: .15 + darkness * .2,
-            seed: seed + 100 + column,
-            repeats: 1
-          });
-        }
-      }
-    });
-    function drawPaper() {
-      const random = randomFactory(8041);
-      g.fillStyle = paper;
-      g.fillRect(0, 0, canvas.width, canvas.height);
-      const colors = ["rgba(58,55,46,.025)", "rgba(255,255,255,.065)"];
-      for (let pass = 0; pass < 2; pass++) {
-        g.beginPath();
-        for (let i = 0; i < 4200; i++) {
-          const x = random() * canvas.width;
-          const y = random() * canvas.height;
-          const w = .35 + random() * 1.5;
-          g.rect(x, y, w, w * (.4 + random()));
-        }
-        g.fillStyle = colors[pass];
-        g.fill();
-      }
-      g.beginPath();
-      for (let i = 0; i < 180; i++) {
-        const x = random() * canvas.width;
-        const y = random() * canvas.height;
-        g.moveTo(x, y);
-        g.lineTo(x + 8 + random() * 24, y + (random() - .5) * 3);
-      }
-      g.strokeStyle = "rgba(69,65,54,.028)";
-      g.lineWidth = .55;
-      g.stroke();
-    }
-    function dottedJourney() {
-      g.save();
-      g.strokeStyle = "rgba(41,42,37,.45)";
-      g.lineWidth = 1.5;
-      g.setLineDash([3, 11]);
-      g.lineCap = "round";
-      g.beginPath();
-      g.moveTo(88, 130);
-      g.bezierCurveTo(55, 240, 232, 225, 178, 330);
-      g.bezierCurveTo(130, 430, 348, 366, 336, 510);
-      g.bezierCurveTo(325, 635, 118, 608, 182, 742);
-      g.bezierCurveTo(225, 822, 336, 788, 397, 862);
-      g.stroke();
-      g.restore();
-    }
-    function drawChaos() {
-      const random = randomFactory(3319);
-      const cx = 238;
-      const cy = 550;
-      for (let layer = 0; layer < 3; layer++) {
-        g.beginPath();
-        const strands = 17 + layer * 7;
-        for (let strand = 0; strand < strands; strand++) {
-          let x = cx + (random() - .5) * (174 - layer * 22);
-          let y = cy + (random() - .5) * (184 - layer * 20);
-          g.moveTo(x, y);
-          const steps = 8 + Math.floor(random() * 7);
-          for (let step = 0; step < steps; step++) {
-            const pull = .06 + layer * .018;
-            x += (random() - .5) * (72 - layer * 9) + (cx - x) * pull;
-            y += (random() - .5) * (68 - layer * 8) + (cy - y) * pull;
-            g.lineTo(x, y);
-          }
-        }
-        g.strokeStyle = `rgba(35,36,32,${.11 + layer * .045})`;
-        g.lineWidth = .74 + layer * .14;
-        g.lineCap = "round";
-        g.stroke();
-      }
-      for (let i = 0; i < 7; i++) {
-        const x = cx + (random() - .5) * 200;
-        const y = cy + (random() - .5) * 200;
-        ellipse(x, y, 16 + random() * 46, 10 + random() * 34, .9, .24, 500 + i);
-      }
-    }
-    function drawQuestion(x, y, s, seed) {
-      pencil(() => {
-        g.beginPath();
-        g.moveTo(x - s * .25, y - s * .28);
-        g.bezierCurveTo(x - s * .1, y - s * .66, x + s * .55, y - s * .48, x + s * .34, y - s * .08);
-        g.bezierCurveTo(x + s * .22, y + s * .12, x, y + s * .12, x, y + s * .38);
-      }, 1.6, .57, 2, seed);
-      ellipse(x, y + s * .62, 2.4, 2.4, 1.2, .65, seed + 1);
-    }
-    function drawGear(x, y, r, seed) {
-      ellipse(x, y, r * .58, r * .58, 1.4, .55, seed);
-      ellipse(x, y, r * .16, r * .16, 1.2, .55, seed + 1);
-      for (let i = 0; i < 9; i++) {
-        const a = i / 9 * TAU;
-        line(x + Math.cos(a) * r * .63, y + Math.sin(a) * r * .63,
-             x + Math.cos(a) * r, y + Math.sin(a) * r, 1.4, .55, seed + i + 2);
-      }
-    }
-    function drawCloud(x, y, s, seed) {
-      pencil(() => {
-        g.beginPath();
-        g.moveTo(x - s * .65, y + s * .2);
-        g.bezierCurveTo(x - s * .82, y - s * .18, x - s * .42, y - s * .4, x - s * .16, y - s * .24);
-        g.bezierCurveTo(x, y - s * .72, x + s * .5, y - s * .55, x + s * .48, y - s * .2);
-        g.bezierCurveTo(x + s * .86, y - s * .18, x + s * .82, y + s * .25, x + s * .55, y + s * .26);
-        g.lineTo(x - s * .65, y + s * .2);
-      }, 1.4, .5, 2, seed);
-    }
-    function drawDoodles() {
-      drawQuestion(40, 298, 32, 10);
-      drawQuestion(122, 756, 25, 11);
-      drawQuestion(390, 430, 20, 12);
-      drawGear(210, 206, 26, 20);
-      drawCloud(67, 377, 30, 31);
-      drawCloud(120, 850, 22, 32);
-      poly([[252,137],[306,115],[278,171],[268,143],[252,137]], true, 1.4, .6, 40);
-      line(268,143,306,115,1.1,.46,41);
-      poly([[389,207],[398,226],[419,229],[402,241],[407,262],[389,250],[372,263],[377,241],[359,229],[381,226]], true, 1.2, .55, 50);
-      poly([[296,825],[315,790],[322,812],[344,810],[318,853],[314,827]], true, 1.5, .62, 60);
-      poly([[94,698],[123,684],[145,699],[142,725],[110,730],[91,715]], false, 1.3, .45, 70);
-      ellipse(360,886,19,19,1.3,.5,80);
-      line(341,886,379,886,1,.34,81);
-      line(360,867,360,905,1,.34,82);
-      poly([[39,526],[51,510],[66,526],[51,542]], true, 1.2,.47,90);
-      ellipse(418,745,9,9,1.1,.5,91);
-      line(418,754,418,779,1.2,.48,92);
-      line(405,766,431,766,1.2,.48,93);
-      poly([[151,278],[166,265],[183,273],[181,293],[160,299],[148,288]], true, 1.1,.45,94);
-      line(55,214,85,214,1.2,.42,95);
-      line(70,199,70,229,1.2,.42,96);
-      ellipse(69,214,22,22,1.1,.38,97);
-    }
-    function lensPath() {
-      g.beginPath();
-      g.moveTo(501, 242);
-      g.bezierCurveTo(552, 335, 551, 676, 501, 785);
-      g.bezierCurveTo(451, 682, 450, 340, 501, 242);
-      g.closePath();
-    }
-    function drawLens() {
-      lensPath();
-      g.fillStyle = "rgba(231,226,215,.82)";
-      g.fill();
-      g.save();
-      lensPath();
-      g.clip();
-      g.beginPath();
-      for (let x = 452; x < 550; x += 9) {
-        g.moveTo(x, 210);
-        g.lineTo(x - 84, 830);
-      }
-      g.strokeStyle = "rgba(39,40,35,.17)";
-      g.lineWidth = .8;
-      g.stroke();
-      g.restore();
-      pencil(lensPath, 2.3, .82, 4, 301);
-      pencil(() => {
-        g.beginPath();
-        g.moveTo(494,252);
-        g.bezierCurveTo(468,382,469,647,494,775);
-      }, .8, .35, 2, 302);
-    }
-    function drawRays() {
-      const rays = [
-        [512,395,760,285],
-        [520,440,790,380],
-        [523,492,756,492],
-        [521,545,792,612],
-        [512,594,756,742]
-      ];
-      rays.forEach((ray, i) => arrow(...ray, 410 + i, .55));
-      g.save();
-      g.setLineDash([2,8]);
-      g.strokeStyle = "rgba(39,40,35,.28)";
-      g.lineWidth = 1;
-      g.beginPath();
-      g.moveTo(510,348); g.lineTo(900,202);
-      g.moveTo(516,646); g.lineTo(920,840);
-      g.stroke();
-      g.restore();
-    }
-    function drawSunAndCloud() {
-      ellipse(925,203,42,42,1.8,.68,500);
-      for (let i = 0; i < 12; i++) {
-        const a = i / 12 * TAU;
-        line(925 + Math.cos(a)*55, 203 + Math.sin(a)*55,
-             925 + Math.cos(a)*82, 203 + Math.sin(a)*82, 1.1,.45,510+i);
-      }
-      drawCloud(780,220,48,540);
-    }
-    function drawMountain() {
-      const bell = (u, v, cu, cv, su, sv, amplitude) => {
-        const du = (u - cu) / su;
-        const dv = (v - cv) / sv;
-        return amplitude * Math.exp(-(du * du + dv * dv));
-      };
-      const height = (u, v) => Math.max(-.1,
-        bell(u,v,.02,.18,.43,.34,1.02) +
-        bell(u,v,-.7,.42,.29,.31,.58) +
-        bell(u,v,.69,.39,.3,.3,.66) -
-        bell(u,v,.02,.78,.42,.2,.2)
-      );
-      const project = (u, v, elevation) => ({
-        x: 895 + u * (176 + v * 78),
-        y: 326 + v * 182 - elevation * 154,
-        depth: v
-      });
-      PencilLight.meshSurface({
-        height,
-        project,
-        columns: 17,
-        rows: 12,
-        samples: 62,
-        seed: 600
-      });
-      const road = [
-        ...PencilLight.cubic(
-          {x:930,y:220},{x:858,y:264},{x:966,y:303},{x:890,y:345},18
-        ).slice(0,-1),
-        ...PencilLight.cubic(
-          {x:890,y:345},{x:808,y:382},{x:937,y:411},{x:831,y:455},20
-        ).slice(0,-1),
-        ...PencilLight.cubic(
-          {x:831,y:455},{x:762,y:483},{x:831,y:511},{x:758,y:544},18
-        )
-      ];
-      road.forEach((point, i) => point.depth = i / (road.length - 1));
-      PencilLight.ribbon(road, depth => 8 + Math.pow(depth, 1.7) * 28, { seed: 710 });
-    }
-    function drawBars(x,y) {
-      line(x-12,y+61,x+102,y+61,1.5,.55,800);
-      line(x-12,y+61,x-12,y-10,1.5,.55,801);
-      const heights=[21,40,69,52,88];
-      heights.forEach((h,i)=>{
-        const bx=x+i*21;
-        poly([[bx,y+60],[bx,y+60-h],[bx+13,y+60-h],[bx+13,y+60]],false,1.2,.5,810+i);
-        for(let yy=y+56;yy>y+60-h;yy-=7) line(bx+2,yy,bx+11,yy,0.7,.22,830+i+yy);
-      });
-    }
-    function drawNetwork(x,y) {
-      const nodes=[[0,0],[55,-28],[95,18],[74,70],[20,82],[-22,42],[42,32]];
-      const edges=[[0,1],[1,2],[2,3],[3,4],[4,5],[5,0],[0,6],[1,6],[2,6],[3,6],[4,6]];
-      edges.forEach((e,i)=>line(x+nodes[e[0]][0],y+nodes[e[0]][1],x+nodes[e[1]][0],y+nodes[e[1]][1],1.1,.45,900+i));
-      nodes.forEach((n,i)=>ellipse(x+n[0],y+n[1],7,7,1.4,.6,930+i));
-    }
-    function drawGlobe(x,y,r) {
-      ellipse(x,y,r,r,1.7,.62,950);
-      pencil(()=>{g.beginPath();g.ellipse(x,y,r*.46,r,0,0,TAU);},1,.42,2,951);
-      pencil(()=>{g.beginPath();g.ellipse(x,y,r,r*.42,0,0,TAU);},1,.42,2,952);
-      pencil(()=>{
-        g.beginPath();
-        g.moveTo(x-r*.72,y-r*.18);
-        g.bezierCurveTo(x-r*.25,y-r*.52,x-r*.08,y-r*.18,x+r*.12,y-r*.35);
-        g.bezierCurveTo(x+r*.32,y-r*.51,x+r*.5,y-r*.12,x+r*.72,y-r*.1);
-        g.moveTo(x-r*.58,y+r*.15);
-        g.bezierCurveTo(x-r*.28,y+r*.02,x-r*.18,y+r*.5,x+r*.18,y+r*.28);
-        g.bezierCurveTo(x+r*.36,y+r*.14,x+r*.55,y+r*.44,x+r*.66,y+r*.22);
-      },1.2,.5,2,953);
-    }
-    function drawPlant(x,y) {
-      line(x,y+80,x,y,1.8,.58,1000);
-      pencil(()=>{g.beginPath();g.moveTo(x,y+47);g.bezierCurveTo(x-48,y+24,x-50,y-9,x-6,y+17);g.bezierCurveTo(x+6,y+26,x+3,y+39,x,y+47);},1.5,.54,2,1001);
-      pencil(()=>{g.beginPath();g.moveTo(x,y+58);g.bezierCurveTo(x+48,y+35,x+53,y+4,x+7,y+29);g.bezierCurveTo(x-1,y+38,x-2,y+49,x,y+58);},1.5,.54,2,1002);
-      line(x-38,y+82,x+39,y+82,1.2,.42,1003);
-    }
-    function drawPeople(x,y) {
-      const people=[[-38,3,20],[0,-7,24],[41,4,19]];
-      people.forEach((p,i)=>{
-        ellipse(x+p[0],y+p[1]-p[2]*1.8,p[2]*.36,p[2]*.36,1.4,.55,1050+i);
-        pencil(()=>{
-          g.beginPath();
-          g.moveTo(x+p[0],y+p[1]-p[2]*1.35);
-          g.lineTo(x+p[0],y+p[1]+p[2]*.45);
-          g.moveTo(x+p[0]-p[2]*.65,y+p[1]-p[2]*.48);
-          g.lineTo(x+p[0]+p[2]*.65,y+p[1]-p[2]*.48);
-          g.moveTo(x+p[0],y+p[1]+p[2]*.45);
-          g.lineTo(x+p[0]-p[2]*.42,y+p[1]+p[2]*1.25);
-          g.moveTo(x+p[0],y+p[1]+p[2]*.45);
-          g.lineTo(x+p[0]+p[2]*.42,y+p[1]+p[2]*1.25);
-        },1.4,.55,2,1060+i);
-      });
-    }
-    function drawRightSymbols() {
-      drawBars(1062,554);
-      drawNetwork(835,670);
-      drawGlobe(1050,760,60);
-      drawPlant(748,865);
-      drawPeople(925,915);
-      ellipse(1114,890,9,9,1.2,.44,1100);
-      poly([[1110,899],[1120,925],[1104,925]],false,1.1,.4,1101);
-    }
-    function render() {
-      drawPaper();
-      dottedJourney();
-      drawChaos();
-      drawDoodles();
-      drawSunAndCloud();
-      drawRays();
-      drawMountain();
-      drawRightSymbols();
-      drawLens();
-    }
-    render();
-  </script>
-</body>
-</html>