{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "workflow-console",
  "title": "Workflow Console",
  "description": "An independent 46.8-second release automation demo with typed commands, environment diagrams, pipeline metrics, and an original node mark.",
  "dependencies": ["remotion", "@fontsource/inter", "@fontsource/roboto-mono"],
  "registryDependencies": ["@remocn/typed-split-wipe", "@remocn/caret"],
  "files": [
    {
      "path": "registry/remocn-templates/workflow-console/content.ts",
      "content": "import { type CountryKey, defaultCountries } from \"./countries\";\n\nexport const workflowContent = {\n  prefix: \"Meet\",\n  product: \"Workflow Console\",\n  command:\n    \"prepare release v2.4. check the build, run tests in staging, then roll out with a canary.\",\n  fetching: \"Reading release context\",\n  launchCommand: \"Ship it.\",\n  geography: \"Choose an environment\",\n  campaign: \"Release v2.4\",\n  delivery: \"rolling out\",\n  deliveryDetail: \"checks are PASSING, rollback is READY\",\n  growth: \"Less waiting. More shipping.\",\n  statsLoading: \"Reading pipeline metrics\",\n  statsQuestion: \"how is the pipeline doing?\",\n  followup: \"where is the bottleneck?\",\n  changeCommand: \"What should we improve?\",\n  recommendation: \"The test queue is growing — add parallel workers.\",\n  budgetLabel: \"Test workers\",\n  oldBudget: \"2\",\n  newBudget: \"6\",\n  doubleCommand: \"scale to six workers\",\n  closing: \"Keep your work moving\",\n  terminalTitle: \"workflow　~/releases/v2.4\",\n  chartTitle: \"Pipeline throughput · demo runs / hour\",\n};\n\nexport type WorkflowContent = typeof workflowContent;\nexport type ChartBar = { label: string; value: number; detail: string };\nexport const workflowBars: ChartBar[] = [\n  { label: \"Baseline\", value: 24, detail: \"24 runs / h\" },\n  { label: \"Cache\", value: 48, detail: \"48 runs / h\" },\n  { label: \"Parallel\", value: 72, detail: \"72 runs / h\" },\n  { label: \"Optimized\", value: 96, detail: \"96 runs / h\" },\n];\n\nexport type TerminalRun = \"campaign\" | \"launched\" | \"stats\";\nexport type TerminalRow = {\n  at: number;\n  text: string;\n  kind?: \"prompt\" | \"call\" | \"thought\" | \"note\" | \"result\";\n  highlight?: string;\n};\n\nexport type Environment = {\n  label: string;\n  topology: \"single\" | \"parallel\" | \"cluster\" | \"canary\";\n};\nexport const workflowEnvironments: Environment[] = [\n  { label: \"Preview\", topology: \"single\" },\n  { label: \"Staging\", topology: \"parallel\" },\n  { label: \"Production\", topology: \"cluster\" },\n  { label: \"Canary\", topology: \"canary\" },\n];\nexport const workflowTools = [\n  \"Workflow Read Release Plan\",\n  \"Checked in 1.1s\",\n  \"Workflow Run Test Suite\",\n  \"Checked in 1.9s\",\n  \"Workflow Create Canary\",\n  \"Workflow Start Rollout\",\n  \"Checked in 0.1s\",\n];\n\nexport type WorkflowConsoleProps = {\n  productName?: string;\n  accentColor?: string;\n  backgroundColor?: string;\n  content?: Partial<WorkflowContent>;\n  /** Legacy map override. Defaults now use environment diagrams. */\n  countries?: CountryKey[];\n  environments?: Environment[];\n  tools?: string[];\n  bars?: ChartBar[];\n  terminalRows?: Partial<Record<TerminalRun, TerminalRow[]>>;\n  logoSrc?: string;\n  audioSrc?: string;\n  volume?: number;\n};\n\nexport function resolveWorkflowProps(props: WorkflowConsoleProps) {\n  // `undefined` from optional Studio fields must not erase concrete defaults.\n  const overrides = Object.fromEntries(\n    Object.entries(props.content ?? {}).filter(\n      ([, value]) => value !== undefined,\n    ),\n  );\n  const content: WorkflowContent = { ...workflowContent, ...overrides };\n  if (props.productName !== undefined) content.product = props.productName;\n  const countries = props.countries?.filter((key) =>\n    defaultCountries.includes(key),\n  );\n  const bars = props.bars?.filter(\n    (bar) => Number.isFinite(bar.value) && bar.value >= 0,\n  );\n  const environments = props.environments?.filter(\n    (item) =>\n      item.label.trim() &&\n      workflowEnvironments.some((entry) => entry.topology === item.topology),\n  );\n  const customTools = props.tools?.filter((item) => item.trim());\n  return {\n    content,\n    environments: environments?.length\n      ? environments.slice(0, 8)\n      : workflowEnvironments,\n    useCountries: Boolean(countries?.length && !environments?.length),\n    tools: customTools?.length ? customTools.slice(0, 10) : workflowTools,\n    accent: props.accentColor?.trim() || \"#8ed8f8\",\n    background: props.backgroundColor?.trim() || \"#0e1b2b\",\n    countries: countries?.length ? countries : defaultCountries,\n    bars: bars?.length ? bars.slice(0, 8) : workflowBars,\n    terminalRows: props.terminalRows ?? {},\n    logoSrc: props.logoSrc?.trim(),\n  };\n}\n\nexport type WorkflowScene = ReturnType<typeof resolveWorkflowProps>;\nexport type SceneProps = { scene: WorkflowScene; t: number };\n\nexport function terminalContent(\n  run: TerminalRun,\n  c: WorkflowContent,\n): TerminalRow[] {\n  if (run === \"campaign\")\n    return [\n      { at: 0.1, text: c.command, kind: \"prompt\" },\n      { at: 0.22, text: \"Checked in 1.2s\", kind: \"thought\" },\n      {\n        at: 0.4,\n        text: 'Call workflow · read_release (version: \"v2.4\")',\n        kind: \"call\",\n      },\n      {\n        at: 0.55,\n        text: \"  changes: 12 merged · 0 conflicts\",\n        kind: \"note\",\n        highlight: \"12\",\n      },\n      { at: 0.72, text: \"Call workflow · inspect_test_suite\", kind: \"call\" },\n      { at: 0.9, text: \"  48 checks · 4 parallel groups\", kind: \"note\" },\n      {\n        at: 1.1,\n        text: \"All 12 changes are ready. Running the 48 checks in staging,\",\n        highlight: \"12\",\n      },\n      { at: 1.23, text: \"then a canary rollout with automatic rollback.\" },\n    ];\n  if (run === \"launched\")\n    return [\n      { at: 0, text: c.launchCommand, kind: \"prompt\" },\n      {\n        at: 0.13,\n        text: 'Call workflow · create_release (version: \"v2.4\")',\n        kind: \"call\",\n      },\n      {\n        at: 0.28,\n        text: \"  status: READY · checks: PASSING\",\n        kind: \"note\",\n        highlight: \"READY\",\n      },\n      {\n        at: 0.42,\n        text: 'Call workflow · prepare_environment (name: \"Staging\")',\n        kind: \"call\",\n      },\n      { at: 0.6, text: \"  checks: 48 passed · errors: 0\", kind: \"note\" },\n      {\n        at: 0.72,\n        text: 'Call workflow · create_canary (traffic: \"10%\")',\n        kind: \"call\",\n      },\n      { at: 0.86, text: \"Call workflow · start_rollout\", kind: \"call\" },\n      {\n        at: 1,\n        text: '✓ Release live: \"v2.4\" — healthy',\n        kind: \"result\",\n      },\n    ];\n  return [\n    { at: 0.08, text: c.statsQuestion, kind: \"prompt\" },\n    { at: 0.2, text: \"Checked in 0.6s\", kind: \"thought\" },\n    {\n      at: 0.37,\n      text: 'Call workflow · get_pipeline_metrics (window: \"1h\")',\n      kind: \"call\",\n    },\n    {\n      at: 0.58,\n      text: \"  median build 42s · target under 60s\",\n      kind: \"note\",\n      highlight: \"42s\",\n    },\n    {\n      at: 0.77,\n      text: \"Builds are healthy — median duration is 42s, under your\",\n      highlight: \"42s\",\n    },\n    {\n      at: 0.88,\n      text: \"60s target. Test jobs spend 18s waiting in the queue.\",\n      highlight: \"18s\",\n    },\n    { at: 1.55, text: c.followup, kind: \"prompt\" },\n    { at: 1.65, text: \"Checked in 0.4s\", kind: \"thought\" },\n    {\n      at: 2.0,\n      text: \"The cache is working. Tests are waiting for free workers.\",\n    },\n    { at: 2.25, text: \"Two workers are busy — there’s room to scale.\" },\n  ];\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/content.ts"
    },
    {
      "path": "registry/remocn-templates/workflow-console/countries.ts",
      "content": "// Natural Earth 1:110m country outlines, normalized to a 100×100 viewBox.\n// Source: https://github.com/nvkelso/natural-earth-vector/blob/master/geojson/ne_110m_admin_0_countries.geojson\n// Public-domain cartographic data. Mainland silhouettes except Japan's main islands.\nexport const countryOutlines = {\n  USA: \"M9.8,32.5L14.0,32.5L18.4,32.5L19.9,32.5L24.4,32.5L28.8,32.5L33.3,32.5L37.7,32.5L42.8,32.5L47.9,32.5L51.0,32.5L52.2,33.0L53.3,33.1L54.8,33.3L56.2,33.8L57.4,33.6L59.3,33.9L61.1,33.5L62.5,34.1L64.0,34.6L65.2,35.1L66.3,35.6L67.1,36.3L68.2,36.8L69.8,37.9L70.1,39.3L70.4,40.6L69.3,42.3L69.6,43.4L71.7,42.6L73.2,42.4L75.2,41.6L75.5,40.5L76.9,40.5L78.3,40.5L80.6,38.7L83.5,38.4L86.2,38.4L87.5,37.7L88.5,35.9L89.6,34.8L91.1,34.9L91.8,37.4L92.7,38.2L91.4,39.4L89.9,40.0L88.3,40.4L87.5,41.3L87.2,42.4L88.4,43.2L86.8,43.7L85.7,43.9L84.2,44.1L83.0,44.5L85.1,44.2L83.5,44.9L82.1,45.2L82.3,46.3L81.2,47.5L80.2,46.6L80.9,47.7L80.5,48.8L79.6,50.0L80.0,49.0L79.0,47.1L79.0,48.7L78.1,48.5L79.1,49.0L79.2,50.4L79.9,52.5L79.0,53.6L77.5,54.1L76.5,54.9L75.0,55.6L73.1,57.0L72.3,57.7L71.6,58.6L71.4,59.7L71.6,60.7L72.1,62.0L72.8,63.1L73.5,65.4L73.4,66.4L73.0,67.9L71.8,67.9L71.0,66.9L70.2,65.7L69.5,64.5L69.6,62.9L68.1,60.9L66.0,61.3L65.0,60.6L64.0,60.2L62.4,60.4L61.0,60.2L59.9,60.3L59.5,61.5L58.4,62.1L57.4,62.0L56.3,61.3L55.0,61.4L53.9,61.1L51.7,61.6L50.3,62.7L48.9,63.3L48.0,64.0L47.7,65.7L48.0,66.9L46.4,66.6L45.2,66.2L44.5,64.4L43.6,63.6L43.1,62.7L42.4,61.7L41.3,61.1L40.1,61.1L39.1,62.3L37.9,61.9L36.8,60.6L35.4,59.2L34.1,58.2L31.5,58.2L30.3,58.8L27.4,58.8L24.0,57.7L21.7,57.0L20.0,56.9L18.3,57.0L17.0,55.4L16.2,54.8L14.8,54.3L13.4,54.2L12.9,53.1L11.4,51.6L10.2,49.5L9.6,48.7L8.4,47.4L8.2,46.2L7.4,45.4L7.8,44.2L7.7,42.9L7.2,41.8L7.8,40.4L8.0,39.0L8.2,37.7L7.9,35.7L7.4,34.4L7.2,33.4L9.3,33.9L10.1,35.3L10.3,33.7L9.8,32.5Z\",\n  Brazil:\n    \"M52.2,92.7L51.6,91.5L52.5,90.5L51.3,89.0L49.5,87.8L47.3,86.3L44.3,84.7L42.8,85.0L45.8,82.0L48.2,79.8L49.7,78.9L51.6,77.7L51.6,76.0L50.5,74.7L49.4,75.1L49.8,73.9L50.1,72.6L50.1,71.4L48.5,71.3L47.5,70.4L47.3,68.4L45.4,67.1L42.2,67.1L42.3,64.2L41.7,63.0L42.1,61.3L42.7,60.3L43.1,58.6L42.6,57.2L41.4,56.6L41.5,54.5L37.3,54.4L36.5,51.8L37.1,50.8L36.5,48.9L35.3,48.3L33.9,48.3L33.0,47.7L31.5,47.2L30.6,46.4L28.2,46.1L25.8,44.1L26.0,42.6L25.9,40.1L23.1,40.5L21.9,41.3L20.0,42.2L18.4,42.9L16.8,42.7L15.5,43.1L14.5,42.9L14.7,39.5L12.9,40.8L10.9,40.8L10.1,39.6L8.7,39.5L9.1,38.5L7.9,37.2L7.0,35.2L7.6,33.9L8.9,33.3L8.7,32.1L9.4,30.3L11.9,28.8L13.7,28.4L16.0,28.2L17.0,22.2L16.7,20.0L15.7,19.2L15.7,17.6L16.9,17.2L16.2,16.4L16.1,15.0L20.4,15.0L21.1,14.3L22.2,16.3L23.8,17.2L25.5,17.0L27.5,15.8L28.7,14.6L30.3,13.9L28.3,13.3L28.0,11.9L28.1,10.4L27.1,9.9L29.1,9.9L30.9,10.5L33.1,9.6L35.5,8.8L36.3,8.0L37.2,7.3L37.4,8.7L38.7,10.1L37.7,12.7L38.3,13.8L38.4,14.8L39.8,15.9L40.8,16.0L41.8,15.5L42.8,15.1L44.7,14.7L46.4,14.8L46.5,13.3L48.4,13.2L49.6,13.7L50.6,14.1L51.8,13.6L53.1,14.1L53.9,13.3L54.6,11.7L55.9,9.7L57.2,10.8L58.4,14.6L59.6,15.0L59.7,16.5L58.0,18.3L62.6,19.3L62.6,21.5L64.3,20.0L67.1,20.8L70.7,22.2L71.8,23.4L71.4,24.7L74.0,24.0L78.2,25.1L81.5,25.1L84.7,26.9L87.5,29.3L89.2,29.9L91.1,30.0L91.9,30.7L92.6,33.5L93.0,34.8L92.1,38.5L91.0,39.9L87.9,42.9L86.5,45.4L84.9,47.3L83.7,49.0L83.9,53.1L83.3,56.5L83.1,57.9L82.4,58.8L82.0,61.7L79.8,64.6L79.4,66.8L77.6,67.8L77.1,69.1L74.7,69.1L71.3,69.9L69.7,70.9L67.3,71.5L64.7,73.3L62.8,75.4L62.5,77.1L62.9,78.3L62.5,80.5L62.0,81.6L60.5,82.8L58.0,86.6L56.1,88.4L54.6,89.4L53.6,91.5L52.2,92.7Z\",\n  UAE: \"M7.0,50.5L10.2,49.7L10.8,54.6L24.8,51.8L39.6,52.2L50.4,52.8L62.6,40.7L75.9,29.2L87.2,18.2L90.6,24.3L93.0,38.4L83.9,38.5L82.4,50.1L85.6,52.6L77.5,56.1L77.5,63.4L72.2,70.8L71.8,78.0L68.2,81.8L14.5,72.8L7.7,54.7L7.0,50.5Z\",\n  India:\n    \"M92.8,30.8L93.0,31.9L92.0,32.4L92.2,34.2L90.1,33.7L86.3,35.7L86.4,37.4L84.8,39.9L84.6,41.3L83.3,43.8L81.0,43.1L80.9,46.1L80.2,47.1L80.5,48.4L79.1,49.1L77.5,44.4L76.2,46.3L74.6,44.8L75.5,43.1L76.9,42.9L78.2,40.4L76.5,39.9L73.8,40.0L71.0,39.6L70.7,37.5L69.3,37.4L67.0,36.1L65.9,38.1L68.1,39.7L66.2,40.8L65.6,41.8L67.4,42.6L66.9,44.4L67.9,46.6L68.4,49.0L67.9,50.1L65.9,50.1L62.3,50.7L62.5,52.9L60.9,54.6L56.7,56.6L53.4,60.1L51.2,61.9L48.2,63.9L48.2,65.2L46.8,65.9L44.1,67.0L42.7,67.2L41.9,69.4L42.5,73.2L42.6,75.7L41.4,78.5L41.4,83.5L39.9,83.6L38.5,85.9L39.4,86.8L36.7,87.7L35.7,89.7L34.6,90.5L31.8,87.8L30.4,83.6L29.3,80.7L28.2,79.3L26.7,76.4L26.0,72.8L25.4,70.9L22.8,66.9L21.5,61.2L20.7,57.4L20.7,53.9L20.1,51.1L15.8,52.9L13.7,52.5L9.9,48.9L11.3,47.9L10.5,46.7L7.0,44.2L9.0,42.3L15.4,42.3L14.9,39.7L13.2,38.3L12.9,36.0L10.9,34.7L14.2,31.6L17.6,31.8L20.7,28.7L22.5,25.7L25.4,22.8L25.3,20.7L27.8,19.0L25.5,17.5L24.4,15.5L23.4,13.0L24.8,11.7L29.3,12.4L32.6,12.0L35.4,9.5L38.6,12.9L38.3,15.3L39.5,16.9L39.4,18.4L37.3,18.0L38.1,21.2L41.0,23.1L45.1,25.1L43.2,26.5L42.1,29.2L44.9,30.3L47.7,31.8L51.5,33.4L55.5,33.8L57.2,35.3L59.5,35.6L63.1,36.3L65.5,36.2L65.8,35.0L65.5,33.2L65.7,31.9L67.5,31.3L67.7,33.6L70.5,35.3L72.3,34.9L74.8,35.1L77.2,35.0L77.4,33.2L76.2,32.2L78.6,31.9L81.3,29.7L84.7,27.8L87.1,28.5L89.2,27.3L90.6,29.1L89.6,30.3L92.8,30.8Z\",\n  Japan:\n    \"M73.5,45.3L68.6,50.6L68.7,56.1L66.7,60.4L67.6,63.0L64.8,66.8L58.0,69.3L48.6,69.6L41.0,75.7L37.4,73.7L37.2,69.7L28.0,70.9L21.6,73.4L15.4,73.5L20.8,77.4L17.3,86.5L13.8,88.7L11.2,86.6L12.5,81.8L9.2,80.3L7.0,76.6L12.0,75.0L14.8,71.6L20.2,68.9L24.1,65.2L34.7,63.6L40.4,64.7L46.0,55.3L49.5,57.8L57.4,52.5L60.4,50.4L63.7,43.9L62.8,37.9L65.1,34.5L70.8,33.5L73.7,40.9L73.5,45.3ZM88.0,19.8L91.8,17.5L93.0,23.5L85.1,25.0L80.4,30.3L72.0,26.6L69.1,32.4L63.2,32.5L62.5,27.2L65.1,23.1L70.8,22.8L72.4,15.5L73.9,11.3L80.2,16.8L84.3,18.6L88.0,19.8ZM22.8,75.7L25.7,72.5L28.8,73.2L31.0,70.9L34.9,72.1L35.6,73.9L32.6,77.1L30.4,75.4L27.6,76.7L26.2,79.8L22.7,78.3L22.8,75.7Z\",\n  China:\n    \"M16.2,42.3L17.1,41.2L15.8,38.7L18.6,38.2L20.3,35.3L23.1,35.8L23.9,35.2L24.0,33.8L25.1,33.6L26.2,32.7L27.1,33.6L28.3,34.3L30.3,34.8L31.2,36.0L30.7,37.6L32.9,38.4L34.8,38.6L36.5,39.5L38.0,41.0L38.8,41.8L40.3,41.8L43.2,42.1L45.1,41.9L46.5,42.1L48.5,42.9L50.2,42.9L52.5,42.6L54.8,42.1L56.9,42.1L58.5,41.6L59.5,40.8L60.5,40.4L59.8,39.4L60.5,38.5L62.8,38.9L64.2,38.1L66.3,37.6L67.3,36.7L68.3,36.3L70.4,36.1L71.5,36.2L70.3,34.8L69.2,34.3L68.1,34.8L66.8,34.6L65.6,34.2L66.6,32.8L67.3,31.8L69.0,32.3L70.9,31.4L72.2,29.3L73.0,28.1L73.3,27.0L75.1,26.8L76.9,26.7L79.0,27.2L80.3,27.7L81.1,29.1L82.2,30.6L82.7,31.9L85.1,32.4L86.8,33.4L87.3,34.7L89.5,34.7L90.7,34.1L93.0,33.7L92.3,35.0L91.2,37.0L90.3,38.4L88.6,38.2L87.4,38.6L87.8,39.8L87.6,41.5L86.9,42.3L85.9,41.4L83.2,42.8L82.2,43.5L80.6,44.1L79.1,44.8L77.9,45.7L76.0,46.1L74.9,46.8L73.4,47.2L73.9,46.0L75.0,45.0L74.2,44.3L73.0,44.8L71.4,45.8L70.6,46.7L69.2,46.7L69.2,48.3L70.4,48.6L71.5,49.6L73.1,48.6L74.3,49.1L75.5,49.9L73.5,50.3L72.8,51.1L71.5,51.8L70.7,52.7L72.3,53.5L72.8,54.9L73.7,56.2L74.6,57.3L74.6,58.3L74.0,59.4L74.7,61.0L74.3,62.1L72.5,63.8L71.4,65.6L70.1,67.3L68.1,68.6L66.2,69.7L64.6,69.9L63.7,70.5L62.5,70.8L60.5,71.5L59.0,71.7L58.5,73.2L57.4,72.2L55.8,71.2L53.8,71.1L53.3,69.7L52.0,69.5L50.2,69.7L48.8,69.9L47.7,69.9L46.2,70.4L46.4,72.0L45.5,71.1L44.5,71.5L42.8,70.7L43.2,69.5L42.0,68.0L40.5,68.2L40.7,66.5L42.0,65.4L42.1,64.2L42.1,63.1L41.0,62.0L38.6,61.9L38.5,60.4L37.5,61.0L36.3,60.6L34.7,61.5L33.4,62.6L32.3,62.8L30.9,62.3L29.9,62.0L28.2,63.4L28.1,62.3L25.6,62.5L24.0,62.1L22.9,61.5L21.8,61.3L20.5,60.4L19.1,59.5L18.0,59.0L15.5,58.4L14.1,57.5L13.7,56.0L14.7,56.1L14.2,54.7L14.3,53.6L12.8,51.9L10.5,51.4L10.1,50.3L9.1,49.6L8.6,48.4L7.8,47.6L7.0,46.4L8.5,45.1L9.5,44.8L11.0,45.0L11.5,44.1L13.3,44.0L16.0,42.6L16.2,42.3Z\",\n} as const;\n\nexport type CountryKey = keyof typeof countryOutlines;\nexport const defaultCountries: CountryKey[] = [\n  \"USA\",\n  \"Brazil\",\n  \"UAE\",\n  \"India\",\n  \"Japan\",\n  \"China\",\n];\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/countries.ts"
    },
    {
      "path": "registry/remocn-templates/workflow-console/motion.ts",
      "content": "import { Easing, interpolate } from \"remotion\";\n\nexport const WORKFLOW_FPS = 60;\nexport const WORKFLOW_FRAMES = 2810;\nexport const WORKFLOW_WIDTH = 1920;\nexport const WORKFLOW_HEIGHT = 1080;\nexport const workflowTimeline = [\n  { id: \"intro\", from: 0, to: 132 },\n  { id: \"campaign-command\", from: 132, to: 384 },\n  { id: \"fetch\", from: 384, to: 486 },\n  { id: \"analysis\", from: 486, to: 642 },\n  { id: \"launch-command\", from: 642, to: 753 },\n  { id: \"geography\", from: 753, to: 1008 },\n  { id: \"tools\", from: 1008, to: 1194 },\n  { id: \"delivery\", from: 1194, to: 1320 },\n  { id: \"launched\", from: 1320, to: 1440 },\n  { id: \"growth-title\", from: 1440, to: 1536 },\n  { id: \"stats-loading\", from: 1536, to: 1668 },\n  { id: \"stats\", from: 1668, to: 1884 },\n  { id: \"change-command\", from: 1884, to: 1971 },\n  { id: \"recommendation\", from: 1971, to: 2241 },\n  { id: \"double-command\", from: 2241, to: 2328 },\n  { id: \"chart\", from: 2328, to: 2448 },\n  { id: \"closing-title\", from: 2448, to: 2580 },\n  { id: \"mark\", from: 2580, to: WORKFLOW_FRAMES },\n] as const;\n\nexport const clamp = (n: number) => Math.max(0, Math.min(1, n));\nexport const ease = Easing.bezier(0.22, 1, 0.36, 1);\nexport const smooth = Easing.bezier(0.65, 0, 0.35, 1);\nexport const ramp = (t: number, from: number, to: number) =>\n  clamp((t - from) / Math.max(0.0001, to - from));\nexport function move(\n  t: number,\n  from: number,\n  to: number,\n  a = 0,\n  b = 1,\n  easing = ease,\n) {\n  return interpolate(t, [from, to], [a, b], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing,\n  });\n}\nexport function typed(text: string, t: number, from: number, to: number) {\n  return Array.from(text)\n    .slice(0, Math.floor(Array.from(text).length * ramp(t, from, to)))\n    .join(\"\");\n}\n\n/** Wipe the entire log before the delivery chapter, without a partial hold. */\nexport const toolRunExit = (t: number) => move(t, 19.35, 19.9, 0, 1, smooth);\n\n/** Continuous camera track; no layout rounding or velocity cut at zoom-in. */\nexport function recommendationCamera(t: number, length: number) {\n  const zoom = move(t, 35.5, 37.15, 0, 1, smooth);\n  const scale = 1 + zoom * 0.65;\n  const target = move(\n    t,\n    32.85,\n    37.2,\n    Math.min(11, length * 0.25),\n    Math.max(Math.min(25, length * 0.55), length - 4),\n    smooth,\n  );\n  return { x: 240 - target * 26 * 0.6 * scale, y: 106 + 6 * zoom, scale };\n}\nexport function charCount(text: string, t: number, from: number, to: number) {\n  return Array.from(typed(text, t, from, to)).length;\n}\nexport function chapterAt(frame: number) {\n  return workflowTimeline.find((shot) => frame >= shot.from && frame < shot.to);\n}\nexport function barHeights(values: number[], progress: number, height: number) {\n  const maximum = Math.max(1, ...values);\n  return values.map(\n    (value) => (Math.max(0, value) / maximum) * height * clamp(progress),\n  );\n}\n\nexport function chartBarGrowth(t: number, index: number) {\n  return (\n    move(t, 38.78 + index * 0.07, 39.38 + index * 0.11, 0.18, 1) *\n    (0.9 + move(t, 39.3, 40.1, 0, 1, smooth) * 0.1)\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/motion.ts"
    },
    {
      "path": "registry/remocn-templates/workflow-console/ui.tsx",
      "content": "import type { CSSProperties, ReactNode } from \"react\";\nimport { Img, Interactive } from \"remotion\";\nimport { Caret } from \"@/components/remocn/caret\";\nimport { clamp, move, ramp, smooth, typed } from \"./motion\";\n\nexport const mono = '\"Roboto Mono\", monospace';\n\nexport function Center({\n  children,\n  style,\n}: {\n  children: ReactNode;\n  style?: CSSProperties;\n}) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function AccentText({\n  text,\n  highlight,\n  accent,\n  fullText = text,\n}: {\n  text: string;\n  highlight?: string;\n  accent: string;\n  fullText?: string;\n}) {\n  const index = highlight ? fullText.indexOf(highlight) : -1;\n  if (!highlight || index < 0 || index >= text.length) return <>{text}</>;\n  return (\n    <>\n      {text.slice(0, index)}\n      <span style={{ color: accent }}>\n        {text.slice(index, index + highlight.length)}\n      </span>\n      {text.slice(index + highlight.length)}\n    </>\n  );\n}\n\nexport function XMark({\n  size = 52,\n  color = \"currentColor\",\n  outline = false,\n  progress = 1,\n  src,\n}: {\n  size?: number;\n  color?: string;\n  outline?: boolean;\n  progress?: number;\n  src?: string;\n}) {\n  if (src)\n    return (\n      <Img\n        src={src}\n        style={{ width: size, height: size, objectFit: \"contain\" }}\n      />\n    );\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      role=\"img\"\n      aria-label=\"Workflow node mark\"\n    >\n      <path\n        d=\"M2 3h7v7H2V3Zm13 11h7v7h-7v-7ZM5 12h2v5h6v2H5v-7Zm6-7h8v7h-2V7h-6V5Z\"\n        fill={outline ? \"none\" : color}\n        fillRule=\"evenodd\"\n        stroke={outline ? color : \"none\"}\n        strokeWidth={0.3}\n        pathLength={1}\n        strokeDasharray={1}\n        strokeDashoffset={1 - clamp(progress)}\n      />\n    </svg>\n  );\n}\n\nexport function Command({\n  text,\n  t,\n  start,\n  finish,\n  end,\n  size = 18,\n  tracking = false,\n  entering = true,\n}: {\n  text: string;\n  t: number;\n  start: number;\n  finish: number;\n  end: number;\n  size?: number;\n  tracking?: boolean;\n  entering?: boolean;\n}) {\n  const written = typed(text, t, start, finish);\n  const progress = ramp(t, start - 0.2, start + 0.25);\n  const width = entering\n    ? move(t, start - 0.2, start + (tracking ? 1.3 : 0.9), 100, 420, smooth)\n    : 420;\n  const arrowWidth = size * 0.9;\n  const gap = size * 0.6;\n  const available = Math.max(1, width - 44 - arrowWidth - gap);\n  const fade = 1 - move(t, end - 0.18, end);\n  return (\n    <Center style={{ opacity: fade }}>\n      <Interactive.Div\n        name=\"Typed command\"\n        style={{\n          width,\n          height: size * 2.5,\n          overflow: \"hidden\",\n          position: \"relative\",\n          opacity: entering ? progress : 1,\n          fontFamily: mono,\n          fontSize: size,\n          color: \"#e6f1f8\",\n          whiteSpace: \"pre\",\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            border: \"0.75px solid #3b536c\",\n            marginInline: 10,\n          }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            inset: \"0 22px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            gap,\n            overflow: \"hidden\",\n          }}\n        >\n          <span\n            style={{\n              width: arrowWidth,\n              flexShrink: 0,\n              fontSize: size * 1.3,\n              fontWeight: 500,\n              lineHeight: 1,\n            }}\n          >\n            ❯\n          </span>\n          <div\n            style={{\n              width: available,\n              minWidth: 0,\n              height: \"100%\",\n              display: \"flex\",\n              alignItems: \"center\",\n              overflow: \"hidden\",\n            }}\n          >\n            <span\n              style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                flexShrink: 0,\n                width: \"max-content\",\n                lineHeight: 1.2,\n                transform: `translateX(min(0px, calc(${available}px - 100%)))`,\n              }}\n            >\n              <span>{written}</span>\n              <Caret\n                color=\"#f5f5f5\"\n                height={size}\n                width={1.8}\n                marginLeft={2}\n                opacity={\n                  t < finish + 0.12\n                    ? 1\n                    : Math.floor((t - finish) * 2.5) % 2 === 0\n                      ? 1\n                      : 0\n                }\n              />\n            </span>\n          </div>\n        </div>\n      </Interactive.Div>\n    </Center>\n  );\n}\n\nexport function Loading({\n  text,\n  t,\n  start,\n  end,\n}: {\n  text: string;\n  t: number;\n  start: number;\n  end: number;\n}) {\n  const elapsed = Math.max(0, t - start - 0.45);\n  const label = typed(text, t, start, start + 0.55);\n  return (\n    <Center\n      style={{\n        opacity: 1 - move(t, end - 0.2, end),\n        fontFamily: mono,\n        fontSize: 16,\n        whiteSpace: \"pre\",\n      }}\n    >\n      <div style={{ display: \"flex\", gap: 9, alignItems: \"center\" }}>\n        <svg width={10} height={18} viewBox=\"0 0 10 18\" aria-hidden=\"true\">\n          {Array.from({ length: 6 }, (_, i) => (\n            <circle\n              key={i}\n              cx={3 + (i % 2) * 4}\n              cy={5 + Math.floor(i / 2) * 4}\n              r={0.65}\n              fill=\"#d0d0d0\"\n              opacity={0.15 + ((Math.floor(t * 12) + i) % 6) / 8}\n            />\n          ))}\n        </svg>\n        <span>{label}</span>\n        <span\n          style={{\n            color: \"#8198ae\",\n            fontStyle: \"italic\",\n            opacity: ramp(t, start + 0.6, start + 0.9),\n          }}\n        >\n          {elapsed.toFixed(1)}s\n        </span>\n      </div>\n    </Center>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/ui.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/index.tsx",
      "content": "\"use client\";\n\nimport \"@fontsource/inter/latin-400.css\";\nimport \"@fontsource/roboto-mono/latin-400.css\";\nimport {\n  AbsoluteFill,\n  Audio,\n  Sequence,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport { resolveWorkflowProps, type WorkflowConsoleProps } from \"./content\";\nimport {\n  WORKFLOW_FPS,\n  WORKFLOW_FRAMES,\n  WORKFLOW_HEIGHT,\n  WORKFLOW_WIDTH,\n} from \"./motion\";\nimport { PerformanceChart } from \"./scenes/chart\";\nimport {\n  CampaignCommand,\n  ChangeCommand,\n  DoubleCommand,\n  Fetch,\n  LaunchCommand,\n  StatsLoading,\n} from \"./scenes/commands\";\nimport { Geography } from \"./scenes/geography\";\nimport { Intro } from \"./scenes/intro\";\nimport { ClosingMark } from \"./scenes/mark\";\nimport { Delivery, Recommendation } from \"./scenes/responses\";\nimport {\n  AnalysisTerminal,\n  LaunchedTerminal,\n  StatsTerminal,\n} from \"./scenes/terminal\";\nimport { ClosingTitle, GrowthTitle } from \"./scenes/titles\";\nimport { ToolRun } from \"./scenes/tools\";\n\nexport type {\n  ChartBar,\n  Environment,\n  TerminalRow,\n  TerminalRun,\n  WorkflowConsoleProps,\n  WorkflowContent,\n} from \"./content\";\nexport { workflowBars, workflowContent, workflowEnvironments } from \"./content\";\nexport {\n  type CountryKey,\n  countryOutlines,\n  defaultCountries,\n} from \"./countries\";\nexport {\n  WORKFLOW_FPS,\n  WORKFLOW_FRAMES,\n  WORKFLOW_HEIGHT,\n  WORKFLOW_WIDTH,\n  workflowTimeline,\n} from \"./motion\";\n\nexport function WorkflowConsole(props: WorkflowConsoleProps) {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const scene = resolveWorkflowProps(props);\n  const scale = Math.min(width / 480, height / 270);\n  const at = (referenceFrame: number) =>\n    Math.round((referenceFrame / WORKFLOW_FPS) * fps);\n  return (\n    <AbsoluteFill\n      name=\"Workflow Console\"\n      style={{\n        background: scene.background,\n        color: \"#e7e7e7\",\n        fontFamily: '\"Inter\", sans-serif',\n        overflow: \"hidden\",\n        WebkitFontSmoothing: \"antialiased\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: (width - 480 * scale) / 2,\n          top: (height - 270 * scale) / 2,\n          width: 480,\n          height: 270,\n          scale,\n          transformOrigin: \"0 0\",\n          overflow: \"hidden\",\n        }}\n      >\n        {/* Explicit instances let Studio expose every scene in the timeline. */}\n        <Sequence\n          name=\"intro\"\n          from={at(0)}\n          durationInFrames={at(132) - at(0)}\n          layout=\"none\"\n        >\n          <Intro scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"campaign-command\"\n          from={at(132)}\n          durationInFrames={at(384) - at(132)}\n          layout=\"none\"\n        >\n          <CampaignCommand scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"fetch\"\n          from={at(384)}\n          durationInFrames={at(486) - at(384)}\n          layout=\"none\"\n        >\n          <Fetch scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"analysis\"\n          from={at(486)}\n          durationInFrames={at(642) - at(486)}\n          layout=\"none\"\n        >\n          <AnalysisTerminal scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"launch-command\"\n          from={at(642)}\n          durationInFrames={at(753) - at(642)}\n          layout=\"none\"\n        >\n          <LaunchCommand scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"geography\"\n          from={at(753)}\n          durationInFrames={at(1008) - at(753)}\n          layout=\"none\"\n        >\n          <Geography scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"tools\"\n          from={at(1008)}\n          durationInFrames={at(1194) - at(1008)}\n          layout=\"none\"\n        >\n          <ToolRun scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"delivery\"\n          from={at(1194)}\n          durationInFrames={at(1320) - at(1194)}\n          layout=\"none\"\n        >\n          <Delivery scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"launched\"\n          from={at(1320)}\n          durationInFrames={at(1440) - at(1320)}\n          layout=\"none\"\n        >\n          <LaunchedTerminal scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"growth-title\"\n          from={at(1440)}\n          durationInFrames={at(1536) - at(1440)}\n          layout=\"none\"\n        >\n          <GrowthTitle scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"stats-loading\"\n          from={at(1536)}\n          durationInFrames={at(1668) - at(1536)}\n          layout=\"none\"\n        >\n          <StatsLoading scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"stats\"\n          from={at(1668)}\n          durationInFrames={at(1884) - at(1668)}\n          layout=\"none\"\n        >\n          <StatsTerminal scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"change-command\"\n          from={at(1884)}\n          durationInFrames={at(1971) - at(1884)}\n          layout=\"none\"\n        >\n          <ChangeCommand scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"recommendation\"\n          from={at(1971)}\n          durationInFrames={at(2241) - at(1971)}\n          layout=\"none\"\n        >\n          <Recommendation scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"double-command\"\n          from={at(2241)}\n          durationInFrames={at(2328) - at(2241)}\n          layout=\"none\"\n        >\n          <DoubleCommand scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"chart\"\n          from={at(2328)}\n          durationInFrames={at(2448) - at(2328)}\n          layout=\"none\"\n        >\n          <PerformanceChart scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"closing-title\"\n          from={at(2448)}\n          durationInFrames={at(2580) - at(2448)}\n          layout=\"none\"\n        >\n          <ClosingTitle scene={scene} t={frame / fps} />\n        </Sequence>\n        <Sequence\n          name=\"mark\"\n          from={at(2580)}\n          durationInFrames={at(2810) - at(2580)}\n          layout=\"none\"\n        >\n          <ClosingMark scene={scene} t={frame / fps} />\n        </Sequence>\n      </div>\n      {props.audioSrc?.trim() ? (\n        <Audio\n          src={props.audioSrc}\n          volume={\n            Number.isFinite(props.volume)\n              ? Math.max(0, Math.min(1, props.volume ?? 1))\n              : 1\n          }\n        />\n      ) : null}\n    </AbsoluteFill>\n  );\n}\n\nexport const workflowConsoleConfig = {\n  componentName: \"WorkflowConsole\",\n  importPath: \"@/components/remocn/templates/workflow-console\",\n  controls: {\n    productName: {\n      type: \"text-content\" as const,\n      default: \"Workflow Console\",\n      description: \"Product name in the opening title\",\n    },\n    accentColor: {\n      type: \"color\" as const,\n      default: \"#8ed8f8\",\n      description: \"Result highlights and performance bars\",\n    },\n    backgroundColor: {\n      type: \"color\" as const,\n      default: \"#0e1b2b\",\n      description: \"Main background\",\n    },\n  },\n  durationInFrames: WORKFLOW_FRAMES,\n  fps: WORKFLOW_FPS,\n  compositionWidth: WORKFLOW_WIDTH,\n  compositionHeight: WORKFLOW_HEIGHT,\n};\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/index.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/intro.tsx",
      "content": "import type { CSSProperties } from \"react\";\nimport { useVideoConfig } from \"remotion\";\nimport { TypedSplitWipe } from \"@/components/remocn/typed-split-wipe\";\nimport type { SceneProps } from \"../content\";\nimport { Command } from \"../ui\";\n\nexport function Intro({ scene, t }: SceneProps) {\n  const { fps } = useVideoConfig();\n  return (\n    <>\n      <div\n        style={\n          {\n            position: \"absolute\",\n            inset: 0,\n            \"--font-geist-sans\": '\"Inter\", sans-serif',\n          } as CSSProperties\n        }\n      >\n        <TypedSplitWipe\n          prefix={scene.content.prefix}\n          anchor=\"\"\n          suffix={scene.content.product}\n          typeFrames={60}\n          exitAt={86}\n          exitFrames={46}\n          wordStagger={8}\n          anchorShift={-30}\n          fontSize={Math.min(\n            26,\n            620 /\n              Math.max(\n                1,\n                scene.content.prefix.length + scene.content.product.length + 3,\n              ),\n          )}\n          color=\"#e6f1f8\"\n          speed={60 / fps}\n        />\n      </div>\n      {t >= 1.85 ? (\n        <Command\n          text={scene.content.command}\n          t={t}\n          start={1.85}\n          finish={5.4}\n          end={6.4}\n          tracking\n        />\n      ) : null}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/intro.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/commands.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { Command, Loading } from \"../ui\";\n\nexport const CampaignCommand = ({ scene, t }: SceneProps) => (\n  <Command\n    text={scene.content.command}\n    t={t}\n    start={1.85}\n    finish={5.4}\n    end={6.4}\n    tracking\n  />\n);\nexport const Fetch = ({ scene, t }: SceneProps) => (\n  <Loading text={scene.content.fetching} t={t} start={6.4} end={8.1} />\n);\nexport const LaunchCommand = ({ scene, t }: SceneProps) => (\n  <Command\n    text={scene.content.launchCommand}\n    t={t}\n    start={10.3}\n    finish={11.23}\n    end={12.7}\n  />\n);\nexport const StatsLoading = ({ scene, t }: SceneProps) => (\n  <Loading text={scene.content.statsLoading} t={t} start={25.6} end={27.8} />\n);\nexport const ChangeCommand = ({ scene, t }: SceneProps) => (\n  <Command\n    text={scene.content.changeCommand}\n    t={t}\n    start={31}\n    finish={32.24}\n    end={32.85}\n  />\n);\nexport const DoubleCommand = ({ scene, t }: SceneProps) => (\n  <Command\n    text={scene.content.doubleCommand}\n    t={t}\n    start={37.35}\n    finish={38.05}\n    end={38.8}\n    size={26}\n  />\n);\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/commands.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/terminal.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport { type SceneProps, type TerminalRun, terminalContent } from \"../content\";\nimport { move, ramp, typed } from \"../motion\";\nimport { AccentText, Command, mono } from \"../ui\";\n\nfunction Terminal({\n  scene,\n  t,\n  run,\n  start,\n  end,\n}: SceneProps & { run: TerminalRun; start: number; end: number }) {\n  const rows = scene.terminalRows[run]?.length\n    ? scene.terminalRows[run]\n    : terminalContent(run, scene.content);\n  const local = t - start;\n  const departure = move(t, end - (run === \"launched\" ? 0.15 : 0.65), end);\n  return (\n    <>\n      <Interactive.Div\n        name=\"Campaign terminal\"\n        style={{\n          position: \"absolute\",\n          left: 50,\n          top: 36,\n          width: 380,\n          height: 204,\n          padding: \"13px 14px 12px\",\n          boxSizing: \"border-box\",\n          background: \"#14263a\",\n          fontFamily: mono,\n          fontSize: 6.4,\n          color: \"#c1d4e2\",\n          overflow: \"hidden\",\n          opacity: move(t, start, start + 0.23) * (1 - departure * 0.8),\n          translate: `${-departure * 390}px 0px`,\n          scale: move(t, start, start + 0.45, 0.92, 1),\n          transformOrigin: \"50% 60%\",\n          maskImage:\n            \"linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            fontSize: 5.5,\n            color: \"#839bb0\",\n            height: 20,\n          }}\n        >\n          <span>{scene.content.terminalTitle}</span>\n          <span>⌘ K　▥</span>\n        </div>\n        <div style={{ height: 142, overflow: \"hidden\" }}>\n          {rows.map((row, i) => (\n            <div\n              key={`${i}-${row.at}`}\n              style={{\n                minHeight: row.kind === \"thought\" ? 8 : 12.5,\n                marginTop:\n                  row.kind === \"prompt\" && i > 0\n                    ? 8\n                    : row.kind === \"result\"\n                      ? 5\n                      : 0,\n                whiteSpace: \"pre-wrap\",\n                overflowWrap: \"anywhere\",\n                lineHeight: \"10px\",\n                color:\n                  row.kind === \"thought\"\n                    ? \"#718ba1\"\n                    : row.kind === \"note\"\n                      ? \"#96aabd\"\n                      : row.kind === \"result\"\n                        ? scene.accent\n                        : \"#c1d4e2\",\n                fontSize: row.kind === \"thought\" ? 5 : 6.4,\n                opacity: local >= row.at ? 1 : 0,\n              }}\n            >\n              {row.kind === \"prompt\" ? \"❯ \" : \"\"}\n              <AccentText\n                text={typed(\n                  row.text,\n                  local,\n                  row.at,\n                  row.at + (row.kind === \"thought\" ? 0.05 : 0.28),\n                )}\n                highlight={row.highlight}\n                fullText={row.text}\n                accent={scene.accent}\n              />\n            </div>\n          ))}\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            left: 14,\n            right: 14,\n            bottom: 25,\n            height: 13,\n            border: \"0.4px solid #3b536c\",\n            display: \"flex\",\n            alignItems: \"center\",\n            paddingLeft: 5,\n            color: \"#d8d8d8\",\n          }}\n        >\n          ❯\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            left: 14,\n            right: 14,\n            bottom: 10,\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            fontSize: 4.6,\n            color: \"#8ba4ba\",\n          }}\n        >\n          <span>\n            Send enter　Mode tab　History ↑↓　Multiline ⇧↵　Quit ^C　Commands /\n          </span>\n          <span>[1]</span>\n        </div>\n      </Interactive.Div>\n      {run === \"campaign\" && t > 10.3 ? (\n        <div style={{ opacity: ramp(t, 10.3, 10.7) }}>\n          <Command\n            text={scene.content.launchCommand}\n            t={t}\n            start={10.3}\n            finish={11.23}\n            end={12.7}\n          />\n        </div>\n      ) : null}\n      {run === \"stats\" && t > 31 ? (\n        <div style={{ opacity: ramp(t, 31, 31.4) }}>\n          <Command\n            text={scene.content.changeCommand}\n            t={t}\n            start={31}\n            finish={32.24}\n            end={32.85}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nexport const AnalysisTerminal = (props: SceneProps) => (\n  <Terminal {...props} run=\"campaign\" start={8.1} end={10.7} />\n);\nexport const LaunchedTerminal = (props: SceneProps) => (\n  <Terminal {...props} run=\"launched\" start={22} end={24} />\n);\nexport const StatsTerminal = (props: SceneProps) => (\n  <Terminal {...props} run=\"stats\" start={27.8} end={31.4} />\n);\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/terminal.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/geography.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport type { SceneProps } from \"../content\";\nimport { type CountryKey, countryOutlines } from \"../countries\";\nimport { move, ramp, smooth } from \"../motion\";\n\nconst topologyPaths = {\n  single: \"M15 38h24v24H15ZM61 38h24v24H61ZM39 50h22\",\n  parallel:\n    \"M9 38h20v24H9ZM71 12h20v20H71ZM71 68h20v20H71ZM29 50h21V22h21M50 50v28h21\",\n  cluster:\n    \"M10 10h22v22H10ZM68 10h22v22H68ZM10 68h22v22H10ZM68 68h22v22H68ZM39 39h22v22H39ZM32 21h18v18M79 32v18H61M21 32v18h18M50 61v18h18M32 79h18\",\n  canary:\n    \"M8 37h24v26H8ZM66 12h24v24H66ZM66 64h24v24H66ZM32 50h17V24h17M49 50v26h17M71 20h14M71 28h8\",\n};\n\nexport function Geography({ scene, t }: SceneProps) {\n  const local = t - 12.55;\n  const selected = scene.useCountries\n    ? scene.countries\n    : scene.environments.map((item) => item.label);\n  // Slide labels through a fixed aperture; the active vector rotates with the slot.\n  const travel =\n    2 +\n    move(t, 13.85, 14.3, 0, -1, smooth) +\n    move(t, 14.85, 15.3, 0, 2, smooth) +\n    move(t, 15.75, 16.2, 0, -3, smooth);\n  const active = Math.floor(travel + 0.5);\n  const rotation =\n    Math.sin(local * 3.3) * 17 +\n    Math.sin(move(t, 13.85, 14.3, 0, Math.PI, smooth)) * 75 +\n    Math.sin(move(t, 14.85, 15.3, 0, Math.PI, smooth)) * 75 +\n    Math.sin(move(t, 15.75, 16.2, 0, Math.PI, smooth)) * 75;\n  const intro = move(local, 0, 0.45);\n  const outro = move(t, 16.45, 16.8);\n  return (\n    <Interactive.Div\n      name=\"Environment carousel\"\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        opacity: 1 - outro,\n        translate: `0px ${outro * -40}px`,\n        perspective: 650,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: 25,\n          right: 25,\n          top: 117,\n          height: 34,\n          overflow: \"hidden\",\n          maskImage:\n            \"linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)\",\n        }}\n      >\n        {Array.from({ length: 18 }, (_, item) => {\n          const i = item - 4;\n          const country =\n            selected[\n              ((i % selected.length) + selected.length) % selected.length\n            ];\n          const delta = i - travel;\n          return (\n            <span\n              key={i}\n              style={{\n                position: \"absolute\",\n                width: 70,\n                left: 180 + delta * 66 + Math.sign(delta) * 30,\n                textAlign: \"center\",\n                fontSize: 14,\n                lineHeight: \"30px\",\n                color: \"#9ab0c4\",\n                opacity:\n                  selected.length === 1 || Math.abs(delta) < 0.5 ? 0 : 0.65,\n              }}\n            >\n              {country}\n            </span>\n          );\n        })}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: move(local, 0, 0.45, 80, 175),\n          top: move(local, 0, 0.45, 110, 67),\n          width: move(local, 0, 0.45, 320, 130),\n          height: move(local, 0, 0.45, 48, 130),\n          border: \"0.8px solid #3b536c\",\n          borderRadius: move(local, 0, 0.45, 0, 14),\n          boxShadow: \"0 0 0 2px #ffffff03\",\n          background: scene.background,\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            inset: scene.useCountries ? 9 : \"8px 16px 28px\",\n            opacity: intro,\n            transform: `rotateY(${rotation}deg) rotateX(${-10 + Math.sin(local) * 5}deg) rotateZ(-8deg)`,\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          {[0, 1, 2].map((layer) => (\n            <svg\n              key={layer}\n              viewBox=\"0 0 100 100\"\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                width: \"100%\",\n                height: \"100%\",\n                translate: `${layer * 0.8}px ${layer * 0.8}px`,\n              }}\n              aria-label={selected[active % selected.length]}\n              role=\"img\"\n            >\n              <path\n                d={\n                  scene.useCountries\n                    ? countryOutlines[\n                        selected[active % selected.length] as CountryKey\n                      ]\n                    : topologyPaths[\n                        scene.environments[active % scene.environments.length]\n                          .topology\n                      ]\n                }\n                fill=\"none\"\n                stroke={layer ? \"#3b536c\" : scene.accent}\n                strokeWidth={\n                  scene.useCountries ? (layer ? 0.16 : 0.32) : layer ? 0.7 : 1.4\n                }\n                opacity={layer ? 0.7 : 0.65}\n              />\n            </svg>\n          ))}\n        </div>\n        {!scene.useCountries ? (\n          <div\n            style={{\n              position: \"absolute\",\n              bottom: 8,\n              width: \"100%\",\n              textAlign: \"center\",\n              color: scene.accent,\n              fontSize: 10,\n              opacity: intro,\n            }}\n          >\n            {selected[active % selected.length]}\n          </div>\n        ) : null}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          top: 213,\n          width: \"100%\",\n          textAlign: \"center\",\n          color: \"#e5e5e5\",\n          fontSize: 18,\n          letterSpacing: \"-0.035em\",\n          opacity: ramp(local, 0.15, 0.5),\n        }}\n      >\n        {scene.content.geography}\n      </div>\n    </Interactive.Div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/geography.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/tools.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport type { SceneProps } from \"../content\";\nimport { move, toolRunExit, typed } from \"../motion\";\nimport { mono } from \"../ui\";\n\nexport function ToolRun({ scene, t }: SceneProps) {\n  const local = t - 16.8;\n  const exit = toolRunExit(t);\n  return (\n    <Interactive.Div\n      name=\"Tool execution log\"\n      style={{\n        position: \"absolute\",\n        left: 85,\n        top: 54,\n        width: 320,\n        height: 173,\n        background: \"#14263a\",\n        boxSizing: \"border-box\",\n        padding: \"24px 26px\",\n        color: \"#a0a0a0\",\n        fontFamily: mono,\n        fontSize: 10.5,\n        lineHeight: \"16px\",\n        opacity: move(local, 0, 0.22) * (1 - exit),\n        clipPath: `inset(${exit * 100}% 0 0 0)`,\n        scale: move(local, 0, 2.5, 0.93, 1.02),\n      }}\n    >\n      {scene.tools.map((text, i) => (\n        <div\n          key={text}\n          style={{\n            opacity: local >= i * 0.15 ? 1 : 0,\n            whiteSpace: \"nowrap\",\n            color: i === 1 || i === 3 || i === 6 ? \"#8198ae\" : \"#b9ccdc\",\n          }}\n        >\n          <span style={{ color: \"#bababa\", marginRight: 7 }}>◆</span>\n          {typed(text, local, i * 0.15, i * 0.15 + 0.43)}\n        </div>\n      ))}\n    </Interactive.Div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/tools.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/responses.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport type { SceneProps } from \"../content\";\nimport { move, ramp, recommendationCamera, typed } from \"../motion\";\nimport { AccentText, mono } from \"../ui\";\n\nexport function Delivery({ scene, t }: SceneProps) {\n  const c = scene.content;\n  const full = `${c.campaign} is ${c.delivery} -`;\n  return (\n    <Interactive.Div\n      name=\"Release rollout response\"\n      style={{\n        position: \"absolute\",\n        top: 115,\n        left: move(t, 19.5, 21.7, 155, 70),\n        fontFamily: mono,\n        fontSize: 18,\n        lineHeight: \"25px\",\n        color: \"#e6e6e6\",\n        width: 560,\n        opacity: 1 - move(t, 21.75, 22),\n        maskImage: \"linear-gradient(90deg,#000 20%,transparent 90%)\",\n      }}\n    >\n      <div style={{ whiteSpace: \"pre\" }}>\n        <AccentText\n          text={typed(full, t, 19.8, 20.35)}\n          fullText={full}\n          highlight={c.delivery}\n          accent={scene.accent}\n        />\n      </div>\n      <div style={{ color: \"#9ab0c4\", opacity: 0.85, whiteSpace: \"pre\" }}>\n        {typed(c.deliveryDetail, t, 20, 20.8)}\n      </div>\n    </Interactive.Div>\n  );\n}\n\nexport function Recommendation({ scene, t }: SceneProps) {\n  const c = scene.content;\n  const full = c.recommendation;\n  const camera = recommendationCamera(t, Array.from(full).length);\n  const budget = `${c.budgetLabel}: ${c.oldBudget} → ${c.newBudget}.`;\n  return (\n    <Interactive.Div\n      name=\"Pipeline recommendation\"\n      style={{\n        position: \"absolute\",\n        left: 0,\n        top: 0,\n        fontFamily: mono,\n        fontSize: 26,\n        lineHeight: \"37px\",\n        width: 1800,\n        color: \"#e9e9e9\",\n        transform: `translate3d(${camera.x}px, ${camera.y}px, 0) scale(${camera.scale})`,\n        willChange: \"transform\",\n        transformOrigin: \"0 0\",\n        whiteSpace: \"pre\",\n        opacity: 1 - move(t, 37.15, 37.35),\n      }}\n    >\n      <div>\n        <AccentText\n          text={typed(full, t, 32.85, 33.9)}\n          fullText={full}\n          accent={scene.accent}\n        />\n      </div>\n      <div style={{ color: \"#9ab0c4\", opacity: 1 - ramp(t, 35.9, 36.7) }}>\n        <AccentText\n          text={typed(budget, t, 33.35, 34.6)}\n          fullText={budget}\n          highlight={c.newBudget}\n          accent={scene.accent}\n        />\n      </div>\n    </Interactive.Div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/responses.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/titles.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport type { SceneProps } from \"../content\";\nimport { move, typed } from \"../motion\";\nimport { Center } from \"../ui\";\n\nexport function GrowthTitle({ scene, t }: SceneProps) {\n  const text = scene.content.growth;\n  const parts = text.split(\" \");\n  const last = parts.pop() ?? text;\n  const prefix = parts.join(\" \");\n  const exit = move(t, 25.1, 25.6);\n  return (\n    <Center>\n      <Interactive.Div\n        name=\"Grow your performance\"\n        style={{\n          fontSize: Math.min(26, 700 / Math.max(1, text.length)),\n          letterSpacing: \"-0.04em\",\n          color: \"#eeeeee\",\n          whiteSpace: \"pre\",\n        }}\n      >\n        {t < 25.1 ? (\n          typed(text, t, 24, 24.48)\n        ) : (\n          <>\n            <span\n              style={{\n                display: \"inline-block\",\n                clipPath: `inset(0 ${exit * 100}% 0 0)`,\n              }}\n            >\n              {prefix}{\" \"}\n            </span>\n            <span\n              style={{\n                display: \"inline-block\",\n                clipPath: `inset(0 0 0 ${move(t, 25.56, 25.6) * 100}%)`,\n                translate: `${exit * -60}px 0px`,\n              }}\n            >\n              {last}\n            </span>\n          </>\n        )}\n      </Interactive.Div>\n    </Center>\n  );\n}\n\nexport function ClosingTitle({ scene, t }: SceneProps) {\n  return (\n    <Center>\n      <Interactive.Div\n        name=\"Stay in the loop\"\n        style={{\n          color: \"#eeeeee\",\n          fontSize: Math.min(\n            31,\n            710 / Math.max(1, scene.content.closing.length),\n          ),\n          letterSpacing: \"-0.04em\",\n          whiteSpace: \"pre\",\n        }}\n      >\n        {typed(scene.content.closing, t, 40.8, 41.5)}\n      </Interactive.Div>\n    </Center>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/titles.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/chart.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport type { SceneProps } from \"../content\";\nimport { barHeights, chartBarGrowth, move } from \"../motion\";\n\nexport function PerformanceChart({ scene, t }: SceneProps) {\n  const bars = scene.bars;\n  const heights = barHeights(\n    bars.map((bar) => bar.value),\n    1,\n    117,\n  );\n  const width = 286 / bars.length;\n  const exit = move(t, 40.7, 40.8);\n  return (\n    <Interactive.Div\n      name=\"Performance chart\"\n      style={{\n        position: \"absolute\",\n        left: 76,\n        top: 44,\n        width: 330,\n        height: 189,\n        background: \"#14263a\",\n        opacity: move(t, 38.8, 39),\n        transform: `translate3d(0, 0, 0) scale(${move(t, 38.8, 40.4, 0.88, 1.05)})`,\n        willChange: \"transform\",\n        transformOrigin: \"50% 65%\",\n        overflow: \"hidden\",\n        clipPath: `inset(0 ${exit * 100}% 0 0)`,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          top: 15,\n          left: 15,\n          color: \"#dedede\",\n          fontSize: 8,\n        }}\n      >\n        {scene.content.chartTitle}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: 16,\n          right: 16,\n          bottom: 17,\n          display: \"flex\",\n          alignItems: \"flex-end\",\n          gap: 3,\n          height: 126,\n        }}\n      >\n        {bars.map((bar, i) => {\n          const growth = chartBarGrowth(t, i);\n          return (\n            <div\n              key={`${bar.label}-${i}`}\n              style={{\n                position: \"relative\",\n                flex: 1,\n                minWidth: 0,\n                height: heights[i],\n                color: i === 0 ? \"#a0a0a0\" : scene.background,\n                overflow: \"hidden\",\n                clipPath: `inset(${(1 - growth) * 100}% 0 0 0)`,\n              }}\n            >\n              <div\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  background: i === 0 ? \"#3a526a\" : scene.accent,\n                  boxShadow: \"inset 0 1px #ffffff30\",\n                  transform: `translate3d(0, 0, 0) scaleY(${growth})`,\n                  transformOrigin: \"50% 100%\",\n                  willChange: \"transform\",\n                }}\n              />\n              <div\n                style={{\n                  padding: \"5px 4px\",\n                  fontSize: Math.min(6.5, width / 9),\n                  whiteSpace: \"nowrap\",\n                  transform: `translate3d(0, ${heights[i] * (1 - growth)}px, 0)`,\n                  willChange: \"transform\",\n                }}\n              >\n                {bar.label}\n              </div>\n              <div\n                style={{\n                  position: \"absolute\",\n                  left: 4,\n                  bottom: 4,\n                  fontSize: 5.8,\n                }}\n              >\n                {bar.detail}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </Interactive.Div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/chart.tsx"
    },
    {
      "path": "registry/remocn-templates/workflow-console/scenes/mark.tsx",
      "content": "import { Interactive } from \"remotion\";\nimport type { SceneProps } from \"../content\";\nimport { move, ramp } from \"../motion\";\nimport { Center, XMark } from \"../ui\";\n\nexport function ClosingMark({ scene, t }: SceneProps) {\n  const resolve = move(t, 44.5, 44.72);\n  return (\n    <Center style={{ background: scene.background }}>\n      <Interactive.Div\n        name=\"Workflow node mark\"\n        style={{\n          position: \"relative\",\n          width: 100,\n          height: 100,\n          scale: move(t, 43, 46.2, 1, 0.48),\n          opacity: 1 - move(t, 45.55, 46.45),\n        }}\n      >\n        {[0, 1, 2].map((layer) => (\n          <div\n            key={layer}\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              opacity: (1 - resolve) * (layer === 0 ? 0.45 : 0.22),\n              translate: `${(1 - ramp(t, 43.2, 44.6)) * layer * 5}px 0px`,\n            }}\n          >\n            <XMark\n              size={100}\n              color={scene.accent}\n              outline\n              progress={ramp(t, 43.05 + layer * 0.1, 44.25)}\n              src={scene.logoSrc}\n            />\n          </div>\n        ))}\n        <div style={{ opacity: resolve }}>\n          <XMark size={100} color={scene.accent} src={scene.logoSrc} />\n        </div>\n      </Interactive.Div>\n    </Center>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/workflow-console/scenes/mark.tsx"
    }
  ],
  "type": "registry:component"
}