asobi 0.1.0

data/lib/asobi/color.rb

@@ -0,0 +1,236 @@
+# frozen_string_literal: true
+
+module Asobi
+  # Colours are plain values: a CSS colour name as a Symbol (:crimson), or a
+  # String such as "#ff0066", "hsl(200, 70%, 50%)" or "rgb(10, 20, 30)".
+  # This module checks them, turns them into SVG paint, and mixes them.
+  module Color
+    # The CSS named colours (CSS Color Module Level 4), name => [r, g, b].
+    NAMES = {
+      "aliceblue" => [240, 248, 255], "antiquewhite" => [250, 235, 215], "aqua" => [0, 255, 255],
+      "aquamarine" => [127, 255, 212], "azure" => [240, 255, 255], "beige" => [245, 245, 220],
+      "bisque" => [255, 228, 196], "black" => [0, 0, 0], "blanchedalmond" => [255, 235, 205],
+      "blue" => [0, 0, 255], "blueviolet" => [138, 43, 226], "brown" => [165, 42, 42],
+      "burlywood" => [222, 184, 135], "cadetblue" => [95, 158, 160], "chartreuse" => [127, 255, 0],
+      "chocolate" => [210, 105, 30], "coral" => [255, 127, 80], "cornflowerblue" => [100, 149, 237],
+      "cornsilk" => [255, 248, 220], "crimson" => [220, 20, 60], "cyan" => [0, 255, 255],
+      "darkblue" => [0, 0, 139], "darkcyan" => [0, 139, 139], "darkgoldenrod" => [184, 134, 11],
+      "darkgray" => [169, 169, 169], "darkgreen" => [0, 100, 0], "darkgrey" => [169, 169, 169],
+      "darkkhaki" => [189, 183, 107], "darkmagenta" => [139, 0, 139], "darkolivegreen" => [85, 107, 47],
+      "darkorange" => [255, 140, 0], "darkorchid" => [153, 50, 204], "darkred" => [139, 0, 0],
+      "darksalmon" => [233, 150, 122], "darkseagreen" => [143, 188, 143], "darkslateblue" => [72, 61, 139],
+      "darkslategray" => [47, 79, 79], "darkslategrey" => [47, 79, 79], "darkturquoise" => [0, 206, 209],
+      "darkviolet" => [148, 0, 211], "deeppink" => [255, 20, 147], "deepskyblue" => [0, 191, 255],
+      "dimgray" => [105, 105, 105], "dimgrey" => [105, 105, 105], "dodgerblue" => [30, 144, 255],
+      "firebrick" => [178, 34, 34], "floralwhite" => [255, 250, 240], "forestgreen" => [34, 139, 34],
+      "fuchsia" => [255, 0, 255], "gainsboro" => [220, 220, 220], "ghostwhite" => [248, 248, 255],
+      "gold" => [255, 215, 0], "goldenrod" => [218, 165, 32], "gray" => [128, 128, 128],
+      "green" => [0, 128, 0], "greenyellow" => [173, 255, 47], "grey" => [128, 128, 128],
+      "honeydew" => [240, 255, 240], "hotpink" => [255, 105, 180], "indianred" => [205, 92, 92],
+      "indigo" => [75, 0, 130], "ivory" => [255, 255, 240], "khaki" => [240, 230, 140],
+      "lavender" => [230, 230, 250], "lavenderblush" => [255, 240, 245], "lawngreen" => [124, 252, 0],
+      "lemonchiffon" => [255, 250, 205], "lightblue" => [173, 216, 230], "lightcoral" => [240, 128, 128],
+      "lightcyan" => [224, 255, 255], "lightgoldenrodyellow" => [250, 250, 210], "lightgray" => [211, 211, 211],
+      "lightgreen" => [144, 238, 144], "lightgrey" => [211, 211, 211], "lightpink" => [255, 182, 193],
+      "lightsalmon" => [255, 160, 122], "lightseagreen" => [32, 178, 170], "lightskyblue" => [135, 206, 250],
+      "lightslategray" => [119, 136, 153], "lightslategrey" => [119, 136, 153], "lightsteelblue" => [176, 196, 222],
+      "lightyellow" => [255, 255, 224], "lime" => [0, 255, 0], "limegreen" => [50, 205, 50],
+      "linen" => [250, 240, 230], "magenta" => [255, 0, 255], "maroon" => [128, 0, 0],
+      "mediumaquamarine" => [102, 205, 170], "mediumblue" => [0, 0, 205], "mediumorchid" => [186, 85, 211],
+      "mediumpurple" => [147, 112, 219], "mediumseagreen" => [60, 179, 113], "mediumslateblue" => [123, 104, 238],
+      "mediumspringgreen" => [0, 250, 154], "mediumturquoise" => [72, 209, 204], "mediumvioletred" => [199, 21, 133],
+      "midnightblue" => [25, 25, 112], "mintcream" => [245, 255, 250], "mistyrose" => [255, 228, 225],
+      "moccasin" => [255, 228, 181], "navajowhite" => [255, 222, 173], "navy" => [0, 0, 128],
+      "oldlace" => [253, 245, 230], "olive" => [128, 128, 0], "olivedrab" => [107, 142, 35],
+      "orange" => [255, 165, 0], "orangered" => [255, 69, 0], "orchid" => [218, 112, 214],
+      "palegoldenrod" => [238, 232, 170], "palegreen" => [152, 251, 152], "paleturquoise" => [175, 238, 238],
+      "palevioletred" => [219, 112, 147], "papayawhip" => [255, 239, 213], "peachpuff" => [255, 218, 185],
+      "peru" => [205, 133, 63], "pink" => [255, 192, 203], "plum" => [221, 160, 221],
+      "powderblue" => [176, 224, 230], "purple" => [128, 0, 128], "rebeccapurple" => [102, 51, 153],
+      "red" => [255, 0, 0], "rosybrown" => [188, 143, 143], "royalblue" => [65, 105, 225],
+      "saddlebrown" => [139, 69, 19], "salmon" => [250, 128, 114], "sandybrown" => [244, 164, 96],
+      "seagreen" => [46, 139, 87], "seashell" => [255, 245, 238], "sienna" => [160, 82, 45],
+      "silver" => [192, 192, 192], "skyblue" => [135, 206, 235], "slateblue" => [106, 90, 205],
+      "slategray" => [112, 128, 144], "slategrey" => [112, 128, 144], "snow" => [255, 250, 250],
+      "springgreen" => [0, 255, 127], "steelblue" => [70, 130, 180], "tan" => [210, 180, 140],
+      "teal" => [0, 128, 128], "thistle" => [216, 191, 216], "tomato" => [255, 99, 71],
+      "turquoise" => [64, 224, 208], "violet" => [238, 130, 238], "wheat" => [245, 222, 179],
+      "white" => [255, 255, 255], "whitesmoke" => [245, 245, 245], "yellow" => [255, 255, 0],
+      "yellowgreen" => [154, 205, 50]
+    }.freeze
+
+    NUMBER = /\s*(-?\d+(?:\.\d+)?|-?\.\d+)\s*/
+    HEX = /\A#(\h{3}|\h{4}|\h{6}|\h{8})\z/
+    HSL = /\Ahsla?\(#{NUMBER}(?:deg)?,#{NUMBER}%,#{NUMBER}%(?:,#{NUMBER}(%?))?\)\z/i
+    RGB = /\Argba?\(#{NUMBER}(%?),#{NUMBER}(%?),#{NUMBER}(%?)(?:,#{NUMBER}(%?))?\)\z/i
+
+    module_function
+
+    # SVG paint for a colour value: "crimson", "#ff0066", "none" ...
+    # Unknown colours raise a teaching error.
+    def css(value)
+      return "none" if value.nil? || value == false
+
+      name = value.to_s.strip
+      key = name.downcase.delete("_ ")
+      return key if NAMES.key?(key) || %w[none transparent currentcolor].include?(key)
+      return name if value.is_a?(String) && rgba(name)
+
+      hint = suggestion(key)
+      raise Messages.error(ArgumentError, :bad_color, got: value.inspect, hint:)
+    end
+
+    # [r, g, b, alpha] with r, g, b in 0..255 and alpha in 0..1, or nil.
+    def rgba(value)
+      text = value.to_s.strip
+      key = text.downcase.delete("_ ")
+      return [*NAMES[key], 1.0] if NAMES.key?(key)
+      return [0, 0, 0, 0.0] if key == "transparent"
+
+      if (m = HEX.match(text))
+        digits = m[1]
+        digits = digits.chars.map { _1 * 2 }.join if digits.size <= 4
+        values = digits.scan(/../).map { _1.to_i(16) }
+        return [*values[0, 3], values.size == 4 ? values[3] / 255.0 : 1.0]
+      end
+      if (m = HSL.match(text))
+        r, g, b = hsl_to_rgb(m[1].to_f, m[2].to_f, m[3].to_f)
+        return [r, g, b, alpha(m[4], m[5])]
+      end
+      if (m = RGB.match(text))
+        r, g, b = [[m[1], m[2]], [m[3], m[4]], [m[5], m[6]]].map do |number, percent|
+          (percent == "%" ? number.to_f * 2.55 : number.to_f).clamp(0, 255).round
+        end
+        return [r, g, b, alpha(m[7], m[8])]
+      end
+      nil
+    end
+
+    # [r, g, b] (0..255), or nil for "none".
+    def rgb(value) = rgba(css(value))&.first(3)
+
+    # Halfway between two colours is mix(a, b, 0.5). Answers "#rrggbb", or
+    # "rgba(...)" when either colour is see-through.
+    def mix(from, to, t)
+      a = rgba(css(from)) || raise(Messages.error(ArgumentError, :bad_color, got: from.inspect, hint: ""))
+      b = rgba(css(to)) || raise(Messages.error(ArgumentError, :bad_color, got: to.inspect, hint: ""))
+      t = t.to_f.clamp(0.0, 1.0)
+      r, g, bl, al = a.zip(b).map { |x, y| x + (y - x) * t }
+      return format("#%02x%02x%02x", r.round, g.round, bl.round) if al >= 1.0
+
+      "rgba(#{r.round}, #{g.round}, #{bl.round}, #{Asobi.fmt(al)})"
+    end
+
+    # hue in degrees (0..360), saturation and lightness in 0..100.
+    def hsl(hue, saturation = 70, lightness = 50)
+      %w[hue saturation lightness].zip([hue, saturation, lightness]).each do |name, v|
+        Check.number(v, word: :hsl, name:, example: "hsl(200, 70, 50)")
+      end
+      h = Asobi.fmt(hue % 360)
+      s = Asobi.fmt(saturation.clamp(0, 100))
+      l = Asobi.fmt(lightness.clamp(0, 100))
+      "hsl(#{h}, #{s}%, #{l}%)"
+    end
+
+    # 0 is black, 100 is white.
+    def gray(lightness = 50)
+      Check.number(lightness, word: :gray, name: :lightness, example: "gray(80)")
+      hsl(0, 0, lightness)
+    end
+
+    def hsl_to_rgb(h, s, l)
+      h = (h % 360) / 360.0
+      s = (s / 100.0).clamp(0.0, 1.0)
+      l = (l / 100.0).clamp(0.0, 1.0)
+      return [(l * 255).round] * 3 if s.zero?
+
+      q = l < 0.5 ? l * (1 + s) : l + s - l * s
+      p = 2 * l - q
+      [h + 1 / 3.0, h, h - 1 / 3.0].map do |t|
+        t += 1 if t.negative?
+        t -= 1 if t > 1
+        v =
+          if t < 1 / 6.0 then p + (q - p) * 6 * t
+          elsif t < 1 / 2.0 then q
+          elsif t < 2 / 3.0 then p + (q - p) * (2 / 3.0 - t) * 6
+          else p
+          end
+        (v * 255).round
+      end
+    end
+
+    def alpha(number, percent)
+      return 1.0 unless number
+
+      (percent == "%" ? number.to_f / 100 : number.to_f).clamp(0.0, 1.0)
+    end
+
+    def suggestion(key)
+      return "" if key.empty? || !defined?(DidYouMean::SpellChecker)
+
+      found = DidYouMean::SpellChecker.new(dictionary: NAMES.keys).correct(key).first
+      found ? Messages.text(:did_you_mean, name: found) : ""
+    end
+  end
+end
+
+module Asobi
+  # A gradient, used as a colour:  colored(from: :gold, to: :crimson).
+  #
+  # +angle+ is in degrees, clockwise: 0 flows from top to bottom, 90 from
+  # right to left (the gradient turned a quarter clockwise). +around+ makes
+  # it flow from the centre outwards instead. Where it starts and ends is
+  # worked out when drawing, from the box of the picture it paints.
+  Gradient = Data.define(:from, :to, :angle, :around) do
+    def self.make(from, to, angle, around)
+      Asobi::Check.number(angle, word: :colored, name: :angle, example: "colored(from: :gold, to: :crimson, angle: 90)")
+      new(Asobi::Color.css(from), Asobi::Color.css(to), Asobi::Gradient.tidy(angle.to_f % 360), around ? true : false)
+    end
+
+    def self.tidy(degrees)
+      rounded = degrees.round(9)
+      rounded = 0.0 if rounded.zero? || rounded == 360.0
+      rounded
+    end
+
+    # The same gradient seen through +matrix+ (only its turning and
+    # stretching matter).
+    def through(matrix)
+      return self if around
+
+      radians = angle * Math::PI / 180
+      x, y = matrix.linear.apply(-Math.sin(radians), Math.cos(radians))
+      return self if x.abs < 1e-12 && y.abs < 1e-12
+
+      turned = Math.atan2(-x, y) * 180 / Math::PI
+      with(angle: Asobi::Gradient.tidy(turned % 360))
+    end
+
+    # The <linearGradient> or <radialGradient> for a Box (in the
+    # coordinates of the picture it paints), without its id.
+    def definition(box)
+      stops = %(<stop offset="0" stop-color="#{Asobi.escape(from)}"/>) +
+              %(<stop offset="1" stop-color="#{Asobi.escape(to)}"/>)
+      box ||= Asobi::Box.new(-1.0, -1.0, 1.0, 1.0)
+      if around
+        r = [[box.width, box.height].max / 2.0, 1e-3].max
+        return %(<radialGradient gradientUnits="userSpaceOnUse" cx="#{Asobi.fmt(box.cx)}" cy="#{Asobi.fmt(box.cy)}" ) +
+               %(r="#{Asobi.fmt(r)}">#{stops}</radialGradient>)
+      end
+
+      radians = angle * Math::PI / 180
+      dx = Asobi::Affine.tidy(-Math.sin(radians))
+      dy = Asobi::Affine.tidy(Math.cos(radians))
+      half = (dx.abs * box.width + dy.abs * box.height) / 2.0
+      if half < 1e-6 # a flat line across the flow: let it flow along the line
+        dx, dy = box.width >= box.height ? [1.0, 0.0] : [0.0, 1.0]
+        half = [box.width, box.height].max / 2.0
+        half = 1.0 if half < 1e-6
+      end
+      x1, y1 = box.cx - dx * half, box.cy - dy * half
+      x2, y2 = box.cx + dx * half, box.cy + dy * half
+      %(<linearGradient gradientUnits="userSpaceOnUse" x1="#{Asobi.fmt(x1)}" y1="#{Asobi.fmt(y1)}" ) +
+        %(x2="#{Asobi.fmt(x2)}" y2="#{Asobi.fmt(y2)}">#{stops}</linearGradient>)
+    end
+  end
+end

data/lib/asobi/core_ext.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require_relative "pure"
+
+# to_art is the new to_s.
+#
+# Ruby objects already know how to become a String (to_s), an Array (to_a),
+# a Proc (to_proc). Here they learn to become a picture. The rules live in
+# Asobi::Convert; these methods only open the door.
+module Asobi
+  module CoreExt
+    module ToArt
+      # 8.to_art, [3, 1, 4].to_art(as: star)
+      def to_art(as: nil) = Asobi.art(self, as:)
+    end
+
+    module Turn
+      # Angles in turns: 0.25.turn is 90.0 degrees.
+      def turn = self * 360.0
+      alias_method :turns, :turn
+    end
+  end
+end
+
+[Integer, Float, Rational, Array, Range, Hash, String, Symbol, NilClass].each do |klass|
+  klass.include(Asobi::CoreExt::ToArt)
+end
+Numeric.include(Asobi::CoreExt::Turn)

data/lib/asobi/geometry.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+module Asobi
+  # 2D affine transform:  x' = a*x + c*y + e,  y' = b*x + d*y + f
+  #
+  # Coordinates are SVG's: x to the right, y downwards. With y pointing down
+  # the usual rotation matrix turns things clockwise, which is what
+  # rotate(45) promises.
+  Affine = Data.define(:a, :b, :c, :d, :e, :f) do
+    def self.translate(x, y) = new(1.0, 0.0, 0.0, 1.0, x.to_f, y.to_f)
+    def self.scale(sx, sy = sx) = new(sx.to_f, 0.0, 0.0, sy.to_f, 0.0, 0.0)
+
+    # Clockwise, in degrees. Quarter turns are exact, so rotate(90) four
+    # times gives back exactly the same picture.
+    def self.rotate(degrees)
+      radians = degrees * Math::PI / 180
+      cos = Asobi::Affine.tidy(Math.cos(radians))
+      sin = Asobi::Affine.tidy(Math.sin(radians))
+      new(cos, sin, -sin, cos, 0.0, 0.0)
+    end
+
+    def self.tidy(value) = value.abs < 1e-12 ? 0.0 : value
+
+    # Composition: (self * other) applies +other+ first, then +self+.
+    def *(other)
+      Affine.new(
+        a * other.a + c * other.b,
+        b * other.a + d * other.b,
+        a * other.c + c * other.d,
+        b * other.c + d * other.d,
+        a * other.e + c * other.f + e,
+        b * other.e + d * other.f + f
+      )
+    end
+
+    def apply(x, y) = [a * x + c * y + e, b * x + d * y + f]
+
+    # Only the turning and stretching part (no moving): for directions.
+    def linear = Affine.new(a, b, c, d, 0.0, 0.0)
+
+    # The linear part undone (the identity when it can't be undone).
+    def inverse_linear
+      det = a * d - b * c
+      return IDENTITY if det.abs < 1e-12
+
+      Affine.new(d / det, -b / det, -c / det, a / det, 0.0, 0.0)
+    end
+
+    # How much this transform stretches lengths, on average (for strokes).
+    def stretch = Math.sqrt((a * d - b * c).abs)
+
+    def identity? = self == IDENTITY
+    def translation? = a == 1.0 && b.zero? && c.zero? && d == 1.0
+  end
+
+  IDENTITY = Affine.new(1.0, 0.0, 0.0, 1.0, 0.0, 0.0)
+
+  # Axis-aligned bounding box, in picture coordinates (y down).
+  Box = Data.define(:x0, :y0, :x1, :y1) do
+    def self.around(points)
+      xs = points.map(&:first)
+      ys = points.map(&:last)
+      new(xs.min.to_f, ys.min.to_f, xs.max.to_f, ys.max.to_f)
+    end
+
+    # The box around a rectangle w x h centred on the origin, transformed.
+    def self.of_rect(w, h, m)
+      x = w / 2.0
+      y = h / 2.0
+      around([[-x, -y], [x, -y], [x, y], [-x, y]].map { m.apply(*_1) })
+    end
+
+    def self.union(boxes)
+      boxes = boxes.compact
+      return nil if boxes.empty?
+
+      new(boxes.map(&:x0).min, boxes.map(&:y0).min, boxes.map(&:x1).max, boxes.map(&:y1).max)
+    end
+
+    def width = x1 - x0
+    def height = y1 - y0
+    def cx = (x0 + x1) / 2.0
+    def cy = (y0 + y1) / 2.0
+    def grow(n) = Box.new(x0 - n, y0 - n, x1 + n, y1 + n)
+
+    # Strictly overlapping (touching edges do not count).
+    def overlap?(other) = x0 < other.x1 && other.x0 < x1 && y0 < other.y1 && other.y0 < y1
+
+    # [x, y, width, height], the order SVG's viewBox uses.
+    def to_a = [x0, y0, width, height]
+  end
+
+  module Geometry
+    module_function
+
+    # The extent of a cubic Bézier along one axis: its end points plus any
+    # turning points in between. p0..p3 are numbers (one coordinate).
+    def cubic_extent(p0, p1, p2, p3)
+      values = [p0, p3]
+      # Derivative / 3 is a quadratic  qa t^2 + qb t + qc
+      qa = -p0 + 3 * p1 - 3 * p2 + p3
+      qb = 2 * (p0 - 2 * p1 + p2)
+      qc = p1 - p0
+      roots =
+        if qa.abs < 1e-12
+          qb.abs < 1e-12 ? [] : [-qc / qb]
+        else
+          disc = qb * qb - 4 * qa * qc
+          disc.negative? ? [] : [(-qb + Math.sqrt(disc)) / (2 * qa), (-qb - Math.sqrt(disc)) / (2 * qa)]
+        end
+      roots.each do |t|
+        next unless t > 0 && t < 1
+
+        u = 1 - t
+        values << u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3
+      end
+      values.minmax
+    end
+
+    # A point at +distance+ from the origin, +degrees+ clockwise from straight up.
+    def polar(distance, degrees)
+      radians = degrees * Math::PI / 180
+      [Affine.tidy(distance * Math.sin(radians)), Affine.tidy(-distance * Math.cos(radians))]
+    end
+  end
+end

data/lib/asobi/live.rb

@@ -0,0 +1,256 @@
+# frozen_string_literal: true
+
+require "socket"
+require "json"
+require "rbconfig"
+require_relative "sketch"
+
+module Asobi
+  Say.add(:live_ready,
+               en: "asobi: %{file} is playing at %{url}  -  save the file to change the picture, Ctrl-C to stop",
+               ja: "asobi: %{file} を %{url} に表示しています。ファイルを保存すると絵が変わります。止めるには Ctrl-C")
+  Say.add(:live_ready_irb,
+               en: "asobi: playing at %{url}  -  every show changes the picture",
+               ja: "asobi: %{url} に表示しています。show するたびに絵が変わります")
+  Say.add(:live_bye, en: "asobi: bye!", ja: "asobi: またね")
+  Messages.add(:live_no_port,
+               en: "asobi couldn't find a free port from %{from} to %{to}. Close the other asobi, or pick one, like:  asobi --port 5000",
+               ja: "%{from} から %{to} までの空いているポートが見つかりません。ほかの asobi を閉じるか、ポートを選んでください。例：asobi --port 5000")
+  Messages.add(:live_invalid_reel,
+               en: 'asobi could not send this sketch to the browser. Use UTF-8 for the file and its text, and finite numbers for drawing, like:  show text("hello", size: 24)',
+               ja: 'このスケッチをブラウザに送れませんでした。ファイルと文字列には UTF-8 を使い、描画には有限の数を指定してください。例：show text("こんにちは", size: 24)')
+
+  # The live view: a tiny HTTP server (standard library only) that serves the
+  # player page and streams Reels to every open browser tab (Server-Sent
+  # Events). This is the only file that uses sockets and threads.
+  module Live
+    HOST = "127.0.0.1"
+    DEFAULT_PORT = 4567
+    PORT_TRIES = 20
+    HEARTBEAT = 15 # seconds between keep-alive comments
+    POLL = 0.2     # seconds between looks at the sketch file
+    PAGE = File.join(__dir__, "web", "live.html")
+    PLACEHOLDER = "/*ASOBI_PLAYER_JS*/"
+
+    module_function
+
+    # Blocking. Evaluate the sketch, serve it, and follow the file until
+    # Ctrl-C (or until the server is stopped). Yields the server once it is
+    # ready. +initial+ is a Reel already made from this run of the script.
+    def run(path, port: DEFAULT_PORT, open: true, initial: nil, out: $stdout)
+      path = File.expand_path(path.to_s)
+      server = Server.new(port:)
+      seen = stamp(path)
+      server.push(initial || Sketch.evaluate(path))
+      out.puts Say.text(:live_ready, file: File.basename(path), url: server.url)
+      out.flush
+      open_browser(server.url) if open
+      yield server if block_given?
+      watch(path, server, seen)
+    rescue Interrupt
+      out.puts
+      out.puts Say.text(:live_bye)
+    ensure
+      server&.stop
+    end
+
+    # Non-blocking, for irb: the server object (push, stop, url).
+    def start(port: DEFAULT_PORT, open: true, announce: false, out: $stdout)
+      server = Server.new(port:)
+      if announce
+        out.puts Say.text(:live_ready_irb, url: server.url)
+        out.flush
+      end
+      open_browser(server.url) if open
+      server
+    end
+
+    # Poll the file; when it changes (and has settled), evaluate and push.
+    def watch(path, server, seen = stamp(path))
+      until server.stopped?
+        sleep POLL
+        now = stamp(path)
+        next if now.nil? || now == seen
+
+        loop do # wait until the editor has finished writing
+          sleep 0.05
+          later = stamp(path)
+          break if later == now || later.nil?
+
+          now = later
+        end
+        seen = now
+        server.push(Sketch.evaluate(path))
+      end
+    end
+
+    def stamp(path)
+      stat = File.stat(path)
+      [stat.mtime, stat.size]
+    rescue SystemCallError
+      nil # briefly missing while an editor saves
+    end
+
+    def open_browser(url)
+      return if ENV["ASOBI_BROWSER"] == "0"
+
+      command =
+        case RbConfig::CONFIG["host_os"]
+        when /darwin/ then ["open", url]
+        when /mswin|mingw|cygwin/ then ["cmd", "/c", "start", "", url]
+        else ["xdg-open", url]
+        end
+      pid = Process.spawn(*command, out: File::NULL, err: File::NULL)
+      Process.detach(pid)
+    rescue SystemCallError
+      nil # no browser to open; the URL was printed
+    end
+
+    def page
+      @page ||= File.read(PAGE, encoding: "UTF-8").sub(PLACEHOLDER) { Reel.player_js }
+    end
+
+    class Server
+      attr_reader :port
+
+      def initialize(port: DEFAULT_PORT)
+        @mutex = Mutex.new
+        @clients = []
+        @reel = nil
+        @good = nil
+        @stopped = false
+        @listener = listen(port)
+        @port = @listener.addr[1]
+        @thread = Thread.new { accept_loop }
+        @thread.report_on_exception = false
+      end
+
+      def url = "http://#{HOST}:#{port}/"
+      def stopped? = @stopped
+
+      # Show this Reel (a Hash) in every open tab, now and for new tabs.
+      def push(reel)
+        begin
+          json = JSON.generate(reel)
+        rescue JSON::GeneratorError
+          code = reel["code"]&.encode("UTF-8", invalid: :replace, undef: :replace)
+          reel = Reel.error(Messages.text(:live_invalid_reel), code:)
+          json = JSON.generate(reel)
+        end
+        @mutex.synchronize do
+          @reel = json
+          @good = json unless reel["error"]
+          @clients.each { _1.queue << json }
+        end
+        reel
+      end
+
+      def stop
+        return if @stopped
+
+        @stopped = true
+        @listener.close unless @listener.closed?
+        @thread.kill
+        @mutex.synchronize { @clients.each { _1.queue << :stop } }
+      rescue IOError, SystemCallError
+        nil
+      end
+
+      private
+
+      Client = Struct.new(:socket, :queue)
+
+      def listen(port)
+        return TCPServer.new(HOST, port) if port.zero?
+
+        port.upto(port + PORT_TRIES) do |candidate|
+          next if taken?(candidate)
+
+          begin
+            return TCPServer.new(HOST, candidate)
+          rescue Errno::EADDRINUSE, Errno::EACCES
+            next
+          end
+        end
+        raise Messages.error(IOError, :live_no_port, from: port, to: port + PORT_TRIES)
+      end
+
+      # Something already answers there (even when binding would not fail).
+      def taken?(port)
+        Socket.tcp(HOST, port, connect_timeout: 0.3) { true }
+      rescue SystemCallError, IOError
+        false
+      end
+
+      def accept_loop
+        loop do
+          socket = @listener.accept
+          thread = Thread.new(socket) { |s| serve(s) }
+          thread.report_on_exception = false
+        end
+      rescue IOError, SystemCallError
+        nil
+      end
+
+      def serve(socket)
+        request = read_request(socket)
+        case request
+        when %r{\AGET / }, %r{\AGET /\?\S* } then respond(socket, "200 OK", "text/html; charset=utf-8", Live.page)
+        when %r{\AGET /events[ ?]} then stream(socket)
+        else respond(socket, "404 Not Found", "text/plain; charset=utf-8", "not found\n")
+        end
+      rescue IOError, SystemCallError
+        nil
+      ensure
+        socket.close unless socket.closed?
+      end
+
+      # The request line; the headers are read and dropped.
+      def read_request(socket)
+        return nil unless IO.select([socket], nil, nil, 5)
+
+        first = socket.gets("\n", 4096).to_s
+        32.times do
+          break unless IO.select([socket], nil, nil, 2)
+
+          line = socket.gets("\n", 8192)
+          break if line.nil? || line.strip.empty?
+        end
+        first
+      end
+
+      def respond(socket, status, type, body)
+        body = body.b
+        socket.write "HTTP/1.1 #{status}\r\nContent-Type: #{type}\r\nContent-Length: #{body.bytesize}\r\n" \
+                     "Cache-Control: no-store\r\nConnection: close\r\n\r\n"
+        socket.write body
+      end
+
+      def stream(socket)
+        socket.setsockopt(Socket::IPPROTO_TCP, Socket::TCP_NODELAY, 1)
+        socket.write "HTTP/1.1 200 OK\r\nContent-Type: text/event-stream; charset=utf-8\r\n" \
+                     "Cache-Control: no-store\r\nConnection: keep-alive\r\n\r\nretry: 1000\n\n"
+        client = Client.new(socket, Queue.new)
+        @mutex.synchronize do
+          return if @stopped
+
+          client.queue << @good if @good && @good != @reel
+          client.queue << @reel if @reel
+          @clients << client
+        end
+        pump(client)
+      ensure
+        @mutex.synchronize { @clients.delete(client) } if client
+      end
+
+      def pump(client)
+        loop do
+          item = client.queue.pop(timeout: HEARTBEAT)
+          return if item == :stop
+
+          client.socket.write(item ? "data: #{item}\n\n" : ": keep-alive\n\n")
+        end
+      end
+    end
+  end
+end