@autoaiai/aicut 0.1.11 → 0.1.13

package/studio/server/skills.mjs

@@ -16,8 +16,9 @@ import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync,
 import { homedir } from 'node:os';
 import { basename, dirname, join, resolve, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { downloadFiles, listFiles, resolveCommit } from './fetch-github.mjs';
+import { downloadFiles, GITHUB_RAW, listFiles, rawUrl, resolveCommit, within } from './fetch-github.mjs';
 import { HttpError } from './http.mjs';
+import { summaryFor } from './skill-summaries.mjs';
 
 /** Where a skill lands in a project: Pi's own folder for a project's skills (relative to the project). */
 export const SKILLS_IN_PROJECT = join('.pi', 'skills');
@@ -124,6 +125,16 @@ export function listSkills() {
   return skills;
 }
 
+/**
+ * What the Skills page shows: every skill, each with one line of its own in `lang` (skill-summaries.mjs) — the
+ * hand-written line where there is one, else the first sentence of its description. `listSkills` stays the plain list,
+ * because that is what the rest of the server works with.
+ * @param {string} [lang] @returns {(Skill & { summary: string })[]}
+ */
+export function listSkillsFor(lang) {
+  return listSkills().map((skill) => ({ ...skill, summary: summaryFor(skill.id, skill.description, lang ?? '') }));
+}
+
 /** The folders in `root`, sorted. @param {string} root @returns {string[]} */
 function folders(root) {
   try {
@@ -213,6 +224,43 @@ export function installSkills(project, ids) {
   return { installed, missing };
 }
 
+/**
+ * The skills the app is made of: `aicut` is the manual its agent reads in every project, and `aicut-motion` is the
+ * art direction every starter film follows (templates.mjs) — taking either away leaves a library that looks complete
+ * and is not, so they are the two the Skills page will not remove.
+ */
+export const CORE_SKILLS = /** @type {const} */ (['aicut', 'aicut-motion']);
+
+/**
+ * Remove a skill from the library: its folder goes from disk — from `~/.aicut/skill-library` for one fetched here, from
+ * the `skills/` beside the package for one the app brings. A project that already carries a copy under `.pi/skills`
+ * keeps it: that copy is the project's, and a film has to open the same way in a year.
+ *
+ * The one `CORE_SKILLS` is refused (409): the app is made of it, and a reinstall would only put it back.
+ * @param {string} id the skill's folder
+ * @returns {{ id: string, source: Skill['source'] }}
+ */
+export function removeSkill(id) {
+  const skill = listSkills().find((one) => one.id === id);
+  if (!skill) throw new HttpError(404, 'no such skill');
+  if (CORE_SKILLS.includes(/** @type {any} */ (id))) throw new HttpError(409, `${id} is part of the app and cannot be removed`);
+  const root = skill.source === 'app' ? appSkillsFolder() : downloadedFolder();
+  if (!root) throw new HttpError(404, 'no such skill');
+  const dir = resolve(root, id);
+  /* whatever a request says, the folder removed is inside the library it came from */
+  if (!`${dir}${sep}`.startsWith(`${resolve(root)}${sep}`)) throw new HttpError(400, 'that is not a skill folder');
+  if (!existsSync(join(dir, 'SKILL.md'))) throw new HttpError(404, 'no such skill');
+  rmSync(dir, { recursive: true, force: true });
+  if (skill.source === 'github') {
+    const sources = readSources();
+    if (sources[id]) {
+      delete sources[id];
+      writeSources(sources);
+    }
+  }
+  return { id, source: skill.source };
+}
+
 /* ── a skill from a GitHub repository (fetch-github.mjs: the API names the commit and lists the files, raw sends them) ── */
 
 /** Files bigger than this are not part of a skill (a skill is words; a picture in one is small). */
@@ -245,8 +293,9 @@ export function parseRepo(input) {
 }
 
 /**
- * The ways GitHub is asked, in order: itself, then the mirror that carries it (the same one the sounds come through) —
- * on a network where the API is not reachable, a fetch that only knows github.com is a fetch that never works.
+ * The ways GitHub is asked, in order: itself, then the mirrors that carry it (the ones the sounds come through) — on a
+ * network where GitHub is not reachable, a fetch that only knows github.com is a fetch that never works. A mirror may
+ * carry one of the two hosts and not the other, so each entry says what it can do and the callers pick their own.
  * `AICUT_SKILLS_API` and `AICUT_SKILLS_RAW` name hosts of one's own instead (a test's stub among them).
  * @returns {{ api?: string, raw?: string }[]}
  */
@@ -263,17 +312,78 @@ function githubHosts() {
   return [
     {},
     { api: 'https://gh-proxy.com/https://api.github.com', raw: 'https://gh-proxy.com/https://raw.githubusercontent.com' },
+    /* the file host only: the API of this one is not known to answer, and the listing needs no mirror once it is read */
+    { raw: 'https://ghfast.top/https://raw.githubusercontent.com' },
   ];
 }
 
+/** How long a file host is given to show it is there, before the next one is asked. */
+const PROBE_MS = 6000;
+
+/**
+ * The file host the download will go to. The API and the files are different addresses, and which one listed the
+ * repository says nothing about which one can send the bytes: on some networks `api.github.com` answers while
+ * `raw.githubusercontent.com` never does. So each host is asked once for a byte of the skill's own `SKILL.md` — cheap,
+ * and the answer settles it — and the whole download then goes to the first that answers, the listing's host first.
+ * @param {{ owner: string, repo: string }} at @param {string} commit @param {string[]} folder
+ * @param {{ path: string, size: number }[]} files
+ * @param {{ signal?: AbortSignal, hosts: { api?: string, raw?: string } }} options
+ * @returns {Promise<{ api?: string, raw?: string }>}
+ */
+async function rawThatAnswers(at, commit, folder, files, { signal, hosts }) {
+  const probe = files.find((file) => file.path === 'SKILL.md') ?? files[0];
+  if (!probe) return hosts;
+  const parts = [...folder, ...probe.path.split('/')];
+  /* the host that listed it first, then the rest — a host that says nothing means GitHub's own file host */
+  const asked = [hosts.raw, ...githubHosts().map((one) => one.raw)];
+  for (const raw of asked.filter((one, i) => asked.indexOf(one) === i)) {
+    try {
+      const res = await fetch(rawUrl(raw ?? GITHUB_RAW, at, commit, parts), {
+        headers: { range: 'bytes=0-0', 'user-agent': 'AICUT-Studio' },
+        signal: within(signal, PROBE_MS),
+      });
+      await res.body?.cancel();
+      if (res.ok) return { ...hosts, ...(raw ? { raw } : {}) };
+    } catch { /* nothing there: the next host is asked */ }
+  }
+  /* none of them answered: the download says so, in the words it already has */
+  return hosts;
+}
+
+/**
+ * A host that answered one byte may still fail the many — a mirror that throttles, a link that drops under four files
+ * at once — and which host answered the byte says nothing about which can send the rest. So a file host that fails on
+ * the network is passed over for the next, and only the network: a 404 or a 422 is the repository's answer and would be
+ * the next host's too.
+ * @param {{ owner: string, repo: string }} at @param {string} commit @param {string[]} folder
+ * @param {{ path: string, size: number }[]} files @param {string} stage
+ * @param {{ signal?: AbortSignal, hosts: { api?: string, raw?: string } }} options
+ */
+async function downloadFromAnywhere(at, commit, folder, files, stage, { signal, hosts }) {
+  const asked = [hosts.raw, ...githubHosts().map((one) => one.raw)];
+  /** @type {unknown} */
+  let last = null;
+  for (const raw of asked.filter((one, i) => asked.indexOf(one) === i)) {
+    try {
+      await downloadFiles(at, commit, folder, files, { dir: stage, signal, hosts: { ...hosts, raw } });
+      return;
+    } catch (e) {
+      if (/** @type {{ code?: string }} */ (e)?.code !== 'network' || signal?.aborted) throw e;
+      last = e;
+      rmSync(stage, { recursive: true, force: true });
+      mkdirSync(stage, { recursive: true });
+    }
+  }
+  throw last ?? new HttpError(502, 'GitHub could not be reached');
+}
+
 /**
  * Fetch a repository's skills into AICUT's home, one folder per skill (every folder holding a `SKILL.md`). They are then
  * offered like the app's own (`listSkills`), and a project can be made with them.
  * @param {string} input a repository, or a link to a folder in one
  * @param {{ signal?: AbortSignal }} [options]
  * @returns {Promise<{ skills: Skill[], commit: string }>}
- */
-export async function addSkillsFromGitHub(input, { signal } = {}) {
+ */export async function addSkillsFromGitHub(input, { signal } = {}) {
   const { owner, repo, folder } = parseRepo(input);
   const at = { owner, repo };
   /* the repository as it is now: the commit, and every file in it */
@@ -281,7 +391,9 @@ export async function addSkillsFromGitHub(input, { signal } = {}) {
   let read = null;
   /** @type {unknown} */
   let last = null;
-  for (const hosts of githubHosts()) {
+  for (const [i, hosts] of githubHosts().entries()) {
+    /* an entry that only knows a file host has nothing to say about listing */
+    if (i > 0 && !hosts.api) continue;
     try {
       const { commit } = await resolveCommit(at, folder.length ? folder : null, false, { signal, hosts });
       read = { commit, files: await listFiles(at, commit, [], { signal, hosts }), hosts };
@@ -327,7 +439,9 @@ export async function addSkillsFromGitHub(input, { signal } = {}) {
     const stage = join(downloadedFolder(), `.fetch-${process.pid}-${Date.now()}`);
     try {
       rmSync(stage, { recursive: true, force: true });
-      await downloadFiles(at, commit, dir ? dir.split('/') : [], inside, { dir: stage, signal, hosts });
+      const folderPath = dir ? dir.split('/') : [];
+      const send = await rawThatAnswers(at, commit, folderPath, inside, { signal, hosts });
+      await downloadFromAnywhere(at, commit, folderPath, inside, stage, { signal, hosts: send });
       const said = frontmatter(readFileSync(join(stage, 'SKILL.md'), 'utf8'));
       const id = skillId(said.name || basename(dir || repo));
       const to = join(downloadedFolder(), id);

package/studio/server/styles-store.mjs

@@ -0,0 +1,235 @@
+// @ts-check
+/**
+ * The styles a person added from a repository (`POST /api/styles/github`), kept beside them
+ * (`~/.aicut/style-library/styles.json`): each is a whole starter film like the built-in ones (templates.mjs), whose
+ * project carries the skill it came from — the skill the film's next editor follows. The page itself is generated here,
+ * in a palette chosen from the skill's id, so the card shows a real frame (template-posters.mjs) and a project made
+ * from it already draws; the skill is what says how the film should be restyled.
+ *
+ * Not `~/.aicut/skills`: that is the name the agent's own scanner walks. This is AICUT's list of style cards only.
+ */
+import { mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+import { filmShell, motionMath, pageHead } from './templates-page.mjs';
+
+/** Where the list lives. */
+const stylesFile = () => join(studioHome(), 'style-library', 'styles.json');
+
+/** The home this list sits in (projects.mjs's, so a test's AICUT_HOME keeps it apart too). */
+const studioHome = () => process.env.AICUT_HOME || join(homedir(), '.aicut');
+
+/** What a style says of itself on disk. @typedef {{ id: string, title: string, hint: string, skill: string,
+ *   repo: string, seconds: number, width: number, height: number, at: string }} StyleEntry */
+
+/** The styles this person added, oldest last. @returns {StyleEntry[]} */
+export function userStyles() {
+  try {
+    const list = JSON.parse(readFileSync(stylesFile(), 'utf8'));
+    return Array.isArray(list) ? list.filter((one) => one && typeof one.id === 'string' && typeof one.skill === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+/** The folder-name part of a style's id: lowercase letters, digits and hyphens, short. */
+const slug = (/** @type {string} */ text) => text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40).replace(/-+$/g, '') || 'style';
+
+/**
+ * Register what a repository's skills became (`skills.mjs` fetched them): one style per skill, the skill's own name and
+ * words on the card. A skill already a style of is replaced — fetching it again is how its card is refreshed.
+ * @param {{ id: string, name?: string, description?: string, from?: string }[]} skills
+ * @returns {StyleEntry[]} the entries now in the list, the new ones last
+ */
+export function addUserStyles(skills) {
+  const kept = userStyles().filter((one) => !skills.some((skill) => one.skill === skill.id));
+  const now = new Date().toISOString();
+  const added = skills.map((skill) => ({
+    id: slug(`gh-${skill.id}`),
+    title: skill.name || skill.id,
+    hint: skill.description || '',
+    skill: skill.id,
+    repo: skill.from || '',
+    seconds: 6,
+    width: 1920,
+    height: 1080,
+    at: now,
+  }));
+  const list = [...kept, ...added];
+  writeList(list);
+  return list;
+}
+
+/** A style gone from the list (its skill stays in the skill library). @param {string} id @returns {boolean} */
+export function removeUserStyle(id) {
+  const list = userStyles();
+  const rest = list.filter((one) => one.id !== id);
+  if (rest.length === list.length) return false;
+  writeList(rest);
+  rmSync(join(studioHome(), 'template-covers', id), { recursive: true, force: true });
+  return true;
+}
+
+/** @param {StyleEntry[]} list */
+function writeList(list) {
+  mkdirSync(join(studioHome(), 'style-library'), { recursive: true });
+  writeFileSync(stylesFile(), `${JSON.stringify(list, null, 2)}\n`);
+}
+
+/** A colour and a composition chosen from a skill's id: the same skill lands on the same palette every time. */
+const HUES = [14, 42, 96, 152, 188, 214, 262, 292, 328];
+const hashOf = (/** @type {string} */ id) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
+  return hash;
+};
+const hueOf = (/** @type {string} */ id) => HUES[hashOf(id) % HUES.length];
+
+/** The three compositions a style card can be drawn in, picked by the same hash as its colour. */
+const VARIANTS = /** @type {const} */ (['rings', 'bars', 'grid']);
+
+/**
+ * How big the name is set: a name is one line, and one line has to fit the column whatever it says (a 4-character
+ * Chinese name and a 22-character id are not the same picture). Counted in ems — a CJK character is one, a Latin one
+ * about half.
+ */
+function nameSize(/** @type {string} */ title) {
+  let ems = 0;
+  for (const ch of String(title ?? '')) ems += /[\u2e80-\uffff]/.test(ch) ? 1 : /[A-Z]/.test(ch) ? 0.62 : 0.53;
+  return Math.max(44, Math.min(116, Math.round(920 / Math.max(3, ems))));
+}
+
+/**
+ * The art a card is drawn with: one shape language per variant, all of it in the skill's own hue. Every element is in
+ * place at t=0 (nothing is grown from nothing), because the cover is a frame of this page at its first moment.
+ * @param {string} variant @param {number} hue @returns {string}
+ */
+function artMarkup(variant, hue) {
+  if (variant === 'rings') {
+    return `<svg class="art" id="art" viewBox="0 0 620 620" width="620" height="620" fill="none">
+    <circle id="a1" cx="310" cy="310" r="252" stroke="hsl(${hue} 62% 62%)" stroke-width="2" stroke-dasharray="3 16" opacity="0.9"/>
+    <circle id="a2" cx="310" cy="310" r="184" stroke="hsl(${hue} 70% 64%)" stroke-width="2" opacity="0.55"/>
+    <circle id="a3" cx="310" cy="310" r="104" fill="hsl(${hue} 74% 56%)"/>
+    <line id="a4" x1="310" y1="18" x2="310" y2="602" stroke="hsl(${hue} 55% 78%)" stroke-width="1" opacity="0.4"/>
+  </svg>`;
+  }
+  if (variant === 'bars') {
+    const heights = [168, 268, 372, 470, 330, 214];
+    const bars = heights.map((h, i) =>
+      `<rect id="b${i}" x="${28 + i * 96}" y="${596 - h}" width="60" height="${h}" fill="hsl(${hue} ${i === 3 ? 76 : 58}% ${i === 3 ? 60 : 44}%)"/>`).join('\n    ');
+    return `<svg class="art" id="art" viewBox="0 0 620 620" width="620" height="620">
+    ${bars}
+    <line x1="16" y1="596" x2="604" y2="596" stroke="hsl(${hue} 40% 70%)" stroke-width="1.5" opacity="0.5"/>
+  </svg>`;
+  }
+  const lines = [];
+  for (let i = 0; i <= 6; i++) {
+    lines.push(`<line x1="${24 + i * 95}" y1="16" x2="${24 + i * 95}" y2="604" stroke="hsl(${hue} 40% 72%)" stroke-width="1" opacity="0.28"/>`);
+    lines.push(`<line x1="24" y1="${16 + i * 98}" x2="594" y2="${16 + i * 98}" stroke="hsl(${hue} 40% 72%)" stroke-width="1" opacity="0.28"/>`);
+  }
+  const cells = [[1, 1], [3, 1], [4, 2], [2, 3], [5, 4]]
+    .map(([col, row], i) => `<rect id="c${i}" x="${29 + col * 95}" y="${21 + row * 98}" width="86" height="88" fill="hsl(${hue} ${70 + i * 2}% ${58 - i * 3}%)" opacity="${0.9 - i * 0.09}"/>`)
+    .join('\n    ');
+  return `<svg class="art" id="art" viewBox="0 0 620 620" width="620" height="620">
+    <g id="lattice">
+    ${lines.join('\n    ')}
+    </g>
+    ${cells}
+  </svg>`;
+}
+
+/**
+ * The starter film a style's project is made of: one page that already draws in a palette and a composition the style
+ * owns, and the film's shell around it. It is a real still — a ground with a light in it, a shape language in the
+ * accent colour, the name set to the column, a rule and a foot — not a coloured band with a label: a card whose picture
+ * is this page's first frame has to look like the first frame of a film somebody could have made. What the look *means*
+ * — what to restyle it into — is the skill the project carries.
+ * @param {StyleEntry} entry
+ * @returns {{ 'film.html': string, [page: string]: string }}
+ */
+export function styleFiles(entry) {
+  const hue = hueOf(entry.id);
+  const variant = VARIANTS[hashOf(entry.id) % VARIANTS.length];
+  const size = nameSize(entry.title);
+  const page = `${pageHead(escapeHtml(entry.title))}
+<style>
+  body { background: #0A0B0D; color: hsl(${hue} 30% 96%); }
+  .ground { position: absolute; inset: 0; background:
+      radial-gradient(760px 760px at 76% 44%, hsl(${hue} 52% 26% / 0.85), transparent 66%),
+      radial-gradient(900px 620px at 6% 96%, hsl(${hue} 62% 40% / 0.22), transparent 62%),
+      linear-gradient(158deg, hsl(${hue} 22% 13%), hsl(${hue} 26% 7%) 72%); }
+  .art { position: absolute; right: 108px; top: 50%; margin-top: -310px; }
+  .copy { position: absolute; left: 118px; top: 50%; margin-top: -168px; width: 900px; }
+  .kicker { margin: 0 0 26px; font-size: 21px; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase;
+    color: hsl(${hue} 44% 72%); }
+  .name { margin: 0; font-size: ${size}px; line-height: 0.98; font-weight: 800; letter-spacing: -0.025em;
+    color: hsl(${hue} 26% 98%); word-break: break-word; }
+  .rule { height: 3px; width: 268px; margin: 36px 0 0; background: hsl(${hue} 76% 58%); transform-origin: left center; }
+  .foot { position: absolute; left: 120px; right: 120px; bottom: 62px; display: flex; justify-content: flex-end;
+    font-size: 18px; font-weight: 600; letter-spacing: 0.24em; color: hsl(${hue} 18% 56%); }
+  .bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; transform-origin: left center;
+    background: hsl(${hue} 76% 58%); }
+</style>
+</head>
+<body>
+  <div class="ground"></div>
+  ${artMarkup(variant, hue)}
+  <div class="copy">
+    <p class="kicker" id="kicker">${escapeHtml(entry.repo || 'AICUT')}</p>
+    <h1 class="name" id="name">${escapeHtml(entry.title)}</h1>
+    <div class="rule" id="rule"></div>
+  </div>
+  <div class="foot"><span id="count">${entry.seconds}s</span></div>
+  <div class="bar" id="bar"></div>
+<script>
+  var DUR = ${entry.seconds};
+  var VARIANT = ${JSON.stringify(variant)};
+${motionMath}
+  /* Nothing here hides at t=0: a cover is this page's first frame, and a project opens on it. What moves is the shape
+     language (a slow turn, a scale, a stagger), the name's rise of a few pixels, and the hairline at the foot. */
+  function frame(t) {
+    var p = prog(t, 0, DUR, EASE.linear);
+    el('bar').style.transform = 'scaleX(' + p.toFixed(4) + ')';
+    el('rule').style.transform = 'scaleX(' + mix(0.62, 1, prog(t, 0.15, 1.5, EASE.out)).toFixed(3) + ')';
+    el('name').style.transform = 'translateY(' + mix(14, 0, prog(t, 0.1, 1.6, EASE.out)).toFixed(2) + 'px)';
+    el('kicker').style.opacity = String(mix(0.7, 1, prog(t, 0.4, 1.5, EASE.smooth)));
+    if (VARIANT === 'rings') {
+      el('a1').style.transform = 'rotate(' + (t * 9).toFixed(2) + 'deg)';
+      el('a1').style.transformOrigin = '310px 310px';
+      el('a3').style.transform = 'scale(' + mix(0.9, 1.06, prog(t, 0, DUR, EASE.inOut)).toFixed(4) + ')';
+      el('a3').style.transformOrigin = '310px 310px';
+      el('a4').style.transform = 'scaleY(' + mix(0.55, 1, prog(t, 0.2, 1.8, EASE.out)).toFixed(3) + ')';
+      el('a4').style.transformOrigin = '310px 310px';
+    }
+    if (VARIANT === 'bars') {
+      for (var i = 0; i < 6; i++) {
+        var one = el('b' + i);
+        one.style.transform = 'scaleY(' + mix(0.58, 1, prog(t, i * 0.09, 1.5, EASE.out)).toFixed(3) + ')';
+        one.style.transformOrigin = '0px 596px';
+      }
+    }
+    if (VARIANT === 'grid') {
+      el('lattice').style.opacity = String(mix(0.55, 1, prog(t, 0, 1.4, EASE.smooth)));
+      for (var c = 0; c < 5; c++) {
+        var cell = el('c' + c);
+        cell.style.transform = 'scale(' + mix(0.86, 1, prog(t, 0.12 + c * 0.11, 0.9, EASE.snap)).toFixed(3) + ')';
+        cell.style.transformOrigin = 'center';
+      }
+    }
+  }
+  window.film = { duration: DUR, frame: frame, ready: Promise.resolve() };
+</script>
+</body>
+</html>
+`;
+  return {
+    'film.html': filmShell(escapeHtml(entry.title), entry.width, entry.height, entry.id, entry.seconds),
+    [`pages/${entry.id}.html`]: page,
+  };
+}
+
+/** Text that comes from a repository goes into a page: a name with `<` in it would be markup there, not a name.
+ * @param {string} text */
+function escapeHtml(text) {
+  return String(text ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c] ?? c));
+}

package/studio/server/template-posters.mjs

@@ -17,7 +17,7 @@ import { dirname, join } from 'node:path';
 import { writeAtomic } from './atomic.mjs';
 import { pageFrame } from './pageframes.mjs';
 import { studioHome } from './projects.mjs';
-import { TEMPLATES } from './templates.mjs';
+import { templateById } from './templates.mjs';
 
 /** The width a cover is drawn at: a card's picture at twice its size. */
 const COVER_W = 480;
@@ -51,7 +51,7 @@ async function folderOf(template) {
  * @returns {Promise<Buffer | null>}
  */
 export async function templateCover(id, pages) {
-  const template = TEMPLATES.find((t) => t.id === id);
+  const template = templateById(id);
   if (!template) return null;
   let filling_ = filling.get(id);
   if (!filling_) {

package/studio/server/templates-page.mjs

@@ -1,93 +1,93 @@
-// @ts-check
-/**
- * What every starter film is built from (templates.mjs for the layouts, templates-styles.mjs for the seven design
- * systems): a page's `<head>` and the base style, the math its `frame(t)` shares, and the `film.html` that shows a page
- * from 0 to its length.
- *
- * The pages are strings, not files beside this module: Studio's server is bundled into the app, and a page read from
- * disk at runtime would not be there in the installed build.
- */
-
-/** A page's `<head>`, up to its base style (each page adds its own after): transparent, no scrollbars. */
-export const pageHead = (/** @type {string} */ title) => `<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<title>${title}</title>
-<style>
-  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
-  body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
-</style>`;
-
-/** The little math a layout page's `frame(t)` shares: clamped interpolation, ease-out, and a segment of t as 0…1. */
-export const pageMath = `  var clamp = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };
-  var seg = function (t, a, b) { return clamp((t - a) / (b - a)); };
-  var ease = function (x) { var c = clamp(x); return 1 - Math.pow(1 - c, 3); };
-  var el = function (id) { return document.getElementById(id); };`;
-
-/**
- * The whole of `lib/motion.js` from the direction skill (`skills/aicut-motion/references/pages.md`), in the plain
- * functions a page runs: easing that is exactly 0 and exactly 1 at the ends, `prog`, `settle` (lands on a beat, optional
- * bounce), `stepped` (a hand-made boil), `wobble`, `drawOn`, `counter`. A style page uses this and nothing else, so
- * every one of them keeps the same contract: the picture is a function of t.
- */
-export const motionMath = `  var clamp = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };
-  var mix = function (a, b, p) { return a + (b - a) * p; };
-  var EASE = {
-    out: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : 1 - Math.pow(2, -10 * p); },
-    in: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : Math.pow(2, 10 * p - 10); },
-    inOut: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : p < 0.5 ? Math.pow(2, 20 * p - 10) / 2 : (2 - Math.pow(2, -20 * p + 10)) / 2; },
-    smooth: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : p * p * (3 - 2 * p); },
-    snap: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : 1 - Math.pow(1 - p, 4); },
-    linear: function (p) { return clamp(p); }
-  };
-  var prog = function (t, start, dur, easing) { return (easing || EASE.smooth)(clamp((t - start) / dur)); };
-  var settle = function (t, landing, opt) {
-    var o = opt || {};
-    var lead = o.lead == null ? 0.05 : o.lead;
-    var dur = o.dur == null ? 0.45 : o.dur;
-    var bounce = o.bounce || 0;
-    var p = clamp((t - (landing - lead)) / dur);
-    if (!bounce) return p <= 0 ? 0 : p >= 1 ? 1 : 1 - Math.pow(2, -10 * p);
-    var s = 1.2 + bounce * 3;
-    return 1 + (s + 1) * Math.pow(p - 1, 3) + s * Math.pow(p - 1, 2);
-  };
-  var stepped = function (t, perSecond) { return Math.floor(t * perSecond) / perSecond; };
-  var hash = function (seed) {
-    var h = 2166136261, s = String(seed);
-    for (var i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
-    return ((h >>> 0) % 100000) / 100000;
-  };
-  var rand = function (seed) { return hash(seed); };
-  var wobble = function (seed, i, t, speed) {
-    var s = hash(seed) * 100, sp = speed == null ? 1 : speed;
-    return (Math.sin(t * sp * 1.7 + i * 0.137 + s) + Math.sin(t * sp * 2.9 + i * 0.311 + s * 1.7)) / 2;
-  };
-  var drawOn = function (path, p) {
-    var len = path.getTotalLength();
-    path.style.strokeDasharray = String(len);
-    path.style.strokeDashoffset = String(len * (1 - clamp(p)));
-  };
-  var counter = function (node, from, to, p) {
-    node.textContent = String(Math.round(mix(from, to, clamp(p))));
-  };
-  var el = function (id) { return document.getElementById(id); };`;
-
-/**
- * The film: one section, one page on one track, shown from 0 to the page's own length.
- * @param {string} title @param {number} width @param {number} height @param {string} page @param {number} seconds
- */
-export const filmShell = (title, width, height, page, seconds) => `<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=${width}, height=${height}">
-<title>${title}</title>
-</head>
-<body>
-<section>
-  <iframe id="card" src="pages/${page}.html#t=0,${seconds}"></iframe>
-</section>
-</body>
-</html>
-`;
+// @ts-check
+/**
+ * What every starter film is built from (templates.mjs for the layouts, templates-styles.mjs for the seven design
+ * systems): a page's `<head>` and the base style, the math its `frame(t)` shares, and the `film.html` that shows a page
+ * from 0 to its length.
+ *
+ * The pages are strings, not files beside this module: Studio's server is bundled into the app, and a page read from
+ * disk at runtime would not be there in the installed build.
+ */
+
+/** A page's `<head>`, up to its base style (each page adds its own after): transparent, no scrollbars. */
+export const pageHead = (/** @type {string} */ title) => `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>${title}</title>
+<style>
+  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
+  body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
+</style>`;
+
+/** The little math a layout page's `frame(t)` shares: clamped interpolation, ease-out, and a segment of t as 0…1. */
+export const pageMath = `  var clamp = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };
+  var seg = function (t, a, b) { return clamp((t - a) / (b - a)); };
+  var ease = function (x) { var c = clamp(x); return 1 - Math.pow(1 - c, 3); };
+  var el = function (id) { return document.getElementById(id); };`;
+
+/**
+ * The whole of `lib/motion.js` from the direction skill (`skills/aicut-motion/references/pages.md`), in the plain
+ * functions a page runs: easing that is exactly 0 and exactly 1 at the ends, `prog`, `settle` (lands on a beat, optional
+ * bounce), `stepped` (a hand-made boil), `wobble`, `drawOn`, `counter`. A style page uses this and nothing else, so
+ * every one of them keeps the same contract: the picture is a function of t.
+ */
+export const motionMath = `  var clamp = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };
+  var mix = function (a, b, p) { return a + (b - a) * p; };
+  var EASE = {
+    out: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : 1 - Math.pow(2, -10 * p); },
+    in: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : Math.pow(2, 10 * p - 10); },
+    inOut: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : p < 0.5 ? Math.pow(2, 20 * p - 10) / 2 : (2 - Math.pow(2, -20 * p + 10)) / 2; },
+    smooth: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : p * p * (3 - 2 * p); },
+    snap: function (p) { return p <= 0 ? 0 : p >= 1 ? 1 : 1 - Math.pow(1 - p, 4); },
+    linear: function (p) { return clamp(p); }
+  };
+  var prog = function (t, start, dur, easing) { return (easing || EASE.smooth)(clamp((t - start) / dur)); };
+  var settle = function (t, landing, opt) {
+    var o = opt || {};
+    var lead = o.lead == null ? 0.05 : o.lead;
+    var dur = o.dur == null ? 0.45 : o.dur;
+    var bounce = o.bounce || 0;
+    var p = clamp((t - (landing - lead)) / dur);
+    if (!bounce) return p <= 0 ? 0 : p >= 1 ? 1 : 1 - Math.pow(2, -10 * p);
+    var s = 1.2 + bounce * 3;
+    return 1 + (s + 1) * Math.pow(p - 1, 3) + s * Math.pow(p - 1, 2);
+  };
+  var stepped = function (t, perSecond) { return Math.floor(t * perSecond) / perSecond; };
+  var hash = function (seed) {
+    var h = 2166136261, s = String(seed);
+    for (var i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
+    return ((h >>> 0) % 100000) / 100000;
+  };
+  var rand = function (seed) { return hash(seed); };
+  var wobble = function (seed, i, t, speed) {
+    var s = hash(seed) * 100, sp = speed == null ? 1 : speed;
+    return (Math.sin(t * sp * 1.7 + i * 0.137 + s) + Math.sin(t * sp * 2.9 + i * 0.311 + s * 1.7)) / 2;
+  };
+  var drawOn = function (path, p) {
+    var len = path.getTotalLength();
+    path.style.strokeDasharray = String(len);
+    path.style.strokeDashoffset = String(len * (1 - clamp(p)));
+  };
+  var counter = function (node, from, to, p) {
+    node.textContent = String(Math.round(mix(from, to, clamp(p))));
+  };
+  var el = function (id) { return document.getElementById(id); };`;
+
+/**
+ * The film: one section, one page on one track, shown from 0 to the page's own length.
+ * @param {string} title @param {number} width @param {number} height @param {string} page @param {number} seconds
+ */
+export const filmShell = (title, width, height, page, seconds) => `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=${width}, height=${height}">
+<title>${title}</title>
+</head>
+<body>
+<section>
+  <iframe id="card" src="pages/${page}.html#t=0,${seconds}"></iframe>
+</section>
+</body>
+</html>
+`;