@mevdragon/vidfarm-devcli 0.2.10 → 0.2.12

package/SKILL.developer.md

@@ -919,6 +919,24 @@ npx @mevdragon/vidfarm-devcli session
 
 The current standard version is `2026-05-30`. The CLI response includes `caption_standard_version`, `fonts`, `text_background_colors`, `presets`, `package_dependencies`, the source standard file, and the starter template style file.
 
+Text background rendering rule:
+
+- any selected text background color must render as an inline highlight chip that hugs the text only
+- apply visible per-line padding around the glyph bounds; the background should feel intentional, not cramped
+- use slightly curved corners like TikTok's native text highlight shape
+- do not render full-width bars, paragraph washes, large caption panels, or loose boxes behind text
+- for multi-line captions, each line should get its own tight chip or a chip shape that follows the actual text block closely
+- support chip strength levels where practical: `subtle` for light editor-style chips, `standard` for normal TikTok color chips, and `strong` for high-contrast emphatic captions
+
+Multiline caption rendering rule:
+
+- wrap the caption once, choose one font size and line height for the whole caption, and render it as one multiline text block
+- do not render each wrapped line as a separate trimmed text image; per-line trim bounds change apparent glyph scale, weight, line height, and shadow placement
+- apply shadow or outline to the whole multiline text block, then composite the block into the frame
+- optional background chips may still be per-line, but their geometry should be derived from measured line bounds after the shared multiline layout is decided
+- tune TikTok Sans wrapping, size, and line spacing independently from Montserrat or generic sans assumptions
+- validate with a caption that wraps into one long line and one short line; both lines must look like the same font size and weight with consistent shadow strength
+
 Canonical font IDs:
 
 - `tiktok_sans_semibold`: default native TikTok caption font, backed by `@fontsource/tiktok-sans` or the bundled `TikTokSans-SemiBold.ttf` starter asset
@@ -969,8 +987,8 @@ Canonical text background color IDs:
 Canonical style presets:
 
 - `tiktok_native_white`: TikTok Sans SemiBold, white fill, no color chip, native black shadow
-- `tiktok_native_chip`: TikTok Sans SemiBold, white fill, red default color chip, native black shadow
-- `tiktok_editor_gray`: TikTok Sans SemiBold, dark fill, light gray default chip, no shadow
+- `tiktok_native_chip`: TikTok Sans SemiBold, white fill, red default inline highlight chip, `standard` chip strength, native black shadow
+- `tiktok_editor_gray`: TikTok Sans SemiBold, dark fill, light gray default inline highlight chip, `subtle` chip strength, no shadow
 
 Templates that expose caption styling should use these IDs in `configSchema`, operation payloads, manifests, and docs instead of inventing local names or hardcoding unrelated font stacks. If a template intentionally uses a format-specific typography system, document the exception in the template-local `SKILL.md`.
 

package/auto-create-templates/AUTO_CREATE_TEMPLATES.md

@@ -381,6 +381,14 @@ Every video-producing template should make timing explicit. The default input sh
 
 Every captioned template should strongly prefer TikTok-native typography. Use checked-in fonts when available, especially `TikTokSans-SemiBold.ttf` from the reference template assets, with practical fallbacks such as Montserrat or system sans. Expose caption styling in config only where it is useful; otherwise default to the closest source-matching TikTok style.
 
+Multiline caption renderer requirement:
+
+- wrap each caption once, choose one font size and line height for the whole caption block, and render it as one multiline text block
+- do not render each wrapped line as an independently trimmed image; that makes shorter lines look larger or heavier because trim bounds, line height, and shadow placement vary per line
+- apply shadow/outline to the whole multiline block, then composite the block; line chips can be measured per line after the block layout is fixed
+- tune TikTok Sans wrapping, size, and line spacing separately from Montserrat or generic sans defaults
+- validate with mixed-length wrapped captions and confirm both lines retain the same apparent size, weight, baseline rhythm, and shadow strength
+
 For simple image formats:
 
 - `create_image`: exact/director-controlled path

package/auto-create-templates/extractor-system-prompt.md

@@ -33,7 +33,8 @@ Return only JSON matching `production-graph.schema.json`.
 - Identify which elements are fixed, variable, optional, or generated.
 - Extract exact or inferred durations for scenes, captions, overlays, transitions, zooms, holds, and loop points.
 - Treat timing as a reusable control surface. If a source slot has a duration, decide whether future users should be able to override it.
-- Strongly identify TikTok-native typography: font family match, weight, case, outline, shadow, background chip, word highlight, line wrapping, and fallback font stack.
+- Strongly identify TikTok-native typography: font family match, weight, case, outline, shadow, background chip, word highlight, line wrapping, line height, and fallback font stack.
+- When captions wrap across lines, record block-level rendering requirements: one shared font size and line height for the full multiline caption, shadow/outline applied to the whole block, and any per-line chip geometry derived after the shared layout. Do not recommend independently trimmed per-line text images.
 - Prefer deterministic Remotion/HTML composition for layout, captions, overlays, app UI, and final edit.
 - Do not force Remotion when it would become brittle. If the format depends on organic visual detail, character acting, cinematic continuity, generated texture, painterly style, or complex physical motion, mark it as AI-native prompt/reference or hybrid.
 - Use AI image/video only for assets that require generative content.
@@ -106,7 +107,7 @@ Bad: "Use engaging captions and quick cuts."
 
 Good: "Render 2-line white uppercase captions centered at y=178 with black 2px shadow, max 22 characters per line, timed to word groups of 700-1400 ms. Insert 1.08x punch-in zoom on every sentence start."
 
-Typography bias: if the format uses creator-authored captions or overlays, default to TikTok-native typography. Prefer TikTok Sans Semibold when available; otherwise choose the closest checked-in or system fallback and record the fallback explicitly.
+Typography bias: if the format uses creator-authored captions or overlays, default to TikTok-native typography. Prefer TikTok Sans Semibold when available; otherwise choose the closest checked-in or system fallback and record the fallback explicitly. Tune TikTok Sans wrapping, size, and line spacing separately from Montserrat or generic sans defaults.
 
 Viral preservation bias: if a choice conflicts between visual sameness and viral effectiveness, preserve the viral mechanism first. Example: if the source wins because of a shocking first-frame claim, preserve the claim structure and pacing even if the background scene changes. If it wins because of a recognizable fake-chat, notification, or game UI container, then visual preservation is likely critical.
 

package/auto-create-templates/template-planner-prompt.md

@@ -16,6 +16,7 @@ The template must persist and actively use the source format's viral DNA. Viral
 - Do not force Remotion for formats whose complexity ceiling is better handled by AI-native image/video generation with source references. Use Remotion only for final stitching, captions, timing wrappers, or end cards in those cases.
 - Expose timing controls as operation inputs or config where users will reasonably want bulk variation: scene duration, slide duration, clip slot duration, caption timing mode, transition length, hold length, and total duration target.
 - Prefer TikTok-native caption typography. When captions or overlays matter, default to TikTok Sans Semibold or the closest available local fallback, and make font/styling configurable when the source format depends on it.
+- For multiline captions, require a block-level renderer: wrap once, pick one font size and line height for the whole caption, render one multiline text block, and apply shadow/outline to the whole block. Do not render wrapped lines as separate trimmed images. Tune TikTok Sans wrapping, size, and leading separately from Montserrat defaults.
 - Use AI providers for text, image, video, TTS, STT, and layout analysis only where needed.
 - Store generated media with `ctx.storage`; return artifact URLs, manifests, and render inputs.
 - Include `about.proposal_generator`, `about.skeleton_prompt`, and `about.sample_prompts`.

package/dist/src/cli.js

@@ -7,7 +7,7 @@ import path from "node:path";
 import { parseArgs } from "node:util";
 import { promisify } from "node:util";
 import dotenv from "dotenv";
-import { CAPTION_STANDARD_VERSION, STARTER_TEMPLATE_FONT_OPTIONS, STARTER_TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS, TIKTOK_CAPTION_STYLE_PRESETS } from "./lib/template-style-options.js";
+import { CAPTION_STANDARD_VERSION, STARTER_TEMPLATE_FONT_OPTIONS, STARTER_TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS, TIKTOK_CAPTION_RENDERING_RULES, TIKTOK_CAPTION_STYLE_PRESETS, TIKTOK_TEXT_BACKGROUND_RENDERING } from "./lib/template-style-options.js";
 import { analyzeTemplateDna, hasTemplatePreviewMedia, stageTemplateDnaInputs, syncTemplateDnaModule } from "./lib/template-dna.js";
 import { assertTemplateFolderNameHasPrefix, defaultSkillPathForTemplateModule, deriveTemplateRootDirFromModulePath } from "./lib/template-paths.js";
 const execFileAsync = promisify(execFile);
@@ -857,6 +857,8 @@ async function runSessionCommand(argv) {
             caption_standard_version: CAPTION_STANDARD_VERSION,
             fonts: STARTER_TEMPLATE_FONT_OPTIONS,
             text_background_colors: STARTER_TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS,
+            text_background_rendering: TIKTOK_TEXT_BACKGROUND_RENDERING,
+            caption_rendering_rules: TIKTOK_CAPTION_RENDERING_RULES,
             presets: TIKTOK_CAPTION_STYLE_PRESETS,
             package_dependencies: [
                 "@fontsource/tiktok-sans",

package/dist/src/lib/template-style-options.js

@@ -99,6 +99,50 @@ export const TIKTOK_TEXT_BACKGROUND_COLOR_OPTIONS = [
     { id: "dark_gray", label: "Dark Gray", hex: "#333333" }
 ];
 export const STARTER_TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS = TIKTOK_TEXT_BACKGROUND_COLOR_OPTIONS;
+export const TIKTOK_TEXT_BACKGROUND_RENDERING = {
+    mode: "inline_highlight_chip",
+    rule: "Text background colors must render as inline highlight chips that hug the text only.",
+    padding: "Use visible per-line padding around glyph bounds; do not render full-width bars, paragraph washes, or loose caption boxes.",
+    shape: "Use slightly curved corners, similar to native TikTok text highlight chips.",
+    strengths: {
+        none: {
+            paddingX: 0,
+            paddingY: 0,
+            radius: 0,
+            opacity: 0
+        },
+        subtle: {
+            paddingX: 14,
+            paddingY: 8,
+            radius: 9,
+            opacity: 0.72
+        },
+        standard: {
+            paddingX: 20,
+            paddingY: 12,
+            radius: 12,
+            opacity: 0.86
+        },
+        strong: {
+            paddingX: 26,
+            paddingY: 14,
+            radius: 14,
+            opacity: 0.94
+        }
+    }
+};
+export const TIKTOK_CAPTION_RENDERING_RULES = {
+    multilineText: {
+        rule: "Render each caption as one multiline text block after wrapping, not as independently trimmed per-line text images.",
+        reason: "Per-line trimmed rendering makes line height, trim bounds, and shadow placement vary per line, which can make shorter wrapped lines look heavier or larger at the same nominal font size.",
+        implementation: "Choose the font size, line height, wrap width, and line breaks once for the whole caption; render the full block on a stable canvas; apply shadow/outline to the whole text block; then place optional line chips from measured line bounds.",
+        validation: "Test a wrapped caption with one short line and one long line; both lines must keep the same glyph scale, weight, baseline rhythm, and shadow strength."
+    },
+    tiktokSansSizing: {
+        rule: "Tune TikTok Sans wrapping, font size, and line spacing separately from Montserrat or generic sans defaults.",
+        reason: "TikTok Sans metrics differ enough from Montserrat that reused sizing assumptions can produce wrong wrap points, cramped leading, or off-weight captions."
+    }
+};
 export const TIKTOK_CAPTION_STYLE_PRESETS = [
     {
         id: "tiktok_native_white",
@@ -114,6 +158,8 @@ export const TIKTOK_CAPTION_STYLE_PRESETS = [
         fontId: "tiktok_sans_semibold",
         fill: "#ffffff",
         defaultBackgroundColorId: "red",
+        backgroundRendering: "inline_highlight_chip",
+        chipStrength: "standard",
         shadow: "native_black_shadow"
     },
     {
@@ -122,6 +168,8 @@ export const TIKTOK_CAPTION_STYLE_PRESETS = [
         fontId: "tiktok_sans_semibold",
         fill: "#111111",
         defaultBackgroundColorId: "light_gray",
+        backgroundRendering: "inline_highlight_chip",
+        chipStrength: "subtle",
         shadow: "none"
     }
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mevdragon/vidfarm-devcli",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Developer CLI for running the Vidfarm local template platform.",
   "type": "module",
   "bin": {