YouTube / Public web reference / 2026.09
Handoff and assessment
The reference is useful only if a newcomer can extend it without inventing a consequential design decision.
All entries shown
Four implementation tasks
| Task | Required change | Verification |
|---|---|---|
| Existing component extension | Extend a video result with a clearly labelled local availability badge. Preserve metadata hierarchy and long-title wrapping. | Open the family specimen and a search context at 390 and 1440 px. Check semantics and missing metadata. |
| New page or feature | Compose a public channel collection using documented header, tabs, cards and responsive grid. | Use relative links, deterministic fixture data and browser back. Verify narrow reflow and title order. |
| New reusable pattern | Add a local retry banner with optional detail and a recovery action. | Name API, states, focus behavior, live announcement, interruption and reduced motion. |
| Difficult cross-cutting case | Handle an unavailable video, offline retry, long localized title and signed-out action. | Retain user input and object identity; no false remote success. Exercise keyboard, mobile and 200% text. |
Exercise constraints
These additions are local design exercises. Their fixture data, API and verification targets are explicit so the implementer can work without account access.
| Task | Starting point and change | Fixtures and acceptance |
|---|---|---|
| Availability badge on a result card | site/examples/search.html and examples/components/result-cards.html Add a plain-text badge under the title before the metadata. Use 12px Roboto, 16px line height, 4px 8px padding, 4px radius, #f2f2f2 background and #0f0f0f text. Label it Local availability: available or Local availability: unavailable. Do not use color alone. | Long German title with availability unavailable Short title with availability available Missing channel/view metadata shown as unavailable Badge is part of each article reading order No clipping at390 and1440 Title wrapping and normal link destination remain intact Show the variant in isolation and a full search context |
| Public channel collection | site/examples/channel-home.html; channel-header, channel-tabs and content-shelf contracts Create junior-channel-collection.html for a deterministic collection named Studio field notes. Reuse the channel shell, three collection cards, a Home link and active Collections tab. Cards navigate to a local detail recipe with browser Back preserving the collection route. Use at least one long title and one missing thumbnail state. | Studio field notes: making a quiet room sound alive A long day in the edit room, from the first assembly to the final sound mix A camera experiment whose thumbnail is unavailable A single page h1 precedes h2 collection titles Cards reflow at390/768/1440 All local URLs and assets resolve Keyboard can activate a card and Back returns to this route |
| Local retry banner | Foundations, feedback and offline behavior in contracts.html; treat the new component as an original addition Create a reusable banner with inputs message, optional detail, state idle/pending/error/success and onRetry. Use 16px body text, 20px line height, 16px padding, 12px radius, a 1px #e5e5e5 border and neutral #f2f2f2 fill. The recovery action uses the documented pill button. No animation is required. | Idle with optional detail absent Pending with a disabled Retry action Error with retained message and usable Retry Success with polite confirmation Document inputs, outputs, defaults, state owner and a usage example Use role=status aria-live=polite for result text Keep focused Retry in DOM through transitions; re-enable it on completion Ignore duplicate requests while pending; invalidate late results after cancellation/navigation Use deterministic local timing only and honor reduced-motion Pending uses aria-disabled=true plus a guarded handler on the same focused button. Native disabled removes keyboard focus and does not satisfy this brief. Assert activeElement before, during and after recovery. |
| Unavailable media with local recovery | site/examples/watch-unavailable.html and operational-contract.json Compose the unavailable player, retry banner and signed-out action around a single immutable local video ID junior-video-01. Provide an editable search input and long German title. Simulate offline failure and retry locally. Keep video ID and typed query through every retry. Authentication remains a clearly labelled boundary dialog. | Der letzte Zug am Abend und die leisen Klavierakkorde, die zwischen den Regentropfen zu hören sind Search input: Nachtzug 2026 Video unavailable, offline, pending, recovered metadata, signed-out action No false playback or account success Escape closes the account dialog and focus returns to the invoking action Tab is contained while the dialog is open 390px and200% text do not clip essential content Retry announces changes and preserves the input/video identity Retain browser assertions and screenshots for both pointer and keyboard paths For 200% text, double computed font-size and line-height on text-bearing elements before measuring. An html font-size change alone is invalid for px text. Assert that the long-title computed font size actually doubled and check scrollWidth against clientWidth. |
Use computed-style text scaling from the reference scripts, not a root-only font-size change. Record actual before/after font sizes, activeElement IDs and concrete visible outcomes. Hash implementation files after the final passing run; include the source baseline hash and commands.
What counts as a pass
An independent, context-limited implementer must find, choose, specify, implement, verify and explain each task from this package. The challenge runs against a frozen local reference, not YouTube’s private code. Assistance, missing contracts and failed checks are recorded rather than converted into a pass.
Assessment
Validation status
| Validation area | Local measurement | Evidence boundary |
|---|---|---|
| Product coverage | Pending independent benchmark panel | No formal score awarded |
| CSS-to-component coverage | 9.4 / 10 | Weighted local contract coverage; source fidelity is assessed separately |
| Reference fidelity | Pending independent benchmark panel | No formal score awarded |
| Junior execution | 10 / 10 | Four exercises against the frozen local reference |
| Expert UX/UI quality | Pending independent benchmark panel | No formal score awarded |
| System coherence and adoption | Pending independent benchmark panel | No formal score awarded |
| Operational and risk readiness | Pending independent benchmark panel | No formal score awarded |
| Assessment confidence | Pending independent benchmark panel | No formal score awarded |
Retrieve the current machine-readable assessment
Version and changes
Reference version 2026-09-18.1. The initial package adds public-route captures, source and local component contracts, exact asset retrieval, runnable recipes and an original playable clip. Repairs and evaluation records are retained in the package changelog and iteration log. The Pan Out research maintainer owns source refresh and release decisions.
Refresh and contribution
Before extending the reference, verify that the route and UI state still match the research capture. Change the source ledger when YouTube changes a control or composition. Keep old measurements for drift analysis. Every package edit invalidates the frozen review hash; rerun affected local checks, then obtain a fresh independent panel before promoting a readiness claim.
Retrieve the implementation
Browse the runnable examples · Run and verify the reference · Inspect the source boundary