summer-engine 4.3.0 → 4.6.0

package/library/skills/README.md

@@ -1,6 +1,6 @@
 # Summer skills
 
-> 128 skills, grouped by their primary domain. **Generated** by `npm run generate:registry` from each skill's `resource.yaml`; `--check` fails when this file and the library disagree. Do not edit by hand.
+> 132 skills, grouped by their primary domain. **Generated** by `npm run generate:registry` from each skill's `resource.yaml`; `--check` fails when this file and the library disagree. Do not edit by hand.
 
 The folder is flat on purpose (`docs/design/DECISIONS.md`, D3): a skill usually belongs to several domains, so categories live in each skill's `facets.domains` and this index is rendered from them. The first domain listed is the primary one. `summer skills list --by-domain` prints the same grouping; `summer skills info <slug>` shows one skill.
 
@@ -8,7 +8,7 @@ Status: **stable** unless marked; *preview* = not yet exercised in-engine by the
 
 ## Domains
 
-- [2d](#2d) (10)
+- [2d](#2d) (11)
 - [3d](#3d) (6)
 - [agent-workflow](#agent-workflow) (19)
 - [ai](#ai) (2)
@@ -16,7 +16,7 @@ Status: **stable** unless marked; *preview* = not yet exercised in-engine by the
 - [assets](#assets) (4)
 - [audio](#audio) (6)
 - [character-controller](#character-controller) (2)
-- [creator](#creator) (4)
+- [creator](#creator) (7)
 - [debug](#debug) (1)
 - [deployment](#deployment) (3)
 - [editor](#editor) (1)
@@ -42,6 +42,7 @@ Status: **stable** unless marked; *preview* = not yet exercised in-engine by the
 | [concept-art](./concept-art/SKILL.md) ★ | Explore art direction with 3-4 rough concept variants of a character, environment or prop. | assets |
 | [create-asset-sheet](./create-asset-sheet/SKILL.md) | Generate a pack of 2D assets from one prompt (tile sheet, UI kit, character pack, biome), sliced. | assets |
 | [instantiate-asset-pack](./instantiate-asset-pack/SKILL.md) | Lay out a whole create-asset-sheet pack in the scene: composites, paint order, Sprite2D and NinePatch. | assets |
+| [*painted-25d-world*](./painted-25d-world/SKILL.md) (preview) (library only) | Build a 2D or 2.5D game as a painted world: a 3D blockout under one fixed camera, an AI paint-over projected onto it, sprite characters. | level-design, rendering, assets |
 | [pixel-art](./pixel-art/SKILL.md) ★ | Generate pixel-art sprites, items, tiles and portraits at a set resolution with a limited palette. | assets |
 | [skybox-panorama](./skybox-panorama/SKILL.md) | Generate a 360-degree sky panorama and wire it as a PanoramaSkyMaterial Sky resource on WorldEnvironment. | assets |
 | [sprite-sheet](./sprite-sheet/SKILL.md) | Generate animated 2D character sprite sheets (walk, attack, idle, death) for AnimatedSprite2D. | assets |
@@ -135,9 +136,12 @@ Status: **stable** unless marked; *preview* = not yet exercised in-engine by the
 | skill | when to use | also |
 |---|---|---|
 | [grow-analytics](./grow-analytics/SKILL.md) | Read a creator's Summer Grow numbers (page views, launches, sessions, play time), compare windows. | deployment |
-| [publish-your-game](./publish-your-game/SKILL.md) | Publish a game on Summer Games through MCP: store page, art, build upload, submit, owner approval link. | deployment |
-| [store-art](./store-art/SKILL.md) | Make Summer Games store art per slot: key art, covers, icons, screenshots, trailer, size and text rules. | assets |
-| [store-listing](./store-listing/SKILL.md) | Write a Summer Games store page: title, tagline, descriptions, tags, per platform, and what never to write. | product-language |
+| [*launch-ready*](./launch-ready/SKILL.md) (preview) (library only) | Get a game ready to launch on Summer Games and take it live: upload, real screenshots, store art and listing, gathered and filled in. | deployment, assets |
+| [make-content](./make-content/SKILL.md) | Make a finished, postable video of your game, cut per platform and saved for review. | video |
+| [publish-your-game](./publish-your-game/SKILL.md) | Publish a game on Summer Games over MCP: store page, art, build upload, go live. | deployment |
+| [*release-checklist*](./release-checklist/SKILL.md) (preview) | Pre-launch check for Summer Games: export, upload checks, store art, listing fields. | deployment |
+| [store-art](./store-art/SKILL.md) | Make Summer Games store art per slot: key art, icons, screenshots, trailer, sizes. | assets |
+| [store-listing](./store-listing/SKILL.md) | Write a Summer Games store page: title, tagline, descriptions, tags, what never to write. | product-language |
 
 ## debug
 
@@ -150,7 +154,7 @@ Status: **stable** unless marked; *preview* = not yet exercised in-engine by the
 | skill | when to use | also |
 |---|---|---|
 | [export-and-ship](./export-and-ship/SKILL.md) ★ | Prepare a game export: check templates and targets, validate release assets, build after approval. | project |
-| [*release-readiness*](./release-readiness/SKILL.md) (preview) | Before releasing a Summer game version, prove players can play it: server, online join, progress, files. | multiplayer, playtest |
+| [*release-readiness*](./release-readiness/SKILL.md) (preview) | Prove players can play a Summer release: server, online join, progress, files. | multiplayer, playtest |
 | [remote-deploy](./remote-deploy/SKILL.md) ★ | Run or test the game on a real phone, tablet or computer with Remote Deploy and on-device debugging. | project |
 
 ## editor
@@ -195,7 +199,7 @@ Status: **stable** unless marked; *preview* = not yet exercised in-engine by the
 | [*summer-matchmaking*](./summer-matchmaking/SKILL.md) (preview) | Get players into matches with Summer matchmaking: queues, teams, accept prompts, join progress and failures. | ux |
 | [*summer-parties*](./summer-parties/SKILL.md) (preview) | Let a Summer party play together: the leader presses Play, members follow into the same match. Hosted only. | ui |
 | [summer-player-data](./summer-player-data/SKILL.md) | Save a player's progress so it follows them to every match: authority load and commit, autosave, safe retries. | scripting |
-| [*summer-store*](./summer-store/SKILL.md) (preview) | Sell Summer items for Sparks in a multiplayer game: shop, checkout, owned items, authority entitlement checks. | gameplay |
+| [*summer-store*](./summer-store/SKILL.md) (preview) | Sell Summer items for Sparks: shop, checkout, item slugs, bundles and sales, owned items, summer.items.json sync, authority checks. | gameplay |
 | [*summer-world-chat*](./summer-world-chat/SKILL.md) (preview) | Add match chat to a Summer game: one World channel shared by everyone in the match. Hosted only. | ui |
 | [*summer-world-saves*](./summer-world-saves/SKILL.md) (preview) | Keep a persistent Summer World between restarts: checkpoint saves, restore before join, the final save. | scripting |
 

package/library/skills/animated-loop/SKILL.md

@@ -107,23 +107,14 @@ If three regenerations don't seam-close, accept a small crossfade in the engine:
 
 ### 6. Import and wire as a looping VideoStreamPlayer
 
-**Transcode to Ogg Theora first.** The generated clip is an `.mp4`, and Summer Engine cannot load `.mp4`. `.ogv` is the only video container in the build — there is no bundled WebM or MP4 plugin, and nothing transcodes on your behalf. Measured against the shipped binary (4.6.1):
+**Import the `.mp4` as it is; the import converts it.** Summer Engine plays video only as Ogg Theora (`.ogv`) — there is no MP4 or WebM loader in the build — so every Summer import tool converts a video on the way in: `summer_import_from_url`, its batch, `summer_import_asset_by_id` and `summer_import_asset`. A clip Summer generated or stores converts on Summer's media host; any other video converts with ffmpeg on this computer when it has Theora, else on summerengine.com. The `.ogv` lands at the path you asked for with the extension swapped, and the answer names it in `videoConversions` and `note`:
 
 ```
-$ Summer --headless --path <proj> -s res://probe.gd
-VideoStream exts: ["ogv", "tres", "res"]
-ERROR: No loader found for resource: res://clip.mp4 (expected type: unknown)
+summer_import_asset_by_id(assetId="<the clip's asset id>", path="res://assets/video/loops/title_screen_bg.mp4")
+→ importedTo: res://assets/video/loops/title_screen_bg.ogv
 ```
 
-`summer_import_from_url` downloads the bytes, runs the engine's import pipeline, and *fails the import* if the file never becomes a loadable resource — so importing the `.mp4` does not quietly half-work, it is rejected and rolled back. Convert first:
-
-```
-ffmpeg -i title_screen_bg.mp4 -c:v libtheora -q:v 8 -an title_screen_bg.ogv
-```
-
-```
-summer_import_from_url(url="<hosted .ogv url>", path="res://assets/video/loops/title_screen_bg.ogv")
-```
+Load the `.ogv` path from the answer, never the `.mp4`.
 
 Then wire it in one script. `scenePath` is the exact scene to change:
 
@@ -188,11 +179,12 @@ Pattern: `<subject> + <ambient loopable motion> + <constant lighting> + "looping
 - **Forgetting `loop=true` on the `VideoStreamPlayer`.** The clip will play once and freeze on the last frame.
 - **Forgetting to mute baked audio.** If audio is on, the loop point becomes audible even if it's invisible.
 - **Expecting `aspectRatio` to reframe an image-to-video call.** It is applied on the text-to-video path only. A portrait splash needs a portrait *reference image* — the argument does nothing here.
-- **Importing the `.mp4` as-is.** `.ogv` is the only video container the engine can load; there is no bundled WebM or MP4 plugin. An un-transcoded import fails and is rolled back.
+- **Loading the `.mp4` path after an import.** The import converted the clip to `.ogv` and saved it under that name; `load()` the `.ogv` path the answer names.
+- **Converting by hand.** The import tools convert; a hand-made ffmpeg command also fails on builds without libtheora (Homebrew's default ffmpeg has none).
 
 ## Edge cases
 
-- **Splash loop must be tiny in build size.** Loops compress aggressively because of low motion. Target ≤2MB by exporting at 720p, low bitrate, in DaVinci. Studio's import doesn't re-encode by default.
+- **Splash loop must be tiny in build size.** Loops compress aggressively because of low motion. Target ≤2MB by exporting at 720p, low bitrate, in DaVinci. The import's conversion keeps quality high (Theora at quality 8, at most 1080p), so a small file starts from a 720p clip.
 - **Mobile portrait splash.** The reference image must be portrait — `aspectRatio` is ignored on the image-to-video path, and MCP image generation is square-only, so make the reference in the Summer dashboard or crop it. Anchors preset 15 still works.
 - **Loop must sync to a music beat.** The video model doesn't know your BPM. Generate at the duration matching one bar at the menu music tempo (e.g. 120 BPM × 4 beats = 2s, or 8 beats = 4s) and confirm visually.
 - **Loop is behind translucent UI.** Generate with extra contrast headroom — the model tends toward mid-grey, and translucent UI on mid-grey reads muddy. Push for `high contrast cinematic` in the prompt.
@@ -209,7 +201,7 @@ If the MCP server isn't running, route the user to the Summer dashboard:
 1. Image tab → generate the reference still (the loop's "neutral frame").
 2. Video tab → image-to-video with `ltx`, duration 5s, aspect ratio per target.
 3. Prompt with the loopable-motion vocabulary above and `"looping, seamless"`.
-4. Download the result, transcode to `.ogv` if needed, place under `assets/video/loops/`.
+4. Import the clip's URL from a shell while Summer Engine runs: `summer tool import-from-url --args '{"url":"<clip url>","path":"res://assets/video/loops/<name>.ogv"}'`. It converts the clip to Ogg Theora (`.ogv`), the only video Summer Engine plays.
 
 Print the exact prompt + model + duration + aspect ratio so the user can paste it into the dashboard.
 
@@ -244,6 +236,8 @@ No Summer MCP tools in this session? Run each one as a command; when `summer --v
 | `summer_assets_search` | `summer assets search` |
 | `summer_docs_read` | `summer docs read` |
 | `summer_add_node` | `summer engine add-node` |
+| `summer_import_asset` | `summer engine import-asset` |
+| `summer_import_asset_by_id` | `summer engine import-asset-by-id` |
 | `summer_import_from_url` | `summer engine import-from-url` |
 | `summer_run_script` | `summer engine run-script` |
 | `summer_set_prop` | `summer engine set-prop` |

package/library/skills/cinematic-cutscene/SKILL.md

@@ -126,24 +126,11 @@ Lip-sync caveat: if the video shows the character clearly mouthing words and the
 
 ### 7. Import and wire as a VideoStreamPlayer
 
-**Transcode to Ogg Theora first.** The generated clip is an `.mp4`, and Summer Engine cannot load `.mp4` — the only video container in the build is `.ogv`. Measured against the shipped binary (4.6.1):
+**Import the `.mp4` as it is; the import converts it.** Summer Engine plays video only as Ogg Theora (`.ogv`), so every Summer import tool (`summer_import_from_url`, its batch, `summer_import_asset_by_id`, `summer_import_asset`) converts a video on the way in and saves it at the path you asked for with `.ogv`. The answer names the file in `videoConversions` and `note`:
 
 ```
-$ Summer --headless --path <proj> -s res://probe.gd
-VideoStream exts: ["ogv", "tres", "res"]
-ERROR: No loader found for resource: res://clip.mp4 (expected type: unknown)
-```
-
-Nothing transcodes for you — `summer_import_from_url` downloads the bytes, runs the engine's import pipeline, and *fails the import* if the file never becomes a loadable resource. Convert with ffmpeg or DaVinci before importing:
-
-```
-ffmpeg -i intro_shot_01.mp4 -c:v libtheora -q:v 8 -an intro_shot_01.ogv
-```
-
-Then:
-
-```
-summer_import_from_url(url="<hosted .ogv url>", path="res://assets/video/cinematics/intro_shot_01.ogv")
+summer_import_asset_by_id(assetId="<the shot's asset id>", path="res://assets/video/cinematics/intro_shot_01.mp4")
+→ importedTo: res://assets/video/cinematics/intro_shot_01.ogv
 ```
 
 Build a controller scene at `res://cinematics/Intro.tscn`: create it, then build its nodes in one script (`scenePath` names the new scene; the editor's open tab comes back afterwards):
@@ -204,7 +191,7 @@ Pattern: `<subject> + <action> + <camera move> + <lighting> + <stylistic anchor>
 - **Using `kling` for blocking iterations.** Validate framing and prompt on the cheaper `ltx` first; move to `kling` once the composition lands.
 - **Putting the cutscene on a `VideoStreamPlayer` without a fade.** Cuts straight from gameplay to video are jarring. Always wrap in a `ColorRect` fade in/out.
 - **Treating `assets.generate_video` as finished.** It answers `{ status: "running", job }` and no URL. Wait with `jobs.wait` until the job is done before there is anything to show or import.
-- **Importing the `.mp4` as-is.** The engine has no MP4 or WebM loader — only Ogg Theora (`.ogv`). Transcode first; an un-transcoded import fails and is rolled back.
+- **Loading the `.mp4` path after an import.** The engine has no MP4 or WebM loader; the import saved the shot as `.ogv`. `load()` the `.ogv` path the answer names.
 - **Asking `ltx` or `kling` for `duration: 3` or `duration: 8`.** On those two only 5 and 10 exist; anything else renders 5.
 - **Pairing `imageUrl` with `kling-turbo` or `veo3`.** Neither has an image-to-video endpoint — that combination is a 400.
 
@@ -227,7 +214,7 @@ If the MCP server isn't running, the user can do all of this in the Summer dashb
 1. Generate a reference image in the Image tab.
 2. Open the Video tab, paste the reference URL into the image-to-video field.
 3. Set model, duration, aspect ratio, and prompt as listed above.
-4. Download the `.mp4`, transcode it to Ogg Theora (`ffmpeg -i in.mp4 -c:v libtheora -q:v 8 -an out.ogv`), and drop the `.ogv` into `assets/video/cinematics/`. Summer Engine has no MP4 or WebM loader — `.ogv` is the only video container it can open.
+4. Import the shot's URL from a shell while Summer Engine runs: `summer tool import-from-url --args '{"url":"<shot url>","path":"res://assets/video/cinematics/<name>.ogv"}'`. It converts the `.mp4` to Ogg Theora (`.ogv`), the only video container Summer Engine can open.
 
 Print the exact prompt + model + duration + aspect ratio so the user can paste it into the dashboard verbatim.
 
@@ -265,6 +252,8 @@ No Summer MCP tools in this session? Run each one as a command; when `summer --v
 | `summer_docs_read` | `summer docs read` |
 | `summer_add_node` | `summer engine add-node` |
 | `summer_create_scene` | `summer engine create-scene` |
+| `summer_import_asset` | `summer engine import-asset` |
+| `summer_import_asset_by_id` | `summer engine import-asset-by-id` |
 | `summer_import_from_url` | `summer engine import-from-url` |
 | `summer_run_script` | `summer engine run-script` |
 | `summer_set_prop` | `summer engine set-prop` |

package/library/skills/headless-scripting/SKILL.md

@@ -48,14 +48,14 @@ Exit codes lie in both directions here.
 - **`--write-movie` under `--headless` is a deterministic crash**, not a graceful failure. `MovieWriter::add_frame()` dereferences a null image from the dummy renderer on frame one. Headless has no pixels, so there is no safe form of this. Frame capture needs the windowed verify instance below.
 - **`--quit-after 1`** hits the fast-exit path and aborts during static destruction. Use `--headless --quit-after 60` if you need a bounded editor run — with `--headless`, never without.
 
-### Never put a window on the user's screen
+### Never put an extra window on the user's screen from a shell
 
 <EXTREMELY-IMPORTANT>
-**Every engine launch you make is `--headless`.** The user did not ask you to open anything. A window that appears unasked steals focus, interrupts whatever they were doing, and is indistinguishable from a crash or a bug from their side. This is a product rule, not a convenience.
+**Every engine process you start from a shell is `--headless`.** The user did not ask you to open anything. A window that appears unasked steals focus, interrupts whatever they were doing, and is indistinguishable from a crash or a bug from their side. This is a product rule, not a convenience.
 
 The one exception is the verify instance, and it is safe precisely because it is not visible: `--summer-verify` opens a real rendering window that is **hidden, `NO_FOCUS`, and positioned at `(-32000,-32000)`**. That is why it can produce real pixels without ever appearing. Never reproduce the "I need a renderer" reasoning by launching a plain windowed editor — use `--summer-verify`.
 
-If you genuinely believe the user needs to see the editor, ask them first.
+This rule is about extra engine processes you start from a shell. Opening the Summer editor and playing the game in a window through the Summer tools is allowed and expected: `summer_play`, then `summer_screenshot` or `summer_frame_shot` to see the result. Close what you opened when you are done; one editor at a time.
 </EXTREMELY-IMPORTANT>
 
 ### Finding the binary — do not guess
@@ -401,7 +401,7 @@ Keep scripts in the project (`res://` is required for `-s`), but name them so th
 | Killing an import at 3s | Measured 0/8 assets registered. The floor is ~5s. |
 | A long-lived `--headless --editor` as a file watcher | It never rescans. Boot, act, exit. |
 | Adding `--quiet` | Swallows your own print() output. |
-| Launching the editor without `--headless` | Pops a window onto the user's screen unasked. |
+| A shell script run without `--headless` | Pops an extra window onto the user's screen unasked. To see the game, use `summer_play` and `summer_screenshot` in the open editor. |
 | Ignoring `ResourceSaver.save()`'s return value | Non-zero is a silent failure that ships. |
 | `pack()` without setting `.owner` on every node | Two success codes, nodes missing from the file. |
 | Verifying a write by reading the object you just wrote | In-memory read-back passes whether or not it landed. |
@@ -420,8 +420,11 @@ No Summer MCP tools in this session? Run each one as a command; when `summer --v
 
 | In this skill | Command |
 |---|---|
+| `summer_frame_shot` | `summer engine frame-shot` |
 | `summer_get_project_context` | `summer engine get-project-context` |
 | `summer_import_from_url` | `summer engine import-from-url` |
+| `summer_play` | `summer engine play` |
 | `summer_run_script` | `summer engine run-script` |
+| `summer_screenshot` | `summer engine screenshot` |
 | `summer_write_file` | `summer engine write-file` |
 <!-- /shell-commands -->

package/library/skills/in-game-purchases/SKILL.md

@@ -25,6 +25,11 @@ checkout fails with `insufficient_funds`, tell the player they need more
 Sparks and that they can get them in the Summer app, then let them press Buy
 again.
 
+This skill covers the purchase sheet and granting an effect on a server.
+For the rest of the store, use the `summer-store` skill: where items come
+from and how one becomes buyable, item slugs, `summer.items.json`, bundles
+and sales, owned items, and the authority's entitlement check.
+
 ## When to sell with Sparks
 
 - Sell anything that persists across sessions or devices (cosmetics, unlocks,
@@ -89,12 +94,20 @@ The operation returned by `request_checkout` also completes: ok on
 
 ## Minimal complete example
 
+Items are named by **slug** (Studio's "Item key", e.g. `sword`), which is
+the same in staging and production. Definition ids (`item_…`) differ between
+them, so never hard-code one. The slug getters need a Summer version that
+carries them (newer than 0.7.3); on an older one, use each environment's
+definition id with `has_owned_definition()` and `get_definition_id()`. The
+`summer-store` skill shows how to check.
+
 ```gdscript
 extends Node
 ## A one-item shop. Buys `offer_id` and unlocks from inventory.
 
-@export var offer_id := "offer_sword"
-@export var definition_id := "item_sword"
+## From the store listing: item.price.offer_id of the item whose get_slug() is item_slug.
+@export var offer_id := ""
+@export var item_slug := "sword"
 
 signal message(text: String)
 var _seen := {}
@@ -137,7 +150,7 @@ func _on_checkout(status: SummerCheckoutStatus) -> void:
 			pass
 
 func _sync_owned() -> void:
-	if Summer.client.items.has_owned_definition(definition_id):
+	if Summer.client.items.has_owned_slug(item_slug):
 		message.emit("Sword unlocked.") # the only place the item is granted
 ```
 
@@ -156,7 +169,7 @@ items. The client sends the authority only an owned item ID. The authority:
 
 1. reads that player's inventory with
    `Summer.authority.items.inventory_for_session(session)` and checks the
-   item is there, owned, and of the right definition;
+   item is there, owned, and the right item (its slug);
 2. checks its own record of redeemed item IDs, kept in the player's secret
    player data (`Summer.authority.player_data`), so the item grants once per
    player in every world;
@@ -165,7 +178,7 @@ items. The client sends the authority only an owned item ID. The authority:
 
 ```gdscript
 # On the dedicated authority.
-const EFFECT_DEFINITION := "item_grow_now"
+const EFFECT_SLUG := "grow_now"
 
 func redeem(session: SummerSession, owned_item_id: String) -> void:
 	var inv := Summer.authority.items.inventory_for_session(session)
@@ -176,7 +189,7 @@ func redeem(session: SummerSession, owned_item_id: String) -> void:
 	for candidate in inv.items:
 		if candidate.get_owned_item_id() == owned_item_id:
 			item = candidate
-	if item == null or not item.is_owned() or item.get_definition_id() != EFFECT_DEFINITION:
+	if item == null or not item.is_owned() or item.get_slug() != EFFECT_SLUG:
 		return # not owned by this player: never grant
 
 	var load_op := Summer.authority.player_data.load(session)
@@ -228,8 +241,11 @@ The game code is identical on every surface.
 
 ## Testing
 
-- Test against Summer staging, which runs in sandbox mode. *Why:* no real
-  money moves and results are identical to production.
+- Test against Summer staging, where Sparks come from test payments
+  (sandbox Sparks). *Why:* no real money moves and results are identical to
+  production. Use a staging account that bought Sparks in the staging Summer
+  app. The `summer-store` skill covers staging access and what makes an item
+  buyable there.
 - Walk every state: decline the sheet, let it expire, buy with too few
   Sparks, get Sparks in the Summer app, then buy the item. Kill the game while
   a checkout is pending and relaunch; the result must still arrive once.
@@ -255,6 +271,7 @@ Sparks in the Summer app.
 
 ## See also
 
+- summer-store: items, slugs, bundles, owned items and the authority check
 - multiplayer-state
 - ui-basics
 

package/library/skills/in-game-purchases/resource.yaml

@@ -1,6 +1,6 @@
 id: skill/in-game-purchases
 kind: skill
-version: 1.0.0
+version: 1.1.0
 summary: "Sell items for Sparks via the Summer purchase sheet: checkout, not enough Sparks, unlocks, grants."
 use_when:
   - "adding a shop, buy button or paid item to a Summer game and wiring request_checkout"
@@ -21,6 +21,7 @@ compatibility:
   engine: ">=4.6"
 related:
   skills:
+    - skill/summer-store
     - skill/multiplayer-state
     - skill/ui-basics
 source: official