effect-motion 0.2.0

package/dist/shapes/Rect.d.ts

@@ -0,0 +1,41 @@
+import * as Entity from "../Entity";
+export declare const Rect: Entity.Entity<"shapes/Rect", import("effect/Schema").Struct<{
+    x: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    y: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    opacity: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    fill: import("effect/Schema").withConstructorDefault<import("effect/Schema").String>;
+    stroke: import("effect/Schema").optionalKey<import("effect/Schema").String>;
+    strokeWidth: import("effect/Schema").optionalKey<import("effect/Schema").Number>;
+    width: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    height: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+}>, {
+    readonly "~position": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly width: number;
+        readonly height: number;
+    }, Entity.Position>;
+    readonly "~opacity": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly width: number;
+        readonly height: number;
+    }, number>;
+}, {
+    readonly x?: number;
+    readonly y?: number;
+    readonly opacity?: number;
+    readonly fill?: string;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly width?: number;
+    readonly height?: number;
+}>;

package/dist/shapes/Rect.js

@@ -0,0 +1,10 @@
+import * as Entity from "../Entity";
+import * as Shape2D from "./Shape2D";
+export const Rect = Entity.make("shapes/Rect", {
+    ...Shape2D.filled,
+    width: Shape2D.defaultedNumber(100),
+    height: Shape2D.defaultedNumber(100),
+}, {
+    "~position": Shape2D.positionLens(),
+    "~opacity": Shape2D.opacityLens(),
+});

package/dist/shapes/Shape2D.d.ts

@@ -0,0 +1,40 @@
+import * as Schema from "effect/Schema";
+import type * as Entity from "../Entity";
+/**
+ * The portable styling prop set shared by built-in shapes — deliberately
+ * limited to what any plausible render target (SVG, canvas, Lottie) can
+ * express. Camera pan/zoom is a sink-level view transform (see Camera.ts);
+ * per-shape transforms (rotation) remain future territory.
+ *
+ * Visible defaults: a default-constructed shape must be visible on the
+ * default (dark) background. Filled shapes default `fill` to white with
+ * stroke absent; Line overrides this (stroke white, width 1 — see
+ * Line.ts). Absent optional props are omitted by render targets, never
+ * emitted with placeholder values.
+ */
+export declare const defaultedNumber: (value: number) => Schema.withConstructorDefault<Schema.Number>;
+export declare const position: {
+    x: Schema.withConstructorDefault<Schema.Number>;
+    y: Schema.withConstructorDefault<Schema.Number>;
+};
+export declare const opacity: {
+    opacity: Schema.withConstructorDefault<Schema.Number>;
+};
+/** Common fields for fillable shapes. */
+export declare const filled: {
+    x: Schema.withConstructorDefault<Schema.Number>;
+    y: Schema.withConstructorDefault<Schema.Number>;
+    opacity: Schema.withConstructorDefault<Schema.Number>;
+    fill: Schema.withConstructorDefault<Schema.String>;
+    stroke: Schema.optionalKey<Schema.String>;
+    strokeWidth: Schema.optionalKey<Schema.Number>;
+};
+/** standard x/y position lens for shapes whose position IS x/y */
+export declare const positionLens: <Data extends {
+    x: number;
+    y: number;
+}>() => Entity.TraitLens<Data, Entity.Position>;
+/** standard opacity lens */
+export declare const opacityLens: <Data extends {
+    opacity: number;
+}>() => Entity.TraitLens<Data, number>;

package/dist/shapes/Shape2D.js

@@ -0,0 +1,41 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+/**
+ * The portable styling prop set shared by built-in shapes — deliberately
+ * limited to what any plausible render target (SVG, canvas, Lottie) can
+ * express. Camera pan/zoom is a sink-level view transform (see Camera.ts);
+ * per-shape transforms (rotation) remain future territory.
+ *
+ * Visible defaults: a default-constructed shape must be visible on the
+ * default (dark) background. Filled shapes default `fill` to white with
+ * stroke absent; Line overrides this (stroke white, width 1 — see
+ * Line.ts). Absent optional props are omitted by render targets, never
+ * emitted with placeholder values.
+ */
+export const defaultedNumber = (value) => Schema.Number.pipe(Schema.withConstructorDefault(Effect.succeed(value)));
+export const position = {
+    x: defaultedNumber(0),
+    y: defaultedNumber(0),
+};
+export const opacity = {
+    opacity: defaultedNumber(1),
+};
+/** Common fields for fillable shapes. */
+export const filled = {
+    ...position,
+    fill: Schema.String.pipe(Schema.withConstructorDefault(Effect.succeed("white"))),
+    stroke: Schema.optionalKey(Schema.String),
+    strokeWidth: Schema.optionalKey(Schema.Number),
+    ...opacity,
+};
+/** standard x/y position lens for shapes whose position IS x/y */
+export const positionLens = () => ({
+    get: (data) => ({ x: data.x, y: data.y }),
+    // spread of a generic yields Data & {...}; assignable back to Data
+    set: (data, value) => ({ ...data, x: value.x, y: value.y }),
+});
+/** standard opacity lens */
+export const opacityLens = () => ({
+    get: (data) => data.opacity,
+    set: (data, opacity) => ({ ...data, opacity }),
+});

package/dist/shapes/Square.d.ts

@@ -0,0 +1,37 @@
+import * as Entity from "../Entity";
+export declare const Square: Entity.Entity<"shapes/Square", import("effect/Schema").Struct<{
+    x: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    y: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    opacity: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+    fill: import("effect/Schema").withConstructorDefault<import("effect/Schema").String>;
+    stroke: import("effect/Schema").optionalKey<import("effect/Schema").String>;
+    strokeWidth: import("effect/Schema").optionalKey<import("effect/Schema").Number>;
+    size: import("effect/Schema").withConstructorDefault<import("effect/Schema").Number>;
+}>, {
+    readonly "~position": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly size: number;
+    }, Entity.Position>;
+    readonly "~opacity": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly size: number;
+    }, number>;
+}, {
+    readonly x?: number;
+    readonly y?: number;
+    readonly opacity?: number;
+    readonly fill?: string;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly size?: number;
+}>;

package/dist/shapes/Square.js

@@ -0,0 +1,11 @@
+import * as Entity from "../Entity";
+import * as Shape2D from "./Shape2D";
+// its own entity, not Rect sugar: the schema IS the width === height
+// constraint, which a Rect can't enforce through updates
+export const Square = Entity.make("shapes/Square", {
+    ...Shape2D.filled,
+    size: Shape2D.defaultedNumber(100),
+}, {
+    "~position": Shape2D.positionLens(),
+    "~opacity": Shape2D.opacityLens(),
+});

package/dist/shapes/Text.d.ts

@@ -0,0 +1,60 @@
+import * as Schema from "effect/Schema";
+import * as Entity from "../Entity";
+/**
+ * A plain-string text leaf. `text` is required. The engine cannot measure
+ * text, so alignment is delegated to SVG via `textAnchor` / `baseline`.
+ * Inline formatting and multi-run styling are expressed by composing
+ * multiple `Text` instances (via `children`), not by an in-engine tree.
+ */
+export declare const Text: Entity.Entity<"shapes/Text", Schema.Struct<{
+    x: Schema.withConstructorDefault<Schema.Number>;
+    y: Schema.withConstructorDefault<Schema.Number>;
+    opacity: Schema.withConstructorDefault<Schema.Number>;
+    fill: Schema.withConstructorDefault<Schema.String>;
+    stroke: Schema.optionalKey<Schema.String>;
+    strokeWidth: Schema.optionalKey<Schema.Number>;
+    text: Schema.String;
+    fontSize: Schema.withConstructorDefault<Schema.Number>;
+    fontFamily: Schema.withConstructorDefault<Schema.String>;
+    textAnchor: Schema.optionalKey<Schema.Literals<readonly ["start", "middle", "end"]>>;
+    baseline: Schema.optionalKey<Schema.Literals<readonly ["auto", "middle", "hanging"]>>;
+}>, {
+    readonly "~position": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly text: string;
+        readonly fontSize: number;
+        readonly fontFamily: string;
+        readonly textAnchor?: "end" | "middle" | "start";
+        readonly baseline?: "auto" | "hanging" | "middle";
+    }, Entity.Position>;
+    readonly "~opacity": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly text: string;
+        readonly fontSize: number;
+        readonly fontFamily: string;
+        readonly textAnchor?: "end" | "middle" | "start";
+        readonly baseline?: "auto" | "hanging" | "middle";
+    }, number>;
+}, {
+    readonly x?: number;
+    readonly y?: number;
+    readonly opacity?: number;
+    readonly fill?: string;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly text: string;
+    readonly fontSize?: number;
+    readonly fontFamily?: string;
+    readonly textAnchor?: "end" | "middle" | "start";
+    readonly baseline?: "auto" | "hanging" | "middle";
+}>;

package/dist/shapes/Text.js

@@ -0,0 +1,24 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import * as Entity from "../Entity";
+import * as Shape2D from "./Shape2D";
+/**
+ * A plain-string text leaf. `text` is required. The engine cannot measure
+ * text, so alignment is delegated to SVG via `textAnchor` / `baseline`.
+ * Inline formatting and multi-run styling are expressed by composing
+ * multiple `Text` instances (via `children`), not by an in-engine tree.
+ */
+export const Text = Entity.make("shapes/Text", {
+    ...Shape2D.filled,
+    text: Schema.String,
+    // numeric, therefore tweenable: tweenTo({ fontSize }) just works
+    fontSize: Shape2D.defaultedNumber(16),
+    // the generic family resolves to a sane system sans on every
+    // platform — no bet on a named font existing
+    fontFamily: Schema.String.pipe(Schema.withConstructorDefault(Effect.succeed("sans-serif"))),
+    textAnchor: Schema.optionalKey(Schema.Literals(["start", "middle", "end"])),
+    baseline: Schema.optionalKey(Schema.Literals(["auto", "middle", "hanging"])),
+}, {
+    "~position": Shape2D.positionLens(),
+    "~opacity": Shape2D.opacityLens(),
+});

package/dist/shapes/index.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,13 @@
+/**
+ * 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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,43 @@
+/**
+ * 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,13 @@
+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);