Canvas

/**
 * 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`.
 */
type Shape = typeof Rect.Type | typeof Circle.Type | typeof Path.Type | typeof Text.Type | Group

/**
 * 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.
 */
type ViewConfig = Readonly<{
  className: string
  height: number
  onPointerDown: (point: Point) => Message
  onPointerMove: (point: Point) => Message
  onPointerUp: (point: Point) => Message
  shapes: ReadonlyArray<Shape>
  width: number
}>

/**
 * 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`.
 */
interface Group {
  _tag: "Group"
  opacity: number
  rotate: number
  scale: ReadonlySide<{
    x: Number
    y: Number
  }, "Type">
  shapes: readonly Array<Shape>
  translate: ReadonlySide<{
    x: Number
    y: Number
  }, "Type">
}

/** Draw a cubic Bezier curve from the cursor through two control points to an end point. */
const BezierTo: CallableTaggedStruct<"BezierTo", {
  cp1x: Number
  cp1y: Number
  cp2x: Number
  cp2y: Number
  x: Number
  y: Number
}>

/** A filled or stroked circle. */
const Circle: CallableTaggedStruct<"Circle", {
  fill: optional<String>
  lineWidth: optional<Number>
  radius: Number
  stroke: optional<String>
  x: Number
  y: Number
}>

/** Close the current path by drawing a line back to its starting point. */
const Close: CallableTaggedStruct<"Close", {}>

/** Construct a `Group` shape that wraps its children in a transformed scope. */
const Group: CallableTaggedStruct<"Group", {
  opacity: optional<Number>
  rotate: optional<Number>
  scale: optional<Struct<{
    x: Number
    y: Number
  }>>
  shapes: $Array<Schema<Shape>>
  translate: optional<Struct<{
    x: Number
    y: Number
  }>>
}>

/** Stroke cap style: how the ends of an open stroked subpath are rendered. */
const LineCap: Literals<readonly ["Butt", "Round", "Square"]>

/** Stroke join style: how two connected stroked segments meet. */
const LineJoin: Literals<readonly ["Miter", "Round", "Bevel"]>

/** Draw a straight line from the cursor to a point. */
const LineTo: CallableTaggedStruct<"LineTo", {
  x: Number
  y: Number
}>

/** Move the path cursor to a point without drawing. */
const MoveTo: CallableTaggedStruct<"MoveTo", {
  x: Number
  y: Number
}>

/** A path built from a sequence of `PathInstruction`s. */
const Path: CallableTaggedStruct<"Path", {
  fill: optional<String>
  instructions: $Array<Union<readonly [
    CallableTaggedStruct<"MoveTo", {
      x: Number
      y: Number
    }>,
    CallableTaggedStruct<"LineTo", {
      x: Number
      y: Number
    }>,
    CallableTaggedStruct<"QuadTo", {
      cpx: Number
      cpy: Number
      x: Number
      y: Number
    }>,
    CallableTaggedStruct<"BezierTo", {
      cp1x: Number
      cp1y: Number
      cp2x: Number
      cp2y: Number
      x: Number
      y: Number
    }>,
    CallableTaggedStruct<"Close", {}>
  ]>>
  lineCap: optional<Literals<readonly ["Butt", "Round", "Square"]>>
  lineJoin: optional<Literals<readonly ["Miter", "Round", "Bevel"]>>
  lineWidth: optional<Number>
  stroke: optional<String>
}>

/** A single drawing instruction within a `Path` shape. */
const PathInstruction: Union<readonly [
  CallableTaggedStruct<"MoveTo", {
    x: Number
    y: Number
  }>,
  CallableTaggedStruct<"LineTo", {
    x: Number
    y: Number
  }>,
  CallableTaggedStruct<"QuadTo", {
    cpx: Number
    cpy: Number
    x: Number
    y: Number
  }>,
  CallableTaggedStruct<"BezierTo", {
    cp1x: Number
    cp1y: Number
    cp2x: Number
    cp2y: Number
    x: Number
    y: Number
  }>,
  CallableTaggedStruct<"Close", {}>
]>

/** A 2D point in canvas-local coordinates. */
const Point: Struct<{
  x: Number
  y: Number
}>

/** Draw a quadratic Bezier curve from the cursor through a control point to an end point. */
const QuadTo: CallableTaggedStruct<"QuadTo", {
  cpx: Number
  cpy: Number
  x: Number
  y: Number
}>

/** An axis-aligned rectangle. */
const Rect: CallableTaggedStruct<"Rect", {
  fill: optional<String>
  height: Number
  lineWidth: optional<Number>
  stroke: optional<String>
  width: Number
  x: Number
  y: Number
}>

/** A single line of text drawn with a font, fill, and optional stroke. */
const Text: CallableTaggedStruct<"Text", {
  align: optional<Literals<readonly ["Left", "Center", "Right", "Start", "End"]>>
  baseline: optional<Literals<readonly ["Top", "Middle", "Bottom", "Alphabetic", "Hanging", "Ideographic"]>>
  content: String
  fill: optional<String>
  font: optional<String>
  lineWidth: optional<Number>
  stroke: optional<String>
  x: Number
  y: Number
}>

/** Horizontal alignment of a `Text` shape relative to its anchor x coordinate. */
const TextAlign: Literals<readonly ["Left", "Center", "Right", "Start", "End"]>

/** Vertical alignment of a `Text` shape relative to its anchor y coordinate. */
const TextBaseline: Literals<readonly ["Top", "Middle", "Bottom", "Alphabetic", "Hanging", "Ideographic"]>