luckiest-co 1.0.13 → 1.0.14

package/skills/luckiest-design-website/scripts/workspace.mjs

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+/**
+ * Resolve the scrollcraft workspace: the one directory that holds this user's
+ * builds and their fingerprint registry.
+ *
+ * The skill used to hardcode one author's repo layout, which meant the
+ * fingerprint gate dead-ended on every other machine. Nothing is hardcoded now.
+ * Resolution order, first hit wins:
+ *
+ *   1. SCROLLCRAFT_HOME              env var, absolute or relative to cwd
+ *   2. .scrollcraft.json             nearest one walking up from cwd,
+ *                                    { "workspace": "some/path" } relative to
+ *                                    the file that declares it
+ *   3. <project root>/scrollcraft    project root = nearest ancestor with .git,
+ *                                    otherwise cwd
+ *
+ * USAGE
+ *   node scripts/workspace.mjs                 print the workspace path
+ *   node scripts/workspace.mjs --json          print every resolved path
+ *   node scripts/workspace.mjs --ensure        create it and seed the registry
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const SKILL = path.resolve(HERE, "..");
+
+function findUp(startDir, predicate) {
+  let dir = path.resolve(startDir);
+  for (let i = 0; i < 12; i++) {
+    const hit = predicate(dir);
+    if (hit) return { dir, hit };
+    const up = path.dirname(dir);
+    if (up === dir) break;
+    dir = up;
+  }
+  return null;
+}
+
+export function resolveWorkspace(cwd = process.cwd()) {
+  if (process.env.SCROLLCRAFT_HOME) {
+    return { root: path.resolve(cwd, process.env.SCROLLCRAFT_HOME), via: "SCROLLCRAFT_HOME" };
+  }
+
+  const cfg = findUp(cwd, (d) => {
+    const p = path.join(d, ".scrollcraft.json");
+    return fs.existsSync(p) ? p : null;
+  });
+  if (cfg) {
+    let parsed = {};
+    try {
+      parsed = JSON.parse(fs.readFileSync(cfg.hit, "utf8"));
+    } catch (e) {
+      throw new Error(`.scrollcraft.json is not valid JSON: ${cfg.hit}\n  ${e.message}`);
+    }
+    if (parsed.workspace) {
+      return { root: path.resolve(cfg.dir, parsed.workspace), via: cfg.hit };
+    }
+  }
+
+  const git = findUp(cwd, (d) => (fs.existsSync(path.join(d, ".git")) ? d : null));
+  const base = git ? git.hit : path.resolve(cwd);
+  return { root: path.join(base, "scrollcraft"), via: git ? "project root (.git)" : "cwd" };
+}
+
+export function paths(cwd = process.cwd()) {
+  const { root, via } = resolveWorkspace(cwd);
+  return {
+    via,
+    workspace: root,
+    builds: path.join(root, "builds"),
+    lab: path.join(root, "lab"),
+    fingerprints: path.join(root, "FINGERPRINTS.md"),
+  };
+}
+
+export function ensure(cwd = process.cwd()) {
+  const p = paths(cwd);
+  fs.mkdirSync(p.builds, { recursive: true });
+  fs.mkdirSync(p.lab, { recursive: true });
+  let seeded = false;
+  if (!fs.existsSync(p.fingerprints)) {
+    const seed = path.join(SKILL, "templates", "FINGERPRINTS.md");
+    fs.copyFileSync(seed, p.fingerprints);
+    seeded = true;
+  }
+  return { ...p, seeded };
+}
+
+// ------------------------------------------------------------------- cli ----
+if (process.argv[1] && path.resolve(process.argv[1]) === path.resolve(fileURLToPath(import.meta.url))) {
+  const argv = process.argv.slice(2);
+  const p = argv.includes("--ensure") ? ensure() : paths();
+  if (argv.includes("--json")) {
+    console.log(JSON.stringify(p, null, 2));
+  } else if (argv.includes("--ensure")) {
+    console.log(p.workspace);
+    console.error(`  builds       ${p.builds}`);
+    console.error(`  registry     ${p.fingerprints}${p.seeded ? "  (seeded, empty)" : "  (already present)"}`);
+    console.error(`  resolved via ${p.via}`);
+  } else {
+    console.log(p.workspace);
+  }
+}

package/skills/luckiest-design-website/scripts/worldflight-assert.mjs

@@ -0,0 +1,273 @@
+#!/usr/bin/env node
+/**
+ * Worldflight rig assertions. Not a contact sheet: these are the mechanical
+ * claims the mode makes, checked one at a time.
+ *
+ *   node lab/worldflight-assert.mjs --url http://localhost:4520
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+const { chromium } = createRequire(path.join(process.cwd(), "package.json"))("playwright-core");
+
+const argv = process.argv.slice(2);
+const arg = (n, d) => { const i = argv.indexOf(n); return i > -1 && argv[i + 1] ? argv[i + 1] : d; };
+const URL = arg("--url", "http://localhost:4520");
+
+const CHROME = [
+  process.env.SCROLLCRAFT_CHROME,
+  // Windows
+  "C:/Program Files/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files/Microsoft/Edge/Application/msedge.exe",
+  // macOS
+  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+  "/Applications/Chromium.app/Contents/MacOS/Chromium",
+  "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
+  // Linux
+  "/usr/bin/google-chrome",
+  "/usr/bin/google-chrome-stable",
+  "/usr/bin/chromium",
+  "/usr/bin/chromium-browser",
+  "/snap/bin/chromium",
+].find((p) => p && fs.existsSync(p));
+
+let pass = 0, fail = 0;
+const ok = (name, cond, note = "") => {
+  if (cond) { pass++; console.log(`  PASS  ${name}${note ? "  " + note : ""}`); }
+  else { fail++; console.log(`  FAIL  ${name}${note ? "  " + note : ""}`); }
+};
+
+const browser = await chromium.launch({ executablePath: CHROME, headless: true });
+
+// ============================================================ desktop ======
+{
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
+  const errs = [];
+  page.on("console", (m) => { if (m.type() === "error") errs.push(m.text()); });
+  page.on("pageerror", (e) => errs.push(String(e)));
+  await page.goto(URL, { waitUntil: "domcontentloaded" });
+  await page.waitForSelector("html.sc-ready", { timeout: 15000 });
+  await page.evaluate(() => document.fonts.ready);
+  await page.waitForTimeout(900);
+
+  const geom = await page.evaluate(() => {
+    const segs = [...document.querySelectorAll("[data-sc-segment]")];
+    const total = segs.reduce((s, el) => s + (parseFloat(el.dataset.scW) || 1.3), 0);
+    const spacer = document.querySelector("[data-sc-spacer]");
+    const stage = document.querySelector("[data-sc-world]");
+    return {
+      vh: innerHeight, total,
+      weights: segs.map((el) => parseFloat(el.dataset.scW) || 1.3),
+      spacerH: spacer.getBoundingClientRect().height,
+      wantH: Math.round((total + 1) * innerHeight),
+      docH: document.body.scrollHeight,
+      stagePos: getComputedStyle(stage).position,
+      stageRect: (({ top, left, width, height }) => ({ top, left, width, height }))(stage.getBoundingClientRect()),
+      copyPos: getComputedStyle(document.querySelector("[data-sc-world-copy]")).position,
+      seam: parseFloat(document.querySelector('[data-sc-mode="worldflight"]').dataset.scSeam),
+    };
+  });
+  console.log(`\nDESKTOP  vh=${geom.vh}  weights=[${geom.weights}]  total=${geom.total}vh`);
+
+  ok("spacer height = (sum weights + 1) x vh",
+    Math.abs(geom.spacerH - geom.wantH) <= 1, `got ${Math.round(geom.spacerH)}px want ${geom.wantH}px`);
+  ok("document scroll height is the spacer",
+    Math.abs(geom.docH - geom.wantH) <= 2, `doc ${geom.docH}px`);
+  ok("stage is position:fixed and fills the viewport",
+    geom.stagePos === "fixed" && geom.stageRect.height === geom.vh && geom.stageRect.top === 0);
+  ok("copy layer is position:fixed", geom.copyPos === "fixed");
+
+  // Nothing in flow but the spacer: at any scroll position, the only static or
+  // relative element that extends past the fold is the spacer and its ancestors.
+  const flow = await page.evaluate(() => {
+    const bad = [];
+    document.querySelectorAll("body *").forEach((el) => {
+      const cs = getComputedStyle(el);
+      if (cs.position === "fixed" || cs.position === "absolute") return;
+      if (el.hasAttribute("data-sc-spacer") || el.hasAttribute("data-sc-mode")) return;
+      const r = el.getBoundingClientRect();
+      if (r.height > 4 && r.bottom > innerHeight + 4) {
+        bad.push(el.tagName + "." + (el.className || "").toString().slice(0, 30));
+      }
+    });
+    return bad;
+  });
+  ok("nothing in document flow but the spacer", flow.length === 0, flow.join(", "));
+
+  // ---- lerp convergence, inside one leg ----------------------------------
+  const seg0 = geom.weights[0];
+  const A = Math.round(0.10 * seg0 * geom.vh);
+  const B = Math.round(0.85 * seg0 * geom.vh);
+  await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), A);
+  await page.waitForTimeout(1400);
+
+  const trace = await page.evaluate(({ y }) => new Promise((res) => {
+    const v = document.querySelectorAll("[data-sc-segment] video")[0];
+    const clip = window.__sc.clips.find((c) => c.el === v);
+    const s = [];
+    scrollTo({ top: y, behavior: "instant" });
+    let n = 0;
+    (function f() {
+      s.push(+v.currentTime.toFixed(4));
+      if (++n < 70) requestAnimationFrame(f);
+      else res({ s, target: clip.target * (v.duration || 1), dur: v.duration, lerp: clip.lerp });
+    })();
+  }), { y: B });
+
+  const seq = trace.s;
+  const start = seq[0], end = seq[seq.length - 1];
+  const distinct = [...new Set(seq)];
+  const monotone = seq.every((v, i) => i === 0 || v >= seq[i - 1] - 1e-6);
+  const overshoot = Math.max(...seq) - trace.target;
+  console.log(`  playhead ${start.toFixed(3)}s -> ${end.toFixed(3)}s  target ${trace.target.toFixed(3)}s  lerp ${trace.lerp}  ${distinct.length} distinct values`);
+  ok("playhead is lerped, not written 1:1", distinct.length >= 4, `${distinct.length} distinct steps across 70 frames`);
+  ok("playhead is strictly monotone toward its target", monotone);
+  ok("playhead does not overshoot", overshoot <= 0.02, `max excess ${overshoot.toFixed(4)}s`);
+  ok("playhead converges on the target", Math.abs(end - trace.target) < 0.05,
+    `residual ${Math.abs(end - trace.target).toFixed(4)}s`);
+  ok("lerp rate is the 0.18 default", Math.abs(trace.lerp - 0.18) < 1e-9);
+
+  // ---- deadband: no seek thrash while the page is still -------------------
+  await page.waitForTimeout(900);
+  const seeks = await page.evaluate(() => new Promise((res) => {
+    let n = 0;
+    const vs = [...document.querySelectorAll("video")];
+    const h = () => n++;
+    vs.forEach((v) => v.addEventListener("seeked", h));
+    setTimeout(() => { vs.forEach((v) => v.removeEventListener("seeked", h)); res(n); }, 1000);
+  }));
+  ok("deadband holds: no seeks over 1s of stillness", seeks === 0, `${seeks} seeked events`);
+
+  // ---- crossfade band ----------------------------------------------------
+  const boundary = seg0 * geom.vh;
+  const half = (geom.seam / 2) * geom.vh;
+  const band = [];
+  for (let i = 0; i < 5; i++) {
+    const y = Math.round(boundary - half + (2 * half) * (i / 4));
+    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
+    await page.waitForTimeout(120);
+    band.push(await page.evaluate(() => {
+      const segs = [...document.querySelectorAll("[data-sc-segment]")];
+      return segs.map((s) => +(parseFloat(getComputedStyle(s).opacity) || 0).toFixed(4));
+    }));
+  }
+  const incoming = band.map((b) => b[1]);
+  const outgoing = band.map((b) => b[0]);
+  console.log(`  seam band  incoming=[${incoming}]  outgoing=[${outgoing}]`);
+  ok("incoming leg opacity is strictly monotone across the seam",
+    incoming.every((v, i) => i === 0 || v > incoming[i - 1]));
+  ok("incoming leg starts at 0 and ends at 1", incoming[0] <= 0.02 && incoming[4] >= 0.98);
+  // The outgoing leg must hold at full strength for the whole dissolve and only
+  // release once the incoming one covers it completely. A crossfade where BOTH
+  // sides are partly transparent shows the page ground through the middle of
+  // the seam, which is the flash this mode exists to remove.
+  ok("outgoing leg holds full opacity while the incoming one is still arriving",
+    incoming.every((v, i) => v >= 0.999 || outgoing[i] >= 0.999), `[${outgoing}]`);
+  ok("outgoing leg only releases once it is fully covered",
+    outgoing[4] === 0 && incoming[4] >= 0.999);
+
+  // ---- copy transform cap ------------------------------------------------
+  const maxT = [];
+  for (let i = 0; i <= 12; i++) {
+    const y = Math.round((geom.docH - geom.vh) * (i / 12));
+    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
+    await page.waitForTimeout(60);
+    maxT.push(await page.evaluate(() => {
+      let m = 0;
+      document.querySelectorAll("[data-sc-copy]").forEach((el) => {
+        const t = new DOMMatrixReadOnly(getComputedStyle(el).transform);
+        m = Math.max(m, Math.abs(t.m42), Math.abs(t.m41));
+      });
+      return +m.toFixed(2);
+    }));
+  }
+  const worstT = Math.max(...maxT);
+  ok("copy never translates past 4vh", worstT <= geom.vh * 0.04 + 1,
+    `worst ${worstT}px, cap ${(geom.vh * 0.04).toFixed(0)}px`);
+
+  // ---- every leg reaches full opacity, every clip leaves its poster -------
+  const reach = {};
+  for (let i = 0; i <= 24; i++) {
+    const y = Math.round((geom.docH - geom.vh) * (i / 24));
+    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
+    await page.waitForTimeout(260);
+    const s = await page.evaluate(() => [...document.querySelectorAll("[data-sc-segment]")].map((el, i) => ({
+      i, op: parseFloat(getComputedStyle(el).opacity) || 0,
+      painted: el.classList.contains("sc-has-clip"),
+    })));
+    s.forEach((x) => {
+      reach[x.i] = reach[x.i] || { op: 0, painted: false };
+      reach[x.i].op = Math.max(reach[x.i].op, x.op);
+      reach[x.i].painted = reach[x.i].painted || x.painted;
+    });
+  }
+  ok("every leg reaches full opacity",
+    Object.values(reach).every((r) => r.op >= 0.99),
+    Object.entries(reach).map(([i, r]) => `${i}:${r.op.toFixed(2)}`).join(" "));
+  ok("every leg paints a real frame (no clip stuck on poster)",
+    Object.values(reach).every((r) => r.painted),
+    Object.entries(reach).map(([i, r]) => `${i}:${r.painted ? "clip" : "POSTER"}`).join(" "));
+
+  ok("no console errors", errs.length === 0, errs.slice(0, 3).join(" | "));
+  await page.close();
+}
+
+// ==================================================== reduced motion =======
+{
+  const page = await browser.newPage({
+    viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1, reducedMotion: "reduce",
+  });
+  const media = [];
+  page.on("request", (r) => { if (/\.(mp4|webm)(\?|$)/.test(r.url())) media.push(r.url()); });
+  await page.goto(URL, { waitUntil: "domcontentloaded" });
+  await page.waitForSelector("html.sc-ready", { timeout: 15000 });
+  await page.waitForTimeout(800);
+  console.log("\nREDUCED MOTION");
+
+  const rmSeen = { legs: {}, copy: {} };
+  for (let i = 0; i <= 20; i++) {
+    const h = await page.evaluate(() => document.body.scrollHeight - innerHeight);
+    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), Math.round(h * (i / 20)));
+    await page.waitForTimeout(90);
+    const s = await page.evaluate(() => ({
+      legs: [...document.querySelectorAll("[data-sc-segment]")].map((el) => ({
+        op: parseFloat(getComputedStyle(el).opacity) || 0,
+        poster: (() => { const p = el.querySelector(".sc-world__poster"); return p ? getComputedStyle(p).transform : "none"; })(),
+      })),
+      copy: [...document.querySelectorAll("[data-sc-copy]")].map((el) => ({
+        t: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 24),
+        op: parseFloat(getComputedStyle(el).opacity) || 0,
+        tf: getComputedStyle(el).transform,
+      })),
+    }));
+    s.legs.forEach((l, k) => {
+      rmSeen.legs[k] = rmSeen.legs[k] || { op: 0, tf: new Set() };
+      rmSeen.legs[k].op = Math.max(rmSeen.legs[k].op, l.op);
+      rmSeen.legs[k].tf.add(l.poster);
+    });
+    s.copy.forEach((c) => {
+      rmSeen.copy[c.t] = rmSeen.copy[c.t] || { op: 0, tf: new Set() };
+      rmSeen.copy[c.t].op = Math.max(rmSeen.copy[c.t].op, c.op);
+      rmSeen.copy[c.t].tf.add(c.tf);
+    });
+  }
+  await page.waitForTimeout(500);
+
+  ok("no clip is ever fetched", media.length === 0, media.join(", "));
+  ok("every leg's poster still reaches full opacity",
+    Object.values(rmSeen.legs).every((l) => l.op >= 0.99),
+    Object.entries(rmSeen.legs).map(([i, l]) => `${i}:${l.op.toFixed(2)}`).join(" "));
+  ok("no poster transform",
+    Object.values(rmSeen.legs).every((l) => [...l.tf].every((t) => t === "none")));
+  ok("every copy block still reaches full opacity",
+    Object.values(rmSeen.copy).every((c) => c.op >= 0.99),
+    Object.entries(rmSeen.copy).map(([t, c]) => `${c.op.toFixed(2)} "${t}"`).join(" | "));
+  ok("no copy transform",
+    Object.values(rmSeen.copy).every((c) => [...c.tf].every((t) => t === "none")));
+  await page.close();
+}
+
+await browser.close();
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

package/skills/luckiest-design-website/templates/FINGERPRINTS.md

@@ -0,0 +1,65 @@
+# Fingerprints
+
+Every site you build with **luckiest-design-website** gets one row here, appended after it
+ships. The registry exists so your next build can prove it is a different page
+rather than a re-skin of one you already made.
+
+This file is **yours**. It starts empty on purpose: the gate is about not
+repeating *yourself*, so it has nothing to say until you have built something.
+
+The rules and the gate live in the skill's
+`references/uniqueness.md`. Short version:
+
+**A new build must differ from EVERY row below on at least 4 of the 6
+dimensions.** Four against each row individually, not four on average across the
+table. If a planned build fails, change the plan. Never edit a row to make room
+for it.
+
+The six dimensions are: **grammar**, **nav treatment**, **hero device**,
+**act-sequence shape**, **close pattern**, **signature move**.
+
+Dimension 6 is free, because a signature move is unique by definition. So the
+gate really asks for three more out of the remaining five, and a build that
+changes only grammar and world will fail it.
+
+---
+
+## The registry
+
+| Build | Grammar | Nav treatment | Hero device | Act-sequence shape | Close pattern | Signature move | World | Port |
+|---|---|---|---|---|---|---|---|---|
+
+*(empty: your first build has nothing to clear, so build whatever the interview
+points at. From the second onwards, this table is the constraint.)*
+
+---
+
+## What is taken
+
+Add a bullet here whenever a build claims something a later build should avoid
+reusing: a grammar, a nav treatment, a close pattern, a signature move, an
+act-count-and-length band. The shared columns are what the next build inherits
+as a constraint, so writing them down is the whole point.
+
+Nothing is taken yet.
+
+---
+
+## Appending a row
+
+After shipping, add one line to the table and one bullet to **What is taken** if
+the build claimed something new. Fill every column. Say what the build shares
+with existing rows.
+
+Rows are append-only. A build that has been superseded stays in the table,
+because the space it occupies is still occupied.
+
+---
+
+## Worked example
+
+The skill's author kept a registry of twelve builds across eight page grammars.
+If you want to see what a filled-in table looks like, and which shapes tend to
+collide, read `EXAMPLES.md` in the luckiest-design-website repository. Treat it as
+illustration only: those rows are somebody else's builds and they do **not**
+constrain yours.