wani 0.1.8

data/assets/shark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="48" viewBox="0 0 100 48"><g transform="translate(100 0) scale(-1 1)"><path d="M9 27 0 13v28l13-11q31 18 76-4-22-17-44-15L35 0l-7 17z" fill="#71887e"/><path d="m42 31 7 14 10-17" fill="#71887e"/><circle cx="74" cy="23" r="2" fill="#fff"/></g></svg>

data/assets/speaker.html

@@ -0,0 +1,2 @@
+<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Wani — 発表者ノート</title><link rel="stylesheet" href="/assets/style.css"><link rel="stylesheet" href="/assets/highlight.css"></head>
+<body class="speaker-view"><header class="speaker-heading">Wani · 発表者ノート <output id="position"></output></header><main class="speaker-columns"><article><h1 id="current"></h1><div id="body"></div><p id="page-footnote"></p></article><aside><h2>トークノート</h2><div id="notes"></div></aside></main><p class="speaker-help">メイン画面のページ移動に同期します。</p></body></html>

data/assets/style.css

@@ -0,0 +1,103 @@
+@font-face {
+  font-family: "IBM Plex Sans JP";
+  src: url("/assets/fonts/IBMPlexSansJP-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: "IBM Plex Sans JP";
+  src: url("/assets/fonts/IBMPlexSansJP-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: block;
+}
+:root { font-family: "IBM Plex Sans JP", sans-serif; color: #20352e; background: #e9eee9; }
+* { box-sizing: border-box; }
+body { margin: 0; }
+.presentation-view { height: 100dvh; display: flex; flex-direction: column; }
+.presentation-view > * { flex-shrink: 0; }
+.toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid #d4ddd5; background: #f8faf7; }
+.brand { font-family: Georgia, serif; font-size: 28px; font-weight: bold; text-decoration: none; color: #294d3e; }
+.brand span { margin-left: 14px; font: 11px system-ui, sans-serif; color: #75867c; letter-spacing: .06em; }
+nav { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
+button { color: #294d3e; border: 1px solid #ccd8cc; background: #fff; border-radius: 6px; padding: 8px 12px; cursor: pointer; font-family: inherit; font-size: 13px; }
+button:hover { background: #edf3eb; }
+button:disabled { cursor: default; opacity: .4; }
+button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offset: 3px; }
+#position { min-width: 66px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
+.toolbar-divider { border-left: 1px solid #ccd8cc; height: 20px; margin: 0 7px; }
+#status { font-size: 12px; margin: 0; padding: 8px 24px; color: #607569; min-height: 30px; }
+#viewport { width: 100%; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; }
+#stage { flex: 0 0 1920px; transform-origin: center; box-shadow: 0 8px 48px #20352e18; }
+.slide { width: 1920px; height: 1080px; padding: 64px 80px 48px; display: flex; flex-direction: column; overflow: hidden; background: white; color: #172b24; }
+.title { margin: 0 0 36px; white-space: nowrap; flex: 0 0 160px; font-weight: 700; line-height: 1.12; overflow: hidden; letter-spacing: -.025em; }
+.body { flex: 1 1 0; min-height: 0; overflow: hidden; line-height: 1.3; }
+.body p { margin: 0 0 .35em; }
+.body ul, .body ol { margin: .2em 0 .4em; padding-left: 1.35em; }
+.body pre { margin: .3em 0; padding: .4em .55em; background: #f3f6f2; white-space: pre-wrap; tab-size: 2; }
+.body code { font-family: ui-monospace, "IBM Plex Sans JP", monospace; font-size: .8em; }
+.body blockquote { border-left: .08em solid #b6cbb9; margin: .4em 0; padding-left: .6em; }
+.body table { border-collapse: collapse; width: 100%; }
+.body th, .body td { border: 1px solid #bac8bd; padding: .15em .3em; }
+.body img { display: block; object-fit: contain; max-width: 100%; }
+.body a { color: #32634b; }
+.slide-footer { flex: 0 0 128px; position: relative; display: flex; align-items: start; font-size: 24px; color: #71887e; padding-top: 12px; }
+.decorations { position: absolute; left: 0; right: 132px; bottom: 0; height: 80px; }
+.slide-number { position: absolute; right: 0; bottom: 8px; width: 112px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.decorations::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; border-top: 2px solid #71887e25; }
+.bridge { position: absolute; left: 84px; right: 84px; bottom: 0; height: 44px; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); }
+.bridge-segment { display: block; }
+.bridge-segment[data-present="false"] { visibility: hidden; }
+.bridge-wani { display: block; width: 100%; height: 44px; object-fit: contain; }
+.rabbit-position { position: absolute; bottom: 30px; width: 84px; height: 40px; left: calc((100% - 84px) * var(--rabbit-progress)); }
+.rabbit-image { display: block; width: 84px; height: 40px; }
+.slide.active .bridge-segment[data-appearing="true"] { animation: wani-arrive .35s ease-out; }
+.slide.active .decorations[data-moving="true"] .rabbit-position { animation: rabbit-advance .45s ease-in-out; }
+.slide.active .decorations[data-moving="true"] .rabbit-image { animation: rabbit-hop .45s ease-in-out; }
+@keyframes wani-arrive { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes rabbit-advance { from { left: calc((100% - 84px) * var(--rabbit-from)); } to { left: calc((100% - 84px) * var(--rabbit-progress)); } }
+@keyframes rabbit-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
+@media (prefers-reduced-motion: reduce) { .decorations * { animation: none !important; } }
+#stage .slide:not(.active) { display: none; }
+.help { padding: 8px 24px; font-size: 11px; color: #718578; display: flex; gap: 22px; }
+#warnings { margin: 8px 24px; padding: 12px; border-left: 3px solid #ac792c; background: #fff6e7; color: #6c4818; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 130px; overflow: auto; }
+#print-pages { display: none; }
+:fullscreen .toolbar, :fullscreen .help, :fullscreen #status { display: none; }
+:fullscreen #viewport { padding: 0; }
+:fullscreen { background: #182a22; }
+.speaker-heading { display: flex; justify-content: space-between; padding: 24px; font-weight: bold; }
+.speaker-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px; }
+.speaker-columns > * { background: white; padding: 28px; border-radius: 8px; min-width: 0; }
+.speaker-columns img { max-width: 100%; max-height: 35vh; object-fit: contain; }
+.speaker-help { margin: 24px; color: #718578; font-size: 12px; }
+@media (max-width: 700px) { .brand span, .toolbar-divider { display: none; } .toolbar { padding: 8px; } .help { gap: 8px; } .speaker-columns { grid-template-columns: 1fr; } }
+@page { size: 320mm 180mm; margin: 0; }
+@media print {
+  .decorations { display: none !important; }
+  body { margin: 0; background: white; }
+  .presentation-view { display: block; height: auto; }
+  body > :not(#print-pages) { display: none !important; }
+  #print-pages { display: block; }
+  .print-sheet { width: 320mm; height: 180mm; overflow: hidden; break-after: page; position: relative; }
+  .print-sheet:last-child { break-after: auto; }
+  .print-sheet .slide { position: absolute; left: 0; top: 0; zoom: .6299212598; transform: none; break-inside: avoid; }
+}
+
+#countdown { position: fixed; top: 18px; right: 24px; z-index: 20; padding: 12px 20px; border: 2px solid #9c452c; border-radius: 8px; background: #fff6e7; color: #84341f; font-size: clamp(24px, 4vw, 48px); font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
+#time-expired { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; color: #20352e; padding: 16px; overflow: auto; }
+#time-expired[hidden], #countdown[hidden] { display: none; }
+#time-expired h1 { margin: 0; font-size: clamp(24px, 4vw, 56px); }
+.time-expired-image { width: min(90vw, calc(65vh * 1024 / 683)); aspect-ratio: 1024 / 683; flex-shrink: 0; background: url('/assets/time-expired.png') right center / 200% 100% no-repeat; }
+#time-expired p { margin: 8px 0; text-align: center; }
+@media print { #countdown, #time-expired { display: none !important; } }
+
+#countdown.urgent:not([hidden]) { inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: #b32d1e; line-height: 1; }
+#countdown.urgent span { display: block; font-size: clamp(24px, 4vw, 48px); text-shadow: 0 0 12px white, 0 0 3px white; animation: countdown-shrink .8s ease-out both; }
+@keyframes countdown-shrink { from { font-size: var(--countdown-peak); } to { font-size: clamp(24px, 4vw, 48px); } }
+@media (prefers-reduced-motion: reduce) { #countdown.urgent span { animation: none; } }
+
+.island { position: absolute; bottom: 8px; width: 84px; height: 26px; background: #dfcea6; border-top: 7px solid #71887e; border-bottom: 4px solid #c4b18a; border-radius: 50% 50% 35% 35%; z-index: 1; }
+.island-left { left: 0; }
+.island-right { right: 0; }
+.rabbit-position { z-index: 2; }

data/assets/wani.wasm

@@ -0,0 +1,4 @@
+[diffend] Oversized file quarantined before diffing.
+name: data/assets/wani.wasm
+size: 35166158 bytes
+sha256: bfb964e6d30c8045bcf2e742dde56f046b1968f9465457130c008e9cdb037600

data/exe/wani

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+require "wani/cli"
+exit Wani::CLI.new.run(ARGV)

data/lib/wani/browser/application.rb

@@ -0,0 +1,189 @@
+require "js"
+require "json"
+require_relative "../core/parser"
+require_relative "layout"
+require_relative "renderer"
+require_relative "fonts"
+require_relative "presentation_timer"
+
+module Wani
+  module Browser
+    class Application
+      def start
+        @document = JS.global[:document]
+        @index = 0
+        @warnings = []
+        @layout = Layout.new(@document) { |message| warn(message) }
+        response = JS.global.fetch("/talk/slides.md").await
+        raise "Markdown を読み込めません (HTTP #{response[:status].to_i})" unless response[:ok] == JS::True
+        @presentation = Core::Parser.new.parse(response.text.await.to_s)
+        @presentation.diagnostics.each { |item| warn("#{item.slide ? "スライド #{item.slide}: " : ""}#{item.message}") }
+        @renderer = Renderer.new(@document, @presentation)
+        @sections = @presentation.slides.map { |slide| @renderer.slide(slide) }
+        @sections.each { |section| element("stage").appendChild(section) }
+        font_sections = @sections + @presentation.slides.map { |slide| @renderer.slide(slide, notes: true) }
+        Fonts.new(@document) { |message| warn(message) }.apply(@presentation.fonts, font_sections)
+        @layout.wait_assets(element("stage"))
+        @sections.each_with_index { |section, index| @layout.fit_slide(section, index + 1) }
+        prepare_pages(false)
+        bind_events
+        go(hash_index)
+        %w[previous next fullscreen speaker print print-notes].each { |id| element(id)[:disabled] = false }
+        update_buttons
+        start_timer
+        element("status")[:textContent] = "準備できました"
+      end
+
+      private
+
+      def element(id)
+        @document.getElementById(id)
+      end
+
+      def warn(message)
+        @warnings << message unless @warnings.include?(message)
+        element("warnings")[:hidden] = false
+        element("warnings")[:textContent] = @warnings.join("\n")
+      end
+
+      def async(&block)
+        Fiber.new do
+          block.call
+        rescue => error
+          warn(error.message)
+        end.transfer
+      end
+
+      def bind_events
+        element("previous").addEventListener("click") { go(@index - 1) }
+        element("next").addEventListener("click") { go(@index + 1) }
+        element("fullscreen").addEventListener("click") { fullscreen }
+        element("speaker").addEventListener("click") { speaker }
+        element("print").addEventListener("click") { async { print_pages(false) } }
+        element("print-notes").addEventListener("click") { async { print_pages(true) } }
+        @document.addEventListener("keydown") do |event|
+          target = event[:target]
+          next if event[:ctrlKey] == JS::True || event[:altKey] == JS::True || event[:metaKey] == JS::True
+          next if %w[INPUT TEXTAREA SELECT].include?(target[:tagName].to_s) || target[:isContentEditable] == JS::True
+          handled = true
+          case event[:key].to_s
+          when "ArrowRight", " ", "PageDown" then go(@index + 1)
+          when "ArrowLeft", "PageUp" then go(@index - 1)
+          when "Home" then go(0)
+          when "End" then go(@sections.length - 1)
+          when "f", "F" then fullscreen
+          when "Escape" then exit_fullscreen
+          when "n", "N" then speaker
+          else handled = false
+          end
+          event.preventDefault if handled
+        end
+        JS.global.addEventListener("resize") { @layout.scale }
+        JS.global.addEventListener("hashchange") { go(hash_index) }
+        @document.addEventListener("fullscreenchange") { @layout.scale }
+      end
+
+      def hash_index
+        match = JS.global[:location][:hash].to_s.match(/\A#slide=(\d+)\z/)
+        match ? match[1].to_i - 1 : 0
+      end
+
+      def go(index)
+        if @time_expired
+          @time_expired = false
+          element("time-expired")[:hidden] = true
+          element("viewport")[:inert] = false
+          index = @index
+        end
+        previous_number = @active_number || 0
+        @index = index.clamp(0, @sections.length - 1)
+        @renderer.transition(@sections[@index], previous_number)
+        @sections.each_with_index { |section, number| section[:classList].toggle("active", number == @index) }
+        @active_number = @index + 1
+        element("position")[:textContent] = "#{@index + 1} / #{@sections.length}"
+        desired = "#slide=#{@index + 1}"
+        JS.global[:history].replaceState(JS::Null, "", desired) unless JS.global[:location][:hash].to_s == desired
+        update_buttons
+        @layout.scale
+        sync_speaker
+        update_timer_for_slide
+      end
+
+      def update_buttons
+        element("previous")[:disabled] = @index.zero? && !@time_expired
+        element("next")[:disabled] = @index == @sections.length - 1 && !@time_expired
+      end
+
+      def fullscreen
+        return exit_fullscreen unless @document[:fullscreenElement] == JS::Null
+        @document[:documentElement].requestFullscreen.then(->(_value) { nil }, ->(_error) { warn("全画面表示が許可されませんでした。F またはボタンから再試行してください。"); nil })
+      end
+
+      def exit_fullscreen
+        return if @document[:fullscreenElement] == JS::Null
+        @document.exitFullscreen.then(->(_value) { nil }, ->(_error) { warn("全画面表示を終了できませんでした"); nil })
+      end
+
+      def speaker
+        if @speaker && @speaker[:closed] == JS::False
+          @speaker.focus
+          sync_speaker
+          return
+        end
+        @speaker = JS.global.open("/assets/speaker.html", "wani-speaker")
+        if @speaker == JS::Null
+          warn("ノート画面を開けません。ポップアップを許可して再試行してください。")
+          return
+        end
+        @speaker.addEventListener("load") do |_event|
+          @speaker.addEventListener("message") do |event|
+            next unless event[:origin].to_s == JS.global[:location][:origin].to_s && event[:source] == JS.global
+            state = JSON.parse(event[:data].to_s)
+            document = @speaker[:document]
+            document.getElementById("position")[:textContent] = state.fetch("position")
+            document.getElementById("current")[:textContent] = state.fetch("title")
+            document.getElementById("body")[:innerHTML] = state.fetch("html")
+            document.getElementById("notes")[:innerHTML] = state.fetch("notes_html")
+            document.getElementById("page-footnote")[:textContent] = state.fetch("page_footnote")
+            @renderer.resolve_links(document.getElementById("body"))
+            @renderer.resolve_links(document.getElementById("notes"))
+          end
+          sync_speaker
+        end
+      end
+
+      def sync_speaker
+        return unless @speaker && @speaker[:closed] == JS::False
+        slide = @presentation.slides[@index]
+        @speaker.postMessage(JSON.generate({ position: "#{@index + 1} / #{@sections.length}", title: slide.title, html: slide.html, notes_html: slide.notes_html, page_footnote: slide.page_footnote }), JS.global[:location][:origin])
+      end
+
+      def prepare_pages(notes)
+        pages = element("print-pages")
+        pages.replaceChildren
+        @presentation.slides.each_with_index do |slide, index|
+          [false, *(notes ? [true] : [])].each do |is_note|
+            section = is_note ? @renderer.slide(slide, notes: true) : @sections[index].cloneNode(true)
+            if is_note
+              element("stage").appendChild(section)
+              @layout.wait_assets(section)
+              @layout.fit_slide(section, slide.number)
+            end
+            sheet = @document.createElement("div")
+            sheet[:className] = "print-sheet"
+            sheet.appendChild(section)
+            pages.appendChild(sheet)
+          end
+        end
+        @layout.wait_assets(pages)
+        pages.setAttribute("aria-hidden", "false")
+        element("status")[:textContent] = "印刷準備完了 (#{pages[:childElementCount].to_i} ページ)"
+      end
+
+      def print_pages(notes)
+        prepare_pages(notes)
+        JS.global.print
+      end
+    end
+  end
+end

data/lib/wani/browser/bridge_progress.rb

@@ -0,0 +1,19 @@
+module Wani
+  module Browser
+    # Page progress builds a bridge in the first half and crosses it in the second.
+    class BridgeProgress
+      SEGMENTS = 20
+      attr_reader :sharks, :rabbit_fraction
+
+      def initialize(number, total)
+        raise ArgumentError, "Slide count must be positive" unless total.positive?
+        number = number.clamp(0, total)
+        # Anchor the first page at one wani, reaching the full bridge halfway.
+        # A two-page deck completes the bridge on page two; a single page stays at one.
+        steps = [(total + 1) / 2, 2].max - 1
+        @sharks = number.zero? ? 0 : [1 + ((SEGMENTS - 1) * (number - 1) + steps - 1) / steps, SEGMENTS].min
+        @rabbit_fraction = (2.0 * number / total - 1).clamp(0, 1)
+      end
+    end
+  end
+end

data/lib/wani/browser/fonts.rb

@@ -0,0 +1,60 @@
+require "json"
+require_relative "../core/fonts"
+
+module Wani
+  module Browser
+    class Fonts
+      def initialize(document, &warn)
+        @document, @warn = document, warn
+      end
+
+      def apply(settings, sections)
+        weights = [settings.fetch("title-weight", 700), settings.fetch("body-weight", 400)]
+        weight_style = @document.createElement("style")
+        weight_style[:textContent] = ".slide .title { font-weight: #{weights[0]}; } .slide .body { font-weight: #{weights[1]}; }"
+        @document[:head].appendChild(weight_style)
+        name = settings["default"]
+        return unless name
+        response = JS.global.fetch("/talk/fonts.json").await
+        raise "フォント登録情報を読み込めません" unless response[:ok] == JS::True
+        registry = JSON.parse(response.text.await.to_s)
+        entry = Core::Fonts.resolve(registry, name)
+        unless entry
+          @warn.call("未登録のフォント: #{name}。代替フォントを使用します")
+          return
+        end
+        link = @document.createElement("link")
+        link[:rel] = "stylesheet"
+        link[:href] = "/talk/#{entry.fetch('stylesheet')}"
+        loaded = JS.global[:Promise].new do |resolve, _reject|
+          link.addEventListener("load", ->(_) { resolve.apply(true); nil }, { once: true }.to_js)
+          link.addEventListener("error", ->(_) { resolve.apply(false); nil }, { once: true }.to_js)
+          JS.global.setTimeout(-> { resolve.apply(false); nil }, 20_000)
+          @document[:head].appendChild(link)
+        end.await
+        raise "CSSを読み込めません" unless loaded == JS::True
+        family = JSON.generate(entry.fetch("css_family"))
+        # All slide and note characters are supplied, including characters in hidden slides.
+        text = sections.map { |section| section[:textContent].to_s }.join
+        entry.fetch("styles", ["normal"]).each do |style|
+          ([400, 700] + weights).uniq.each do |weight|
+            loading = @document[:fonts].load("#{style} #{weight} 16px #{family}", text)
+            timeout = JS.global[:Promise].new do |resolve, _reject|
+              JS.global.setTimeout(-> { resolve.apply(false); nil }, 20_000)
+            end
+            faces = JS.global[:Promise].race([loading, timeout].to_js).await
+            raise "フォント読み込みがタイムアウトしました" if faces == JS::False
+            raise "対応するフォントがありません" if faces[:length].to_i.zero? && !text.empty?
+          end
+        end
+        @document[:fonts][:ready].await
+        style = @document.createElement("style")
+        style[:textContent] = %(.slide .title, .slide .body { font-family: #{family}, "IBM Plex Sans JP", sans-serif; })
+        @document[:head].appendChild(style)
+      rescue => error
+        link.remove if link
+        @warn.call("フォントを読み込めませんでした: #{name} (#{error.message})。代替フォントを使用します")
+      end
+    end
+  end
+end

data/lib/wani/browser/layout.rb

@@ -0,0 +1,107 @@
+module Wani
+  module Browser
+    class Layout
+      WIDTH = 1920
+      HEIGHT = 1080
+      BODY_MIN = 16
+      BODY_MAX = 160
+      TITLE_MIN = 24
+      TITLE_MAX = 220
+
+      def initialize(document, &warn)
+        @document, @warn = document, warn
+      end
+
+      def wait_assets(root)
+        unless @fonts_loaded
+          # Hidden slide titles do not trigger font downloads. Load both weights
+          # explicitly before fitting, including Japanese glyphs in the request.
+          family = JS.global.getComputedStyle(@document[:documentElement])[:fontFamily].to_s
+          [400, 700].each do |weight|
+            begin
+              @document[:fonts].load("#{weight} 16px #{family}", "日本語 ABC").await
+            rescue JS::Error
+              @warn.call("フォントを読み込めませんでした。代替フォントを使用します (#{weight})")
+            end
+          end
+          @fonts_loaded = true
+        end
+        @document[:fonts][:ready].await
+        root.querySelectorAll("img").to_a.each do |image|
+          unless image[:complete] == JS::True
+            JS.global[:Promise].new do |resolve, _reject|
+              settled = false
+              finish = -> do
+                unless settled
+                  settled = true
+                  resolve.apply(nil)
+                end
+                nil
+              end
+              image.addEventListener("load", ->(_event) { finish.call }, { once: true }.to_js)
+              image.addEventListener("error", ->(_event) { finish.call }, { once: true }.to_js)
+              JS.global.setTimeout(-> { finish.call }, 15_000)
+            end.await
+          end
+          @warn.call("画像の読み込みに失敗しました: #{image.getAttribute('src')}") if image[:naturalWidth].to_i.zero?
+        end
+      end
+
+      def fit_slide(section, number)
+        section[:style][:display] = "flex"
+        title = section.querySelector(".title")
+        unless title[:style][:display].to_s == "none"
+          fit_font(title, TITLE_MIN, TITLE_MAX)
+          @warn.call("スライド #{number}: タイトルが収まりません: #{title[:textContent]}") unless fits?(title)
+        end
+        body = section.querySelector(".body")
+        fit_images(body)
+        fit_font(body, BODY_MIN, BODY_MAX)
+        @warn.call("スライド #{number}: 本文が収まりません: #{body[:textContent].to_s[0, 120]}") unless fits?(body)
+        section[:style][:display] = ""
+      end
+
+      def scale
+        viewport = @document.getElementById("viewport")
+        style = JS.global.getComputedStyle(viewport)
+        width = viewport[:clientWidth].to_f - style[:paddingLeft].to_s.to_f - style[:paddingRight].to_s.to_f
+        height = viewport[:clientHeight].to_f - style[:paddingTop].to_s.to_f - style[:paddingBottom].to_s.to_f
+        ratio = [width / WIDTH, height / HEIGHT].min
+        @document.getElementById("stage")[:style][:transform] = "scale(#{[ratio, 0.01].max})"
+      end
+
+      private
+
+      def fits?(node)
+        node[:scrollWidth].to_i <= node[:clientWidth].to_i + 1 && node[:scrollHeight].to_i <= node[:clientHeight].to_i + 1
+      end
+
+      def fit_font(node, minimum, maximum)
+        low, high, best = minimum, maximum, minimum
+        while low <= high
+          middle = (low + high) / 2
+          node[:style][:fontSize] = "#{middle}px"
+          if fits?(node)
+            best, low = middle, middle + 1
+          else
+            high = middle - 1
+          end
+        end
+        node[:style][:fontSize] = "#{best}px"
+      end
+
+      def fit_images(body)
+        images = body.querySelectorAll("img").to_a
+        return if images.empty?
+        mixed = !body[:textContent].to_s.strip.empty?
+        budget = body[:clientHeight].to_f * (mixed ? 0.45 : 0.85) / images.length
+        images.each do |image|
+          next if image[:naturalWidth].to_i.zero? || image[:naturalHeight].to_i.zero?
+          ratio = [body[:clientWidth].to_f / image[:naturalWidth].to_f, budget / image[:naturalHeight].to_f].min
+          image[:style][:width] = "#{image[:naturalWidth].to_f * ratio}px"
+          image[:style][:height] = "#{image[:naturalHeight].to_f * ratio}px"
+        end
+      end
+    end
+  end
+end

data/lib/wani/browser/presentation_timer.rb

@@ -0,0 +1,66 @@
+module Wani
+  module Browser
+    class Application
+      private
+
+      def start_timer
+        return if @presentation.time_limit.zero?
+
+        @deadline = JS.global[:Date].now.to_f + @presentation.time_limit * 60_000
+        element("resume-slides").addEventListener("click") { go(@index) }
+        @timer_callback = -> { tick_timer }
+        @timer_id = JS.global.setInterval(@timer_callback, 200)
+        # Check immediately when returning from a background tab, whose timers may be throttled.
+        @document.addEventListener("visibilitychange") { tick_timer unless @timer_finished }
+        update_timer_for_slide
+      end
+
+      def update_timer_for_slide
+        return unless @deadline && !@timer_finished
+
+        now = JS.global[:Date].now.to_f
+        if @index == @sections.length - 1
+          @timer_paused_at ||= now
+          element("countdown")[:hidden] = true
+        else
+          if @timer_paused_at
+            @deadline += now - @timer_paused_at
+            @timer_paused_at = nil
+          end
+          tick_timer
+        end
+      end
+
+      def tick_timer
+        return if @timer_paused_at || @timer_finished
+
+        remaining = ((@deadline - JS.global[:Date].now.to_f) / 1000).ceil
+        countdown = element("countdown")
+        countdown[:hidden] = remaining > 30 || remaining <= 0
+        if remaining.between?(1, 30) && remaining != @last_countdown
+          @last_countdown = remaining
+          urgent = remaining <= 5
+          countdown[:classList].toggle("urgent", urgent)
+          countdown.setAttribute("aria-label", "発表の残り時間 #{remaining} 秒")
+          if urgent
+            number = @document.createElement("span")
+            number[:textContent] = remaining.to_s
+            number[:style].setProperty("--countdown-peak", "#{(6 - remaining) * 20}vmin")
+            countdown.replaceChildren(number)
+          else
+            countdown[:textContent] = "残り #{remaining} 秒"
+          end
+        end
+        return if remaining > 0
+
+        JS.global.clearInterval(@timer_id)
+        @timer_finished = true
+        @time_expired = true
+        element("time-expired")[:hidden] = false
+        element("viewport")[:inert] = true
+        element("resume-slides").focus
+        update_buttons
+      end
+    end
+  end
+end

data/lib/wani/browser/renderer.rb

@@ -0,0 +1,80 @@
+require_relative "bridge_progress"
+
+module Wani
+  module Browser
+    class Renderer
+      def initialize(document, presentation)
+        @document, @presentation = document, presentation
+      end
+
+      def slide(slide, notes: false)
+        section = @document.createElement("section")
+        section[:className] = "slide"
+        section.setAttribute("aria-label", "スライド #{slide.number}")
+        title = child(section, "h1", "title")
+        title[:textContent] = notes ? "ノート #{slide.number}" : slide.title
+        title[:style][:display] = "none" if title[:textContent].to_s.empty?
+        body = child(section, "div", "body")
+        body[:innerHTML] = notes ? slide.notes_html : slide.html
+        resolve_links(body)
+        footer = child(section, "footer", "slide-footer")
+        child(footer, "span", "page-footnote")[:textContent] = slide.page_footnote
+        number = child(footer, "span", "slide-number")
+        number[:textContent] = "#{slide.number}/#{@presentation.slides.length}"
+        number.setAttribute("aria-label", "#{@presentation.slides.length} ページ中 #{slide.number} ページ")
+        progress = BridgeProgress.new(slide.number, @presentation.slides.length)
+        decorations = child(footer, "span", "decorations")
+        decorations.setAttribute("aria-hidden", "true")
+        decorations.setAttribute("data-slide", slide.number.to_s)
+        decorations.setAttribute("data-sharks", progress.sharks.to_s)
+        decorations.setAttribute("data-rabbit", progress.rabbit_fraction.to_s)
+        decorations[:style].setProperty("--rabbit-progress", progress.rabbit_fraction.to_s)
+        decorations[:style].setProperty("--rabbit-from", progress.rabbit_fraction.to_s)
+        child(decorations, "span", "island island-left")
+        child(decorations, "span", "island island-right")
+        bridge = child(decorations, "span", "bridge")
+        BridgeProgress::SEGMENTS.times do |index|
+          segment = child(bridge, "span", "bridge-segment")
+          segment.setAttribute("data-present", (index >= BridgeProgress::SEGMENTS - progress.sharks).to_s)
+          image = child(segment, "img", "bridge-wani")
+          image[:src] = "/assets/shark.svg"
+          image[:alt] = ""
+        end
+        rabbit = child(child(decorations, "span", "rabbit-position"), "img", "rabbit-image")
+        rabbit[:src] = "/assets/rabbit.svg"
+        rabbit[:alt] = ""
+        section
+      end
+
+      def transition(section, from_number)
+        scene = section.querySelector(".decorations")
+        return if scene == JS::Null
+        previous = BridgeProgress.new(from_number, @presentation.slides.length)
+        current = BridgeProgress.new(scene.getAttribute("data-slide").to_s.to_i, @presentation.slides.length)
+        scene[:style].setProperty("--rabbit-from", previous.rabbit_fraction.to_s)
+        scene.setAttribute("data-moving", (previous.rabbit_fraction != current.rabbit_fraction).to_s)
+        scene.querySelectorAll(".bridge-segment").to_a.each_with_index do |segment, index|
+          appearing = index >= BridgeProgress::SEGMENTS - current.sharks && index < BridgeProgress::SEGMENTS - previous.sharks
+          segment.setAttribute("data-appearing", appearing.to_s)
+        end
+      end
+
+      def resolve_links(root)
+        root.querySelectorAll("img, a").to_a.each do |node|
+          attribute = node[:tagName].to_s == "IMG" ? "src" : "href"
+          value = node.getAttribute(attribute).to_s
+          node.setAttribute(attribute, JS.global[:URL].new(value, "#{JS.global[:location][:origin]}/talk/")[:href])
+        end
+      end
+
+      private
+
+      def child(parent, tag, class_name)
+        element = @document.createElement(tag)
+        element[:className] = class_name
+        parent.appendChild(element)
+        element
+      end
+    end
+  end
+end