@litfamily/litclaude 1.0.10 → 1.0.13

package/plugins/litclaude/skills/lit-typographic-motion/engine/stage/init.js

@@ -0,0 +1,288 @@
+// Stage init script: evaluated by the renderer before any page script (Page.addScriptToEvaluateOnNewDocument).
+// It replaces every clock the page can read with one virtual clock the renderer steps frame by frame,
+// seeds Math.random from the treatment, stubs the APIs a stage page may not use (recording each use),
+// and exposes the per-frame step as window.__litStep. The renderer substitutes __LIT_SEED__.
+(() => {
+  "use strict";
+  const SEED = __LIT_SEED__;
+  const EPOCH_MS = 1767225600000; // 2026-01-01T00:00:00Z: a fixed wall clock for Date
+  const V = { ms: 0 };
+  const violations = [];
+  const errors = [];
+  const record = (kind, name) => {
+    if (!violations.some((v) => v.kind === kind && v.name === name)) violations.push({ kind, name, atMs: V.ms });
+  };
+
+  // ---- the native frame source, kept before the page can replace it ----
+  const nativeRaf = window.requestAnimationFrame.bind(window);
+
+  // ---- Date and performance.now ----
+  const RealDate = Date;
+  function VDate(...args) {
+    if (!new.target) return new RealDate(EPOCH_MS + V.ms).toString();
+    return args.length ? new RealDate(...args) : new RealDate(EPOCH_MS + V.ms);
+  }
+  VDate.prototype = RealDate.prototype;
+  VDate.now = () => EPOCH_MS + V.ms;
+  VDate.parse = RealDate.parse;
+  VDate.UTC = RealDate.UTC;
+  Object.defineProperty(window, "Date", { value: VDate, configurable: true, writable: true });
+  Object.defineProperty(Performance.prototype, "now", { value: function now() { return V.ms; }, configurable: true, writable: true });
+  try {
+    Object.defineProperty(AnimationTimeline.prototype, "currentTime", { get() { return V.ms; }, configurable: true });
+  } catch (error) {
+    errors.push(`timeline: ${error.message}`);
+  }
+
+  // ---- Math.random, seeded (mulberry32) ----
+  let state = SEED >>> 0;
+  Math.random = function random() {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+
+  // ---- timers, rAF and idle callbacks on the virtual clock ----
+  let nextId = 1;
+  const timers = new Map();
+  const rafs = new Map();
+  const idles = new Map();
+  const toFn = (fn) => (typeof fn === "function" ? fn : () => (0, eval)(String(fn)));
+  window.setTimeout = (fn, ms = 0, ...args) => {
+    const id = nextId++;
+    timers.set(id, { due: V.ms + Math.max(0, Number(ms) || 0), fn: toFn(fn), args, every: null, seq: id });
+    return id;
+  };
+  window.setInterval = (fn, ms = 0, ...args) => {
+    const id = nextId++;
+    const every = Math.max(1, Number(ms) || 0);
+    timers.set(id, { due: V.ms + every, fn: toFn(fn), args, every, seq: id });
+    return id;
+  };
+  window.clearTimeout = (id) => { timers.delete(id); };
+  window.clearInterval = (id) => { timers.delete(id); };
+  window.requestAnimationFrame = (cb) => {
+    const id = nextId++;
+    rafs.set(id, cb);
+    return id;
+  };
+  window.cancelAnimationFrame = (id) => { rafs.delete(id); };
+  window.requestIdleCallback = (cb) => {
+    const id = nextId++;
+    idles.set(id, cb);
+    return id;
+  };
+  window.cancelIdleCallback = (id) => { idles.delete(id); };
+
+  const guard = (fn, ...args) => {
+    try {
+      fn(...args);
+    } catch (error) {
+      errors.push(String(error && error.stack ? error.stack : error).slice(0, 400));
+    }
+  };
+  function runTimers() {
+    for (let guardCount = 0; guardCount < 100000; guardCount++) {
+      let next = null;
+      for (const [id, t] of timers) if (t.due <= V.ms && (!next || t.due < next[1].due || (t.due === next[1].due && t.seq < next[1].seq))) next = [id, t];
+      if (!next) return;
+      const [id, t] = next;
+      if (t.every) t.due += t.every;
+      else timers.delete(id);
+      guard(t.fn, ...t.args);
+    }
+  }
+  function runRafs() {
+    const due = [...rafs.values()];
+    rafs.clear();
+    for (const cb of due) guard(cb, V.ms);
+    const idle = [...idles.values()];
+    idles.clear();
+    for (const cb of idle) guard(cb, { didTimeout: false, timeRemaining: () => 0 });
+  }
+
+  // ---- forbidden APIs: stubbed, and every use recorded ----
+  const forbid = (name, kind) => {
+    const stub = function () {
+      record(kind, name);
+      throw new Error(`lit stage: ${name} is not allowed on a stage page`);
+    };
+    try {
+      Object.defineProperty(window, name, { value: stub, configurable: true, writable: true });
+    } catch (error) {
+      errors.push(`stub ${name}: ${error.message}`);
+    }
+  };
+  for (const name of ["Audio", "AudioContext", "webkitAudioContext", "OfflineAudioContext", "Worker", "SharedWorker"]) forbid(name, "api");
+  for (const name of ["WebSocket", "WebTransport", "RTCPeerConnection", "webkitRTCPeerConnection"]) forbid(name, "network");
+  try {
+    if (navigator.serviceWorker) {
+      Object.defineProperty(navigator.serviceWorker, "register", { value: () => { record("api", "serviceWorker"); return Promise.reject(new Error("lit stage: service workers are not allowed")); }, configurable: true });
+    }
+  } catch (error) {
+    errors.push(`stub serviceWorker: ${error.message}`);
+  }
+  const FORBIDDEN_TAGS = new Set(["video", "audio", "iframe", "object", "embed", "frame"]);
+  const createElement = Document.prototype.createElement;
+  Document.prototype.createElement = function (tag, ...rest) {
+    if (FORBIDDEN_TAGS.has(String(tag).toLowerCase())) record("element", `<${String(tag).toLowerCase()}>`);
+    return createElement.call(this, tag, ...rest);
+  };
+  const createElementNS = Document.prototype.createElementNS;
+  Document.prototype.createElementNS = function (ns, tag, ...rest) {
+    const local = String(tag).split(":").pop().toLowerCase();
+    if (FORBIDDEN_TAGS.has(local)) record("element", `<${local}>`);
+    return createElementNS.call(this, ns, tag, ...rest);
+  };
+  const scanNode = (node) => {
+    if (node.nodeType !== 1) return;
+    const tag = node.localName;
+    if (FORBIDDEN_TAGS.has(tag)) record("element", `<${tag}>`);
+    for (const el of node.querySelectorAll?.("video,audio,iframe,object,embed,frame") ?? []) record("element", `<${el.localName}>`);
+  };
+  new MutationObserver((list) => {
+    for (const m of list) for (const n of m.addedNodes) scanNode(n);
+  }).observe(document, { childList: true, subtree: true });
+
+  // ---- WebGL use (exit 11 only when the page asks for it and gets nothing) and canvas text ----
+  let usesWebGL = false;
+  let webglMissing = false;
+  const getContext = HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.getContext = function (type, ...rest) {
+    const ctx = getContext.call(this, type, ...rest);
+    if (/^(?:webgl2?|experimental-webgl)$/u.test(String(type))) {
+      usesWebGL = true;
+      if (!ctx) webglMissing = true;
+    }
+    return ctx;
+  };
+  let canvasTextCalls = 0;
+  for (const method of ["fillText", "strokeText"]) {
+    const original = CanvasRenderingContext2D.prototype[method];
+    CanvasRenderingContext2D.prototype[method] = function (...args) {
+      canvasTextCalls += 1;
+      return original.apply(this, args);
+    };
+  }
+  window.addEventListener("error", (e) => errors.push(String(e.message).slice(0, 400)));
+  window.addEventListener("unhandledrejection", (e) => errors.push(`unhandled rejection: ${String(e.reason).slice(0, 400)}`));
+
+  // ---- animations: every one tracked with the virtual time it was first seen ----
+  const born = new Map();
+  const finished = new Set();
+  const svgBorn = new Map();
+  const drainMicrotasks = async () => {
+    for (let i = 0; i < 8; i++) await Promise.resolve();
+  };
+  const flushStyle = () => {
+    getComputedStyle(document.documentElement).getPropertyValue("opacity");
+    return document.documentElement.getBoundingClientRect();
+  };
+  const pendingDecodes = new Set();
+  const decoded = new WeakSet();
+  const decodeImages = () => {
+    for (const img of document.images) {
+      if (decoded.has(img)) continue;
+      decoded.add(img);
+      img.loading = "eager";
+      const p = img.decode().catch(() => {}).finally(() => pendingDecodes.delete(p));
+      pendingDecodes.add(p);
+    }
+  };
+
+  /**
+   * One frame at t = f / fps (computed from f, never accumulated). `paint` false skips the two native
+   * frames: the page's state still advances, but nothing is captured from this step.
+   */
+  async function step(f, fps, { paint: paintFrame = true } = {}) {
+    V.ms = (f / fps) * 1000;
+    const t = V.ms / 1000;
+    window.__litStageTexts = [];
+    canvasTextCalls = 0;
+    for (const [a, birth] of born) {
+      if (a.playState === "idle") {
+        born.delete(a);
+        continue;
+      }
+      if (finished.has(a)) continue;
+      const local = (t - birth) * 1000;
+      const end = a.effect ? a.effect.getComputedTiming().endTime : Infinity;
+      if (Number.isFinite(end) && local >= end) {
+        finished.add(a);
+        try {
+          a.finish();
+        } catch (error) {
+          errors.push(`finish: ${error.message}`);
+        }
+        await drainMicrotasks();
+      } else a.currentTime = local;
+    }
+    for (const svg of document.querySelectorAll("svg")) {
+      if (svg.ownerSVGElement) continue;
+      if (!svgBorn.has(svg)) {
+        svgBorn.set(svg, t);
+        svg.pauseAnimations();
+      }
+      svg.setCurrentTime(t - svgBorn.get(svg));
+    }
+    runTimers();
+    runRafs();
+    const spec = window.litStage;
+    if (spec && typeof spec.render === "function") guard(spec.render, t);
+    await drainMicrotasks();
+    flushStyle();
+    for (const a of document.getAnimations()) {
+      if (born.has(a)) continue;
+      a.pause();
+      born.set(a, t);
+      a.currentTime = 0;
+    }
+    decodeImages();
+    document.body?.offsetHeight;
+    await document.fonts.ready;
+    if (pendingDecodes.size) await Promise.all([...pendingDecodes]);
+    if (paintFrame) await new Promise((resolve) => nativeRaf(() => nativeRaf(resolve)));
+    return { t, violations: violations.length, errors: errors.length, canvasTextCalls, texts: window.__litStageTexts.length };
+  }
+
+  /** Before frame 0: load every served face, decode every stage raster, make every img eager. */
+  async function prepare({ faces = [], images = [] } = {}) {
+    const failedFaces = [];
+    for (const face of faces) {
+      try {
+        const loaded = await document.fonts.load(face.descriptor, face.sample || "Aa가");
+        if (!loaded.length) failedFaces.push(face.descriptor);
+      } catch {
+        failedFaces.push(face.descriptor);
+      }
+    }
+    const failedImages = [];
+    for (const src of images) {
+      const img = new Image();
+      img.src = src;
+      try {
+        await img.decode();
+      } catch {
+        failedImages.push(src);
+      }
+    }
+    for (const img of document.images) img.loading = "eager";
+    decodeImages();
+    if (pendingDecodes.size) await Promise.all([...pendingDecodes]);
+    await document.fonts.ready;
+    return { failedFaces, failedImages };
+  }
+
+  const paint = () => new Promise((resolve) => nativeRaf(() => nativeRaf(() => resolve(true))));
+
+  Object.defineProperty(window, "__litPaint", { value: paint, configurable: false, writable: false });
+  Object.defineProperty(window, "__litPrepare", { value: prepare, configurable: false, writable: false });
+  Object.defineProperty(window, "__litStep", { value: step, configurable: false, writable: false });
+  Object.defineProperty(window, "__litStageState", {
+    value: () => ({ violations: violations.slice(), errors: errors.slice(0, 20), usesWebGL, webglMissing, spec: window.litStage ? { width: window.litStage.width, height: window.litStage.height, fps: window.litStage.fps, duration: window.litStage.duration, render: typeof window.litStage.render } : null }),
+    configurable: false,
+    writable: false,
+  });
+})();

package/plugins/litclaude/skills/lit-typographic-motion/engine/stage/qa.js

@@ -0,0 +1,157 @@
+// Stage text-QA collector: evaluated only in the QA replay Chrome, never in the master. It reads the
+// page's text runs (DOM text grouped by the nearest text()-marked ancestor, else the nearest block
+// ancestor; ::before/::after content; registered canvas text) with their on-screen rects, opacity
+// chain and size, and switches the one "ink" rule that hides text colour for the A/B ink capture.
+(() => {
+  "use strict";
+  const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "TITLE", "HEAD"]);
+  const INLINE = /^(?:inline|inline-block|inline-flex|inline-grid|contents|ruby|ruby-text)$/u;
+  const W = () => document.documentElement.clientWidth || window.innerWidth;
+  const H = () => document.documentElement.clientHeight || window.innerHeight;
+  let nextRun = 1;
+  const runIds = new WeakMap();
+
+  const containerOf = (node) => {
+    const marked = node.parentElement?.closest("[data-lit-text]");
+    if (marked) return marked;
+    for (let el = node.parentElement; el; el = el.parentElement) {
+      if (el instanceof SVGElement) {
+        if (el.localName === "text") return el;
+        continue;
+      }
+      if (!INLINE.test(getComputedStyle(el).display)) return el;
+    }
+    return document.body;
+  };
+
+  const opacityChain = (el) => {
+    let o = 1;
+    for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+      const cs = getComputedStyle(e);
+      if (cs.visibility === "hidden" || cs.visibility === "collapse" || cs.display === "none") return 0;
+      o *= Number.parseFloat(cs.opacity);
+    }
+    return o;
+  };
+
+  const clipFor = (el) => {
+    let box = [0, 0, W(), H()];
+    for (let e = el.parentElement; e && e !== document.documentElement; e = e.parentElement) {
+      const cs = getComputedStyle(e);
+      if (/(hidden|clip|auto|scroll)/u.test(cs.overflow + cs.overflowX + cs.overflowY) || (cs.clipPath && cs.clipPath !== "none")) {
+        const r = e.getBoundingClientRect();
+        box = [Math.max(box[0], r.left), Math.max(box[1], r.top), Math.min(box[2], r.right), Math.min(box[3], r.bottom)];
+      }
+    }
+    return box;
+  };
+  const intersect = (r, c) => {
+    const x = [Math.max(r[0], c[0]), Math.max(r[1], c[1]), Math.min(r[2], c[2]), Math.min(r[3], c[3])];
+    return x[2] > x[0] && x[3] > x[1] ? x : null;
+  };
+
+  const scaleOf = (el) => {
+    if (el instanceof SVGGraphicsElement) {
+      const m = el.getScreenCTM();
+      return m ? Math.hypot(m.a, m.b) : 1;
+    }
+    const rect = el.getBoundingClientRect();
+    return el.offsetWidth > 0 ? rect.width / el.offsetWidth : 1;
+  };
+
+  function runs() {
+    const groups = new Map();
+    const walker = document.createTreeWalker(document.body || document.documentElement, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      if (!node.data.trim()) continue;
+      if (node.parentElement && SKIP.has(node.parentElement.tagName)) continue;
+      const c = containerOf(node);
+      if (!groups.has(c)) groups.set(c, []);
+      groups.get(c).push(node);
+    }
+    const out = [];
+    const add = (el, text, kind, rawRects, nodes = []) => {
+      if (!runIds.has(el)) runIds.set(el, nextRun++);
+      const id = runIds.get(el);
+      el.setAttribute("data-lit-run", String(id));
+      const clip = clipFor(el);
+      const rects = rawRects.map((r) => intersect(r, clip)).filter(Boolean);
+      const cs = getComputedStyle(el);
+      const fontSizePx = Number.parseFloat(cs.fontSize) || 0;
+      const scale = scaleOf(el);
+      out.push({
+        id, kind, text: text.replace(/\s+/gu, " ").trim(), decor: Boolean(el.closest("[data-lit-decor]")),
+        // A run is as visible as its most visible text: per-word opacity lives on the children.
+        rects, opacity: +(nodes.length ? Math.max(...nodes.map((n) => opacityChain(n.parentElement))) : opacityChain(el)).toFixed(3), fontSizePx: +(fontSizePx * scale).toFixed(2), capHeightPx: +(fontSizePx * scale).toFixed(2),
+        gradient: /text/u.test(cs.backgroundClip + (cs.webkitBackgroundClip ?? "")),
+      });
+    };
+    for (const [el, nodes] of groups) {
+      const rects = [];
+      for (const n of nodes) {
+        const range = document.createRange();
+        range.selectNodeContents(n);
+        for (const r of range.getClientRects()) if (r.width > 0 && r.height > 0) rects.push([r.left, r.top, r.right, r.bottom]);
+      }
+      add(el, nodes.map((n) => n.data).join(el.hasAttribute("data-lit-text") ? "" : " "), "dom", rects, nodes);
+    }
+    for (const el of document.querySelectorAll("body *")) {
+      for (const pseudo of ["::before", "::after"]) {
+        const content = getComputedStyle(el, pseudo).content;
+        if (!content || content === "none" || content === "normal") continue;
+        const text = content.replace(/^["']|["']$/gu, "").trim();
+        if (!text || /^(?:counter|attr|url)\(/u.test(content)) continue;
+        const r = el.getBoundingClientRect();
+        add(el, text, "pseudo", r.width > 0 && r.height > 0 ? [[r.left, r.top, r.right, r.bottom]] : []);
+      }
+    }
+    for (const t of window.__litStageTexts ?? []) {
+      const rect = [t.x, t.y, t.x + t.w, t.y + t.h];
+      const on = intersect(rect, [0, 0, W(), H()]);
+      out.push({ id: `canvas:${String(t.content).slice(0, 40)}`, kind: "canvas", text: String(t.content).replace(/\s+/gu, " ").trim(), decor: Boolean(t.decor), rects: on ? [on] : [], opacity: 1, fontSizePx: t.h, capHeightPx: t.h, gradient: false });
+    }
+    return out;
+  }
+
+  // ---- the ink rule (A/B capture) ----
+  const RULE = [
+    "[data-lit-ink]{color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke-color:transparent!important;text-decoration-color:transparent!important;text-emphasis-color:transparent!important}",
+    "[data-lit-ink]::before,[data-lit-ink]::after{color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke-color:transparent!important}",
+    "text[data-lit-ink],tspan[data-lit-ink],textPath[data-lit-ink]{fill:transparent!important;stroke:transparent!important}",
+    "[data-lit-bgclip]{background-image:none!important}",
+  ].join("\n");
+  let style = null;
+  let before = new Set();
+  function ink(on) {
+    if (on) {
+      before = new Set(document.getAnimations());
+      const walker = document.createTreeWalker(document.body || document.documentElement, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        if (node.data.trim() && node.parentElement && !SKIP.has(node.parentElement.tagName)) node.parentElement.setAttribute("data-lit-ink", "");
+      }
+      for (const el of document.querySelectorAll("body *")) {
+        const cs = getComputedStyle(el);
+        if (/text/u.test(cs.backgroundClip + (cs.webkitBackgroundClip ?? ""))) el.setAttribute("data-lit-bgclip", "");
+        for (const pseudo of ["::before", "::after"]) {
+          const content = getComputedStyle(el, pseudo).content;
+          if (content && content !== "none" && content !== "normal") el.setAttribute("data-lit-ink", "");
+        }
+      }
+      style = document.createElement("style");
+      style.textContent = RULE;
+      document.head.appendChild(style);
+    } else {
+      style?.remove();
+      style = null;
+      for (const el of document.querySelectorAll("[data-lit-ink],[data-lit-bgclip]")) {
+        el.removeAttribute("data-lit-ink");
+        el.removeAttribute("data-lit-bgclip");
+      }
+    }
+    getComputedStyle(document.documentElement).opacity;
+    for (const a of document.getAnimations()) if (!before.has(a)) a.cancel();
+    return window.__litPaint();
+  }
+
+  Object.defineProperty(window, "__litQa", { value: { runs, ink }, configurable: false });
+})();