@autoaiai/aicut 0.1.7 → 0.1.13

package/studio/server/server.mjs

@@ -19,7 +19,7 @@ import { fileURLToPath } from 'node:url';
 import { createServer } from 'node:http';
 import { mkdir, readFile } from 'node:fs/promises';
 import { createHash } from 'node:crypto';
-import { spawn } from 'node:child_process';
+import { execFile, spawn } from 'node:child_process';
 import { EditError, clipOverrides, editProjectFilm, readProjectFilm } from './film.mjs';
 import { FileError, bringIn, collect, extractAudio, freezeFrame, hideFile, importFile, inside, listFiles, makeFolder, moveCheck, moveFile, readable, readPage, relink } from './files.mjs';
 import { ExportError, createExports, draftApps, exportCapabilities, exportsRoot, projectSizes } from './exports.mjs';
@@ -41,7 +41,8 @@ import { listSfx, sfxJob, startSfx } from './sfx.mjs';
 import { listExamples } from './examples.mjs';
 import { createFromTemplate, listTemplates } from './templates.mjs';
 import { templateCover } from './template-posters.mjs';
-import { addSkillsFromGitHub, installSkills, listSkills } from './skills.mjs';
+import { addSkillsFromGitHub, installSkills, listSkills, listSkillsFor, removeSkill } from './skills.mjs';
+import { addUserStyles, removeUserStyle, userStyles } from './styles-store.mjs';
 import { pickFiles, pickFolder } from './folder-picker.mjs';
 import { readPrefs, writePrefs } from './prefs.mjs';
 import { ensureProxies } from './proxies.mjs';
@@ -223,6 +224,33 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
     if (req.method !== 'GET' && req.method !== 'HEAD' && req.headers.origin !== origin) throw new HttpError(403, 'not from Studio');
   }
 
+  /**
+   * Whether ffmpeg and ffprobe answer here — video pictures, sound waves, exports, speech to text — asked in the
+   * background and never on a request: /api/health answers at once even while a first `ffmpeg -version` is still
+   * running (a scanner reading a new 80 MB file takes seconds, and a health that waits for it looks like a Studio that
+   * never came up). `null` until the first answer; asked again after a minute, or after a few seconds when it was no
+   * (the desktop app downloads its own while Studio runs, and they work the moment they land). Whoever starts Studio
+   * reads it to know whether to hand the address on (web.mjs does, for `AiCut.exe --web`).
+   * @returns {boolean | null}
+   */
+  let toolsAskedAt = 0;
+  /** @type {boolean | null} */
+  let toolsThere = null;
+  let toolsChecking = false;
+  function ffmpegHere() {
+    if (!toolsChecking && Date.now() - toolsAskedAt >= (toolsThere === true ? 60_000 : 20_000)) {
+      toolsAskedAt = Date.now();
+      toolsChecking = true;
+      const answers = (/** @type {string} */ bin) => new Promise((done) => {
+        execFile(bin, ['-version'], { timeout: 30_000, windowsHide: true }, (error) => done(!error));
+      });
+      void Promise.all(['ffmpeg', 'ffprobe'].map(answers))
+        .then((both) => { toolsThere = both.every(Boolean); })
+        .finally(() => { toolsChecking = false; });
+    }
+    return toolsThere;
+  }
+
   /*
    * The editor pages' streams of events, over WebSockets (websocket.mjs): `/api/events`, what the CLI's `open` sends
    * (and how many pages are open), and `/api/projects/:id/events`, a project's changes and the questions for the
@@ -248,8 +276,9 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
     const path = url.pathname;
 
     /* which Studio this is: the CLI replaces an older one, and finds its own home's when run.json is gone. Asked
-       without the key, so it says nothing of the machine: its home only as a digest (homeTag), no process id */
-    if (path === '/api/health') return json(res, 200, { product: 'aicut-studio', version: VERSION, home: homeTag(), filmOrigin });
+       without the key, so it says nothing of the machine: its home only as a digest (homeTag), no process id — and
+       whether ffmpeg is here, which `AiCut.exe --web` needs to know before it hands the address to a browser */
+    if (path === '/api/health') return json(res, 200, { product: 'aicut-studio', version: VERSION, home: homeTag(), filmOrigin, ffmpeg: ffmpegHere() });
     const signIn = [`${COOKIE}=${key}; Path=/; HttpOnly; SameSite=Strict`, `${FRAMED}=${key}; Path=/; HttpOnly; Secure; SameSite=None; Partitioned`];
     /** A page's address with the key in it (the address bar is what a person copies). */
     const keyed = (/** @type {string} */ to) => {
@@ -406,7 +435,7 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
     /* the example films (examples.mjs): none when the index cannot be read */
     if (parts[0] === 'examples' && parts.length === 1 && req.method === 'GET') return json(res, 200, { examples: await listExamples() });
     /* the home page's starter templates (templates.mjs): what they are; their files stay on this side */
-    if (parts[0] === 'templates' && parts.length === 1 && req.method === 'GET') return json(res, 200, { templates: listTemplates() });
+    if (parts[0] === 'templates' && parts.length === 1 && req.method === 'GET') return json(res, 200, { templates: listTemplates(url.searchParams.get('lang') ?? undefined) });
     /* a template's cover: its own film drawn once, then cached (template-posters.mjs) */
     if (parts[0] === 'templates' && parts.length === 3 && parts[2] === 'cover' && req.method === 'GET') {
       const jpeg = await templateCover(parts[1], pages).catch((e) => {
@@ -419,7 +448,16 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
     /* the skills a new project may start with (skills.mjs): the ones this copy of AICUT brings, and the ones fetched
        from a repository before. POST `skills/github` { repo } fetches a repository's skills into AICUT's home, where the
        next GET lists them beside the app's own */
-    if (parts[0] === 'skills' && parts.length === 1 && req.method === 'GET') return json(res, 200, { skills: listSkills() });
+    if (parts[0] === 'skills' && parts.length === 1 && req.method === 'GET') return json(res, 200, { skills: listSkillsFor(url.searchParams.get('lang') ?? undefined) });
+    /* DELETE `skills/:id` takes a skill off the machine (skills.mjs): the folder goes from the library it came from, and
+       its style card goes with it — a tile that starts a project with a skill that is not there starts nothing. A project
+       that already carries a copy under `.pi/skills` keeps it. The app's own two are refused (409). */
+    if (parts[0] === 'skills' && parts.length === 2 && req.method === 'DELETE') {
+      const removed = removeSkill(parts[1]);
+      const card = userStyles().find((one) => one.skill === removed.id);
+      if (card) removeUserStyle(card.id);
+      return json(res, 200, { ...removed, card: card?.id ?? null });
+    }
     if (parts[0] === 'skills' && parts[1] === 'github' && parts.length === 2 && req.method === 'POST') {
       const { repo } = /** @type {{ repo?: string }} */ (await readJson(req));
       try {
@@ -430,6 +468,33 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
       }
     }
 
+    /* the styles a person added from a repository (styles-store.mjs): POST `styles/github` { repo } fetches the
+       repository's skills (skills.mjs) and makes one style card of the Templates page per skill — the project it
+       starts carries that skill, and the card's picture is the starter film drawn for real. DELETE `styles/:id`
+       takes a card away; its skill stays in the library. */
+    if (parts[0] === 'styles' && parts[1] === 'github' && parts.length === 2 && req.method === 'POST') {
+      const { repo } = /** @type {{ repo?: string }} */ (await readJson(req));
+      try {
+        const { skills } = await addSkillsFromGitHub(String(repo ?? ''));
+        return json(res, 200, { styles: addUserStyles(skills) });
+      } catch (e) {
+        if (e instanceof FetchError) throw new HttpError(e.status, e.message);
+        throw e;
+      }
+    }
+    /* one skill made a style card of its own (the Skills page's switch): the skill is already in the library — the ones
+       AICUT brings and the ones fetched — so this only decides whether the Templates page offers a film in its name. */
+    if (parts[0] === 'styles' && parts.length === 1 && req.method === 'POST') {
+      const { skill } = /** @type {{ skill?: string }} */ (await readJson(req));
+      const asked = listSkills().find((one) => one.id === String(skill ?? ''));
+      if (!asked) throw new HttpError(404, 'no such skill');
+      addUserStyles([asked]);
+      return json(res, 200, { styles: userStyles() });
+    }
+    if (parts[0] === 'styles' && parts.length === 2 && req.method === 'DELETE') {
+      return json(res, 200, { removed: removeUserStyle(parts[1]) });
+    }
+
     /* the Projects window's recycle bin (recycle.mjs): where a deleted project waits 30 days before it is gone for good.
          GET    recycle                → { entries }, newest first, each with the days it has left
          POST   recycle/:id/restore    → { project }: its folder back where it was, and on the list again

package/studio/server/skill-summaries.mjs

@@ -0,0 +1,60 @@
+// @ts-check
+/**
+ * One line of each skill's own words, in a language a person reads — the Skills page and the style cards on the
+ * Templates page say this instead of the frontmatter's paragraph.
+ *
+ * A skill's `description` in its SKILL.md is written for the agent: the whole of what it covers, in the upstream
+ * project's own language, several hundred characters of it. That is what the agent needs and a person scanning a list
+ * does not. So each row says one line here (`zh-CN` written by hand, for the skills AICUT ships), and anything without a
+ * line of its own falls back to the first sentence of its description — never to nothing.
+ *
+ * A skill fetched from a repository later has no line: nobody has read it yet. `firstSentence` still gives it a short
+ * line, in its own words, which is the honest thing to show.
+ */
+
+/**
+ * Hand-written lines, by language, by skill id. Only the languages actually written appear: a language with no entry
+ * falls through to the description.
+ * @type {Record<string, Record<string, string>>}
+ */
+export const SKILL_SUMMARIES = {
+  'zh-CN': {
+    aicut: '做片、剪辑、检查、渲染，一条龙：写 film.html、逐段检查画面、导出成片，也能直接开 Studio。',
+    'aicut-motion': '给片子做美术指导：配色、字体、真转场、按节拍排布；选题只有一句话时，先从 86 套归档风格挑三种摆成卡让你选。',
+  },
+};
+
+/** The first sentence of a text, short enough for one line: the fallback for a skill with no line of its own.
+ * @param {string} [text] @param {number} [limit] @returns {string} */
+export function firstSentence(text, limit = 64) {
+  const one = String(text ?? '').replace(/\s+/g, ' ').trim();
+  if (!one) return '';
+  /* a sentence ends at a CJK full stop, or at a Western one that ends a word; `e.g.`, `i.e.` and `1.5` do not */
+  let at = -1;
+  const cjk = /[。！？]/.exec(one);
+  if (cjk) at = cjk.index;
+  const western = /[.!?](?=\s|$)/g;
+  let found;
+  while ((found = western.exec(one))) {
+    const tail = one.slice(Math.max(0, found.index - 3), found.index + 1);
+    if (/^[A-Za-z]\.[A-Za-z]\.$/.test(tail)) continue;
+    at = at < 0 ? found.index : Math.min(at, found.index);
+    break;
+  }
+  const cut = at >= 0 ? one.slice(0, at + 1) : one;
+  return cut.length > limit ? `${cut.slice(0, limit).trimEnd()}…` : cut;
+}
+
+/**
+ * What a skill says of itself, one line, in `lang` when a line was written: the hand-written one, else its own first
+ * sentence. @param {string} id @param {string} description @param {string} [lang] @returns {string}
+ */
+export function summaryFor(id, description, lang = '') {
+  return SKILL_SUMMARIES[lang]?.[id] ?? firstSentence(description);
+}
+
+/** Whether a hand-written line exists for this skill in this language (tests and the Skills page's hint use it).
+ * @param {string} id @param {string} lang @returns {boolean} */
+export function hasSummary(id, lang) {
+  return Boolean(SKILL_SUMMARIES[lang]?.[id]);
+}

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_) {