Add APNG Studio canvas extension

.github/plugin/marketplace.json

@@ -81,6 +81,12 @@
       "description": "Bootstrap and run a multi-agent AI development team with named roles (Producer, Dev Team, QA). Sprint planning, brainstorm prompts with distinct agent voices, cross-chat context survival, and parallel team workflows. Based on a proven template that shipped a 30-game app in 5 days with zero human-written code.",
       "version": "1.0.0"
     },
+    {
+      "name": "apng-studio",
+      "source": "extensions/apng-studio",
+      "description": "Interactive GitHub Copilot app canvas extension for building Animated PNG (APNG) files from frames. Draw or upload frames, tune per-frame timing and compositing, preview live, send the result to your phone by QR, and export an animated .png.",
+      "version": "1.0.0"
+    },
     {
       "name": "arcade-canvas",
       "source": "extensions/arcade-canvas",

extensions/apng-studio/.github/plugin/plugin.json

@@ -0,0 +1,19 @@
+{
+  "name": "apng-studio",
+  "description": "Interactive GitHub Copilot app canvas extension for building Animated PNG (APNG) files from frames. Draw or upload frames, tune per-frame timing and compositing, preview live, send the result to your phone by QR, and export an animated .png.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Andrea Griffiths",
+    "url": "https://github.com/AndreaGriffiths11"
+  },
+  "keywords": [
+    "animated-png",
+    "apng",
+    "copilot-canvas",
+    "frame-animation",
+    "image-export",
+    "interactive-canvas"
+  ],
+  "logo": "assets/preview.png",
+  "extensions": "."
+}

extensions/apng-studio/.gitignore

@@ -0,0 +1,11 @@
+# Runtime user data — per-project frames and exports the extension writes
+# under its own directory at runtime. This is local state, not source.
+artifacts/
+
+# Exported animations
+*.apng
+
+# Node / editor / OS cruft
+node_modules/
+.DS_Store
+*.log

extensions/apng-studio/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 octobooth-1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

extensions/apng-studio/README.md

@@ -0,0 +1,97 @@
+# APNG Studio
+
+An interactive [GitHub Copilot app](https://github.com/features/ai/github-app) **canvas extension** for building [Animated PNG (APNG)](https://wiki.mozilla.org/APNG_Specification) files from frames — draw or upload frames, tune the full practical APNG spec surface, preview live, and export an animated `.png`.
+
+The canvas renders in a side panel; the agent can also drive it through callable actions.
+
+<p align="center">
+  <img src="assets/demo.png" alt="An animated walkthrough of the APNG Studio canvas building an animation from frames" width="640" />
+</p>
+<p align="center"><em>APNG Studio in action — an animated PNG built with the canvas itself.</em></p>
+
+## Background
+
+APNG Studio started as a hallway conversation. During a demo shift at the WeAreDevelopers Congress I got talking with [Jeff](https://github.com/GekkeBoyJeff) about APNG (animated PNG) versus GIF: APNG keeps real alpha and full color where GIF can't. We wanted an easy way to actually build one, so we made this small canvas wrapper for creating APNGs.
+
+## Features
+
+- **Frames** — upload images or draw them on a built‑in canvas (pen/eraser, fill, onion‑skin, "start from last frame"). Reorder, duplicate, and delete frames.
+- **Per‑frame timing** — set the delay as an exact `numerator / denominator` fraction with a live `= N ms · N fps` readout.
+- **Per‑frame compositing** — `dispose_op` (None / Background / Previous) and `blend_op` (Source / Over) dropdowns, straight from the APNG spec.
+- **Apply to all** — set every frame's delay (ms), snap to an exact frame rate (fps), or apply dispose + blend in one click.
+- **Loop count** — `0` = infinite, or a fixed number of plays.
+- **Hidden first frame** — mark frame 1 as a static fallback: shown by non‑APNG viewers, excluded from the animation loop (encoded as a default image with no leading `fcTL`, `num_frames = N‑1`).
+- **Live preview** — a real animated PNG is assembled on every change and served from `/preview.png`; a **Reload** button re‑syncs state and rebuilds the preview.
+- **Send to phone** — a **Send to phone** button opens a QR code; scan it with your phone camera (same Wi‑Fi) to open the live animation in your phone's browser and save it. Served read‑only from a short‑lived, token‑gated LAN endpoint that shuts itself down after 10 minutes.
+- **Export** — writes a valid animated `.png` (APNG) to disk and returns its path. The `.png` extension keeps the file byte‑compatible with every PNG viewer: APNG‑aware ones (browsers, macOS Quick Look) animate it, others show the first frame as a static fallback.
+
+## Install
+
+### From GitHub Copilot (recommended)
+
+Ask Copilot to install the committed extension URL:
+
+```text
+Install this extension: https://github.com/github/awesome-copilot/tree/main/extensions/apng-studio
+```
+
+You can also copy the folder into one of these locations:
+
+- **User** — `~/.copilot/extensions/apng-studio/`, available in every project.
+- **Project** — `.github/extensions/apng-studio/` inside a repo, committed and shared with your team.
+
+Reload extensions in the app, then open the `apng-studio` canvas.
+
+### Manual
+
+Copy the source files into one of the extension directories above, keeping the layout:
+
+```
+apng-studio/
+├── extension.mjs      # entry point (required name)
+├── apng.mjs           # APNG codec + RGBA→PNG encoder
+├── qr.mjs             # dependency-free QR encoder (Send to phone)
+└── web/               # canvas iframe renderer
+    ├── index.html
+    ├── app.js
+    └── styles.css
+```
+
+Then reload extensions. The `@github/copilot-sdk` import is resolved by the host — **do not** add a `package.json` or `node_modules` for it.
+
+## Open the canvas
+
+Once installed, open the **APNG Studio** canvas from Copilot. Optional open input:
+
+| field       | type   | description                                    |
+| ----------- | ------ | ---------------------------------------------- |
+| `projectId` | string | Animation project id (defaults to `default`).  |
+| `name`      | string | Optional display name for the animation.       |
+
+Each project's frames persist on disk under `artifacts/<projectId>/`, so they survive reloads and are shared between every open panel and the agent actions. That folder is local user data and is **git‑ignored**.
+
+## Agent actions
+
+The extension exposes these callable actions on the `apng-studio` canvas:
+
+| action            | what it does                                                                                             |
+| ----------------- | ------------------------------------------------------------------------------------------------------- |
+| `get_state`       | Return project settings + per‑frame timing/compositing and total duration.                              |
+| `set_settings`    | Update `width`/`height` (only with 0 frames), `loops`, and `hiddenFirst`.                               |
+| `add_color_frame` | Append a solid‑color frame; accepts `delayNum`/`delayDen`/`disposeOp`/`blendOp`.                         |
+| `set_frame`       | Update one frame (`frameId`) or all (`all: true`): timing via `delayMs`/`fps`/`delayNum`+`delayDen`, plus `disposeOp`/`blendOp`. |
+| `clear_frames`    | Remove every frame.                                                                                      |
+| `export`          | Assemble and write the animated `.png` (APNG) to disk; returns the absolute path.                        |
+
+All actions accept an optional `projectId` to target a specific animation.
+
+## How it works
+
+- **`extension.mjs`** — one loopback HTTP server per open canvas instance serves the renderer, JSON state, per‑frame PNGs, the live `/preview.png`, and mutation endpoints. Server‑Sent Events (`/events`) push a `changed` signal so every open panel and the preview stay in sync. **Send to phone** spins up a separate, read‑only LAN server that serves only a landing page and the preview image, gated by a short‑lived random token and torn down on expiry.
+- **`apng.mjs`** — assembles the APNG chunk stream (`IHDR` / `acTL` / `fcTL` / `IDAT` / `fdAT` / `IEND`) with contiguous sequence numbers, plus a minimal RGBA→PNG encoder.
+- **`qr.mjs`** — a small, dependency‑free QR encoder (byte mode, error‑correction level M) used to render the **Send to phone** code. The QR is drawn into a PNG with the `apng.mjs` encoder.
+- **`web/`** — the iframe UI. It talks to its server over plain HTTP; there is no privileged host bridge.
+
+## License
+
+[MIT](./LICENSE)