Experiment with image payloads in playground

[marcus-pousette]

Summary

• Adds @treecrdt/content, a small app-layer content protocol for TreeCRDT payload bytes: raw UTF-8 text stays compatible, while images use a compact binary envelope with JSON metadata plus raw bytes.
• Updates the playground to use that package for text/image payload decoding and object URL handling instead of keeping image codec logic local.
• Replaces the persistent composer panel with contextual + Add menus for text nodes, image nodes, random images, and bulk fanout experiments.
• Adds playground image UX for manual experiments: file picker, drag/drop replacement, random image fetch with selectable 1024/2048 sample sizes, row thumbnails, replace/clear controls, and fullscreen preview.
• Adds remote sync presets in the playground Connections panel so local/public sync servers can be selected without remembering URLs.
• Adds image-sized sync benchmark workloads for 64 KiB, 256 KiB, and 1 MiB payload cases.

Why This Shape

TreeCRDT core still only stores Uint8Array payloads. @treecrdt/content is the reusable meta-protocol above that layer, so future text/file/image/video handling can evolve without making core media-specific. This PR intentionally proves the simple inline path first; chunked or external blob-backed content can extend the same package later.

Example

import { decodeContent, encodeImageFileContent, encodeTextContent } from "@treecrdt/content";

const textPayload = encodeTextContent("hello");
const imagePayload = await encodeImageFileContent(file);

const content = decodeContent(imagePayload);
if (content.kind === "image") {
  console.log(content.mime, content.size);
}