V1 Web PWA · Surface walkthrough

Studio Aja · Animation Blending

A per-surface walkthrough of the V1 Web PWA studio surface: layout, states, interactions, data, and cross-references.

walked + e2e-covered
9sections4 minread

On this page

Context. surface studio · domain aja · route /studio/aja/animation-blending · auth signed-in + studio entitlement · source apps/oshun/web/src/app/studio/aja/animation-blending/page.tsx

Last walked. 2026-05-29 automated runtime walk (Playwright headless) — render, /v1 data (2xx), console/page-errors, expected content, screenshot verified; live screen-reader, touch, offline, and telemetry-delivery checks pending a manual AT pass. Evidence: WALKTHROUGH/results/runtime-sweep-2026-05-29.md; body re-derived 2026-06-03 from current source (lane-console architecture); 2026-07-02 studio-aja-motion-lane-consoles Playwright pass covers live BFF catalog/evaluate, auth/schema gates, error states, breadcrumbs, route map, quick actions, and mobile no-overflow.

Purpose#

Admin lane console for the real @aja/animation-blending body-mask algebra. The operator types a region:weight map plus a default weight for unlisted regions and POSTs it; the lane builds a per-region blend mask across the catalog's 24 body regions (weights 0–1) and reads back coverage, the count of active regions, the full/empty flags, and the inverse mask's coverage — the layering primitive behind partial-body animation blends.

Entry points#

  • Direct URL / bookmark/studio/aja/animation-blending; metadata sets alternates.canonical to this path
  • Studio nav — Domain-bridge studios section of /studio
  • Breadcrumb parent/studio/aja/video-analysis (declared in the page.tsx breadcrumb <ol>)
  • Sibling quick-actions on this page: Video Analysis, Motion Enhancement, Inverse Kinematics, Back to Studio
  • Operator surfacing — see ../../studio-overview.md

Layout regions#

page.tsx renders inside <ShellLayout active="studio">:

  • Breadcrumb panel (data-aja-animation-blending-breadcrumbs): <nav aria-label="Aja Animation Blending breadcrumbs">Studio / Aja Video Analysis / Animation Blending (current marked aria-current="page")
  • Workspace (<StudioAjaAnimationBlendingWorkspace />, archetype: LEAF):
    • <h1> (WorkspaceHeading) "Aja Animation Blending Workspace"
    • Summary <p data-aja-ab-summary> — per-region body-blend mask and its coverage / active regions / inverse
    • The evaluate form lane (see Interactions / States)
  • Route Map panel (data-aja-animation-blending-route-map): <h2>Route Map</h2> listing 6 entries from STUDIO_AJA_ANIMATION_BLENDING_ROUTE_MAP (primary, scenes, exports, revisions, parity, governance)
  • Quick-action panel: four Link.quickAction anchors — Video Analysis, Motion Enhancement, Inverse Kinematics, Back to Studio workspace index (no self-link)

States#

  • Loading — on mount the workspace GETs the catalog; until it resolves renders <p data-aja-ab-loading> "Loading body regions…"
  • Unauthorized — on 401/403 the catalog fetch renders data-aja-ab-unauthorized ("Access restricted." + the admin-scope message, default "Aja workspace scope required to view animation blending.")
  • Error — non-OK / malformed / unreachable renders data-aja-ab-error ("Could not load animation blending." + reason)
  • Ready (form) — on success renders data-aja-ab-regions ("N body regions available.") and the data-aja-ab-evaluate-form
  • Result — a successful POST renders data-aja-ab-result with data-aja-ab-coverage, data-aja-ab-active, data-aja-ab-inverted
  • Validation / evaluate error — client guards (default weight must be 0–1; need region weights or a non-zero default) and POST failures render data-aja-ab-evaluate-error
  • Empty / Standalone PWA / offline — N/A beyond the states above; shell is SSR, the lane is a client fetch on mount

Interactions#

Workspace lane (data-aja-ab-evaluate-form)#

  • Region weights (data-aja-ab-field-weights, text input, label "Region weights — "region:weight, region:weight"") — parsed via parseRegionWeights
  • Default weight (data-aja-ab-field-default, text input, label "Default weight (unlisted regions)")
  • "Evaluate mask" (data-aja-ab-evaluate-submit, submit) — fires POST /v1/admin/aja/animation-blending/evaluate with { regionWeights, defaultWeight }

Route Map panel#

  • Route entries (6 × <article> from STUDIO_AJA_ANIMATION_BLENDING_ROUTE_MAP) — non-interactive path+purpose

Quick-action panel#

  • "Open Aja Video Analysis workspace"/studio/aja/video-analysis
  • "Open Aja Motion Enhancement workspace"/studio/aja/motion-enhancement
  • "Open Aja Inverse Kinematics workspace"/studio/aja/inverse-kinematics
  • "Back to Studio workspace index"/studio

E2E coverage#

Coverage depth: deep.

  • studio-aja-motion-lane-consoles.spec.ts drives /studio/aja/animation-blending through the live body-region catalog, client default-weight guard with no POST, real BFF 400 invalid-region validation, exact two-hand mask coverage / active-region / inverse-coverage result, 6 route-map entries, exact quick-action hrefs, loading / unauthorized / malformed-catalog fail-closed states, mobile no-overflow, 44 px submit target, and direct BFF 401 / 403 / 400 gates.

Data & contracts#

  • Reads: GET /v1/admin/aja/animation-blending on mount — catalog { bodyRegions: string[] }
  • Writes: POST /v1/admin/aja/animation-blending/evaluate{ regionWeights, defaultWeight }{ evaluation } (regionCount, mask, inverted, resolvedWeights)
  • Realtime: none
  • Caching: client fetch on mount with cache: 'no-store' and buildBffAuthHeaders(); SSR shell only
  • Auth/role check: BFF endpoints admin-scoped + fail-closed (401/403 → unauthorized render); route itself behind the signed-in + studio proxy gate

Cross-references#

Known downstream boundaries#

  • Route-map sub-routes (scenes/[sceneId], exports/[exportId], revisions/[revisionId], parity/[parityId], governance/[policyId]) are advertised but have no page.tsx in V1; the browser spec asserts the current 6-entry descriptive route map only.
  • The evaluate POST contract is now exercised end-to-end from this lane against the real dev BFF. Deployment-tier package wiring remains a release environment concern outside this browser route contract.