@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/package.json

@@ -1,6 +1,229 @@
-{
-  "name": "@tryvitris/website-harness",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@tryvitris/website-harness",
+  "version": "0.1.0-beta.5",
+  "description": "Vitris agent harness for building and verifying customer websites, with a static compiler, media tools, and optional Cloudflare backend.",
+  "type": "module",
+  "exports": {
+    "./icons": {
+      "types": "./bin/types/src/icons/index.d.ts",
+      "import": "./bin/api/icons.js"
+    },
+    ".": {
+      "types": "./bin/types/src/build/index.d.ts",
+      "import": "./bin/api/index.js"
+    },
+    "./render": {
+      "types": "./bin/types/src/render.d.ts",
+      "import": "./bin/api/render.js"
+    },
+    "./theme": {
+      "types": "./bin/types/src/theme.d.ts",
+      "import": "./bin/api/theme.js"
+    },
+    "./schema": {
+      "types": "./bin/types/src/schema.d.ts",
+      "import": "./bin/api/schema.js"
+    },
+    "./types": {
+      "types": "./bin/types/src/types.d.ts",
+      "import": "./bin/api/types.js"
+    },
+    "./agent/graph": {
+      "types": "./bin/types/src/agent/graph.d.ts",
+      "import": "./bin/api/agent/graph.js"
+    },
+    "./agent/grade": {
+      "types": "./bin/types/src/agent/grade.d.ts",
+      "import": "./bin/api/agent/grade.js"
+    },
+    "./agent/artifacts": {
+      "types": "./bin/types/src/agent/artifacts.d.ts",
+      "import": "./bin/api/agent/artifacts.js"
+    },
+    "./agent/evaluate": {
+      "types": "./bin/types/src/agent/evaluate.d.ts",
+      "import": "./bin/api/agent/evaluate.js"
+    },
+    "./cli": {
+      "types": "./bin/types/src/cli/index.d.ts",
+      "import": "./bin/api/cli.js"
+    },
+    "./cli/api": {
+      "types": "./bin/types/src/cli/api.d.ts",
+      "import": "./bin/api/cli/api.js"
+    },
+    "./contracts": {
+      "types": "./bin/types/src/engine/contracts.d.ts",
+      "import": "./bin/api/contracts.js"
+    },
+    "./engine": {
+      "types": "./bin/types/src/engine/index.d.ts",
+      "import": "./bin/api/engine.js"
+    },
+    "./hosting": {
+      "types": "./bin/types/src/integrations/hosting.d.ts",
+      "import": "./bin/api/hosting.js"
+    },
+    "./references": {
+      "types": "./bin/types/src/agent/reference-library.d.ts",
+      "import": "./bin/api/references.js"
+    }
+  },
+  "bin": {
+    "vitris": "bin/vitris.js",
+    "vitris-build": "bin/vitris-build.js",
+    "vitris-catalog": "bin/vitris-catalog.js",
+    "vitris-create-site": "bin/vitris-create-site.js",
+    "vitris-harvest": "bin/vitris-harvest.js",
+    "vitris-prepare-media": "bin/vitris-prepare-media.js",
+    "vitris-eval": "bin/vitris-eval.js",
+    "vitris-go": "bin/vitris-go.js",
+    "vitris-launch-preflight": "bin/vitris-launch-preflight.js",
+    "vitris-knowledge": "bin/vitris-knowledge.js",
+    "vitris-blocks": "bin/vitris-blocks.js",
+    "vitris-sign-publish-bundle": "bin/vitris-sign-publish-bundle.js",
+    "vitris-preview": "bin/vitris-preview.js",
+    "vitris-refresh": "bin/vitris-refresh.js",
+    "vitris-verify-browser": "bin/vitris-verify-browser.js",
+    "vitris-migrate-site": "bin/vitris-migrate-site.js",
+    "vitris-stock": "bin/vitris-stock.js",
+    "vitris-upgrade": "bin/vitris-upgrade.js",
+    "vitris-references": "bin/vitris-references.js",
+    "vitris-art": "bin/vitris-art.js",
+    "vitris-content-coverage": "bin/vitris-content-coverage.js",
+    "vitris-themes": "bin/vitris-themes.js",
+    "vitris-templates": "bin/vitris-templates.js",
+    "vitris-motion-view": "bin/vitris-motion-view.js",
+    "vitris-media-serve": "bin/vitris-media-serve.js",
+    "vitris-cursor-hook": "bin/vitris-cursor-hook.js",
+    "vitris-icons": "bin/vitris-icons.js",
+    "vitris-verify-performance": "bin/vitris-verify-performance.js"
+  },
+  "files": [
+    "bin/**/*.js",
+    "bin/types/**/*.d.ts",
+    "templates/site",
+    "agent",
+    "blocks",
+    "design-system/MASTER.md",
+    "design-system/knowledge",
+    "docs/CLI.md",
+    "docs/DISTRIBUTION.md",
+    "docs/ENGINE.md",
+    "docs/CLOUDFLARE.md",
+    "docs/CONTACT-FORMS.md",
+    "docs/PRESERVE.md",
+    "docs/STOCK-MEDIA.md",
+    "docs/SECURITY.md",
+    "LICENSE",
+    "NOTICE",
+    "CONTRIBUTING.md",
+    "src/runtime",
+    "cloudflare",
+    "migrations/*.sql",
+    "design-system/calibration/v2",
+    "licenses",
+    "src/stock/*.json",
+    "src/stock/*.css",
+    "src/stock/*.js",
+    "bin/cloudflare/*.wasm",
+    "design-system/compositions/v1",
+    "design-system/compositions/v2",
+    "design-system/references"
+  ],
+  "scripts": {
+    "build:cli": "node scripts/build-package.mjs",
+    "test:preserve": "node --experimental-strip-types --test --test-concurrency=1 src/preserve.test.ts src/preserve-batch.test.ts",
+    "prepack": "npm run build:cli && npm run audit:package",
+    "catalog": "node --experimental-strip-types scripts/catalog.ts",
+    "stock": "node --experimental-strip-types scripts/stock-library.ts",
+    "build:demo": "node --experimental-strip-types src/build/cli.ts --site src/test/fixtures/site --out dist/demo --slug demo",
+    "create-site": "node --experimental-strip-types scripts/create-site.ts",
+    "harvest": "node --experimental-strip-types scripts/harvest.ts",
+    "eval-refine": "node --experimental-strip-types scripts/eval-refine.ts",
+    "go": "node --experimental-strip-types scripts/workflow.ts",
+    "blocks:index": "node --experimental-strip-types scripts/write-blocks-index.ts",
+    "blocks:preview": "node --experimental-strip-types scripts/blocks-preview.ts",
+    "blocks:serve": "node --experimental-strip-types scripts/blocks-preview.ts --serve",
+    "dev": "npm run catalog && wrangler d1 migrations apply vitris --local --persist-to .wrangler/state && wrangler dev --local --persist-to .wrangler/state",
+    "db:migrate": "wrangler d1 migrations apply vitris --local --persist-to .wrangler/state",
+    "db:seed": "wrangler d1 execute vitris --local --persist-to .wrangler/state --file=migrations/0002_seed.sql",
+    "deploy": "wrangler deploy",
+    "preview:prepare": "node scripts/prepare-worker-preview.mjs",
+    "preview:worker": "wrangler preview --config .wrangler-preview.jsonc --ignore-base-config",
+    "typecheck": "tsc --noEmit",
+    "test": "node --experimental-strip-types --test --test-concurrency=4 src/icons.test.ts src/template-icon-migration.test.ts src/engine.test.ts src/upgrade.test.ts src/hosting.test.ts src/render.test.ts src/analytics.test.ts src/cookie-compliance.test.ts src/schema.test.ts src/patch.test.ts src/jobs.test.ts src/onboard.test.ts src/github-preview.test.ts src/agent.test.ts src/blocks.test.ts src/workflow.test.ts src/design-run.test.ts src/creative-profile.test.ts src/creative-efficiency.test.ts src/refine.test.ts src/critic-calibration.test.ts src/cli.test.ts src/jev.test.ts src/lifecycle.test.ts src/theme-lifecycle-policy.test.ts src/template-adaptation.test.ts src/adaptation-checkpoint.test.ts src/template-motion.test.ts src/template-motion-browser.test.ts src/experience-browser.test.ts src/jev-capabilities.test.ts src/jev-phase8.test.ts src/jev-prepilot.test.ts src/jev-phase0.test.ts src/jev-sept20.test.ts src/trace.test.ts src/cursor-hook.test.ts src/design-intelligence.test.ts src/design-context-integration.test.ts src/package-bin.test.ts src/knowledge-layers.test.ts src/launch-preflight.test.ts src/page-transfer.test.ts src/worker-publish.test.ts src/worker-preview.test.ts src/worker-security.test.ts src/harness-upgrades.test.ts src/stock-media.test.ts src/harness-distribution.test.ts src/storyboard-media.test.ts src/added-media.test.ts src/lead-forms.test.ts src/composition.test.ts src/reference-library.test.ts src/art-direction.test.ts src/scroll-motion.test.ts src/scroll-motion-browser.test.ts src/artistic-motion-browser.test.ts src/page-composition.test.ts src/reference-quality.test.ts src/production-quality.test.ts src/browser-focus.test.ts src/browser-work-queue.test.ts src/quality-subject.test.ts src/preview-cli.test.ts src/theme-selection.test.ts src/site-inputs.test.ts src/fieldwell.test.ts src/still-field.test.ts src/current-craft.test.ts src/copper-chair.test.ts src/clearline.test.ts src/template-cloud.test.ts src/contact-forms.test.ts src/contact-forms-operations.test.ts src/contact-forms-browser.test.ts src/preserve.test.ts src/release-safety.test.ts src/performance-media.test.ts src/lighthouse-browser.test.ts src/browser-timeout.test.ts src/browser-output-contract.test.ts src/template-motion-snapshot.test.ts",
+    "eval:jev": "node --experimental-strip-types scripts/eval-jev.ts",
+    "benchmark": "node --experimental-strip-types scripts/benchmark.ts",
+    "refresh-agent": "node --experimental-strip-types scripts/refresh-agent.ts",
+    "verify:browser": "node --experimental-strip-types scripts/verify-browser.ts",
+    "compare-sites": "node --experimental-strip-types scripts/compare-sites.ts",
+    "design-review": "node --experimental-strip-types scripts/design-review.ts",
+    "design-mcp": "node --experimental-strip-types scripts/design-mcp.ts",
+    "trial": "node --experimental-strip-types scripts/trial.ts",
+    "preview": "node --experimental-strip-types scripts/preview.ts",
+    "render:studies": "node --experimental-strip-types scripts/render-studies.ts",
+    "verify:package": "npm run build:cli && node --experimental-strip-types scripts/verify-package.ts",
+    "test:freeze": "node --experimental-strip-types scripts/freeze-test-baseline.ts",
+    "pretest": "node scripts/prepare-test-fixtures.mjs && npm run build:cli",
+    "stock:library": "node --experimental-strip-types scripts/stock-library.ts",
+    "stock:inspect": "python scripts/inspect-stock.py",
+    "references": "node --experimental-strip-types scripts/reference-library.ts",
+    "themes": "node --experimental-strip-types scripts/theme-selection.ts",
+    "templates": "node --experimental-strip-types scripts/templates.ts",
+    "templates:gallery": "node --experimental-strip-types scripts/template-gallery.ts",
+    "templates:artifact": "node --experimental-strip-types scripts/template-cloud-artifact.ts",
+    "audit:package": "node scripts/audit-package.mjs",
+    "prepublishOnly": "node scripts/guard-publish.mjs",
+    "icons": "node --experimental-strip-types scripts/icons.ts",
+    "icons:artifact": "node --experimental-strip-types scripts/icons.ts gallery",
+    "icons:gallery": "node --experimental-strip-types scripts/icons.ts gallery --serve",
+    "test:icons": "node --experimental-strip-types --test src/icons.test.ts",
+    "verify:icons": "node --experimental-strip-types scripts/verify-icons.ts",
+    "icons:review-industry-studio": "node --experimental-strip-types scripts/review-industry-studio.ts",
+    "templates:icons": "node --experimental-strip-types scripts/migrate-template-icons.ts",
+    "verify:performance": "node --experimental-strip-types scripts/verify-performance.ts"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^5.20260922.1",
+    "@types/node": "^24.3.0",
+    "esbuild": "^0.28.1",
+    "miniflare": "5.20260918.0-alpha",
+    "typescript": "^5.9.2",
+    "wrangler": "^4.152.0"
+  },
+  "dependencies": {
+    "@axe-core/playwright": "4.11.0",
+    "@typesafe-ai/sdk": "^0.6.0",
+    "blake3-wasm": "^2.1.5",
+    "parse5": "8.0.0",
+    "playwright": "^1.63.0",
+    "chrome-launcher": "1.2.1",
+    "lighthouse": "13.5.0",
+    "sharp": "0.35.5"
+  },
+  "overrides": {
+    "miniflare": {
+      "undici": "7.30.1",
+      "sharp": "0.35.5"
+    }
+  },
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jackperrotta/vitris-harness.git"
+  },
+  "homepage": "https://github.com/jackperrotta/vitris-harness#readme",
+  "bugs": {
+    "url": "https://github.com/jackperrotta/vitris-harness/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/runtime/beacon.ts

@@ -0,0 +1,329 @@
+/** Deferred first-party analytics beacon (shipped as beacon.js). */
+export const beaconJs = `(() => {
+  const kernel = document.documentElement.getAttribute("data-backend") || document.documentElement.getAttribute("data-kernel");
+  if (!kernel) return;
+
+  const endpoint = kernel.replace(/\\/$/, "") + "/api/t";
+  const gpc = navigator.globalPrivacyControl === true
+    || navigator.doNotTrack === "1"
+    || window.doNotTrack === "1";
+  const preview = location.pathname.match(/^\\/preview\\/([^/]+)/);
+  const src = preview ? "preview" : "live";
+  const path = location.pathname || "/";
+  const params = new URLSearchParams(location.search);
+  const started = Date.now();
+  let maxScroll = 0;
+  let engageCount = 0;
+  let left = false;
+  let pingTimer = 0;
+
+  const uuid = () => (crypto.randomUUID ? crypto.randomUUID() : "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+  }));
+
+  const readCookie = (name) => {
+    const parts = document.cookie.split("; ");
+    for (const part of parts) {
+      const i = part.indexOf("=");
+      if (i === -1) continue;
+      if (part.slice(0, i) === name) return decodeURIComponent(part.slice(i + 1));
+    }
+    return "";
+  };
+
+  const writeCookie = (name, value, days) => {
+    const maxAge = Math.floor(days * 86400);
+    const secure = location.protocol === "https:" ? "; Secure" : "";
+    document.cookie = name + "=" + encodeURIComponent(value)
+      + "; Path=/; Max-Age=" + maxAge + "; SameSite=Lax" + secure;
+  };
+
+  const clearCookie = (name) => {
+    const secure = location.protocol === "https:" ? "; Secure" : "";
+    document.cookie = name + "=; Path=/; Max-Age=0; SameSite=Lax" + secure;
+  };
+
+  const privacyHref = () => {
+    if (preview) return "/preview/" + preview[1] + "/cookie-compliance";
+    return "/cookie-compliance";
+  };
+
+  let consent = gpc ? "0" : (readCookie("vitris_cc") || "");
+  let allowCookie = !gpc && consent !== "0";
+
+  const uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+  let vid = "";
+
+  const ensureVid = () => {
+    if (!allowCookie) {
+      vid = "";
+      return;
+    }
+    vid = readCookie("vitris_vid");
+    if (!uuidRe.test(vid)) vid = uuid();
+    writeCookie("vitris_vid", vid, 395);
+  };
+  ensureVid();
+
+  const sidKey = "vitris_sid";
+  const sidAtKey = "vitris_sid_at";
+  let sid = "";
+  try {
+    const last = Number(sessionStorage.getItem(sidAtKey) || "0");
+    sid = sessionStorage.getItem(sidKey) || "";
+    if (!sid || !last || Date.now() - last > 30 * 60 * 1000) sid = uuid();
+    sessionStorage.setItem(sidKey, sid);
+    sessionStorage.setItem(sidAtKey, String(Date.now()));
+  } catch {
+    sid = uuid();
+  }
+
+  const touchSid = () => {
+    try { sessionStorage.setItem(sidAtKey, String(Date.now())); } catch (_) {}
+  };
+
+  const syncVidFields = () => {
+    document.querySelectorAll('form[data-lead-form] input[name="vid"]').forEach((el) => {
+      el.value = vid || "";
+    });
+  };
+  syncVidFields();
+
+  const send = (payload) => {
+    const body = new URLSearchParams();
+    for (const [k, v] of Object.entries(payload)) {
+      if (v == null || v === "") continue;
+      body.set(k, String(v));
+    }
+    if (preview) body.set("slug", preview[1]);
+    if (vid) body.set("vid", vid);
+    body.set("sid", sid);
+    body.set("src", src);
+    body.set("path", path);
+    if (navigator.sendBeacon && navigator.sendBeacon(endpoint, body)) return;
+    try {
+      fetch(endpoint, { method: "POST", body, keepalive: true, credentials: "omit", mode: "cors" }).catch(() => {});
+    } catch (_) {}
+  };
+
+  let referrerHost = "";
+  try {
+    if (document.referrer) referrerHost = new URL(document.referrer).hostname.replace(/^www\\./, "");
+  } catch (_) {}
+
+  send({
+    kind: "pageview",
+    referrer: referrerHost,
+    utm_medium: params.get("utm_medium") || "",
+    utm_source: params.get("utm_source") || "",
+    hour: String(new Date().getHours()),
+  });
+
+  const measureScroll = () => {
+    const doc = document.documentElement;
+    const bodyEl = document.body;
+    const height = Math.max(doc.scrollHeight, bodyEl ? bodyEl.scrollHeight : 0, 1);
+    const view = window.innerHeight || doc.clientHeight || 0;
+    const top = window.scrollY || doc.scrollTop || 0;
+    const pct = Math.min(100, Math.round(((top + view) / height) * 100));
+    if (pct > maxScroll) maxScroll = pct;
+  };
+  measureScroll();
+  let scrollRaf = 0;
+  window.addEventListener("scroll", () => {
+    if (scrollRaf) return;
+    scrollRaf = requestAnimationFrame(() => {
+      scrollRaf = 0;
+      measureScroll();
+      touchSid();
+    });
+  }, { passive: true });
+
+  const leave = () => {
+    if (left) return;
+    left = true;
+    measureScroll();
+    const duration = Math.min(30 * 60 * 1000, Math.max(0, Date.now() - started));
+    send({ kind: "leave", duration_ms: String(duration), scroll_pct: String(maxScroll) });
+    stopPing();
+  };
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") leave();
+    else if (allowCookie) {
+      startPing();
+      sendPing();
+    }
+  });
+  window.addEventListener("pagehide", leave);
+
+  const isMaps = (href) => {
+    const h = (href || "").toLowerCase();
+    return h.includes("google.com/maps") || h.includes("maps.google.")
+      || h.includes("maps.apple.com") || h.includes("bing.com/maps") || h.includes("goo.gl/maps");
+  };
+
+  const labelOf = (el) => {
+    if (!el) return "";
+    const raw = (el.getAttribute("aria-label") || el.getAttribute("alt") || el.textContent || "")
+      .replace(/\\s+/g, " ").trim();
+    return raw.slice(0, 40);
+  };
+
+  const hrefPath = (href) => {
+    try { return new URL(href, location.href).pathname.slice(0, 200); }
+    catch (_) { return ""; }
+  };
+
+  document.addEventListener("click", (event) => {
+    const t = event.target;
+    if (!(t instanceof Element)) return;
+
+    if (t.closest("[data-cookie-accept]")) {
+      event.preventDefault();
+      acceptCookies();
+      return;
+    }
+    if (t.closest("[data-cookie-reject]")) {
+      event.preventDefault();
+      rejectCookies();
+      return;
+    }
+
+    touchSid();
+
+    const a = t.closest("a[href]");
+    if (a) {
+      const href = a.getAttribute("href") || "";
+      const low = href.toLowerCase();
+      if (low.startsWith("tel:")) {
+        send({ kind: "convert", goal: "tel", label: labelOf(a) });
+        return;
+      }
+      if (low.startsWith("mailto:")) {
+        send({ kind: "convert", goal: "mailto", label: labelOf(a) });
+        return;
+      }
+      if (isMaps(href)) {
+        send({ kind: "convert", goal: "maps", label: labelOf(a), href: hrefPath(href) });
+        return;
+      }
+    }
+
+    if (engageCount >= 25) return;
+
+    const carousel = t.closest("[data-quotes-prev], [data-quotes-next], [data-stage-prev], [data-stage-next]");
+    if (carousel) {
+      engageCount += 1;
+      send({ kind: "engage", action: "carousel", label: labelOf(carousel) });
+      return;
+    }
+
+    const navA = t.closest("[data-nav] a, .c-header__nav a, nav[aria-label='Primary'] a");
+    if (navA) {
+      engageCount += 1;
+      send({ kind: "engage", action: "nav", label: labelOf(navA), href: hrefPath(navA.getAttribute("href") || "") });
+      return;
+    }
+
+    const btn = t.closest("a.btn, button.btn, .btn-outline, .btn-arrow, .c-header__cta");
+    if (btn) {
+      if (btn.closest("form[data-lead-form]") && (btn.matches("button, [type='submit']"))) return;
+      engageCount += 1;
+      send({ kind: "engage", action: "btn", label: labelOf(btn), href: hrefPath(btn.getAttribute("href") || "") });
+      return;
+    }
+
+    if (t.closest("img") || (a && a.querySelector("img"))) {
+      const img = t.closest("img") || (a && a.querySelector("img"));
+      const link = (img && img.closest("a")) || a;
+      engageCount += 1;
+      send({
+        kind: "engage",
+        action: "img",
+        label: labelOf(img || link),
+        href: hrefPath(link && link.getAttribute ? link.getAttribute("href") || "" : ""),
+      });
+    }
+  }, true);
+
+  const sendPing = () => {
+    if (!allowCookie || document.visibilityState !== "visible") return;
+    send({ kind: "ping" });
+  };
+  const startPing = () => {
+    if (!allowCookie || pingTimer) return;
+    pingTimer = window.setInterval(sendPing, 15000);
+  };
+  const stopPing = () => {
+    if (!pingTimer) return;
+    clearInterval(pingTimer);
+    pingTimer = 0;
+  };
+  if (allowCookie) {
+    sendPing();
+    startPing();
+  }
+
+  const removeBanner = () => {
+    const el = document.getElementById("vitris-cookie-banner");
+    if (el) el.remove();
+  };
+
+  const acceptCookies = () => {
+    if (gpc) return;
+    consent = "1";
+    writeCookie("vitris_cc", "1", 395);
+    allowCookie = true;
+    ensureVid();
+    syncVidFields();
+    removeBanner();
+    if (document.visibilityState === "visible") {
+      startPing();
+      sendPing();
+    }
+  };
+
+  const rejectCookies = () => {
+    consent = "0";
+    writeCookie("vitris_cc", "0", 395);
+    clearCookie("vitris_vid");
+    vid = "";
+    allowCookie = false;
+    syncVidFields();
+    stopPing();
+    removeBanner();
+  };
+
+  if (!gpc && !consent) {
+    const banner = document.createElement("div");
+    banner.id = "vitris-cookie-banner";
+    banner.className = "c-cookie-banner";
+    banner.setAttribute("role", "dialog");
+    banner.setAttribute("aria-modal", "false");
+    banner.setAttribute("aria-labelledby", "vitris-cookie-title");
+    banner.setAttribute("aria-describedby", "vitris-cookie-desc");
+    banner.innerHTML = '<div class="c-cookie-banner__inner wrap">'
+      + '<div class="c-cookie-banner__copy">'
+      + '<p id="vitris-cookie-title" class="c-cookie-banner__title">Cookies on this site</p>'
+      + '<p id="vitris-cookie-desc" class="c-cookie-banner__text">'
+      + "We use a first-party cookie to understand visits and improve this website. "
+      + "You can accept or reject analytics cookies."
+      + "</p>"
+      + "</div>"
+      + '<div class="c-cookie-banner__actions">'
+      + '<button type="button" class="btn" data-cookie-accept>Accept</button>'
+      + '<button type="button" class="btn btn-ghost" data-cookie-reject>Reject</button>'
+      + '<a class="c-cookie-banner__more" href="' + privacyHref() + '">Learn more</a>'
+      + "</div>"
+      + "</div>";
+    const mount = () => {
+      if (!document.body || document.getElementById("vitris-cookie-banner")) return;
+      document.body.prepend(banner);
+    };
+    if (document.body) mount();
+    else document.addEventListener("DOMContentLoaded", mount);
+  }
+})();
+`;

package/src/runtime/before-after.ts

@@ -0,0 +1,48 @@
+/** Draggable before/after compare slider. */
+
+export const beforeAfterJs = `(() => {
+  const roots = [...document.querySelectorAll("[data-island=\\"before-after\\"]")];
+  for (const root of roots) {
+    if (!(root instanceof HTMLElement)) continue;
+    const after = root.querySelector(".before-after__after");
+    const handle = root.querySelector(".before-after__handle");
+    if (!(after instanceof HTMLElement) || !(handle instanceof HTMLElement)) continue;
+
+    let dragging = false;
+    const setPos = (clientX) => {
+      const rect = root.getBoundingClientRect();
+      const pct = Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100));
+      after.style.clipPath = \`inset(0 0 0 \${pct}%)\`;
+      handle.style.left = \`\${pct}%\`;
+      root.setAttribute("aria-valuenow", String(Math.round(pct)));
+    };
+
+    const onMove = (e) => {
+      if (!dragging) return;
+      const x = "touches" in e ? e.touches[0].clientX : e.clientX;
+      setPos(x);
+    };
+    const stop = () => { dragging = false; };
+
+    root.addEventListener("pointerdown", (e) => {
+      dragging = true;
+      root.setPointerCapture?.(e.pointerId);
+      setPos(e.clientX);
+    });
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerup", stop);
+    root.addEventListener("pointercancel", stop);
+    root.addEventListener("keydown", (e) => {
+      if (!(e instanceof KeyboardEvent)) return;
+      const now = Number(root.getAttribute("aria-valuenow") || "50");
+      if (e.key === "ArrowLeft") setPos(root.getBoundingClientRect().left + ((now - 5) / 100) * root.clientWidth);
+      if (e.key === "ArrowRight") setPos(root.getBoundingClientRect().left + ((now + 5) / 100) * root.clientWidth);
+    });
+    root.setAttribute("role", "slider");
+    root.setAttribute("aria-valuemin", "0");
+    root.setAttribute("aria-valuemax", "100");
+    root.setAttribute("aria-valuenow", "50");
+    root.tabIndex = 0;
+  }
+})();
+`;

package/src/runtime/carousel.ts

@@ -0,0 +1,20 @@
+/** Buttoned, no-autoplay carousel with scroll-snap. */
+
+export const carouselJs = `(() => {
+  const roots = [...document.querySelectorAll("[data-island=\\"carousel\\"]")];
+  for (const root of roots) {
+    const track = root.querySelector(".carousel__track");
+    const prev = root.querySelector("[data-carousel-prev]");
+    const next = root.querySelector("[data-carousel-next]");
+    if (!(track instanceof HTMLElement)) continue;
+    const step = () => Math.max(track.clientWidth * 0.85, 240);
+    prev?.addEventListener("click", () => track.scrollBy({ left: -step(), behavior: "smooth" }));
+    next?.addEventListener("click", () => track.scrollBy({ left: step(), behavior: "smooth" }));
+    root.addEventListener("keydown", (e) => {
+      if (!(e instanceof KeyboardEvent)) return;
+      if (e.key === "ArrowLeft") track.scrollBy({ left: -step(), behavior: "smooth" });
+      if (e.key === "ArrowRight") track.scrollBy({ left: step(), behavior: "smooth" });
+    });
+  }
+})();
+`;