@fezchat/ui 0.1.0

package/dist/form.d.ts

@@ -0,0 +1,29 @@
+import { type MouseEventHandler, type ReactNode } from "react";
+/**
+ * `.settings-field` > `<label>` + control + `.settings-hint`, the shape
+ * every settings screen in the app uses. `htmlFor`/`id` are wired for a11y
+ * when `children` is a single element (the common case); a fragment or
+ * text child falls back to an unassociated label rather than guessing.
+ */
+export declare function Field({ label, hint, children }: {
+    label: string;
+    hint?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A row that can be the chosen one. There is no generic active-row class
+ * in App.css — the ember notch is drawn per-context (`.channel.active`,
+ * `.search-row.active`, `.settings-nav-item.active`) — so this emits its
+ * own `fez-row` class, and the host document supplies the matching
+ * `.fez-row.active::before` notch rule.
+ */
+export declare function Row({ active, onClick, children, }: {
+    active?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** `.skill-chip` — the app's own chip, e.g. `.skill-chip.missing` / `.skill-chip.local`. */
+export declare function Chip({ children, tone }: {
+    children: ReactNode;
+    tone?: string;
+}): import("react").JSX.Element;

package/dist/form.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from "react";
+/**
+ * `.settings-field` > `<label>` + control + `.settings-hint`, the shape
+ * every settings screen in the app uses. `htmlFor`/`id` are wired for a11y
+ * when `children` is a single element (the common case); a fragment or
+ * text child falls back to an unassociated label rather than guessing.
+ */
+export function Field({ label, hint, children }) {
+    const id = useId();
+    const control = isValidElement(children) ? cloneElement(children, { id }) : children;
+    return (_jsxs("div", { className: "settings-field", children: [_jsx("label", { htmlFor: isValidElement(children) ? id : undefined, children: label }), control, hint && _jsx("div", { className: "settings-hint", children: hint })] }));
+}
+/**
+ * A row that can be the chosen one. There is no generic active-row class
+ * in App.css — the ember notch is drawn per-context (`.channel.active`,
+ * `.search-row.active`, `.settings-nav-item.active`) — so this emits its
+ * own `fez-row` class, and the host document supplies the matching
+ * `.fez-row.active::before` notch rule.
+ */
+export function Row({ active, onClick, children, }) {
+    return (_jsx("div", { className: "fez-row" + (active ? " active" : ""), "data-active": active ? "true" : undefined, onClick: onClick, children: children }));
+}
+/** `.skill-chip` — the app's own chip, e.g. `.skill-chip.missing` / `.skill-chip.local`. */
+export function Chip({ children, tone }) {
+    return _jsx("span", { className: "skill-chip" + (tone ? ` ${tone}` : ""), children: children });
+}

package/dist/identity.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Identity avatars — fez has no image profiles: the pubkey IS the
+ * identity, so the avatar is grown from it (see sprite-gen.ts). The
+ * named cast (fez, scout, loom, …) wears its hand-drawn sprite when
+ * `name` matches; everyone else gets their generated familiar. Hover
+ * quips are app-chrome, not an identity primitive — they stay in the
+ * desktop's own thin wrapper around this component.
+ */
+export declare function Avatar({ pk, name, size, }: {
+    pk: string;
+    name?: string;
+    size?: number;
+}): import("react").JSX.Element;

package/dist/identity.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SPRITES } from "./sprites.js";
+import { generateSprite } from "./sprite-gen.js";
+/**
+ * Identity avatars — fez has no image profiles: the pubkey IS the
+ * identity, so the avatar is grown from it (see sprite-gen.ts). The
+ * named cast (fez, scout, loom, …) wears its hand-drawn sprite when
+ * `name` matches; everyone else gets their generated familiar. Hover
+ * quips are app-chrome, not an identity primitive — they stay in the
+ * desktop's own thin wrapper around this component.
+ */
+export function Avatar({ pk, name, size = 28, }) {
+    const spriteName = name?.toLowerCase().replace(/^@/, "");
+    const sprite = (spriteName && SPRITES[spriteName]) || generateSprite(pk);
+    const frame = (rows) => {
+        const w = Math.max(...rows.map((r) => r.length));
+        const h = rows.length;
+        const box = Math.max(w, h);
+        const ox = (box - w) / 2;
+        const oy = (box - h) / 2;
+        const rects = [];
+        rows.forEach((row, y) => {
+            [...row].forEach((ch, x) => {
+                const fill = sprite.palette[ch];
+                if (fill)
+                    rects.push({ x: x + ox, y: y + oy, fill });
+            });
+        });
+        return (_jsx("svg", { width: size, height: size, viewBox: `0 0 ${box} ${box}`, shapeRendering: "crispEdges", "aria-hidden": true, children: rects.map((r, i) => (_jsx("rect", { x: r.x, y: r.y, width: 1, height: 1, fill: r.fill }, i))) }));
+    };
+    // The hover-flap tempo is the key's own, so a crowded member list
+    // doesn't tick like one metronome (CSS reads --spr-dur on :hover).
+    const dur = 0.45 + ((parseInt(pk.slice(8, 10), 16) || 0) % 4) * 0.08;
+    return (_jsxs("span", { className: "avatar avatar-anim", style: { "--spr-dur": `${dur}s` }, role: "img", "aria-label": name ?? "avatar", children: [_jsx("span", { className: "spr-a", children: frame(sprite.rows) }), _jsx("span", { className: "spr-b", children: frame(sprite.alt ?? sprite.rows) })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Page, PageHeader, EmptyState } from "./shell.js";
+export { Field, Row, Chip } from "./form.js";
+export { Avatar } from "./identity.js";
+export { generateSprite } from "./sprite-gen.js";
+export { SPRITES } from "./sprites.js";
+export type { Sprite } from "./sprites.js";
+export { PixelSprite, AnimatedSprite } from "./pixel-sprite.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Page, PageHeader, EmptyState } from "./shell.js";
+export { Field, Row, Chip } from "./form.js";
+export { Avatar } from "./identity.js";
+export { generateSprite } from "./sprite-gen.js";
+export { SPRITES } from "./sprites.js";
+export { PixelSprite, AnimatedSprite } from "./pixel-sprite.js";

package/dist/pixel-sprite.d.ts

@@ -0,0 +1,21 @@
+import type { Sprite } from "./sprites.js";
+/**
+ * The site's pixel-sprite renderer, worn by the desktop (classes come
+ * from App.css here, not Tailwind). One sprite → one SVG of 1×1 rects,
+ * crispEdges so the pixels stay pixels at any size.
+ */
+export declare function PixelSprite({ sprite, scale, frame, }: {
+    sprite: Sprite;
+    scale?: number;
+    frame?: "a" | "b";
+}): import("react").JSX.Element;
+/**
+ * Both idle frames stacked; CSS flips which is visible (`.sprite-anim`
+ * in App.css, steps(1) so the change is a jump, never a fade). Each
+ * character's motion is whatever its two frames disagree about — the
+ * Buzz bee's wing-flap decision, worn by ten familiars.
+ */
+export declare function AnimatedSprite({ sprite, scale }: {
+    sprite: Sprite;
+    scale?: number;
+}): import("react").JSX.Element;

package/dist/pixel-sprite.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The site's pixel-sprite renderer, worn by the desktop (classes come
+ * from App.css here, not Tailwind). One sprite → one SVG of 1×1 rects,
+ * crispEdges so the pixels stay pixels at any size.
+ */
+export function PixelSprite({ sprite, scale = 4, frame = "a", }) {
+    const rows = frame === "b" && sprite.alt ? sprite.alt : sprite.rows;
+    const height = rows.length;
+    const width = Math.max(...rows.map((r) => r.length));
+    const rects = [];
+    rows.forEach((row, y) => {
+        [...row].forEach((ch, x) => {
+            const fill = sprite.palette[ch];
+            if (fill)
+                rects.push({ x, y, fill });
+        });
+    });
+    return (_jsx("svg", { width: width * scale, height: height * scale, viewBox: `0 0 ${width} ${height}`, shapeRendering: "crispEdges", "aria-hidden": true, children: rects.map((r, i) => (_jsx("rect", { x: r.x, y: r.y, width: 1, height: 1, fill: r.fill }, i))) }));
+}
+/**
+ * Both idle frames stacked; CSS flips which is visible (`.sprite-anim`
+ * in App.css, steps(1) so the change is a jump, never a fade). Each
+ * character's motion is whatever its two frames disagree about — the
+ * Buzz bee's wing-flap decision, worn by ten familiars.
+ */
+export function AnimatedSprite({ sprite, scale = 4 }) {
+    return (_jsxs("span", { className: "sprite-anim", children: [_jsx("span", { className: "spr-a", children: _jsx(PixelSprite, { sprite: sprite, scale: scale, frame: "a" }) }), _jsx("span", { className: "spr-b", children: _jsx(PixelSprite, { sprite: sprite, scale: scale, frame: "b" }) })] }));
+}

package/dist/shell.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+/**
+ * The flex:1 wrapper AgentsPage/SkillsView use so a view fills rail→pane
+ * and the pane docks to the window's right edge — without it the
+ * measured `.fez-page` (max-width) leaves the leftover width as dead
+ * space AFTER the pane.
+ */
+export declare function Page({ wide, children }: {
+    wide?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function PageHeader({ title, subtitle, fact, action, }: {
+    title: string;
+    subtitle?: string;
+    fact?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}): import("react").JSX.Element;
+/** An empty page is an invitation, not an apology — full voice, not a grey italic line. */
+export declare function EmptyState({ line, how }: {
+    line: string;
+    how?: string;
+}): import("react").JSX.Element;

package/dist/shell.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The flex:1 wrapper AgentsPage/SkillsView use so a view fills rail→pane
+ * and the pane docks to the window's right edge — without it the
+ * measured `.fez-page` (max-width) leaves the leftover width as dead
+ * space AFTER the pane.
+ */
+export function Page({ wide, children }) {
+    return (_jsx("main", { className: "main", children: _jsx("div", { className: "fez-page" + (wide ? " wide" : ""), children: children }) }));
+}
+export function PageHeader({ title, subtitle, fact, action, }) {
+    return (_jsxs("header", { className: "page-head", children: [_jsx("h1", { className: "page-title", children: title }), subtitle && _jsx("p", { className: "page-sub", children: subtitle }), (fact || action) && (_jsxs("div", { className: "page-rule", children: [action && (_jsx("button", { className: "page-fact page-fact-action", onClick: action.onClick, children: action.label })), fact && _jsx("span", { className: "page-fact", children: fact })] }))] }));
+}
+/** An empty page is an invitation, not an apology — full voice, not a grey italic line. */
+export function EmptyState({ line, how }) {
+    return (_jsxs("div", { className: "page-empty", children: [_jsx("div", { className: "page-empty-line", children: line }), how && _jsx("div", { className: "page-empty-how", children: how })] }));
+}

package/dist/sprite-gen.d.ts

@@ -0,0 +1,3 @@
+import type { Sprite } from "./sprites.js";
+/** The generated familiar for a pubkey — memoized; pks recur constantly. */
+export declare function generateSprite(pk: string): Sprite;

package/dist/sprite-gen.js

@@ -0,0 +1,186 @@
+/**
+ * pk → familiar. Every pubkey grows its own Qud-style creature,
+ * deterministically: the key's bytes seed a tiny RNG that draws a BODY
+ * PLAN (species, proportions, eyes, crest, belt, tassel, tendrils), and
+ * a pure renderer draws both idle frames from that one plan with a
+ * phase flip — so every creature also gets its own animation: bipeds
+ * swap stance, beasts trot and flick their tails, blobs squash, floaters
+ * sway. Same key, same creature, on every surface, forever.
+ *
+ * Design rules carried over from the hand-drawn cast: 12px grid, two
+ * colors from a bank that weights ember, eyes punched as holes, and
+ * deterministic edge-raggedness so silhouettes read organic. Validated
+ * by the sheet in PROTOTYPE-creature-gen.html (proto branch).
+ */
+const W = 12;
+const H = 12;
+const BODY = ["#6fb3b8", "#9d6fcf", "#58c470", "#cfc041", "#b48e6f", "#7d8ca3", "#c64ead", "#a3a071"];
+const ACCENT = ["#FF6A00", "#FF6A00", "#cfc041", "#58c470", "#6fb3b8", "#c64ead"];
+function makeRng(pk) {
+    let s = 0;
+    for (let i = 0; i < 8; i++)
+        s = (s * 31 + (parseInt(pk.slice(i * 2, i * 2 + 2), 16) || 0)) >>> 0;
+    if (!s)
+        s = 0x9e3779b9;
+    return () => {
+        s ^= s << 13;
+        s >>>= 0;
+        s ^= s >> 17;
+        s ^= s << 5;
+        s >>>= 0;
+        return s / 0xffffffff;
+    };
+}
+const pick = (r, xs) => xs[Math.floor(r() * xs.length) % xs.length];
+const irange = (r, lo, hi) => lo + Math.floor(r() * (hi - lo + 1));
+function plan(pk) {
+    const r = makeRng(pk);
+    return {
+        kind: pick(r, ["biped", "biped", "blob", "floater", "beast"]),
+        body: pick(r, BODY),
+        accent: pick(r, ACCENT),
+        headW: irange(r, 3, 5) * 2 - 2,
+        headH: irange(r, 2, 3),
+        torsoW: irange(r, 3, 5) * 2,
+        torsoH: irange(r, 3, 4),
+        eyeStyle: irange(r, 0, 2),
+        crest: irange(r, 0, 3),
+        tassel: irange(r, 0, 2),
+        noise: Array.from({ length: 40 }, () => r() < 0.14),
+        tendrils: Array.from({ length: 5 }, () => irange(r, 2, 4)),
+        legSpread: irange(r, 0, 1),
+        beltRow: irange(r, 0, 2),
+    };
+}
+function render(p, phase) {
+    const g = Array.from({ length: H }, () => Array(W).fill("."));
+    const cx = W / 2;
+    let ni = 0;
+    const noisy = () => p.noise[ni++ % p.noise.length];
+    const putRow = (y, w, ch, center = cx, ragged = false) => {
+        let x0 = Math.floor(center - w / 2);
+        let x1 = Math.ceil(center + w / 2) - 1;
+        if (ragged && w > 3 && noisy()) {
+            if (noisy())
+                x0++;
+            else
+                x1--;
+        }
+        for (let x = Math.max(0, x0); x <= Math.min(W - 1, x1); x++)
+            if (y >= 0 && y < H)
+                g[y][x] = ch;
+    };
+    if (p.kind === "biped") {
+        const headTop = 1 + (p.crest ? 1 : 0);
+        for (let y = 0; y < p.headH; y++)
+            putRow(headTop + y, p.headW, "b");
+        const torsoTop = headTop + p.headH;
+        for (let y = 0; y < p.torsoH; y++)
+            putRow(torsoTop + y, p.torsoW, "b", cx, true);
+        putRow(torsoTop + (p.beltRow % p.torsoH), p.torsoW - 2, "a");
+        const legY = torsoTop + p.torsoH;
+        const spread = (p.legSpread + phase) % 2 === 0 ? 1 : 2;
+        for (let y = legY; y < Math.min(H, legY + 2); y++) {
+            g[y][Math.floor(cx - spread - 1)] = "b";
+            g[y][Math.floor(cx - spread)] = "b";
+            g[y][Math.floor(cx + spread - 1)] = "b";
+            g[y][Math.floor(cx + spread)] = "b";
+        }
+        const eyeY = headTop + 1;
+        if (p.eyeStyle === 2)
+            g[eyeY][Math.floor(cx) - phase] = ".";
+        else {
+            const off = p.eyeStyle === 0 ? 1 : 2;
+            g[eyeY][Math.floor(cx - off - 1)] = ".";
+            g[eyeY][Math.floor(cx + off)] = ".";
+        }
+        if (p.crest === 1)
+            g[headTop - 1][Math.floor(cx) - 1] = "a";
+        if (p.crest === 2) {
+            g[headTop - 1][Math.floor(cx - p.headW / 2)] = "a";
+            g[headTop - 1][Math.floor(cx + p.headW / 2) - 1] = "a";
+        }
+        if (p.crest === 3)
+            putRow(headTop - 1, p.headW - 2, "a");
+        if (p.tassel) {
+            const side = p.tassel === 1 ? -1 : 1;
+            const x = Math.floor(cx + side * (p.headW / 2 + (phase ? 0 : 1)) - (side < 0 ? 1 : 0));
+            if (x >= 0 && x < W) {
+                g[headTop][x] = "a";
+                g[headTop + 1][x] = "a";
+            }
+        }
+    }
+    else if (p.kind === "beast") {
+        const bodyTop = 5;
+        for (let y = 0; y < 3; y++)
+            putRow(bodyTop + y, 9, "b", cx + 1, true);
+        for (let y = 0; y < 2; y++)
+            putRow(3 + y, 4, "b", 3);
+        g[4][2] = ".";
+        putRow(bodyTop + 1, 7, "a", cx + 1);
+        g[bodyTop - 1][phase ? 11 : 10] = "a";
+        for (const [i, x] of [3, 5, 8, 10].entries()) {
+            const lift = (i + phase) % 2 === 0 ? 0 : 1;
+            for (let y = bodyTop + 3; y < bodyTop + 5 - lift; y++)
+                g[y][x] = "b";
+        }
+        if (p.crest)
+            g[2][3] = "a";
+    }
+    else if (p.kind === "blob") {
+        const top = 3 + phase;
+        const rows = 7 - phase;
+        for (let y = 0; y < rows; y++) {
+            const t = (2 * y) / (rows - 1) - 1;
+            const w = Math.max(3, Math.round((p.torsoW + phase) * Math.sqrt(Math.max(0.12, 1 - t * t))));
+            putRow(top + y, w, "b", cx, true);
+        }
+        const eyeY = top + 2;
+        const off = p.eyeStyle === 0 ? 1 : 2;
+        if (p.eyeStyle === 2)
+            g[eyeY][Math.floor(cx)] = ".";
+        else {
+            g[eyeY][Math.floor(cx - off)] = ".";
+            g[eyeY][Math.floor(cx + off - 1)] = ".";
+        }
+        if (p.crest) {
+            g[top - 1][Math.floor(cx) - 1] = "a";
+            if (p.crest > 1)
+                g[top - 1][Math.floor(cx)] = "a";
+        }
+    }
+    else {
+        for (let y = 0; y < 4; y++) {
+            const w = [p.torsoW - 2, p.torsoW, p.torsoW, p.torsoW - 2][y];
+            putRow(2 + y, w, "b");
+        }
+        g[4][Math.floor(cx - 2)] = ".";
+        g[4][Math.floor(cx + 1)] = ".";
+        const xs = [-2, -1, 0, 1].map((dx) => Math.floor(cx + dx));
+        xs.forEach((x, i) => {
+            const len = p.tendrils[i] + ((i + phase) % 2 === 0 ? 0 : -1);
+            for (let y = 6; y < 6 + len && y < H; y++)
+                if ((y + i) % 2 === 0 || y === 6)
+                    g[y][x] = "b";
+        });
+        if (p.crest)
+            g[1][Math.floor(cx) - phase] = "a";
+    }
+    return g.map((row) => row.join(""));
+}
+const cache = new Map();
+/** The generated familiar for a pubkey — memoized; pks recur constantly. */
+export function generateSprite(pk) {
+    const hit = cache.get(pk);
+    if (hit)
+        return hit;
+    const p = plan(pk);
+    const sprite = {
+        rows: render(p, 0),
+        alt: render(p, 1),
+        palette: { b: p.body, a: p.accent },
+    };
+    cache.set(pk, sprite);
+    return sprite;
+}

package/dist/sprites.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The roster's pixel sprites, drawn as character maps — Qud's sultan-
+ * statue grammar: at rest a sprite is a single muted slate, and only
+ * the chosen one lights up in color. Lit palettes are 2-3 colors, ember
+ * always among them; eyes and seams are punched holes (the black ground
+ * does that work for free). '.' is transparent; editing a sprite is
+ * editing text, so the art stays reviewable in a diff.
+ */
+export interface Sprite {
+    rows: string[];
+    /** Second idle frame, same dimensions — each character moves its OWN
+     * way (a tassel swings, a shuttle travels, an eye looks around).
+     * Absent = the sprite holds still. */
+    alt?: string[];
+    palette: Record<string, string>;
+}
+export declare const SPRITES: Record<string, Sprite>;

package/dist/sprites.js

@@ -0,0 +1,276 @@
+/**
+ * The roster's pixel sprites, drawn as character maps — Qud's sultan-
+ * statue grammar: at rest a sprite is a single muted slate, and only
+ * the chosen one lights up in color. Lit palettes are 2-3 colors, ember
+ * always among them; eyes and seams are punched holes (the black ground
+ * does that work for free). '.' is transparent; editing a sprite is
+ * editing text, so the art stays reviewable in a diff.
+ */
+const BONE = '#e8e2d9';
+const EMBER = '#FF6A00';
+const DUST = '#6d645a';
+export const SPRITES = {
+    // The guide wears the hat the network is named for.
+    fez: {
+        palette: { r: EMBER, f: BONE, d: DUST },
+        rows: [
+            '....rrrr....',
+            '....rrrr.r..',
+            '...ffffff.r.',
+            '...f.ff.f...',
+            '...ffffff...',
+            '..dddddddd..',
+            '..dddddddd..',
+            '..ddrrrrdd..',
+            '..dddddddd..',
+            '...dd..dd...',
+            '...dd..dd...',
+        ],
+        alt: [
+            '....rrrr....',
+            '....rrrr....',
+            '...ffffff.r.',
+            '...f.ff.f.r.',
+            '...ffffff...',
+            '..dddddddd..',
+            '..dddddddd..',
+            '..ddrrrrdd..',
+            '..dddddddd..',
+            '..dd....dd..',
+            '..dd....dd..',
+        ],
+    },
+    // Subnet cartographer: wide-brim hat, an ember spyglass to the eye.
+    scout: {
+        palette: { t: '#6fb3b8', f: BONE, r: EMBER },
+        rows: [
+            '..tttttttt..',
+            '....tttt....',
+            '....ffff....',
+            '....f.ffrrrr',
+            '....ffff.r..',
+            '...tttttt...',
+            '...tttttt...',
+            '...tttttt...',
+            '....t..t....',
+            '....t..t....',
+        ],
+        alt: [
+            '..tttttttt..',
+            '....tttt....',
+            '....ffff....',
+            '....f.ffrr..',
+            '....ffff....',
+            '...tttttt...',
+            '...tttttt...',
+            '...tttttt...',
+            '...t....t...',
+            '...t....t...',
+        ],
+    },
+    // The weaver is its loom: violet frame, one ember shuttle.
+    loom: {
+        palette: { v: '#9d6fcf', r: EMBER },
+        rows: [
+            '..v......v..',
+            '..vvvvvvvv..',
+            '..v.v.v..v..',
+            '..v.v.v.vv..',
+            '..vrrrrrrv..',
+            '..vv..v..v..',
+            '..vv.vv.vv..',
+            '..vvvvvvvv..',
+            '..v......v..',
+        ],
+        alt: [
+            '..v......v..',
+            '..vvvvvvvv..',
+            '..v.v.v..v..',
+            '..v.v.v.vv..',
+            '..v.v.v..v..',
+            '..vrrrrrrv..',
+            '..vv.vv.vv..',
+            '..vvvvvvvv..',
+            '..v......v..',
+        ],
+    },
+    // Keeper of the deep: a strongbox, ember light in the keyhole.
+    vault: {
+        palette: { g: '#cfc041', r: EMBER },
+        rows: [
+            '...gggggg...',
+            '..gggggggg..',
+            '............',
+            '..gggggggg..',
+            '..gggrrggg..',
+            '..ggggrggg..',
+            '............',
+            '..gggggggg..',
+            '...g....g...',
+        ],
+        alt: [
+            '...gggggg...',
+            '..gggggggg..',
+            '............',
+            '..gggggggg..',
+            '..ggg..ggg..',
+            '..gggg.ggg..',
+            '............',
+            '..gggggggg..',
+            '...g....g...',
+        ],
+    },
+    // Inference familiar: a small green machine, ember antenna, always on.
+    chip: {
+        palette: { c: '#58c470', r: EMBER },
+        rows: [
+            '.....rr.....',
+            '.....rr.....',
+            '...cccccc...',
+            '...c.cc.c...',
+            '...cccccc...',
+            '..c.cccc.c..',
+            '..cccccccc..',
+            '....c..c....',
+            '...cc..cc...',
+        ],
+        alt: [
+            '............',
+            '.....rr.....',
+            '...cccccc...',
+            '...c.cc.c...',
+            '...cccccc...',
+            '..c.cccc.c..',
+            '..cccccccc..',
+            '....c..c....',
+            '..cc....cc..',
+        ],
+    },
+    // ── the bazaar's cast — miners with public names ─────────────────
+    // The reference floor: a flame that never quite goes out.
+    ember: {
+        palette: { r: EMBER, y: '#cfc041' },
+        rows: [
+            '.....r......',
+            '....rr.r....',
+            '....rrrr....',
+            '...rrrrrr...',
+            '...rryyrr...',
+            '..rryyyyr...',
+            '..ryyyyyyr..',
+            '...yyyyyy...',
+            '....yyyy....',
+        ],
+        alt: [
+            '......r.....',
+            '....r.rr....',
+            '....rrrr....',
+            '...rrrrrr...',
+            '...rryyrrr..',
+            '...ryyyyr...',
+            '..ryyyyyyr..',
+            '...yyyyyy...',
+            '....yyyy....',
+        ],
+    },
+    // Writes like it means it: a bone quill, ember at the nib.
+    quill: {
+        palette: { f: BONE, r: EMBER },
+        rows: [
+            '.........f..',
+            '........ff..',
+            '.......ff...',
+            '......ff....',
+            '.....fff....',
+            '....fff.....',
+            '...fff......',
+            '..ff........',
+            '..r.........',
+            '.r..........',
+        ],
+        alt: [
+            '.........f..',
+            '........ff..',
+            '.......ff...',
+            '......ff....',
+            '.....fff....',
+            '....fff.....',
+            '...fff......',
+            '..ff........',
+            '...r........',
+            '..r.........',
+        ],
+    },
+    // Structured data, no small talk: an anvil, one hot spark.
+    forge: {
+        palette: { d: DUST, r: EMBER },
+        rows: [
+            '............',
+            '....r.......',
+            '..dddddddd..',
+            '...dddddd...',
+            '.....dd.....',
+            '.....dd.....',
+            '...dddddd...',
+            '..dddddddd..',
+        ],
+        alt: [
+            '.....rr.....',
+            '............',
+            '..dddddddd..',
+            '...dddddd...',
+            '.....dd.....',
+            '.....dd.....',
+            '...dddddd...',
+            '..dddddddd..',
+        ],
+    },
+    // Slow. Worth it. Usually. A drifting thing with one ember mote.
+    drift: {
+        palette: { v: '#9d6fcf', r: EMBER },
+        rows: [
+            '....vvvv....',
+            '...vvvvvv...',
+            '..vv.vv.vv..',
+            '..vvvvvvvv..',
+            '...v.v.v....',
+            '...v.v..v...',
+            '....v..v....',
+            '.....r......',
+        ],
+        alt: [
+            '....vvvv....',
+            '...vvvvvv...',
+            '..vv.vv.vv..',
+            '..vvvvvvvv..',
+            '....v.v.v...',
+            '...v..v.v...',
+            '....v..v....',
+            '......r.....',
+        ],
+    },
+    // The appraising eye: gold sclera, ember iris, a punched pupil.
+    score: {
+        palette: { o: '#cfc041', r: EMBER },
+        rows: [
+            '..o......o..',
+            '...oooooo...',
+            '..oooooooo..',
+            '.oooorroooo.',
+            '.ooor..rooo.',
+            '..oorrrroo..',
+            '...oooooo...',
+            '..o......o..',
+        ],
+        alt: [
+            '..o......o..',
+            '...oooooo...',
+            '..oooooooo..',
+            '.ooorrooooo.',
+            '.oor..roooo.',
+            '..orrrrooo..',
+            '...oooooo...',
+            '..o......o..',
+        ],
+    },
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@fezchat/ui",
+  "version": "0.1.0",
+  "description": "The fez app's own shell/form/identity primitives as React components — an extension built from them renders the identical DOM and follows every theme for free.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}