peachsim 0.1.527

package/src/screenshots/orchestrate.ts

@@ -0,0 +1,256 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'fs'
+import { tmpdir } from 'os'
+import path from 'path'
+import { launchReapedChrome } from '../../../../scripts/lib/reap-browser'
+import { runFlowPlayback } from '../../cli/commands/flow'
+import {
+  composeMarketingScreenshots,
+  type MarketingBrowserLike,
+  type ComposeResult,
+  type ComposeSlideSource,
+} from './compose'
+import { createFramedScreenshotComposer } from './frame-compose'
+import { applyOrgDeckToPlan, type OrgDeckFrame } from './org-deck'
+import { loadScreenshotsPlan, type NormalizedScreenshotsPlan } from './schema'
+
+export interface RunScreenshotsOverrides {
+  appTarget?: string | null
+  deviceModel?: string | null
+  simId?: string | null
+  captureOnly?: boolean
+  composeOnly?: boolean
+  // copy/colors pulled from the team's org deck to overlay onto the plan's
+  // compose slides (rnx screenshot appstore --org … --repo …).
+  orgDeckFrames?: OrgDeckFrame[] | null
+}
+
+export interface CaptureResult {
+  manifestPath: string
+  rawDir: string
+  framedDir: string
+  rawFiles: string[]
+  framedFiles: string[]
+}
+
+export interface ScreenshotsRunResult {
+  plan: NormalizedScreenshotsPlan
+  capture: CaptureResult
+  compose: ComposeResult | null
+}
+
+function resolveCapturePathMode(plan: NormalizedScreenshotsPlan): 'plan' | 'flow' {
+  if (plan.capture.pathMode === 'plan' || plan.capture.pathMode === 'flow') {
+    return plan.capture.pathMode
+  }
+  return plan.capture.fromDir ? 'flow' : 'plan'
+}
+
+export function buildCaptureFlowArgs(
+  plan: NormalizedScreenshotsPlan,
+  overrides: RunScreenshotsOverrides,
+): string[] {
+  if (!plan.capture.flowPath) {
+    throw new Error('capture flow path is required to build flow args')
+  }
+  const args = [plan.capture.flowPath]
+  const pathMode = resolveCapturePathMode(plan)
+  args.push('--screenshots', plan.capture.rawDir)
+  if (pathMode === 'flow') {
+    args.push('--screenshot-paths', 'flow')
+  }
+  const appTarget = overrides.appTarget ?? plan.appTarget
+  const deviceModel = overrides.deviceModel ?? plan.deviceModel
+  const simId = overrides.simId ?? plan.capture.simId
+  if (appTarget) args.push('--url', appTarget)
+  if (deviceModel) args.push('--device', deviceModel)
+  if (simId) args.push('--sim', simId)
+  if (plan.capture.openInNewSim) args.push('--new')
+  return args
+}
+
+function resolveSlideRawPath(
+  plan: NormalizedScreenshotsPlan,
+  screenshot: string,
+): string {
+  return path.isAbsolute(screenshot)
+    ? screenshot
+    : path.join(plan.capture.rawDir, screenshot)
+}
+
+function resolveCaptureManifestPath(plan: NormalizedScreenshotsPlan): string {
+  return path.join(plan.capture.outDir, 'manifest.json')
+}
+
+async function runCaptureStage(
+  plan: NormalizedScreenshotsPlan,
+  overrides: RunScreenshotsOverrides,
+): Promise<void> {
+  if (!plan.capture.flowPath) return
+  mkdirSync(plan.capture.rawDir, { recursive: true })
+  const args = buildCaptureFlowArgs(plan, overrides)
+  const exitCode = await runFlowPlayback(args)
+  if (exitCode !== 0) {
+    throw new Error(`flow capture failed with exit code ${exitCode}`)
+  }
+}
+
+async function buildFramedSources(
+  plan: NormalizedScreenshotsPlan,
+  browserOverride?: MarketingBrowserLike,
+): Promise<Map<string, string>> {
+  const sources = new Map<string, string>()
+  mkdirSync(plan.capture.framedDir, { recursive: true })
+  const browser =
+    browserOverride ??
+    (await (async () => {
+      const { chromium } = await import('playwright')
+      return launchReapedChrome((options) => chromium.launch(options), {
+        headless: true,
+      })
+    })())
+  try {
+    const composer = await createFramedScreenshotComposer(browser)
+    try {
+      for (const slide of plan.compose.slides) {
+        const rawPath = resolveSlideRawPath(plan, slide.screenshot)
+        const rawBuffer = readFileSync(rawPath)
+        const framedBuffer = await composer.compose(rawBuffer, plan.compose.frame.style)
+        const framedPath = path.join(plan.capture.framedDir, `${slide.assetKey}.png`)
+        writeFileSync(framedPath, framedBuffer)
+        sources.set(slide.id, framedPath)
+      }
+    } finally {
+      await composer.close()
+    }
+  } finally {
+    if (!browserOverride && typeof browser.close === 'function') {
+      await browser.close()
+    }
+  }
+  return sources
+}
+
+function writeCaptureManifest(
+  plan: NormalizedScreenshotsPlan,
+  framedSources: Map<string, string>,
+  effectiveDeviceModel: string | null,
+): CaptureResult {
+  const rawFiles: string[] = []
+  const framedFiles: string[] = []
+  mkdirSync(plan.capture.outDir, { recursive: true })
+  const manifestPath = resolveCaptureManifestPath(plan)
+  const slides = plan.compose.slides.map((slide) => {
+    const rawPath = resolveSlideRawPath(plan, slide.screenshot)
+    const framedPath = framedSources.get(slide.id) ?? null
+    rawFiles.push(rawPath)
+    if (framedPath) framedFiles.push(framedPath)
+    return {
+      id: slide.id,
+      screenshot: slide.screenshot,
+      rawPath,
+      framedPath,
+    }
+  })
+  writeFileSync(
+    manifestPath,
+    JSON.stringify(
+      {
+        generatedAt: new Date().toISOString(),
+        deviceModel: effectiveDeviceModel,
+        mode: plan.capture.mode,
+        rawDir: plan.capture.rawDir,
+        framedDir: plan.capture.framedDir,
+        slides,
+      },
+      null,
+      2,
+    ),
+  )
+  return {
+    manifestPath,
+    rawDir: plan.capture.rawDir,
+    framedDir: plan.capture.framedDir,
+    rawFiles,
+    framedFiles,
+  }
+}
+
+function resolveComposeSources(
+  plan: NormalizedScreenshotsPlan,
+  framedSources: Map<string, string>,
+): ComposeSlideSource[] {
+  return plan.compose.slides.map((slide) => ({
+    slide,
+    imagePath:
+      plan.compose.frame.show === true
+        ? (framedSources.get(slide.id) ?? resolveSlideRawPath(plan, slide.screenshot))
+        : resolveSlideRawPath(plan, slide.screenshot),
+  }))
+}
+
+export async function runScreenshotsPlan(
+  planPath: string,
+  overrides: RunScreenshotsOverrides = {},
+): Promise<ScreenshotsRunResult> {
+  const plan = loadScreenshotsPlan(planPath)
+  if (overrides.orgDeckFrames && overrides.orgDeckFrames.length > 0) {
+    applyOrgDeckToPlan(plan, overrides.orgDeckFrames)
+  }
+  const effectiveDeviceModel = overrides.deviceModel ?? plan.deviceModel
+  if (!overrides.composeOnly) {
+    await runCaptureStage(plan, overrides)
+  }
+  const needsFramedSources =
+    plan.capture.mode !== 'raw' ||
+    (!overrides.captureOnly && plan.compose.frame.show === true)
+  const needsSharedBrowser = needsFramedSources || !overrides.captureOnly
+  const sharedBrowser = needsSharedBrowser
+    ? await (async () => {
+        const { chromium } = await import('playwright')
+        return launchReapedChrome((options) => chromium.launch(options), {
+          headless: true,
+        })
+      })()
+    : null
+  try {
+    const framedSources = needsFramedSources
+      ? await buildFramedSources(plan, sharedBrowser ?? undefined)
+      : new Map()
+    const capture = writeCaptureManifest(plan, framedSources, effectiveDeviceModel)
+
+    if (overrides.captureOnly) {
+      return { plan, capture, compose: null }
+    }
+
+    const composeSources = resolveComposeSources(plan, framedSources)
+    const compose = await composeMarketingScreenshots(
+      plan.compose,
+      composeSources,
+      sharedBrowser ?? undefined,
+    )
+    return { plan, capture, compose }
+  } finally {
+    if (sharedBrowser && typeof sharedBrowser.close === 'function') {
+      await sharedBrowser.close()
+    }
+  }
+}
+
+export async function runScreenshotsPlanFromExistingRaw(
+  planPath: string,
+  rawDir: string,
+): Promise<ScreenshotsRunResult> {
+  const plan = loadScreenshotsPlan(planPath)
+  plan.capture.rawDir = rawDir
+  plan.capture.flowPath = null
+  plan.capture.fromDir = rawDir
+  const framedDir = path.join(tmpdir(), 'rnx-screenshots-framed')
+  plan.capture.framedDir = framedDir
+  const framedSources = await buildFramedSources(plan)
+  const capture = writeCaptureManifest(plan, framedSources, plan.deviceModel)
+  const compose = await composeMarketingScreenshots(
+    plan.compose,
+    resolveComposeSources(plan, framedSources),
+  )
+  return { plan, capture, compose }
+}

package/src/screenshots/org-deck.ts

@@ -0,0 +1,91 @@
+// fetch the team's screenshot deck (the copy / colors founders set up in the
+// org dashboard) and overlay it onto a screenshots plan, so the programmatic
+// `rnx screenshot appstore --plan … --org … --repo …` flow renders the org's
+// words + brand gradient instead of the local yaml's. the plan still owns
+// which screen each slide captures and the device frame; the deck owns copy +
+// colors. 3d scenes don't translate to the cli's 2d composer, so only copy and
+// colors carry over (the 3d hero look stays the in-browser screenshot mode).
+
+import { resolveBgColorValue } from 'sootsim-engine/screenshots/tokens'
+import type { BackgroundSpec } from './registry'
+import type { NormalizedScreenshotsPlan } from './schema'
+
+export interface OrgDeckFetchOptions {
+  org: string
+  repo: string
+  origin: string
+  authHeader: string
+}
+
+export interface OrgDeckFrame {
+  title?: string
+  subtitle?: string
+  bgTop?: string
+  bgBottom?: string
+  titleColor?: string
+}
+
+function readString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.length > 0 ? value : undefined
+}
+
+// GET the team deck and return its first deck's frames, or null when the team
+// has no deck yet. throws on auth / network failure so the caller can surface a
+// clear message rather than silently falling back to the local copy.
+export async function fetchOrgDeckFrames(
+  opts: OrgDeckFetchOptions,
+): Promise<OrgDeckFrame[] | null> {
+  const base = opts.origin.replace(/\/$/, '')
+  const url = `${base}/api/sootsim/screenshot-decks?org=${encodeURIComponent(
+    opts.org,
+  )}&repo=${encodeURIComponent(opts.repo)}`
+  const res = await fetch(url, { headers: { Authorization: opts.authHeader } })
+  if (!res.ok) {
+    const detail = await res.text().catch(() => '')
+    throw new Error(
+      `org deck fetch failed (${res.status} ${res.statusText}) for ${opts.org}/${opts.repo}${
+        detail ? ` — ${detail.slice(0, 200)}` : ''
+      }`,
+    )
+  }
+  const body = (await res.json()) as { decks?: Array<{ config?: unknown }> }
+  const deck = body.decks?.[0]
+  if (!deck || !deck.config || typeof deck.config !== 'object') return null
+  const frames = (deck.config as { frames?: unknown }).frames
+  if (!Array.isArray(frames)) return null
+  return frames.map((entry) => {
+    const frame = (entry ?? {}) as Record<string, unknown>
+    return {
+      title: readString(frame.title),
+      subtitle: readString(frame.subtitle),
+      bgTop: readString(frame.bgTop),
+      bgBottom: readString(frame.bgBottom),
+      titleColor: readString(frame.titleColor),
+    }
+  })
+}
+
+// overlay deck frames onto the plan's compose slides, matched by order. a deck
+// with fewer frames than the plan leaves the trailing slides on their yaml copy.
+export function applyOrgDeckToPlan(
+  plan: NormalizedScreenshotsPlan,
+  frames: OrgDeckFrame[],
+): void {
+  plan.compose.slides.forEach((slide, index) => {
+    const frame = frames[index]
+    if (!frame) return
+    if (frame.title != null) slide.headline = frame.title
+    if (frame.subtitle != null) slide.subheadline = frame.subtitle
+    if (frame.bgTop && frame.bgBottom) {
+      const background: BackgroundSpec = {
+        type: 'gradient',
+        direction: 180,
+        stops: [
+          { offset: 0, color: resolveBgColorValue(frame.bgTop) },
+          { offset: 1, color: resolveBgColorValue(frame.bgBottom) },
+        ],
+      }
+      slide.background = background
+    }
+  })
+}

package/src/screenshots/registry.ts

@@ -0,0 +1,58 @@
+// composer-facing registry. shared tokens live in
+// `sootsim-engine/src/screenshots/tokens.ts` so the live browser
+// screenshot mode and the post-process composer render from the same
+// canvas / background / text / pose / animation / clamp vocabulary.
+//
+// this module re-exports those tokens plus the composer-specific
+// `FrameComposeSpec` shape.
+
+import type { DeviceModel } from 'sootsim-engine/settings'
+
+export {
+  BACKGROUND_PRESETS,
+  DEFAULT_FRAME_SHADOW,
+  DEFAULT_FRAME_STYLE,
+  SCREENSHOT_CANVASES,
+  SCREENSHOT_MODE_ANIM,
+  SCREENSHOT_TEXT_CLAMP,
+  SCREENSHOT_TEXT_SAFE_AREA,
+  cloneBackgroundSpec,
+  resolveBackgroundPreset,
+  resolveCanvasPreset,
+} from 'sootsim-engine/screenshots/tokens'
+
+export type {
+  BackgroundPresetName,
+  BackgroundSpec,
+  CanvasPreset,
+  FrameShadowSpec,
+  GradientStop,
+  PosePresetName,
+  ScreenshotCanvasName,
+  TextPresetName,
+} from 'sootsim-engine/screenshots/tokens'
+
+import type { FrameShadowSpec, PosePresetName } from 'sootsim-engine/screenshots/tokens'
+
+export interface FrameComposeSpec {
+  show: boolean
+  style: DeviceModel
+  pose: PosePresetName
+  scale: number
+  offsetY: number
+  shadow: FrameShadowSpec
+}
+
+export function toAssetKey(value: string): string {
+  const normalized = value
+    .replace(/\\/g, '/')
+    .replace(/\.png$/i, '')
+    .trim()
+    .split('/')
+    .filter(Boolean)
+    .join('--')
+    .replace(/[^A-Za-z0-9-]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+  return normalized || 'slide'
+}