@struq/skill 0.4.2 → 0.5.0

package/skills/struq/blocks/showpieces/hero-opener.tsx

@@ -9,22 +9,35 @@
 // <HeroOpener image={images.hero[0]} title="Koken op" accent="vuur." lead="..." cta={{ href: "#reserveren", label: "Reserveer een tafel" }} header={<SiteHeader />} />
 // <HeroOpener image={images.hero[0]} split={["Vuur", "Noord"]} lead="..." cta={...} />
 //
-// The line is the display face at poster size, with at most one italic accent word. The flat scrim
+// <HeroOpener image={images.hero[0]} title="Koken op vuur." accent="vuur" lead="..." cta={...} />
+//
+// The line is the display face at poster size, with at most one italic accent word: the site's one accent word, marked
+// in place when the title holds it (the same mark as the Statement and the Close, kept whole by SplitText's line cut),
+// or set after the title when it does not. The flat scrim
 // keeps the copy at 4.5:1; never a gradient. Reduced motion and phones: the composed still, no pin.
 // The section after the opener slides over it: globals.css gives it a ground and a higher layer.
+//
+// The entrance (the line rising through its masks, the split words, the lead and the CTA) waits for
+// any preloader or page transition to start leaving (whenUncovered, from the helper the frames share),
+// and plays at once when nothing covers the page.
 import { useRef } from "react";
+import { findAccent, withAccent } from "../kit/accent";
 import { HeroCanvas } from "../kit/HeroCanvas";
 import { MagneticButton } from "../kit/MagneticButton";
-import { SplitHeadline } from "../kit/SplitHeadline";
-import { gsap, useGSAP } from "../kit/gsap";
+import { SplitText, gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
+import { whenUncovered } from "../preloaders/preloader-slices-uncovered";
 
 type Props = {
   /** The beeldbank or client photo. Without one (imageFit "none"), the opener is typographic on the inverse ground over the dots scene. */
   image?: StruqImage;
   /** The poster line ("across"). */
   title?: string;
-  /** One word in the display face's italic, after the title. */
+  /**
+   * The site's one accent word, in the pairing's italic accent face. A word the title holds is marked where it first
+   * stands (whole word, any case, punctuation outside), as the Statement and the Close mark it; a word the title does
+   * not hold is set after the title, as before.
+   */
   accent?: string;
   /** Two words for the split wordmark; replaces title. */
   split?: [string, string];
@@ -46,6 +59,7 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
   // The lead goes on the photo's calm side; the CTA takes the other. Over a busy frame (no calm
   // side known) the lead gets a flat backing at a fixed opacity and is set a step larger.
   const side = calm ?? (image?.negativeSpace === "left" || image?.negativeSpace === "right" ? image.negativeSpace : image ? "none" : "left");
+  const inTitle = Boolean(title && findAccent(title, accent));
   const stage = useRef<HTMLElement>(null);
 
   useGSAP(
@@ -53,12 +67,48 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
       const el = stage.current;
       if (!el) return;
       const q = gsap.utils.selector(el);
+      const title = q("[data-opener-title]")[0] as HTMLElement | undefined;
       const mm = gsap.matchMedia();
+      mm.add("(prefers-reduced-motion: reduce)", () => {
+        if (!title) return;
+        title.dataset.ready = "1";
+        gsap.from(title, { autoAlpha: 0, duration: 0.6 });
+      });
       mm.add("(prefers-reduced-motion: no-preference)", () => {
+        // Every part is set in its start state now and the whole entrance plays once nothing covers the page.
+        let uncovered = false;
+        const intro = gsap.timeline({ paused: true });
         if (split) {
-          gsap.from(q("[data-split-word]"), { yPercent: 110, duration: 1.4, ease: "expo.out", stagger: 0.12, delay: 0.25 });
+          intro.from(q("[data-split-word]"), { yPercent: 110, duration: 1.4, ease: "expo.out", stagger: 0.12 }, 0.25);
         }
-        gsap.from(q("[data-opener-copy] > *"), { y: 32, autoAlpha: 0, duration: 1, ease: "expo.out", stagger: 0.1, delay: 0.7 });
+        intro.from(q("[data-opener-copy] > *"), { y: 32, autoAlpha: 0, duration: 1, ease: "expo.out", stagger: 0.1 }, 0.7);
+        // The poster line rises line by line through its masks, cut again when the width or the face changes (a cut
+        // after the entrance carries its progress over, so it never replays).
+        let lines: gsap.core.Timeline | null = null;
+        const cut = title
+          ? SplitText.create(title, {
+              type: "lines",
+              mask: "lines",
+              linesClass: "struq-line",
+              autoSplit: true,
+              onSplit(self) {
+                lines = gsap
+                  .timeline({ paused: !uncovered })
+                  .from(self.lines, { yPercent: 115, duration: 1.25, ease: "expo.out", stagger: 0.09 }, 0.15);
+                return lines;
+              },
+            })
+          : null;
+        if (title) title.dataset.ready = "1";
+        const stop = whenUncovered(() => {
+          uncovered = true;
+          intro.play();
+          lines?.play();
+        });
+        return () => {
+          stop();
+          cut?.revert();
+        };
       });
       mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
         // The handover: the opener holds, then scales down and darkens under the next section.
@@ -75,7 +125,9 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
 
   // At poster size the words need air of their own: tight tracking pulls the letters together, and
   // word spacing in em keeps the gap in step with the size for any face.
-  const poster = "font-display block text-[19vw] leading-[0.92] tracking-[-0.045em] [word-spacing:0.09em] md:text-[16vw]";
+  // The size sits on each word's mask too: the shared mask's room for accents and descenders is in its own em.
+  const size = "text-[19vw] md:text-[16vw]";
+  const poster = `font-display block ${size} leading-[0.92] tracking-[-0.045em] [word-spacing:0.09em]`;
   return (
     <section ref={stage} data-showpiece="hero-opener" className={`relative h-svh overflow-hidden ${image ? "bg-black text-on-photo" : "scene-inverse"} ${className}`}>
       <div data-opener-inner="" className="absolute inset-0 origin-top">
@@ -84,9 +136,9 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
         <div data-opener-dim="" aria-hidden className="absolute inset-0 bg-black opacity-0" />
         {header ? <div className="absolute inset-x-0 top-0 z-20">{header}</div> : null}
         {split ? (
-          <h1 aria-label={split.join(" ")} className="absolute inset-x-0 top-1/2 z-10 flex -translate-y-1/2 justify-between px-6 md:px-[3vw]">
+          <h1 aria-label={split.join(" ")} className="absolute inset-x-0 top-1/2 z-10 flex -translate-y-1/2 justify-between px-sheet-margin">
             {split.map((word) => (
-              <span key={word} className="block overflow-hidden pb-[0.06em]">
+              <span key={word} className={`struq-line-mask block ${size}`}>
                 <span data-split-word="" data-quiet="" className={poster}>
                   {word}
                 </span>
@@ -94,7 +146,7 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
             ))}
           </h1>
         ) : null}
-        <div className="absolute inset-x-0 bottom-0 z-10 flex flex-col gap-[3vh] px-6 pb-[3vh] md:px-[3vw]">
+        <div className="absolute inset-x-0 bottom-0 z-10 flex flex-col gap-[3vh] px-sheet-margin pb-[3vh]">
           <div data-opener-copy="" className={`flex flex-col gap-6 md:flex-row md:items-end md:justify-between ${side === "right" ? "md:flex-row-reverse md:text-right" : ""}`}>
             {side === "none" ? (
               <p data-quiet="" className="relative isolate max-w-[30ch] text-h3">
@@ -111,15 +163,22 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
             </div>
           </div>
           {!split && title ? (
-            <SplitHeadline as="h1" className={poster}>
-              {title}
-              {accent ? (
+            <h1 data-opener-title="" data-split="" data-quiet="" className={poster}>
+              {/* An accent the title holds is marked in place; any other accent is the trailing word, as it always was. */}
+              {inTitle ? (
+                withAccent(title, accent)
+              ) : (
                 <>
-                  {" "}
-                  <em className="font-accent font-light italic tracking-[-0.02em] [word-spacing:0.09em]">{accent}</em>
+                  {title}
+                  {accent ? (
+                    <>
+                      {" "}
+                      <em className="font-accent font-light italic tracking-[-0.02em] [word-spacing:0.09em]">{accent}</em>
+                    </>
+                  ) : null}
                 </>
-              ) : null}
-            </SplitHeadline>
+              )}
+            </h1>
           ) : null}
         </div>
       </div>

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

@@ -69,6 +69,8 @@ export function WordmarkFinale({ name, line, place, timeZone, children, classNam
         const split = SplitText.create(el, {
           type: "chars",
           mask: "chars",
+          // The shared mask (blocks.css): room for accents and descenders in every face.
+          charsClass: "struq-char",
           onSplit(self) {
             return gsap.from(self.chars, {
               yPercent: 105,
@@ -87,7 +89,7 @@ export function WordmarkFinale({ name, line, place, timeZone, children, classNam
   );
 
   return (
-    <footer ref={root} data-showpiece="wordmark-finale" className={`overflow-hidden bg-surface-0 px-6 pb-6 pt-24 md:px-[3vw] ${className}`}>
+    <footer ref={root} data-showpiece="wordmark-finale" className={`overflow-hidden bg-surface-0 px-sheet-margin pb-6 pt-24 ${className}`}>
       <div className="flex flex-col gap-6 border-t border-line pt-6 md:flex-row md:items-end md:justify-between">
         {line ? <p className="font-display text-h3 max-w-[24ch]">{line}</p> : <span />}
         {children}

package/skills/struq/blocks/transitions/zoom-through.tsx

@@ -465,15 +465,14 @@ export function ZoomThrough({
       >
         <h2 className={`font-display ${size} leading-[0.88] tracking-[-0.04em] [word-spacing:0.08em]`}>
           {heading.map((h) => (
-            <span
-              key={h}
-              className={`-mx-6 flex px-6 md:-mx-[5vw] md:px-[5vw] ${headRight ? "justify-end" : "justify-start"} ${
-                motion ? "overflow-hidden pb-[0.1em] -mb-[0.1em] group-data-[place=ground]/zt:pb-0 group-data-[place=ground]/zt:mb-0" : ""
-              }`}
-            >
+            <span key={h} className={`-mx-6 flex px-6 md:-mx-[5vw] md:px-[5vw] ${headRight ? "justify-end" : "justify-start"}`}>
+              {/* The ground band sits outside the shared line mask, so the mask's child paints no plate and a band
+                  never grows into the line above it. */}
               <span className={`block group-data-[place=ground]/zt:bg-surface-0 group-data-[place=ground]/zt:pb-[0.12em] group-data-[place=ground]/zt:pt-[0.08em] ${band}`}>
-                <span data-rise={motion ? "" : undefined} data-hline="" className="block whitespace-nowrap">
-                  {h}
+                <span className={`block ${motion ? "struq-line-mask" : ""}`}>
+                  <span data-rise={motion ? "" : undefined} data-hline="" className="block whitespace-nowrap">
+                    {h}
+                  </span>
                 </span>
               </span>
             </span>
@@ -488,14 +487,14 @@ export function ZoomThrough({
           }`}
         >
           {line ? (
-            <span className={`block max-w-[38ch] ${motion ? "overflow-hidden" : ""}`}>
+            <span className={`block max-w-[38ch] ${motion ? "struq-line-mask" : ""}`}>
               <span data-after={motion ? "" : undefined} className="block text-balance text-lead text-ink">
                 {line}
               </span>
             </span>
           ) : null}
           {caption ? (
-            <span className={`block ${motion ? "overflow-hidden" : ""}`}>
+            <span className={`block ${motion ? "struq-line-mask" : ""}`}>
               <span data-after={motion ? "" : undefined} className="block text-small text-ink-muted">
                 {caption}
               </span>

package/skills/struq/canon/canon.json

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

package/skills/struq/references/craft.md

@@ -56,6 +56,10 @@ catalogue does not have: your code has to hold the same bar or it shows as the s
   `document.fonts.ready` with the loaded face, and refitted on `loadingdone`. Never fit with the fallback face, and
   never ask Google for a weight the family does not ship: `canon.mjs type` requests each face's real range.
 - **Word spacing at poster size:** 0.06 to 0.1em on display lines, so tight tracking never runs two words into one.
+- **Descenders are never cut.** A mask that hides a rising line must leave room below the baseline for g, j, p and y
+  and above the cap line for accents: use `SplitHeadline` or the `.struq-line-mask` class, never `overflow-hidden`
+  on a heading. At poster size keep the leading at 1 or more in a serif and 0.95 or more in a sans; look at a line
+  with a g and a j in it before you call the type done.
 - One italic accent face at most, on one word of the page.
 - One fluid root-rem knob (`html { font-size: clamp(...) }` in globals.css): author in rem; breakpoints change the
   layout, never the size.

package/skills/struq/references/film.md

@@ -0,0 +1,158 @@
+# The film: treatments, worked
+
+SKILL.md holds the rules: the treatment template, the three languages, their arcs and the budgets. This file shows
+them filled in. Read it once before you write your first treatment.
+
+## The words
+
+**Treatment.** The head of STRUQ.md: the idea, the language, the motif, the lexicon, the centerpiece and the
+storyboard. It is the script of the site. Every block you install answers to a line of it; a block no line asks for
+does not go on the page.
+
+**Idea.** A point of view, not a description. "Duin is a small hotel behind the dunes" describes the client and
+gives the site nothing to do. "Hier hoor je de zee voordat je haar ziet" is an idea: it tells you what the opening
+withholds and what the centerpiece gives. Test it: if the sentence could open the client's Wikipedia page, it is a
+description.
+
+**Language.** How the whole site moves: the preloader, the page transition and the menu come from one family, so
+every cut between scenes is made the same way. weight is slow and photographic, cut is hard and short, curtain parts
+and holds. Pick it by the client's world, not by the block you like best.
+
+**Motif.** One visual device from a closed set (line, frame, aperture, cut, word, field) that stands for something in
+the client's world: the window frame of a canal house, the seam of a knitted garment, the horizon over the sea at
+night. It shows at four places (arrival, opening, centerpiece, close) and changes a little each time, so the visitor
+feels the page is about one thing.
+
+**Lexicon.** Three to five working words of the client's trade: a material, a part, a tool, a unit. Not the brief
+repeated: "twaalf kamers, Bergen aan Zee" are facts for the copy, while "helmgras, zout, vloed, sleutel" is a
+lexicon for a hotel behind the dunes. Every label, counter, caption and margin note on the site is written with
+them. A caption names the client's material, never "Scene 01". Trade words are not facts, so they need no source;
+numbers still come from the brief only.
+
+The three treatments below are examples of the form. Their palettes, pairings, packs and centerpieces belong to
+those clients: pick yours from the canon and the arc by your own brief, and pick the language by the client's
+world (a fashion label is cut, not weight, unless the brief says slow).
+
+**Arc.** The order of scenes for a language, with the loud and quiet beats already placed. You cast the brief into
+it: each scene gets this client's content. You may swap one scene for another with the same tag; the loud scenes are
+the opening, the centerpiece and at most one gentle one, never side by side.
+
+## How a motif travels
+
+| Motif | Arrival | Opening | Centerpiece | Close |
+|---|---|---|---|---|
+| line | the cover opens on a hairline | the headline stands on a horizon or seam | a rule or slab is drawn through the words | the rule draws under the closing link |
+| frame | the small print of the preloader | the print on the wall | the grid of prints, one opening into a room | an empty hairline frame round the last line |
+| aperture | the cover opens through a slit | a window cut in the type | the window the camera pushes through | the footer uncovered through a growing slit |
+| cut | the slices drop away | a slit through the poster type | a hard seam between two photos | the page ends on a cut, no fade |
+| word | the name set across the screen | one word at poster scale | a word that fills, splits or shears | the name again, edge to edge |
+| field | the cover in the field colour | a live field behind the type | the one field scene | the field returning under the footer |
+
+## Quiet scenes, from the kit
+
+The quiet scenes come from `@/components/struq/kit/quiet`, already on the page grid and the sheet's margin, each
+entering once and then holding still: no pin, no scrub, no parallax, no hover, no counter.
+
+- `Statement` sets the one sentence at moment size, one `accent` word in the italic face, a `label` in the margin
+  ("Werkplaats Zuid, sinds 1998") and a small upright `image` hanging off the last line.
+- `PhotoText` puts a photo across seven columns and a short heading with one or two paragraphs across four, the
+  caption under the photo in the lexicon ("Trap, schaal 1:20").
+- `Rows` lists three to six terms with one sentence each between hairlines, a column photo beside them, no numbers.
+- `Close` ends on one line and one link; `frame` draws the hairline frame when the motif is the frame.
+
+Quiet scenes are what make the centerpiece read as the moment. Write an own scene only when none of the four fits,
+and put `data-scene="<name>"` on its root.
+
+## weight: Atelier Sloot, a ceramics studio
+
+```
+# STRUQ.md: Atelier Sloot
+Brief: keramiekatelier in Deventer dat servies in kleine series draait, voor restaurants en voor thuis
+Idea: Een kom is pas af als hij gebruikt wordt.
+Language: weight
+Motif: frame: one object alone on its plank; a small upright print at arrival, the print on the wall at the opening, the object grown to the whole screen at the centerpiece, an empty frame round the last line
+Lexicon: klei, glazuur, oven, serie
+Palette: <yours, from canon.mjs list by the brief's mood and sector>
+Type: <yours, by the client's temperament>
+Images: <the client's photos, else the pack images.mjs picks for the brief>
+Centerpiece: image-to-fullbleed: one bowl grows from a print on the wall to the size of the screen; you see it the way you would hold it, which is the idea
+Tone arc: paper, paper, paper, paper, paper, ink, paper, paper
+Storyboard:
+1. Arrival   (frame)  preloader-stack, "Atelier Sloot" under the frame | lands on: the hero print
+2. Opening   (loud)   hero-framed:wand | on screen: one bowl as a small print, its label "Kom, mat glazuur", the h1 "Gemaakt om te gebruiken." | enters: the line rises beside the print | hands over: the first scroll walks up to the print until it fills the screen
+3. Statement (quiet)  Statement, accent "hand" | on screen: "Eerst de hand, dan de oven." at moment size on paper, the label "Klei, nog nat" in the margin, a small print of a bowl drying off the last line | enters: lines rise once | hands over: plain scroll
+4. About     (loud)   about-studio:wandeling | on screen: who makes it and where, as the brief says, beside two columns of objects | enters: the columns drift with the scroll | hands over: plain scroll
+5. Approach  (quiet)  Rows | on screen: "Hoe een kom ontstaat.", then draaien, drogen, glazuren, stoken, one sentence each, no numbers, a column photo of the oven beside them | enters: each row once | hands over: plain scroll
+6. Centerpiece (loud) image-to-fullbleed | on screen: one bowl on stone, from print to full screen, with "Op ware grootte." | enters: pinned 2.2 screens | hands over: the photo lets go and scrolls away whole
+7. Release   (quiet)  PhotoText | on screen: a photo of the drying rack, "Een serie voor je zaak." and two sentences on ordering one, the caption "Droogrek, één serie" | enters: once | hands over: plain scroll
+8. Close     (quiet)  Close, frame | echoes the opening: an empty hairline frame round "Vraag een serie aan." and the mail link | footer: wordmark-finale
+```
+
+Budgets: pins 1.5 + 2.2 = 3.7 screens; full-bleed reveals two, built the same way (a print growing to the screen);
+clocks none, so no `timeZone` on the finale; four of the seven scenes after the arrival quiet, and the one gentle
+loud scene (the walk past the objects) has a quiet scene on each side. `approach:draad` was left out: it draws a
+line, and this site's motif is a frame.
+
+## cut: Vaar, a knitwear label
+
+```
+# STRUQ.md: Vaar
+Brief: kleine oplagen merinotruien uit een Amsterdams atelier, voor mensen die liever één goede trui hebben dan vijf
+Idea: Eén naad, en die zit waar je hem ziet.
+Language: cut
+Motif: cut: the seam of a knitted garment; the slices at arrival, a slit through the poster type at the opening, the hard seam between two photos at the centerpiece, the page ending on a cut
+Lexicon: naad, steek, merino, oplage
+Palette: <yours, from canon.mjs list by the brief's mood and sector>
+Type: <yours, by the client's temperament>
+Images: <the client's photos, else the pack images.mjs picks for the brief>
+Centerpiece: split-pair: two garments meet on one seam and the word "Naad" shears along it; the idea made physical
+Tone arc: paper, paper, paper, paper, ink, paper, paper
+Storyboard:
+1. Arrival   (frame)  preloader-slices, name "Vaar", caption "Merino, kleine oplage, Amsterdam" | lands on: the poster
+2. Opening   (loud)   hero-poster:column | on screen: "Langzaam / gebreid" fitted to the width, a slit of folded wool through it | enters: the slices uncover it | hands over: the slit opens sideways into the full photo
+3. Work      (quiet)  hover-list | on screen: the pieces of this oplage, name and colour | enters: rows rise once | hands over: plain scroll
+4. Statement (quiet)  Statement, accent "naad" | on screen: "Elke trui heeft één naad." at moment size, the label "Merino, vier draden" in the margin, a small photo of the seam off the last line | enters: once | hands over: plain scroll
+5. Centerpiece (loud) split-pair | on screen: the word "Naad", two photos meeting on it | enters: pinned 3 screens | hands over: the halves leave at their own speeds
+6. Release   (quiet)  fill-rows | on screen: the three yarns, a detail on hover | enters: once | hands over: a hard cut to paper
+7. Close     (quiet)  Close | echoes the opening: "Uit deze oplage, zolang hij er is." at moment size, a link to the shop at the far end of the line under it | footer: footer-contact:address
+```
+
+Budgets: pins 1.5 + 3 = 4.5; one full-bleed reveal; no clock, so the footer goes without `clock`; no marquee, so
+the close is type only.
+
+## curtain: Nachtwerk, a night festival
+
+```
+# STRUQ.md: Nachtwerk
+Brief: driedaags kunstfestival op de boulevard van Vlissingen, alleen na zonsondergang, voor wie de stad bij nacht wil zien
+Idea: De stad begint pas als het donker is.
+Language: curtain
+Motif: line: the horizon over the water at night; the name parts on it at arrival, a low band of light on it at the opening, a slab that becomes the rising line at the centerpiece, the rule under the closing link
+Lexicon: eb, vloed, de pier, drie nachten
+Palette: <yours, from canon.mjs list by the brief's mood and sector>
+Type: <yours, by the client's temperament>
+Images: <the client's photos, else the pack images.mjs picks for the brief>
+Centerpiece: scrub-connector: "Eb" and "Vloed" far apart, joined by one slab that seats as a rising line; the tide as the festival's clock
+Tone arc: field, field, paper, paper, paper, ink, paper, paper
+Storyboard:
+1. Arrival   (frame)  preloader-wordmark:split, "Nachtwerk" | lands on: the field, the halves parting on its middle line
+2. Opening   (loud)   background-aurora:horizon | on screen: "Drie nachten aan zee." at 16vw on the calm side, a low band of light along the foot | enters: lines rise as the band brightens | hands over: the band rises as the hero scrolls away
+3. Statement (quiet)  Statement, accent "donker" | on screen: one sentence on why the festival starts at dusk, the label "De pier, na zonsondergang" in the margin, a small photo of an empty stage off the last line | enters: once | hands over: plain scroll
+4. Details   (loud)   sticky-chapters | on screen: the three nights as chapters, with the places the brief names | enters: one photo holds while the nights scroll past, each night's photo rising over the last | hands over: plain scroll
+5. Build     (quiet)  PhotoText | on screen: who makes it, as the brief says, a photo of the pier, the caption "De pier bij vloed" | enters: once | hands over: plain scroll
+6. Centerpiece (loud) scrub-connector | on screen: "Eb" and "Vloed" | enters: pinned 3 screens | hands over: the joined pair scrolls away whole
+7. Release   (quiet)  PhotoText, side right | on screen: one photo of the boulevard, the dates and place from the brief | enters: once | hands over: plain scroll
+8. Close     (quiet)  cta-closing:pointer | echoes the opening: the line drawn under "Kom kijken als het donker wordt." | footer: footer-reveal:lift
+```
+
+Budgets: pins 3 screens; no full-bleed reveal; no clock; two contrast scenes (the field and the ink); the chapters
+are the one gentle loud scene, a quiet scene on each side. `preloader-gate`, with its neutral hairline ring, fits
+the language as well; its film leader (`dial="leader"`, counting 3, 2, 1) stays out, because this client is not a
+film.
+
+## Before the stop
+
+Read the storyboard once as a visitor would. If two scenes in a row move with the scroll, one becomes quiet. If a
+scene carries a metaphor from outside the client's world (a film leader, a slate, a typewriter, a clock nobody asked
+for), it goes or its words come from the lexicon. If the centerpiece could sit on any other client's site, the idea
+is not in it yet.

package/skills/struq/references/triage.md

@@ -9,6 +9,9 @@ The principle: **fix the execution, preserve the identity.** Type, spacing, surf
 motion, scaling, and icon misuse are execution, so they are fair game. Brand color, words,
 and the component foundation are identity, so leave them unless explicitly asked.
 
+A redesign writes a treatment too, with the kept sections as own scenes, and stops once for the user's approval as a
+build does: no block and no canon goes in before the reply is logged.
+
 ---
 
 ## Preserve by default: do NOT touch unless the user asks

package/skills/struq/scripts/blocks.mjs

@@ -4,21 +4,34 @@
 //
 //   node <skill-dir>/scripts/blocks.mjs list [kind]          the catalogue, one line per block with its variants
 //   node <skill-dir>/scripts/blocks.mjs init                 the kit, the app shell (on a starter) and the base packages
-//   node <skill-dir>/scripts/blocks.mjs add <slug> [<slug>]  a block and every file it imports, plus its packages
+//   node <skill-dir>/scripts/blocks.mjs add <slug>[:<variant>] [...]  a block and every file it imports, plus its packages
+//   node <skill-dir>/scripts/blocks.mjs arc [language]      a language's storyboard skeleton (film.json); none: the three
 //   flags: --dir <project>, --force (replace files you already have), --no-install
 //
+// add refuses, installing nothing, until STRUQ.md passes the plan check and STRUQ-LOG.md holds the user's reply to the
+// treatment, and then takes only blocks the storyboard names, in the site's language (gate.mjs). list, init and arc
+// never ask. The kit's quiet scenes (Statement, PhotoText, Rows, Close) come with init, so add only says how to import
+// one.
+//
 // 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 { dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { addRefusal, refuse } from "./gate.mjs";
 import { appendLog } from "./log.mjs";
 
 const here = dirname(fileURLToPath(import.meta.url));
 const BLOCKS = join(here, "..", "blocks");
 const RECIPES = join(here, "..", "recipes");
 const CATALOG = JSON.parse(readFileSync(join(BLOCKS, "catalog.json"), "utf8")).blocks;
+const FILM = join(BLOCKS, "film.json");
+/** The kit's composed quiet scenes, one file each in kit/quiet/: a storyboard names them where a block would stand. */
+const KIT_SCENES = readdirSync(join(BLOCKS, "kit", "quiet"))
+  .filter((n) => /^[A-Z]\w*\.tsx$/.test(n))
+  .map((n) => n.replace(/\.tsx$/, ""));
+const kitScene = (name) => KIT_SCENES.find((k) => k.toLowerCase() === name.split(":")[0].toLowerCase()) ?? null;
 
 const args = process.argv.slice(2);
 const dirAt = args.indexOf("--dir");
@@ -83,15 +96,47 @@ function report(step, what) {
   appendLog(root, step, [what, ...(notes.length ? [`Notes: ${notes.join(" ")}`] : [])]);
 }
 
+/**
+ * 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.
+ */
+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));
+  const last = arc.scenes.length - 1;
+  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 parts = [head];
+    if (scene.tag === "frame") parts.push("lands on: <what>");
+    else if (at === last) parts.push("echoes the opening: <how>");
+    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]}`);
+    lines.push(parts.join(" | "));
+  });
+  return lines;
+}
+
 const commands = {
   list() {
     const kind = rest[0];
     const rows = CATALOG.filter((b) => !kind || b.kind === kind);
     if (!rows.length) throw new Error(`No blocks of kind "${kind}". Kinds: ${[...new Set(CATALOG.map((b) => b.kind))].join(", ")}`);
+    // The film facts of the default variant, so a storyboard can be cast from this list alone.
+    const film = (b) => (b.role ? `  film: ${b.role} · energy ${b.energy ?? 0} · pins ${b.pins ? b.scroll : 0}` : "");
     for (const b of rows) {
-      console.log(`${b.kind.padEnd(16)} ${b.slug.padEnd(24)} ${b.title}${b.variants.length ? `  [${b.variants.map((v) => v.id).join(", ")}]` : ""}`);
+      console.log(`${b.kind.padEnd(16)} ${b.slug.padEnd(24)} ${b.title}${b.variants.length ? `  [${b.variants.map((v) => v.id).join(", ")}]` : ""}${film(b)}`);
     }
-    console.log(`\n${rows.length} block(s). What each does and its variants: blocks/CATALOG.md.`);
+    console.log(`\n${rows.length} block(s). What each does, its variants and their film lines: blocks/CATALOG.md.`);
   },
 
   init() {
@@ -120,14 +165,51 @@ const commands = {
     console.log("OK init ready");
   },
 
+  arc() {
+    const film = JSON.parse(readFileSync(FILM, "utf8"));
+    const languages = film.FILM_LANGUAGES;
+    const id = rest[0];
+    if (!id) {
+      const width = Math.max(...languages.map((l) => l.id.length)) + 2;
+      for (const l of languages) console.log(`${l.id.padEnd(width)}${l.for.join(", ")}`);
+      console.log(`\nPrint one: blocks.mjs arc <${languages.map((l) => l.id).join(" | ")}>`);
+      return;
+    }
+    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);
+    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.`);
+  },
+
   add() {
-    if (!rest.length) throw new Error("Usage: blocks.mjs add <slug> [<slug> ...]. The slugs: blocks.mjs list");
+    if (!rest.length) throw new Error("Usage: blocks.mjs add <slug>[:<variant>] [...]. The slugs: blocks.mjs list");
+    // A kit quiet scene is no block: init already copied it, so say how to import it and install nothing for it.
+    for (const arg of rest.filter(kitScene)) {
+      const name = kitScene(arg);
+      console.log(`${name} is a kit quiet scene, already in components/struq/kit/quiet/ (blocks.mjs init): import { ${name} } from "@/components/struq/kit/quiet";`);
+    }
+    rest.splice(0, rest.length, ...rest.filter((arg) => !kitScene(arg)));
+    if (!rest.length) return;
+    const requests = rest.map((arg) => {
+      const [slug, variant = null] = arg.split(":");
+      const b = CATALOG.find((x) => x.slug === slug);
+      if (!b) throw new Error(`Unknown block "${slug}". Run: blocks.mjs list`);
+      if (variant && !b.variants.some((v) => v.id === variant)) {
+        throw new Error(`${slug} has no variant "${variant}". Its variants: ${b.variants.map((v) => v.id).join(", ") || "none"}.`);
+      }
+      return { slug, variant };
+    });
     const deps = project();
+    // The one stop: a passing plan, the user's logged reply, and only blocks the storyboard names (gate.mjs).
+    const refusal = addRefusal(root, requests);
+    if (refusal) return refuse("blocks.mjs add", refusal);
     const wanted = new Set();
     const added = [];
-    for (const slug of rest) {
+    for (const { slug } of requests) {
       const b = CATALOG.find((x) => x.slug === slug);
-      if (!b) throw new Error(`Unknown block "${slug}". Run: blocks.mjs list`);
       for (const f of b.files) place(join(BLOCKS, f), target(f));
       for (const p of b.packages) wanted.add(p);
       added.push(b);
@@ -145,7 +227,7 @@ const commands = {
 
 const run = commands[cmd];
 if (!run) {
-  console.error("Usage: blocks.mjs list [kind] | init | add <slug> [<slug> ...]   [--dir <project>] [--force] [--no-install]");
+  console.error("Usage: blocks.mjs list [kind] | init | add <slug>[:<variant>] [...] | arc [language]   [--dir <project>] [--force] [--no-install]");
   process.exit(2);
 }
 try {

package/skills/struq/scripts/canon.mjs

@@ -9,10 +9,14 @@
 //   node <skill-dir>/scripts/canon.mjs print <palette> <pairing>  prints the block and the font URLs, writes nothing
 //   add --dir <project> to run from elsewhere
 //
+// palette and type refuse, writing nothing, until STRUQ.md passes the plan check and STRUQ-LOG.md holds the user's
+// 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 { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { refuse, stopRefusal } from "./gate.mjs";
 import { appendLog } from "./log.mjs";
 import { fontHrefs, headFamily, lightness, paletteTokens } from "./tokens.mjs";
 
@@ -126,7 +130,10 @@ if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.ur
     process.exit(2);
   }
   try {
-    run();
+    // palette and type write into the project, so they wait for the one stop: a passing plan and the logged reply.
+    const refusal = cmd === "palette" || cmd === "type" ? stopRefusal(root) : null;
+    if (refusal) refuse(`canon.mjs ${cmd}, nothing written`, refusal);
+    else run();
   } catch (e) {
     console.error(`FAIL ${e.message}`);
     process.exitCode = 1;