effect-motion 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "effect-motion",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Deterministic, frame-exact motion graphics in code, composed with Effect",
   "type": "module",
   "license": "MIT",
@@ -23,6 +23,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
     }
   },
   "files": [
@@ -32,15 +36,21 @@
     "access": "public"
   },
   "peerDependencies": {
-    "effect": ">=4.0.0-beta.94"
+    "effect": ">=4.0.0-beta.98"
   },
   "devDependencies": {
+    "@types/chroma-js": "^3.1.2",
     "@types/node": "^26.1.1",
-    "effect": "4.0.0-beta.94",
+    "effect": "4.0.0-beta.98",
     "happy-dom": "^20.10.6",
     "tsx": "^4.23.0",
     "typescript": "^7.0.2",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "@effect-motion/thorvg": "0.1.0"
+  },
+  "dependencies": {
+    "@effect/platform-node": "4.0.0-beta.98",
+    "chroma-js": "^3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",

package/dist/particles/render.d.ts

@@ -1,13 +0,0 @@
-import type * as Renderer from "../Renderer";
-import type { SvgNode } from "../svg/SvgNode";
-import type { ParticleField } from "./ParticleField";
-/**
- * Render a ParticleField: one <g> whose children are one <circle> per LIVE
- * particle, each sized/faded by the over-life curves. Dead slots emit
- * nothing. This is where the O(1)-simulation buffer expands back into N
- * SVG nodes.
- * ponytail: N SVG nodes is the RENDERING ceiling (the DOM/string cost), not
- * the simulation ceiling. A batched/instanced sink is the upgrade path if
- * node count becomes the wall.
- */
-export declare const particleField: Renderer.RenderFunction<SvgNode, typeof ParticleField>;

package/dist/particles/render.js

@@ -1,33 +0,0 @@
-import * as Effect from "effect/Effect";
-import { renderOpacity, renderSize } from "./overLife";
-/**
- * Render a ParticleField: one <g> whose children are one <circle> per LIVE
- * particle, each sized/faded by the over-life curves. Dead slots emit
- * nothing. This is where the O(1)-simulation buffer expands back into N
- * SVG nodes.
- * ponytail: N SVG nodes is the RENDERING ceiling (the DOM/string cost), not
- * the simulation ceiling. A batched/instanced sink is the upgrade path if
- * node count becomes the wall.
- */
-export const particleField = ({ data }) => Effect.succeed({
-    tag: "g",
-    props: data.x !== 0 || data.y !== 0
-        ? { transform: `translate(${data.x} ${data.y})` }
-        : {},
-    children: data.buffer
-        .filter((p) => p.alive)
-        .map((p) => {
-        const r = renderSize(p, data.sizeOverLife);
-        const opacity = renderOpacity(p, data.opacityOverLife);
-        return {
-            tag: "circle",
-            props: {
-                cx: p.x,
-                cy: p.y,
-                r,
-                fill: p.color,
-                ...(opacity !== 1 ? { opacity } : {}),
-            },
-        };
-    }),
-});

package/dist/shapes/Layer.d.ts

@@ -1,9 +0,0 @@
-import * as Schema from "effect/Schema";
-import * as Entity from "../Entity";
-export declare const Layer: Entity.Entity<"shapes/Layer", Schema.Struct<{
-    depth: Schema.withConstructorDefault<Schema.Number>;
-    children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-}>, {}, {
-    readonly depth?: number;
-    readonly children?: readonly string[];
-}>;

package/dist/shapes/Layer.js

@@ -1,23 +0,0 @@
-import * as Effect from "effect/Effect";
-import * as Schema from "effect/Schema";
-import * as Entity from "../Entity";
-import * as Shape2D from "./Shape2D";
-// A parallax layer: a container that holds children at a camera `depth`, and
-// nothing else. Unlike Group it carries NO position or opacity of its own —
-// `depth` is the only field, so it can never collide with the transform
-// semantics a Group is expected to grow (position now, rotation/scale later),
-// and a future guard can restrict Layers without touching Group.
-//
-// `depth` is the fraction of the camera this layer feels (pan AND zoom): 1 =
-// full camera (default), 0 = pinned to the screen (a HUD), between = parallax.
-// The sink reads it off each top-level layer (see svg/camera.ts).
-//
-// ponytail: a Layer nested inside another Layer is undefined behavior — the
-// point of a dedicated entity is to leave room for a rule here, but the
-// semantics ("a depth inside a depth"?) aren't decided yet, so no guard ships.
-// Add one in Runner.instantiate (dispatch on entity.name === Layer.name) once
-// nesting semantics are settled.
-export const Layer = Entity.make("shapes/Layer", {
-    depth: Shape2D.defaultedNumber(1),
-    children: Schema.Array(Schema.String).pipe(Schema.withConstructorDefault(Effect.sync(() => []))),
-});

package/dist/shapes/index.d.ts

@@ -1,10 +0,0 @@
-export { Circle } from "./Circle";
-export { Ellipse } from "./Ellipse";
-export * from "./Group";
-export { Layer } from "./Layer";
-export { Line } from "./Line";
-export { Path } from "./Path";
-export { Rect } from "./Rect";
-export * as Shape2D from "./Shape2D";
-export { Square } from "./Square";
-export { Text } from "./Text";

package/dist/shapes/index.js

@@ -1,10 +0,0 @@
-export { Circle } from "./Circle";
-export { Ellipse } from "./Ellipse";
-export * from "./Group";
-export { Layer } from "./Layer";
-export { Line } from "./Line";
-export { Path } from "./Path";
-export { Rect } from "./Rect";
-export * as Shape2D from "./Shape2D";
-export { Square } from "./Square";
-export { Text } from "./Text";

package/dist/svg/SvgDomRenderer.d.ts

@@ -1,28 +0,0 @@
-import * as Effect from "effect/Effect";
-import * as Renderer from "../Renderer";
-import { type SvgNode } from "./SvgNode";
-export interface SvgDomConfig {
-    readonly target: HTMLElement;
-    /** viewport size — defaults to the frame's own width/height metadata */
-    readonly width?: number;
-    readonly height?: number;
-}
-/**
- * Materializes a frame into `target` as live DOM.
- *
- * ponytail: clear-and-rebuild per frame; upgrade to keyed reconciliation
- * (instance ids are stable keys) inside this sink if it ever gets slow.
- */
-export declare const SvgDomRenderer: {
-    Context: import("effect/Context").Service<{
-        render: <const Entities extends import("../Entity").AnyEntity>(frame: import("../Scene").Frame<Entities>, config: SvgDomConfig) => Effect.Effect<void, never, Entities extends import("../Entity").AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgDomRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-    }, {
-        render: <const Entities extends import("../Entity").AnyEntity>(frame: import("../Scene").Frame<Entities>, config: SvgDomConfig) => Effect.Effect<void, never, Entities extends import("../Entity").AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgDomRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-    }>;
-    layer: import("effect/Layer").Layer<{
-        render: <const Entities extends import("../Entity").AnyEntity>(frame: import("../Scene").Frame<Entities>, config: SvgDomConfig) => Effect.Effect<void, never, Entities extends import("../Entity").AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgDomRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-    }, never, never>;
-    makeEntityRendererContext: <const Ent extends import("../Entity").AnyEntity, E = never, R = never>(entity: Ent) => import("effect/Context").Service<Renderer.EntityRenderer<`SvgDomRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>, Renderer.EntityRenderer<`SvgDomRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>>;
-    makeEntityRendererService: <const Ent extends import("../Entity").AnyEntity, E = never, R = never>(entity: Ent, render: Renderer.RenderFunction<SvgNode, Ent, E, R>) => Renderer.EntityRenderer<`SvgDomRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>;
-    makeEntityRendererLayer: <const Ent extends import("../Entity").AnyEntity, E = never, R = never>(entity: Ent, render: Renderer.RenderFunction<SvgNode, Ent, E, R>) => import("effect/Layer").Layer<Renderer.EntityRenderer<`SvgDomRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>, never, never>;
-};

package/dist/svg/SvgDomRenderer.js

@@ -1,50 +0,0 @@
-import * as Effect from "effect/Effect";
-import * as Renderer from "../Renderer";
-import { depthOf, layerTransform, wrapLayer } from "./camera";
-import { SVG_NS } from "./SvgNode";
-const createSvgElement = (doc, node) => {
-    // namespace is sink-owned: entity renderers never see it
-    const el = doc.createElementNS(SVG_NS, node.tag);
-    for (const [key, value] of Object.entries(node.props)) {
-        el.setAttribute(key, String(value));
-    }
-    if (typeof node.children === "string") {
-        el.textContent = node.children;
-    }
-    else if (node.children !== undefined) {
-        for (const child of node.children) {
-            el.append(createSvgElement(doc, child));
-        }
-    }
-    return el;
-};
-/**
- * Materializes a frame into `target` as live DOM.
- *
- * ponytail: clear-and-rebuild per frame; upgrade to keyed reconciliation
- * (instance ids are stable keys) inside this sink if it ever gets slow.
- */
-export const SvgDomRenderer = Renderer.make()("SvgDomRenderer", {
-    render: (entities, config, meta) => Effect.gen(function* () {
-        const doc = config.target.ownerDocument;
-        const width = config.width ?? meta.width;
-        const height = config.height ?? meta.height;
-        const root = doc.createElementNS(SVG_NS, "svg");
-        root.setAttribute("width", String(width));
-        root.setAttribute("height", String(height));
-        root.append(createSvgElement(doc, {
-            tag: "rect",
-            props: {
-                width: "100%",
-                height: "100%",
-                fill: meta.backgroundColor,
-            },
-        }));
-        // each top-level layer gets the camera scaled by its own depth
-        for (const { render, entry } of entities) {
-            const transform = layerTransform(meta.camera, depthOf(entry.data), width, height);
-            root.append(createSvgElement(doc, wrapLayer(yield* render, transform)));
-        }
-        config.target.replaceChildren(root);
-    }),
-});

package/dist/svg/SvgNode.d.ts

@@ -1,13 +0,0 @@
-/**
- * Serialized SVG node — the data contract between entity renderers and
- * sinks. Entity renderers return descriptions; sinks own materialization
- * (string folding, DOM creation, namespaces).
- */
-export interface SvgNode {
-    readonly tag: string;
-    readonly props: Record<string, string | number>;
-    /** nested nodes, or a string for text content */
-    readonly children?: ReadonlyArray<SvgNode> | string;
-}
-export declare const SVG_NS = "http://www.w3.org/2000/svg";
-export declare const vnodeToString: (node: SvgNode) => string;

package/dist/svg/SvgNode.js

@@ -1,18 +0,0 @@
-export const SVG_NS = "http://www.w3.org/2000/svg";
-const escapeAttr = (value) => String(value)
-    .replaceAll("&", "&")
-    .replaceAll('"', """)
-    .replaceAll("<", "&lt;");
-const escapeText = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;");
-export const vnodeToString = (node) => {
-    const props = Object.entries(node.props)
-        .map(([key, value]) => ` ${key}="${escapeAttr(value)}"`)
-        .join("");
-    if (node.children === undefined) {
-        return `<${node.tag}${props} />`;
-    }
-    const children = typeof node.children === "string"
-        ? escapeText(node.children)
-        : node.children.map(vnodeToString).join("");
-    return `<${node.tag}${props}>${children}</${node.tag}>`;
-};

package/dist/svg/SvgRenderer.d.ts

@@ -1,22 +0,0 @@
-import * as Effect from "effect/Effect";
-import * as Renderer from "../Renderer";
-import { type SvgNode } from "./SvgNode";
-export interface SvgConfig {
-    /** viewport size — defaults to the frame's own width/height metadata */
-    readonly width?: number;
-    readonly height?: number;
-}
-/** Folds a frame into a single self-contained SVG document string. */
-export declare const SvgRenderer: {
-    Context: import("effect/Context").Service<{
-        render: <const Entities extends import("../Entity").AnyEntity>(frame: import("../Scene").Frame<Entities>, config: SvgConfig) => Effect.Effect<string, never, Entities extends import("../Entity").AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-    }, {
-        render: <const Entities extends import("../Entity").AnyEntity>(frame: import("../Scene").Frame<Entities>, config: SvgConfig) => Effect.Effect<string, never, Entities extends import("../Entity").AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-    }>;
-    layer: import("effect/Layer").Layer<{
-        render: <const Entities extends import("../Entity").AnyEntity>(frame: import("../Scene").Frame<Entities>, config: SvgConfig) => Effect.Effect<string, never, Entities extends import("../Entity").AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-    }, never, never>;
-    makeEntityRendererContext: <const Ent extends import("../Entity").AnyEntity, E = never, R = never>(entity: Ent) => import("effect/Context").Service<Renderer.EntityRenderer<`SvgRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>, Renderer.EntityRenderer<`SvgRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>>;
-    makeEntityRendererService: <const Ent extends import("../Entity").AnyEntity, E = never, R = never>(entity: Ent, render: Renderer.RenderFunction<SvgNode, Ent, E, R>) => Renderer.EntityRenderer<`SvgRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>;
-    makeEntityRendererLayer: <const Ent extends import("../Entity").AnyEntity, E = never, R = never>(entity: Ent, render: Renderer.RenderFunction<SvgNode, Ent, E, R>) => import("effect/Layer").Layer<Renderer.EntityRenderer<`SvgRenderer/${Ent["name"]}`, SvgNode, Ent, E, R>, never, never>;
-};

package/dist/svg/SvgRenderer.js

@@ -1,20 +0,0 @@
-import * as Effect from "effect/Effect";
-import * as Renderer from "../Renderer";
-import { depthOf, layerTransform, wrapLayer } from "./camera";
-import { SVG_NS, vnodeToString } from "./SvgNode";
-/** Folds a frame into a single self-contained SVG document string. */
-export const SvgRenderer = Renderer.make()("SvgRenderer", {
-    render: (entities, config, meta) => Effect.gen(function* () {
-        const width = config.width ?? meta.width;
-        const height = config.height ?? meta.height;
-        let svg = `<svg xmlns="${SVG_NS}" width="${width}" height="${height}">`;
-        // a rect, not a style attr — survives rasterizers that ignore CSS
-        svg += `<rect width="100%" height="100%" fill="${meta.backgroundColor}"/>`;
-        // each top-level layer gets the camera scaled by its own depth
-        for (const { render, entry } of entities) {
-            const transform = layerTransform(meta.camera, depthOf(entry.data), width, height);
-            svg += vnodeToString(wrapLayer(yield* render, transform));
-        }
-        return `${svg}</svg>`;
-    }),
-});

package/dist/svg/camera.d.ts

@@ -1,21 +0,0 @@
-import type { FrameMeta } from "../Renderer";
-import type { SvgNode } from "./SvgNode";
-/**
- * The camera as an SVG transform for one top-level layer, scaled by that
- * layer's `depth` (pan AND zoom together). `depth` lerps the layer's
- * transform from identity toward the full camera:
- *
- *   depth 1 → full camera            depth 0 → identity (screen-fixed HUD)
- *   depth d → 1 + (zoom-1)*d zoom, d*pan translation
- *
- * Zoom is about the viewport center so it reads as "zoom into the middle of
- * the shot", not the world origin. Returns "" when the layer transform is
- * identity, so identity cameras add no attribute (output byte-identical to
- * before the camera existed).
- */
-export declare const layerTransform: (camera: FrameMeta["camera"], depth: number, width: number, height: number) => string;
-/** `depth` for a top-level layer's data (a Layer carries it; others = 1). */
-export declare const depthOf: (data: unknown) => number;
-/** Wrap a rendered layer node in a camera `<g>`, or return it unwrapped
- * when the transform is identity (keeps the common case flat). */
-export declare const wrapLayer: (node: SvgNode, transform: string) => SvgNode;

package/dist/svg/camera.js

@@ -1,43 +0,0 @@
-/**
- * The camera as an SVG transform for one top-level layer, scaled by that
- * layer's `depth` (pan AND zoom together). `depth` lerps the layer's
- * transform from identity toward the full camera:
- *
- *   depth 1 → full camera            depth 0 → identity (screen-fixed HUD)
- *   depth d → 1 + (zoom-1)*d zoom, d*pan translation
- *
- * Zoom is about the viewport center so it reads as "zoom into the middle of
- * the shot", not the world origin. Returns "" when the layer transform is
- * identity, so identity cameras add no attribute (output byte-identical to
- * before the camera existed).
- */
-export const layerTransform = (camera, depth, width, height) => {
-    const layerZoom = 1 + (camera.zoom - 1) * depth;
-    const panX = camera.x * depth;
-    const panY = camera.y * depth;
-    if (layerZoom === 1 && panX === 0 && panY === 0) {
-        return "";
-    }
-    const cx = width / 2;
-    const cy = height / 2;
-    // pan first, then zoom about the viewport center: reads right-to-left as
-    // translate(-pan) → recenter → scale → uncenter applied to the layer
-    const parts = [];
-    if (layerZoom !== 1) {
-        parts.push(`translate(${cx} ${cy})`, `scale(${layerZoom})`, `translate(${-cx} ${-cy})`);
-    }
-    if (panX !== 0 || panY !== 0) {
-        parts.push(`translate(${-panX} ${-panY})`);
-    }
-    return parts.join(" ");
-};
-/** `depth` for a top-level layer's data (a Layer carries it; others = 1). */
-export const depthOf = (data) => {
-    const depth = data?.depth;
-    return typeof depth === "number" ? depth : 1;
-};
-/** Wrap a rendered layer node in a camera `<g>`, or return it unwrapped
- * when the transform is identity (keeps the common case flat). */
-export const wrapLayer = (node, transform) => transform === ""
-    ? node
-    : { tag: "g", props: { transform }, children: [node] };

package/dist/svg/index.d.ts

@@ -1,6 +0,0 @@
-export { entityRendererLayer, layer } from "./layers";
-export { type SvgDomConfig, SvgDomRenderer } from "./SvgDomRenderer";
-export { SVG_NS, type SvgNode, vnodeToString } from "./SvgNode";
-export { type SvgConfig, SvgRenderer } from "./SvgRenderer";
-export * as shapes from "./shapes";
-export { shapesLayer } from "./shapes";

package/dist/svg/index.js

@@ -1,6 +0,0 @@
-export { entityRendererLayer, layer } from "./layers";
-export { SvgDomRenderer } from "./SvgDomRenderer";
-export { SVG_NS, vnodeToString } from "./SvgNode";
-export { SvgRenderer } from "./SvgRenderer";
-export * as shapes from "./shapes";
-export { shapesLayer } from "./shapes";

package/dist/svg/layers.d.ts

@@ -1,18 +0,0 @@
-import { Layer } from "effect";
-import type * as Entity from "../Entity";
-import type * as Renderer from "../Renderer";
-import type { SvgNode } from "./SvgNode";
-/**
- * Register one SvgNode render function for an entity with BOTH sinks.
- *
- * Entity renderer context keys are per renderer family
- * (`SvgRenderer/<name>` and `SvgDomRenderer/<name>`), so sharing a render
- * function across sinks means registering it twice — this does both.
- */
-export declare const entityRendererLayer: <const Ent extends Entity.AnyEntity>(entity: Ent, render: Renderer.RenderFunction<SvgNode, Ent>) => Layer.Layer<Renderer.EntityRenderer<`SvgDomRenderer/${Ent["name"]}`, SvgNode, Ent, never, never> | Renderer.EntityRenderer<`SvgRenderer/${Ent["name"]}`, SvgNode, Ent, never, never>, never, never>;
-/** Both sinks' frame renderers, ready to provide. */
-export declare const layer: Layer.Layer<{
-    render: <const Entities extends Entity.AnyEntity>(frame: import("../Scene").Frame<Entities>, config: import("./SvgRenderer").SvgConfig) => import("effect/Effect").Effect<string, never, Entities extends Entity.AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-} | {
-    render: <const Entities extends Entity.AnyEntity>(frame: import("../Scene").Frame<Entities>, config: import("./SvgDomRenderer").SvgDomConfig) => import("effect/Effect").Effect<void, never, Entities extends Entity.AnyEntity ? { [K in Entities as K["name"]]: Renderer.EntityRenderer<`SvgDomRenderer/${K["name"]}`, SvgNode, K, never, never>; }[Entities["name"]] : never>;
-}, never, never>;

package/dist/svg/layers.js

@@ -1,13 +0,0 @@
-import { Layer } from "effect";
-import { SvgDomRenderer } from "./SvgDomRenderer";
-import { SvgRenderer } from "./SvgRenderer";
-/**
- * Register one SvgNode render function for an entity with BOTH sinks.
- *
- * Entity renderer context keys are per renderer family
- * (`SvgRenderer/<name>` and `SvgDomRenderer/<name>`), so sharing a render
- * function across sinks means registering it twice — this does both.
- */
-export const entityRendererLayer = (entity, render) => Layer.mergeAll(SvgRenderer.makeEntityRendererLayer(entity, render), SvgDomRenderer.makeEntityRendererLayer(entity, render));
-/** Both sinks' frame renderers, ready to provide. */
-export const layer = Layer.mergeAll(SvgRenderer.layer, SvgDomRenderer.layer);