@struq/skill 0.5.2 → 0.5.3

package/skills/struq/blocks/catalog.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "Struq blocks/",
     "ref": "origin/main",
-    "commit": "a538491"
+    "commit": "f98bd198"
   },
   "blocks": [
     {
@@ -56,6 +56,7 @@
       "file": "preloaders/preloader-wordmark.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "preloaders/preloader-slices-uncovered.ts",
         "preloaders/preloader-wordmark.tsx"
@@ -65,7 +66,7 @@
       "slug": "preloader-stack",
       "kind": "preloader",
       "title": "Preloader: the stack",
-      "does": "The first paint is the page's ground with the client's name, a quiet count and the first print in a small portrait frame; five or six prints cut inside that frame, each held shorter than the last, ending on the hero's own photo, and the frame then grows to the hero image's exact place and crop (the page marks it data-stack-target) so the cover becomes the hero with no seam, within 2.4 seconds of the first paint, once per session.",
+      "does": "The first paint is the page's ground with the client's name, a quiet count and the first print in a small portrait frame; five or six prints cut inside that frame, each held shorter than the last, ending on the hero's own photo, and the frame then grows to the hero image's exact place and crop (the page marks it data-stack-target) so the cover becomes the hero with no seam, within 2.4 seconds of the first paint, once per session. Before an opening with no photo (opening=\"photoless\", or no hero) it flips palette panels with the name's first letter instead and lands on the opening's own ground.",
       "reference": "Kinetic Studio and Lowlight for pacing and the counter (v4vision/projects/kinetic-studio/index.html, Opus55/build/template.html); the grow follows image-to-fullbleed's numeric clip.",
       "variants": [],
       "role": "frame",
@@ -91,6 +92,7 @@
       "file": "preloaders/preloader-stack.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "preloaders/preloader-slices-uncovered.ts",
@@ -127,6 +129,7 @@
       "file": "preloaders/preloader-slices.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "preloaders/preloader-slices-uncovered.ts",
         "preloaders/preloader-slices.tsx"
@@ -162,6 +165,7 @@
       "file": "preloaders/preloader-gate.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "preloaders/preloader-gate.tsx",
         "preloaders/preloader-slices-uncovered.ts"
@@ -197,6 +201,7 @@
       "files": [
         "kit/SmoothScroll.tsx",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "page-transitions/page-transition-stack.tsx",
         "preloaders/preloader-slices-uncovered.ts"
@@ -232,6 +237,7 @@
       "files": [
         "kit/SmoothScroll.tsx",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "page-transitions/page-transition-slices.tsx",
         "preloaders/preloader-slices-uncovered.ts"
@@ -269,6 +275,7 @@
       "files": [
         "kit/SmoothScroll.tsx",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "page-transitions/page-transition-gate.tsx",
         "preloaders/preloader-slices-uncovered.ts"
@@ -333,7 +340,9 @@
       "files": [
         "headers/header-bar.tsx",
         "kit/blocks.css",
-        "kit/gsap.ts"
+        "kit/feel.ts",
+        "kit/gsap.ts",
+        "kit/photo-read.ts"
       ]
     },
     {
@@ -395,6 +404,7 @@
         "headers/menu-curtain.tsx",
         "kit/SmoothScroll.tsx",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts"
       ]
@@ -449,6 +459,7 @@
         "heroes/hero-framed.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -507,6 +518,7 @@
         "heroes/hero-split.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -568,6 +580,7 @@
         "heroes/hero-index.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -633,6 +646,7 @@
         "heroes/hero-still.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -686,6 +700,7 @@
         "heroes/hero-still.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -744,6 +759,7 @@
         "backgrounds/background-aurora.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "preloaders/preloader-slices-uncovered.ts"
       ]
@@ -800,6 +816,7 @@
         "backgrounds/background-silk.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "preloaders/preloader-slices-uncovered.ts"
       ]
@@ -856,6 +873,7 @@
         "backgrounds/background-facets.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "preloaders/preloader-slices-uncovered.ts"
       ]
@@ -864,7 +882,7 @@
       "slug": "hero-opener",
       "kind": "showpiece",
       "title": "Hero opener",
-      "does": "A full-bleed photo (or the WebGL scene over it) with the display line at 14 to 20vw across it; on scroll it pins, scales down and darkens while the next section slides over.",
+      "does": "A full-bleed photo (or the WebGL scene over it) with the display line at 14 to 20vw across it; on scroll it pins, scales down and darkens while the next section slides over. Without a photo it is type on the inverse ground over the builder's own motif (`backdrop`, an SVG or small canvas from the site's world) or a stock field (`scene`: \"dots\", \"contours\" or \"none\"); the dots default is a fallback, not a choice.",
       "reference": null,
       "variants": [],
       "role": "opening",
@@ -895,6 +913,7 @@
         "kit/MagneticButton.tsx",
         "kit/accent.ts",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/scenes/contours.ts",
@@ -933,6 +952,7 @@
       "file": "showpieces/image-to-fullbleed.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "showpieces/image-to-fullbleed.tsx"
@@ -966,6 +986,7 @@
       "file": "showpieces/panel-wipe.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "showpieces/panel-wipe.tsx"
@@ -999,6 +1020,7 @@
       "file": "showpieces/scrub-connector.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "showpieces/scrub-connector.tsx"
       ]
@@ -1031,6 +1053,7 @@
       "file": "showpieces/project-stack.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "showpieces/project-stack.tsx"
@@ -1064,6 +1087,7 @@
       "file": "showpieces/manifesto-scrub.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "showpieces/manifesto-scrub.tsx"
       ]
@@ -1098,6 +1122,7 @@
       "file": "showpieces/fill-rows.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "showpieces/fill-rows.tsx"
       ]
@@ -1164,6 +1189,7 @@
       "file": "showpieces/wordmark-finale.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "showpieces/wordmark-finale.tsx"
       ]
@@ -1196,6 +1222,7 @@
       "file": "transitions/zoom-through.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -1258,6 +1285,7 @@
       "file": "sections/about-studio.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/about-studio.tsx"
@@ -1320,6 +1348,7 @@
       "file": "sections/approach.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/approach.tsx"
@@ -1382,6 +1411,7 @@
       "file": "sections/manifesto.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -1500,6 +1530,7 @@
       "file": "sections/cta-closing.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -1554,6 +1585,7 @@
       "file": "sections/reveals.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/reveals.tsx"
@@ -1590,6 +1622,7 @@
       "file": "sections/image-trail.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/image-trail.tsx"
@@ -1625,6 +1658,7 @@
       "file": "sections/panel-accordion.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/panel-accordion.tsx"
@@ -1658,6 +1692,7 @@
       "file": "sections/grid-assembly.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -1694,6 +1729,7 @@
       "file": "sections/velocity-type.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/velocity-type.tsx"
@@ -1727,6 +1763,7 @@
       "file": "sections/sticky-chapters.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/sticky-chapters.tsx"
@@ -1760,6 +1797,7 @@
       "file": "sections/film-strip.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/film-strip.tsx"
@@ -1796,6 +1834,7 @@
       "file": "sections/hover-list.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/hover-list.tsx"
@@ -1829,6 +1868,7 @@
       "file": "sections/split-pair.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "kit/photo-read.ts",
@@ -1865,6 +1905,7 @@
       "file": "sections/fanned-cards.tsx",
       "files": [
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts",
         "kit/images.ts",
         "sections/fanned-cards.tsx"
@@ -1921,6 +1962,7 @@
         "footers/footer-reveal.tsx",
         "kit/SmoothScroll.tsx",
         "kit/blocks.css",
+        "kit/feel.ts",
         "kit/gsap.ts"
       ]
     },
@@ -1966,6 +2008,7 @@
         }
       },
       "packages": [
+        ",\n  },\n  nl: {\n    days: [",
         "@gsap/react",
         "gsap"
       ],
@@ -1976,7 +2019,9 @@
       "files": [
         "footers/footer-contact.tsx",
         "kit/blocks.css",
-        "kit/gsap.ts"
+        "kit/feel.ts",
+        "kit/gsap.ts",
+        "kit/middle/hours.ts"
       ]
     }
   ]

package/skills/struq/blocks/film.json

@@ -2,15 +2,16 @@
   "source": {
     "repo": "Struq blocks/film/arcs.ts",
     "ref": "origin/main",
-    "commit": "a538491"
+    "commit": "f98bd198"
   },
   "ARC_RULES": [
-    "A loud scene moves with the scroll (a pin, a scrub, a reveal to full bleed); a quiet scene is type and a photo that enter once and sit still. Tag a scene (loud) when the block's energy is 2 or more, (quiet) at 1 or less or for an own scene.",
-    "Pick the language by the client's sector. Another language only when the brief asks for that feel in its own words; then quote those words on the Language line. The idea may pick another motif of the six.",
+    "A loud scene moves with the scroll (a pin, a scrub, a reveal to full bleed); a quiet scene enters once and sits still. Tag a scene (loud) when the block's energy is 2 or more, (quiet) at 1 or less or for an own scene.",
+    "Pick the language from the hand by the tempo the idea needs, never by trade; calm and the held reveal are both reflexes. The Language line says why not the other. The idea may pick any motif of the six.",
+    "Cast every slot from the Idea, the Motif and the Unlike line, never from the order of the options: each option is a different first screen or moment. The Opening and the Centerpiece come from the hand's five each; choose the pair that could only be this client's.",
+    "The middle of the page is composed for this client, never the kit's four quiet scenes by default. Each middle scene is a block, a kit quiet scene (Statement, PhotoText, Rows or Close, each at most once) or an own scene built from SplitHeadline, MediaFrame and Reveal, whichever this idea needs there. Invent own scenes wherever the idea wants a moment no block gives.",
+    "Loud only at the opening, the centerpiece and at most one gentle scene, with a quiet scene on each side. Change, add or drop middle scenes as the idea needs, 7 to 9 scenes in all; a block the client named goes in, marked (named).",
     "preloader-gate is neutral by default (a hairline ring an accent arc fills once, or the client's own marks); its leader dial (dial=\"leader\" with marks 3, 2, 1) is for a film client only.",
-    "The header is header-bar:quiet or :settle; sections say their ground with data-bar-tone.",
-    "Each arc is loud only at the opening, the centerpiece and at most one gentle scene with a quiet scene on each side. Swap at most one scene; a block the user names goes in first.",
-    "The Statement is the first type moment: an own scene, one sentence at 12 to 16vw with SplitHeadline, still. Only the Statement and the Close are type alone: every other own scene sets a photo (MediaFrame) beside its type on the 12 column grid, so a quiet scene is composed, never empty."
+    "The header is header-bar:quiet or :settle; sections say their ground with data-bar-tone."
   ],
   "FILM_ARCS": [
     {
@@ -346,7 +347,7 @@
     "Every frame from the site's language. A page transition only when the site has more than one route.",
     "Install only what the storyboard names, plus the header and the language's menu.",
     "One motif on the page. At most two full-bleed photo reveals, built the same way.",
-    "At most one marquee (cta-closing:marquee, velocity-type) and one custom cursor. An accent face, if loaded, sets one word of the h1 and returns in the close.",
+    "At most one marquee (cta-closing:marquee, velocity-type) and one custom cursor. One accent device on the page: an italic word, a weight shift, a coloured word, a jump in scale, or none.",
     "A block with a live clock goes without it unless the lexicon is about time: wordmark-finale without timeZone, header-bar:quiet or :settle, never :split. hero-still, footer-contact and menu-curtain always tick: at most one of them on the page, and it is the one clock.",
     "Two or three type moments at poster scale (12 to 20vw) on the page; everything else from the scale.",
     "Labels: no eyebrows above headings, no mono, no uppercase labels, no numbered steps. A small sentence-case label in the body face may sit beside a headline in the margin column or under a photo, in words from the lexicon."
@@ -358,6 +359,7 @@
   "FILM_LANGUAGES": [
     {
       "id": "weight",
+      "temperament": "weighted",
       "for": [
         "architecture",
         "hotels",
@@ -377,6 +379,7 @@
     },
     {
       "id": "cut",
+      "temperament": "crisp",
       "for": [
         "fashion",
         "agencies",
@@ -397,6 +400,7 @@
     },
     {
       "id": "curtain",
+      "temperament": "slow",
       "for": [
         "campaigns",
         "launches",

package/skills/struq/blocks/footers/footer-contact.tsx

@@ -38,6 +38,8 @@
 // Reduced motion: the composed footer, no travel; the colon holds and the digits cut; hovers show a plain underline.
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from "react";
 import { gsap, ScrollTrigger, SplitText, useGSAP } from "../kit/gsap";
+// The hours as words, the wall clock and the open marker's logic: one copy, shared with kit/middle/PlaceHours.
+import { hoursText as rowText, openStatus, useNow, wallClock } from "../kit/middle/hours";
 
 export const FOOTER_CONTACT_VARIANTS = [
   { id: "address", title: "Adres" },
@@ -91,13 +93,7 @@ const ROLL_SPAN = 0.36;
 /** The soft rise of the details, in px. */
 const SOFT = 24;
 
-const DAYS = ["maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag", "zondag"];
-const WEEKDAY: Record<string, number> = { Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6, Sun: 7 };
 const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
-const toMinutes = (s: string) => {
-  const [h, m] = s.split(":").map(Number);
-  return (h || 0) * 60 + (m || 0);
-};
 
 const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
 const within = (p: number, from: number, to: number) => clamp01((p - from) / (to - from));
@@ -152,87 +148,21 @@ function faceReady() {
   return Promise.race([fonts ?? Promise.resolve(), new Promise((res) => window.setTimeout(res, FONT_CAP))]);
 }
 
-/** The time now, only when `on` and only after mount (null on the server and the first paint), ticking on the minute. */
-function useNow(on: boolean) {
-  const [now, setNow] = useState<Date | null>(null);
-  useEffect(() => {
-    if (!on) return;
-    let timer = 0;
-    const tick = () => {
-      const d = new Date();
-      setNow(d);
-      window.clearTimeout(timer);
-      timer = window.setTimeout(tick, 60_000 - (d.getSeconds() * 1000 + d.getMilliseconds()) + 30);
-    };
-    tick();
-    // A background tab's timers are held back; on return the clock catches up at once.
-    const onShow = () => {
-      if (document.visibilityState === "visible") tick();
-    };
-    document.addEventListener("visibilitychange", onShow);
-    return () => {
-      window.clearTimeout(timer);
-      document.removeEventListener("visibilitychange", onShow);
-    };
-  }, [on]);
-  return on ? now : null;
-}
-
 type Wall = { dow: number; h: number; m: number; hh: string; mm: string; date: string };
 
-/** The studio's wall clock and whether it is open, from the real time and the given hours. */
+/** The studio's wall clock and whether it is open, from the real time and the given hours (../kit/middle/hours). */
 function useWall(now: Date | null, timeZone: string, hours: Props["hours"]) {
-  const fmt = useMemo(
-    () => ({
-      parts: new Intl.DateTimeFormat("en-GB", { timeZone, weekday: "short", hour: "2-digit", minute: "2-digit", hourCycle: "h23" }),
-      date: new Intl.DateTimeFormat("nl-NL", { timeZone, weekday: "long", day: "numeric", month: "long" }),
-    }),
-    [timeZone],
-  );
+  const date = useMemo(() => new Intl.DateTimeFormat("nl-NL", { timeZone, weekday: "long", day: "numeric", month: "long" }), [timeZone]);
   return useMemo(() => {
     if (!now) return { wall: null, status: null };
-    const parts = fmt.parts.formatToParts(now);
-    const get = (t: string) => parts.find((p) => p.type === t)?.value ?? "";
-    const h = Number(get("hour")) % 24;
-    const m = Number(get("minute"));
-    const wall: Wall = {
-      dow: WEEKDAY[get("weekday")] ?? 1,
-      h,
-      m,
-      hh: String(h).padStart(2, "0"),
-      mm: String(m).padStart(2, "0"),
-      date: fmt.date.format(now),
-    };
-    const mins = h * 60 + m;
-    const from = toMinutes(hours.from);
-    const to = toMinutes(hours.to);
-    const openDay = (d: number) => hours.days.includes(d);
-    let status: { open: boolean; text: string };
-    if (openDay(wall.dow) && mins >= from && mins < to) status = { open: true, text: `Nu open, tot ${hours.to}` };
-    else if (openDay(wall.dow) && mins < from) status = { open: false, text: `Vandaag vanaf ${hours.from}` };
-    else {
-      let text = "";
-      for (let k = 1; k <= 7; k += 1) {
-        const d = ((wall.dow - 1 + k) % 7) + 1;
-        if (openDay(d)) {
-          text = k === 1 ? `Morgen vanaf ${hours.from}` : `${cap(DAYS[d - 1])} vanaf ${hours.from}`;
-          break;
-        }
-      }
-      status = { open: false, text };
-    }
-    return { wall, status };
-  }, [now, fmt, hours]);
+    const wall: Wall = { ...wallClock(now, timeZone), date: date.format(now) };
+    return { wall, status: openStatus([hours], wall, "nl") };
+  }, [now, date, timeZone, hours]);
 }
 
 /** "Maandag tot en met vrijdag, 9:00 tot 18:00" from the hours. */
 function hoursText(hours: Props["hours"]) {
-  const days = [...hours.days].sort((a, b) => a - b);
-  if (!days.length) return "";
-  const first = DAYS[days[0] - 1];
-  const last = DAYS[days[days.length - 1] - 1];
-  const run = days.length === 1 ? cap(first) : `${cap(first)} tot en met ${last}`;
-  return `${run}, ${hours.from} tot ${hours.to}`;
+  return rowText(hours, "nl");
 }
 
 /** The open marker: a small ring, filled while the studio is open, and the words. Empty until the time is known. */