Add customizable designs and remote media

Author: TFQ0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TFQ0
+
+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.

README.md

@@ -1,14 +1,24 @@
 # Animated GitHub Profile Studio
 
-A browser-based editor for creating a personal GitHub profile README from one reusable configuration. Customize the text, animated terminal, featured repositories, skills, links, section order, colors, and motion settings, then export a ready-to-upload ZIP.
+A browser-based editor for creating a personal GitHub profile README from one reusable configuration. Customize the design, fonts, text, animated terminal, featured repositories, images, GIFs, links, section order, colors, and motion settings, then export a ready-to-upload ZIP.
 
 The built-in TFQ0 design remains the canonical example, but users no longer need to edit eight SVG files by hand.
 
+## Design and media customization
+
+Configuration v2 adds three focused customization systems:
+
+- Four ready-made visual presets: Quality Control, Classic Terminal, Retro Arcade, and Anime HUD. They use generic interface elements and include no franchise characters, logos, or copied artwork.
+- Curated font presets that map to controlled, SVG-safe font stacks rather than accepting arbitrary CSS.
+- Structured remote media entries for images and GIFs referenced by HTTPS URL, with accessibility and attribution information kept alongside each entry.
+
+Applying a visual preset changes presentation without replacing a user's profile text, repositories, links, or media. Loading a complete sample is a separate, confirmed action. Valid v1 configurations migrate automatically when imported or restored from browser storage.
+
 ## What it includes
 
 - Live desktop and mobile preview in dark and light themes.
 - Animated and reduced-motion/static SVG variants.
-- Profile, hero, project, skill, link, palette, section, Markdown, and footer editing.
+- Design, font, profile, hero, project, skill, link, structured media, palette, section, Markdown, and footer editing.
 - Optional public GitHub repository import with no login or token.
 - Local autosave of the last valid configuration.
 - Versioned `profile.config.json` import/export.
@@ -19,8 +29,8 @@ The built-in TFQ0 design remains the canonical example, but users no longer need
 
 ## Use the studio
 
-1. Open the app and choose **Start blank** or customize the TFQ0 example.
-2. Work through Profile, Hero, Projects, Skills, Links, Style, and Sections.
+1. Open the app, choose a design, then select **Start a blank profile** or customize the TFQ0 example.
+2. Work through Profile, Hero, Projects, Skills, Links, Media, Colors, and Sections.
 3. Check the desktop/mobile, dark/light, and animated/static previews.
 4. Resolve validation errors and review any design warnings in Export.
 5. To keep only the image, choose its desktop/mobile, dark/light, and animated/static options, then select **Download SVG**.
@@ -52,7 +62,7 @@ The production site is written to `dist/`. Vite uses relative asset URLs, so the
 
 ```text
 src/
-├── domain/profile.ts       # strict v1 config, template metadata, presets
+├── domain/profile.ts       # strict versioned config and template metadata
 ├── generator/
 │   ├── svg.ts              # pure eight-variant SVG renderer
 │   ├── readme.ts           # GitHub README renderer
@@ -72,13 +82,19 @@ src/
 - Drafts and the short-lived public repository cache stay in browser storage.
 - Only public repository metadata is fetched directly from GitHub's public API.
 - Generated SVGs contain no scripts, event handlers, remote fonts, external images, tracking, or live CI claims.
+- User-selected media is referenced by HTTPS URL in the README rather than copied into the ZIP or embedded in the generated hero SVG.
+- Previewing or viewing remote media may send an ordinary request to its third-party host. Remote content can disappear or change independently of the Studio.
 - Static fallbacks are generated for visitors who prefer reduced motion.
 - Custom Markdown blocks raw HTML and neutralizes non-HTTPS link destinations in generated output.
 
+Users must own or hold permission for any media they add. Attribution alone does not grant permission, and adding media does not imply affiliation with or endorsement by its creator or rights holder. See [User content and third-party media notice](./USER_CONTENT_NOTICE.md).
+
 ## Legacy reference
 
 The original hand-authored TFQ0 SVGs, screenshots, GIF, and `preview.html` remain in `assets/` and `preview/` as visual references. They are not used by the Studio build. New custom profiles should be generated through the editor so all responsive, theme, and reduced-motion variants stay synchronized.
 
 ## License
 
-No license has been selected yet. Choose and add an appropriate license before inviting third parties to copy, modify, or redistribute the source.
+Animated GitHub Profile Studio is released under the [MIT License](./LICENSE).
+
+The MIT License does not grant rights to user-supplied content or third-party media. See [User content and third-party media notice](./USER_CONTENT_NOTICE.md).

SETUP.md

@@ -21,10 +21,14 @@ npm run build
 
 These checks cover TypeScript, strict config parsing, all eight SVG variants, reduced-motion output, README-to-asset references, deterministic ZIP contents, unsafe input handling, public GitHub import errors, cache validation, and the WebMCP contract.
 
+For the v2 configuration, verification also covers every design and font preset, migration of valid v1 drafts, structured remote-media validation and attribution, rejection of unsafe media URLs, and preservation of user content when applying a visual preset.
+
 For a release, also inspect representative long content in desktop/mobile and dark/light previews. Design warnings are advisory because fixed SVG artwork cannot measure browser font metrics during generation.
 
 The preview toolbar can download its currently selected SVG by itself. Use the Export panel's complete ZIP when publishing the full README and all responsive theme variants.
 
+When changing the editor layout, inspect 1440 px, 1180 px, 900 px, 620 px, and 320 px viewport widths. Confirm that navigation and export actions remain reachable, keyboard focus remains visible, remote media stays within the preview, and no horizontal page overflow is introduced.
+
 ## Production output
 
 `npm run build` creates the static site in `dist/`. The build uses relative asset paths and can be hosted at a domain root or a project subpath.
@@ -40,4 +44,12 @@ The editor's ZIP contains its own profile-specific `SETUP.md`. In summary:
 3. Keep `profile.config.json` privately or in the repository if you want the profile to remain easy to edit.
 4. Commit, visit the GitHub profile, and verify links, text wrapping, theme selection, and reduced motion.
 
+Structured remote media is referenced by HTTPS URL and is not bundled in the ZIP. Previewing or viewing it can send a request to its host, and the content can later disappear or change. The user must own the media or hold the permissions needed to publish it; attribution alone does not grant permission. Adding media does not imply affiliation with or endorsement by a creator, platform, game, studio, publisher, or franchise. Review [USER_CONTENT_NOTICE.md](./USER_CONTENT_NOTICE.md) before publishing third-party material.
+
 The animated terminal is decorative. It does not execute code or report live checks.
+
+## License and release files
+
+- Keep the standard [MIT License](./LICENSE) text unchanged.
+- Keep [USER_CONTENT_NOTICE.md](./USER_CONTENT_NOTICE.md) with the release so the software license is not confused with rights to user-selected or third-party material.
+- Built-in presets should use generic original design elements. Do not add third-party artwork or fonts without compatible permission and required notices.

USER_CONTENT_NOTICE.md

@@ -0,0 +1,27 @@
+# User content and third-party media notice
+
+Animated GitHub Profile Studio can reference user-selected images and animated media by HTTPS URL. The Studio does not acquire rights to that content and does not make an external work safe or lawful to use merely because it can be previewed or added to a generated README.
+
+## Your responsibilities
+
+You are responsible for ensuring that you own the media you add or have all permissions and licenses required to use, modify, display, and distribute it. This includes images and GIFs associated with games, animation, films, brands, artists, and other creators. You are also responsible for complying with applicable law, the media host's terms, GitHub's terms, and any required copyright, trademark, attribution, or license notices.
+
+Attribution or a link to the source does not by itself grant permission. Do not imply that a rights holder, platform, game, studio, publisher, artist, or franchise sponsors, approves, or is affiliated with this project or with a generated profile unless that relationship is expressly authorized.
+
+The built-in design direction is generic and original. Presets must not be understood as containing or licensing any franchise characters, logos, artwork, or other protected properties.
+
+## Remote media behavior
+
+Structured remote media is referenced by URL; it is not copied into the generated ZIP. Previewing the media in the Studio or viewing the generated profile may cause the browser or GitHub to request it from the third-party host. That host may receive ordinary request information, and its own privacy policy and terms apply.
+
+Remote content can disappear, move, become unavailable, or change after a profile is generated. The Studio does not control the host, verify the media continuously, or guarantee its type, safety, accuracy, availability, or continued suitability.
+
+## License separation
+
+The repository's [MIT License](./LICENSE) applies to the Studio software and original project materials covered by that license. It does not license user-supplied content or third-party media, fonts, names, marks, or other materials. Referencing, previewing, exporting, or attributing third-party material does not transfer ownership or grant a sublicense.
+
+## Disclaimer
+
+To the maximum extent permitted by applicable law, the project authors and contributors are not responsible or liable for user-selected content, third-party hosts, broken or changed URLs, privacy practices of external services, infringement claims, or any loss or damage arising from the selection, use, display, distribution, or unavailability of remote media. You remain responsible for reviewing your generated profile before publishing it.
+
+This notice is general project information, not legal advice.

package-lock.json

@@ -1,6 +1,7 @@
 {
   "name": "animated-github-profile-studio",
   "version": "0.1.0",
+  "license": "MIT",
   "private": true,
   "type": "module",
   "engines": {