Workshop Kit · widget reference
Shippedshot-list-grid
Curated visual reference grid for L9a's photo brief. Eight universal restaurant shots (hero dish, room-wide, hands-cooking, exterior-evening, close-up-texture, two-people, signature-ingredient, chef-portrait), each rendered as an inline SVG composition sketch — rule-of-thirds gridlines plus a tinted focal area that hints at framing — so the rail iframe and the demo work without any remote photo fetch. When restaurantProfile.cuisine resolves to one of 12 supported cuisines (mexican, italian, japanese, chinese, thai, indian, mediterranean, american, french, korean, vietnamese, ethiopian), two cuisine-specific cards append.
Live demo
Click cards to add them to your shot list (or remove). The first three selections become the home-page set. Use the cuisine buttons below to seed a sample restaurantProfile.cuisine and watch two cuisine-specific cards appear.
No config block — references baked into the widget. Cuisine extras render if a cuisine is set in MuntinContext.restaurantProfile.cuisine (visit any course lesson first to set one).
Contract
| Behavior | Notes |
|---|---|
Reads restaurantProfile.cuisine |
Lowercased substring-match against 12 supported cuisines. Unrecognized cuisines render only the universal eight. |
Reads shotList |
Pre-selects previously-chosen cards on remount. Preserves operator's curation across lessons + devices. |
Reads palette[0] |
Tints the composition sketches with the operator's accent color. Defaults to teal if no palette is set. |
Writes shotList |
[{ id, label, framing, source }] in selection order. Cap of 8 items; first 3 are the home-page set. |
| SVG-only sketches | No remote photo fetch. Each card is a 100×70 viewBox with rule-of-thirds gridlines + a focal area shape (circle, rect, path). Tinted with currentColor driven by the accent. |
| Selection cap | 8 maximum. Adding a 9th triggers a polite-region announcement; the existing 8 don't shift. |
Markup
No config block. Cuisine-specific references resolve from restaurantProfile.cuisine; eight universal shots ship with the widget.
Accessibility
- Each card is a
<button>witharia-pressedreflecting selection state — screen readers announce "pressed" / "not pressed" as a toggle, not as a static option. - The home-page-3 status is rendered as visible text ("1 of 3 for home page") AND as a colored badge — so high-contrast modes don't hide the signal.
- SVG sketches are
aria-hidden="true"; the label + description carry the meaning. Composition is decoration. - Adding a card announces "Hero dish added — 1 of 3 for the home page." via a polite live region. Removing announces similarly.
- The selected-list "remove" buttons have descriptive
aria-labels so the button purpose isn't just "×".
Why SVG sketches, not photos
Restaurant photo references are everywhere on the internet — Instagram tags, Pinterest boards, Pexels. But the Workshop Kit rail iframe is sandbox="" with no network access, and the suite's "no fetch" promise means we can't load remote images even on demos. Inline SVG composition sketches preserve the rail and the demo while still conveying "this is what a center-frame top-down shot looks like" — which is the pedagogical move. The operator brings their cuisine; we tell them the composition.
Where it ships
The Photo Brief Builder tool can later read the shotList ids and pre-fill its surface-coverage chooser.
Source
/tools/_shared/workshop/shot-list-grid.js — ~280 LOC. Exports { tag, contextKeys, mount, serialize } per the Workshop Kit widget contract. Eight universal references + a 12-cuisine extras table live at the top of the file. Composition sketches are inline SVG strings — easy to extend with new framings (just add a key to the FRAMES table).