foldkit 0.90.1 → 0.92.0

package/README.md

@@ -157,6 +157,7 @@ Foldkit is a complete system, not a collection of libraries you stitch together.
 - **Submodels**: A pattern for composing nested modules. A child owns its own Model, Messages, update function, and view; the parent embeds it and wraps child Messages in a `Got*Message` envelope. The pattern scales unchanged from a login form to a multi-page app.
 - **OutMessage**: A typed channel for a child Submodel to emit domain events up to its parent, so the parent reacts to meaningful facts instead of internal child Messages.
 - **UI Components**: Accessible, keyboard-friendly primitives covering Button, Checkbox, Combobox, Dialog, Disclosure, DragAndDrop, Fieldset, Input, Listbox, Menu, Popover, RadioGroup, Select, Switch, Tabs, Textarea, and Transition. Every component is a Submodel with a typed `ViewConfig`, domain-event callbacks like `onSelected`, `onClosed`, and `onToggled`, and `className` plus `attributes` props on every slot for styling and extension. Animated components share a `Transition` Submodel that coordinates CSS enter and leave animations.
+- **Canvas**: Declarative 2D rendering. Describe a scene as a tree of `Shape` values (Rect, Circle, Path, Text, plus Group, which composes children under translate / rotate / scale / opacity), pass them to `Canvas.view`, and the runtime re-paints on every patch. The canvas pixels are a pure function of the shapes, so DevTools time-travel reproduces past frames exactly. Pair with `Subscription.animationFrame` for `requestAnimationFrame`-driven Subscriptions.
 - **Field Validation**: Per-field validation state modeled as a discriminated union. Define rules as data, apply them in update, and the Model tracks the result.
 - **Virtual DOM**: Declarative views powered by [Snabbdom](https://github.com/snabbdom/snabbdom), with lazy memoization and fast, keyed diffing. Views are plain functions of your Model.
 - **DevTools**: Built-in overlay for inspecting Messages, Model state, and Commands. Time-travel mode rewinds your UI to any past Model, Inspect mode browses snapshots without pausing, and Submodel drill-in filtering scopes the Message list to any nested module.
@@ -191,6 +192,7 @@ This is what makes Foldkit unusually AI-friendly. The same property that makes t
 - **[WebSocket Chat](https://foldkit.dev/example-apps/websocket-chat)** — Managed Resources with WebSocket integration
 - **[Kanban](https://foldkit.dev/example-apps/kanban)** — Drag-and-drop kanban board with cross-column reordering and keyboard navigation
 - **[Pixel Art](https://foldkit.dev/example-apps/pixel-art)** — Grid-based pixel editor with painting, erasing, and palette selection
+- **[Canvas Art](https://foldkit.dev/example-apps/canvas-art)** — Declarative 2D canvas with shapes, animation-frame Subscriptions, and pointer events
 - **[UI Showcase](https://foldkit.dev/example-apps/ui-showcase)** — Interactive showcase of every Foldkit UI component
 - **[Typing Game](https://github.com/foldkit/foldkit/tree/main/packages/typing-game)** — Multiplayer typing game with Effect RPC backend ([play it live](https://typingterminal.com))
 

package/dist/canvas/index.d.ts

@@ -0,0 +1,5 @@
+export { BezierTo, Circle, Close, Group, LineCap, LineJoin, LineTo, MoveTo, Path, PathInstruction, Point, QuadTo, Rect, Text, TextAlign, TextBaseline, } from './shape.js';
+export type { Shape } from './shape.js';
+export { view } from './view.js';
+export type { ViewConfig } from './view.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAI,EACJ,eAAe,EACf,KAAK,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}

package/dist/canvas/index.js

@@ -0,0 +1,2 @@
+export { BezierTo, Circle, Close, Group, LineCap, LineJoin, LineTo, MoveTo, Path, PathInstruction, Point, QuadTo, Rect, Text, TextAlign, TextBaseline, } from './shape.js';
+export { view } from './view.js';

package/dist/canvas/paint.d.ts

@@ -0,0 +1,14 @@
+import type { Shape } from './shape.js';
+/**
+ * Paint a single `Shape` to the 2D context. Each call is bracketed by
+ * `ctx.save` / `ctx.restore` so per-shape state mutations (fillStyle,
+ * lineWidth, font, transforms applied by `Group`, etc.) cannot leak to
+ * sibling shapes. Recurses into `Group` children inside the saved scope.
+ */
+export declare const paintShape: (ctx: CanvasRenderingContext2D) => (shape: Shape) => void;
+/**
+ * Clear the canvas and paint every shape in `shapes` against the given
+ * 2D context. Called by `Canvas.view` on insert and on every postpatch.
+ */
+export declare const paintScene: (ctx: CanvasRenderingContext2D, width: number, height: number, shapes: ReadonlyArray<Shape>) => void;
+//# sourceMappingURL=paint.d.ts.map

package/dist/canvas/paint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paint.d.ts","sourceRoot":"","sources":["../../src/canvas/paint.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAQV,KAAK,EAIN,MAAM,YAAY,CAAA;AAoJnB;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GACpB,KAAK,wBAAwB,MAC7B,OAAO,KAAK,KAAG,IAYf,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,KAAK,wBAAwB,EAC7B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,QAAQ,aAAa,CAAC,KAAK,CAAC,KAC3B,IAGF,CAAA"}

package/dist/canvas/paint.js

@@ -0,0 +1,144 @@
+import { Array, Match } from 'effect';
+const lineCapForCanvas = {
+    Butt: 'butt',
+    Round: 'round',
+    Square: 'square',
+};
+const lineJoinForCanvas = {
+    Miter: 'miter',
+    Round: 'round',
+    Bevel: 'bevel',
+};
+const textAlignForCanvas = {
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+    Start: 'start',
+    End: 'end',
+};
+const textBaselineForCanvas = {
+    Top: 'top',
+    Middle: 'middle',
+    Bottom: 'bottom',
+    Alphabetic: 'alphabetic',
+    Hanging: 'hanging',
+    Ideographic: 'ideographic',
+};
+const paintRect = (ctx) => (rect) => {
+    if (rect.fill !== undefined) {
+        ctx.fillStyle = rect.fill;
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+    if (rect.stroke !== undefined) {
+        ctx.strokeStyle = rect.stroke;
+        if (rect.lineWidth !== undefined) {
+            ctx.lineWidth = rect.lineWidth;
+        }
+        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    }
+};
+const paintCircle = (ctx) => (circle) => {
+    ctx.beginPath();
+    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+    if (circle.fill !== undefined) {
+        ctx.fillStyle = circle.fill;
+        ctx.fill();
+    }
+    if (circle.stroke !== undefined) {
+        ctx.strokeStyle = circle.stroke;
+        if (circle.lineWidth !== undefined) {
+            ctx.lineWidth = circle.lineWidth;
+        }
+        ctx.stroke();
+    }
+};
+const applyPathInstruction = (ctx) => (instruction) => Match.value(instruction).pipe(Match.tagsExhaustive({
+    MoveTo: ({ x, y }) => ctx.moveTo(x, y),
+    LineTo: ({ x, y }) => ctx.lineTo(x, y),
+    QuadTo: ({ cpx, cpy, x, y }) => ctx.quadraticCurveTo(cpx, cpy, x, y),
+    BezierTo: ({ cp1x, cp1y, cp2x, cp2y, x, y }) => ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y),
+    Close: () => ctx.closePath(),
+}));
+const paintPath = (ctx) => (path) => {
+    ctx.beginPath();
+    Array.forEach(path.instructions, applyPathInstruction(ctx));
+    if (path.fill !== undefined) {
+        ctx.fillStyle = path.fill;
+        ctx.fill();
+    }
+    if (path.stroke !== undefined) {
+        ctx.strokeStyle = path.stroke;
+        if (path.lineWidth !== undefined) {
+            ctx.lineWidth = path.lineWidth;
+        }
+        if (path.lineCap !== undefined) {
+            ctx.lineCap = lineCapForCanvas[path.lineCap];
+        }
+        if (path.lineJoin !== undefined) {
+            ctx.lineJoin = lineJoinForCanvas[path.lineJoin];
+        }
+        ctx.stroke();
+    }
+};
+const paintText = (ctx) => (text) => {
+    if (text.font !== undefined) {
+        ctx.font = text.font;
+    }
+    if (text.align !== undefined) {
+        ctx.textAlign = textAlignForCanvas[text.align];
+    }
+    if (text.baseline !== undefined) {
+        ctx.textBaseline = textBaselineForCanvas[text.baseline];
+    }
+    if (text.fill !== undefined) {
+        ctx.fillStyle = text.fill;
+        ctx.fillText(text.content, text.x, text.y);
+    }
+    if (text.stroke !== undefined) {
+        ctx.strokeStyle = text.stroke;
+        if (text.lineWidth !== undefined) {
+            ctx.lineWidth = text.lineWidth;
+        }
+        ctx.strokeText(text.content, text.x, text.y);
+    }
+};
+const paintGroup = (ctx) => (group) => {
+    if (group.opacity !== undefined) {
+        ctx.globalAlpha *= group.opacity;
+    }
+    if (group.translate !== undefined) {
+        ctx.translate(group.translate.x, group.translate.y);
+    }
+    if (group.rotate !== undefined) {
+        ctx.rotate(group.rotate);
+    }
+    if (group.scale !== undefined) {
+        ctx.scale(group.scale.x, group.scale.y);
+    }
+    Array.forEach(group.shapes, paintShape(ctx));
+};
+/**
+ * Paint a single `Shape` to the 2D context. Each call is bracketed by
+ * `ctx.save` / `ctx.restore` so per-shape state mutations (fillStyle,
+ * lineWidth, font, transforms applied by `Group`, etc.) cannot leak to
+ * sibling shapes. Recurses into `Group` children inside the saved scope.
+ */
+export const paintShape = (ctx) => (shape) => {
+    ctx.save();
+    Match.value(shape).pipe(Match.tagsExhaustive({
+        Rect: paintRect(ctx),
+        Circle: paintCircle(ctx),
+        Path: paintPath(ctx),
+        Text: paintText(ctx),
+        Group: paintGroup(ctx),
+    }));
+    ctx.restore();
+};
+/**
+ * Clear the canvas and paint every shape in `shapes` against the given
+ * 2D context. Called by `Canvas.view` on insert and on every postpatch.
+ */
+export const paintScene = (ctx, width, height, shapes) => {
+    ctx.clearRect(0, 0, width, height);
+    Array.forEach(shapes, paintShape(ctx));
+};

package/dist/canvas/public.d.ts

@@ -0,0 +1,3 @@
+export { BezierTo, Circle, Close, Group, LineCap, LineJoin, LineTo, MoveTo, Path, PathInstruction, Point, QuadTo, Rect, Text, TextAlign, TextBaseline, view, } from './index.js';
+export type { Shape, ViewConfig } from './index.js';
+//# sourceMappingURL=public.d.ts.map

package/dist/canvas/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/canvas/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAI,EACJ,eAAe,EACf,KAAK,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,IAAI,GACL,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}

package/dist/canvas/public.js

@@ -0,0 +1 @@
+export { BezierTo, Circle, Close, Group, LineCap, LineJoin, LineTo, MoveTo, Path, PathInstruction, Point, QuadTo, Rect, Text, TextAlign, TextBaseline, view, } from './index.js';

package/dist/canvas/shape.d.ts

@@ -0,0 +1,188 @@
+import { Schema as S } from 'effect';
+/** A 2D point in canvas-local coordinates. */
+export declare const Point: S.Struct<{
+    readonly x: S.Number;
+    readonly y: S.Number;
+}>;
+/** A 2D point in canvas-local coordinates. */
+export type Point = typeof Point.Type;
+/** Move the path cursor to a point without drawing. */
+export declare const MoveTo: import("../schema/index.js").CallableTaggedStruct<"MoveTo", {
+    x: S.Number;
+    y: S.Number;
+}>;
+/** Move the path cursor to a point without drawing. */
+export type MoveTo = typeof MoveTo.Type;
+/** Draw a straight line from the cursor to a point. */
+export declare const LineTo: import("../schema/index.js").CallableTaggedStruct<"LineTo", {
+    x: S.Number;
+    y: S.Number;
+}>;
+/** Draw a straight line from the cursor to a point. */
+export type LineTo = typeof LineTo.Type;
+/** Draw a quadratic Bezier curve from the cursor through a control point to an end point. */
+export declare const QuadTo: import("../schema/index.js").CallableTaggedStruct<"QuadTo", {
+    cpx: S.Number;
+    cpy: S.Number;
+    x: S.Number;
+    y: S.Number;
+}>;
+/** Draw a quadratic Bezier curve from the cursor through a control point to an end point. */
+export type QuadTo = typeof QuadTo.Type;
+/** Draw a cubic Bezier curve from the cursor through two control points to an end point. */
+export declare const BezierTo: import("../schema/index.js").CallableTaggedStruct<"BezierTo", {
+    cp1x: S.Number;
+    cp1y: S.Number;
+    cp2x: S.Number;
+    cp2y: S.Number;
+    x: S.Number;
+    y: S.Number;
+}>;
+/** Draw a cubic Bezier curve from the cursor through two control points to an end point. */
+export type BezierTo = typeof BezierTo.Type;
+/** Close the current path by drawing a line back to its starting point. */
+export declare const Close: import("../schema/index.js").CallableTaggedStruct<"Close", {}>;
+/** Close the current path by drawing a line back to its starting point. */
+export type Close = typeof Close.Type;
+/** A single drawing instruction within a `Path` shape. */
+export declare const PathInstruction: S.Union<readonly [import("../schema/index.js").CallableTaggedStruct<"MoveTo", {
+    x: S.Number;
+    y: S.Number;
+}>, import("../schema/index.js").CallableTaggedStruct<"LineTo", {
+    x: S.Number;
+    y: S.Number;
+}>, import("../schema/index.js").CallableTaggedStruct<"QuadTo", {
+    cpx: S.Number;
+    cpy: S.Number;
+    x: S.Number;
+    y: S.Number;
+}>, import("../schema/index.js").CallableTaggedStruct<"BezierTo", {
+    cp1x: S.Number;
+    cp1y: S.Number;
+    cp2x: S.Number;
+    cp2y: S.Number;
+    x: S.Number;
+    y: S.Number;
+}>, import("../schema/index.js").CallableTaggedStruct<"Close", {}>]>;
+/** A single drawing instruction within a `Path` shape. */
+export type PathInstruction = typeof PathInstruction.Type;
+/** Stroke cap style: how the ends of an open stroked subpath are rendered. */
+export declare const LineCap: S.Literals<readonly ["Butt", "Round", "Square"]>;
+/** Stroke cap style: how the ends of an open stroked subpath are rendered. */
+export type LineCap = typeof LineCap.Type;
+/** Stroke join style: how two connected stroked segments meet. */
+export declare const LineJoin: S.Literals<readonly ["Miter", "Round", "Bevel"]>;
+/** Stroke join style: how two connected stroked segments meet. */
+export type LineJoin = typeof LineJoin.Type;
+/** Horizontal alignment of a `Text` shape relative to its anchor x coordinate. */
+export declare const TextAlign: S.Literals<readonly ["Left", "Center", "Right", "Start", "End"]>;
+/** Horizontal alignment of a `Text` shape relative to its anchor x coordinate. */
+export type TextAlign = typeof TextAlign.Type;
+/** Vertical alignment of a `Text` shape relative to its anchor y coordinate. */
+export declare const TextBaseline: S.Literals<readonly ["Top", "Middle", "Bottom", "Alphabetic", "Hanging", "Ideographic"]>;
+/** Vertical alignment of a `Text` shape relative to its anchor y coordinate. */
+export type TextBaseline = typeof TextBaseline.Type;
+/** An axis-aligned rectangle. */
+export declare const Rect: import("../schema/index.js").CallableTaggedStruct<"Rect", {
+    x: S.Number;
+    y: S.Number;
+    width: S.Number;
+    height: S.Number;
+    fill: S.optional<S.String>;
+    stroke: S.optional<S.String>;
+    lineWidth: S.optional<S.Number>;
+}>;
+/** An axis-aligned rectangle. */
+export type Rect = typeof Rect.Type;
+/** A filled or stroked circle. */
+export declare const Circle: import("../schema/index.js").CallableTaggedStruct<"Circle", {
+    x: S.Number;
+    y: S.Number;
+    radius: S.Number;
+    fill: S.optional<S.String>;
+    stroke: S.optional<S.String>;
+    lineWidth: S.optional<S.Number>;
+}>;
+/** A filled or stroked circle. */
+export type Circle = typeof Circle.Type;
+/** A path built from a sequence of `PathInstruction`s. */
+export declare const Path: import("../schema/index.js").CallableTaggedStruct<"Path", {
+    instructions: S.$Array<S.Union<readonly [import("../schema/index.js").CallableTaggedStruct<"MoveTo", {
+        x: S.Number;
+        y: S.Number;
+    }>, import("../schema/index.js").CallableTaggedStruct<"LineTo", {
+        x: S.Number;
+        y: S.Number;
+    }>, import("../schema/index.js").CallableTaggedStruct<"QuadTo", {
+        cpx: S.Number;
+        cpy: S.Number;
+        x: S.Number;
+        y: S.Number;
+    }>, import("../schema/index.js").CallableTaggedStruct<"BezierTo", {
+        cp1x: S.Number;
+        cp1y: S.Number;
+        cp2x: S.Number;
+        cp2y: S.Number;
+        x: S.Number;
+        y: S.Number;
+    }>, import("../schema/index.js").CallableTaggedStruct<"Close", {}>]>>;
+    fill: S.optional<S.String>;
+    stroke: S.optional<S.String>;
+    lineWidth: S.optional<S.Number>;
+    lineCap: S.optional<S.Literals<readonly ["Butt", "Round", "Square"]>>;
+    lineJoin: S.optional<S.Literals<readonly ["Miter", "Round", "Bevel"]>>;
+}>;
+/** A path built from a sequence of `PathInstruction`s. */
+export type Path = typeof Path.Type;
+/** A single line of text drawn with a font, fill, and optional stroke. */
+export declare const Text: import("../schema/index.js").CallableTaggedStruct<"Text", {
+    x: S.Number;
+    y: S.Number;
+    content: S.String;
+    font: S.optional<S.String>;
+    fill: S.optional<S.String>;
+    stroke: S.optional<S.String>;
+    lineWidth: S.optional<S.Number>;
+    align: S.optional<S.Literals<readonly ["Left", "Center", "Right", "Start", "End"]>>;
+    baseline: S.optional<S.Literals<readonly ["Top", "Middle", "Bottom", "Alphabetic", "Hanging", "Ideographic"]>>;
+}>;
+/** A single line of text drawn with a font, fill, and optional stroke. */
+export type Text = typeof Text.Type;
+/**
+ * A scene-graph node that applies a 2D transform and global alpha to a list of
+ * child shapes. Transforms compose multiplicatively when groups are nested.
+ *
+ * Defined via the `interface` form so the recursion (`shapes: ReadonlyArray<Shape>`
+ * where `Shape` includes `Group` itself) resolves under TypeScript's lazy
+ * interface evaluation. The matching runtime Schema uses `S.suspend`.
+ */
+export interface Group extends Readonly<{
+    readonly _tag: 'Group';
+    readonly shapes: ReadonlyArray<Shape>;
+    readonly translate?: Point | undefined;
+    readonly rotate?: number | undefined;
+    readonly scale?: Point | undefined;
+    readonly opacity?: number | undefined;
+}> {
+}
+/**
+ * A drawable scene-graph node. Composing `Group` recursively builds a tree;
+ * the painter walks the tree depth-first, applying transforms via
+ * `ctx.save` / `ctx.restore`.
+ */
+export type Shape = typeof Rect.Type | typeof Circle.Type | typeof Path.Type | typeof Text.Type | Group;
+/** Construct a `Group` shape that wraps its children in a transformed scope. */
+export declare const Group: import("../schema/index.js").CallableTaggedStruct<"Group", {
+    shapes: S.$Array<S.Schema<Shape>>;
+    translate: S.optional<S.Struct<{
+        readonly x: S.Number;
+        readonly y: S.Number;
+    }>>;
+    rotate: S.optional<S.Number>;
+    scale: S.optional<S.Struct<{
+        readonly x: S.Number;
+        readonly y: S.Number;
+    }>>;
+    opacity: S.optional<S.Number>;
+}>;
+//# sourceMappingURL=shape.d.ts.map

package/dist/canvas/shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../src/canvas/shape.ts"],"names":[],"mappings":"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"}

package/dist/canvas/shape.js

@@ -0,0 +1,103 @@
+import { Schema as S } from 'effect';
+import { ts } from '../schema/index.js';
+/** A 2D point in canvas-local coordinates. */
+export const Point = S.Struct({ x: S.Number, y: S.Number });
+/** Move the path cursor to a point without drawing. */
+export const MoveTo = ts('MoveTo', { x: S.Number, y: S.Number });
+/** Draw a straight line from the cursor to a point. */
+export const LineTo = ts('LineTo', { x: S.Number, y: S.Number });
+/** Draw a quadratic Bezier curve from the cursor through a control point to an end point. */
+export const QuadTo = ts('QuadTo', {
+    cpx: S.Number,
+    cpy: S.Number,
+    x: S.Number,
+    y: S.Number,
+});
+/** Draw a cubic Bezier curve from the cursor through two control points to an end point. */
+export const BezierTo = ts('BezierTo', {
+    cp1x: S.Number,
+    cp1y: S.Number,
+    cp2x: S.Number,
+    cp2y: S.Number,
+    x: S.Number,
+    y: S.Number,
+});
+/** Close the current path by drawing a line back to its starting point. */
+export const Close = ts('Close');
+/** A single drawing instruction within a `Path` shape. */
+export const PathInstruction = S.Union([
+    MoveTo,
+    LineTo,
+    QuadTo,
+    BezierTo,
+    Close,
+]);
+/** Stroke cap style: how the ends of an open stroked subpath are rendered. */
+export const LineCap = S.Literals(['Butt', 'Round', 'Square']);
+/** Stroke join style: how two connected stroked segments meet. */
+export const LineJoin = S.Literals(['Miter', 'Round', 'Bevel']);
+/** Horizontal alignment of a `Text` shape relative to its anchor x coordinate. */
+export const TextAlign = S.Literals(['Left', 'Center', 'Right', 'Start', 'End']);
+/** Vertical alignment of a `Text` shape relative to its anchor y coordinate. */
+export const TextBaseline = S.Literals([
+    'Top',
+    'Middle',
+    'Bottom',
+    'Alphabetic',
+    'Hanging',
+    'Ideographic',
+]);
+/** An axis-aligned rectangle. */
+export const Rect = ts('Rect', {
+    x: S.Number,
+    y: S.Number,
+    width: S.Number,
+    height: S.Number,
+    fill: S.optional(S.String),
+    stroke: S.optional(S.String),
+    lineWidth: S.optional(S.Number),
+});
+/** A filled or stroked circle. */
+export const Circle = ts('Circle', {
+    x: S.Number,
+    y: S.Number,
+    radius: S.Number,
+    fill: S.optional(S.String),
+    stroke: S.optional(S.String),
+    lineWidth: S.optional(S.Number),
+});
+/** A path built from a sequence of `PathInstruction`s. */
+export const Path = ts('Path', {
+    instructions: S.Array(PathInstruction),
+    fill: S.optional(S.String),
+    stroke: S.optional(S.String),
+    lineWidth: S.optional(S.Number),
+    lineCap: S.optional(LineCap),
+    lineJoin: S.optional(LineJoin),
+});
+/** A single line of text drawn with a font, fill, and optional stroke. */
+export const Text = ts('Text', {
+    x: S.Number,
+    y: S.Number,
+    content: S.String,
+    font: S.optional(S.String),
+    fill: S.optional(S.String),
+    stroke: S.optional(S.String),
+    lineWidth: S.optional(S.Number),
+    align: S.optional(TextAlign),
+    baseline: S.optional(TextBaseline),
+});
+/**
+ * Lazy reference to the full `Shape` union. Used inside `Group`'s `shapes`
+ * field so the schema can describe its own children without a forward
+ * declaration cycle.
+ */
+const Shape = S.suspend(() => S.Union([Rect, Circle, Path, Text, Group]));
+/** Construct a `Group` shape that wraps its children in a transformed scope. */
+export const Group = ts('Group', {
+    shapes: S.Array(Shape),
+    translate: S.optional(Point),
+    rotate: S.optional(S.Number),
+    scale: S.optional(Point),
+    opacity: S.optional(S.Number),
+});

package/dist/canvas/view.d.ts

@@ -0,0 +1,38 @@
+import type { Html } from '../html/index.js';
+import type { Point, Shape } from './shape.js';
+/**
+ * Configuration for `Canvas.view`. Pointer handlers are optional and
+ * receive a `Point` already translated to the canvas's internal coordinate
+ * space (the `width` and `height` passed here), independent of how the
+ * canvas is sized in CSS.
+ */
+export type ViewConfig<Message> = Readonly<{
+    width: number;
+    height: number;
+    shapes: ReadonlyArray<Shape>;
+    className?: string | undefined;
+    onPointerDown?: ((point: Point) => Message) | undefined;
+    onPointerMove?: ((point: Point) => Message) | undefined;
+    onPointerUp?: ((point: Point) => Message) | undefined;
+}>;
+/**
+ * A virtual DOM `<canvas>` element backed by a declarative scene description.
+ * The insert hook captures the 2D context and paints the initial scene; the
+ * postpatch hook re-paints on every render. The canvas is a pure function of
+ * `shapes`. Same shapes produce the same pixels.
+ *
+ * @example
+ * ```typescript
+ * Canvas.view<Message>({
+ *   width: 400,
+ *   height: 300,
+ *   shapes: [
+ *     Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
+ *     Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
+ *   ],
+ *   onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
+ * })
+ * ```
+ */
+export declare const view: <Message>(config: ViewConfig<Message>) => Html;
+//# sourceMappingURL=view.d.ts.map

package/dist/canvas/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/canvas/view.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAG5C,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACvD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;CACtD,CAAC,CAAA;AA8BF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAyExD,CAAA"}

package/dist/canvas/view.js

@@ -0,0 +1,97 @@
+import { Array, Effect, Predicate, Record, String, pipe } from 'effect';
+import { h } from 'snabbdom';
+import { Dispatch } from '../runtime/index.js';
+import { paintScene } from './paint.js';
+/**
+ * Per-element 2D context cache. Keyed by the live `<canvas>` element so the
+ * postpatch hook reads the same context the insert hook captured. `WeakMap`
+ * lets the entry be reclaimed if the element is removed.
+ */
+const contextStore = new WeakMap();
+const toCanvasPoint = (canvas, event) => {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = rect.width === 0 ? 1 : canvas.width / rect.width;
+    const scaleY = rect.height === 0 ? 1 : canvas.height / rect.height;
+    return {
+        x: (event.clientX - rect.left) * scaleX,
+        y: (event.clientY - rect.top) * scaleY,
+    };
+};
+const classesFromClassName = (className) => pipe(className, String.split(/\s+/), Array.filter(String.isNonEmpty), Record.fromIterableWith(name => [name, true]));
+/**
+ * A virtual DOM `<canvas>` element backed by a declarative scene description.
+ * The insert hook captures the 2D context and paints the initial scene; the
+ * postpatch hook re-paints on every render. The canvas is a pure function of
+ * `shapes`. Same shapes produce the same pixels.
+ *
+ * @example
+ * ```typescript
+ * Canvas.view<Message>({
+ *   width: 400,
+ *   height: 300,
+ *   shapes: [
+ *     Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
+ *     Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
+ *   ],
+ *   onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
+ * })
+ * ```
+ */
+export const view = (config) => Effect.gen(function* () {
+    const { dispatchSync } = yield* Dispatch;
+    const { width, height, shapes, className, onPointerDown, onPointerMove, onPointerUp, } = config;
+    const pointerListener = (toMessage) => (event) => {
+        const target = event.currentTarget;
+        if (target instanceof HTMLCanvasElement) {
+            dispatchSync(toMessage(toCanvasPoint(target, event)));
+        }
+    };
+    const listeners = {
+        ...(onPointerDown !== undefined && {
+            pointerdown: pointerListener(onPointerDown),
+        }),
+        ...(onPointerMove !== undefined && {
+            pointermove: pointerListener(onPointerMove),
+        }),
+        ...(onPointerUp !== undefined && {
+            pointerup: pointerListener(onPointerUp),
+        }),
+    };
+    const data = {
+        props: { width, height },
+        on: listeners,
+        ...(className !== undefined && {
+            class: classesFromClassName(className),
+        }),
+        hook: {
+            insert: vnode => {
+                if (!(vnode.elm instanceof HTMLCanvasElement)) {
+                    return;
+                }
+                const canvas = vnode.elm;
+                const nullableContext = canvas.getContext('2d');
+                if (Predicate.isNull(nullableContext)) {
+                    return;
+                }
+                contextStore.set(canvas, nullableContext);
+                paintScene(nullableContext, width, height, shapes);
+            },
+            postpatch: (_oldVnode, vnode) => {
+                if (!(vnode.elm instanceof HTMLCanvasElement)) {
+                    return;
+                }
+                const nullableContext = contextStore.get(vnode.elm);
+                if (nullableContext === undefined) {
+                    return;
+                }
+                paintScene(nullableContext, width, height, shapes);
+            },
+            destroy: vnode => {
+                if (vnode.elm instanceof HTMLCanvasElement) {
+                    contextStore.delete(vnode.elm);
+                }
+            },
+        },
+    };
+    return h('canvas', data);
+});

package/dist/devTools/overlay.d.ts

@@ -7,6 +7,7 @@ declare const StoreService_base: Context.ServiceClass<StoreService, "foldkit/Dev
     recordMessage: (message: Readonly<{
         _tag: string;
     }>, modelBeforeUpdate: unknown, modelAfterUpdate: unknown, commands: ReadonlyArray<CommandRecord>, isModelChanged: boolean) => Effect.Effect<void>;
+    updateLatestModel: (model: unknown) => Effect.Effect<void>;
     attachRenderedMounts: (mountStarts: ReadonlyArray<MountRecord>, mountEnds: ReadonlyArray<MountRecord>) => Effect.Effect<void>;
     getModelAtIndex: (index: number) => Effect.Effect<unknown>;
     getMessageAtIndex: (index: number) => Effect.Effect<Option.Option<unknown>>;

package/dist/devTools/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAa9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAO3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFAiYJ,CAAC;;;;;;;;;;;;;AAtIhB,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AA2/CD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAa9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAO3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFA8aQ,CAAC;;;;;;;;;;;;;;AAnL5B,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AA2/CD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,CAAA"}