@fungi.computer/sprite 0.0.0-stage → 0.0.1

package/dist/mycelium.js

@@ -0,0 +1,242 @@
+/**
+ * A living mycelium field: hyphae grow slowly across a host element and coral
+ * nodes pulse when something finishes. Rendered with Pixi 8, which the host
+ * loads lazily and passes in, so Sprite itself never bundles Pixi.
+ */
+/** A small, fast, seeded PRNG (mulberry32). */
+function random(seed) {
+    let state = seed >>> 0;
+    return () => {
+        state = (state + 0x6d2b79f5) >>> 0;
+        let t = state;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function prefersStill(view) {
+    return view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+ * Mount a mycelium field that fills `host`. Reduced motion renders one
+ * composed, fully grown frame and never ticks. The ticker pauses while the host
+ * is off screen or the document is hidden.
+ */
+export async function mountMycelium(host, options) {
+    const { pixi, palette, seed = 7, segments = 2600, threadAlpha = 0.22, pulseEvery = 2.4, threadWidth = 1.6, avoid = () => [], focus = () => null, } = options;
+    const view = host.ownerDocument.defaultView;
+    if (!view)
+        throw new Error("Mycelium needs a browser window");
+    const app = new pixi.Application();
+    await app.init({
+        resizeTo: host,
+        backgroundAlpha: 0,
+        antialias: true,
+        autoDensity: true,
+        resolution: Math.min(view.devicePixelRatio || 1, 2),
+        preference: "webgl",
+    });
+    const canvas = app.canvas;
+    canvas.setAttribute("aria-hidden", "true");
+    canvas.style.position = "absolute";
+    canvas.style.inset = "0";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    host.append(canvas);
+    const rand = random(seed);
+    const still = prefersStill(view);
+    const nodes = [];
+    const nodeLayer = new pixi.Container();
+    const pen = new pixi.Graphics();
+    let baked = pixi.RenderTexture.create({
+        width: app.screen.width,
+        height: app.screen.height,
+        resolution: app.renderer.resolution,
+    });
+    const canvasSprite = new pixi.Sprite(baked);
+    app.stage.addChild(canvasSprite, nodeLayer);
+    let tips = [];
+    let drawn = 0;
+    const addNode = (x, y) => {
+        const dot = new pixi.Graphics()
+            .circle(0, 0, 2.6 + rand() * 2)
+            .fill({ color: palette.node });
+        dot.position.set(x, y);
+        dot.alpha = 0.55;
+        nodeLayer.addChild(dot);
+        nodes.push({ x, y, glow: 0, sprite: dot });
+    };
+    let blocked = [];
+    const isBlocked = (x, y) => blocked.some((rect) => x > rect.left && x < rect.right && y > rect.top && y < rect.bottom);
+    const seedTips = () => {
+        const { width, height } = app.screen;
+        blocked = avoid();
+        tips = [];
+        const start = (x, y, angle, life) => {
+            tips.push({ x, y, angle, life, width: threadWidth });
+            addNode(x, y);
+        };
+        const target = focus();
+        if (target) {
+            // Densest around the focus: threads leave its edges and wrap around it.
+            // Growth lives in the gutters and below the focus: threads leave its
+            // left and right edges and its bottom, never its top.
+            const count = Math.max(10, Math.round(width / 90));
+            for (let index = 0; index < count; index += 1) {
+                const side = rand();
+                const along = rand();
+                if (side < 0.4)
+                    start(target.left - 6, target.top + along * (target.bottom - target.top), Math.PI + (rand() - 0.5) * 1.4, 110 + rand() * 180);
+                else if (side < 0.8)
+                    start(target.right + 6, target.top + along * (target.bottom - target.top), (rand() - 0.5) * 1.4, 110 + rand() * 180);
+                else
+                    start(target.left + along * (target.right - target.left), target.bottom + 6, Math.PI / 2 + (rand() - 0.5) * 1.2, 60 + rand() * 110);
+            }
+            return;
+        }
+        const count = Math.max(4, Math.round(width / 220));
+        for (let index = 0; index < count; index += 1) {
+            const fromBottom = rand() < 0.6;
+            const x = fromBottom ? rand() * width : rand() < 0.5 ? 0 : width;
+            const y = fromBottom ? height : height * (0.35 + rand() * 0.65);
+            const angle = fromBottom
+                ? -Math.PI / 2 + (rand() - 0.5) * 1.1
+                : x === 0
+                    ? -0.4 + (rand() - 0.5) * 0.8
+                    : Math.PI + 0.4 + (rand() - 0.5) * 0.8;
+            start(x, y, angle, 120 + rand() * 220);
+        }
+    };
+    const grow = (steps) => {
+        const { width, height } = app.screen;
+        for (let step = 0; step < steps && drawn < segments; step += 1) {
+            const next = [];
+            for (const tip of tips) {
+                const length = 3 + rand() * 4;
+                const angle = tip.angle + (rand() - 0.5) * 0.5;
+                const x = tip.x + Math.cos(angle) * length;
+                const y = tip.y + Math.sin(angle) * length;
+                if (isBlocked(x, y))
+                    continue;
+                pen.moveTo(tip.x, tip.y).lineTo(x, y).stroke({
+                    width: tip.width,
+                    color: palette.thread,
+                    alpha: threadAlpha,
+                    cap: "round",
+                });
+                drawn += 1;
+                const life = tip.life - 1;
+                const inside = x > -20 && x < width + 20 && y > -20 && y < height + 20;
+                if (!inside || life <= 0)
+                    continue;
+                next.push({
+                    x,
+                    y,
+                    angle,
+                    life,
+                    width: Math.max(0.5, tip.width * 0.998),
+                });
+                if (rand() < 0.035 && next.length < 90) {
+                    const branch = angle + (rand() < 0.5 ? -1 : 1) * (0.5 + rand() * 0.6);
+                    next.push({
+                        x,
+                        y,
+                        angle: branch,
+                        life: life * (0.5 + rand() * 0.4),
+                        width: tip.width * 0.72,
+                    });
+                    if (rand() < 0.45)
+                        addNode(x, y);
+                }
+            }
+            tips = next;
+            if (tips.length === 0)
+                break;
+        }
+        app.renderer.render({ container: pen, target: baked, clear: false });
+        pen.clear();
+    };
+    const pulse = () => {
+        const node = nodes[Math.floor(rand() * nodes.length)];
+        if (node)
+            node.glow = 1;
+    };
+    const restart = () => {
+        baked.destroy(true);
+        baked = pixi.RenderTexture.create({
+            width: app.screen.width,
+            height: app.screen.height,
+            resolution: app.renderer.resolution,
+        });
+        canvasSprite.texture = baked;
+        for (const node of nodes)
+            node.sprite.destroy();
+        nodes.length = 0;
+        drawn = 0;
+        seedTips();
+        if (still) {
+            grow(segments);
+            app.render();
+        }
+    };
+    let untilPulse = pulseEvery;
+    const tick = () => {
+        const seconds = app.ticker.deltaMS / 1000;
+        if (drawn < segments && tips.length > 0)
+            grow(4);
+        untilPulse -= seconds;
+        if (untilPulse <= 0) {
+            pulse();
+            untilPulse = pulseEvery * (0.5 + rand());
+        }
+        for (const node of nodes) {
+            if (node.glow <= 0)
+                continue;
+            node.glow = Math.max(0, node.glow - seconds * 0.8);
+            node.sprite.alpha = 0.55 + node.glow * 0.45;
+            node.sprite.scale.set(1 + node.glow * 2.2);
+        }
+    };
+    seedTips();
+    if (still) {
+        app.ticker.stop();
+        grow(segments);
+        app.render();
+    }
+    else {
+        app.ticker.add(tick);
+    }
+    let visible = true;
+    const sync = () => {
+        if (still)
+            return;
+        if (visible && !host.ownerDocument.hidden)
+            app.ticker.start();
+        else
+            app.ticker.stop();
+    };
+    const observer = new view.IntersectionObserver((entries) => {
+        visible = entries.some((entry) => entry.isIntersecting);
+        sync();
+    });
+    observer.observe(host);
+    host.ownerDocument.addEventListener("visibilitychange", sync);
+    let lastWidth = app.screen.width;
+    const resized = new view.ResizeObserver(() => {
+        if (Math.abs(app.screen.width - lastWidth) < 80)
+            return;
+        lastWidth = app.screen.width;
+        restart();
+    });
+    resized.observe(host);
+    return {
+        pulse,
+        destroy: () => {
+            observer.disconnect();
+            resized.disconnect();
+            host.ownerDocument.removeEventListener("visibilitychange", sync);
+            baked.destroy(true);
+            app.destroy({ removeView: true }, { children: true });
+        },
+    };
+}

package/dist/player.d.ts

@@ -0,0 +1,99 @@
+import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
+import { type AssetPolicy } from "./assets.js";
+import { type Appearance } from "./controls.js";
+import { type RenderStyle } from "./render-style.js";
+import { type CharacterDocument, type CharacterSource } from "./document.js";
+/** One complete request. Omitted customization resets to character defaults. */
+export type AvatarPresentation = {
+    readonly src: CharacterSource;
+    readonly activity?: string;
+    readonly expression?: string;
+    readonly appearance?: Appearance;
+    /** SVG filter drawn over the character; omitted draws it plain. */
+    readonly renderStyle?: RenderStyle;
+};
+/** The resolved activity and appearance passed to a native renderer. */
+export type NativePresentation = {
+    readonly activity: string;
+    readonly expression: string | null;
+    readonly appearance: Appearance;
+};
+/** The adapter registers native destruction in the selection scope. */
+export type NativePlayer = {
+    readonly activities: readonly string[];
+    readonly expressions: readonly string[];
+    /** Update the existing native instance. */
+    set(presentation: NativePresentation): void;
+    /** Pause or resume animation without losing the current frame. */
+    pause(paused: boolean): void;
+};
+/** Native renderer access to the selected document and its admitted assets. */
+export type RendererContext = {
+    readonly target: HTMLElement;
+    readonly document: CharacterDocument;
+    readonly signal: AbortSignal;
+    readonly maxPixels: number;
+    /** Report a native failure that occurs after the renderer has become ready. */
+    readonly reportError: (error: Error) => void;
+    /** Admit an asset and revoke its object URL when the selection closes. */
+    readonly assetURL: (reference: string) => Effect.Effect<string, Error, Scope.Scope>;
+};
+/** A native renderer whose resources live in the character selection scope. */
+export type Renderer = (context: RendererContext) => Effect.Effect<NativePlayer, Error, Scope.Scope>;
+/** A request after native fallback and appearance validation. */
+export type EffectivePresentation = NativePresentation & {
+    readonly renderStyle: RenderStyle;
+    readonly requestedActivity: string;
+    readonly requestedExpression: string | null;
+    readonly fallback: boolean;
+};
+/** Observable loading, ready, error, and disposal states. */
+export type PlayerState = {
+    readonly status: "empty" | "loading" | "destroyed";
+} | {
+    readonly status: "error";
+    readonly error: Error;
+} | {
+    readonly status: "ready";
+    readonly document: CharacterDocument;
+    readonly presentation: EffectivePresentation;
+    readonly updateError?: Error;
+};
+/** An installed document and its renderer, loaded together by the shell. */
+export type LocalCharacter = {
+    readonly document: CharacterDocument;
+    readonly render: Renderer;
+};
+/** Host-owned character registry and resource policy. */
+export type SpriteOptions = {
+    /** Omit for local-only characters; network access is denied by default. */
+    readonly assets?: AssetPolicy;
+    readonly maxPixels?: number;
+    /** Native adapters allowed for served character documents. */
+    readonly renderers?: Readonly<Record<string, () => Promise<{
+        default: Renderer;
+    }>>>;
+    /** Lazy local characters installed by this shell. */
+    readonly characters?: Readonly<Record<string, () => Promise<LocalCharacter>>>;
+};
+/** One mounted avatar; dispose releases its native and browser resources. */
+export type AvatarPlayer = {
+    /** Current public state. */
+    readonly state: PlayerState;
+    /** Observe state changes until the returned unsubscribe function is called. */
+    subscribe(listener: (next: PlayerState) => void): () => void;
+    /** Select a source or update its activity and appearance. */
+    set(next: AvatarPresentation): void;
+    /** Pause or resume the current native animation. */
+    pause(value: boolean): void;
+    /** Cancel loading and release the current native selection. */
+    dispose(): Promise<void>;
+};
+/** Stable shell configuration that creates independent mounted players. */
+export type SpriteService = {
+    /** Claim one DOM host for a new avatar instance. */
+    mount(target: HTMLElement): AvatarPlayer;
+};
+/** Stable shell service; each mounted player owns its own selection. */
+export declare function createSprite(options: SpriteOptions): SpriteService;