hypertext browser and some basic online help

Try browsing to the file '--help'.

https://akkartik.name/post/2025-03-08-devlog
https://akkartik.name/post/luaML2
https://akkartik.name/post/2025-04-04-devlog

array.lua

···
   return false
 end
 
+function array.all(arr, f)
+  for i,x in ipairs(arr) do
+    if not f(x) then
+      return false
+    end
+  end
+  return true
+end
+
 -- like ipairs, but support an index to start iterating from
 -- idx is inclusive; the first call to the iterator will return idx
 function array.each(arr, idx)
···
     function(a, b) return a+b end)
 end
 
-function product(arr, f)
+function array.product(arr, f)
   return array.reduce(array.map(arr, f), 1,
     function(a, b) return a*b end)
 end

defs/0011-on.initialize

···
 		Font = love.graphics.newFont(Font_filename, Font_height)
 	end
 	love.graphics.setFont(Font)
+	initialize_docimg_fonts()
 	Line_height = math.floor(Font_height*1.3)
 	Line_number_padding = Line_number_width*Font:getWidth('m')
 	if love.window.getSafeArea then

defs/0127-one_time_load

···
 	edit.clear(Current_pane.editor_state)
 	local dir = Current_pane.is_stash and Stash_directory or Directory
 	edit.load_file(Current_pane.editor_state, dir..Current_pane.filename)
+	if is_docimg(Current_pane) then
+		Current_pane.docimg_viewport = Viewports[Current_pane.filename]  or {
+			x=0, y=0, w=Safe_width, h=Safe_height,
+			zoom=1.0,
+		}
+		clear_touch_state()  -- decontaminate old viewport
+		load_commands_from_docimg(Current_pane)
+	end
 	-- Disable autosave; undo isn't accessible in mobile devices.
 	Current_pane.editor_state.filename = nil
 	-- Clear some other recent state

defs/0198-draw_docimg

···
 draw_docimg = function()
-	initialize_fonts()
-	if Current_pane.commands == nil or Current_pane.commands.filename ~= Current_pane.filename then
-		if Current_pane.docimg_viewport == nil then
-			Current_pane.docimg_viewport = {
-				x=0, y=0, w=Safe_width, h=Safe_height,
-				zoom=1.0,
-			}
-			clear_touch_state()  -- decontaminate old viewport
-		end
-		load_commands_from_docimg(Current_pane)
-	end
 	for _,cmd in ipairs(Current_pane.commands) do
 		draw_command(
 			Current_pane.docimg_viewport,

defs/0201-load_commands_from_docimg

···
 	if f == nil then error(err) end
 	Current_pane.commands = f()
 	Current_pane.commands.filename = Current_pane.filename
+	infer_blocks(Current_pane.commands)
 	index_nodes(Current_pane.commands)
-	infer_fonts(Current_pane.commands)
 	infer_edges(Current_pane.commands)
 	infer_arrows(Current_pane.commands)
 	infer_viewport(Current_pane.commands)

defs/0202-get_font defs/0202-scaled_font

···
-get_font = function(cmd)
-	local scaled_font_size = docimg_scale(Current_pane.docimg_viewport, cmd.font_size or 21)
+scaled_font = function(font_settings)
+	font_settings = utils.deepcopy(font_settings) or {size=21}
+	local scaled_font_size = docimg_scale(Current_pane.docimg_viewport, font_settings.size)
 	scaled_font_size = math.min(scaled_font_size, 96)
 	scaled_font_size = math.max(scaled_font_size, 8)
 	scaled_font_size = math.floor(scaled_font_size)
···
 		assert(scaled_font_size > 8)
 		scaled_font_size = scaled_font_size - 1
 	end
-	local scaled_font = Fonts[scaled_font_size]
-	assert(scaled_font)
-	return scaled_font
+	font_settings.size = scaled_font_size
+	return font_from_settings(font_settings)
 end

defs/0204-print_cmd

···
-print_cmd = function(v, cmd)
-	local font = cmd.scaled_font
-	local old_font = love.graphics.getFont()
-	love.graphics.setFont(font)
-	if cmd.target then
-		love.graphics.setColor(0,0,1)
-	else
-		love.graphics.setColor(0,0,0)
-	end
-	local x = docimg_vx(v, cmd.x+5)
-	local y = docimg_vy(v, cmd.y+5)
-	if type(cmd.data) ~= 'table' then
-		love.graphics.print(cmd.data, x, y)
-	else
-		for _,line in ipairs(cmd.data) do
-			love.graphics.print(line, x, y)
-			y = y+docimg_scale(v, font:getHeight()+5)
-		end
-	end
-	love.graphics.setFont(old_font)
-end

defs/0206-infer_viewport

···
 infer_viewport = function(cmds)
 	assert(#cmds > 0)
 	local xlo, ylo, xhi, yhi = cmds[1].x, cmds[1].y, cmds[1].x, cmds[1].y
+	assert(xlo)
 	for _,cmd in ipairs(cmds) do
 		local b = bounds(cmd)
 		xlo = math.min(xlo, b.x)
 		ylo = math.min(ylo, b.y)
-		xhi = math.max(xhi, b.w and b.x+b.w or b.x)
-		yhi = math.max(yhi, b.y+b.h)
+		xhi = math.max(xhi, b.x+b.width)
+		yhi = math.max(yhi, b.y+b.height)
 	end
-	Current_pane.docimg_viewport_border = {x=xlo, y=ylo, w=xhi-xlo, h=yhi-ylo}
-	Current_pane.docimg_viewport_bounds = {x=xlo-Safe_width/2, y=ylo-Safe_height/2, w=xhi-xlo+Safe_width/2, h=yhi-ylo+Safe_height/2}
+	Current_pane.docimg_viewport_bounds = {x=xlo-Safe_width/2, y=ylo-Safe_height/2, width=xhi-xlo+Safe_width/2, height=yhi-ylo+Safe_height/2}
 end

defs/0208-centroid

···
 centroid = function(rect)
-	return {sx=rect.x+rect.w/2, sy=rect.y+rect.h/2}
+	return {sx=rect.x+rect.width/2, sy=rect.y+rect.height/2}
 end

defs/0209-add_arrow

···
 add_arrow = function(arrows, s2, e2)
 	table.insert(arrows, {type='line',
 		x1=s2.sx, y1=s2.sy,
-		x2=e2.sx, y2=e2.sy})
+		x2=e2.sx, y2=e2.sy,
+		color=Default_foreground_color_slice})
 	-- arrow head
 	local angle = angle(e2.sx, e2.sy, s2.sx, s2.sy)
 	-- e2.sx + D*cos(angle) == s2.sx
···
 		x1=e2.sx, y1=e2.sy,
 		x2=e2.sx+arrow_len*math.cos(angle+d),
 		y2=e2.sy+arrow_len*math.sin(angle+d),
+		color=Default_foreground_color_slice,
 	})
 	table.insert(arrows, {type='line',
 		x1=e2.sx, y1=e2.sy,
 		x2=e2.sx+arrow_len*math.cos(angle-d),
 		y2=e2.sy+arrow_len*math.sin(angle-d),
+		color=Default_foreground_color_slice,
 	})
 end

defs/0212-intersect_with_centroid

···
 	-- collect nearest intersection with all 4 boundaries
 	local candidates = {}
 	local y = y_at_x(sx,sy, c.sx,c.sy, rect.x-10)
-	if y and y >= rect.y-10 and y < rect.y+rect.h+10 then
+	if y and y >= rect.y-10 and y < rect.y+rect.height+10 then
 		table.insert(candidates, {sx=rect.x-10, sy=y})
 	end
-	y = y_at_x(sx,sy, c.sx,c.sy, rect.x+rect.w+10)
-	if y and y >= rect.y-10 and y < rect.y+rect.h+10 then
-		table.insert(candidates, {sx=rect.x+rect.w+10, sy=y})
+	y = y_at_x(sx,sy, c.sx,c.sy, rect.x+rect.width+10)
+	if y and y >= rect.y-10 and y < rect.y+rect.height+10 then
+		table.insert(candidates, {sx=rect.x+rect.width+10, sy=y})
 	end
 	local x = x_at_y(sx,sy, c.sx,c.sy, rect.y-10)
-	if x and x >= rect.x-10 and x < rect.x+rect.w+10 then
+	if x and x >= rect.x-10 and x < rect.x+rect.width+10 then
 		table.insert(candidates, {sx=x, sy=rect.y-10})
 	end
-	x = x_at_y(sx,sy, c.sx,c.sy, rect.y+rect.h+10)
-	if x and x >= rect.x-10 and x < rect.x+rect.w+10 then
-		table.insert(candidates, {sx=x, sy=rect.y+rect.h+10})
+	x = x_at_y(sx,sy, c.sx,c.sy, rect.y+rect.height+10)
+	if x and x >= rect.x-10 and x < rect.x+rect.width+10 then
+		table.insert(candidates, {sx=x, sy=rect.y+rect.height+10})
 	end
 	if #candidates == 0 then
 		-- no intersection; just return the same point

defs/0218-draw_command

···
 draw_command = function(v, cmd)
-	love.graphics.setColor(0,0,0)
+	love.graphics.setColor(select_rgb(Default_background_color, cmd.color or Default_foreground_color_slice))
 	if cmd.type == 'line' then
 		love.graphics.line(
 			docimg_vx(v, cmd.x1),
 			docimg_vy(v, cmd.y1),
 			docimg_vx(v, cmd.x2),
 			docimg_vy(v, cmd.y2))
-	elseif cmd.type == 'label' then
-		print_cmd(v, cmd)
-	else  -- default type is a node, a box that can connect to arrows
-		love.graphics.rectangle('line',
-			docimg_vx(v, cmd.x),
-			docimg_vy(v, cmd.y),
-			docimg_scale(v, cmd.w),
-			docimg_scale(v, cmd.h))
-		print_cmd(v, cmd)
+	elseif cmd.type == 'text' or cmd.type == 'rows' or cmd.type == 'cols' then
+		draw_block(v, cmd)
 	end
 end

defs/0222-within_rect

···
 within_rect = function(rect, x,y)
-  return within_range(x, rect.x, rect.x+rect.w)
-    and within_range(y, rect.y, rect.y+rect.h)
+  return within_range(x, rect.x, rect.x+rect.width)
+    and within_range(y, rect.y, rect.y+rect.height)
 end

defs/0227-send_press_to_docimg

···
 send_press_to_docimg = function(v, x,y)
 	local sx, sy = docimg_sx(v, x), docimg_sy(v, y)
 	for _,cmd in ipairs(Current_pane.commands) do
-		if cmd.target and within_rect(cmd, sx,sy) then
-			if Current_pane.history == nil then
-				Current_pane.history = {}
+		if cmd.type == 'text' or cmd.type == 'rows' or cmd.type == 'cols' then
+			if press_on_block(cmd, sx,sy) then
+				return true
 			end
-			Viewports[Current_pane.filename] = utils.deepcopy(Current_pane.docimg_viewport)
-			local history = Current_pane.history
-			table.insert(history, Current_pane.filename)
-			table.clear(Current_pane)
-			Current_pane.history = history
-			Current_pane.editor_state = code_editor_state()
-			Current_pane.filename = cmd.target
-			one_time_load()
-			Current_pane.docimg_viewport = Viewports[Current_pane.filename]  -- may be nil
-			return true
 		end
 	end
 end

defs/0230-touch_move_on_docimg

···
 			v.zoom = math.max(v.zoom, 0.5)
 			v.zoom = math.min(v.zoom, 3)
 			adjust_viewport(oldzoom)
-			adjust_fonts()
 		elseif Touch_state.first then
 			pan_current_viewport(Touch_state.start[Touch_state.first], x,y)
 		end

defs/0248-initialize_docimg_fonts

···
+initialize_docimg_fonts = function()
+	for _,sz in ipairs(Typographic_scale) do
+		Fonts[sz] = {
+			-- bold?
+			[false]={
+				-- italic?
+				[false]=love.graphics.newFont('fonts/Vera.ttf', sz),
+				[true]=love.graphics.newFont('fonts/Vera-Italic.ttf', sz),
+			},
+			[true]={
+				-- italic?
+				[false]=love.graphics.newFont('fonts/Vera-Bold.ttf', sz),
+				[true]=love.graphics.newFont('fonts/Vera-Bold-Italic.ttf', sz),
+			},
+		}
+	end
+end

defs/0248-initialize_fonts

···
-initialize_fonts = function()
-	if #Fonts > 0 then return end
-	for _,sz in ipairs(Typographic_scale) do
-		Fonts[sz] = love.graphics.newFont(sz)
-	end
-end

defs/0249-infer_fonts

···
-infer_fonts = function(cmds)
-	for _,cmd in ipairs(cmds) do
-		cmd.scaled_font = get_font(cmd)
-	end
-end

defs/0250-adjust_fonts

···
-adjust_fonts = function()
-	assert(Touch_state.zoom_time)
-	if Current_time < Touch_state.zoom_time then return end
-	Touch_state.zoom_time = Current_time + 0.1
-	for _,cmd in ipairs(Current_pane.commands) do
-		cmd.scaled_font = get_font(cmd)
-	end
-end

defs/0252-bounds

···
 		return {
 			x=math.min(cmd.x1, cmd.x2),
 			y=math.min(cmd.y1, cmd.y2),
-			w=math.abs(cmd.x1 - cmd.x2),
-			h=math.abs(cmd.y1 - cmd.y2),
+			width=math.abs(cmd.x1 - cmd.x2),
+			height=math.abs(cmd.y1 - cmd.y2),
 		}
 	else
 		return cmd

defs/0253-clamp_viewport_to_bounds

···
 clamp_viewport_to_bounds = function()
 	local v = Current_pane.docimg_viewport
 	local bounds = Current_pane.docimg_viewport_bounds
-	v.x = math.min(v.x, bounds.x + bounds.w)
+	v.x = math.min(v.x, bounds.x + bounds.width)
 	v.x = math.max(v.x, bounds.x)
-	v.y = math.min(v.y, bounds.y + bounds.h)
+	v.y = math.min(v.y, bounds.y + bounds.height)
 	v.y = math.max(v.y, bounds.y)
 end

defs/0258-set_attrs

···
+set_attrs = function(v, block, attrs, x,y, orig_color, orig_font)
+	if attrs.bg then
+		orig_color = orig_color or {love.graphics.getColor()}
+		if attrs.bg_rgb == nil then
+			attrs.bg_rgb = docimg_color_to_rgb(attrs.bg)
+		end
+		love.graphics.setColor(attrs.bg_rgb)
+		love.graphics.rectangle('fill',
+			docimg_vx(v, x),
+			docimg_vy(v, y),
+			docimg_scale(v, block.width),
+			docimg_scale(v, block.height))
+		love.graphics.setColor(orig_color)
+	end
+	if attrs.border then
+		orig_color = orig_color or {love.graphics.getColor()}
+		if attrs.border_rgb == nil then
+			attrs.border_rgb = select_rgb(attrs.bg, attrs.border)
+		end
+		love.graphics.setColor(attrs.border_rgb)
+		love.graphics.rectangle('line',
+			docimg_vx(v, x),
+			docimg_vy(v, y),
+			docimg_scale(v, block.width),
+			docimg_scale(v, block.height))
+		love.graphics.setColor(orig_color)
+	end
+	if attrs.color then
+		orig_color = orig_color or {love.graphics.getColor()}
+		if attrs.color_rgb == nil then
+			attrs.color_rgb = select_rgb(attrs.bg, attrs.color)
+		end
+		love.graphics.setColor(attrs.color_rgb)
+	elseif attrs.target then
+		orig_color = orig_color or {love.graphics.getColor()}
+		if attrs.color_rgb == nil then
+			attrs.color_rgb = select_rgb(attrs.bg, Default_link_color)
+		end
+		love.graphics.setColor(Default_link_color)
+	end
+	if attrs.font then
+		orig_font = orig_font or love.graphics.getFont()
+		love.graphics.setFont(scaled_font(attrs.font))
+	end
+	return orig_color, orig_font
+end

defs/0259-draw_block

···
+draw_block = function(v, block)
+	local orig_color, orig_font
+	if block.type == 'rows' then
+		orig_color, orig_font = set_attrs(v, block, block, block.x, block.y, orig_color, orig_font)
+		for _,row in ipairs(block) do
+			draw_block(v, row)
+		end
+	elseif block.type == 'cols' then
+		orig_color, orig_font = set_attrs(v, block, block, block.x, block.y, orig_color, orig_font)
+		for _,col in ipairs(block) do
+			draw_block(v, col)
+		end
+	elseif block.type == 'text' then
+		orig_color, orig_font = set_attrs(v, block, block, block.x, block.y, orig_color, orig_font)
+		for _,line in ipairs(block) do
+			for _,screen_line_rect in ipairs(line.rects.screen_line_rects) do
+				for _,char_rect in ipairs(screen_line_rect.char_rects) do
+					set_attrs(v, char_rect, char_rect.attrs, char_rect.x, char_rect.y)
+					if char_rect.data then
+						love.graphics.print(char_rect.data,
+							docimg_vx(v, char_rect.x),
+							docimg_vy(v, char_rect.y))
+					end
+				end
+			end
+		end
+	elseif block.type == 'filler' then
+		orig_color = set_attrs(v, block, block, block.x, block.y, orig_color)
+	else        
+		assert(false, 'unknown type '..block.type)
+	end
+	if orig_font then love.graphics.setFont(orig_font) end
+	if orig_color then love.graphics.setColor(orig_color) end
+end

defs/0260-parse_all_inline_styles

···
+parse_all_inline_styles = function(block)
+	if block.type == 'rows' or block.type == 'cols' then
+		for _,child in ipairs(block) do
+			parse_all_inline_styles(child)
+		end
+	elseif block.type == 'text' then
+		for i,line in ipairs(block) do
+			if type(line) == 'string' then
+				block[i] = {{line, attrs={}}}
+			else
+				assert(line.segments == nil)
+				block[i] = parse_inline_styles(line[1], line.attrs)
+			end
+		end
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0261-parse_inline_styles

···
+-- populate inline styles into segments and map them to values in attrs
+parse_inline_styles = function(text, attrs)
+	local segments = {}
+	local offset = 1 
+	while offset <= #text do
+		local styleStart, nameEnd, styleName = text:find("([%w_]+)@{", offset)
+		if not styleStart then
+			table.insert(segments, {text:sub(offset), attrs={}})
+			break
+		end
+		if styleStart > offset then
+			table.insert(segments, {text:sub(offset, styleStart-1), attrs={}})
+		end
+		local styleEnd = text:find("}", nameEnd)
+		assert(styleEnd, "unbalanced inline style: "..text)
+		local styledText = text:sub(nameEnd+1, styleEnd-1)
+		table.insert(segments, {styledText, attrs=attrs[styleName] or {}})
+		offset = styleEnd+1
+	end
+	return segments
+end

defs/0262-compute_fonts

···
+-- postcondition: every segment of text has font set
+-- default_font can be overridden by internal fonts
+compute_fonts = function(block, default_font)
+	if block.type == 'rows' or block.type == 'cols' then
+		for _,child in ipairs(block) do
+			compute_fonts(child, (block.default and block.default.font) or default_font)
+		end
+	elseif block.type == 'text' then
+		if default_font == nil then
+			-- nothing
+		elseif not block.font then
+			block.font = utils.deepcopy(default_font)
+		elseif block.font and block.font.size then
+			-- ignore default_font when changing font size
+		elseif block.font and not block.font.size then
+			-- inherit default font size
+			block.font.size = default_font.size
+		end
+		assert(block.font, "could not determine font")
+		assert(block.font.size, "could not determine font size")
+		for _,line in ipairs(block) do
+			for _,segment in ipairs(line) do
+				local font = utils.deepcopy(block.font)
+				if segment.attrs.font then
+					assert(segment.attrs.font.size == nil, "inline styles can't change font size")
+					for k,v in pairs(segment.attrs.font) do
+						font[k] = v
+					end
+				end
+				segment.attrs.font = font
+			end
+		end
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0263-compute_colors

···
+-- postcondition: every segment of text has color and bg set
+-- default_color and default_bg can be overridden
+compute_colors = function(block, default_color, default_bg, default_border)
+	if block.type == 'rows' or block.type == 'cols' then
+		block.border = block.border or default_border
+		for _,child in ipairs(block) do
+			compute_colors(child,
+					(block.default and block.default.color) or block.color or default_color,
+					(block.default and block.default.bg) or block.bg or default_bg,
+					(block.default and block.default.border) or block.border or default_border)
+		end
+	elseif block.type == 'text' then
+		block.color = block.color or (block.target and Default_link_color) or default_color
+		block.border = block.border or default_border
+		block.bg = block.bg or default_bg
+		for _,line in ipairs(block) do
+			for _,segment in ipairs(line) do
+				segment.attrs.color = segment.attrs.color or (segment.attrs.target and Default_link_color) or block.color
+				segment.attrs.bg = segment.attrs.bg or block.bg
+			end
+		end
+	elseif block.type == 'filler' then
+		block.border = block.border or default_border
+		block.bg = block.bg or default_bg
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0264-compute_line_heights

···
+-- postcondition: every text descendant has line_height set
+-- default_line_height can be overridden by internal line_heights
+compute_line_heights = function(block, default_line_height)
+	if block.type == 'rows' or block.type == 'cols' then
+		for _,child in ipairs(block) do
+			compute_line_heights(child, (block.default and block.default.line_height) or default_line_height)
+		end
+	elseif block.type == 'text' then
+		block.line_height = block.line_height or default_line_height
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0265-compute_widths

···
+-- postcondition: every rows/cols/text descendant has width set
+-- if a node starts out with width set, it affects its descendants
+-- if a node starts out without width set, it is affected by its descendants
+-- imposed_width overrides any internal widths
+-- default_font can be overridden by internal fonts
+compute_widths = function(block, imposed_width, default_font)
+	if block.type == 'rows' then
+		for _,row in ipairs(block) do
+			compute_widths(row,
+					imposed_width and (imposed_width-Padding_x*2) or block.width,
+					(block.default and block.default.font) or default_font)
+		end
+		if imposed_width then
+			block.width = imposed_width
+		else
+			block.width = 0
+			for _,row in ipairs(block) do
+				if row.type ~= 'filler' then
+					block.width = math.max(block.width, row.width)
+				end
+			end
+		end
+		for _,row in ipairs(block) do
+			if row.type == 'filler' then
+				row.width = block.width
+			end
+		end
+		block.width = block.width + Padding_x*2
+	elseif block.type == 'cols' then
+		assert(imposed_width == nil, "don't know how to split up width among cols")
+		for _,col in ipairs(block.data) do
+			compute_widths(col)
+		end
+		block.width = 0
+		for _,col in ipairs(block) do
+			block.width = block.width + col.width
+		end
+		block.width = block.width + Padding_x*2
+	elseif block.type == 'text' then
+		if imposed_width then
+			block.width = imposed_width
+		else
+			-- compute width without wrapping
+			block.width = 0
+			for _,line in ipairs(block) do
+				local width = 0
+				for _,segment in ipairs(line) do
+					local font = font_from_settings(segment.attrs.font)
+					width = width + font:getWidth(segment[1])
+				end
+				block.width = math.max(block.width, width)
+			end
+		end
+		block.width = block.width + Padding_x*2
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0266-compute_rects

···
+compute_rects = function(block)
+	if block.type == 'rows' or block.type == 'cols' then
+		for _,child in ipairs(block) do
+			compute_rects(child)
+		end
+	elseif block.type == 'text' then
+		compute_rects_for_text(block)
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0267-compute_rects_for_line

···
+compute_rects_for_line = function(line, text)
+	-- construct line without attrs as a single string for word-wrap calculations
+	local line_text = {}
+	for _, segment in ipairs(line) do
+		table.insert(line_text, segment[1])
+	end
+	line_text = table.concat(line_text)
+	--
+	local screen_lines = {}
+	local curr_screen_line = {}
+	local x, y = 0, 0
+	local pos = 0
+	for _,segment in ipairs(line) do
+		local font = font_from_settings(segment.attrs.font)
+		for p,char in my_utf8.chars(segment[1]) do
+			pos = pos+1
+			assert(my_utf8.codepoint(line_text, pos) == char)
+			local w = font:getWidth(char)
+			if char:match('%s') then
+				if should_word_wrap(font, text.width, x, line_text, pos) then
+					table.insert(curr_screen_line,
+						{x=x, y=y, width=w, height=text.line_height, data=char, attrs=segment.attrs})
+					table.insert(screen_lines,
+						{x=0, y=y, width=text.width, height=text.line_height, char_rects=curr_screen_line})
+					curr_screen_line = {}
+					x = 0
+					y = y + text.line_height
+				else
+					table.insert(curr_screen_line, {x=x, y=y, width=w, height=text.line_height, data=char, attrs=segment.attrs})
+					x = x + w
+				end
+			else
+				if x+w > text.width then
+					assert(pos > 1)
+					table.insert(curr_screen_line,
+						{x=x, y=y, width=text.width-x, height=text.line_height, attrs=segment.attrs})  -- filler
+					table.insert(screen_lines,
+						{x=0, y=y, width=text.width, height=text.line_height, char_rects=curr_screen_line})
+					curr_screen_line = {}
+					x = 0
+					y = y + text.line_height
+				else
+					-- nothing
+				end
+				table.insert(curr_screen_line, {x=x, y=y, width=w, height=text.line_height, data=char, attrs=segment.attrs})
+				x = x + w
+			end
+		end
+	end
+	table.insert(screen_lines,
+		{x=0, y=y, width=text.width, height=text.line_height, char_rects=curr_screen_line})
+	y = y + text.line_height
+	line.rects = {x=0, y=0, width=text.width, height=y, screen_line_rects=screen_lines}
+end

defs/0268-compute_rects_for_text

···
+compute_rects_for_text = function(text)
+	for _,line in ipairs(text) do
+		compute_rects_for_line(line, text)
+	end
+end

defs/0269-should_word_wrap

···
+-- check if space character at pos/x is final possible candidate for word wrapping before right margin
+should_word_wrap = function(font, width, x, line, pos)
+	if x < 0.8*width then return false end
+	local offset = my_utf8.offset(line, pos+1)
+	local s = line:match('%S*', offset)
+	local w = font:getWidth(s)
+	return x+w > width
+end

defs/0270-compute_heights

···
+-- postcondition: every rows/cols/text descendant has height set
+-- row/cols nodes never start out with height set
+-- text height is sum of heights of screen lines
+compute_heights = function(block)
+	if block.type == 'rows' then
+		for _,row in ipairs(block) do
+			compute_heights(row)
+		end
+		block.height = 0
+		for _,row in ipairs(block) do
+			block.height = block.height + row.height
+		end
+		block.height = block.height + Padding_y*2
+	elseif block.type == 'cols' then
+		for _,col in ipairs(block) do
+			compute_heights(col)
+		end
+		block.height = 0
+		for _,col in ipairs(block) do
+			if col.type ~= 'filler' then
+				block.height = math.max(block.height, col.height)
+			end
+		end
+		for _,col in ipairs(block) do
+			if col.type == 'filler' then
+				col.height = block.height
+			end
+		end
+		block.height = block.height + Padding_y*2
+	elseif block.type == 'text' then
+		block.height = 0
+		for _,line in ipairs(block) do
+			block.height = block.height + line.rects.height
+		end
+		block.height = block.height + Padding_y*2
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0271-font_from_settings

···
+font_from_settings = function(font_settings)
+	return Fonts[font_settings.size][bool(font_settings.bold)][bool(font_settings.italic)]
+end

defs/0272-bool

···
+bool = function(val)
+	return not not val
+end

defs/0273-Padding_x

···
+Padding_x = 5

defs/0274-Padding_y

···
+Padding_y = 5

defs/0275-Default_link_color

···
+Default_link_color = 'blue'

defs/0276-infer_blocks

···
+infer_blocks = function(cmds)
+	for _,cmd in ipairs(cmds) do
+		if cmd.type == 'text' or cmd.type == 'rows' or cmd.type == 'cols' then
+			parse_all_inline_styles(cmd)
+			-- once we have inline styles we can compute colors of segments
+			compute_colors(cmd,
+				Default_foreground_color_slice,
+				Default_background_color)
+			-- once we have inline styles we can compute fonts of segments
+			compute_fonts(cmd, {size=21})
+			-- once we have fonts for everything we can compute widths
+			compute_widths(cmd)
+			compute_line_heights(cmd, 35)
+			-- once we have widths we can figure out where to wrap lines
+			compute_rects(cmd)
+			-- once we know line heights and where lines wrap we can compute heights of all blocks
+			compute_heights(cmd)
+			-- once we know widths and heights we can compute the position of all blocks
+			-- If the markup contains a single block you don't need to specify an x and y at the topmost level.
+			-- But if you do anything more complex than that you probably should.
+			compute_positions(cmd, cmd.x or 60, cmd.y or 60)
+		end
+	end
+end

defs/0278-switch_to_file

···
+switch_to_file = function(filename)
+	if Current_pane.history == nil then
+		Current_pane.history = {}
+	end
+	Viewports[Current_pane.filename] = utils.deepcopy(Current_pane.docimg_viewport)
+	local history = Current_pane.history
+	table.insert(history, Current_pane.filename)
+	table.clear(Current_pane)
+	Current_pane.history = history
+	Current_pane.editor_state = code_editor_state()
+	Current_pane.filename = filename
+	one_time_load()
+end

defs/0279-press_on_block

···
+press_on_block = function(block, x,y)
+	if block.type == 'rows' then
+		for _,row in ipairs(block) do
+			if press_on_block(row, x,y) then
+				return true
+			end
+		end
+	elseif block.type == 'cols' then
+		for _,col in ipairs(block) do
+			if press_on_block(col, x,y) then
+				return true
+			end
+		end
+	elseif block.type == 'text' then
+		if block.target and within_rect(block, x,y) then
+			print('click on block '..block.target)
+			switch_to_file(block.target)
+			return true
+		end
+		for _,line in ipairs(block) do
+			for _,screen_line_rect in ipairs(line.rects.screen_line_rects) do
+				for _,char_rect in ipairs(screen_line_rect.char_rects) do
+					if within_rect(char_rect, x,y) then
+						if char_rect.attrs.target then
+							print('click on '..char_rect.attrs.target)
+							switch_to_file(char_rect.attrs.target)
+							return true
+						end
+					end
+				end
+			end
+		end
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0280-compute_positions

···
+compute_positions = function(block, x,y)
+	block.x, block.y = x, y
+	x, y = x + Padding_x, y + Padding_y
+	if block.type == 'rows' then
+		for _,row in ipairs(block) do
+			compute_positions(row, x,y)
+			y = y + row.height
+		end
+	elseif block.type == 'cols' then
+		for _,col in ipairs(block) do
+			compute_positions(col, x,y)
+			x = x + col.width
+		end
+	elseif block.type == 'text' then
+		for _,line in ipairs(block) do
+			for _,screen_line_rect in ipairs(line.rects.screen_line_rects) do
+				x = block.x + Padding_x
+				for _,char_rect in ipairs(screen_line_rect.char_rects) do
+					char_rect.x, char_rect.y = x, y
+					x = x + char_rect.width
+				end
+				y = y + screen_line_rect.height
+			end
+		end
+	elseif block.type == 'filler' then
+		-- nothing
+	else
+		assert(false, 'unknown type '..block.type)
+	end
+end

defs/0281-in_gamut

···
+in_gamut = function(r,g,b)
+	return 0 <= r and r <= 1
+		and 0 <= g and g <= 1
+		and 0 <= b and b <= 1
+end

defs/0282-clamp

···
+clamp = function(val, min, max)
+	return math.max(min, math.min(val, max))
+end

defs/0283-linear_to_sRGB

···
+linear_to_sRGB = function(val)
+	if val <= 0.0031308 then
+		return val * 12.92
+	else
+		return 1.055 * (val ^ (1/2.4)) - 0.055
+	end
+end

defs/0284-sRGB_to_linear

···
+-- https://stackoverflow.com/questions/12524623/what-are-the-practical-differences-when-working-with-colors-in-a-linear-vs-a-no
+sRGB_to_linear = function(val)
+	if val <= 0.04045 then
+		return val / 12.92
+	else
+		return ((val + 0.055) / 1.055) ^ 2.4
+	end
+end

defs/0285-luminance

···
+-- https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-relative-luminance
+luminance = function(r, g, b)
+  r = sRGB_to_linear(r)
+  g = sRGB_to_linear(g)
+  b = sRGB_to_linear(b)
+  return 0.2126*r + 0.7152*g + 0.0722*b
+end

defs/0286-contrast_ratio

···
+-- https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-contrast-ratio
+contrast_ratio = function(r1,g1,b1, r2,g2,b2)
+	local l1 = luminance(r1,g1,b1)
+	local l2 = luminance(r2,g2,b2)
+	if l1 < l2 then
+		l1, l2 = l2, l1
+	end
+	return (l1+0.05) / (l2+0.05)
+end

defs/0287-oklch_to_sRGB

···
+-- https://bottosson.github.io/posts/oklab
+oklch_to_sRGB = function(L, C, h)
+	local hRad = math.rad(h)
+	-- Oklch -> Oklab
+	local a = C * math.cos(hRad)
+	local b = C * math.sin(hRad)
+	-- Oklab -> lms
+	local l = L + 0.3963377774 * a + 0.2158037573 * b
+	local m = L - 0.1055613458 * a - 0.0638541728 * b
+	local s = L - 0.0894841775 * a - 1.2914855480 * b
+	l, m, s = l^3, m^3, s^3  -- non-linearity
+	-- lms -> linear
+	local r_l =  4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s
+	local g_l = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s
+	local b_l = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
+	-- linear -> sRGB
+	local r = clamp(linear_to_sRGB(r_l), 0, 1)
+	local g = clamp(linear_to_sRGB(g_l), 0, 1)
+	local b = clamp(linear_to_sRGB(b_l), 0, 1)
+	return r, g, b
+end

defs/0288-Hue_map

···
+Hue_map = {
+  red = 30,
+  orange = 60,
+  yellow = 90,
+  green = 150,
+  cyan = 200,
+  blue = 250,
+  purple = 300,
+  magenta = 330
+}

defs/0289-parse_docimg_color

···
+-- Parse a particular syntax representing a color in perceptually uniform Oklch space. Oklch space has 3 dimensions:
+-- perceptual lightness (L)
+-- chromatic intensity (C)
+-- hue or color (h)
+--
+-- This syntax contains these components in reverse order, separated by colons: 'h:C:L'
+-- 
+--  h can take one of 8 values: red orange yellow green cyan blue purple magenta
+-- C is on an 8 point scale from 0 to 7
+-- L is on an 8 point scale from 0 to 7
+-- Example: 'red:8:7'
+--
+-- One special case is greyscale, which doesn't get a chromatic intensity. Black is 'grey:0' and white is 'grey:7'.
+--
+-- This function also parses incomplete colors which represent subspaces. The hue is always required.
+parse_docimg_color = function(color_str)
+  local parts = {}
+  for part in color_str:gmatch('[^:]+') do
+    table.insert(parts, part)
+  end
+  local result
+  local h = parts[1]:lower()
+  if h == 'grey' or h == 'gray' then
+    result = {
+      h = --[[can be anything]] 0,
+      C = 0,
+      L = tonumber(parts[2]),
+    }
+  else
+    result = {
+      h = Hue_map[h],
+      C = tonumber(parts[2]),
+      L = tonumber(parts[3]),
+    }
+    assert(result.h, 'unknown hue '..parts[1])
+    if result.C then
+      result.C = result.C/7 * 0.3
+    else
+      result.C = 0.3  -- max chroma
+    end
+  end
+  if result.L then
+    result.L = result.L/7
+  end
+  return result
+end

defs/0290-convert_rgb

···
+convert_rgb = function(c)
+  local r, g, b = oklch_to_sRGB(c.L, c.C, c.h)
+  return {r, g, b}
+end

defs/0291-function

···
+function select_lightness(bg, fg)
+	local target_contrast = 7
+	bg, fg = utils.deepcopy(bg), utils.deepcopy(fg)
+	bg.r, bg.g, bg.b = oklch_to_sRGB(bg.L, bg.C, bg.h)
+	local ls
+	if bg.L < 0.5 then
+		ls = {0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1.0}
+	else
+		ls = {0.45, 0.4, 0.35, 0.3, 0.25, 0.2, 0.15, 0.1, 0.05, 0}
+	end
+	for _, fg_l in ipairs(ls) do
+		fg.r, fg.g, fg.b = oklch_to_sRGB(fg_l, fg.C, fg.h)
+		if in_gamut(fg.r, fg.g, fg.b) then
+			local contrast = contrast_ratio(bg.r, bg.g, bg.b, fg.r, fg.g, fg.b)
+			if contrast >= target_contrast then
+				return {fg.r, fg.g, fg.b}
+			end
+		end
+	end
+end

defs/0292-select_chroma_lightness

···
+select_chroma_lightness = function(bg, fg)
+	local dchromas = {0.05, -0.05, 0.1, -0.1, 0.15, -0.15, 0.2, -0.2, 0.25, -0.25}
+	for _, dchroma in ipairs(dchromas) do
+		if 0 <= fg.C+dchroma and fg.C+dchroma <= 0.5 then
+			local result = select_lightness(bg, {h=fg.h, C=fg.C+dchroma})
+			if result then return result end
+		end
+	end
+end

defs/0293-select_hue_chroma_lightness

···
+select_hue_chroma_lightness = function(bg, fg)
+	local dhues = {5, -5, 10, -10, 15, -15}
+	for _, dhue in ipairs(dhues) do
+		local result = select_chroma_lightness(bg, {h=fg.h+dhue, C=fg.C})
+		if result then return result end
+	end
+end

defs/0294-select_lightness

···
+select_lightness = function(bg, fg)
+	local target_contrast = 7
+	bg, fg = utils.deepcopy(bg), utils.deepcopy(fg)
+	bg.r, bg.g, bg.b = oklch_to_sRGB(bg.L, bg.C, bg.h)
+	local ls
+	if bg.L < 0.5 then
+		ls = {0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1.0}
+	else
+		ls = {0.45, 0.4, 0.35, 0.3, 0.25, 0.2, 0.15, 0.1, 0.05, 0}
+	end
+	for _, fg_l in ipairs(ls) do
+		fg.r, fg.g, fg.b = oklch_to_sRGB(fg_l, fg.C, fg.h)
+		if in_gamut(fg.r, fg.g, fg.b) then
+			local contrast = contrast_ratio(bg.r, bg.g, bg.b, fg.r, fg.g, fg.b)
+			if contrast >= target_contrast then
+				return {fg.r, fg.g, fg.b}
+			end
+		end
+	end
+end

defs/0295-docimg_color_to_rgb

···
+docimg_color_to_rgb = function(color_str)
+	return convert_rgb(parse_docimg_color(color_str))
+end

defs/0296-select_rgb

···
+-- Given a spec for a baseline color and a foreground color _slice_, return a specific foreground color in the slice that is sufficiently high-contrast as per WCAG.
+-- For the syntax of the foreground and background specs, see parse_docimg_color.
+select_rgb = function(bg_str, fg_str)
+	local bg = parse_docimg_color(bg_str)
+	assert(bg.L, 'background color must contain a lightness (index 3)')
+	local fg = parse_docimg_color(fg_str)
+	if fg.L then return convert_rgb(fg) end  -- no wiggle room; return the color that came in
+	local result = select_lightness(bg, fg)
+	if result then return result end
+	result = select_chroma_lightness(bg, fg)
+	if result then return result end
+	result = select_hue_chroma_lightness(bg, fg)
+	if result then return result end
+	error('could not find a color; something is wrong')
+end

defs/0297-Default_background_color

···
+Default_background_color = 'grey:7'

defs/0298-Default_foreground_color_slice

···
+Default_foreground_color_slice = 'grey'

fonts/Bitstream Vera License.txt

···
+Bitstream Vera Fonts Copyright
+
+The fonts have a generous copyright, allowing derivative works (as
+long as "Bitstream" or "Vera" are not in the names), and full
+redistribution (so long as they are not *sold* by themselves). They
+can be be bundled, redistributed and sold with any software.
+
+The fonts are distributed under the following copyright:
+
+Copyright
+=========
+
+Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream
+Vera is a trademark of Bitstream, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the fonts accompanying this license ("Fonts") and associated
+documentation files (the "Font Software"), to reproduce and distribute
+the Font Software, including without limitation the rights to use,
+copy, merge, publish, distribute, and/or sell copies of the Font
+Software, and to permit persons to whom the Font Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright and trademark notices and this permission notice
+shall be included in all copies of one or more of the Font Software
+typefaces.
+
+The Font Software may be modified, altered, or added to, and in
+particular the designs of glyphs or characters in the Fonts may be
+modified and additional glyphs or characters may be added to the
+Fonts, only if the fonts are renamed to names not containing either
+the words "Bitstream" or the word "Vera".
+
+This License becomes null and void to the extent applicable to Fonts
+or Font Software that has been modified and is distributed under the
+"Bitstream Vera" names.
+
+The Font Software may be sold as part of a larger software package but
+no copy of one or more of the Font Software typefaces may be sold by
+itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL
+BITSTREAM OR THE GNOME FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL,
+OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT
+SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
+
+Except as contained in this notice, the names of Gnome, the Gnome
+Foundation, and Bitstream Inc., shall not be used in advertising or
+otherwise to promote the sale, use or other dealings in this Font
+Software without prior written authorization from the Gnome Foundation
+or Bitstream Inc., respectively. For further information, contact:
+fonts at gnome dot org.
+
+Copyright FAQ
+=============
+
+   1. I don't understand the resale restriction... What gives?
+
+      Bitstream is giving away these fonts, but wishes to ensure its
+      competitors can't just drop the fonts as is into a font sale system
+      and sell them as is. It seems fair that if Bitstream can't make money
+      from the Bitstream Vera fonts, their competitors should not be able to
+      do so either. You can sell the fonts as part of any software package,
+      however.
+
+   2. I want to package these fonts separately for distribution and
+      sale as part of a larger software package or system.  Can I do so?
+
+      Yes. A RPM or Debian package is a "larger software package" to begin 
+      with, and you aren't selling them independently by themselves. 
+      See 1. above.
+
+   3. Are derivative works allowed?
+      Yes!
+
+   4. Can I change or add to the font(s)?
+      Yes, but you must change the name(s) of the font(s).
+
+   5. Under what terms are derivative works allowed?
+
+      You must change the name(s) of the fonts. This is to ensure the
+      quality of the fonts, both to protect Bitstream and Gnome. We want to
+      ensure that if an application has opened a font specifically of these
+      names, it gets what it expects (though of course, using fontconfig,
+      substitutions could still could have occurred during font
+      opening). You must include the Bitstream copyright. Additional
+      copyrights can be added, as per copyright law. Happy Font Hacking!
+
+   6. If I have improvements for Bitstream Vera, is it possible they might get 
+       adopted in future versions?
+
+      Yes. The contract between the Gnome Foundation and Bitstream has
+      provisions for working with Bitstream to ensure quality additions to
+      the Bitstream Vera font family. Please contact us if you have such
+      additions. Note, that in general, we will want such additions for the
+      entire family, not just a single font, and that you'll have to keep
+      both Gnome and Jim Lyles, Vera's designer, happy! To make sense to add
+      glyphs to the font, they must be stylistically in keeping with Vera's
+      design. Vera cannot become a "ransom note" font. Jim Lyles will be
+      providing a document describing the design elements used in Vera, as a
+      guide and aid for people interested in contributing to Vera.
+
+   7. I want to sell a software package that uses these fonts: Can I do so?
+
+      Sure. Bundle the fonts with your software and sell your software
+      with the fonts. That is the intent of the copyright.
+
+   8. If applications have built the names "Bitstream Vera" into them, 
+      can I override this somehow to use fonts of my choosing?
+
+      This depends on exact details of the software. Most open source
+      systems and software (e.g., Gnome, KDE, etc.) are now converting to
+      use fontconfig (see www.fontconfig.org) to handle font configuration,
+      selection and substitution; it has provisions for overriding font
+      names and subsituting alternatives. An example is provided by the
+      supplied local.conf file, which chooses the family Bitstream Vera for
+      "sans", "serif" and "monospace".  Other software (e.g., the XFree86
+      core server) has other mechanisms for font substitution.

my_utf8.lua

···
   return result
 end
 
-function my_utf8.match_at(s, pos, pat)
+function my_utf8.codepoint(s, pos)
   local start_offset = my_utf8.offset(s, pos)
   local end_offset = my_utf8.offset(s, pos+1)
-  assert(end_offset > start_offset, ('end_offset %d not > start_offset %d'):format(end_offset, start_offset))
-  local curr = s:sub(start_offset, end_offset-1)
-  return curr:match(pat)
+  return s:sub(start_offset, end_offset-1)
+end
+
+function my_utf8.match_at(s, pos, pat)
+  return my_utf8.codepoint(s, pos):match(pat)
 end
 
 -- create a new iterator for s which provides the index and UTF-8 bytes corresponding to each codepoint

screens/--car-array

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > functions@{functions} > array',
+        attrs={
+          Car={target='--carousel'},
+          functions={target='--car-fn'},
+        }},
+    },
+    {type='text', 'some helpers for operating on arrays without modifying them'},
+    {type='text', 'array.find(array, element_or_predicate)', font={size=24}},
+    {type='text', 'array.any(array, predicate)', font={size=24}},
+    {type='text', 'array.all(array, predicate)', font={size=24}},
+    {type='text', 'array.each(array, starting_index)', font={size=24}},
+    {type='text', 'array.join(array1, array2)', font={size=24}},
+    {type='text', 'array.map(array, f)', font={size=24}},
+    {type='text', 'array.reduce(array, init, f)', font={size=24}},
+    {type='text', 'array.keep(array, f)', font={size=24}},
+    {type='text', 'array.remove(array, f)', font={size=24}},
+  }
+}

screens/--car-fn

···
+{type='rows', default={font={size=21}, line_height=35},
+  {type='text', font={size=28}, line_height=50,
+    {'Car@{Lua Carousel} > variables',
+      attrs={
+        Car={target='--carousel'},
+      }},
+  },
+  {type='filler', height=15},
+  {type='rows', width=350, default={border='grey'},
+    {type='text', 'miscellaneous utilities', target='--car-utils'},
+    {type='text', 'array', target='--car-array'},
+    {type='text', 'Unicode', target='--car-utf8'},
+{
+      {type='text', 'save_wav()', target='--car-wav'},
+    },
+  }
+}

screens/--car-handler

···
+{
+  {type='rows', width=500, default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > handlers',
+        attrs={
+          Car={target='--carousel'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='rows',
+      {type='text', 'Define these functions to have them called many times a second:'},
+      {type='filler', height=45},
+      {type='rows', default={font={size=24}},
+        {type='text', 'function car.draw()'},
+        {type='text', 'function car.update(dt)', target='--car-update'},
+      },
+    },
+    {type='filler', height=10},
+    {type='rows',
+      {type='text', 'on input events:'},
+      {type='text', border='grey', 'mouse/touch handlers', target='--car-touch'},
+      {type='text', border='grey', 'keyboard handlers', target='--car-kbd'},
+    },
+  }
+}

screens/--car-kbd

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > handlers@{handlers} > keyboard',
+        attrs={
+          Car={target='--carousel'},
+          handlers={target='--car-handler'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'Define these functions to have them called on keyboard events:'},
+    {type='text', 'function car.keychord_press(chord, key)', font={size=24}},
+    {type='text', "  - chord: combinations of modifiers and key separated by '-'", line_height=20},
+    {type='text', "    modifiers: 'C': ctrl; 'M': alt; 'S': shift; 's': super/cmd/windows in that order", line_height=20},
+    {type='text', "    e.g. C-z (ctrl + z); M-b (alt + b); C-M-k (ctrl + alt + k)"},
+    {type='text', 'function car.text_input(t)', font={size=24}},
+    {type='text', '  - t: Unicode text of keypress (including shift, etc.)'},
+    {type='text', 'function car.key_release(key)', font={size=24}},
+  }
+}

screens/--car-touch

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > handlers@{handlers} > touch',
+        attrs={
+          Car={target='--carousel'},
+          handlers={target='--car-handler'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'Define these functions to have them called on touch events:'},
+    {type='text', 'function car.mouse_press(x,y, mouse_button)', font={size=24}},
+    {type='text', '    called before car.touch_press on mobile devices'},
+    {type='text', 'function car.mouse_release(x,y, mouse_button)', font={size=24}},
+    {type='text', '    called before car.touch_release on mobile devices'},
+    {type='text', 'function car.mouse_move(x,y, dx,dy)', font={size=24}},
+    {type='text', 'function car.mouse_wheel_move(dx,dy)', font={size=24}},
+    {type='text', 'function car.touch_press(id, x,y, dx,dy, pressure)', font={size=24}},
+    {type='text', 'function car.touch_release(id, x,y, dx,dy, pressure)', font={size=24}},
+    {type='text', 'function car.touch_move(id, x,y, dx,dy, pressure)', font={size=24}},
+  }
+}

screens/--car-update

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > handlers@{handlers} > car.update(dt)',
+        attrs={
+          Car={target='--carousel'},
+          handlers={target='--car-handler'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'arguments:'},
+    {type='text', '- dt: time in seconds since previous call to car.update'},
+  }
+}

screens/--car-utf8

···
+{
+  {type='rows', width=800, default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > functions@{functions} > Unicode',
+        attrs={
+          Car={target='--carousel'},
+          functions={target='--car-fn'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text',
+      {"Characters are complex. Lua strings are arrays of bytes, but to manage text in a variety of languages it's more convenient to work with em@{Unicode codepoints}.",
+        attrs={
+          em={font={italic=true}},
+        }}},
+    {type='filler', height=15},
+    {type='text', 'my_utf8.offset(text, index)', font={size=24}},
+    {type='text', '    Like utf8.offset, converts index in code points to index in bytes.'},
+    {type='text', '    Unlike utf8.offset, throws an error if index is out of bounds.'},
+    {type='filler', height=10},
+    {type='text', 'my_utf8.match_at(text, pos, pattern)', font={size=24}},
+    {type='text', '    Checks if pattern matches text at index pos (counting codepoints)'},
+    {type='filler', height=10},
+    {type='text', 'my_utf8.chars(s, startpos)', font={size=24}},
+    {type='text', '    Returns an iterator over codepoints in s'},
+  }
+}

screens/--car-utils

···
+{
+  {type='rows', width=800, default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > functions@{functions} > misc utilities',
+        attrs={
+          Car={target='--carousel'},
+          functions={target='--car-fn'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'utils.deepcopy(obj)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'utils.set_color_from_table({r=.., g=.., b=..})', font={size=24}},
+    {type='text',
+      {'    sets color using a table; compare setColor@{love.graphics.setColor}',
+        attrs={
+          setColor={target='--love-graphics-settings'},
+        }}},
+    {type='filler', height=10},
+    {type='text', 'utils.width(text)', font={size=24}},
+    {type='text', '    returns the width occupied by text in the current font'},
+  }
+}

screens/--car-var

···
+{
+  {type='rows', width=500, default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > variables',
+        attrs={
+          Car={target='--carousel'},
+          functions={target='--car-fn'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'Safe_width, Safe_height', font={size=24}},
+    {type='text', '    window dimensions'},
+    {type='filler', height=10},
+    {type='text', 'Menu_bottom', font={size=24}},
+    {type='text', '    how far down the green menu extends'},
+  }
+}

screens/--car-wav

···
+{
+  {type='rows', width=800, default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Car@{Lua Carousel} > functions@{functions} > save_wav',
+        attrs={
+          Car={target='--carousel'},
+          functions={target='--car-fn'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'A little helper for saving .wav sound files from LÖVE Recording Devices.'},
+    {type='filler', height=35},
+    {type='text', 'save_wav(filename, sounddata)', font={size=24}},
+    {type='filler', height=15},
+    {type='text', 'example usage:'},
+    {type='text', '  local inputs = love.audio.getRecordingDevices()'},
+    {type='text', '  local recording_device = inputs[1]'},
+    {type='text', '  recording_device:start()'},
+    {type='text', '  ... say something ...'},
+    {type='text', '  recording_device:stop()'},
+    {type='text', "  save_wav('filename1', recording_device:getData())"},
+    {type='filler', height=15},
+    {type='text', 'On phones, filename1 may only be accessible within this app.'},
+  }
+}

screens/--carousel

···
+{
+  {type='rows', width=500, default={font={size=21}, line_height=35},
+    {type='text', 'Lua Carousel', font_size=24},
+    {type='text', 'akkartik.name (2023)'},
+    {type='rows', default={border='grey'},
+      {type='text', border='grey', 'functions that get called for you', target='--car-handler'},
+      {type='text', border='grey', 'special variables you can read', target='--car-var'},
+      {type='text', border='grey', 'functions you can call', target='--car-fn'},
+    },
+  }
+}

screens/--help

···
+{
+  {type='rows', x=50, y=60,
+    {type='text', 'Your context', height=35, font_size=28},
+    {type='filler', height=15},
+    {type='rows', width=500,
+      {type='text', '---> you are here <---', height=35},
+      {type='text', border='grey', 'Lua Carousel', height=35, target='--carousel'},
+      {type='text', border='grey', 'LÖVE', height=35, target='--love'},
+      {type='text', border='grey', 'Lua', height=35, target='--lua'},
+      {type='text', border='grey', 'Operating System', height=35},
+      {type='text', border='grey', 'The nature of human beings', height=35},
+      {type='text', border='grey', 'Reality', height=35},
+    },
+    {type='filler', height=35},
+    {type='rows', width=500, font_size=24,
+      {type='text', 'This is likely confusing. Sorry!', height=35},
+      {type='text', 'Ask me for help: akkartik.name/contact', height=35},
+      {type='text', 'You can do this!', height=35},
+    },
+  }
+}

screens/--love

···
+{
+  {type='rows', width=500, default={font={size=21}, line_height=35},
+    {type='text', 'LÖVE game engine', font={size=28}},
+    {type='text', 'love2d.org (2008)'},
+    {type='rows', width=200,
+      {type='text', border='grey', 'effects', target='--love-output'},
+      {type='text', border='grey', 'sensors', target='--love-input'},
+      {type='text', border='grey', 'utf8', target='--love-utf8'},
+      {type='text', border='grey', 'multitasking', target='--love-thread'},
+      {type='text', border='grey', 'random', target='--love-random'},
+    },
+  }
+}

screens/--love-audio

···
+{
+  {type='rows', width=600, default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects@{effects} > sound',
+        attrs={
+          LOVE={target='--love'},
+          effects={target='--love-output'},
+        }},
+    },
+    {type='text', 'source = love.audio.newSource(filename, type)', font={size=24}},
+    {type='text', '    create a new "source" you can send to speakers', line_height=20},
+    {type='text', '    type: "static" or "streaming"'},
+    {type='text', 'love.audio.play(source)', font={size=24}},
+    {type='text', '    you can play multiple sources at once'},
+    {type='text', 'sources table = love.audio.pause()', font={size=24}},
+    {type='text', 'love.audio.stop()', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'devices table = love.audio.getRecordingDevices()', font={size=24}},
+    {type='text', '    list microphones available for recording audio from'},
+    {type='text', 'recordingDevice:start()', font={size=24}},
+    {type='text', '    begin recording from a specific microphone'},
+    {type='text', 'recordingDevice:stop()', font={size=24}},
+    {type='text', '    stop recording from a specific microphone'},
+    {type='text', 'see save_wav() for saving recordings', target='--car-wav'},
+  }
+}

screens/--love-graphics

···
+{
+  {type='rows', width=600, default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects@{effects} > graphics',
+        attrs={
+          LOVE={target='--love'},
+          effects={target='--love-output'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='rows', width=200, default={border='grey'},
+      {type='text', 'shapes', height=35, target='--love-shapes'},
+      {type='text', 'settings', height=35, target='--love-graphics-settings'},
+      {type='text', 'transforms', height=35, target='--love-transforms'},
+      {type='text', 'window', height=35, target='--love-window'},
+    },
+  }
+}

screens/--love-graphics-settings

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects@{effects} > graphics@{graphics} > settings',
+        attrs={
+          LOVE={target='--love'},
+          effects={target='--love-output'},
+          graphics={target='--love-graphics'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'red, green, blue, transparency = love.graphics.getColor()', font={size=24}},
+    {type='text', 'love.graphics.setColor(red, green, blue, transparency)', font={size=24}},
+    {type='text', "    red, green, blue, transparency: between 0.0 and 1.0"},
+
+    {type='filler', height=10},
+    {type='text', 'font = love.graphics.getFont()', font={size=24}},
+    {type='text', 'font = love.graphics.newFont(filename)', font={size=24}},
+    {type='text', 'love.graphics.setFont(font)', font={size=24}},
+
+    {type='filler', height=10},
+    {type='text', 'size = love.graphics.getPointSize()', font={size=24}},
+    {type='text', 'love.graphics.setPointSize(size)', font={size=24}},
+
+    {type='filler', height=10},
+    {type='text', 'width = love.graphics.getLineWidth()', font={size=24}},
+    {type='text', 'love.graphics.setLineWidth(width)', font={size=24}},
+  }
+}

screens/--love-input

···
+{
+  {type='rows', width=600, default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > sensors',
+        attrs={
+          LOVE={target='--love'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', border='grey', 'touch (mouse/screen)', target='--love-touch'},
+    {type='text', border='grey', 'keyboard', target='--love-kbd'},
+
+    {type='filler', height=10},
+    {type='text', 'love.timer.getTime()', font={size=24}},
+    {type='text', '    returns time elapsed since some arbitrary point'},
+  }
+}

screens/--love-kbd

···
+{
+  {type='rows', width=600, default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > sensors@{sensors} > keyboard',
+        attrs={
+          LOVE={target='--love'},
+          sensors={target='--love-input'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'love.keyboard.setTextInput(enable)', font={size=24}},
+    {type='text', '    shows/hides keyboard on touchscreens'},
+
+    {type='filler', height=10},
+    {type='text', 'love.keyboard.isDown(key)', font={size=24}},
+  }
+}

screens/--love-output

···
+{
+  {type='rows', width=600, default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects',
+        attrs={
+          LOVE={target='--love'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', border='grey', 'graphics', target='--love-graphics'},
+    {type='text', border='grey', 'sound', target='--love-audio'},
+  }
+}

screens/--love-random

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > random',
+        attrs={
+          LOVE={target='--love'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'seed = love.math.getRandomSeed()', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.math.setRandomSeed(seed)', font={size=24}},
+    {type='text', '    seed: a single number that perfectly affects all future random numbers generated by love.math.random()'},
+    {type='filler', height=10},
+    {type='text', 'number = love.math.random()', font={size=24}},
+    {type='text', '    returns a seemingly random number uniformly distributed between 0 (included) and 1 (excluded)'},
+    {type='filler', height=10},
+    {type='text', 'number = love.math.random(max)', font={size=24}},
+    {type='text', '    returns a seemingly random integer uniformly distributed between 1 and max (both included)'},
+    {type='filler', height=10},
+    {type='text', 'number = love.math.random(min, max)', font={size=24}},
+    {type='text', '    returns a seemingly random integer uniformly distributed between min and max (both included)'},
+    {type='filler', height=10},
+    {type='text', 'number = love.math.randomNormal(stddev, mean)', font={size=24}},
+    {type='text', "    returns a seemingly random integer normally distributed with the standard deviation 'stddev' and the average 'mean'"},
+    {type='text', "    This function doesn't use the random seed above."},
+  }
+}

screens/--love-shapes

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects@{effects} > graphics@{graphics} > shapes',
+        attrs={
+          LOVE={target='--love'},
+          effects={target='--love-output'},
+          graphics={target='--love-graphics'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'love.graphics.points(x,y, x,y, ...)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.line(x,y, x,y, ...)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.rectangle(mode, x,y, width, height)', font={size=24}},
+    {type='text', "    mode: 'line' or 'fill'"},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.circle(mode, center x, center y, radius)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.ellipse(mode, center x, center y, radiusx, radiusy)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.arc(mode, center x, center y, radius, start angle, end angle)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.polygon(mode, x,y, x,y, ...)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.polygon(mode, table of vertices)', font={size=24}},
+    {type='filler', height=10},
+    {type='text', 'love.math.isConvex(vertices)', font={size=24}},
+    {type='text', '    returns true if the given polygon is convex'},
+    {type='filler', height=10},
+    {type='text', 'beziercurve = love.math.newBezierCurve(vertices)', font={size=24}},
+    {type='text', '    constructs a Bezier curve with the given control polygon'},
+    {type='text', '    to draw the curve, use love.graphics.line(beziercurve:render())'},
+  }
+}

screens/--love-thread

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > multitasking',
+        attrs={
+          LOVE={target='--love'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'thread = love.thread.newThread(data)', font={size=24}},
+    {type='text', '    create a thread from a string or file containing Lua code'},
+    {type='filler', height=10},
+    {type='text', 'love.timer.sleep(seconds)', font={size=24}},
+    {type='text', '    block the current thread for the given duration'},
+  }
+}

screens/--love-timer

···
+{
+  {type='rows', width=600, default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > sensors@{sensors} > timer',
+        attrs={
+          LOVE={target='--love'},
+          sensors={target='--love-input'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'love.timer.getTime()', font={size=24}},
+    {type='text', '    returns time elapsed since some arbitrary point'},
+    {type='filler', height=10},
+    {type='text', 'love.timer.sleep(seconds)', font={size=24}},
+    {type='text', '    block the current thread for the given duration'},
+  }
+}

screens/--love-touch

···
+{
+  {type='rows', default={font={size=21}, line_height=20},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > sensors@{sensors} > mouse/touch',
+        attrs={
+          LOVE={target='--love'},
+          sensors={target='--love-input'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'love.touch.getTouches()', font={size=24}},
+    {type='text', '    returns an array of ids of all currently active touches on the touchscreen'},
+    {type='filler', height=10},
+    {type='text', 'x, y = love.touch.getPosition(id)', font={size=24}},
+    {type='text', "    returns the coordinates of the currently active touch 'id'"},
+    {type='filler', height=10},
+    {type='text', 'pressure = love.touch.getPressure(id)', font={size=24}},
+    {type='text', "    returns the pressure of the currently active touch 'id'"},
+    {type='text', "    on non-pressure-sensitive devices the pressure will always be 1"},
+    {type='filler', height=10},
+    {type='text', 'x, y = love.mouse.getPosition()', font={size=24}},
+    {type='text', "    returns the current coordinates of the mouse pointer"},
+    {type='filler', height=10},
+    {type='text', 'bool = love.mouse.isDown(mouse_button)', font={size=24}},
+    {type='text', "    returns true if 'mouse_button' is pressed"},
+  }
+}

screens/--love-transforms

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects@{effects} > graphics@{graphics} > transforms',
+        attrs={
+          LOVE={target='--love'},
+          effects={target='--love-output'},
+          graphics={target='--love-graphics'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'love.graphics.origin()', font={size=24}},
+    {type='text', '    reset the current transform that affects all future shapes'},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.push()', font={size=24}},
+    {type='text', '    save the current transform to a stack'},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.pop()', font={size=24}},
+    {type='text', '    restore the previous transform from the stack'},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.translate(dx, dy)', font={size=24}},
+    {type='text', '    modifies the current transform to move the origin by dx,dy'},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.rotate(angle)', font={size=24}},
+    {type='text', '    modifies the current transform to rotate the axes by angle'},
+    {type='filler', height=10},
+    {type='text', 'love.graphics.scale(sx, sy)', font={size=24}},
+    {type='text', '    modifies the current transform to multiply x, y coordinates in shapes by sx, sy respectively'},
+  }
+}

screens/--love-utf8

···
+{
+  {type='rows', default={font={size=21}, line_height=20},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > utf8',
+        attrs={
+          LOVE={target='--love'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'some helpers for working with Unicode text'},
+    {type='filler', height=15},
+    {type='text', 'utf8.codes(text)', font={size=24}},
+    {type='text', '    returns an iterator over byte positions and codepoints in text'},
+    {type='filler', height=10},
+    {type='text', 'utf8.len(text, i, j)', font={size=24}},
+    {type='text', '    returns the number of codepoints between bytes i and j, both included'},
+    {type='text', '    i and j are optional. i defaults to 1 and j to end of text'},
+    {type='text', '    so len(text) returns the number of codepoints in all of text'},
+    {type='filler', height=10},
+    {type='text', 'utf8.offset(text, n)', font={size=24}},
+    {type='text', '    returns the initial byte position of the nth codepoint in text'},
+  }
+}

screens/--love-window

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'LOVE@{LÖVE} > effects@{effects} > graphics@{graphics} > window',
+        attrs={
+          LOVE={target='--love'},
+          effects={target='--love-output'},
+          graphics={target='--love-graphics'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'width, height = love.graphics.getDimensions()', font={size=24}},
+  }
+}

screens/--lua

···
+{
+  {type='rows', width=500, default={font={size=21}, line_height=35},
+    {type='text', 'Lua programming language', font={size=28}},
+    {type='text', 'lua.org (1993)'},
+    {type='rows', default={border='grey'}, width=200,
+      {type='text', 'top-level', target='--lua-def'},
+      {type='text', 'values and types', target='--lua-type'},
+      {type='text', 'statements', target='--lua-stmt'},
+      {type='text', 'expressions', target='--lua-expr'},
+      {type='text', 'tables', target='--lua-table'},
+    },
+  }
+}

screens/--lua-def

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Lua@{Lua} > top-level',
+        attrs={
+          Lua={target='--lua'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'All Lua programs are made of a few kinds of things.'},
+    {type='filler', height=15},
+    {type='text', 'x = 34', font={size=24}},
+    {type='text', '    Variable definitions'},
+    {type='filler', height=10},
+    {type='text', 'function add(a, b) return a+b end', font={size=24}},
+    {type='text', '    Function definitions'},
+    {type='text', "    (Can contain multiple statements before the 'end'. Including variable definitions.)"},
+    {type='filler', height=10},
+    {type='text', 'x = add(3, 4)', font={size=24}},
+    {type='text', '    Variable definitions can call functions (defined above/earlier)'},
+    {type='filler', height=10},
+    {type='text', 'add = function(a, b) return a+b end', font={size=24}},
+    {type='text', '    Just an alternative way to define the above function. A function name is just a kind of variable name.'},
+  }
+}

screens/--lua-expr

···
+{
+  {type='rows', default={font={size=21}, line_height=35},
+    {type='text', font={size=28}, line_height=50,
+      {'Lua@{Lua} > expressions',
+        attrs={
+          Lua={target='--lua'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 
+        {'Anywhere in a statement you might use (not define) a variable, you can use an em@{expression} in its place. Some examples:',
+          attrs={
+            em={font={italic=true}}}}},
+    {type='text', '5', font={size=24}},
+    {type='text', '    All values (numbers, strings, tables, etc.) are types.'},
+    {type='filler', height=10},
+    {type='text', '5+3', font={size=24}},
+    {type='text', '    You can add (+), subtract (-), multiply (*), divide (/), compute the remainder (%) of two numbers.'},
+    {type='filler', height=10},
+    {type='text', '4+3*2', font={size=24}},
+    {type='text', '    Expressions can contain other expressions, and they follow the precedence rules you learned in school.'},
+    {type='text', '    Multiplication, division and remainder happen before addition and subtraction.'},
+    {type='filler', height=10},
+    {type='text', '(4+3) * 2'},
+    {type='text', '    To ensure one expression is calculated before another, use parentheses ()'},
+    {type='filler', height=10},
+    {type='text', 'x == y'},
+    {type='text', "    You can compare two expressions to determine if they're equal (==), not equal (~=), greater (>), lesser (<), greater or equal (>=), lesser or equal (<=)."},
+    {type='text', "    These expressions are handy in the conditions of 'if' statements and loops."},
+    {type='filler', height=10},
+    {type='text', 'x == 3 and y > 4', font={size=24}},
+    {type='text', '    Comparisons return _booleans_ true or false, which can be combined using and/or.'},
+    {type='filler', height=10},
+    {type='text', 'not x == 3', font={size=24}},
+    {type='text', '    Turn a boolean into its opposite.'},
+    {type='filler', height=10},
+    {type='text', 'nil or 3', font={size=24}},
+    {type='text', '    All non-boolean values act like true in and/or except for nil.'},
+    {type='filler', height=10},
+    {type='text', '"hello ".."world"', font={size=24}},
+    {type='text', '    String values can be combined using ..'},
+    {type='filler', height=10},
+    {type='text', 'add(2, 3)', font={size=24}},
+    {type='text', '    Function calls can act as expressions as well as statements.'},
+  }
+}

screens/--lua-stmt

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Lua@{Lua} > statements',
+        attrs={
+          Lua={target='--lua'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'Statements do things. Functions contain statements. Some examples of statements:'},
+    {type='filler', height=15},
+    {type='text', 'x = 5', font={size=24}},
+    {type='text', '    storing values in variables'},
+    {type='filler', height=10},
+    {type='text', 'x, y = 3, 4', font={size=24}},
+    {type='text', '    storing values in multiple variables at once'},
+    {type='filler', height=10},
+    {type='text', 'print("hello")', font={size=24}},
+    {type='text', '    calling functions'},
+    {type='filler', height=10},
+    {type='text', 'x = add(3, 4)', font={size=24}},
+    {type='text', '    storing the result of a function in a variable'},
+    {type='filler', height=10},
+    {type='text', 'return 34'},
+    {type='text', '    returning a result from a function'},
+    {type='filler', height=10},
+    {type='text', 'return 34, 35'},
+    {type='text', '    returning multiple results from a function'},
+    {type='filler', height=10},
+    {type='text', 'if x == 3 then print("equal") end', font={size=24}},
+    {type='text', '    doing something only if a condition is met'},
+    {type='text', '    This statement can contain other statements between the \'then\' and \'end\'.'},
+    {type='filler', height=10},
+    {type='text', 'if x == 3 then print("equal") else print("not equal") end', font={size=24}},
+    {type='text', '    choosing between two (sets of) statements depending on a condition'},
+    {type='filler', height=10},
+    {type='text', 'if x == 3 then print("x is 3")', font={size=24}},
+    {type='text', 'else print("x is not 3") end', font={size=24}},
+    {type='text', '    You can split up a statement into multiple lines anywhere you like.'},
+    {type='filler', height=10},
+    {type='text', 'if x == 3 then print("x is 3")', font={size=24}},
+    {type='text', 'elseif x > 3 then print("x is greater than 3")', font={size=24}},
+    {type='text', 'else print("x is less than 3") end', font={size=24}},
+    {type='text', '    A more complex condition with more than 2 conditions. You can have any number of them.'},
+    {type='filler', height=10},
+    {type='text', 'while x == 3 do print("hello") end', font={size=24}},
+    {type='text', '    repeatedly doing something as long as a condition is met'},
+    {type='filler', height=10},
+    {type='text', 'repeat print("hello") until x == 3', font={size=24}},
+    {type='text', '    repeatedly doing something as long as a condition is _not_ met'},
+    {type='text', '    This kind of _loop_ always runs at least once before it gets to the condition.'},
+    {type='filler', height=10},
+    {type='text', 'for i=1,3 do print(i) end', font={size=24}},
+    {type='text', '    run 3 times, setting i to 1, 2 and 3 once each'},
+    {type='text', '    (The keyword \'for\' comes from mathematicians, who say things like "for every number from 1 to 3..")'},
+    {type='filler', height=10},
+    {type='text', 'for i=0,4,2 do print(i) end', font={size=24}},
+    {type='text', '    run 3 times, setting i to 0, 2 and 4 once each'},
+    {type='filler', height=10},
+    {type='text', 'for i=10,1,-1 do print(i) end', font={size=24}},
+    {type='text', '    run 10 times, setting i to 10 at the start and decreasing it by 1 each time'},
+    {type='filler', height=10},
+    {type='text', 'break', font={size=24}},
+    {type='text', '    stop repeatedly running some loop surrounding this statement'},
+  }
+}

screens/--lua-table

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Lua@{Lua} > tables',
+        attrs={
+          Lua={target='--lua'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', "Lua's tables are a versatile way to group data together in ways that make it easy to slice and dice."},
+    {type='filler', height=15},
+    {type='text', '{} is an empty table value/expression.'},
+    {type='filler', height=10},
+    {type='text', 'h = {11, 12, 13} creates a table that can be looked up by number _keys_.'},
+    {type='text', '    h[1] is now 11, h[2] is 12 and so on.'},
+    {type='filler', height=10},
+    {type='text', 'h = {a=34} creates a table that can be looked up by string keys.'},
+    {type='text', "    h['a'] is now 34, h['b'] is 35."},
+    {type='text', '    You can also shorten constant string keys using periods. h.a is 34, h.b is 35.'},
+    {type='filler', height=10},
+    {type='text', 'if h is an array. #h is an expression that returns the length of h'},
+    {type='text', "    String keys don't count towards the length of an array."},
+    {type='text', '    Arrays also stop at the first missing/nil slot. The length of {1, 2, nil, 4} is 2.'},
+    {type='filler', height=15},
+    {type='text', 'Some useful functions operating on tables:', font_size=28},
+    {type='filler', height=15},
+    {type='text', 'pairs(h)', font={size=24}},
+    {type='text', '    Returns an _iterator_, a kind of function, that lets you conveniently loop over all the keys of a table.'},
+    {type='text', '    For example, this program will print out the contents of a table: for key, value in pairs(h) do print(key, value) end'},
+    {type='filler', height=15},
+    {type='text', 'Some useful functions operating on arrays:', font_size=28},
+    {type='filler', height=15},
+    {type='text', 'ipairs(h)', font={size=24}},
+    {type='text', "    Returns an iterator that lets you conveniently loop over indexes and elements of an array."},
+    {type='text', '    For example, this program will print out the contents of an array: for _, x in ipairs(h) do print(x) end'},
+    {type='filler', height=10},
+    {type='text', 'table.insert(h, value)', font={size=24}},
+    {type='text', '    Appends a value to the end of array h.'},
+    {type='filler', height=10},
+    {type='text', 'table.insert(h, index, value)', font={size=24}},
+    {type='text', '    Inserts a value at index in the middle of array h.'},
+    {type='filler', height=10},
+    {type='text', 'table.remove(h)', font={size=24}},
+    {type='text', '    Removes the value at the final index of array h.'},
+    {type='filler', height=10},
+    {type='text', 'table.remove(h, index)', font={size=24}},
+    {type='text', '    Removes the value at index in the middle of array h, compacting later values up.'},
+    {type='filler', height=10},
+    {type='text', 'table.sort(h)', font={size=24}},
+    {type='text', '    Sorts the elements in array h.'},
+    {type='filler', height=10},
+    {type='text', 'table.sort(h, f)', font={size=24}},
+    {type='text', '    Sorts the elements in array h by a custom comparison function f.'},
+    {type='text', '    f needs to accept 2 arguments and return true if the first is less than the second.'},
+    {type='filler', height=10},
+    {type='text', 'table.reverse(h)', font={size=24}},
+    {type='text', '    Flips the order of the elements of array h so the final element becomes the first, etc.'},
+    {type='filler', height=10},
+    {type='text', 'table.concat(h)', font={size=24}},
+    {type='text', '    Appends all the elements of array h into a single string and returns it.'},
+    {type='text', '    All the elements must be strings.'},
+  }
+}

screens/--lua-type

···
+{
+  {type='rows', default={font={size=21}, line_height=25},
+    {type='text', font={size=28}, line_height=50,
+      {'Lua@{Lua} > values and types',
+        attrs={
+          Lua={target='--lua'},
+        }},
+    },
+    {type='filler', height=15},
+    {type='text', 'Variables in Lua can hold a few kinds of things, including:'},
+    {type='text', '- numbers like 0, 3, -5 or 2.5'},
+    {type='text', '- strings like "abc" or \'hello there\''},
+    {type='text', '- booleans true or false'},
+    {type='text', 
+      {'- fn@{functions}', attrs={fn={target='--lua-fn'}}},
+      target='--lua-def'},
+    {type='text', 
+      {'- tables@{tables} like {1, 2, 3} or {dogs=1}', attrs={tables={target='--lua-table'}}}},
+    {type='text', '- nil, which represents the absence of other things'},
+  }
+}