Major update for v1 and tests

public/stickers/README.md

@@ -0,0 +1,64 @@
+# Stickers
+
+Drop sticker images into this folder. They'll be picked up automatically by the editor's Stickers tab on the next page load — there's no manifest to update and no constants file to edit.
+
+## Filename convention
+
+```
+<category>__<sticker_name>.<ext>
+```
+
+The **category** comes before the double underscore. The **sticker name** comes after, with single underscores separating words.
+
+A few examples:
+
+| Filename                         | Category | Display name      |
+| -------------------------------- | -------- | ----------------- |
+| `hearts__pink_heart.png`         | Hearts   | Pink Heart        |
+| `hearts__beating_heart.png`      | Hearts   | Beating Heart     |
+| `paws__small_paw_print.png`      | Paws     | Small Paw Print   |
+| `bones__dog_bone.png`            | Bones    | Dog Bone          |
+| `pets__golden_retriever.png`     | Pets     | Golden Retriever  |
+| `stars__sparkle.png`             | Stars    | Sparkle           |
+
+The category and each word in the sticker name are title-cased when displayed (`pink_heart` → `Pink Heart`). Lowercase your filenames; capitalization is added automatically.
+
+## Supported formats
+
+- `.png` (recommended — transparency supported)
+- `.webp` (transparency supported)
+- `.jpg` / `.jpeg`
+- `.svg`
+
+PNG with transparency is the best choice for print-quality stickers. JPEG is fine for opaque art but doesn't blend onto colored shirts as cleanly.
+
+## Sizing
+
+There's no fixed size requirement. The editor places each sticker at 80×80 design units on add (the user can resize from there), and the print export renders the canvas at 4500×4500 pixels — so the sticker is scaled to roughly 1200×1200 px in the final print.
+
+That math has consequences for source image size:
+
+- **Small sources (under ~100px)** scale up heavily for print. A 47×47 PNG, for example, is upscaled ~25× to reach print resolution, which produces visible pixel-art / bitmap artifacts. If you *want* that look (deliberate retro / pixel sprites), it's fine. If you want crisp print output, source images should be larger.
+- **For crisp print output**, aim for at least **600×600 px** sources (matches the print-scale target with room to spare). 1024×1024 is comfortable headroom; beyond ~2048×2048 you're wasting bandwidth without any visible gain.
+- **Vector (SVG) sources** sidestep the issue entirely — they scale cleanly to any size. Recommended where the artwork allows it.
+
+The editor preserves aspect ratio on add (the sticker scales to fit an 80×80 box, not stretched to fill it).
+
+## Categories
+
+Categories are derived from filenames — there's no fixed list. Adding a file with a new category prefix automatically adds the category pill to the Stickers tab. Removing the last file in a category removes the pill.
+
+If you want a specific display order for categories, prefix them with a digit (e.g. `1-hearts__pink.png`, `2-stars__sparkle.png`); the leading digit + dash is stripped from the display name but used for sorting. Without prefixes, categories are listed alphabetically.
+
+## A note on file size
+
+Images here are bundled into the Vite `public/` directory and served as static assets. They are NOT processed by the build, so file size translates 1:1 to network cost. If your source images are heavy, run them through `pngquant` or `cwebp` before dropping them in:
+
+```sh
+pngquant --quality 75-90 --strip --output optimized.png input.png
+cwebp -q 85 input.png -o output.webp
+```
+
+## Lazy loading
+
+Sticker thumbnails use `<img loading="lazy">`, so only the stickers visible (or near-visible) in the panel are fetched. A library of 200+ stickers won't block the initial page load.