Native inline sprites

import {
  createDocument,
  java263Profile,
  parseText,
  type PreviewContext,
  type SpriteCatalogEntry,
} from "@groundsgg/motd";
import { createEditor } from "@groundsgg/motd/dom";
import "@groundsgg/motd/styles.css";

const host = window.document.createElement("div");
window.document.body.append(host);
const frame = (color: string) =>
  "data:image/svg+xml;charset=utf-8," + encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path fill="${color}" d="M0 0h8v8H0z"/></svg>`,
  );
const frames = [
  { url: frame("#65dbc4"), ticks: 10 },
  { url: frame("#e8c17c"), ticks: 10 },
];
const spriteCatalog: readonly SpriteCatalogEntry[] = [{
  atlas: "minecraft:gui",
  sprite: "grounds:demo_pulse",
  label: "Demo pulse",
  animated: true,
  requiresResourcePack: true,
}];
const context: PreviewContext = {
  base: {
    version: { protocol: 777, name: "26.3" },
    players: { online: 42, max: 500, sample: [] },
    description: "",
  },
  clientProtocol: 777,
  profile: java263Profile,
  values: {},
  viewportWidth: 680,
  guiScale: 2,
  serverName: "My server",
  pingMs: 35,
  animations: true,
  spriteProvider: ({ atlas, sprite }) =>
    atlas === "minecraft:gui" && sprite === "grounds:demo_pulse"
      ? { frames }
      : undefined,
};
const statusDocument = createDocument(
  parseText("<white>Hello <sprite:gui:'grounds:demo_pulse'>", "minimessage").value!,
);
const editor = createEditor(host, {
  document: statusDocument,
  context,
  spriteCatalog,
  features: { sprites: true },
  onChange(next) {
    // Persist next through your application; asset URLs stay in context.
    console.log(next);
  },
});
// Call editor.destroy() when this host is removed.

{
  "id": "sprite-1",
  "type": "sprite",
  "atlas": "minecraft:gui",
  "sprite": "minecraft:icon/trial_available"
}