@nodaro/prompts 1.47.0 → 1.49.0

package/src/__tests__/style-media.test.ts

@@ -0,0 +1,141 @@
+/**
+ * A style's medium, tones and media (`Style.medium` / `tones` / `media`):
+ * - every style classifies itself; the 49 styles offered for images and video
+ *   keep exactly the medium and tones Nodaro Motion's art-style line has read
+ *   them with so far (its own id lists), so moving them into the catalog
+ *   changes no prompt;
+ * - the video-only styles are rendered 3D looks, offered for video alone;
+ * - image style lists leave them out, and the wire carries `media` so a thin
+ *   client can do the same.
+ */
+import { afterEach, describe, expect, it } from "vitest"
+import {
+  STYLES,
+  STYLE_MEDIUMS,
+  getStyleMedium,
+  getStyleTones,
+  styleOffersMedia,
+  stylesForMedia,
+  styleOffersRestyle,
+  stylesForRestyle,
+  getPickerCatalog,
+  projectPickerCatalog,
+  registerCatalogPack,
+  resetCatalogPacks,
+} from "../index.js"
+
+afterEach(() => resetCatalogPacks())
+
+/** Nodaro Motion's lists as they read the 49 styles before the catalog carried a medium. */
+const PHOTOGRAPHIC = ["photorealistic", "cinematic", "noir", "early-color-photo", "retro-vintage", "cyberpunk", "steampunk", "glitch-art"]
+const RENDERED = ["3d-render", "low-poly", "isometric", "pixar-3d", "claymation"]
+const BLACK_AND_WHITE = ["noir", "manga", "pencil-sketch", "charcoal", "etching", "woodcut", "ink-wash"]
+const ONE_COLOUR = ["blueprint", "ascii-art", "chalkboard"]
+const VIDEO_ONLY = ["felt-puppet", "knitted-yarn", "toy-figure-3d", "painterly-3d", "painted-clay"]
+/** Left out of restyle lists: in tests each came out as the same plain 2D cartoon, without its own look. */
+const NOT_FOR_RESTYLE = ["fantasy", "concept-art", "surrealism"]
+
+const both = STYLES.filter((s) => s.media === undefined)
+
+describe("medium and tones", () => {
+  it("every style declares a known medium", () => {
+    for (const s of STYLES) expect(STYLE_MEDIUMS, s.id).toContain(s.medium)
+  })
+
+  it("the 49 styles for images and video keep the medium Nodaro Motion read them with", () => {
+    expect(both).toHaveLength(49)
+    for (const s of both) {
+      const expected = PHOTOGRAPHIC.includes(s.id) ? "photo" : RENDERED.includes(s.id) ? "3d" : "2d"
+      expect(getStyleMedium(s.id), s.id).toBe(expected)
+    }
+  })
+
+  it("tones: black and white, one colour, or none", () => {
+    for (const s of STYLES) {
+      const expected = BLACK_AND_WHITE.includes(s.id) ? "black-and-white" : ONE_COLOUR.includes(s.id) ? "one-colour" : undefined
+      expect(getStyleTones(s.id), s.id).toBe(expected)
+    }
+  })
+
+  it("an unknown id has no medium and no tones", () => {
+    expect(getStyleMedium("no-such-style")).toBeUndefined()
+    expect(getStyleMedium(undefined)).toBeUndefined()
+    expect(getStyleTones("no-such-style")).toBeUndefined()
+  })
+})
+
+describe("media", () => {
+  it("the video-only styles are rendered 3D looks, offered for video alone", () => {
+    const videoOnly = STYLES.filter((s) => s.media !== undefined)
+    expect(videoOnly.map((s) => s.id)).toEqual(VIDEO_ONLY)
+    for (const s of videoOnly) {
+      expect(s.media, s.id).toEqual(["video"])
+      expect(getStyleMedium(s.id), s.id).toBe("3d")
+      expect(styleOffersMedia(s, "video"), s.id).toBe(true)
+      expect(styleOffersMedia(s, "image"), s.id).toBe(false)
+    }
+  })
+
+  it("an image list leaves out the video-only styles; a video list has every style, in catalog order", () => {
+    expect(stylesForMedia(STYLES, "image").map((s) => s.id)).toEqual(both.map((s) => s.id))
+    expect(stylesForMedia(STYLES, "video").map((s) => s.id)).toEqual(STYLES.map((s) => s.id))
+  })
+
+  it("a style with no media is offered for both", () => {
+    expect(styleOffersMedia({}, "image")).toBe(true)
+    expect(styleOffersMedia({}, "video")).toBe(true)
+  })
+})
+
+describe("restyle", () => {
+  it("exactly the styles that do not hold up as a restyle say so", () => {
+    expect(STYLES.filter((s) => !styleOffersRestyle(s)).map((s) => s.id)).toEqual(NOT_FOR_RESTYLE)
+    for (const id of NOT_FOR_RESTYLE) expect(STYLES.find((s) => s.id === id)!.restyle, id).toBe(false)
+  })
+
+  it("a restyle list is the video list without them, in catalog order", () => {
+    expect(stylesForRestyle(STYLES).map((s) => s.id)).toEqual(STYLES.filter((s) => !NOT_FOR_RESTYLE.includes(s.id)).map((s) => s.id))
+  })
+
+  it("video generation still offers them", () => {
+    for (const id of NOT_FOR_RESTYLE) expect(stylesForMedia(STYLES, "video").some((s) => s.id === id), id).toBe(true)
+  })
+
+  it("a style that says nothing is offered for restyle", () => {
+    expect(styleOffersRestyle({})).toBe(true)
+  })
+})
+
+describe("the style catalog", () => {
+  const catalog = () => getPickerCatalog("style")!
+
+  it("carries media on the video-only options only", () => {
+    for (const o of catalog().options!) {
+      expect(o.media, o.id).toEqual(VIDEO_ONLY.includes(o.id) ? ["video"] : undefined)
+    }
+  })
+
+  it("the wire carries media at both detail levels", () => {
+    for (const detail of ["compact", "full"] as const) {
+      const options = projectPickerCatalog(catalog(), { detail }).options!
+      const felt = options.find((o) => o.id === "felt-puppet")!
+      expect(felt.media, detail).toEqual(["video"])
+      expect(options.find((o) => o.id === "anime")!.media, detail).toBeUndefined()
+    }
+  })
+
+  it("the catalog and the wire carry restyle: false on exactly those options, at both detail levels", () => {
+    for (const o of catalog().options!) expect(o.restyle, o.id).toBe(NOT_FOR_RESTYLE.includes(o.id) ? false : undefined)
+    for (const detail of ["compact", "full"] as const) {
+      const options = projectPickerCatalog(catalog(), { detail }).options!
+      expect(options.find((o) => o.id === "fantasy")!.restyle, detail).toBe(false)
+      expect(options.find((o) => o.id === "vaporwave")!.restyle, detail).toBeUndefined()
+    }
+  })
+
+  it("a catalog pack that removes a video-only style takes away its medium too", () => {
+    registerCatalogPack({ id: "t-deny", catalogId: "style", mode: "deny", denyIds: ["felt-puppet"] })
+    expect(getStyleMedium("felt-puppet")).toBeUndefined()
+    expect(getPickerCatalog("style")!.options!.some((o) => o.id === "felt-puppet")).toBe(false)
+  })
+})

package/src/__tests__/style-video-wording.test.ts

@@ -0,0 +1,273 @@
+/**
+ * Every style carries a VIDEO-only wording (`videoPromptHint`): what the medium
+ * is, then its concrete techniques (the pattern that styled every shot in video
+ * tests). Every video surface reads it through `getStyleVideoPromptHint`
+ * (falling back to `promptHint` for a pack style without one); every image
+ * surface keeps `promptHint`. These tests pin:
+ *   - stills render exactly the image wording for every style;
+ *   - video renders each style's own video wording, the three tested on video
+ *     and the two chosen for 3D Render and Charcoal word for word, the
+ *     photographic ones still photographic;
+ *   - a deployment's catalog packs reach the video wording the same way they
+ *     reach the image wording, and a rewrite of the image wording never ships
+ *     beside the stock video wording.
+ */
+import { afterEach, describe, expect, it } from "vitest"
+import {
+  STYLES,
+  getStyle,
+  getStylePromptHint,
+  getStyleVideoPromptHint,
+  getPickerCatalog,
+  projectPickerCatalog,
+  registerCatalogPack,
+  resetCatalogPacks,
+  renderDirectionHints,
+  composeVideoPromptText,
+  assembleImageInput,
+  getParameterPromptHint,
+  type PickerCatalogInput,
+} from "../index.js"
+
+afterEach(() => resetCatalogPacks())
+
+const LOW_POLY_VIDEO =
+  "Stylised low poly 3D animation, computer-generated: every person, face, vehicle and room built from large flat-shaded triangles, visible facets on every surface, flat untextured colours, crisp shadow edges between facets."
+/** The wordings tested on video (Seedance 2.5), word for word. */
+const TESTED_ON_VIDEO: Readonly<Record<string, string>> = {
+  "felt-puppet": "Needle-felted stop-motion puppet animation, handmade: every person a felt puppet with soft fuzzy wool-felt skin, simple stitched features, small bead-like eyes and hair of felted wool strands, clothes sewn from real fabric with visible weave. The whole set is a handmade felt miniature: every car a fuzzy felt-covered model with felt seats, every wall, floor, curtain, table, chair and plant made of felt or wool fabric with visible fibres, the street and sky felt too; warm soft studio light on a tabletop miniature set, a slight stop-motion step to the motion.",
+  "knitted-yarn": "Knitted yarn stop-motion animation, handmade: every person a knitted doll with yarn skin in visible knit loops, hair of chunky yarn strands, clothes knitted in cable and rib stitch; every car, building, road, tree and sky knitted from wool yarn with visible stitches; soft warm studio light on a tabletop miniature set, a slight stop-motion step to the motion.",
+  "toy-figure-3d": "Stylised 3D toy animation, computer-generated: every person a rounded vinyl toy figure with smooth glossy plastic skin, a simplified oversized head, small dot eyes and moulded plastic hair, clothes as moulded painted plastic; every car, room and prop a chunky rounded toy model with soft bevelled edges; bright clean colours, soft studio lighting.",
+  "painterly-3d": "Painterly 3D animation, computer-generated with a hand-painted finish: every person a stylised 3D character with soft rounded features and expressive eyes, skin, hair and clothes textured with visible painted brush strokes; every room and landscape a 3D set painted like a storybook illustration; warm glowing light, rich soft colours.",
+  "painted-clay": "Sculpted clay animation with a painted finish, handmade: every person sculpted from matte clay with visible thumbprints and tool marks, painted in soft gouache colour; every car, room and prop sculpted and hand-painted the same way; warm painterly light, a slight stop-motion step to the motion.",
+  "pop-art": "Flat 2D cel-shaded comic illustration, hand-drawn: thick uniform black ink outlines, flat colour fills, Ben-Day dot shading, bold saturated primary colours, high contrast.",
+  claymation: "Stop-motion claymation, handmade: every person, vehicle and set sculpted from matte plasticine clay with visible fingerprints and tool marks, rounded simplified forms, miniature handcrafted diorama sets, soft warm studio lighting.",
+  anime: "2D Japanese anime, hand-drawn cel animation: clean thin ink line art, flat cel shading with one hard shadow tone, large expressive eyes, hair drawn as solid shapes, saturated colours, painted backgrounds.",
+}
+/** The 3D Render and Charcoal video wordings as chosen, word for word, beside their unchanged image wordings. */
+const CHOSEN_FOR_VIDEO: Readonly<Record<string, { readonly video: string; readonly image: string }>> = {
+  "3d-render": {
+    video: "Stylised 3D render animation, computer-generated: every person, vehicle and room modelled in smooth matte CG surfaces, simplified clean forms, soft studio lighting, gentle ambient occlusion, bright clean colours.",
+    image: "3D rendered style, modern CGI aesthetic with clean shading, subtle ambient occlusion and crisp materials",
+  },
+  charcoal: {
+    video: "Rough 2D charcoal sketch, hand-drawn on white paper: every person and every face drawn in heavy black charcoal outlines and loose hatched strokes, white paper showing through, smudged edges, bold gestural lines.",
+    image: "rendered as a charcoal drawing on toothy paper, soft black and grey tonal masses with smudged blended midtones, sharp accented darks, expressive gestural strokes and the raw immediacy of a fine-art figure study",
+  },
+}
+/** The photographic styles: their video wording keeps them photographed, never drawn. */
+const PHOTOGRAPHIC = ["photorealistic", "cinematic", "noir", "retro-vintage", "early-color-photo"]
+const videoOf = (id: string) => STYLES.find((s) => s.id === id)!.videoPromptHint!
+const LOW_POLY_IMAGE =
+  "low poly style, faceted geometric 3D aesthetic with visible flat triangular faces, simplified forms and crisp shadow edges between facets"
+
+const styleNode = (style: string) => ({ id: "s1", type: "style", data: { style } })
+
+/** The styles offered for video alone (`media: ["video"]`). */
+const VIDEO_ONLY = ["felt-puppet", "knitted-yarn", "toy-figure-3d", "painterly-3d", "painted-clay"]
+/**
+ * A video wording's length cap. A style offered for images too names its medium and its techniques in one short line;
+ * a video-only style also names what the whole set is made of (cars, rooms, props), and the felt line that felted
+ * the whole set of a live-action clip on Seedance 2.5 (people, car, street and curtains) is 562 characters.
+ */
+const capOf = (id: string) => (VIDEO_ONLY.includes(id) ? 600 : 240)
+
+describe("the catalog", () => {
+  it("has 54 styles (49 for images and video, 5 for video alone), and every one carries its own video wording, different from its image wording", () => {
+    expect(STYLES).toHaveLength(54)
+    expect(STYLES.filter((s) => s.media?.length === 1 && s.media[0] === "video").map((s) => s.id)).toEqual(VIDEO_ONLY)
+    for (const s of STYLES) {
+      expect(s.videoPromptHint, s.id).toEqual(expect.any(String))
+      expect(s.videoPromptHint, s.id).not.toBe(s.promptHint)
+    }
+  })
+
+  it("each video wording names the medium, then its techniques after a colon: one sentence, one line", () => {
+    for (const s of STYLES) {
+      const v = s.videoPromptHint!
+      expect(v, s.id).toMatch(/^[^:]+: \S[^\n]*\.$/)
+      expect(v.length, s.id).toBeLessThanOrEqual(capOf(s.id))
+    }
+  })
+
+  it("the wordings tested on video are word for word", () => {
+    for (const [id, wording] of Object.entries(TESTED_ON_VIDEO)) expect(getStyleVideoPromptHint(id), id).toBe(wording)
+  })
+
+  it("the 3D Render and Charcoal video wordings are word for word, and their image wordings unchanged", () => {
+    for (const [id, { video, image }] of Object.entries(CHOSEN_FOR_VIDEO)) {
+      expect(getStyleVideoPromptHint(id), id).toBe(video)
+      expect(getStylePromptHint(id), id).toBe(image)
+    }
+  })
+
+  it("the photographic styles stay photographed on video", () => {
+    for (const id of PHOTOGRAPHIC) expect(getStyleVideoPromptHint(id), id).toMatch(/live-action|photograph/i)
+  })
+
+  it("Low Poly keeps its image wording and carries the video wording", () => {
+    expect(getStylePromptHint("low-poly")).toBe(LOW_POLY_IMAGE)
+    expect(getStyleVideoPromptHint("low-poly")).toBe(LOW_POLY_VIDEO)
+  })
+
+  it("every style's video wording is its own, read through getStyleVideoPromptHint", () => {
+    for (const s of STYLES) expect(getStyleVideoPromptHint(s.id), s.id).toBe(s.videoPromptHint)
+  })
+
+  it("an unknown or empty id has no wording on either surface", () => {
+    expect(getStyleVideoPromptHint("no-such-style")).toBe("")
+    expect(getStyleVideoPromptHint(undefined)).toBe("")
+    expect(getStyleVideoPromptHint("")).toBe("")
+  })
+})
+
+describe("image surfaces read only promptHint, for every style (a video-only one wired into an image included)", () => {
+  it("the direction fold on image", () => {
+    for (const s of STYLES) {
+      expect(renderDirectionHints({ style: s.id }, { surface: "image" }), s.id).toEqual([s.promptHint])
+    }
+  })
+
+  it("the assembled image prompt", () => {
+    for (const s of STYLES) {
+      const { prompt } = assembleImageInput({ userPrompt: "a man walks", provider: "flux-2-max", direction: { style: s.id } })
+      expect(prompt, s.id).toBe(`a man walks\n\n[style]:\n${s.promptHint}`)
+    }
+  })
+
+  it("a Style node's own hint (no surface, and surface image)", () => {
+    for (const s of STYLES) {
+      expect(getParameterPromptHint(styleNode(s.id)), s.id).toBe(s.promptHint)
+      expect(getParameterPromptHint(styleNode(s.id), undefined, { surface: "image" }), s.id).toBe(s.promptHint)
+    }
+  })
+})
+
+describe("video surfaces read the video wording", () => {
+  it("the direction fold on video: each style's video wording", () => {
+    for (const s of STYLES) expect(renderDirectionHints({ style: s.id }, { surface: "video" }), s.id).toEqual([videoOf(s.id)])
+  })
+
+  it("the composed video prompt", () => {
+    for (const s of STYLES) {
+      expect(composeVideoPromptText("a man walks", { style: s.id }), s.id).toBe(`a man walks\n\n[style]:\n${videoOf(s.id)}`)
+    }
+  })
+
+  it("a Style node folded into a video consumer", () => {
+    for (const s of STYLES) {
+      expect(getParameterPromptHint(styleNode(s.id), undefined, { surface: "video" }), s.id).toBe(videoOf(s.id))
+    }
+  })
+
+  it("keeps the node's own pre/post text around the video wording", () => {
+    const node = { id: "s1", type: "style", data: { style: "low-poly", preText: "before", postText: "after" } }
+    // The video wording ends a sentence, so what follows it is joined with a space (joinHintFragments).
+    expect(getParameterPromptHint(node, undefined, { surface: "video" })).toBe(`before, ${LOW_POLY_VIDEO} after`)
+  })
+
+  it("compact mode injects the same term on both surfaces", () => {
+    expect(renderDirectionHints({ style: "low-poly" }, { surface: "video", mode: "compact" })).toEqual(["low poly"])
+    const node = { id: "s1", type: "style", data: { style: "low-poly", hintMode: "compact" } }
+    expect(getParameterPromptHint(node, undefined, { surface: "video" })).toBe("low poly")
+  })
+
+  it("a Style node on a camera move's start state takes the video surface down with it", () => {
+    const nodes = [
+      { id: "cm", type: "camera-motion", data: { cameraMotion: "dolly-in" } },
+      styleNode("low-poly"),
+    ]
+    const edges = [{ id: "e1", source: "s1", target: "cm", targetHandle: "startState" }]
+    const video = getParameterPromptHint(nodes[0], { nodes, edges }, { surface: "video" })
+    const image = getParameterPromptHint(nodes[0], { nodes, edges })
+    expect(video).toContain(LOW_POLY_VIDEO)
+    expect(image).toContain(LOW_POLY_IMAGE)
+    expect(image).not.toContain(LOW_POLY_VIDEO)
+  })
+})
+
+describe("catalog packs", () => {
+  const styleCatalog = () => getPickerCatalog("style")!
+  const replaceWith = (mapOption: (o: NonNullable<PickerCatalogInput["options"]>[number]) => object) => {
+    const base = styleCatalog()
+    registerCatalogPack({
+      id: "t-style-replace",
+      catalogId: "style",
+      mode: "replace",
+      catalog: { ...base, options: base.options!.map((o) => ({ ...o, ...mapOption(o) })) },
+    })
+  }
+
+  it("the composed catalog carries every style's video wording", () => {
+    const options = styleCatalog().options!
+    expect(options).toHaveLength(54)
+    for (const o of options) expect(o.videoPromptHint, o.id).toBe(videoOf(o.id))
+  })
+
+  it("the wire projection does not carry it", () => {
+    const projected = projectPickerCatalog(styleCatalog(), { detail: "full" })
+    expect(JSON.stringify(projected)).not.toContain("videoPromptHint")
+  })
+
+  it("a deny pack: a denied style has no video wording either", () => {
+    registerCatalogPack({ id: "t-deny", catalogId: "style", mode: "deny", denyIds: ["low-poly"] })
+    expect(getStyleVideoPromptHint("low-poly")).toBe("")
+    expect(renderDirectionHints({ style: "low-poly" }, { surface: "video" })).toEqual([])
+    // A sibling the pack did not touch still resolves on both surfaces.
+    expect(getStyleVideoPromptHint("anime")).toBe(TESTED_ON_VIDEO.anime)
+    expect(getStylePromptHint("anime")).toBe(STYLES.find((s) => s.id === "anime")!.promptHint)
+  })
+
+  it("a deny pack on ANOTHER style keeps Low Poly's video wording", () => {
+    registerCatalogPack({ id: "t-deny", catalogId: "style", mode: "deny", denyIds: ["anime"] })
+    expect(getStyleVideoPromptHint("low-poly")).toBe(LOW_POLY_VIDEO)
+    expect(getStylePromptHint("low-poly")).toBe(LOW_POLY_IMAGE)
+  })
+
+  it("the browser's copy of the server catalog (full detail, no video wording) keeps the stock video wording", () => {
+    // What `catalog-bootstrap` registers on a curated deployment: the server's
+    // composed catalog read back from `/v1/catalogs?detail=full`.
+    const wire = projectPickerCatalog(styleCatalog(), { detail: "full" }) as unknown as PickerCatalogInput
+    registerCatalogPack({ id: "wire:style", catalogId: "style", mode: "replace", catalog: wire })
+    expect(getStyleVideoPromptHint("low-poly")).toBe(LOW_POLY_VIDEO)
+    expect(getStylePromptHint("low-poly")).toBe(LOW_POLY_IMAGE)
+  })
+
+  it("a pack that rewrites the image wording drops the stock video wording (video follows the rewrite)", () => {
+    replaceWith((o) => (o.id === "low-poly" ? { promptHint: "curated low poly wording", videoPromptHint: undefined } : {}))
+    expect(getStylePromptHint("low-poly")).toBe("curated low poly wording")
+    expect(getStyleVideoPromptHint("low-poly")).toBe("curated low poly wording")
+    expect(getStyle("low-poly")?.videoPromptHint).toBeUndefined()
+  })
+
+  it("a pack may carry its own video wording", () => {
+    replaceWith((o) => (o.id === "low-poly" ? { promptHint: "curated still", videoPromptHint: "curated motion" } : {}))
+    expect(getStylePromptHint("low-poly")).toBe("curated still")
+    expect(getStyleVideoPromptHint("low-poly")).toBe("curated motion")
+    expect(renderDirectionHints({ style: "low-poly" }, { surface: "video" })).toEqual(["curated motion"])
+    expect(renderDirectionHints({ style: "low-poly" }, { surface: "image" })).toEqual(["curated still"])
+  })
+
+  it("a pack may replace a stock style's video wording and keep its image wording", () => {
+    replaceWith((o) => (o.id === "anime" ? { videoPromptHint: "anime video wording" } : {}))
+    expect(getStylePromptHint("anime")).toBe(STYLES.find((s) => s.id === "anime")!.promptHint)
+    expect(getStyleVideoPromptHint("anime")).toBe("anime video wording")
+  })
+
+  it("a pack-ADDED style resolves its own video wording, else its image wording", () => {
+    registerCatalogPack({
+      id: "t-extend",
+      catalogId: "style",
+      mode: "extend",
+      options: [
+        { id: "claymation-x", label: "Clay X", promptHint: "clay still", videoPromptHint: "clay motion" },
+        { id: "inkwash-x", label: "Ink X", promptHint: "ink still" },
+      ],
+    })
+    expect(getStyleVideoPromptHint("claymation-x")).toBe("clay motion")
+    expect(getStylePromptHint("claymation-x")).toBe("clay still")
+    expect(getStyleVideoPromptHint("inkwash-x")).toBe("ink still")
+    expect(getParameterPromptHint(styleNode("claymation-x"), undefined, { surface: "video" })).toBe("clay motion")
+    expect(getParameterPromptHint(styleNode("claymation-x"))).toBe("clay still")
+  })
+})

package/src/catalog-overlay.ts

@@ -26,6 +26,16 @@ import { catalogPacksVersion, hasCatalogPacksFor } from "./catalog-packs.js"
  *     carry (typed extras a specific builder reads) survive from the base.
  *   - pack-ADDED id (no base entry)  → the composed option itself.
  *
+ * THE VIDEO WORDING (`videoPromptHint`, styles only) pairs with the image
+ * wording it was written beside, so it cannot simply survive from the base
+ * like a typed extra: a pack that rewrites a style's `promptHint` would then
+ * still inject the stock video text. The composed option's own
+ * `videoPromptHint` wins when it carries one; otherwise the base's is kept
+ * only while the composed `promptHint` is the stock one (a deny / extend pack,
+ * or the browser's `replace` copy of the server's composed catalog, which
+ * carries `promptHint` but not the video wording); a rewritten `promptHint`
+ * drops it, so video falls back to the pack's own wording.
+ *
  * LATE-BOUND RESOLVER, ON PURPOSE. The catalog modules cannot import
  * `getPickerCatalog`: picker-catalogs.ts imports every one of them to build
  * `PICKER_CATALOGS` at module scope, and a module-scope cycle is a TDZ error
@@ -91,7 +101,7 @@ export function overlayEntry<T extends { readonly id: string }>(
   const opt = composedOptionIndex(catalogId).get(id)
   if (!opt) return undefined
   if (!base) return opt as unknown as T
-  return {
+  const out: Record<string, unknown> = {
     ...base,
     label: opt.label,
     promptHint: opt.promptHint,
@@ -99,6 +109,10 @@ export function overlayEntry<T extends { readonly id: string }>(
     ...(opt.description !== undefined ? { description: opt.description } : {}),
     ...(opt.category !== undefined ? { category: opt.category } : {}),
   }
+  const baseFields = base as { readonly promptHint?: unknown; readonly videoPromptHint?: unknown }
+  if (opt.videoPromptHint !== undefined) out.videoPromptHint = opt.videoPromptHint
+  else if (baseFields.videoPromptHint !== undefined && opt.promptHint !== baseFields.promptHint) delete out.videoPromptHint
+  return out as unknown as T
 }
 
 /**

package/src/direction-registry.ts

@@ -56,7 +56,7 @@ import { getExposurePromptHint, getExposureTerm } from "./exposure-settings.js"
 import { getColorLookPromptHint, getColorLookTerm } from "./color-look.js"
 import { buildAtmosphereHints } from "./atmosphere.js"
 import { buildPostProcessHints } from "./post-process-effects.js"
-import { getStylePromptHint, getStyleTerm } from "./style.js"
+import { getStylePromptHint, getStyleTerm, getStyleVideoPromptHint } from "./style.js"
 import { buildMoodHints } from "./mood.js"
 import { buildAestheticHints } from "./aesthetic.js"
 import { getPhotoGenrePromptHint, getPhotoGenreTerm } from "./photo-genre.js"
@@ -125,8 +125,13 @@ export interface DirectionFieldSpec {
    * Render selected ids in this catalog's own doctrine: per-id for independent
    * catalogs, ONE blended clause for Mood / Aesthetic / Photographer, the
    * catalog's own multi builder where it has one. `[]` when nothing resolves.
+   *
+   * `surface` is the stage being folded. Nearly every row ignores it (one
+   * wording serves stills and video); a row whose catalog authors a video-only
+   * wording (`style`, via `getStyleVideoPromptHint`) reads it. Absent reads as
+   * `"image"`.
    */
-  readonly render: (ids: readonly string[], mode: PickerHintMode) => string[]
+  readonly render: (ids: readonly string[], mode: PickerHintMode, surface?: "image" | "video") => string[]
 }
 
 // ── Render adapters (module-private) ────────────────────────────────────────
@@ -163,6 +168,16 @@ const viaStringBuilder =
     return s.length > 0 ? [s] : []
   }
 
+/**
+ * Per-id emission whose FULL wording depends on the surface: the image getter
+ * on a still, the video getter on video (which falls back to the image wording
+ * for an id that authors none). The compact term is the same on both.
+ */
+const perIdBySurface =
+  (image: (id: string) => string, video: (id: string) => string, compact: (id: string) => string) =>
+  (ids: readonly string[], mode: PickerHintMode, surface?: "image" | "video"): string[] =>
+    perId(surface === "video" ? video : image, compact)(ids, mode)
+
 /** Mood's builder takes a RECORD and returns a list — and blends multi picks. */
 const viaMood = (ids: readonly string[], mode: PickerHintMode): string[] =>
   buildMoodHints({ mood: ids.length === 1 ? ids[0] : [...ids] }, mode).filter(
@@ -242,7 +257,7 @@ export const DIRECTION_FIELDS = [
   { key: "postProcess", surface: "image", family: "look", maxPicks: 2, render: viaListBuilder(buildPostProcessHints) },
 
   // Style.
-  { key: "style", surface: "both", family: "look", styleGroup: "film", maxPicks: 1, userRef: "moodboard", render: perId(getStylePromptHint, getStyleTerm) },
+  { key: "style", surface: "both", family: "look", styleGroup: "film", maxPicks: 1, userRef: "moodboard", render: perIdBySurface(getStylePromptHint, getStyleVideoPromptHint, getStyleTerm) },
   { key: "mood", surface: "both", family: "look", maxPicks: 2, render: viaMood },
   { key: "aesthetic", surface: "both", family: "look", maxPicks: 2, render: viaStringBuilder(buildAestheticHints) },
   { key: "photoGenre", surface: "image", family: "look", maxPicks: 1, render: perId(getPhotoGenrePromptHint, getPhotoGenreTerm) },
@@ -260,7 +275,9 @@ export const DIRECTION_FIELDS = [
   { key: "temporalFreeze", surface: "video", family: "motion", maxPicks: 1, render: temporal },
   { key: "temporalDirection", surface: "video", family: "motion", maxPicks: 1, render: temporal },
   { key: "temporalShutter", surface: "video", family: "motion", maxPicks: 1, render: temporal },
-  { key: "transition", surface: "video", family: "motion", maxPicks: 2, render: renderTransitionBases },
+  // Wrapped: `renderTransitionBases`' third parameter is a row's option values,
+  // not the surface `render` is handed.
+  { key: "transition", surface: "video", family: "motion", maxPicks: 2, render: (ids, mode) => renderTransitionBases(ids, mode) },
   { key: "loopSubject", surface: "video", family: "motion", maxPicks: 1, render: perId(getLoopSubjectPromptHint, getLoopSubjectTerm) },
 
   // ── LEGACY BLOCK — see the table doc above. Placed LAST, in today's exact
@@ -408,14 +425,15 @@ function renderRow(
   spec: DirectionFieldSpec,
   ids: readonly string[],
   mode: PickerHintMode,
+  surface: "image" | "video",
   refs: ReadonlyMap<string, string> | undefined,
 ): string[] {
   if (spec.userRef === undefined || !ids.some((id) => parseUserDirectionRef(id) !== null)) {
-    return spec.render(ids, mode)
+    return spec.render(ids, mode, surface)
   }
   return ids.flatMap((id) => {
     const ref = parseUserDirectionRef(id)
-    if (ref === null) return spec.render([id], mode)
+    if (ref === null) return spec.render([id], mode, surface)
     const clause = ref.kind === spec.userRef ? refs?.get(id) : undefined
     return clause ? [clause] : []
   })
@@ -457,7 +475,7 @@ export function renderDirectionHintClauses(
       spec.maxPicks,
     )
     if (ids.length === 0) continue
-    for (const hint of renderRow(spec, ids, modeForFamily(mode, spec.family), opts.refs)) {
+    for (const hint of renderRow(spec, ids, modeForFamily(mode, spec.family), opts.surface, opts.refs)) {
       if (hint.length > 0 && !seen.has(hint)) {
         seen.add(hint)
         out.push({

package/src/parameter-prompt-hint.ts

@@ -26,7 +26,7 @@ import { getCameraFormatPromptHint, getCameraFormatTerm } from "./camera-format.
 import { getColorLookPromptHint, getColorLookTerm } from "./color-look.js"
 import { buildAtmosphereHints } from "./atmosphere.js"
 import { buildActionFxHints } from "./action-fx.js"
-import { getStylePromptHint, getStyleTerm } from "./style.js"
+import { getStylePromptHint, getStyleTerm, getStyleVideoPromptHint } from "./style.js"
 import { getSettingPromptHint, getSettingTerm } from "./setting.js"
 import { getLoopSubjectPromptHint, getLoopSubjectTerm } from "./loop-subject.js"
 import { buildPersonHints } from "./person.js"
@@ -179,12 +179,26 @@ const MOTION_INTENSITY_HINTS: Readonly<Record<string, { readonly full: string; r
  * transition / camera-motion / character-fx timing and start-state/end-state
  * clauses, multi-pick joining and multi-dimension composition are emitted the
  * same way in both modes.
+ *
+ * SURFACE — `opts.surface: "video"` is for a caller folding the hint into ONE
+ * video consumer's prompt (the canvas's video nodes): a Style node then injects
+ * its video wording (`getStyleVideoPromptHint`). Absent (or `"image"`) is the
+ * output this function always returned — what a still, a `{Label}` reference
+ * and every preview of the node's own text read, since a node's own output
+ * text has no single consumer. Every other node type ignores it.
  */
 export function getParameterPromptHint(
   node: HintNodeLike | undefined,
   ctx?: HintGraphContext,
+  opts?: ParameterHintOptions,
 ): string {
-  return resolveParameterHint(node, ctx)
+  return resolveParameterHint(node, ctx, undefined, opts?.surface === "video" ? "video" : "image")
+}
+
+/** How `getParameterPromptHint` resolves a node. */
+export interface ParameterHintOptions {
+  /** The stage the hint is folded into. Absent = `"image"`. */
+  readonly surface?: "image" | "video"
 }
 
 /**
@@ -198,6 +212,7 @@ function resolveParameterHint(
   node: HintNodeLike | undefined,
   ctx?: HintGraphContext,
   inherited?: PickerHintMode,
+  surface: "image" | "video" = "image",
 ): string {
   if (!node?.type) return ""
   const data = (node.data ?? {}) as Record<string, unknown>
@@ -216,7 +231,7 @@ function resolveParameterHint(
       // themselves parameter nodes (framing/tone/etc.) that don't need graph
       // context, and avoiding recursion keeps the walk cycle-safe. The mode
       // rides down so the composed clause stays at one level of detail.
-      const hint = resolveParameterHint(src, undefined, mode)
+      const hint = resolveParameterHint(src, undefined, mode, surface)
       if (!hint) continue
       if (edge.targetHandle === "startState") startHints.push(hint)
       else if (edge.targetHandle === "endState") endHints.push(hint)
@@ -247,7 +262,7 @@ function resolveParameterHint(
       if (edge.target !== node.id) continue
       const src = ctx.nodes.find((n) => n.id === edge.source)
       if (!src) continue
-      const hint = resolveParameterHint(src, undefined, mode) // no ctx — cycle-safe
+      const hint = resolveParameterHint(src, undefined, mode, surface) // no ctx — cycle-safe
       if (!hint) continue
       if      (edge.targetHandle === "startState") startHints.push(hint)
       else if (edge.targetHandle === "endState")   endHints.push(hint)
@@ -301,7 +316,7 @@ function resolveParameterHint(
     )
   }
 
-  const base = resolveBaseHint(node.type, data, mode)
+  const base = resolveBaseHint(node.type, data, mode, surface)
   if (base) return base
   // Pack-extend fallback: a single-dim pack entry the per-catalog getter (which
   // reads the frozen base array) can't resolve. Resolve it against the
@@ -313,7 +328,7 @@ function resolveParameterHint(
   if (cat?.kind === "single" && cat.valueField) {
     const id = typeof data[cat.valueField] === "string" ? (data[cat.valueField] as string) : ""
     const opt = cat.options?.find((o) => o.id === id)
-    if (opt) return byMode(mode, opt.promptHint, resolveTerm(opt))
+    if (opt) return byMode(mode, surface === "video" ? (opt.videoPromptHint ?? opt.promptHint) : opt.promptHint, resolveTerm(opt))
   }
   return base
 }
@@ -333,6 +348,7 @@ function resolveBaseHint(
   type: string,
   data: Record<string, unknown>,
   mode: PickerHintMode = "full",
+  surface: "image" | "video" = "image",
 ): string {
   switch (type) {
     case "framing":
@@ -373,7 +389,7 @@ function resolveBaseHint(
     case "action-fx":
       return withCustomText(data, buildActionFxHints(data.actionFx, mode).join(", "))
     case "style":
-      return withCustomText(data, byMode(mode, getStylePromptHint, getStyleTerm)(asStr(data.style)))
+      return withCustomText(data, byMode(mode, surface === "video" ? getStyleVideoPromptHint : getStylePromptHint, getStyleTerm)(asStr(data.style)))
     case "setting":
       return withCustomText(data, byMode(mode, getSettingPromptHint, getSettingTerm)(asStr(data.setting)))
     case "loop-subject":

package/src/picker-art/look-preview-sets.ts

@@ -70,6 +70,11 @@ export const LOOK_PREVIEW_SETS = {
     "mixed-media": "https://cdn.nodaro.ai/picker-renders/d36ab150-9cd6-47ac-bdd9-3b26990a4fa9.png",
     "early-color-photo": "https://cdn.nodaro.ai/picker-renders/1bf61f3d-c174-466f-9092-5de72dc7abea.png",
     manga: "https://cdn.nodaro.ai/picker-renders/3d6bbfd8-8c62-4769-b62e-11d2a7e43b4b.png",
+    "felt-puppet": "https://cdn.nodaro.ai/picker-renders/31ad3b39-d501-4b76-9c1c-2f87fc374333.png",
+    "knitted-yarn": "https://cdn.nodaro.ai/picker-renders/b80b6a96-2221-4c68-8e0c-4beaa5a6ce56.png",
+    "toy-figure-3d": "https://cdn.nodaro.ai/picker-renders/add81127-a005-4f9a-a002-780768238715.png",
+    "painterly-3d": "https://cdn.nodaro.ai/picker-renders/6aec1d80-be9f-4f2e-a1b7-fa38a61131d1.png",
+    "painted-clay": "https://cdn.nodaro.ai/picker-renders/daedee18-c034-4b98-80bb-7bef7e05c547.png",
   },
   "color-look": {
     warm: "https://cdn.nodaro.ai/picker-renders/8511a1bc-3d3b-46a8-adc0-26fcc9e93a4b.png",