@struq/skill 0.5.1 → 0.5.3

package/skills/struq/blocks/showpieces/manifesto-scrub.tsx

@@ -7,14 +7,56 @@
 //
 // <ManifestoScrub text="Wij koken met wat de zee en het land die week geven, en verder niets." />
 //
+// The faint ink is never too faint to read: the words wait at the weakest strength of the ink that still holds 3:1
+// (display-size text) against the ground the section actually has, measured from the palette (about half strength on
+// a light ground, a little less on the inverse), and fill to full ink from there.
+// The section says its ground to the header bar: data-bar-tone "inverse" when a className sets scene-inverse,
+// "ground" otherwise.
+//
 // Reduced motion and phones: the composed still, the whole paragraph in full ink.
 import { useRef } from "react";
 import { gsap, useGSAP } from "../kit/gsap";
 
 type Props = { text: string; className?: string };
 
+/** Large text: WCAG 3:1. A little over it, so rounding never lands under. */
+const WAIT_RATIO = 3.1;
+
+const linear = (c: number) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+const contrast = (a: number, b: number) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+
+/** A colour's three sRGB channels (0 to 1), through a one-pixel canvas so every colour syntax resolves. */
+function channels(css: string): [number, number, number] | null {
+  const cv = document.createElement("canvas");
+  cv.width = 1;
+  cv.height = 1;
+  const ctx = cv.getContext("2d", { willReadFrequently: true });
+  if (!ctx) return null;
+  ctx.fillStyle = css;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  return [r / 255, g / 255, b / 255];
+}
+const luminance = ([r, g, b]: [number, number, number]) => 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+
+/** The weakest opacity of `ink` over `ground` (blended in sRGB, as the browser does) that holds WAIT_RATIO. */
+function waitingOpacity(ink: [number, number, number], ground: [number, number, number]) {
+  const g = luminance(ground);
+  const at = (a: number) => luminance(ink.map((c, i) => c * a + ground[i] * (1 - a)) as [number, number, number]);
+  if (contrast(at(1), g) < WAIT_RATIO) return 1;
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 16; i += 1) {
+    const mid = (lo + hi) / 2;
+    if (contrast(at(mid), g) >= WAIT_RATIO) hi = mid;
+    else lo = mid;
+  }
+  return Math.ceil(hi * 100) / 100;
+}
+
 export function ManifestoScrub({ text, className = "" }: Props) {
   const stage = useRef<HTMLElement>(null);
+  const tone = /(^|\s)scene-inverse(\s|$)/.test(className) ? "inverse" : "ground";
 
   useGSAP(
     () => {
@@ -23,12 +65,18 @@ export function ManifestoScrub({ text, className = "" }: Props) {
       const q = gsap.utils.selector(el);
       const mm = gsap.matchMedia();
       mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
-        gsap.set(q("[data-word]"), { opacity: 0.16 });
+        const words = q("[data-word]");
+        const p = q("p")[0] as HTMLElement | undefined;
+        const ink = p ? channels(getComputedStyle(p).color) : null;
+        const ground = channels(getComputedStyle(el).backgroundColor);
+        // 0.5 when the colours cannot be read: enough for 3:1 on every palette the canon ships.
+        const wait = ink && ground ? waitingOpacity(ink, ground) : 0.5;
+        gsap.set(words, { opacity: wait });
         const tl = gsap.timeline({
           defaults: { ease: "none" },
           scrollTrigger: { trigger: el, start: "top top", end: "+=200%", pin: true, scrub: 1 },
         });
-        q("[data-word]").forEach((node: Element, i: number) => {
+        words.forEach((node: Element, i: number) => {
           tl.to(node, { opacity: 1, duration: 0.3 }, i * 0.12);
         });
         tl.to({}, { duration: 0.6 });
@@ -39,7 +87,12 @@ export function ManifestoScrub({ text, className = "" }: Props) {
   );
 
   return (
-    <section ref={stage} data-showpiece="manifesto-scrub" className={`relative flex items-center bg-surface-0 px-6 py-32 md:min-h-svh md:px-[8vw] md:py-0 ${className}`}>
+    <section
+      ref={stage}
+      data-showpiece="manifesto-scrub"
+      data-bar-tone={tone}
+      className={`relative flex items-center bg-surface-0 px-6 py-32 md:min-h-svh md:px-[8vw] md:py-0 ${className}`}
+    >
       <p className="font-display max-w-[22ch] text-[9vw] leading-[1.02] tracking-[-0.025em] md:text-[5.2vw]">
         {text.split(/(\s+)/).map((w, j) => (w.trim() ? <span key={j} data-word="">{w}</span> : w))}
       </p>

package/skills/struq/blocks/showpieces/panel-wipe.tsx

@@ -8,9 +8,13 @@
 //
 // <PanelWipe image={images.band[0]} left="Vuur" right="Zout" caption="De oven brandt vanaf vier uur." />
 //
-// Reduced motion and phones: the composed still, both words above the full-bleed photo.
+// Both words share one size, fitted after the display face loads: each holds its own half with a clear gap at the
+// seam, so a long pair never runs together or off the edge. One word or a short phrase per side.
+//
+// Reduced motion and phones: the composed still, both words above the full-bleed photo (the second on its own line
+// when the pair is too long for one).
 import Image from "next/image";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 
@@ -25,9 +29,71 @@ type Props = {
   className?: string;
 };
 
+// Inline, because the kit balances display type (text-wrap), which would let a two-word word break inside itself.
+const NOWRAP = { whiteSpace: "nowrap", textWrap: "nowrap" } as React.CSSProperties;
+
+/** A word's width at 100px, its own padding included, on a fresh copy (the word itself may be mid-move). */
+function widthAt100(w: HTMLElement) {
+  const c = w.cloneNode(true) as HTMLElement;
+  Object.assign(c.style, { position: "absolute", left: "0", top: "0", visibility: "hidden", fontSize: "100px", display: "inline-block" });
+  w.parentElement?.appendChild(c);
+  const width = c.offsetWidth;
+  c.remove();
+  return width;
+}
+
+const contentWidth = (box: HTMLElement) => {
+  const cs = getComputedStyle(box);
+  return box.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
+};
+
 export function PanelWipe({ image, left, right, caption, close = true, className = "" }: Props) {
   const stage = useRef<HTMLElement>(null);
 
+  // Fit both words to one size that holds the width: in the panels each word inside its own half, in the still layout
+  // the longer word inside the line. Measured with the display face in, and again whenever the width or a face changes.
+  useEffect(() => {
+    const el = stage.current;
+    if (!el) return;
+    const panels = window.matchMedia("(min-width: 768px) and (prefers-reduced-motion: no-preference)");
+    const fit = () => {
+      const W = el.clientWidth;
+      if (!W) return;
+      const max = (W >= 768 ? 0.11 : 0.15) * W;
+      let size = max;
+      if (panels.matches) {
+        for (const side of ["[data-panel-left]", "[data-panel-right]"]) {
+          const box = el.querySelector<HTMLElement>(side);
+          const w = box?.querySelector<HTMLElement>("[data-pw-word]");
+          if (!box || !w) continue;
+          const width = widthAt100(w);
+          if (width > 0) size = Math.min(size, (100 * contentWidth(box)) / width);
+        }
+      } else {
+        const box = el.querySelector<HTMLElement>("[data-pw-still]");
+        if (box) {
+          const room = contentWidth(box);
+          for (const w of Array.from(box.querySelectorAll<HTMLElement>("[data-pw-word]"))) {
+            const width = widthAt100(w);
+            if (width > 0) size = Math.min(size, (100 * room) / width);
+          }
+        }
+      }
+      el.style.setProperty("--pw-size", `${Math.floor(size)}px`);
+    };
+    fit();
+    document.fonts?.ready.then(fit);
+    document.fonts?.addEventListener?.("loadingdone", fit);
+    panels.addEventListener("change", fit);
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      panels.removeEventListener("change", fit);
+      document.fonts?.removeEventListener?.("loadingdone", fit);
+    };
+  }, [left, right]);
+
   useGSAP(
     () => {
       const el = stage.current;
@@ -59,13 +125,23 @@ export function PanelWipe({ image, left, right, caption, close = true, className
     { scope: stage },
   );
 
-  const word = "font-display block text-[15vw] leading-[0.85] tracking-[-0.04em] md:text-[11vw]";
+  // Both words at one fitted size (--pw-size), never above 15vw on phones and 11vw on wider screens.
+  const word =
+    "font-display block w-fit leading-[0.85] tracking-[-0.04em] text-[length:var(--pw-size,15vw)] md:text-[length:var(--pw-size,11vw)]";
   return (
     <section ref={stage} data-showpiece="panel-wipe" className={`relative overflow-hidden bg-surface-0 motion-safe:md:h-svh ${className}`}>
-      {/* Still layout (phones, reduced motion): the words, then the photo. */}
-      <div className="flex justify-between px-6 pb-8 pt-24 md:hidden motion-reduce:md:flex">
-        <span className={word}>{left}</span>
-        <span className={word}>{right}</span>
+      {/* Still layout (phones, reduced motion): the words, then the photo. Side by side when both fit at the full
+          size, else the second word drops to its own line on the right; a gap of its own size keeps them apart. */}
+      <div
+        data-pw-still=""
+        className="flex flex-wrap justify-between gap-x-[0.3em] gap-y-[0.16em] px-sheet-margin pb-8 pt-24 text-[length:var(--pw-size,15vw)] md:hidden motion-reduce:md:flex md:text-[length:var(--pw-size,11vw)]"
+      >
+        <span data-pw-word="" className={word} style={NOWRAP}>
+          {left}
+        </span>
+        <span data-pw-word="" className={`${word} ml-auto`} style={NOWRAP}>
+          {right}
+        </span>
       </div>
       <div className="relative aspect-[4/5] overflow-hidden motion-safe:md:absolute motion-safe:md:inset-0 motion-safe:md:aspect-auto motion-reduce:md:aspect-[16/9]">
         <div data-photo="" className="absolute inset-0">
@@ -78,11 +154,17 @@ export function PanelWipe({ image, left, right, caption, close = true, className
           </p>
         ) : null}
       </div>
-      <div data-panel-left="" className="absolute inset-y-0 left-0 hidden w-[calc(50%+1px)] items-center justify-end bg-surface-0 pr-[1.5vw] motion-safe:md:flex">
-        <span className={word}>{left}</span>
+      {/* Each word holds its half: the page margin outside, and on the seam side a third of its own size, so the two
+          meet with a clear gap and never run together or off the edge. */}
+      <div data-panel-left="" className="absolute inset-y-0 left-0 hidden w-[calc(50%+1px)] items-center justify-end bg-surface-0 pl-sheet-margin motion-safe:md:flex">
+        <span data-pw-word="" className={`${word} pr-[0.3em]`} style={NOWRAP}>
+          {left}
+        </span>
       </div>
-      <div data-panel-right="" className="absolute inset-y-0 right-0 hidden w-[calc(50%+1px)] items-center justify-start bg-surface-0 pl-[1.5vw] motion-safe:md:flex">
-        <span className={word}>{right}</span>
+      <div data-panel-right="" className="absolute inset-y-0 right-0 hidden w-[calc(50%+1px)] items-center justify-start bg-surface-0 pr-sheet-margin motion-safe:md:flex">
+        <span data-pw-word="" className={`${word} pl-[0.3em]`} style={NOWRAP}>
+          {right}
+        </span>
       </div>
     </section>
   );

package/skills/struq/blocks/showpieces/wordmark-finale.tsx

@@ -2,8 +2,8 @@
 // toonstuk-wordmark-finale (Struq showpiece recipe)
 // The footer as a finale: the brand name set edge to edge at the full width of the page, its
 // letters rising out of a mask as the footer arrives, with one closing line and a live local clock
-// (or just the line) above it. The name is measured and fitted to the width, so it never wraps or
-// falls short, whatever the face.
+// (or just the line) above it. The name is measured and fitted to the width on one line, so it never
+// wraps or falls short, whatever the face, and its foot gets the room its own descenders need.
 // Every site can close with it; it pairs with any lead showpiece.
 //
 // <WordmarkFinale name="Zout" line="Tot vanavond." place="Amsterdam" timeZone="Europe/Amsterdam" />
@@ -41,23 +41,47 @@ export function WordmarkFinale({ name, line, place, timeZone, children, classNam
   const mark = useRef<HTMLParagraphElement>(null);
   const now = useClock(timeZone);
 
-  // Fit the name to the full width: measure once at 100px, then scale.
+  // Fit the name to the full width on one line: measure once at 100px, then scale. Then give the line box the room
+  // its own descenders need (g, j, y hang far below a 0.8 line), measured on this name in this face, so the footer's
+  // clip never cuts them; a name without descenders keeps its tight foot.
   useEffect(() => {
     const el = mark.current;
     const box = root.current;
     if (!el || !box) return;
+    const canvas = document.createElement("canvas").getContext("2d");
+    const foot = () => {
+      const cs = getComputedStyle(el);
+      const size = parseFloat(cs.fontSize) || 0;
+      let below = 0.35 * size;
+      if (canvas) {
+        canvas.font = `${cs.fontStyle} ${cs.fontWeight} ${size}px ${cs.fontFamily}`;
+        const m = canvas.measureText(name);
+        if (m.fontBoundingBoxAscent !== undefined && m.fontBoundingBoxDescent !== undefined) {
+          const lineH = parseFloat(cs.lineHeight) || 0.8 * size;
+          // From the baseline down to the line box's bottom edge, then how far the name's ink hangs past it.
+          const toEdge = (lineH - (m.fontBoundingBoxAscent + m.fontBoundingBoxDescent)) / 2 + m.fontBoundingBoxDescent;
+          below = m.actualBoundingBoxDescent - toEdge;
+        }
+      }
+      el.style.paddingBottom = `${Math.max(0, Math.ceil(below + 0.03 * size))}px`;
+    };
     const fit = () => {
       el.style.fontSize = "100px";
       const width = el.scrollWidth || 1;
       const style = getComputedStyle(box);
       const avail = box.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
       el.style.fontSize = `${Math.floor((100 * avail) / width)}px`;
+      foot();
     };
     fit();
     document.fonts?.ready.then(fit);
+    document.fonts?.addEventListener?.("loadingdone", fit);
     const ro = new ResizeObserver(fit);
     ro.observe(box);
-    return () => ro.disconnect();
+    return () => {
+      ro.disconnect();
+      document.fonts?.removeEventListener?.("loadingdone", fit);
+    };
   }, [name]);
 
   useGSAP(
@@ -99,7 +123,16 @@ export function WordmarkFinale({ name, line, place, timeZone, children, classNam
           </p>
         ) : null}
       </div>
-      <p ref={mark} data-wordmark="" aria-label={name} className="font-display mt-10 inline-block whitespace-nowrap leading-[0.8] tracking-[-0.04em]">
+      {/* One line, always: inline, because the kit balances display type (text-wrap), which would let a two-word name
+          wrap at the 100px measure and then collide at a 0.8 leading. The foot's room (0.35em) holds until the
+          script measures this name's own descenders. */}
+      <p
+        ref={mark}
+        data-wordmark=""
+        aria-label={name}
+        className="font-display mt-10 block w-fit pb-[0.35em] leading-[0.8] tracking-[-0.04em]"
+        style={{ whiteSpace: "nowrap", textWrap: "nowrap" } as React.CSSProperties}
+      >
         {name}
       </p>
     </footer>

package/skills/struq/canon/canon.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "Struq lib/canon",
     "ref": "origin/main",
-    "commit": "a538491"
+    "commit": "f98bd198"
   },
   "palettes": [
     {

package/skills/struq/references/art-direction.md

@@ -0,0 +1,51 @@
+# Art direction: the fresh pair of eyes
+
+You are the art director of a studio whose sites win Site of the Day. You did not build this one and you never see
+its code or its plan. You get the brief, the one-sentence idea, and the screenshots `look.mjs` saved, in scroll order,
+phone and wide. Judge what a visitor sees.
+
+Open every still. Then look for, in this order:
+
+1. **The idea.** From the first screen and the last alone, can you say what this site believes? Name any scene that
+   does not serve it.
+2. **The first screen.** Would it stop a juror scrolling a gallery of fifty? If it could open any client's site, say
+   what only this client's would show.
+3. **The subject.** Is what the client makes shown, and drawn with a maker's care: true proportions, the object's real
+   anatomy, a document set like the real thing, an app screen that looks used? A diagram, a grey card or an empty
+   frame where the subject should be is the first thing to fix.
+4. **Type.** Scale contrast, line length, a widow or orphan, a word or number broken across lines, text fighting a
+   photo, a heading off the grid.
+5. **Rhythm.** Two scenes with the same layout, a stretch where nothing new happens, a blank screen, an ending that
+   repeats the opening without adding to it.
+6. **Reflexes** a juror has seen a thousand times: one italic word in every headline; a giant sentence right after
+   the opening; a glossary of the trade; a labelled anatomy diagram; the name at full width as the close; a dot or
+   particle wave as the opening; one-word rows; a photo beside a paragraph.
+7. **Honesty.** A line that invents a fact, invites the visitor to a door the site never gives (an address, a number,
+   a link), speaks of a stock photo as the client's own, or promises something coming.
+
+Answer with at most five changes, the ones that would raise the site most, worst first, as a numbered list (1. to 5.).
+Each: the still's file name, what is wrong in one sentence, and what to build instead, concrete enough to build without
+asking. No scores, no praise, no general advice. If nothing would raise it, answer "Ship it."
+
+## What the builder does with it
+
+The asks are binding. Save them in `.struq/art-direction.md` under a heading for the round, each as its numbered item,
+and write one answer line under each, by the builder:
+
+```
+# Art direction, round 1
+
+1. desktop-00: the first screen could open any restaurant. Open on the room through the letterbox.
+   Built: the opener is HeroPoster with the room photo in the letterbox; the storyboard's Opening line is rewritten.
+2. desktop-09: "Schuif aan." invites to a door the site never gives. End on the idea.
+   Refused: the brief gave no address, booking or phone (rule 2), so the line is dropped and Assumptions names the door.
+```
+
+- **Build every ask.** When it needs another order, another opening or another centerpiece, rewrite the storyboard in
+  STRUQ.md and swap the blocks: the storyboard is rewritten for a good ask, never quoted against it. When it breaks a
+  budget (a pin, the quiet share, a second loud scene), keep the budget by dropping something else.
+- **Refuse only an ask that breaks a rule that never bends** (SKILL.md, the four rules) **or a fact of the brief** (a
+  price, an address, a programme the brief did not give), and the line says which.
+- **Never refuse on the storyboard, the plan, a budget or a block.** `check.mjs` fails an ask with no `Built:` or
+  `Refused:` line, and a refusal that cites only those.
+- A second round, from a new subagent, goes under its own heading in the same file.

package/skills/struq/scripts/blocks.mjs

@@ -16,9 +16,10 @@
 // Everything lands under components/struq/ in the layout of Struq's blocks/ (kit/, heroes/, sections/ ...), so the
 // relative imports between them hold. A layout or stylesheet you wrote yourself is never overwritten.
 import { spawnSync } from "node:child_process";
-import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync } from "node:fs";
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { projectHand } from "./draw.mjs";
 import { addRefusal, refuse } from "./gate.mjs";
 import { appendLog } from "./log.mjs";
 
@@ -96,31 +97,65 @@ function report(step, what) {
   appendLog(root, step, [what, ...(notes.length ? [`Notes: ${notes.join(" ")}`] : [])]);
 }
 
+/** A copy of a list in random order: the printed options carry no ranking, so their order must not suggest one. */
+function shuffled(list) {
+  const out = [...list];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+
+/**
+ * This site's five openings or centerpieces, from the project's hand (draw.mjs: dealt once by Struq's hand.mjs and kept
+ * in .struq/draw.json), so printing the arc again shows the same hand. Every opening hand holds one that needs no photo.
+ */
+function hand(role) {
+  const { hand: dealt } = projectHand(root);
+  return new Set(role === "opening" ? dealt.openings : dealt.centerpieces);
+}
+
+/** The blocks of a role in this site's hand, each with its variants and that variant's energy, e.g. `hero-poster:window E3`. */
+function pool(role) {
+  const dealt = hand(role);
+  return shuffled(CATALOG.filter((b) => b.role === role && !b.home && dealt.has(b.slug))).flatMap((b) => {
+    const variants = b.variants?.length ? b.variants.map((v) => v.id) : [null];
+    return variants.map((v) => {
+      const energy = (v && b.byVariant?.[v]?.energy) ?? b.energy ?? 0;
+      return `${b.slug}${v ? `:${v}` : ""} E${energy}`;
+    });
+  });
+}
+
 /**
- * A language's arc as STRUQ.md lines: the Tone arc, then one numbered Storyboard line per scene in the treatment's
- * format, the default pick filled in (the own scene first where the arc prefers it, as its kit quiet scene when it has
- * one, else the first block) and what else fits after `or:`. The defaults pass check.mjs --plan as they stand.
+ * A language's arc as STRUQ.md lines: the Tone arc, then one numbered Storyboard line per scene with no pick filled in.
+ * There is no default on purpose (proof runs of 2026-11-14: with the first option pre-filled, 11 of 12 sites on two
+ * unrelated briefs opened with the same hero and all 12 had the same centerpiece). Every slot says `<cast: ...>`, which
+ * the plan check refuses until it is replaced. The Opening and the Centerpiece list the whole catalogue of their role,
+ * since no opening or centerpiece belongs to one language; the middle scenes list what suits the language, plus an own
+ * scene. The arc's own suggestions are not ranked above the rest.
  */
-function arcLines(arc) {
-  const pick = (scene) => {
-    const own = scene.kit ?? "own scene";
-    const ownFirst = scene.own && (scene.ownFirst || !scene.blocks.length);
-    const options = ownFirst ? [own, ...scene.blocks] : [...scene.blocks, ...(scene.own ? [own] : [])];
-    if (scene.kit && scene.own && !options.includes("own scene")) options.push("own scene");
-    return options;
-  };
-  const width = Math.max(...arc.scenes.map((s) => s.name.length));
+function arcLines(arc, footers = []) {
   const last = arc.scenes.length - 1;
+  // The middle scenes carry no name of their own: names like Statement and Release read as a script, and every site
+  // that followed them came out with the same middle (Roy, 2026-11-15: the middle is composed per client).
+  const nameOf = (scene, at) => (scene.tag === "frame" || at === last || ["Opening", "Centerpiece"].includes(scene.name) ? scene.name : "Scene");
+  const width = Math.max(...arc.scenes.map((s, at) => nameOf(s, at).length));
   const lines = [`Tone arc: ${arc.scenes.map((s) => s.tone[0]).join(", ")}`, "Storyboard:"];
   arc.scenes.forEach((scene, at) => {
-    const [first, ...others] = pick(scene);
-    const head = `${`${at + 1}.`.padEnd(at + 1 >= 10 ? 4 : 3)}${scene.name.padEnd(width)} ${`(${scene.tag})`.padEnd(8)} ${first}`;
+    const role = scene.name === "Opening" ? "opening" : scene.name === "Centerpiece" ? "centerpiece" : null;
+    // An own scene first, then the language's blocks. The kit's quiet scenes are no longer offered.
+    const options = scene.tag === "frame" ? scene.blocks : role ? pool(role) : ["own scene", ...shuffled(scene.blocks)];
+    const tag = scene.tag === "frame" ? "frame" : "<loud|quiet>";
+    const cast = scene.tag === "frame" ? options[0] : at === last ? "<cast: how this site ends, and why>" : role ? "<cast: what this idea needs here, and why>" : "<cast: name this scene, what it shows of this client, and why>";
+    const head = `${`${at + 1}.`.padEnd(at + 1 >= 10 ? 4 : 3)}${nameOf(scene, at).padEnd(width)} (${tag}) ${cast}`;
     const parts = [head];
     if (scene.tag === "frame") parts.push("lands on: <what>");
-    else if (at === last) parts.push("echoes the opening: <how>");
+    else if (at === last) parts.push("ends on: <what the visitor is left with>");
     else parts.push("on screen: <...>", "enters: <...>", "hands over: <...>");
-    if (others.length) parts.push(`or: ${others.join(", ")}`);
-    if (scene.footer?.length) parts.push(`footer: ${scene.footer[0]}`);
+    if (scene.tag !== "frame" && options.length) parts.push(`options: ${options.join(", ")}`);
+    if (scene.footer?.length) parts.push(`footer: <${shuffled([...new Set([...scene.footer, ...footers])]).join(" | ")}>`);
     lines.push(parts.join(" | "));
   });
   return lines;
@@ -178,10 +213,11 @@ const commands = {
     const language = languages.find((l) => l.id === id);
     const arc = film.FILM_ARCS.find((a) => a.language === id);
     if (!language || !arc) throw new Error(`No language "${id}". The languages: ${languages.map((l) => l.id).join(", ")}.`);
-    for (const line of arcLines(arc)) console.log(line);
+    for (const line of arcLines(arc, film.FILM_ARCS.flatMap((a) => a.scenes.flatMap((s) => s.footer ?? [])))) console.log(line);
     const f = language.frames;
     console.log(`\nFrames of ${id}: preloader ${f.preloader}, page transition ${f.pageTransition} (only with a second route), menu ${f.menu}. Header: ${film.FILM_HEADER.join(" or ")}.`);
-    console.log(`Use: paste the Tone arc and the Storyboard into STRUQ.md under your treatment head, fill every <...>, keep one pick per line (or: lists what else fits), then run check.mjs --plan.`);
+    console.log(`The Opening and the Centerpiece options are this site's hand, dealt once (.struq/draw.json): cast from it; a block the client named goes outside it, marked (named) on its line.`);
+    console.log(`Use: paste the Tone arc and the Storyboard into STRUQ.md under your treatment head. Cast every <cast: ...> from the Idea, the Motif and the Unlike line, not from the order of the options: each option is a different first screen or moment (blocks/CATALOG.md says what each does). Write one pick per line with its reason after "because", delete the options list, set (loud) for E2 or more and (quiet) for E1 or less, and change, add or drop middle scenes as the idea needs (7 to 9 scenes, the budgets in SKILL.md hold). Then run check.mjs --plan.`);
   },
 
   add() {

package/skills/struq/scripts/canon.mjs

@@ -3,6 +3,7 @@
 // blocks read. The same block, derivation and font requests as Struq's block lab and the MCP's struq_richting
 // (scripts/tokens.mjs), from the snapshot in canon/canon.json that the skill's release copies from Struq.
 //
+//   node <skill-dir>/scripts/canon.mjs draw                       this site's hand: 2 languages, 3 pairings, 4 palettes
 //   node <skill-dir>/scripts/canon.mjs list                       every palette and pairing
 //   node <skill-dir>/scripts/canon.mjs palette <id>               writes the STRUQ TOKENS block in app/globals.css
 //   node <skill-dir>/scripts/canon.mjs type <id>                  the same block with the pairing, and app/fonts.ts
@@ -13,9 +14,11 @@
 // reply to the treatment (gate.mjs). list and print never ask.
 //
 // Node 18 or later, no network, no dependencies.
-import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { projectHand } from "./draw.mjs";
+import { HAND_LENSES } from "./hand.mjs";
 import { refuse, stopRefusal } from "./gate.mjs";
 import { appendLog } from "./log.mjs";
 import { fontHrefs, headFamily, lightness, paletteTokens } from "./tokens.mjs";
@@ -38,6 +41,7 @@ const pairing = (id) => {
   return t;
 };
 const faces = (t) => [t.display, t.body, t.accentItalic].filter(Boolean).map(headFamily);
+const shuffled = (list) => list.map((x) => [Math.random(), x]).sort((p, q) => p[0] - q[0]).map(([, x]) => x);
 
 export function tokenBlock(p, t) {
   const lines = paletteTokens(p, t).map(([k, v]) => `  ${k}: ${v};`);
@@ -83,18 +87,43 @@ export const fontHrefs: string[] = ${JSON.stringify(hrefs, null, 2)};
 
 const commands = {
   list() {
-    console.log(`PALETTES (${CANON.palettes.length}): id, mood, ground. "kept out" means kept for a brand that asks, never picked unasked.`);
-    for (const p of CANON.palettes) {
+    // Random order on every call: the first line is never a recommendation.
+    console.log(`PALETTES (${CANON.palettes.length}), in random order: id, mood, ground. "kept out" means kept for a brand that asks, never picked unasked.`);
+    for (const p of shuffled(CANON.palettes)) {
       const ground = lightness(p.colors.background) < 0.5 ? "dark" : "light";
       console.log(`  ${p.id.padEnd(40)} ${(p.mood ?? "").padEnd(44)} ${ground}${p.autoPick === false ? "  kept out" : ""}`);
     }
-    console.log(`\nPAIRINGS (${CANON.pairings.length}): id, display + body (+ italic accent), display weight`);
-    for (const t of CANON.pairings) {
+    console.log(`\nPAIRINGS (${CANON.pairings.length}), in random order: id, display + body (+ italic accent), display weight`);
+    for (const t of shuffled(CANON.pairings)) {
       const [d, bo, ac] = [t.display, t.body, t.accentItalic].map((s) => (s ? headFamily(s) : null));
       console.log(`  ${t.id.padEnd(26)} ${d} + ${bo}${ac ? ` (+ ${ac} italic)` : ""}, ${t.displayScale?.weight ?? 300}${t.autoPick === false ? "  kept out" : ""}`);
     }
     console.log(`\nSnapshot: Struq ${CANON.source.ref} ${CANON.source.commit}.`);
   },
+  // The hand this site chooses from (draw.mjs, dealt by Struq's hand.mjs): two languages, one light and one dark
+  // palette, two pairings, three openings and one centerpiece, saved to .struq/draw.json so the plan check holds
+  // the plan to it. Dealt once: drawing again shows the same hand.
+  draw() {
+    const { hand: draw, fresh } = projectHand(root);
+    const palettes = draw.palettes.map(palette);
+    const pairings = draw.pairings.map(pairing);
+    console.log(`Hand ${draw.id}${fresh ? "" : " (dealt before, the same hand)"}. Choose the Language, the Palette and the Type from it,`);
+    console.log("for the idea; only the client's own brand colours or faces go outside it, marked (brand) on the line.");
+    console.log(`Write "Hand: ${draw.id}" into STRUQ.md. blocks.mjs arc shows the hand's openings and centerpieces.\n`);
+    console.log(`LANGUAGES  ${draw.languages.join(", ")}\n`);
+    console.log("PALETTES");
+    for (const p of palettes) console.log(`  ${p.id.padEnd(40)} ${(p.mood ?? "").padEnd(44)} ${lightness(p.colors.background) < 0.5 ? "dark" : "light"}`);
+    console.log("\nPAIRINGS");
+    for (const t of pairings) {
+      const [d, bo, ac] = [t.display, t.body, t.accentItalic].map((s) => (s ? headFamily(s) : null));
+      console.log(`  ${t.id.padEnd(26)} ${d} + ${bo}${ac ? ` (+ ${ac} italic, optional)` : ""}, display weight ${t.displayScale?.weight ?? 300}`);
+    }
+    if (draw.lenses?.length) {
+      console.log("\nLENSES  where your three ideas start looking, one idea from each; the Idea line names its lens");
+      for (const id of draw.lenses) console.log(`  ${id.padEnd(14)} ${HAND_LENSES.find((lens) => lens.id === id)?.prompt ?? ""}`);
+    }
+    console.log("\nOK hand saved to .struq/draw.json");
+  },
   palette() {
     const p = palette(a);
     const t = pairing(current().type);
@@ -125,8 +154,8 @@ const commands = {
 
 if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
   const run = commands[cmd];
-  if (!run || (cmd !== "list" && !a)) {
-    console.error("Usage: canon.mjs list | palette <id> | type <id> | print <palette> [pairing]   [--dir <project>]");
+  if (!run || (cmd !== "list" && cmd !== "draw" && !a)) {
+    console.error("Usage: canon.mjs draw | list | palette <id> | type <id> | print <palette> [pairing]   [--dir <project>]");
     process.exit(2);
   }
   try {