proteus-sdk 0.0.0-stage → 0.1.0

package/dist/mount.d.ts

@@ -0,0 +1,57 @@
+import { ProteusApp } from "./index.js";
+import type { ProteusConfigOverrides } from "./types.js";
+/** Options for {@link mount}. */
+export interface MountOptions {
+    /** Called once, before the first frame, to create the app's components. */
+    setup: (app: ProteusApp) => void;
+    /**
+     * Called every frame, after the app has been ticked, with the time since
+     * the previous frame in seconds. To use the app here, keep the one passed
+     * to `setup`.
+     *
+     * Optional, because many apps need no per-frame code: an app that reacts
+     * only through callbacks registered in `setup`, such as `onClick` and
+     * `onTransitionComplete`, can leave it out. Use it for work that runs
+     * every frame, such as a countdown or an animation of your own.
+     */
+    update?: (deltaSeconds: number) => void;
+    /**
+     * Engine settings. Omit it, or any field, to keep the web default.
+     *
+     * ```ts
+     * await mount("canvas", {
+     *   setup,
+     *   config: {
+     *     render: { clearColor: [0.05, 0.05, 0.08, 1] },
+     *     resources: { imageMaxSide: 512 },
+     *   },
+     * });
+     * ```
+     *
+     * A misspelled field, an unknown value, a font that can't be read, or a
+     * value the device can't support, such as an atlas larger than WebGL2
+     * allows, throws an error that names the field.
+     */
+    config?: ProteusConfigOverrides;
+}
+/**
+ * Runs an app on the `<canvas>` element with the given id: creates a
+ * {@link ProteusApp}, calls `setup` with it, then draws and ticks it every
+ * frame and reports pointer input to it.
+ *
+ * @example
+ * ```ts
+ * await mount("canvas", {
+ *   setup(app) {
+ *     const button = app.component({ geometry: buttonGeometry });
+ *     const panel = app.component({ geometry: panelGeometry, visible: false });
+ *     const open = app.transitionChannel();
+ *     button.onClick(() => open.set(panel, button, { duration: 0.4 }));
+ *   },
+ * });
+ * ```
+ *
+ * @throws if the canvas isn't found, the GPU can't be initialized, or
+ * `config` is invalid.
+ */
+export declare function mount(canvasId: string, opts: MountOptions): Promise<void>;

package/dist/mount.js

@@ -0,0 +1,32 @@
+// `mount`, which runs a TypeScript app on a canvas using `proteus-host-web`.
+//
+// The host is a separately compiled wasm module, and the app object it passes
+// to `setup` comes from that module, not from this package's own. Wrapping it
+// in this package's `ProteusApp` is safe: both modules compile the same
+// `ProteusApp` bindings, and each method call stays within the module that
+// created the object.
+import { mount as wasmMount } from "../pkg-host/proteus_host_web.js";
+import { ProteusApp } from "./index.js";
+/**
+ * Runs an app on the `<canvas>` element with the given id: creates a
+ * {@link ProteusApp}, calls `setup` with it, then draws and ticks it every
+ * frame and reports pointer input to it.
+ *
+ * @example
+ * ```ts
+ * await mount("canvas", {
+ *   setup(app) {
+ *     const button = app.component({ geometry: buttonGeometry });
+ *     const panel = app.component({ geometry: panelGeometry, visible: false });
+ *     const open = app.transitionChannel();
+ *     button.onClick(() => open.set(panel, button, { duration: 0.4 }));
+ *   },
+ * });
+ * ```
+ *
+ * @throws if the canvas isn't found, the GPU can't be initialized, or
+ * `config` is invalid.
+ */
+export async function mount(canvasId, opts) {
+    await wasmMount(canvasId, (rawApp) => opts.setup(new ProteusApp(rawApp)), opts.update ? (dt) => opts.update?.(dt) : undefined, opts.config ?? null);
+}

package/dist/types.d.ts

@@ -0,0 +1,586 @@
+/** A 2D vector. */
+export interface Vec2 {
+    /** Horizontal: to the right. */
+    x: number;
+    /** Vertical: up in world units. */
+    y: number;
+}
+/** A width and a height, in pixels. */
+export interface Size {
+    /** Width, in pixels. */
+    width: number;
+    /** Height, in pixels. */
+    height: number;
+}
+/** A 3D position. Among top-level components that overlap, higher `z` is drawn on top. */
+export interface Vec3 {
+    /** To the right of the viewport's center. */
+    x: number;
+    /** Up from the viewport's center. */
+    y: number;
+    /** Drawing order: higher is drawn on top. */
+    z: number;
+}
+/**
+ * An RGBA color, each channel from `0` to `1`. Use {@link colorFrom} to convert
+ * from a hex string or color name.
+ */
+export interface Color {
+    /** Red, `0`–`1`. */
+    r: number;
+    /** Green, `0`–`1`. */
+    g: number;
+    /** Blue, `0`–`1`. */
+    b: number;
+    /** Alpha: `0` is transparent, `1` opaque. */
+    a: number;
+}
+/** A component's position, size, shape and color: everything a transition animates. */
+export interface Geometry {
+    /** World units: origin at the viewport center, y up. See {@link topLeftToWorld}. */
+    position: Vec3;
+    /** Width and height, in pixels. */
+    size: Size;
+    /** Radians. See {@link degreesToRadians}. */
+    rotation: number;
+    /** Uniform scale; `1` is the component's natural size. */
+    scale: number;
+    /**
+     * The point of the component that `position` refers to, as fractions of its
+     * size from the top-left: `{ x: 0.5, y: 0.5 }` is the center.
+     */
+    anchor: Vec2;
+    /** Fill color. */
+    color: Color;
+    /** Corner radius in pixels; `0` for square corners. */
+    cornerRadius: number;
+}
+/**
+ * The style a component takes in one interaction state, such as hover.
+ * Declare only the fields that change; the rest come from the component's
+ * declared geometry.
+ */
+export interface StyleOverride {
+    /** Position, in world units. */
+    position?: Vec3;
+    /** Width and height, in pixels. */
+    size?: Size;
+    /** Rotation, in radians. */
+    rotation?: number;
+    /** Uniform scale. */
+    scale?: number;
+    /** The point `position` refers to, as fractions of the size. */
+    anchor?: Vec2;
+    /** Fill color. */
+    color?: Color;
+    /** Corner radius, in pixels. */
+    cornerRadius?: number;
+}
+/**
+ * A single line of text. The host bakes it the next time it renders a frame.
+ * Text wider than an atlas page (2048 pixels by default) is clipped to it,
+ * with a warning.
+ */
+export interface TextSpec {
+    /** The text: a single line. */
+    content: string;
+    /** Font size in pixels. */
+    sizePx: number;
+    /** Defaults to opaque white — set a dark value for light backgrounds. */
+    color?: Color;
+    /** Extra tracking between glyphs, in pixels. Default `0`. */
+    letterSpacingPx?: number;
+}
+/**
+ * An image, as the bytes of a PNG or JPEG file, for example from a `fetch()`
+ * response. The format is detected from the data. The host decodes and bakes
+ * it the next time it renders a frame. An image larger than an atlas page
+ * (2048 pixels by default) is scaled down to fit it, with a warning.
+ */
+export interface ImageSpec {
+    /** The PNG or JPEG file's bytes. */
+    bytes: Uint8Array;
+    /** Scale the image down so its longer side is at most this many pixels. Omit to keep its full size. */
+    maxSide?: number;
+}
+/** A border drawn around a component. */
+export interface Border {
+    /** Pixels. `0` disables the border. */
+    width: number;
+    /** The border's color. An alpha of `0` turns it off. */
+    color: Color;
+    /** Where the border sits: `-1` inside the edge, `0` centered on it, `1` outside. Only `-1` draws correctly today. */
+    offset: number;
+}
+/** A soft glow behind a component. A component shows a glow or a drop shadow, not both; if both are set, the drop shadow is drawn. */
+export interface Glow {
+    /** How far the glow spreads, in pixels. */
+    radius: number;
+    /** The glow's color. An alpha of `0` turns it off. */
+    color: Color;
+    /** Opacity multiplier (effective alpha = `color.a * intensity`). */
+    intensity: number;
+}
+/** A drop shadow behind a component. Takes precedence over {@link Glow} if both are set. */
+export interface DropShadow {
+    /** How far the shadow is offset, in pixels (x right, y up). */
+    offset: Vec2;
+    /** The shadow's color. An alpha of `0` turns it off. */
+    color: Color;
+    /** How soft the shadow's edge is, in pixels. The minimum is `0.5`. */
+    softness: number;
+    /** How much larger than the component the shadow is, in pixels, before softening. */
+    spread: number;
+}
+/**
+ * A description of a component, passed to {@link ProteusApp.component}.
+ *
+ * @example
+ * ```ts
+ * const button = app.component({
+ *   geometry: {
+ *     position: { x: 0, y: 0, z: 0 },
+ *     size: { width: 160, height: 48 },
+ *     rotation: 0,
+ *     scale: 1,
+ *     anchor: { x: 0.5, y: 0.5 },
+ *     color: colorFrom("#3366e6"),
+ *     cornerRadius: 8,
+ *   },
+ *   hover: { scale: 1.05 },
+ *   text: { content: "Open", sizePx: 18 },
+ * });
+ * ```
+ */
+export interface ComponentSpec {
+    /**
+     * The component's declared geometry: what it shows when no interaction
+     * style applies, and where a transition into it ends.
+     */
+    geometry: Geometry;
+    /** The style while the pointer is over the component. */
+    hover?: StyleOverride;
+    /** The style while the component is pressed. */
+    pressed?: StyleOverride;
+    /** The style while the component has focus. */
+    focused?: StyleOverride;
+    /** The style while the component is disabled. See {@link ComponentSpec.startDisabled} and {@link Handle.setDisabled}. */
+    disabled?: StyleOverride;
+    /**
+     * IDs ({@link Handle.id}) of the components to make its children. Their
+     * geometry becomes relative to this component's. To add children later, use
+     * {@link Handle.addChild}.
+     */
+    children?: number[];
+    /**
+     * Bakes the component and its children into a single texture, permanently.
+     * The host renders them once and then destroys the children, so their
+     * handles stop working. Suited to detailed content that never changes.
+     * Baking happens once the host has baked the text and images in them,
+     * usually within a frame or two.
+     *
+     * A component larger than an atlas page (2048 pixels by default) can't be
+     * baked. It is drawn normally instead, with its children, and a warning is
+     * logged.
+     */
+    bake?: boolean;
+    /** A single line of text drawn on the component. */
+    text?: TextSpec;
+    /** An image drawn on the component. */
+    image?: ImageSpec;
+    /** A border around the component. */
+    border?: Border;
+    /** A glow behind the component. */
+    glow?: Glow;
+    /** A drop shadow behind the component. */
+    dropShadow?: DropShadow;
+    /**
+     * Makes the component ignore all input.
+     *
+     * Components are interactive by default, so handlers such as
+     * {@link Handle.onClick} work without an opt-in. A non-interactive component
+     * is not there for input: input goes to whatever is behind it. Use it for
+     * passive elements such as backgrounds and labels. For a control that is
+     * temporarily unavailable, use {@link ComponentSpec.startDisabled}. See
+     * {@link Handle.setInteractive}.
+     */
+    nonInteractive?: boolean;
+    /**
+     * Whether the component starts visible. Defaults to `true`.
+     *
+     * A hidden component is neither drawn nor hit-tested. A transition into it
+     * through {@link TransitionChannel.set} shows it, so a component that should
+     * first appear through a transition can start hidden.
+     */
+    visible?: boolean;
+    /**
+     * The opacity of the component and everything under it, clamped to `0`–`1`.
+     * Defaults to `1`.
+     *
+     * Opacity multiplies down the hierarchy: a child at `0.6` under a parent at
+     * `0.6` is drawn at `0.36`. It only affects drawing, so a component at `0`
+     * still receives pointer input; use {@link ComponentSpec.visible} to take it
+     * out of input as well.
+     */
+    opacity?: number;
+    /**
+     * Creates the component disabled: drawn and blocking input from reaching
+     * what is behind it, but firing no events, and showing its
+     * {@link ComponentSpec.disabled} style.
+     *
+     * Use this for a control that is enabled later with
+     * {@link Handle.setDisabled}. For something that is never a control, such as
+     * a background or a label, use {@link ComponentSpec.nonInteractive} instead,
+     * which lets input through.
+     */
+    startDisabled?: boolean;
+    /** Whether the component accepts input while transitioning. Without this, it doesn't. */
+    transitionInteraction?: TransitionInteractionConfig;
+}
+/**
+ * Engine settings for {@link mount}. Every field is optional; anything omitted
+ * keeps the web default.
+ *
+ * Only settings that have an effect are listed. A misspelled field is
+ * rejected when the app mounts, rather than silently ignored.
+ */
+export interface ProteusConfigOverrides {
+    /** Clear color and presentation. */
+    render?: {
+        /** The color behind everything, and what shows through transparency: RGBA, each `0`–`1`. */
+        clearColor?: [number, number, number, number];
+        /** How frames are synchronized with the display. `"autoVsync"` suits most apps. */
+        presentMode?: "autoVsync" | "autoNoVsync" | "fifo" | "fifoRelaxed" | "immediate" | "mailbox";
+        /** Which GPU to prefer on a device that has more than one. */
+        powerPreference?: "none" | "lowPower" | "highPerformance";
+    };
+    /** GPU memory: atlas and instance-buffer sizes. */
+    memory?: {
+        /** The size and number of pages in the main texture atlas. A size larger than WebGL2 allows, 2048, throws at mount, in every browser. */
+        mainAtlas?: {
+            /**
+             * Width and height of each page, in pixels. No texture can be larger
+             * than a page: larger text is clipped, a larger image is scaled down,
+             * and a larger baked component is drawn unbaked, each with a warning.
+             */
+            pageSize?: number;
+            /** Number of pages. */
+            pageCount?: number;
+        };
+        /** The size of the atlas used for images of components during splits and merges. */
+        transitionAtlasSize?: number;
+        /** The most components that can be drawn in one frame. */
+        maxInstances?: number;
+    };
+    /** Frame timing. */
+    frame?: {
+        /** The longest time step one frame can take, so a tab returning from the background doesn't jump ahead. */
+        dtClampSecs?: number;
+    };
+    /** Image and texture loading. */
+    resources?: {
+        /**
+         * Scale images down so their longer side is at most this many pixels.
+         * `null` keeps full size, up to an atlas page: a larger image is scaled
+         * down to fit the page.
+         */
+        imageMaxSide?: number | null;
+        /** Wait to bake a component's text or image until the component is visible. */
+        lazyLoad?: boolean;
+    };
+    /** Text settings. */
+    text?: {
+        /**
+         * A TTF or OTF font file's bytes, used for all text, for example from a
+         * `fetch()` response. Omit it for the embedded font, Inter Bold. Bytes
+         * that aren't a font make {@link mount} throw, naming `text.font`.
+         */
+        font?: Uint8Array;
+    };
+}
+/** How to add a texture to the atlas. */
+export interface TextureRequest {
+    /**
+     * Scale the texture down so its longer side is at most this many pixels.
+     * Omit to keep its full size; a photo from the network is usually much
+     * larger than it will be drawn.
+     */
+    maxSide?: number;
+    /**
+     * Keep the texture in the atlas for the life of the app, never evicting it.
+     * For textures in constant use, such as animation frames.
+     */
+    eternal?: boolean;
+}
+/** Whether a component accepts input while it is transitioning. Both default to `false`. */
+export interface TransitionInteractionConfig {
+    /** Accept pointer input during a transition. */
+    allowPointer?: boolean;
+    /** Not read yet; reserved for keyboard navigation. */
+    allowNavigation?: boolean;
+}
+/**
+ * A built-in easing curve: how a transition speeds up and slows down.
+ *
+ * - `"linear"`: constant speed.
+ * - `"easeInQuad"`: starts slowly, then speeds up.
+ * - `"easeOutQuad"`: starts quickly, then slows to a stop.
+ * - `"easeInOutQuad"`: starts slowly, speeds up, then slows to a stop. The
+ *   default.
+ * - `"easeOutCubic"`: like `"easeOutQuad"`, with a stronger slowdown at the end.
+ */
+export type EasingName = "linear" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeOutCubic";
+/**
+ * How a transition speeds up and slows down: a built-in curve's name, or a
+ * cubic Bézier curve.
+ *
+ * `{ cubicBezier: [x1, y1, x2, y2] }` takes the same four numbers as CSS's
+ * `cubic-bezier()`, so a curve can be copied from CSS or any easing tool. `x1`
+ * and `x2` are clamped to `0`–`1`; `y1` and `y2` may go outside it, for a curve
+ * that overshoots its target and settles back. Sizes and corner radii never go
+ * below zero, and colors stay within `0`–`1`.
+ *
+ * An unknown name, or a malformed `cubicBezier`, throws when the transition is
+ * requested.
+ *
+ * @example
+ * ```ts
+ * // Overshoots slightly, then settles: CSS's "back out" curve.
+ * handle.animateTo(target, {
+ *   duration: 0.4,
+ *   easing: { cubicBezier: [0.34, 1.56, 0.64, 1] },
+ * });
+ * ```
+ */
+export type Easing = EasingName | {
+    /** The control points, as in CSS's `cubic-bezier(x1, y1, x2, y2)`. */
+    cubicBezier: [number, number, number, number];
+};
+/** How a transition is timed. */
+export interface TransitionConfig {
+    /**
+     * How long the transition takes, in seconds. `0` means instant: the
+     * transition completes on the next frame, after any `delay`. A negative or
+     * `NaN` duration logs a warning and is treated as `0`.
+     */
+    duration: number;
+    /** Seconds to wait before the transition starts. Default `0`. */
+    delay?: number;
+    /** How the transition speeds up and slows down. Default `"easeInOutQuad"`. */
+    easing?: Easing;
+}
+/**
+ * Sets each component's transition config (timing properties) in a split or merge. Called once per target
+ * (or source) with its index and the total; its result replaces the shared
+ * config for that component. The usual use is a stagger:
+ *
+ * ```ts
+ * source.splitTo(targets, config, { kind: "row" },
+ *   (i) => ({ duration: 0.4, delay: i * 0.08, easing: "easeOutCubic" }));
+ * ```
+ *
+ * Called once for each component when the transition is requested. If it
+ * throws, or returns something that isn't a {@link TransitionConfig}, the
+ * call fails with an error naming the index.
+ */
+export type ChildBehavior = (index: number, total: number) => TransitionConfig;
+/**
+ * Which part of an image a component shows; see {@link Handle.cropImage}.
+ * Always measured from the whole image, so changing the crop never compounds
+ * it.
+ */
+export type ImageCrop = 
+/** The whole image: no crop. */
+{
+    /** Selects this crop. */
+    kind: "none";
+}
+/** The largest centered square. */
+ | {
+    /** Selects this crop. */
+    kind: "centeredSquare";
+}
+/**
+ * The largest region with this width-to-height `ratio`, placed by `anchor`:
+ * `{ x: 0.5, y: 0.5 }`, the default, centers it; `{ x: 0, y: 0 }` keeps the
+ * top-left corner.
+ */
+ | {
+    /** Selects this crop. */
+    kind: "aspect";
+    /** Width divided by height, such as `16 / 9`. */
+    ratio: number;
+    /** Where the region sits within the image, each axis from `0` to `1`. */
+    anchor?: Vec2;
+}
+/** An explicit region, in fractions of the image, clamped to it. */
+ | {
+    /** Selects this crop. */
+    kind: "rect";
+    /** Left edge, from `0` to `1`. */
+    x: number;
+    /** Top edge, from `0` to `1`. */
+    y: number;
+    /** Width, from `0` to `1`. */
+    width: number;
+    /** Height, from `0` to `1`. */
+    height: number;
+};
+/**
+ * How a split ({@link Handle.splitTo}) turns one component into several.
+ */
+export type SplitStrategy = 
+/**
+ * Each target moves from the source's position to its own, showing its own
+ * content. **Experimental:** not yet used by the reference demo.
+ *
+ * Use it when you design each target yourself and want to control where and
+ * when each one moves; {@link ChildBehavior} sets their timing. Completion is
+ * reported on each target, not on the source; see
+ * {@link Handle.onTransitionComplete}.
+ */
+{
+    /** Selects this strategy. */
+    kind: "perTarget";
+}
+/**
+ * Bakes the source, with its children, into an image, then moves one slice
+ * of that image to each target. Use it when the pieces should read as parts
+ * of what was there. The slices are strips side by side, left to right.
+ */
+ | {
+    /** Selects this strategy. */
+    kind: "row";
+}
+/** Like `"row"`, but the strips are stacked top to bottom. */
+ | {
+    /** Selects this strategy. */
+    kind: "column";
+}
+/**
+ * Like `"row"`, but the slices are a grid of `cols` by `rows`, filled row by
+ * row from the top-left. Throws if the grid has fewer cells than targets.
+ */
+ | {
+    /** Selects this strategy. */
+    kind: "grid";
+    /** Columns in the grid. */
+    cols: number;
+    /** Rows in the grid. */
+    rows: number;
+};
+/**
+ * How a merge ({@link Handle.mergeFrom}) divides the destination among its
+ * sources: which part of the destination each source moves toward.
+ */
+export type MergeLayout = 
+/** Strips side by side, left to right, one per source in order. */
+{
+    /** Selects this layout. */
+    kind: "row";
+}
+/** Strips stacked top to bottom, one per source in order. */
+ | {
+    /** Selects this layout. */
+    kind: "column";
+}
+/**
+ * A grid of `cols` by `rows`, filled row by row from the top-left. Use it
+ * when the sources are themselves laid out in a grid. Throws if the grid
+ * has fewer cells than sources.
+ */
+ | {
+    /** Selects this layout. */
+    kind: "grid";
+    /** Columns in the grid. */
+    cols: number;
+    /** Rows in the grid. */
+    rows: number;
+};
+/**
+ * The interaction style a component is showing. More states may be added,
+ * such as one for keyboard focus, so a `switch` over it should keep a
+ * `default` case.
+ */
+export type InteractionState = "default" | "hover" | "pressed" | "focused" | "disabled";
+/** A snapshot of a transition in progress. */
+export interface TransitionSnapshot {
+    /** The geometry the transition started from. */
+    base: Geometry;
+    /** The geometry the transition ends at. */
+    target: Geometry;
+    /** The current geometry, the same as {@link ComponentData.geometry}. */
+    current: Geometry;
+    /**
+     * Progress through the transition, from `0` to `1`, before easing. Useful for
+     * keeping other animation in step with the transition.
+     */
+    progress: number;
+}
+/**
+ * A snapshot of a component's state, from {@link ProteusApp.get} or
+ * {@link Handle.get}. It does not update afterwards.
+ */
+export interface ComponentData {
+    /**
+     * The component's current geometry: its declared geometry when idle, or its
+     * in-progress geometry while transitioning.
+     */
+    geometry: Geometry;
+    /**
+     * The interaction style currently applied.
+     *
+     * Stays `"default"` for a component that declared no interaction styles,
+     * even while it is disabled, and updates one tick after the change. To check
+     * whether a component is disabled, use {@link ComponentData.disabled}.
+     */
+    state: InteractionState;
+    /**
+     * Whether the component is disabled. Unlike {@link ComponentData.state}, this
+     * changes as soon as {@link Handle.setDisabled} is called, and is correct for
+     * every component, including one with no interaction styles.
+     */
+    disabled: boolean;
+    /** Whether the component is visible. A component inside a hidden parent is not. Updated each tick. */
+    visible: boolean;
+    /** The opacity it is drawn with: its own opacity multiplied by its parents'. Updated each tick. */
+    opacity: number;
+    /** IDs of the component's direct children. Get a handle with {@link ProteusApp.handleFromId}. */
+    children: number[];
+    /**
+     * The transition in progress, or `undefined` when idle. A change of
+     * interaction style, such as a hover effect, isn't reported here.
+     */
+    transition?: TransitionSnapshot;
+}
+/**
+ * Why a {@link TransitionChannel.set} request couldn't run:
+ *
+ * - `"channelNotFound"`: the channel has been destroyed.
+ * - `"entityNotFound"`: `to` or `from` has been destroyed.
+ * - `"alreadyTransitioning"`: `to` is transitioning and the request wasn't
+ *   `interruptible`.
+ * - `"entityNotVisible"`: `from` is hidden, so there's nothing to transition
+ *   from.
+ */
+export type DropReason = "channelNotFound" | "entityNotFound" | "alreadyTransitioning" | "entityNotVisible";
+/** A {@link TransitionChannel.set} request that couldn't run, passed to {@link TransitionChannel.onDropped}. */
+export interface TransitionDropped {
+    /** ID of the request's `to` component. */
+    to: number;
+    /** ID of the request's `from` component. */
+    from: number;
+    /** Why the request couldn't run. */
+    reason: DropReason;
+}
+/** What a texture holds. `"animated"` is reserved and not used yet. */
+export type TextureKind = "static" | "video" | "animated";
+/** A texture's kind and size, from {@link TextureHandle.state}. */
+export interface TextureState {
+    /** What the texture holds. */
+    kind: TextureKind;
+    /** Width in pixels. */
+    width: number;
+    /** Height in pixels. */
+    height: number;
+}

package/dist/types.js

@@ -0,0 +1,9 @@
+// The data types the SDK takes and returns. Their field names must match the
+// Rust types in `../../src/dto.rs`, since these objects cross into the wasm
+// module as they are.
+//
+// Units are radians, colors are RGBA with each channel from 0 to 1, and
+// positions are in world units (origin at the viewport center, y up). The
+// helpers in `convert.ts` convert from degrees, hex colors and page
+// coordinates.
+export {};