@cruxgarden/plasma-ui 0.1.1

package/dist/moods.d.ts

@@ -0,0 +1,40 @@
+export interface Mood {
+    /** Background colors: deep base, mid tone, accent. Hex strings. */
+    colors: [string, string, string];
+    /** How far apart (px) surfaces start to fuse. */
+    blend: number;
+    /** Spring used for drag release, snapping, and controlled offsets. */
+    spring: {
+        stiffness: number;
+        damping: number;
+    };
+}
+export declare const moods: {
+    tidal: {
+        colors: [string, string, string];
+        blend: number;
+        spring: {
+            stiffness: number;
+            damping: number;
+        };
+    };
+    aurora: {
+        colors: [string, string, string];
+        blend: number;
+        spring: {
+            stiffness: number;
+            damping: number;
+        };
+    };
+    ember: {
+        colors: [string, string, string];
+        blend: number;
+        spring: {
+            stiffness: number;
+            damping: number;
+        };
+    };
+};
+export type MoodName = keyof typeof moods;
+export declare function resolveMood(mood: MoodName | Mood): Mood;
+export declare function hexToRgb(hex: string): [number, number, number];

package/dist/renderer.d.ts

@@ -0,0 +1,143 @@
+import { Box } from "./snap";
+export interface RendererSettings {
+    colors: [string, string, string];
+    blend: number;
+    refraction: number;
+    dispersion: number;
+    rim: number;
+    smoothness: number;
+    pointerDrop: boolean;
+    ambientDrops: boolean;
+    theme: "auto" | "light" | "dark";
+    quality: number;
+    reducedMotion: boolean;
+    /** Rim color: "iridescent", "tint" (each surface's tint), or a hex color. */
+    rimColor: string;
+    /** Rim width multiplier. */
+    rimWidth: number;
+    /** Pointer-facing highlight strength. */
+    highlight: number;
+    /** Thin edge line strength. */
+    edgeLine: number;
+    /** 0 = watery and bouncy, 1 = thick and slow. */
+    viscosity: number;
+    /** How far the surface trails behind moving panels. 0 = no trailing. */
+    stretch: number;
+    /** Slow ripple along the outline. 0 = still edges. */
+    flow: number;
+    /** Default glass tint (hex). */
+    tint: string;
+    /** Default tint strength, 0 (clear) to 1 (solid color). */
+    opacity: number;
+    /** Default translucency, 0 (clear) to 1 (frosted). */
+    frost: number;
+    /** Default elevation, 0 (flat, no shadow) to 1 (floating high). */
+    elevation: number;
+    /** Maximum visible surfaces, compiled into the shaders (fixed at creation). */
+    maxSurfaces: number;
+    /** Background: CSS color, image URL, or a live img/canvas/video source (null for the procedural mood field). */
+    background: BackgroundSource | null;
+}
+/** Anything the background can be: a CSS color string, an image URL, or an element to sample (canvas and video update live). */
+export type BackgroundSource = string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap;
+export interface ShapeOptions {
+    radius: number;
+    lean: number;
+    /** Per-shape tint override (hex). */
+    tint?: string | null;
+    /** Per-shape tint strength override. */
+    opacity?: number | null;
+    /** Per-shape frost override. */
+    frost?: number | null;
+    /** Per-shape elevation override. */
+    elevation?: number | null;
+    /** When false, this surface never blends, bridges, or joins with others. Default true. */
+    fuse?: boolean;
+}
+/** Handle returned by `register`, used by <Plasma>. */
+export interface JoinedSides {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+}
+export interface ShapeHandle {
+    id: number;
+    update(o: Partial<ShapeOptions>): void;
+    setLayoutBox(fn: (() => Box) | null): void;
+    setDragging(on: boolean): void;
+    leanOffset(): {
+        x: number;
+        y: number;
+    };
+    isJoined(): boolean;
+    remove(): void;
+}
+export declare class PlasmaRenderer {
+    private gl;
+    private canvas;
+    private progs;
+    private rtA;
+    private rtB;
+    private rtC;
+    private rtT;
+    private rtFr;
+    private rtBg;
+    private rtBgM;
+    private rtBgH;
+    private mrtFb;
+    private imgTex;
+    private imgRes;
+    private imgSrc;
+    private bgColor;
+    private srcEl;
+    private floatOK;
+    private recs;
+    private nextId;
+    private raf;
+    private last;
+    private time;
+    private dpr;
+    private energy;
+    private mouse;
+    private pulses;
+    private pulseIdx;
+    private colors;
+    private colorTarget;
+    private blend;
+    private lightQuery;
+    private max;
+    private P;
+    private R;
+    private F;
+    private T;
+    private FR;
+    private EL;
+    private SOLO;
+    private tintCache;
+    private RP;
+    settings: RendererSettings;
+    /** Returns null when WebGL2 is unavailable. */
+    static create(canvas: HTMLCanvasElement, settings: RendererSettings): PlasmaRenderer | null;
+    private constructor();
+    private loadBackground;
+    configure(s: RendererSettings, immediate?: boolean): void;
+    register(el: HTMLElement, o: ShapeOptions, onJoin?: (j: boolean) => void, onSides?: (sides: JoinedSides) => void): ShapeHandle;
+    /** Layout boxes of all shapes (lean removed; animating draggables report their destination). */
+    layoutBoxes(excludeId?: number, fusingOnly?: boolean): Box[];
+    private layoutBoxOf;
+    /** Send a pulse through the material from a viewport point. */
+    pulse(x: number, y: number, strength?: number): void;
+    /** Raise the material's energy (brightens contours and color); it decays on its own. */
+    bump(e: number): void;
+    destroy(): void;
+    private onPointer;
+    private onLeave;
+    private resize;
+    private isLight;
+    private frame;
+    private draw;
+    private rgb;
+    private program;
+    private target;
+}

package/dist/shaders.d.ts

@@ -0,0 +1,14 @@
+/** Default maximum glass shapes drawn at once (offscreen shapes are culled first). */
+export declare const DEFAULT_MAX_SHAPES = 16;
+/** Maximum concurrent pulses. */
+export declare const MAX_PULSES = 4;
+export declare const vert = "#version 300 es\nin vec2 p; void main(){ gl_Position = vec4(p, 0., 1.); }";
+export interface ShaderSet {
+    maskFrag: string;
+    tintFrag: string;
+    blurFrag: string;
+    bgFrag: string;
+    compFrag: string;
+}
+/** Build the shader set for a given surface budget (compiled into the programs). */
+export declare function makeShaders(MAX_SHAPES: number): ShaderSet;

package/dist/snap.d.ts

@@ -0,0 +1,27 @@
+export interface Box {
+    l: number;
+    t: number;
+    w: number;
+    h: number;
+}
+export interface SnapOptions {
+    /** Grid cell size in px. 0 disables the grid. */
+    grid: number;
+    /** Distance (px) at which an edge latches onto a neighbor's edge. */
+    magnet: number;
+    /** Area the box must stay inside; also the grid origin. */
+    bounds: Box;
+    /** Inset from the bounds edges. */
+    inset?: number;
+}
+/**
+ * Snap a proposed box position. Edges first latch onto nearby panels
+ * (aligned or butted), otherwise fall to the grid. Overlaps are pushed out
+ * so the result sits flush against its neighbor.
+ */
+export declare function snapBox(b: Box, others: Box[], o: SnapOptions): {
+    l: number;
+    t: number;
+};
+/** Gap between two boxes (negative when overlapping). */
+export declare function boxGap(a: Box, b: Box): number;

package/dist/spring.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Minimal animated value + spring, replacing the previous Motion dependency.
+ * A SpringValue tracks velocity from recent set() calls (so a pointer drag
+ * carries momentum into the spring), and animateSpring() integrates a damped
+ * spring on requestAnimationFrame.
+ */
+export interface SpringValue {
+    get(): number;
+    set(v: number): void;
+    /** Subscribe to changes; returns an unsubscribe function. */
+    on(fn: (v: number) => void): () => void;
+    /** Velocity in px/s, estimated from recent set() calls. */
+    getVelocity(): number;
+}
+export interface SpringHandle {
+    stop(): void;
+}
+export declare function springValue(initial: number): SpringValue;
+export interface SpringOptions {
+    stiffness: number;
+    damping: number;
+    velocity?: number;
+}
+/** Animate a SpringValue to a target with a damped spring. */
+export declare function animateSpring(value: SpringValue, to: number, o: SpringOptions): SpringHandle;

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@cruxgarden/plasma-ui",
+  "version": "0.1.1",
+  "description": "A liquid glass workspace for React: panels share one WebGL material - they fuse on contact, refract, and snap to a grid.",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "esbuild src/index.ts --bundle --format=esm --jsx=automatic --target=es2020 --external:react --external:react-dom --outfile=dist/index.js && tsc",
+    "build:site": "node site/build.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test tests/*.test.mjs",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build",
+    "format": "prettier --write .",
+    "verify": "npm run typecheck && npm test && npm run build",
+    "publish:patch": "npm version patch && npm publish && git push && git push --tags",
+    "publish:minor": "npm version minor && npm publish && git push && git push --tags",
+    "publish:major": "npm version major && npm publish && git push && git push --tags",
+    "build:example": "node examples/workspace/build.mjs",
+    "build:pages": "node scripts/build-pages.mjs"
+  },
+  "author": "The Keeper",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "esbuild": "^0.25.12",
+    "prettier": "^3.5.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.9.3"
+  },
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "keywords": [
+    "crux",
+    "cruxgarden",
+    "react",
+    "webgl",
+    "glass",
+    "ui",
+    "animation"
+  ],
+  "homepage": "https://github.com/CruxGarden/plasma-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CruxGarden/plasma-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CruxGarden/plasma-ui/issues"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}