@submitium/badges 0.0.0-stage → 1.0.0

package/LICENSE

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

package/README.md

@@ -1,3 +1,138 @@
-# Temporary Holding Version
+# @submitium/badges
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Submitium badge wall: the official badge of every directory that lists your product, in one block on your homepage. Submitium adds and removes badges as your listings change, so you never paste a badge again.
+
+Your server fetches the wall with your project's API key. The package checks our signature and the data, then renders plain links and images with your framework's own elements. We never send HTML, CSS or scripts: no `dangerouslySetInnerHTML`, no `v-html`, no `{@html}`, nothing that runs in the browser.
+
+## Install
+
+```bash
+npm install @submitium/badges
+```
+
+Create an API key on the Badge wall page of your Submitium dashboard, and put it in your server's environment:
+
+```bash
+SUBMITIUM_API_KEY=sbk_live_…
+```
+
+It is a secret: keep it on the server. It can only read this project's badge wall. Never expose it to the browser (no `NEXT_PUBLIC_`, `PUBLIC_` or `VITE_` prefix). Revoke it from the dashboard if it leaks; the site shows no wall until it has a new key.
+
+Put the wall on your **homepage**, usually in the footer. That's the page directories check.
+
+## Next.js (App Router)
+
+```tsx
+import { SubmitiumBadges } from "@submitium/badges/react";
+
+export function Footer() {
+  return (
+    <footer>
+      <SubmitiumBadges />
+    </footer>
+  );
+}
+```
+
+`<SubmitiumBadges />` is an async Server Component. It reads `SUBMITIUM_API_KEY`, and Next.js caches the wall for an hour (`revalidate`).
+
+## Nuxt
+
+```ts
+// server/api/badges.get.ts
+import { fetchWall } from "@submitium/badges";
+
+export default defineEventHandler(() => fetchWall());
+```
+
+```vue
+<script setup lang="ts">
+import { BadgeWall } from "@submitium/badges/vue";
+
+const { data: wall } = await useFetch("/api/badges");
+</script>
+
+<template>
+  <footer>
+    <BadgeWall v-if="wall" :wall="wall" />
+  </footer>
+</template>
+```
+
+## SvelteKit
+
+```ts
+// src/routes/+layout.server.ts
+import { fetchWall } from "@submitium/badges";
+import { env } from "$env/dynamic/private";
+
+export async function load() {
+  return { wall: await fetchWall({ apiKey: env.SUBMITIUM_API_KEY }) };
+}
+```
+
+```svelte
+<script lang="ts">
+  import BadgeWall from "@submitium/badges/svelte";
+
+  let { data, children } = $props();
+</script>
+
+{@render children()}
+
+<footer>
+  {#if data.wall}
+    <BadgeWall wall={data.wall} />
+  {/if}
+</footer>
+```
+
+## Astro
+
+```astro
+---
+import SubmitiumBadges from "@submitium/badges/astro";
+---
+
+<footer>
+  <SubmitiumBadges />
+</footer>
+```
+
+It reads `SUBMITIUM_API_KEY` from `import.meta.env`. A static build fetches the wall when it builds: rebuild once a day to keep it current.
+
+## Any other server
+
+`fetchWall()` returns the checked wall, or `null`. `wallToHtml(layoutWall(wall))` turns it into an HTML string where every value is escaped, to print in your template.
+
+```ts
+import { fetchWall, layoutWall, wallToHtml } from "@submitium/badges";
+
+const wall = await fetchWall();
+const html = wall ? wallToHtml(layoutWall(wall)) : "";
+```
+
+## `fetchWall` options
+
+| Option | Default | |
+|---|---|---|
+| `apiKey` | `SUBMITIUM_API_KEY` | Your project's API key. |
+| `timeout` | `3000` | Milliseconds to wait for the API. Past that, no wall, and your page carries on. |
+| `revalidate` | `3600` | Seconds a wall is kept before asking again (in memory, and as Next.js `revalidate`). |
+| `apiUrl` | `https://api.submitium.com` | For local development only. |
+
+The format (`ribbon`: one gliding line in the footer bar; `window`: a small gliding window under your logo), the theme and the attribution link are settings you change in the dashboard. Your code stays the same.
+
+## What the package guarantees
+
+- **Signed.** Every wall is signed with Ed25519. The package checks the signature against our public keys, pinned in its code, before it reads anything. A wall from anyone else, or changed on the way, renders nothing.
+- **Checked.** The wall must match a strict contract (`parseWall`): https links that point to the directory's own domain, https images, a closed list of `rel` values, plain text with a length limit, and a wall that hasn't expired (a week at most). Anything else and the whole wall is refused, not repaired.
+- **Plain elements only.** The wall becomes links, images, a few spans and one scoped `<style>`, all written by this package from numbers (no CSS comes from the API). React, Vue, Svelte and Astro write each element themselves and escape every value.
+- **In your HTML.** The badges are in the HTML your server sends, which is what directory checkers read. No client JavaScript: motion is pure CSS. It pauses on hover and keyboard focus, and stands still under `prefers-reduced-motion`.
+- **Never breaks your page.** If the API is slow, down or answers anything unexpected, the last good wall is kept, or nothing renders.
+- **Fair to directories.** Each badge links to its directory with the directory's official `rel`, the image loads from the directory's own URL, and no badge is hidden or duplicated. Badges a directory wants in view at all times never move.
+- **Attribution.** One discreet "Badge wall by Submitium" link, dofollow by default; you can make it nofollow in the dashboard.
+
+## License
+
+MIT. Source and how it works: https://submitium.com/badge-wall

package/astro/BadgeWall.astro

@@ -0,0 +1,12 @@
+---
+// A wall you already fetched (with `fetchWall`), written as plain links and images.
+import { layoutWall, type Wall } from "../index.js";
+import Node from "./Node.astro";
+
+interface Props {
+  wall: Wall;
+}
+const { wall } = Astro.props;
+---
+
+<Node node={layoutWall(wall)} />

package/astro/Node.astro

@@ -0,0 +1,24 @@
+---
+// One element of the wall's tree, written by Astro: only the elements and attributes the tree
+// allows (TAGS, attrsOf), every value escaped. No HTML string is ever inserted.
+import { attrsOf, cssOf, TAGS, type WallNode } from "../index.js";
+import Node from "./Node.astro";
+
+interface Props {
+  node: WallNode;
+}
+const { node } = Astro.props;
+const Tag = node.tag;
+const attrs = Object.fromEntries(attrsOf(node));
+const empty = ["img", "source", "input", "path"].includes(node.tag);
+---
+
+{
+  !TAGS.has(node.tag) ? null : node.tag === "style" ? (
+    <style is:inline set:text={cssOf(node)} />
+  ) : empty ? (
+    <Tag {...attrs} />
+  ) : (
+    <Tag {...attrs}>{node.children.map((child) => (typeof child === "string" ? child : <Node node={child} />))}</Tag>
+  )
+}

package/astro/SubmitiumBadges.astro

@@ -0,0 +1,11 @@
+---
+// Astro: the wall is fetched while the page renders on your server (SSR or at build), with your
+// API key from SUBMITIUM_API_KEY, checked, and written as plain links and images.
+import { fetchWall, type FetchWallOptions } from "../index.js";
+import BadgeWall from "./BadgeWall.astro";
+
+type Props = FetchWallOptions;
+const wall = await fetchWall({ apiKey: import.meta.env.SUBMITIUM_API_KEY, ...Astro.props });
+---
+
+{wall && <BadgeWall wall={wall} />}

package/client-iCo9PkAU.d.ts

@@ -0,0 +1,21 @@
+import { d as Wall } from "./contract-KBbC2LBR.js";
+//#region src/client.d.ts
+declare const DEFAULT_API_URL = "https://api.submitium.com";
+type FetchWallOptions = {
+  /** Your project's API key. Defaults to the SUBMITIUM_API_KEY environment variable. */
+  apiKey?: string;
+  /** Milliseconds before giving up: the page renders without the wall. Default 3000. */
+  timeout?: number;
+  /** Seconds the wall is kept before asking again (in memory, and as Next.js `revalidate`). Default one hour. */
+  revalidate?: number;
+  /** Testing against a local API only: its URL and its public key. */
+  apiUrl?: string;
+  publicKeys?: Readonly<Record<string, string>>;
+};
+/**
+ * The wall, verified and checked, or null: no key, the API slow or down with no good copy kept,
+ * a bad signature or a wall outside the contract. A site never breaks or waits because of it.
+ */
+declare function fetchWall(options?: FetchWallOptions): Promise<Wall | null>;
+//#endregion
+export { FetchWallOptions as n, fetchWall as r, DEFAULT_API_URL as t };

package/client-x4bD7iXW.js

@@ -0,0 +1,246 @@
+//#region src/contract.ts
+const WALL_VERSION = 1;
+const VARIANTS = ["ribbon", "window"];
+const THEMES = [
+	"light",
+	"dark",
+	"auto"
+];
+/** The "Badge wall by Submitium" line: dofollow (default), nofollow, or left out. */
+const ATTRIBUTIONS = [
+	"dofollow",
+	"nofollow",
+	"none"
+];
+/** The only `rel` tokens a badge link may carry. No rel at all is a followed link. */
+const REL_TOKENS = [
+	"nofollow",
+	"noopener",
+	"noreferrer",
+	"sponsored",
+	"ugc"
+];
+const LIMITS = {
+	badges: 300,
+	text: 120,
+	url: 2048,
+	id: 80,
+	size: 1e3,
+	/** Bytes of the payload. */
+	payload: 524288
+};
+const KEY = /^bk_[A-Za-z0-9]{10,40}$/;
+const ID = /^[a-z0-9][a-z0-9._-]{0,79}$/;
+const DOMAIN = /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}$/;
+const isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+const hasOnly = (o, keys) => Object.keys(o).every((k) => keys.includes(k));
+/** Plain text, no control characters, within the length limit. */
+function text(v, max = LIMITS.text) {
+	if (typeof v !== "string" || v.length === 0 || v.length > max) return null;
+	return /[\u0000-\u001f\u007f]/.test(v) ? null : v;
+}
+/** An absolute https URL with no credentials and the default port. */
+function httpsUrl(v) {
+	const raw = text(v, LIMITS.url);
+	if (!raw) return null;
+	try {
+		const url = new URL(raw);
+		if (url.protocol !== "https:" || url.username || url.password || url.port) return null;
+		return url;
+	} catch {
+		return null;
+	}
+}
+const sameSite = (host, domain) => host === domain || host.endsWith(`.${domain}`);
+function size(v) {
+	if (v === null) return null;
+	return Number.isInteger(v) && v > 0 && v <= LIMITS.size ? v : void 0;
+}
+function badge(v) {
+	if (!isObj(v) || !hasOnly(v, [
+		"id",
+		"name",
+		"domain",
+		"href",
+		"rel",
+		"still",
+		"image"
+	])) return null;
+	const id = typeof v.id === "string" && ID.test(v.id) ? v.id : null;
+	const name = text(v.name);
+	const domain = typeof v.domain === "string" && DOMAIN.test(v.domain) ? v.domain : null;
+	const href = httpsUrl(v.href);
+	if (!id || !name || !domain || !href || !sameSite(href.hostname.replace(/^www\./, ""), domain)) return null;
+	if (!Array.isArray(v.rel) || v.rel.length > REL_TOKENS.length || !v.rel.every((t) => REL_TOKENS.includes(t))) return null;
+	if (typeof v.still !== "boolean") return null;
+	const img = v.image;
+	if (!isObj(img) || !hasOnly(img, [
+		"src",
+		"srcDark",
+		"width",
+		"height",
+		"alt"
+	])) return null;
+	const src = httpsUrl(img.src);
+	const srcDark = img.srcDark === null ? null : httpsUrl(img.srcDark);
+	const width = size(img.width);
+	const height = size(img.height);
+	const alt = text(img.alt);
+	if (!src || srcDark === void 0 || img.srcDark !== null && !srcDark || width === void 0 || height === void 0 || !alt) return null;
+	return {
+		id,
+		name,
+		domain,
+		href: href.toString(),
+		rel: [...new Set(v.rel)],
+		still: v.still,
+		image: {
+			src: src.toString(),
+			srcDark: srcDark ? srcDark.toString() : null,
+			width,
+			height,
+			alt
+		}
+	};
+}
+/** The wall, checked against the contract; null when anything in it is off. */
+function parseWall(value, now = /* @__PURE__ */ new Date()) {
+	if (!isObj(value) || !hasOnly(value, [
+		"v",
+		"key",
+		"issuedAt",
+		"expiresAt",
+		"settings",
+		"badges"
+	])) return null;
+	if (value.v !== 1 || typeof value.key !== "string" || !KEY.test(value.key)) return null;
+	const issued = typeof value.issuedAt === "string" ? Date.parse(value.issuedAt) : NaN;
+	const expires = typeof value.expiresAt === "string" ? Date.parse(value.expiresAt) : NaN;
+	if (Number.isNaN(issued) || Number.isNaN(expires) || expires <= issued || now.getTime() > expires) return null;
+	const s = value.settings;
+	if (!isObj(s) || !hasOnly(s, [
+		"variant",
+		"theme",
+		"attribution"
+	])) return null;
+	if (!VARIANTS.includes(s.variant) || !THEMES.includes(s.theme) || !ATTRIBUTIONS.includes(s.attribution)) return null;
+	if (!Array.isArray(value.badges) || value.badges.length > LIMITS.badges) return null;
+	const badges = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const raw of value.badges) {
+		const b = badge(raw);
+		if (!b || seen.has(b.id)) return null;
+		seen.add(b.id);
+		badges.push(b);
+	}
+	return {
+		v: 1,
+		key: value.key,
+		issuedAt: new Date(issued).toISOString(),
+		expiresAt: new Date(expires).toISOString(),
+		settings: {
+			variant: s.variant,
+			theme: s.theme,
+			attribution: s.attribution
+		},
+		badges
+	};
+}
+//#endregion
+//#region src/signature.ts
+/**
+* Submitium's public keys, by id. A new key is added here before the API starts signing with it,
+* and an old one stays until every site has had time to update the package.
+*/
+const SUBMITIUM_PUBLIC_KEYS = { "sbk-2026-10": "z-donEWLI7VYCSsaJgGOhih66KQLHiZJbG5DV4b2fqQ" };
+const B64URL = /^[A-Za-z0-9_-]+$/;
+function fromBase64Url(value) {
+	if (!B64URL.test(value)) return null;
+	const b64 = value.replaceAll("-", "+").replaceAll("_", "/").padEnd(Math.ceil(value.length / 4) * 4, "=");
+	try {
+		const bin = atob(b64);
+		const out = new Uint8Array(new ArrayBuffer(bin.length));
+		for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+		return out;
+	} catch {
+		return null;
+	}
+}
+function isSignedWall(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const v = value;
+	return Object.keys(v).length === 3 && typeof v.payload === "string" && typeof v.signature === "string" && typeof v.keyId === "string" && /^[a-z0-9-]{1,40}$/.test(v.keyId);
+}
+/**
+* The wall's JSON text when the signature is good, else null. `keys` defaults to Submitium's;
+* pass your own only to test against a local API.
+*/
+async function verifySignedWall(envelope, keys = SUBMITIUM_PUBLIC_KEYS) {
+	const publicKey = keys[envelope.keyId];
+	if (!publicKey) return null;
+	const raw = fromBase64Url(publicKey);
+	const signature = fromBase64Url(envelope.signature);
+	if (!raw || raw.length !== 32 || !signature || signature.length !== 64) return null;
+	try {
+		const key = await crypto.subtle.importKey("raw", raw, { name: "Ed25519" }, false, ["verify"]);
+		return await crypto.subtle.verify({ name: "Ed25519" }, key, signature, new TextEncoder().encode(envelope.payload)) ? envelope.payload : null;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/client.ts
+const DEFAULT_API_URL = "https://api.submitium.com";
+const API_KEY = /^sbk_(live|test)_[A-Za-z0-9]{24,64}$/;
+function envKey() {
+	return typeof process !== "undefined" ? process.env?.SUBMITIUM_API_KEY : void 0;
+}
+/**
+* The last good wall of each key, in this server's memory: a busy page doesn't ask us on every
+* request, and keeps its badges while our API is down (until the wall itself expires).
+*/
+const memory = /* @__PURE__ */ new Map();
+const alive = (wall) => Date.parse(wall.expiresAt) > Date.now();
+/**
+* The wall, verified and checked, or null: no key, the API slow or down with no good copy kept,
+* a bad signature or a wall outside the contract. A site never breaks or waits because of it.
+*/
+async function fetchWall(options = {}) {
+	const apiKey = options.apiKey ?? envKey();
+	if (!apiKey || !API_KEY.test(apiKey)) return null;
+	const base = (options.apiUrl ?? "https://api.submitium.com").replace(/\/+$/, "");
+	const revalidate = options.revalidate ?? 3600;
+	const slot = `${base} ${apiKey}`;
+	const kept = memory.get(slot);
+	if (kept && alive(kept.wall) && Date.now() - kept.at < revalidate * 1e3) return kept.wall;
+	const fresh = await request(base, apiKey, revalidate, options);
+	if (fresh) memory.set(slot, {
+		wall: fresh,
+		at: Date.now()
+	});
+	return fresh ?? (kept && alive(kept.wall) ? kept.wall : null);
+}
+async function request(base, apiKey, revalidate, options) {
+	try {
+		const init = {
+			headers: {
+				authorization: `Bearer ${apiKey}`,
+				accept: "application/json"
+			},
+			signal: AbortSignal.timeout(options.timeout ?? 3e3),
+			next: { revalidate }
+		};
+		const res = await fetch(`${base}/v1/wall`, init);
+		if (!res.ok) return null;
+		const body = await res.text();
+		if (body.length > LIMITS.payload * 2) return null;
+		const envelope = JSON.parse(body);
+		if (!isSignedWall(envelope) || envelope.payload.length > LIMITS.payload) return null;
+		const payload = await verifySignedWall(envelope, options.publicKeys);
+		return payload ? parseWall(JSON.parse(payload)) : null;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { verifySignedWall as a, REL_TOKENS as c, WALL_VERSION as d, parseWall as f, isSignedWall as i, THEMES as l, fetchWall as n, ATTRIBUTIONS as o, SUBMITIUM_PUBLIC_KEYS as r, LIMITS as s, DEFAULT_API_URL as t, VARIANTS as u };

package/contract-KBbC2LBR.d.ts

@@ -0,0 +1,59 @@
+//#region src/contract.d.ts
+declare const WALL_VERSION = 1;
+declare const VARIANTS: readonly ["ribbon", "window"];
+type Variant = (typeof VARIANTS)[number];
+declare const THEMES: readonly ["light", "dark", "auto"];
+type Theme = (typeof THEMES)[number];
+/** The "Badge wall by Submitium" line: dofollow (default), nofollow, or left out. */
+declare const ATTRIBUTIONS: readonly ["dofollow", "nofollow", "none"];
+type Attribution = (typeof ATTRIBUTIONS)[number];
+/** The only `rel` tokens a badge link may carry. No rel at all is a followed link. */
+declare const REL_TOKENS: readonly ["nofollow", "noopener", "noreferrer", "sponsored", "ugc"];
+type RelToken = (typeof REL_TOKENS)[number];
+type WallBadge = {
+  /** The directory's id at Submitium. */
+  id: string;
+  /** The directory's name, for the image's fallback text. */
+  name: string;
+  /** The directory's domain: the link must point there (or to a subdomain). */
+  domain: string;
+  href: string;
+  rel: RelToken[];
+  /** The directory checks the badge is visible at rest: it never sits in a moving part. */
+  still: boolean;
+  image: {
+    src: string;
+    /** For dark sites, when the directory gives one. */
+    srcDark: string | null;
+    width: number | null;
+    height: number | null;
+    alt: string;
+  };
+};
+type Wall = {
+  v: typeof WALL_VERSION;
+  /** The project's public badge key (`bk_…`): our checker finds the wall by it. */
+  key: string;
+  issuedAt: string;
+  /** A signed wall older than this is refused: an old copy can't be replayed forever. */
+  expiresAt: string;
+  settings: {
+    variant: Variant;
+    theme: Theme;
+    attribution: Attribution;
+  };
+  badges: WallBadge[];
+};
+declare const LIMITS: {
+  readonly badges: 300;
+  readonly text: 120;
+  readonly url: 2048;
+  readonly id: 80;
+  readonly size: 1000;
+  /** Bytes of the payload. */
+  readonly payload: number;
+};
+/** The wall, checked against the contract; null when anything in it is off. */
+declare function parseWall(value: unknown, now?: Date): Wall | null;
+//#endregion
+export { RelToken as a, VARIANTS as c, Wall as d, WallBadge as f, REL_TOKENS as i, Variant as l, Attribution as n, THEMES as o, parseWall as p, LIMITS as r, Theme as s, ATTRIBUTIONS as t, WALL_VERSION as u };

package/index.d.ts

@@ -0,0 +1,79 @@
+import { a as RelToken, c as VARIANTS, d as Wall, f as WallBadge, i as REL_TOKENS, l as Variant, n as Attribution, o as THEMES, p as parseWall, r as LIMITS, s as Theme, t as ATTRIBUTIONS, u as WALL_VERSION } from "./contract-KBbC2LBR.js";
+import { n as FetchWallOptions, r as fetchWall, t as DEFAULT_API_URL } from "./client-iCo9PkAU.js";
+//#region src/layout.d.ts
+type WallTag = "div" | "ul" | "li" | "a" | "img" | "picture" | "source" | "span" | "b" | "style" | "svg" | "path";
+type WallAttrs = {
+  class?: string;
+  /** CSS properties, kebab-case, values written by this file. */
+  style?: Record<string, string>;
+  href?: string;
+  target?: "_blank";
+  rel?: string;
+  src?: string;
+  srcset?: string;
+  media?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  loading?: "lazy";
+  decoding?: "async";
+  "aria-label"?: string;
+  "aria-hidden"?: "true";
+  viewBox?: string;
+  xmlns?: "http://www.w3.org/2000/svg";
+  fill?: string;
+  d?: string;
+  "data-submitium"?: string;
+  "data-submitium-variant"?: Variant;
+  "data-submitium-zone"?: "moving" | "fixed";
+};
+type WallNode = {
+  tag: WallTag;
+  attrs: WallAttrs;
+  children: (WallNode | string)[];
+};
+export declare const ATTRIBUTION_URL = "https://submitium.com/?ref=badge-wall";
+/**
+ * The wall as a tree. An empty wall (nothing ordered yet) is its root alone: invisible, and still
+ * found by our check, which looks for the project's key on it.
+ */
+export declare function layoutWall(wall: Wall): WallNode;
+//#endregion
+//#region src/html.d.ts
+/**
+ * The wall as static HTML. `pretty` puts each block on its own line and each CSS rule on its own
+ * line, for a copy people read before they paste it; it renders the same.
+ */
+export declare function wallToHtml(node: WallNode, options?: {
+  pretty?: boolean;
+}): string;
+//#endregion
+//#region src/signature.d.ts
+/** The envelope the API answers with. `payload` is the wall's JSON, as text, byte for byte. */
+type SignedWall = {
+  payload: string;
+  signature: string;
+  keyId: string;
+};
+/**
+ * Submitium's public keys, by id. A new key is added here before the API starts signing with it,
+ * and an old one stays until every site has had time to update the package.
+ */
+export declare const SUBMITIUM_PUBLIC_KEYS: Readonly<Record<string, string>>;
+export declare function isSignedWall(value: unknown): value is SignedWall;
+/**
+ * The wall's JSON text when the signature is good, else null. `keys` defaults to Submitium's;
+ * pass your own only to test against a local API.
+ */
+export declare function verifySignedWall(envelope: SignedWall, keys?: Readonly<Record<string, string>>): Promise<string | null>;
+//#endregion
+//#region src/tree.d.ts
+export declare const TAGS: ReadonlySet<WallTag>;
+export declare const ATTRS: ReadonlySet<keyof WallAttrs>;
+/** The node's attributes that may be written, `style` as a CSS text. */
+export declare function attrsOf(node: WallNode): [string, string | number][];
+export declare function styleText(style: Record<string, string>): string;
+/** The CSS of a `style` node, refused if it could close the element (it never can: it's ours). */
+export declare function cssOf(node: WallNode): string;
+//#endregion
+export { ATTRIBUTIONS, type Attribution, DEFAULT_API_URL, type FetchWallOptions, LIMITS, REL_TOKENS, type RelToken, type SignedWall, THEMES, type Theme, VARIANTS, type Variant, WALL_VERSION, type Wall, type WallAttrs, type WallBadge, type WallNode, type WallTag, fetchWall, parseWall };

package/index.js

@@ -0,0 +1,48 @@
+import { a as verifySignedWall, c as REL_TOKENS, d as WALL_VERSION, f as parseWall, i as isSignedWall, l as THEMES, n as fetchWall, o as ATTRIBUTIONS, r as SUBMITIUM_PUBLIC_KEYS, s as LIMITS, t as DEFAULT_API_URL, u as VARIANTS } from "./client-x4bD7iXW.js";
+import { a as attrsOf, i as TAGS, n as layoutWall, o as cssOf, r as ATTRS, s as styleText, t as ATTRIBUTION_URL } from "./layout-DvNYYz0J.js";
+//#region src/html.ts
+const VOID = /* @__PURE__ */ new Set([
+	"img",
+	"source",
+	"path"
+]);
+function escape(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
+}
+/** Elements whose children sit on their own lines when pretty: block and flex boxes, where the whitespace never shows. */
+const BLOCKS = /* @__PURE__ */ new Set(["div", "ul"]);
+/** The CSS one rule a line (a media query and its rules on one), to read before pasting. */
+function cssLines(css, pad) {
+	const rules = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i < css.length; i++) if (css[i] === "{") depth++;
+	else if (css[i] === "}" && --depth === 0) {
+		rules.push(css.slice(start, i + 1));
+		start = i + 1;
+	}
+	return rules.map((r) => `\n${pad}${r}`).join("");
+}
+/**
+* The wall as static HTML. `pretty` puts each block on its own line and each CSS rule on its own
+* line, for a copy people read before they paste it; it renders the same.
+*/
+function wallToHtml(node, options = {}) {
+	return write(node, options.pretty ? 0 : null);
+}
+function write(node, depth) {
+	if (!TAGS.has(node.tag)) return "";
+	const pad = depth === null ? "" : "  ".repeat(depth + 1);
+	const end = depth === null ? "" : `\n${"  ".repeat(depth)}`;
+	const attrs = attrsOf(node).map(([name, value]) => ` ${name}="${escape(String(value))}"`).join("");
+	if (node.tag === "style") return depth === null ? `<style>${cssOf(node)}</style>` : `<style>${cssLines(cssOf(node), pad)}${end}</style>`;
+	if (VOID.has(node.tag)) return node.tag === "path" ? `<path${attrs}/>` : `<${node.tag}${attrs}>`;
+	const lines = depth !== null && BLOCKS.has(node.tag) && node.children.length > 0;
+	const inner = node.children.map((c) => {
+		const html = typeof c === "string" ? escape(c) : write(c, lines ? depth + 1 : null);
+		return lines ? `\n${pad}${html}` : html;
+	}).join("");
+	return `<${node.tag}${attrs}>${inner}${lines ? end : ""}</${node.tag}>`;
+}
+//#endregion
+export { ATTRIBUTIONS, ATTRIBUTION_URL, ATTRS, DEFAULT_API_URL, LIMITS, REL_TOKENS, SUBMITIUM_PUBLIC_KEYS, TAGS, THEMES, VARIANTS, WALL_VERSION, attrsOf, cssOf, fetchWall, isSignedWall, layoutWall, parseWall, styleText, verifySignedWall, wallToHtml };

package/layout-DvNYYz0J.js

@@ -0,0 +1,297 @@
+//#region src/tree.ts
+const TAGS = /* @__PURE__ */ new Set([
+	"div",
+	"ul",
+	"li",
+	"a",
+	"img",
+	"picture",
+	"source",
+	"span",
+	"b",
+	"style",
+	"svg",
+	"path"
+]);
+const ATTRS = /* @__PURE__ */ new Set([
+	"class",
+	"style",
+	"href",
+	"target",
+	"rel",
+	"src",
+	"srcset",
+	"media",
+	"alt",
+	"width",
+	"height",
+	"loading",
+	"decoding",
+	"aria-label",
+	"aria-hidden",
+	"viewBox",
+	"xmlns",
+	"fill",
+	"d",
+	"data-submitium",
+	"data-submitium-variant",
+	"data-submitium-zone"
+]);
+/** The node's attributes that may be written, `style` as a CSS text. */
+function attrsOf(node) {
+	const out = [];
+	for (const [name, value] of Object.entries(node.attrs)) {
+		if (!ATTRS.has(name) || value === void 0) continue;
+		if (name === "style") out.push([name, styleText(value)]);
+		else if (typeof value === "string" || typeof value === "number") out.push([name, value]);
+	}
+	return out;
+}
+function styleText(style) {
+	return Object.entries(style).filter(([k, v]) => /^[a-z-]+$/.test(k) && /^[\w\s.,%()#-]+$/.test(v)).map(([k, v]) => `${k}:${v}`).join(";");
+}
+/** The CSS of a `style` node, refused if it could close the element (it never can: it's ours). */
+function cssOf(node) {
+	const css = node.children.filter((c) => typeof c === "string").join("");
+	return /[<>"'&\\]/.test(css) ? "" : css;
+}
+//#endregion
+//#region src/layout.ts
+const el = (tag, attrs = {}, children = []) => ({
+	tag,
+	attrs,
+	children
+});
+const ATTRIBUTION_URL = "https://submitium.com/?ref=badge-wall";
+/** Badge height in every format. */
+const H = 40;
+const MAX_RATIO = 6;
+/** Ratio assumed when the official size is unknown: the image letterboxes inside its box. */
+const FALLBACK_RATIO = 3.7;
+/** A moving window narrower than this shows its badges still instead. */
+const MIN_WINDOW = 200;
+const CSS_BASE = `.sbm{display:block;margin:0;padding:0;font:inherit;color:inherit;text-align:left}.sbm *{box-sizing:border-box}.sbm ul,.sbm li{margin:0;padding:0;list-style:none}.sbm a{color:inherit;border:0;background:none;box-shadow:none}.sbm img{display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;object-fit:contain}.sbm picture{display:contents}.sbm a:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sbm-lb{flex:none;opacity:.7;white-space:nowrap}.sbm-fix{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}.sbm-bar+.sbm-fix{margin-top:12px}.sbm-i{display:flex;align-items:center;min-height:${H}px;max-width:100%}.sbm-ctl{display:flex;align-items:center;gap:14px;margin-left:auto}.sbm:hover .sbm-it,.sbm:focus-within .sbm-it{animation-play-state:paused}`;
+const CSS_BY = ".sbm-by{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;text-decoration:none;white-space:nowrap;opacity:.75}.sbm-by:hover{opacity:1}.sbm-by b{font-weight:600}.sbm-m{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}.sbm-m svg{display:block;width:12px;height:12px}";
+/** Edges fade where badges come and go (the badges still never fade at rest). */
+function mask(edge, axis = "x") {
+	const g = `linear-gradient(${axis === "x" ? "90deg" : "180deg"},transparent,#000 ${edge}px,#000 calc(100% - ${edge}px),transparent)`;
+	return `-webkit-mask-image:${g};mask-image:${g}`;
+}
+const NO_MASK = "-webkit-mask-image:none;mask-image:none";
+/** Tiny stable hash, so identical loops share one @keyframes name. */
+function hash(value) {
+	let h = 5381;
+	for (let i = 0; i < value.length; i++) h = (h * 33 ^ value.charCodeAt(i)) >>> 0;
+	return h.toString(36);
+}
+const seconds = (s) => `${+s.toFixed(2)}s`;
+/**
+* Continuous loop without clones, for badges of different widths: each badge travels from
+* (L - G) to -G at the same speed and wraps while out of view (L = whole row, G = widest badge
+* + gap). The window must stay narrower than L - G, returned as `maxWindow`.
+*/
+function glideLoop(widths, gap, speed) {
+	const L = widths.reduce((sum, w) => sum + w + gap, 0);
+	const G = Math.max(...widths) + gap;
+	const frames = `{from{transform:translateX(${L - G}px)}to{transform:translateX(${-G}px)}}`;
+	const name = `sbm-g${hash(frames)}`;
+	let x = 0;
+	const delays = widths.map((w) => {
+		const elapsed = ((L - G - x) % L + L) % L;
+		x += w + gap;
+		return seconds(-elapsed / speed);
+	});
+	return {
+		css: `@keyframes ${name}${frames}`,
+		name,
+		duration: seconds(L / speed),
+		delays,
+		maxWindow: L - G
+	};
+}
+/** Width of a badge at its display height. */
+function widthOf(b) {
+	const { width: w, height: h } = b.image;
+	return Math.round((h ? Math.min(h, H) : H) * Math.min(MAX_RATIO, w && h ? w / h : FALLBACK_RATIO));
+}
+const heightOf = (b) => b.image.height ? Math.min(b.image.height, H) : H;
+/** The rel a badge link carries: the directory's own, and noopener for the new tab. */
+const relOf = (b) => [.../* @__PURE__ */ new Set([...b.rel, "noopener"])].join(" ");
+/** One badge: the directory's link around its image, at its display size. */
+function badgeNode(b, theme, inZone) {
+	const dark = b.image.srcDark;
+	const img = el("img", {
+		src: theme === "dark" && dark ? dark : b.image.src,
+		alt: b.image.alt,
+		...b.image.width ? { width: b.image.width } : {},
+		...b.image.height ? { height: b.image.height } : {},
+		loading: "lazy",
+		decoding: "async",
+		style: {
+			width: `${widthOf(b)}px`,
+			height: `${heightOf(b)}px`,
+			"max-width": inZone ? "none" : "100%",
+			"object-position": "left center"
+		}
+	});
+	const picture = theme === "auto" && dark ? el("picture", {}, [el("source", {
+		media: "(prefers-color-scheme: dark)",
+		srcset: dark.replaceAll(" ", "%20").replaceAll(",", "%2C")
+	}), img]) : img;
+	return el("a", {
+		href: b.href,
+		target: "_blank",
+		rel: relOf(b)
+	}, [picture]);
+}
+const zone = (cls, items) => el("div", {
+	class: cls,
+	"data-submitium-zone": "moving"
+}, [el("ul", { class: "sbm-t" }, items)]);
+const item = (delay, child) => el("li", {
+	class: "sbm-it",
+	style: { "animation-delay": delay }
+}, [child]);
+/** 1 · Ribbon: one line in the footer bar, every badge gliding slowly. */
+function ribbon({ movers, badge }) {
+	const gap = 28;
+	const loop = glideLoop(movers.map((m) => m.width), gap, 26);
+	if (movers.length < 2 || loop.maxWindow < MIN_WINDOW) return {
+		css: "",
+		moving: null
+	};
+	return {
+		css: `.sbm-w{position:relative;flex:1 1 260px;min-width:0;max-width:${Math.min(760, loop.maxWindow)}px;height:${H}px;overflow:hidden;${mask(56)}}.sbm-it{position:absolute;top:0;left:0;height:${H}px;display:flex;align-items:center;animation:${loop.name} ${loop.duration} linear infinite;will-change:transform}` + loop.css + `@media (prefers-reduced-motion:reduce){.sbm-w{overflow-x:auto;${NO_MASK}}.sbm-t{display:flex;gap:${gap}px;width:max-content}.sbm-it{position:static;animation:none}}`,
+		moving: zone("sbm-w", movers.map((m, i) => item(loop.delays[i], badge(m))))
+	};
+}
+/** 2 · Window: a small gliding window, under the logo and tagline. */
+function windowFormat({ movers, badge }) {
+	const gap = 22;
+	const loop = glideLoop(movers.map((m) => m.width), gap, 22);
+	if (movers.length < 2 || loop.maxWindow < MIN_WINDOW) return {
+		css: "",
+		moving: null
+	};
+	return {
+		css: `.sbm-w{position:relative;width:${Math.min(320, loop.maxWindow)}px;max-width:100%;height:${H}px;overflow:hidden;${mask(36)}}.sbm-it{position:absolute;top:0;left:0;height:${H}px;display:flex;align-items:center;animation:${loop.name} ${loop.duration} linear infinite;will-change:transform}` + loop.css + `@media (prefers-reduced-motion:reduce){.sbm-w{overflow-x:auto;${NO_MASK}}.sbm-t{display:flex;gap:${gap}px;width:max-content}.sbm-it{position:static;animation:none}}`,
+		moving: zone("sbm-w", movers.map((m, i) => item(loop.delays[i], badge(m))))
+	};
+}
+const LAYOUT_CSS = {
+	ribbon: ".sbm-ribbon{container-type:inline-size}.sbm-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;font-size:12px}@container (max-width:520px){.sbm-lb{display:none}.sbm-w{flex-basis:100%}}",
+	window: ".sbm-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}"
+};
+const MARK_PATHS = [["#4432F4", "M20 1l-1 1 0 2 6 27 1 1 2 0 1 0 6-12 12-2 1-2-1-1-11-6-14-8-2 0zM39 22l-2 0-7 11-2 1-2 0-2-1-3-11-14 8-1 1 2 2 20 10 3 1 2 0 23-11 2-2-1-1-15-9-3 1z"], ["#CAC9FD", "M11 37l-5 3 0 1 1 0 25 13 2-1 18-9 5-2 1-2-1-1-5-2-19 9-1 1-21-10zM10 47l-4 1 0 2 1 1 25 12 2 0 9-5 13-7 2-1 0-2-2 0-4-2-17 9-3 1-20-10-2 1z"]];
+function attributionNode(rel) {
+	const mark = el("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 64 64",
+		width: 12,
+		height: 12,
+		"aria-hidden": "true"
+	}, MARK_PATHS.map(([fill, d]) => el("path", {
+		fill,
+		d
+	})));
+	return el("a", {
+		class: "sbm-by",
+		href: ATTRIBUTION_URL,
+		target: "_blank",
+		rel: rel === "nofollow" ? "nofollow noopener" : "noopener"
+	}, [el("span", { class: "sbm-m" }, [mark]), el("span", {}, ["Badge wall by ", el("b", {}, ["Submitium"])])]);
+}
+/** Splits on the commas outside parentheses: `a,b:is(c,d)` is two selectors. */
+function selectors(head) {
+	const out = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i < head.length; i++) if (head[i] === "(") depth++;
+	else if (head[i] === ")") depth--;
+	else if (head[i] === "," && depth === 0) {
+		out.push(head.slice(start, i).trim());
+		start = i + 1;
+	}
+	out.push(head.slice(start).trim());
+	return out;
+}
+/**
+* Every rule limited to this wall (its root carries `scope`): two walls on one page, a footer and
+* an "As seen on" section, never restyle each other. A selector that starts on one of the root's
+* own classes (`.sbm`, `.sbm-ribbon`) is the root itself; keyframes are named by their content and
+* shared as they are.
+*/
+function scoped(css, scope, root) {
+	let out = "";
+	let i = 0;
+	while (i < css.length) {
+		const open = css.indexOf("{", i);
+		if (open < 0) break;
+		let depth = 1;
+		let j = open + 1;
+		while (j < css.length && depth) {
+			if (css[j] === "{") depth++;
+			else if (css[j] === "}") depth--;
+			j++;
+		}
+		const head = css.slice(i, open).trim();
+		const inner = css.slice(open + 1, j - 1);
+		if (head.startsWith("@keyframes")) out += `${head}{${inner}}`;
+		else if (head.startsWith("@")) out += `${head}{${scoped(inner, scope, root)}}`;
+		else {
+			const prefixed = selectors(head).map((sel) => {
+				const own = /^\.([\w-]+)/.exec(sel);
+				return own && root.has(own[1]) ? `${scope}${sel}` : `${scope} ${sel}`;
+			});
+			out += `${prefixed.join(",")}{${inner}}`;
+		}
+		i = j;
+	}
+	return out;
+}
+/**
+* The wall as a tree. An empty wall (nothing ordered yet) is its root alone: invisible, and still
+* found by our check, which looks for the project's key on it.
+*/
+function layoutWall(wall) {
+	const { variant, theme, attribution } = wall.settings;
+	const classes = [
+		"sbm",
+		`sbm-${variant}`,
+		`sbm-${theme}`
+	];
+	let scope = null;
+	const root = (children) => el("div", {
+		class: [...classes, ...scope ? [scope] : []].join(" "),
+		"data-submitium": wall.key,
+		"data-submitium-variant": variant
+	}, children);
+	if (wall.badges.length === 0) return root([]);
+	const candidates = wall.badges.filter((b) => !b.still).map((b) => ({
+		badge: b,
+		width: widthOf(b)
+	}));
+	const parts = {
+		movers: candidates,
+		badge: (m) => badgeNode(m.badge, theme, true)
+	};
+	const built = variant === "window" ? windowFormat(parts) : ribbon(parts);
+	const moving = new Set(built.moving ? candidates.map((m) => m.badge) : []);
+	const still = wall.badges.filter((b) => !moving.has(b));
+	const fixed = still.length ? el("div", {
+		class: "sbm-fix",
+		"data-submitium-zone": "fixed"
+	}, still.map((b) => el("span", { class: "sbm-i" }, [badgeNode(b, theme, false)]))) : null;
+	const by = attribution === "none" ? null : attributionNode(attribution);
+	const ctl = by ? el("span", { class: "sbm-ctl" }, [by]) : null;
+	const zoneNode = built.moving;
+	const label = el("span", { class: "sbm-lb" }, ["Featured on"]);
+	const rules = CSS_BASE + (by ? CSS_BY : "") + LAYOUT_CSS[variant] + built.css;
+	scope = `sbm-x${hash(rules)}`;
+	const css = el("style", {}, [scoped(rules, `.${scope}`, new Set(classes))]);
+	const some = (...nodes) => nodes.filter((n) => n !== null);
+	if (variant === "window") return root([css, el("div", { class: "sbm-col" }, some(zoneNode, fixed, by))]);
+	return zoneNode ? root(some(css, el("div", { class: "sbm-bar" }, some(label, zoneNode, ctl)), fixed)) : root([css, el("div", { class: "sbm-bar" }, some(label, fixed, ctl))]);
+}
+//#endregion
+export { attrsOf as a, TAGS as i, layoutWall as n, cssOf as o, ATTRS as r, styleText as s, ATTRIBUTION_URL as t };

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@submitium/badges",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "The Submitium badge wall: a signed, checked wall rendered as plain links and images. React, Vue, Svelte, Astro.",
+  "license": "MIT",
+  "author": "Submitium <contact@submitium.com>",
+  "homepage": "https://submitium.com/badge-wall",
+  "bugs": {
+    "email": "contact@submitium.com"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "import": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "import": "./vue.js"
+    },
+    "./svelte": {
+      "svelte": "./svelte/BadgeWall.svelte",
+      "default": "./svelte/BadgeWall.svelte"
+    },
+    "./astro": "./astro/SubmitiumBadges.astro"
+  },
+  "peerDependencies": {
+    "react": ">=18.3",
+    "vue": ">=3.4",
+    "svelte": ">=5",
+    "astro": ">=4"
+  },
+  "keywords": [
+    "badges",
+    "directories",
+    "react-server-components",
+    "nextjs",
+    "nuxt",
+    "sveltekit",
+    "astro"
+  ],
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "astro": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/react.d.ts

@@ -0,0 +1,21 @@
+import { d as Wall } from "./contract-KBbC2LBR.js";
+import { n as FetchWallOptions } from "./client-iCo9PkAU.js";
+import { ReactNode } from "react";
+//#region src/react.d.ts
+/** A wall you already fetched (with `fetchWall`), rendered. */
+export declare function BadgeWall({ wall, className }: {
+  wall: Wall;
+  className?: string;
+}): ReactNode;
+export type SubmitiumBadgesProps = FetchWallOptions & {
+  className?: string;
+};
+/**
+ * The badge wall, fetched and rendered on your server. Put it on your homepage, usually in the
+ * footer. Renders nothing if the API is slow, down or the wall doesn't check out.
+ */
+export declare function SubmitiumBadges({ className, ...options }: SubmitiumBadgesProps): Promise<import("react").FunctionComponentElement<{
+  wall: Wall;
+  className?: string;
+}> | null>;
+//#endregion

package/react.js

@@ -0,0 +1,37 @@
+import { n as fetchWall } from "./client-x4bD7iXW.js";
+import { a as attrsOf, i as TAGS, n as layoutWall, o as cssOf } from "./layout-DvNYYz0J.js";
+import { createElement } from "react";
+//#region src/react.tsx
+/** React's names for the attributes React spells differently. */
+const REACT_NAMES = {
+	class: "className",
+	srcset: "srcSet"
+};
+function toReact(node, key) {
+	if (!TAGS.has(node.tag)) return null;
+	const props = key === void 0 ? {} : { key };
+	for (const [name, value] of attrsOf(node)) if (name === "style") props.style = styleObject(node.attrs.style ?? {});
+	else props[REACT_NAMES[name] ?? name] = value;
+	if (node.tag === "style") return createElement("style", props, cssOf(node));
+	const children = node.children.map((c, i) => typeof c === "string" ? c : toReact(c, i));
+	return createElement(node.tag, props, ...children);
+}
+const styleObject = (style) => Object.fromEntries(Object.entries(style).map(([k, v]) => [k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()), v]));
+/** A wall you already fetched (with `fetchWall`), rendered. */
+function BadgeWall({ wall, className }) {
+	const tree = layoutWall(wall);
+	return className ? createElement("div", { className }, toReact(tree)) : toReact(tree);
+}
+/**
+* The badge wall, fetched and rendered on your server. Put it on your homepage, usually in the
+* footer. Renders nothing if the API is slow, down or the wall doesn't check out.
+*/
+async function SubmitiumBadges({ className, ...options }) {
+	const wall = await fetchWall(options);
+	return wall ? createElement(BadgeWall, {
+		wall,
+		className
+	}) : null;
+}
+//#endregion
+export { BadgeWall, SubmitiumBadges };

package/svelte/BadgeWall.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvelteKit: fetch the wall in a server load (`+layout.server.ts`, with `fetchWall` and your API
+  // key from `$env/static/private`), then render it here. The badges are in the HTML the server sends.
+  import { layoutWall, type Wall } from "../index.js";
+  import Node from "./Node.svelte";
+
+  let { wall }: { wall: Wall } = $props();
+</script>
+
+<Node node={layoutWall(wall)} />

package/svelte/Node.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  // One element of the wall's tree, written by Svelte: only the elements and attributes the tree
+  // allows (TAGS, attrsOf), every value escaped. No HTML string is ever inserted.
+  import { attrsOf, cssOf, TAGS, type WallNode } from "../index.js";
+  import Node from "./Node.svelte";
+
+  let { node }: { node: WallNode } = $props();
+  const attrs = Object.fromEntries(attrsOf(node));
+  const empty = ["img", "source", "input", "path"].includes(node.tag);
+</script>
+
+{#if TAGS.has(node.tag)}
+  {#if node.tag === "style"}
+    <svelte:element this="style">{cssOf(node)}</svelte:element>
+  {:else if empty}
+    <svelte:element this={node.tag} {...attrs} />
+  {:else}
+    <svelte:element this={node.tag} {...attrs}
+      >{#each node.children as child}{#if typeof child === "string"}{child}{:else}<Node node={child} />{/if}{/each}</svelte:element
+    >
+  {/if}
+{/if}

package/vue.d.ts

@@ -0,0 +1,18 @@
+import { d as Wall } from "./contract-KBbC2LBR.js";
+import { PropType, VNode } from "vue";
+//#region src/vue.d.ts
+export declare const BadgeWall: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  wall: {
+    type: PropType<Wall>;
+    required: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  wall: {
+    type: PropType<Wall>;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { BadgeWall as default };

package/vue.js

@@ -0,0 +1,22 @@
+import { a as attrsOf, i as TAGS, n as layoutWall, o as cssOf } from "./layout-DvNYYz0J.js";
+import { defineComponent, h } from "vue";
+//#region src/vue.ts
+function toVue(node) {
+	if (!TAGS.has(node.tag)) return null;
+	const props = {};
+	for (const [name, value] of attrsOf(node)) props[name] = name === "style" ? node.attrs.style ?? {} : value;
+	if (node.tag === "style") return h("style", props, cssOf(node));
+	return h(node.tag, props, node.children.map((c) => typeof c === "string" ? c : toVue(c)));
+}
+const BadgeWall = defineComponent({
+	name: "SubmitiumBadgeWall",
+	props: { wall: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		return () => toVue(layoutWall(props.wall));
+	}
+});
+//#endregion
+export { BadgeWall, BadgeWall as default };