From 80c3cf4780ca8adf083b0f3c0374bdacd003dec0 Mon Sep 17 00:00:00 2001
From: Derek Miller <1340081+derek-miller@users.noreply.github.com>
Date: Tue, 10 Nov 2026 21:47:37 -0600
Subject: [PATCH 1/4] feat(ui): the properties card follows the Support Code's
 window by itself

---
 template/CONTRIBUTING.md.jinja           |  6 ++++--
 template/src/lib/support-code.lua        | 19 +++++++++++++++++--
 template/src/lib/ui/tab-properties.lua   | 12 +++++++++++-
 template/test/test_support_code.lua      | 23 +++++++++++++++++++++++
 template/test/test_ui_tab_properties.lua | 12 ++++++++++++
 5 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/template/CONTRIBUTING.md.jinja b/template/CONTRIBUTING.md.jinja
index 42096a8..50984bb 100644
--- a/template/CONTRIBUTING.md.jinja
+++ b/template/CONTRIBUTING.md.jinja
@@ -672,8 +672,10 @@ end
 The library clears the property at once, keeps its value out of the dispatcher's
 Trace output, and prints its answer to the Lua output whatever Log Mode is.
 While the window is open, Log Level also offers Trace and Ultra (see
-[Log Level](#log-level)). A driver that shows more while the window is open
-(extra properties) passes `supportCode:onChange(function(open) ... end)`.
+[Log Level](#log-level)). A web tab's properties card follows the window by
+itself, once the driver calls `lib.ui.tab-properties`' `serve()`. A driver that
+shows more elsewhere while the window is open passes
+`supportCode:onChange(function(open) ... end)`.
 
 ### Log Level
 
diff --git a/template/src/lib/support-code.lua b/template/src/lib/support-code.lua
index c17a306..54481e1 100644
--- a/template/src/lib/support-code.lua
+++ b/template/src/lib/support-code.lua
@@ -15,6 +15,7 @@ OPC.suppressDebug["Support Code"] = true
 --- @field _secret string The build secret the day's code comes from.
 --- @field _open boolean Whether this code opened the Lua window.
 --- @field _onChange? fun(open: boolean) Called as the code opens and closes the window.
+--- @field _followers fun(open: boolean)[] The libraries told the same, after the driver.
 local SupportCode = {}
 SupportCode.__index = SupportCode
 
@@ -40,6 +41,7 @@ function SupportCode:new(secret)
   local instance = setmetatable({}, self)
   instance._secret = secret or SECRET
   instance._open = false
+  instance._followers = {}
   return instance
 end
 
@@ -81,8 +83,8 @@ function SupportCode:accepts(value)
   return false
 end
 
---- Tells the driver's `onChange` callback, if any. A raise there would reach the dispatcher's error print, which shows
---- the typed value, so it is caught and reported without it.
+--- Tells the driver's `onChange` callback, if any, then each follower. A raise there would reach the dispatcher's
+--- error print, which shows the typed value, so it is caught and reported without it.
 --- @param open boolean Whether the window is now open.
 function SupportCode:_tell(open)
   if self._onChange then
@@ -91,6 +93,12 @@ function SupportCode:_tell(open)
       print("The Support Code's onChange failed: " .. tostring(err))
     end
   end
+  for _, follower in ipairs(self._followers) do
+    local ok, err = pcall(follower, open)
+    if not ok then
+      print("A Support Code follower failed: " .. tostring(err))
+    end
+  end
 end
 
 --- Lets Log Level reach Trace and Ultra, or stops it at Debug. Caught as `_tell` is, since a raise would print the
@@ -110,6 +118,13 @@ function SupportCode:onChange(callback)
   self._onChange = callback
 end
 
+--- Calls `callback(open)` as the window opens and closes, alongside the driver's `onChange`, for a library whose view
+--- changes with it: lib.ui.tab-properties' card, whose Log Level list does.
+--- @param callback fun(open: boolean)
+function SupportCode:follow(callback)
+  table.insert(self._followers, callback)
+end
+
 --- Takes what was typed into the Support Code property. The property is cleared at once, so the code is never left
 --- in the project. Today's code opens the Lua window and Log Level's Trace and Ultra for an hour, or closes them while
 --- open.
diff --git a/template/src/lib/ui/tab-properties.lua b/template/src/lib/ui/tab-properties.lua
index 514097b..5176f2c 100644
--- a/template/src/lib/ui/tab-properties.lua
+++ b/template/src/lib/ui/tab-properties.lua
@@ -11,6 +11,9 @@ require("drivers-common-public.global.lib")
 local log = require("lib.logging")
 local page = require("lib.ui.page")
 local pageParams = require("lib.ui.page-params")
+--#ifdef DRIVERCENTRAL
+local supportCode = require("lib.support-code")
+--#endif
 
 local SHOWN_TYPES = { LIST = true, STRING = true, RANGED_INTEGER = true }
 
@@ -138,7 +141,8 @@ function TabProperties:set(name, value)
   return "The tab cannot set " .. tostring(name) .. "."
 end
 
---- Answers the properties card's two commands. Call it once, as the driver loads.
+--- Answers the properties card's two commands, and in a DriverCentral build sends the card its list again as the
+--- Support Code opens and closes the Lua window. Call it once, as the driver loads.
 function TabProperties:serve()
   UIR._GET_PROPERTIES = function()
     page.send("PROPERTIES", { properties = self:list() })
@@ -151,6 +155,12 @@ function TabProperties:serve()
       page.send("PROPERTY_ERROR", { property = tostring(params.property), error = err })
     end
   end
+  --#ifdef DRIVERCENTRAL
+  -- The Support Code widens Log Level's list and its hour's end narrows it, and no property handler runs for either.
+  supportCode:follow(function()
+    UIR._GET_PROPERTIES()
+  end)
+  --#endif
 end
 
 --- Calls `push` after each change to a property the tab shows, wherever it was made. Call it once the load's own
diff --git a/template/test/test_support_code.lua b/template/test/test_support_code.lua
index 1d3a51f..94d61e6 100644
--- a/template/test/test_support_code.lua
+++ b/template/test/test_support_code.lua
@@ -140,6 +140,29 @@ T.eq("and when the hour does", told, { true, false, true, false })
 enter(sc, "nonsense")
 T.eq("but not for a wrong code", told, { true, false, true, false })
 
+T.section("A library can follow it too, alongside the driver")
+do
+  local lib = getmetatable(supportCode):new(SECRET)
+  local driverTold, libTold = {}, {}
+  lib:onChange(function(open)
+    driverTold[#driverTold + 1] = open
+  end)
+  lib:follow(function(open)
+    libTold[#libTold + 1] = open
+  end)
+  lib:follow(function()
+    error("the library's hook broke")
+  end)
+  local traced = enter(lib, "VEAFA-RSBWM")
+  T.eq("a follower is told when the code opens it", libTold, { true })
+  T.eq("and so is the driver", driverTold, { true })
+  T.contains("a follower that raises is reported", traced, "the library's hook broke")
+  T.excludes("without the typed value", traced, "VEAFA")
+  enter(lib, "VEAFA-RSBWM")
+  T.eq("and the follower is told when it closes", libTold, { true, false })
+  lib:close()
+end
+
 T.section("The code never reaches the Lua output")
 -- The driver's handler, as CONTRIBUTING.md shows it.
 function OPC.Support_Code(propertyValue)
diff --git a/template/test/test_ui_tab_properties.lua b/template/test/test_ui_tab_properties.lua
index c0d73cb..a32c39e 100644
--- a/template/test/test_ui_tab_properties.lua
+++ b/template/test/test_ui_tab_properties.lua
@@ -143,4 +143,16 @@ sent = {}
 UIR._SET_PROPERTY({ DATA = "not base64 json" })
 T.eq("a body that does not decode is refused as no property", sent[1].data.error, "The tab cannot set nil.")
 
+T.section("The card follows the Support Code's window")
+do
+  -- No secret in a test build, so the window's change is told directly.
+  local code = require("lib.support-code")
+  sent = {}
+  code:_tell(true)
+  T.eq("opening it sends the card its list", sent[1] and sent[1].command, "PROPERTIES")
+  sent = {}
+  code:_tell(false)
+  T.eq("and so does the hour's end", sent[1] and sent[1].command, "PROPERTIES")
+end
+
 T.finish()

From ee1416786449dc511be749950bc409a39634f718 Mon Sep 17 00:00:00 2001
From: Derek Miller <1340081+derek-miller@users.noreply.github.com>
Date: Tue, 10 Nov 2026 21:53:54 -0600
Subject: [PATCH 2/4] feat(ui): style.css offers the widgets the tabs repeat:
 chips, states, labels, rows, switches, popovers, forms and layout helpers

---
 template/CONTRIBUTING.md.jinja  |   4 +-
 template/src/lib/ui/style.css   | 142 +++++++++++++++++++++++++++++++-
 template/test/test_ui_pages.lua |   9 ++
 3 files changed, 152 insertions(+), 3 deletions(-)

diff --git a/template/CONTRIBUTING.md.jinja b/template/CONTRIBUTING.md.jinja
index 50984bb..f0e7176 100644
--- a/template/CONTRIBUTING.md.jinja
+++ b/template/CONTRIBUTING.md.jinja
@@ -838,7 +838,9 @@ such as `drivers/tplink_light/www/documentation/index.md` in
 others, so a page keeps only its own views and its driver only its own commands:
 
 - `style.css`: the house look, from the tab bar and cards to form fields,
-  tables, chips, the segmented switch and a list beside its editor
+  tables, chips, the segmented switch and a list beside its editor, and a set of
+  `.kit-*` widgets and layout helpers to use as needed, as with a CSS framework:
+  states, tags, counts, a form grid, a switch, popovers and more
 - `page.js`: the page's link to its driver, the live-link and demo banners, the
   tabs, the properties card and demo mode
 - `variables.js` and `variables.css`: the variable browser, with
diff --git a/template/src/lib/ui/style.css b/template/src/lib/ui/style.css
index 8ac585b..712fc23 100644
--- a/template/src/lib/ui/style.css
+++ b/template/src/lib/ui/style.css
@@ -1,8 +1,9 @@
 /* The look of a driver's custom Composer tab. A page embeds it first in its <style>, with the line
    "<!-- #embed ../../../../src/lib/ui/style.css -->", then adds only the rules for its own views after it. This is
    the house look: tokens, base, tab bar, cards, buttons, form fields, tables, text, chips and the segmented control,
-   by plain selector, and the kit's components as .kit-*. A page keeps no copy of these; plain selectors only, since
-   Composer's engine may be old. */
+   by plain selector, and a set of widgets as .kit-* that a page uses as it needs, as with a CSS framework: states,
+   tags and counts, a form grid, a switch, ranges, popovers, code boxes, messages, disclosures, a legend and layout
+   helpers. A page keeps no copy of these; plain selectors only, since Composer's engine may be old. */
 
 :root {
   --bg: #f5f5f7;
@@ -121,6 +122,9 @@ body {
 .btn-sm { padding: 3px 8px; font-size: 11px; }
 .btn:disabled { opacity: 0.45; cursor: not-allowed; }
 .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+/* A button that reads as a link, for an action inside a line of text. */
+.btn-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
+.btn-link:hover { text-decoration: underline; }
 
 /* Form fields. A label sits over its field; a checkbox's or radio's label is .check. A select draws its own arrow, so
    it looks the same in every engine. */
@@ -151,6 +155,25 @@ select.sm { padding-right: 24px; background-position: right 7px center; }
 input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
 input:disabled, textarea:disabled, select:disabled { background-color: var(--bg); color: var(--text-muted); }
 .input-error { border-color: var(--danger) !important; }
+.input-valid { border-color: var(--success) !important; }
+/* A number with its unit inside the field's box, so every field in a column ends at the same edge. */
+.kit-unitbox { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
+.kit-unitbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
+.kit-unitbox input, .kit-unitbox input:focus { border: 0; box-shadow: none; background: none; }
+.kit-unitbox .u { padding-right: 8px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
+/* A range with its value read out beside it. */
+.kit-range { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+.kit-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
+.kit-range code { font-size: 12px; color: var(--text-muted); width: 36px; text-align: right; }
+/* An on/off switch: a checkbox drawn as a track; an indeterminate one sits halfway. */
+.kit-switch { position: relative; display: inline-flex; align-items: center; }
+.kit-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
+.kit-switch .track { position: relative; width: 38px; height: 22px; border-radius: 22px; background: var(--border); transition: background 0.15s; flex: none; }
+.kit-switch .track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transition: transform 0.15s; }
+.kit-switch input:checked + .track { background: var(--success); }
+.kit-switch input:checked + .track::before { transform: translateX(16px); }
+.kit-switch input:indeterminate + .track::before { transform: translateX(8px); opacity: 0.5; }
+.kit-switch input:focus-visible + .track { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35); }
 
 /* Tables: fixed columns, and a sideways scroll only on a narrow page. */
 .table-wrap { overflow-x: hidden; }
@@ -185,9 +208,74 @@ tbody tr:last-child td { border-bottom: none; }
 .kit-fields > .narrow { flex: 0 1 120px; min-width: 90px; }
 .kit-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
 
+/* Layout helpers: a wrapping row, a row with its ends apart, two or three even columns (one on a narrow page), a row
+   of buttons, and columns a table drops on a narrower page. */
+.kit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.kit-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
+.kit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.kit-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+@media (max-width: 560px) {
+  .kit-grid-2, .kit-grid-3 { grid-template-columns: 1fr; }
+}
+.kit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+@media (max-width: 840px) {
+  .kit-hide-md { display: none; }
+}
+@media (max-width: 720px) {
+  .kit-hide-sm { display: none; }
+}
+
+/* A form whose labels sit in one column and their controls line up in the next; a row is .kit-form-row (label, then
+   .kit-form-ctl), and a note under a control is .kit-form-note. */
+.kit-form { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 14px; align-items: center; }
+.kit-form-row { display: contents; }
+.kit-form-row > label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin: 0; }
+.kit-form-ctl { display: flex; align-items: center; gap: 8px; min-height: 30px; min-width: 0; }
+.kit-form-note { grid-column: 2; margin-top: -4px; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
+
+/* Checkboxes in columns, each label on one line. */
+.kit-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
+.kit-checklist label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 400; color: var(--text); padding: 3px 0; cursor: pointer; min-width: 0; }
+.kit-checklist label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* Small labels: a chip, a status dot, and the segmented control a view switches with. */
 .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
 .chip-err { background: #fef3c7; color: #b45309; }
+.chip.blue { background: #dbeafe; color: #1d4ed8; }
+.chip.green { background: #d1fae5; color: #059669; }
+.chip.yellow { background: #fef9c3; color: #a16207; }
+.chip.purple { background: #ede9fe; color: #6d28d9; }
+.chip.gray { background: #f3f4f6; color: #6b7280; }
+.chip.red { background: #fee2e2; color: var(--danger); }
+.kit-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; align-content: flex-start; }
+/* A chip that turns a choice on and off, its state in aria-pressed. */
+.kit-chip-toggle { min-height: 30px; max-width: 100%; border-radius: var(--radius); padding: 4px 9px; font: inherit; font-size: 11px; text-align: left; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); overflow-wrap: anywhere; }
+.kit-chip-toggle[aria-pressed="true"] { border-color: #93c5fd; background: #dbeafe; color: #1e3a8a; }
+.kit-chip-toggle:disabled { cursor: default; opacity: 0.6; }
+.kit-chip-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+.kit-count { font-variant-numeric: tabular-nums; font-weight: 600; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 12px; white-space: nowrap; }
+.kit-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--bg); white-space: nowrap; }
+/* A state in words after its colored dot. */
+.kit-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
+.kit-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
+.kit-state.ok { color: #15803d; }
+.kit-state.ok::before { background: #16a34a; }
+.kit-state.info { color: #1e40af; }
+.kit-state.info::before { background: #2563eb; }
+.kit-state.wait { color: #b45309; }
+.kit-state.wait::before { background: #d97706; }
+.kit-state.stale { color: #b45309; }
+.kit-state.stale::before { background: #fbbf24; box-shadow: 0 0 0 1px #d97706 inset; }
+.kit-state.bad { color: #b91c1c; }
+.kit-state.bad::before { background: #ef4444; }
+.kit-state.auto { color: #0369a1; }
+.kit-state.auto::before { background: #0ea5e9; }
+.kit-state.muted { color: var(--text-muted); }
+.kit-state.muted::before { background: #9ca3af; }
+.kit-state.fixed { color: #475569; }
+.kit-state.fixed::before { background: #94a3b8; }
+.kit-state.off { color: #b0b4bb; }
+.kit-state.off::before { background: #d1d5db; }
 .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
 .status-ok { background: var(--success); }
 .status-warn { background: var(--warning); }
@@ -211,6 +299,56 @@ tbody tr:last-child td { border-bottom: none; }
 .kit-tile .k { color: var(--text-muted); font-size: 11px; }
 .kit-tile .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
 .kit-tile.config { background: var(--bg); }
+/* A value's unit, a second unit after a dot, and a value still waiting. */
+.kit-tile .v small { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
+.kit-tile .v .alt { font-size: 12px; font-weight: 500; color: var(--text-muted); }
+.kit-tile .v .alt::before { content: "\00b7"; margin: 0 5px; opacity: 0.55; }
+.kit-tile .v .alt small { font-size: 10px; margin-left: 1px; }
+.kit-tile .v .wait { color: var(--text-muted); font-weight: 500; }
+
+/* Text widgets: a small uppercase section label, key and value pairs (in a row, or .rows as two columns), a label
+   whose title explains it, a line of news under an action, a monospace box for output and one for typed code. */
+.kit-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin: 2px 0 7px; }
+.kit-kv { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
+.kit-kv.rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; align-items: baseline; }
+.kit-kv .k { color: var(--text-muted); font-size: 11px; }
+.kit-kv .v { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.kit-tip { text-decoration: underline dotted var(--border); text-underline-offset: 2px; cursor: help; }
+.kit-msg { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
+.kit-msg.sm { font-size: 11px; }
+.kit-msg.bad { color: var(--danger); }
+.kit-msg.ok { color: var(--success); }
+.kit-msg:empty { display: none; }
+.kit-pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; color: #475569; padding: 8px 10px; margin-top: 8px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+.kit-code { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; min-height: 120px; resize: vertical; }
+
+/* A popover's box, which a page places itself. */
+.kit-pop { position: absolute; z-index: 50; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
+
+/* A <details> section under a rule, its summary a small uppercase label. */
+.kit-disclosure { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
+.kit-disclosure > summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
+.kit-disclosure[open] > summary { margin-bottom: 10px; }
+
+/* A legend: a <details> whose summary has a "?" mark, opening to groups of rows that each pair a sample with its
+   meaning. */
+.kit-legend { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
+.kit-legend > summary { list-style: none; cursor: pointer; font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; user-select: none; }
+.kit-legend > summary::-webkit-details-marker { display: none; }
+.kit-legend > summary::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); font-size: 9px; font-weight: 700; }
+.kit-legend > summary:hover { color: var(--text); }
+.kit-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 10px; }
+@media (max-width: 620px) {
+  .kit-legend-grid { grid-template-columns: 1fr; }
+}
+.kit-legend-group { display: flex; flex-direction: column; gap: 6px; }
+.kit-legend-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; font-size: 11px; color: var(--text-muted); }
+
+/* A brief highlight on something that just changed; it fades to the element's own background. */
+.kit-flash { animation: kit-flash 1.1s ease-out; }
+@keyframes kit-flash {
+  from { background-color: #dbeafe; }
+}
 
 /* The properties card: the element Kit.initPropertiesCard is given becomes .kit-props. Its fields are the house
    fields; the card adds its groups, its grid and the line under a field. */
diff --git a/template/test/test_ui_pages.lua b/template/test/test_ui_pages.lua
index 29271f2..c86ce54 100644
--- a/template/test/test_ui_pages.lua
+++ b/template/test/test_ui_pages.lua
@@ -114,6 +114,15 @@ for _, selector in ipairs({
   ".note code",
   ".hint code",
   ".mono",
+  ".btn-link",
+  ".btn-link:hover",
+  ".input-valid",
+  ".chip.blue",
+  ".chip.green",
+  ".chip.yellow",
+  ".chip.purple",
+  ".chip.gray",
+  ".chip.red",
 }) do
   BASE[selector] = true
 end

From 9ba65bedb929f8cde4aa5603d5721ae700f892b5 Mon Sep 17 00:00:00 2001
From: Derek Miller <1340081+derek-miller@users.noreply.github.com>
Date: Tue, 10 Nov 2026 22:32:39 -0600
Subject: [PATCH 3/4] feat(ui): the kit offers collapse, menu, combobox, color
 picker and picture grid components

---
 Makefile                                    |   2 +-
 copier.yml                                  |   2 +-
 template/CONTRIBUTING.md.jinja              |   3 +
 template/src/lib/ui/collapse.css            |  11 +
 template/src/lib/ui/collapse.js             |  80 ++++
 template/src/lib/ui/color.css               |  34 ++
 template/src/lib/ui/color.js                | 418 ++++++++++++++++++++
 template/src/lib/ui/combobox.css            |  39 ++
 template/src/lib/ui/combobox.js             | 195 +++++++++
 template/src/lib/ui/menu.css                |  10 +
 template/src/lib/ui/menu.js                 |  80 ++++
 template/src/lib/ui/pickgrid.css            |  18 +
 template/src/lib/ui/pickgrid.js             | 138 +++++++
 template/src/lib/ui/style.css               |   2 +
 template/test/test_ui_pages.lua             |  14 +-
 tests/build_checks.py                       |   3 +-
 tests/template-renders/ui-expressions.files |  10 +
 tests/template-renders/ui.files             |  10 +
 tests/ui_collapse_js.test.mjs               |  91 +++++
 tests/ui_color_js.test.mjs                  | 277 +++++++++++++
 tests/ui_combobox_js.test.mjs               | 195 +++++++++
 tests/ui_menu_js.test.mjs                   |  77 ++++
 tests/ui_pickgrid_js.test.mjs               | 147 +++++++
 23 files changed, 1852 insertions(+), 4 deletions(-)
 create mode 100644 template/src/lib/ui/collapse.css
 create mode 100644 template/src/lib/ui/collapse.js
 create mode 100644 template/src/lib/ui/color.css
 create mode 100644 template/src/lib/ui/color.js
 create mode 100644 template/src/lib/ui/combobox.css
 create mode 100644 template/src/lib/ui/combobox.js
 create mode 100644 template/src/lib/ui/menu.css
 create mode 100644 template/src/lib/ui/menu.js
 create mode 100644 template/src/lib/ui/pickgrid.css
 create mode 100644 template/src/lib/ui/pickgrid.js
 create mode 100644 tests/ui_collapse_js.test.mjs
 create mode 100644 tests/ui_color_js.test.mjs
 create mode 100644 tests/ui_combobox_js.test.mjs
 create mode 100644 tests/ui_menu_js.test.mjs
 create mode 100644 tests/ui_pickgrid_js.test.mjs

diff --git a/Makefile b/Makefile
index a4854c5..d86ac98 100644
--- a/Makefile
+++ b/Makefile
@@ -59,7 +59,7 @@ render-crypto: ## Check the render's c4_shim resolves its FFI crypto backend
 
 render-ui-js: ## Check the render's lib/ui scripts under Node, each one the render ships
 	@if [ -f "$(RENDER)/src/lib/ui/page.js" ]; then \
-		for kit in page variables expressions; do \
+		for kit in page variables expressions collapse menu combobox color pickgrid; do \
 			if [ -f "$(RENDER)/src/lib/ui/$$kit.js" ]; then \
 				UI_DIR="$(RENDER)/src/lib/ui" node --test "tests/ui_$${kit}_js.test.mjs" || exit 1; \
 			fi; \
diff --git a/copier.yml b/copier.yml
index 75a94bd..6c29c3b 100644
--- a/copier.yml
+++ b/copier.yml
@@ -90,7 +90,7 @@ icon_style:
 
 vendor_modules:
   type: str
-  help: "Space-separated optional vendor modules (available: bitn crypto bthome noiseprotocol protobuf oauth expressions ui). Note: the crypto/noiseprotocol/protobuf/bthome bundles are core builds that require bitn on the path; include bitn alongside them (crypto also for noiseprotocol). oauth ships Control4's OAuth authorization-code grant (drivers-common-public module/auth_code_grant.lua) and its short-link helper (global/make_short_link.lua). ui ships the kit for a custom Composer tab in src/lib/ui: the house style.css and page.js for a page to embed, the variable browser (variables.js and .css, lib.ui.devices), with expressions the expression editor (expressions.js and .css, lib.ui.expression-tab), and the driver side (lib.ui.page, lib.ui.page-params, lib.ui.tab-properties)."
+  help: "Space-separated optional vendor modules (available: bitn crypto bthome noiseprotocol protobuf oauth expressions ui). Note: the crypto/noiseprotocol/protobuf/bthome bundles are core builds that require bitn on the path; include bitn alongside them (crypto also for noiseprotocol). oauth ships Control4's OAuth authorization-code grant (drivers-common-public module/auth_code_grant.lua) and its short-link helper (global/make_short_link.lua). ui ships the kit for a custom Composer tab in src/lib/ui: the house style.css and page.js for a page to embed, the variable browser (variables.js and .css, lib.ui.devices), with expressions the expression editor (expressions.js and .css, lib.ui.expression-tab), the widgets (collapse, menu, combobox, color and pickgrid, each a .js and .css pair), and the driver side (lib.ui.page, lib.ui.page-params, lib.ui.tab-properties)."
   default: ""
 
 cloud_diagnostics:
diff --git a/template/CONTRIBUTING.md.jinja b/template/CONTRIBUTING.md.jinja
index f0e7176..56cf863 100644
--- a/template/CONTRIBUTING.md.jinja
+++ b/template/CONTRIBUTING.md.jinja
@@ -850,6 +850,9 @@ others, so a page keeps only its own views and its driver only its own commands:
   highlighting, help and live preview, and `lib.ui.expression-tab` on the
   driver's side
 {%- endif %}
+- `collapse.js`, `menu.js`, `combobox.js`, `color.js` and `pickgrid.js`, each
+  with its stylesheet: groups that fold with Expand all, a button with a menu, a
+  searchable dropdown, a color picker, and a picture grid with a drop zone
 - `lib.ui.page`, `lib.ui.page-params` and `lib.ui.tab-properties`: the driver's
   side of the link and the properties card
 
diff --git a/template/src/lib/ui/collapse.css b/template/src/lib/ui/collapse.css
new file mode 100644
index 0000000..dc5beb3
--- /dev/null
+++ b/template/src/lib/ui/collapse.css
@@ -0,0 +1,11 @@
+/* lib/ui/collapse.js's groups: a head that turns its body on a click, its caret turned while open, and the Expand
+   all / Collapse all button that sits in a card's heading. */
+.kit-collapse-head { cursor: pointer; border-radius: 5px; }
+.kit-collapse-head:hover { background: var(--surface-hover); }
+.kit-collapse-body { display: none; }
+.kit-collapse.open > .kit-collapse-body { display: block; }
+.kit-caret { width: 9px; font-size: 9px; line-height: 1; color: var(--text-muted); display: inline-flex; justify-content: center; transition: transform 0.14s ease; }
+.kit-collapse.open > .kit-collapse-head .kit-caret { transform: rotate(90deg); }
+.kit-caret.none { visibility: hidden; }
+.kit-collapse-all { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px; white-space: nowrap; }
+.kit-collapse-all:hover { text-decoration: underline; }
diff --git a/template/src/lib/ui/collapse.js b/template/src/lib/ui/collapse.js
new file mode 100644
index 0000000..5af0928
--- /dev/null
+++ b/template/src/lib/ui/collapse.js
@@ -0,0 +1,80 @@
+// Groups that fold under a caret, for a page that draws its markup as strings and draws it again on every push: each
+// set keeps its groups' open state by key, a click on a head turns it, and Expand all / Collapse all follows what is
+// on screen. A page embeds it after page.js, and collapse.css after style.css, the same way.
+//   Kit.collapse(name, options)   a set of groups; options.open is the default state (true), options.onChange() draws
+//                                 the page again after a click
+//     set.isOpen(key)             a group's state: its own once clicked, else the set's default
+//     set.anyOpen(keys)           whether any of these groups is open
+//     set.head(key)               the attributes for the page's own head element, which also takes kit-collapse-head
+//     set.group(key, head, body, bodyClass)  a group: its head's markup, then its body, shown while it is open
+//     set.toggleAll(keys)         the Expand all / Collapse all button for these groups, or "" when there are none
+//     set.toggle(key), set.setAll(open)
+//   Kit.collapse.caret(none)      the caret a head shows; none keeps its place on a row with nothing to open
+
+(function (Kit) {
+  var sets = {};
+
+  function collapse(name, options) {
+    options = options || {};
+    var own = {};
+    var all = options.open !== false;
+
+    function isOpen(key) {
+      return Object.prototype.hasOwnProperty.call(own, key) ? own[key] : all;
+    }
+
+    var set = {
+      onChange: options.onChange || function () {},
+      isOpen: isOpen,
+      anyOpen: function (keys) {
+        return keys.some(isOpen);
+      },
+      toggle: function (key) {
+        own[key] = !isOpen(key);
+      },
+      // Every group follows the new default, so a group opened by hand closes with the rest.
+      setAll: function (open) {
+        own = {};
+        all = !!open;
+      },
+      head: function (key) {
+        return 'data-kit-collapse="' + Kit.esc(name) + '" data-key="' + Kit.esc(key) + '"';
+      },
+      group: function (key, head, body, bodyClass) {
+        return (
+          '<div class="kit-collapse' + (isOpen(key) ? " open" : "") + '">' + head +
+          '<div class="kit-collapse-body' + (bodyClass ? " " + bodyClass : "") + '">' + body + "</div></div>"
+        );
+      },
+      // It offers what a click would do to what is on screen: with any group open, Collapse all.
+      toggleAll: function (keys) {
+        if (!keys.length) return "";
+        var open = set.anyOpen(keys);
+        return (
+          '<button type="button" class="kit-collapse-all" data-kit-collapse-all="' + Kit.esc(name) + '" data-open="' +
+          !open + '">' + (open ? "Collapse all" : "Expand all") + "</button>"
+        );
+      },
+    };
+    sets[name] = set;
+    return set;
+  }
+
+  collapse.caret = function (none) {
+    return '<span class="kit-caret' + (none ? ' none">' : '">▸') + "</span>";
+  };
+
+  document.addEventListener("click", function (e) {
+    var t = e.target;
+    if (!t || !t.closest) return;
+    var all = t.closest("[data-kit-collapse-all]");
+    var head = all ? null : t.closest("[data-kit-collapse]");
+    var set = all ? sets[all.getAttribute("data-kit-collapse-all")] : head ? sets[head.getAttribute("data-kit-collapse")] : null;
+    if (!set) return;
+    if (all) set.setAll(all.getAttribute("data-open") === "true");
+    else set.toggle(head.getAttribute("data-key"));
+    set.onChange();
+  });
+
+  Kit.collapse = collapse;
+})(Kit);
diff --git a/template/src/lib/ui/color.css b/template/src/lib/ui/color.css
new file mode 100644
index 0000000..c14fb68
--- /dev/null
+++ b/template/src/lib/ui/color.css
@@ -0,0 +1,34 @@
+/* The color picker: Kit.colorPicker's swatch button in place of each color input, and its popover on .kit-pop. A row
+   that shows a color input and its value is .kit-color-row. A page embeds this after style.css, with color.js. */
+
+.kit-color-row { display: flex; align-items: center; gap: 8px; }
+.kit-color-row code { font-size: 12px; color: var(--text-muted); }
+
+.kit-swatch { width: 44px; height: 28px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; flex: none; }
+.kit-swatch span { display: block; width: 100%; height: 100%; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.12); }
+.kit-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.kit-swatch.no-color span { background: linear-gradient(to top right, transparent calc(50% - 1px), #9ca3af calc(50% - 1px), #9ca3af calc(50% + 1px), transparent calc(50% + 1px)), #fff !important; }
+
+.kit-color { width: 264px; }
+.kit-color-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
+.kit-color-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
+.kit-color-chip { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.18); cursor: pointer; }
+.kit-color-chip:focus-visible, .kit-color-chip.on { outline: 2px solid var(--accent); outline-offset: 1px; }
+.kit-color-hex { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.kit-color-hex span { width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.18); flex: none; }
+.kit-color-hex input { flex: 1; min-width: 0; font-family: var(--mono); }
+.kit-color-slider { display: grid; grid-template-columns: 14px minmax(0, 1fr) 34px; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 11px; color: var(--text-muted); }
+.kit-color-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); margin: 0; }
+.kit-color-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; }
+.kit-color-slider code { text-align: right; font-size: 11px; }
+.kit-color-dropper { width: 30px; height: 30px; padding: 6px; flex: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; }
+.kit-color-dropper[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
+.kit-color-dropper svg { display: block; width: 100%; height: 100%; }
+.kit-color-hint { margin: -4px 0 10px; font-size: 11px; color: var(--text-muted); }
+
+/* While the dropper is armed: the picture's area outlined, and the loupe beside the pointer. */
+.kit-color-target { outline: 2px solid var(--accent); outline-offset: 3px; }
+.kit-color-target img { cursor: crosshair; }
+.kit-color-loupe { position: fixed; z-index: 60; pointer-events: none; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); text-align: center; }
+.kit-color-loupe canvas { display: block; width: 99px; height: 99px; border-radius: 4px; image-rendering: pixelated; }
+.kit-color-loupe code { display: block; margin-top: 3px; font-size: 11px; }
diff --git a/template/src/lib/ui/color.js b/template/src/lib/ui/color.js
new file mode 100644
index 0000000..9f1406c
--- /dev/null
+++ b/template/src/lib/ui/color.js
@@ -0,0 +1,418 @@
+// The color picker, in place of the browser's own: Composer embeds Edge, whose picker's dropper reads the wrong place
+// in Composer's window. Each color input gets a swatch button that opens a popover with the colors a page offers, the
+// recent ones, a hex box, hue, saturation and lightness sliders and, given a picture, a dropper with a loupe. A page
+// embeds it after page.js, with color.css after style.css.
+//   Kit.color                          normal(text) to #RRGGBB or null; rgb(hex), hex([r, g, b]), hsl(hex) to
+//                                      { h, s, l } and fromHsl({ h, s, l })
+//   Kit.colorPicker(input, options)    takes over an <input type="color">; Kit.colorPicker.close(keep) closes the
+//                                      open one, keeping its color or, with keep false, undoing it as Esc does
+//     offer()          rows shown first, [{ title, colors }], each color a hex
+//     recentKey        the localStorage key the recent colors are kept under; "kitRecentColors" by default
+//     dropper          { when(): whether to offer it, image(): the <img> it reads, area(): what that sits in,
+//                      backdrop(): [r, g, b] under the image's see-through pixels }
+//     onOpen(), onCancel(start)  told as it opens, and on Esc instead of putting the input back to start
+// The input keeps the value: setting it from code repaints the swatch, a pick sets it and fires its input event, and
+// a no-color class on it crosses the swatch out.
+
+(function (Kit) {
+  var VALUE = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+  var LOUPE_CELLS = 11;
+  var LOUPE_ZOOM = 9;
+  var DROPPER_ICON =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"' +
+    ' stroke-linejoin="round" aria-hidden="true"><path d="M13 8l3 3-8 8H5v-3z"/><path d="M12 5l7 7"/>' +
+    '<path d="M15 6l2.2-2.2a2.3 2.3 0 0 1 3.3 3.3L18.3 9"/></svg>';
+
+  function normal(v) {
+    var m = /^#?([0-9a-f]{6}|[0-9a-f]{3})$/i.exec(String(v == null ? "" : v).trim());
+    if (!m) return null;
+    var h = m[1].length === 3 ? m[1].replace(/./g, "$&$&") : m[1];
+    return "#" + h.toUpperCase();
+  }
+  function rgb(h) {
+    return [1, 3, 5].map(function (i) {
+      return parseInt(h.slice(i, i + 2), 16);
+    });
+  }
+  function hex(c) {
+    return (
+      "#" +
+      c
+        .map(function (v) {
+          return Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0");
+        })
+        .join("")
+        .toUpperCase()
+    );
+  }
+  function hsl(h) {
+    var c = rgb(h).map(function (v) {
+      return v / 255;
+    });
+    var mx = Math.max.apply(0, c), mn = Math.min.apply(0, c);
+    var l = (mx + mn) / 2, d = mx - mn, s = 0, hue = 0;
+    if (d) {
+      s = d / (1 - Math.abs(2 * l - 1));
+      hue = mx === c[0] ? ((c[1] - c[2]) / d) % 6 : mx === c[1] ? (c[2] - c[0]) / d + 2 : (c[0] - c[1]) / d + 4;
+      hue *= 60;
+      if (hue < 0) hue += 360;
+    }
+    return { h: hue, s: Math.min(1, s), l: l };
+  }
+  function fromHsl(o) {
+    var c = (1 - Math.abs(2 * o.l - 1)) * o.s, x = c * (1 - Math.abs(((o.h / 60) % 2) - 1)), m = o.l - c / 2;
+    var r = [[c, x, 0], [x, c, 0], [0, c, x], [0, x, c], [x, 0, c], [c, 0, x]][Math.floor(o.h / 60) % 6];
+    return hex(
+      r.map(function (v) {
+        return (v + m) * 255;
+      })
+    );
+  }
+  Kit.color = { normal: normal, rgb: rgb, hex: hex, hsl: hsl, fromHsl: fromHsl };
+
+  function recent(key) {
+    try {
+      return (JSON.parse(localStorage.getItem(key)) || []).map(normal).filter(Boolean).slice(0, 10);
+    } catch (e) {
+      return [];
+    }
+  }
+  function remember(key, h) {
+    var list = [h].concat(
+      recent(key).filter(function (c) {
+        return c !== h;
+      })
+    );
+    try {
+      localStorage.setItem(key, JSON.stringify(list.slice(0, 10)));
+    } catch (e) {}
+  }
+
+  function paint(input) {
+    var btn = input.kitSwatch;
+    if (!btn) return;
+    btn.firstChild.style.background = VALUE.get.call(input);
+    btn.classList.toggle("no-color", input.classList.contains("no-color"));
+  }
+  // Set as a person picking would, so the page's own handler runs.
+  function pick(input, h) {
+    if (VALUE.get.call(input).toUpperCase() === h) return;
+    VALUE.set.call(input, h.toLowerCase());
+    paint(input);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+
+  // The picture's pixel under the pointer, kept inside it where a scaled edge falls between pixels.
+  function pixelAt(img, e) {
+    var r = img.getBoundingClientRect();
+    if (!img.naturalWidth || !r.width || !r.height) return null;
+    var at = function (v, from, size, n) {
+      return Math.max(0, Math.min(n - 1, Math.floor(((v - from) / size) * n)));
+    };
+    return { x: at(e.clientX, r.left, r.width, img.naturalWidth), y: at(e.clientY, r.top, r.height, img.naturalHeight) };
+  }
+  function canvasOf(img) {
+    if (!img.kitPixels) {
+      var c = document.createElement("canvas");
+      c.width = img.naturalWidth;
+      c.height = img.naturalHeight;
+      c.getContext("2d", { willReadFrequently: true }).drawImage(img, 0, 0);
+      img.kitPixels = c;
+    }
+    return img.kitPixels;
+  }
+  function colorAt(img, p, back) {
+    var d = canvasOf(img).getContext("2d").getImageData(p.x, p.y, 1, 1).data, a = d[3] / 255;
+    return hex(
+      back.map(function (v, i) {
+        return d[i] * a + v * (1 - a);
+      })
+    );
+  }
+  // The pixels around the pointer, magnified, beside it and inside the window.
+  function drawLoupe(loupe, img, p, e, h, back) {
+    var n = LOUPE_CELLS, z = LOUPE_ZOOM, half = (n - 1) / 2, ctx = loupe.firstChild.getContext("2d");
+    ctx.imageSmoothingEnabled = false;
+    ctx.fillStyle = hex(back);
+    ctx.fillRect(0, 0, n * z, n * z);
+    ctx.drawImage(canvasOf(img), p.x - half, p.y - half, n, n, 0, 0, n * z, n * z);
+    ctx.strokeStyle = "#000000";
+    ctx.strokeRect(half * z - 0.5, half * z - 0.5, z + 1, z + 1);
+    ctx.strokeStyle = "#FFFFFF";
+    ctx.strokeRect(half * z + 0.5, half * z + 0.5, z - 1, z - 1);
+    loupe.lastChild.textContent = h;
+    loupe.hidden = false;
+    var w = loupe.offsetWidth, ht = loupe.offsetHeight, gap = 18, page = document.documentElement;
+    loupe.style.left = (e.clientX + gap + w > page.clientWidth ? e.clientX - gap - w : e.clientX + gap) + "px";
+    loupe.style.top = (e.clientY + gap + ht > page.clientHeight ? e.clientY - gap - ht : e.clientY + gap) + "px";
+  }
+
+  var current = null;
+
+  function close(keep) {
+    var pop = current;
+    if (!pop) return;
+    current = null;
+    pop.stopDropping();
+    pop.remove();
+    document.removeEventListener("mousedown", pop.outside, true);
+    document.removeEventListener("keydown", pop.keys, true);
+    var input = pop.input, o = input.kitColor;
+    if (keep !== false) {
+      var now = VALUE.get.call(input).toUpperCase();
+      if (now !== pop.start) remember(o.recentKey || "kitRecentColors", now);
+    } else if (o.onCancel) {
+      o.onCancel(pop.start);
+    } else {
+      pick(input, pop.start);
+    }
+    input.kitSwatch.focus();
+  }
+
+  function open(input) {
+    close(true);
+    var o = input.kitColor, key = o.recentKey || "kitRecentColors", dropper = o.dropper;
+    var start = VALUE.get.call(input).toUpperCase();
+    if (o.onOpen) o.onOpen();
+    var pop = document.createElement("div");
+    pop.className = "kit-pop kit-color";
+    pop.setAttribute("role", "dialog");
+    pop.setAttribute("aria-label", "Choose a color");
+    pop.input = input;
+    pop.start = start;
+    var rows = (o.offer ? o.offer() : []).concat([{ title: "Recent", colors: recent(key) }]);
+    pop.innerHTML =
+      rows
+        .filter(function (r) {
+          return r.colors && r.colors.length;
+        })
+        .map(function (r) {
+          return (
+            '<div class="kit-color-label">' + Kit.esc(r.title) + '</div><div class="kit-color-chips">' +
+            r.colors
+              .map(function (h) {
+                return (
+                  '<button type="button" class="kit-color-chip" data-hex="' + h + '" title="' + h + '" aria-label="' +
+                  h + '" style="background:' + h + '"></button>'
+                );
+              })
+              .join("") +
+            "</div>"
+          );
+        })
+        .join("") +
+      '<div class="kit-color-hex"><span></span><input type="text" class="sm" maxlength="7" spellcheck="false"' +
+      ' aria-label="Hex color"><button type="button" class="kit-color-dropper" aria-pressed="false"' +
+      ' title="Pick a color from the picture" aria-label="Pick a color from the picture">' + DROPPER_ICON +
+      '</button></div><div class="kit-color-hint" hidden>Click the picture to pick a color.</div>' +
+      ["H", "S", "L"]
+        .map(function (k) {
+          return (
+            '<label class="kit-color-slider"><span>' + k + '</span><input type="range" data-k="' + k +
+            '" min="0" max="' + (k === "H" ? 359 : 100) + '" aria-label="' +
+            { H: "Hue", S: "Saturation", L: "Lightness" }[k] + '"><code></code></label>'
+          );
+        })
+        .join("");
+    var box = pop.querySelector(".kit-color-hex input"), sample = pop.querySelector(".kit-color-hex span");
+    var sliders = pop.querySelectorAll(".kit-color-slider input"), drop = pop.querySelector(".kit-color-dropper");
+    var hint = pop.querySelector(".kit-color-hint"), loupe = null, tone = hsl(start);
+    var now = function () {
+      return VALUE.get.call(input).toUpperCase();
+    };
+    var show = function (h, from) {
+      sample.style.background = h;
+      if (from !== "hex") {
+        box.value = h;
+        box.classList.remove("input-error");
+      }
+      if (from !== "slider") tone = hsl(h);
+      var v = { H: Math.round(tone.h), S: Math.round(tone.s * 100), L: Math.round(tone.l * 100) };
+      Array.prototype.forEach.call(sliders, function (r) {
+        if (from !== "slider") r.value = v[r.dataset.k];
+        r.nextElementSibling.textContent = v[r.dataset.k] + (r.dataset.k === "H" ? "" : "%");
+      });
+      sliders[0].style.background =
+        "linear-gradient(to right," +
+        [0, 60, 120, 180, 240, 300, 359]
+          .map(function (d) {
+            return "hsl(" + d + ",100%,50%)";
+          })
+          .join(",") +
+        ")";
+      sliders[1].style.background =
+        "linear-gradient(to right,hsl(" + v.H + ",0%," + v.L + "%),hsl(" + v.H + ",100%," + v.L + "%))";
+      sliders[2].style.background = "linear-gradient(to right,#000,hsl(" + v.H + "," + v.S + "%,50%),#fff)";
+      Array.prototype.forEach.call(pop.querySelectorAll(".kit-color-chip"), function (c) {
+        c.classList.toggle("on", c.dataset.hex === h);
+      });
+    };
+    pop.addEventListener("click", function (e) {
+      var chip = e.target.closest(".kit-color-chip");
+      if (!chip) return;
+      pick(input, chip.dataset.hex);
+      show(chip.dataset.hex);
+    });
+    box.addEventListener("input", function () {
+      var h = normal(box.value);
+      box.classList.toggle("input-error", !h);
+      if (h) {
+        pick(input, h);
+        show(h, "hex");
+      }
+    });
+    box.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        close(true);
+      }
+    });
+    Array.prototype.forEach.call(sliders, function (r) {
+      r.addEventListener("input", function () {
+        tone = { h: Number(sliders[0].value), s: Number(sliders[1].value) / 100, l: Number(sliders[2].value) / 100 };
+        var h = normal(fromHsl(tone));
+        pick(input, h);
+        show(h, "slider");
+      });
+    });
+
+    // The dropper: armed by its button, it shows the color under the pointer and picks it on a click.
+    drop.hidden = !(dropper && (dropper.when ? dropper.when() : dropper.image()));
+    var back = function () {
+      return dropper.backdrop ? dropper.backdrop() : [255, 255, 255];
+    };
+    var area = function () {
+      return dropper.area ? dropper.area() : dropper.image();
+    };
+    pop.stopDropping = function () {
+      if (!pop.dropping) return;
+      pop.dropping = false;
+      drop.setAttribute("aria-pressed", "false");
+      hint.hidden = true;
+      var a = area();
+      if (a) a.classList.remove("kit-color-target");
+      document.removeEventListener("mousemove", pop.hover, true);
+      document.removeEventListener("mouseout", pop.away, true);
+      if (loupe) loupe.remove();
+      loupe = null;
+      sample.style.background = now();
+    };
+    pop.hover = function (e) {
+      var img = dropper.image(), p = img && e.target === img && pixelAt(img, e);
+      if (!p) {
+        if (loupe) loupe.hidden = true;
+        sample.style.background = now();
+        return;
+      }
+      var h = colorAt(img, p, back());
+      if (!loupe) {
+        loupe = document.createElement("div");
+        loupe.className = "kit-color-loupe";
+        loupe.innerHTML =
+          '<canvas width="' + LOUPE_CELLS * LOUPE_ZOOM + '" height="' + LOUPE_CELLS * LOUPE_ZOOM + '"></canvas><code></code>';
+        document.body.appendChild(loupe);
+      }
+      drawLoupe(loupe, img, p, e, h, back());
+      sample.style.background = h;
+    };
+    pop.away = function (e) {
+      if (e.relatedTarget) return;
+      if (loupe) loupe.hidden = true;
+      sample.style.background = now();
+    };
+    drop.addEventListener("click", function () {
+      if (pop.dropping) {
+        pop.stopDropping();
+        return;
+      }
+      pop.dropping = true;
+      drop.setAttribute("aria-pressed", "true");
+      hint.hidden = false;
+      var a = area();
+      if (a) a.classList.add("kit-color-target");
+      document.addEventListener("mousemove", pop.hover, true);
+      document.addEventListener("mouseout", pop.away, true);
+      // Over the picture, as in a narrow window, the picker moves above its swatch.
+      if (!a) return;
+      var t = a.getBoundingClientRect(), b = pop.getBoundingClientRect(), at = input.kitSwatch.getBoundingClientRect();
+      if (b.left < t.right && b.right > t.left && b.top < t.bottom && b.bottom > t.top && at.top - b.height - 6 >= 0) {
+        pop.style.top = at.top - b.height - 6 + window.scrollY + "px";
+      }
+    });
+    pop.outside = function (e) {
+      if (pop.dropping && !drop.contains(e.target)) {
+        var img = dropper.image(), p = e.button === 0 && img && e.target === img && pixelAt(img, e);
+        var h = p && colorAt(img, p, back());
+        pop.stopDropping();
+        if (h) {
+          // A pick, not a click away: the picker stays open on the new color.
+          e.preventDefault();
+          pick(input, h);
+          show(h);
+          return;
+        }
+        // A near miss on the picture's area only stops the dropper.
+        var a = area();
+        if (a && a.contains(e.target)) return;
+      }
+      if (!pop.contains(e.target) && !input.kitSwatch.contains(e.target)) close(true);
+    };
+    pop.keys = function (e) {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      if (pop.dropping) pop.stopDropping();
+      else close(false);
+    };
+    document.addEventListener("mousedown", pop.outside, true);
+    document.addEventListener("keydown", pop.keys, true);
+    document.body.appendChild(pop);
+    var at = input.kitSwatch.getBoundingClientRect();
+    var left = Math.max(8, Math.min(at.left, document.documentElement.clientWidth - pop.offsetWidth - 8));
+    pop.style.left = left + window.scrollX + "px";
+    pop.style.top = at.bottom + 6 + window.scrollY + "px";
+    current = pop;
+    show(start);
+    box.focus();
+    box.select();
+  }
+
+  function colorPicker(input, options) {
+    input.kitColor = options || {};
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "kit-swatch";
+    btn.id = input.id + "-swatch";
+    btn.appendChild(document.createElement("span"));
+    var label = input.id && document.querySelector('label[for="' + input.id + '"]');
+    if (label) {
+      label.htmlFor = btn.id;
+      btn.setAttribute("aria-label", label.textContent);
+    }
+    input.kitSwatch = btn;
+    input.hidden = true;
+    input.tabIndex = -1;
+    input.parentNode.insertBefore(btn, input);
+    // The page also sets the value from code, and the swatch follows.
+    Object.defineProperty(input, "value", {
+      configurable: true,
+      get: function () {
+        return VALUE.get.call(this);
+      },
+      set: function (v) {
+        VALUE.set.call(this, v);
+        paint(this);
+      },
+    });
+    new MutationObserver(function () {
+      paint(input);
+    }).observe(input, { attributes: true, attributeFilter: ["class"] });
+    btn.addEventListener("click", function () {
+      if (current && current.input === input) close(true);
+      else open(input);
+    });
+    paint(input);
+  }
+  colorPicker.close = close;
+
+  Kit.colorPicker = colorPicker;
+})(Kit);
diff --git a/template/src/lib/ui/combobox.css b/template/src/lib/ui/combobox.css
new file mode 100644
index 0000000..33c93ba
--- /dev/null
+++ b/template/src/lib/ui/combobox.css
@@ -0,0 +1,39 @@
+/* Kit.combobox: a searchable dropdown drawn as a compact select, its list in a popover under it. In a grid or flex
+   row it shrinks to its column; a page gives it a width through the combobox's style option. A page embeds this
+   after style.css, with combobox.js. */
+
+.kit-combo { position: relative; display: inline-block; min-width: 0; }
+/* Lifted while open, so its list clears the cards after it. */
+.kit-combo.open { z-index: 60; }
+.kit-combo-trigger {
+  width: 100%; padding: 4px 24px 4px 7px; font: inherit; font-size: 12px; line-height: 18px; text-align: left;
+  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
+  background-color: var(--surface); background-image: var(--chevron);
+  background-repeat: no-repeat; background-position: right 7px center; background-size: 10px 6px;
+  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.kit-combo-trigger.placeholder { color: var(--text-muted); }
+.kit-combo-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
+.kit-combo-pop {
+  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 70; min-width: 220px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+}
+.kit-combo.open .kit-combo-pop { display: block; }
+.kit-combo-pop.flip-right { left: auto; right: 0; }
+.kit-combo-pop.flip-up { top: auto; bottom: 100%; }
+/* Two classes, to outweigh the base input rule. */
+.kit-combo-pop .kit-combo-search {
+  padding: 5px 8px; font-size: 12px; box-shadow: none;
+  border: none; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
+}
+.kit-combo-list { max-height: 180px; overflow-y: auto; }
+.kit-combo-item { padding: 4px 8px; cursor: pointer; font-size: 12px; }
+.kit-combo-item:hover, .kit-combo-item.active { background: var(--surface-hover); }
+.kit-combo-item.selected { background: #dbeafe; }
+.kit-combo-none { padding: 4px 8px; font-size: 12px; color: var(--text-muted); }
+.kit-combo-section {
+  padding: 4px 8px 2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
+  color: #9ca3af; border-top: 1px solid var(--border);
+}
+.kit-combo-list > .kit-combo-section:first-child { border-top: none; }
diff --git a/template/src/lib/ui/combobox.js b/template/src/lib/ui/combobox.js
new file mode 100644
index 0000000..c84be7e
--- /dev/null
+++ b/template/src/lib/ui/combobox.js
@@ -0,0 +1,195 @@
+// A searchable dropdown, drawn as a compact select: a page that renders its HTML as a string puts the markup in,
+// and drawing it again on the next render keeps it open, its search and its highlighted choice, by key. A page embeds
+// it after page.js, with combobox.css after style.css.
+//   Kit.combobox(key, options)  the control's markup. options:
+//     label                     the trigger's text; empty shows the placeholder
+//     placeholder               the trigger's text with nothing picked
+//     title                     the trigger's tooltip, by default its label
+//     items()                   the choices, [{ value, label, section }], or null while they load; a section heads the
+//                               choices after it
+//     value                     the picked choice's value, marked in the list
+//     search                    false for a list with no search box
+//     empty, loading            what an empty list and a loading one say
+//     onPick(value, item)       a choice was made; the list closes
+//     className, style          on the control, as a width
+//   Kit.combobox.set(key, { label, value })  shows another pick on a drawn control without drawing the page again
+//   Kit.combobox.refresh(key)   fills an open list again, as when its choices arrive
+//   Kit.combobox.close()        closes the open list
+// Escape closes the list, Up and Down move through it, Enter picks; a click outside it closes it.
+
+(function (Kit) {
+  var defs = {}; // key -> its latest options
+  var openKey = null;
+  var query = "";
+  var active = -1;
+
+  function control(key) {
+    var all = document.querySelectorAll("[data-combo]");
+    for (var i = 0; i < all.length; i++) if (all[i].getAttribute("data-combo") === key) return all[i];
+    return null;
+  }
+
+  // The choices the search leaves, each with the section it is under.
+  function shown(key) {
+    var list = defs[key].items();
+    if (!list) return null;
+    var q = query.toLowerCase();
+    return list.filter(function (it) {
+      return !q || Kit.str(it.label).toLowerCase().indexOf(q) >= 0;
+    });
+  }
+
+  function listHtml(key) {
+    var def = defs[key];
+    var list = shown(key);
+    if (!list) return '<div class="kit-combo-none">' + Kit.esc(def.loading || "Loading…") + "</div>";
+    if (!list.length) return '<div class="kit-combo-none">' + Kit.esc(def.empty || "No matches") + "</div>";
+    var section = null;
+    return list
+      .map(function (it, i) {
+        var head = "";
+        if (it.section && it.section !== section) {
+          head = '<div class="kit-combo-section">' + Kit.esc(it.section) + "</div>";
+          section = it.section;
+        }
+        var cls = "kit-combo-item" + (Kit.str(it.value) === Kit.str(def.value) ? " selected" : "") + (i === active ? " active" : "");
+        return head + '<div class="' + cls + '" role="option" data-index="' + i + '">' + Kit.esc(it.label) + "</div>";
+      })
+      .join("");
+  }
+
+  function combobox(key, options) {
+    defs[key] = options;
+    var isOpen = key === openKey;
+    var label = Kit.str(options.label);
+    var html =
+      '<div class="kit-combo' + (isOpen ? " open" : "") + (options.className ? " " + options.className : "") + '" data-combo="' + Kit.esc(key) + '"' +
+      (options.style ? ' style="' + Kit.esc(options.style) + '"' : "") + ">" +
+      '<button type="button" class="kit-combo-trigger' + (label ? "" : " placeholder") + '" aria-haspopup="listbox" aria-expanded="' + isOpen + '"' +
+      ' title="' + Kit.esc(options.title || label) + '">' + Kit.esc(label || options.placeholder || "") + "</button>" +
+      '<div class="kit-combo-pop">' +
+      (options.search === false ? "" : '<input type="text" class="kit-combo-search" placeholder="Search…" value="' + Kit.esc(isOpen ? query : "") + '">') +
+      '<div class="kit-combo-list" role="listbox">' + (isOpen ? listHtml(key) : "") + "</div></div></div>";
+    // Drawn again while open, the search keeps the focus it had once the page has put this in.
+    if (isOpen) setTimeout(focusOpen, 0);
+    return html;
+  }
+
+  function part(el, name) {
+    return el.querySelector(".kit-combo-" + name);
+  }
+
+  function focusOpen() {
+    var el = openKey === null ? null : control(openKey);
+    if (!el) return;
+    var search = part(el, "search");
+    if (search && document.activeElement !== search) search.focus();
+  }
+
+  // A list that would leave the pane opens to the left or upward instead.
+  function place(el) {
+    var pop = part(el, "pop");
+    pop.classList.remove("flip-right", "flip-up");
+    var r = pop.getBoundingClientRect();
+    var t = part(el, "trigger").getBoundingClientRect();
+    var room = document.documentElement;
+    if (r.right > room.clientWidth - 8) pop.classList.add("flip-right");
+    var below = room.clientHeight - t.bottom;
+    if (r.height > below - 8 && t.top > below) pop.classList.add("flip-up");
+  }
+
+  function fill(key) {
+    var el = control(key);
+    if (!el) return;
+    part(el, "list").innerHTML = listHtml(key);
+    var on = part(el, "list").querySelector(".active");
+    if (on) on.scrollIntoView({ block: "nearest" });
+    place(el);
+  }
+
+  function close() {
+    var el = openKey === null ? null : control(openKey);
+    openKey = null;
+    if (!el) return;
+    el.classList.remove("open");
+    part(el, "trigger").setAttribute("aria-expanded", "false");
+  }
+
+  function open(key) {
+    close();
+    var el = control(key);
+    if (!el) return;
+    openKey = key;
+    query = "";
+    active = -1;
+    el.classList.add("open");
+    part(el, "trigger").setAttribute("aria-expanded", "true");
+    var search = part(el, "search");
+    if (search) search.value = "";
+    fill(key);
+    (search || part(el, "trigger")).focus();
+  }
+
+  function pick(key, index) {
+    var list = shown(key);
+    var it = list && list[index];
+    if (!it) return;
+    close();
+    defs[key].onPick(it.value, it);
+  }
+
+  combobox.set = function (key, changes) {
+    var def = defs[key];
+    var el = control(key);
+    if (!def) return;
+    if ("label" in changes) def.label = changes.label;
+    if ("value" in changes) def.value = changes.value;
+    if (!el) return;
+    var trigger = part(el, "trigger");
+    var label = Kit.str(def.label);
+    trigger.textContent = label || def.placeholder || "";
+    trigger.title = def.title || label;
+    trigger.classList.toggle("placeholder", !label);
+    if (key === openKey) fill(key);
+  };
+  combobox.refresh = function (key) {
+    if (key === openKey) fill(key);
+  };
+  combobox.close = close;
+
+  document.addEventListener("click", function (e) {
+    var el = e.target.closest ? e.target.closest("[data-combo]") : null;
+    var key = el ? el.getAttribute("data-combo") : null;
+    if (key === null || !defs[key]) return close();
+    if (e.target.closest(".kit-combo-trigger")) return key === openKey ? close() : open(key);
+    var item = e.target.closest(".kit-combo-item");
+    if (item) pick(key, Number(item.getAttribute("data-index")));
+  });
+  document.addEventListener("input", function (e) {
+    if (openKey === null || !e.target.classList || !e.target.classList.contains("kit-combo-search")) return;
+    query = e.target.value;
+    active = -1;
+    fill(openKey);
+  });
+  document.addEventListener("keydown", function (e) {
+    if (openKey === null || !e.target.closest || !e.target.closest("[data-combo]")) return;
+    var key = openKey;
+    var count = (shown(key) || []).length;
+    if (e.key === "Escape") {
+      var el = control(key);
+      close();
+      if (el) part(el, "trigger").focus();
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (!count) return;
+      active = e.key === "ArrowDown" ? (active + 1) % count : (active <= 0 ? count : active) - 1;
+      fill(key);
+    } else if (e.key === "Enter") {
+      pick(key, active >= 0 ? active : count === 1 ? 0 : -1);
+    } else {
+      return;
+    }
+    e.preventDefault();
+  });
+
+  Kit.combobox = combobox;
+})(Kit);
diff --git a/template/src/lib/ui/menu.css b/template/src/lib/ui/menu.css
new file mode 100644
index 0000000..df1f740
--- /dev/null
+++ b/template/src/lib/ui/menu.css
@@ -0,0 +1,10 @@
+/* lib/ui/menu.js's split button: the main button and its arrow as one control, a line between them, and the menu the
+   arrow opens under it. The arrow keeps the main button's height and is narrower. */
+.kit-split { position: relative; display: inline-flex; align-self: center; }
+.kit-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.kit-split > .btn + .btn.kit-split-arrow { padding-left: 7px; padding-right: 7px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.45); }
+.kit-split > .btn + .btn-secondary.kit-split-arrow { border-left: 0; }
+.kit-split-arrow::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; margin-top: 2px; }
+.kit-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 6; display: flex; flex-direction: column; min-width: 100%; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
+.kit-menu button { background: none; border: 0; border-radius: 4px; padding: 6px 10px; text-align: left; white-space: nowrap; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; }
+.kit-menu button:hover, .kit-menu button:focus-visible { background: var(--surface-hover); outline: none; }
diff --git a/template/src/lib/ui/menu.js b/template/src/lib/ui/menu.js
new file mode 100644
index 0000000..459cf0e
--- /dev/null
+++ b/template/src/lib/ui/menu.js
@@ -0,0 +1,80 @@
+// A button with an arrow beside it that opens a menu of the other choices, for a page that draws its markup as
+// strings and draws it again on every push: the open menu is kept by name, and a pick, a click elsewhere or Escape
+// closes it. A page embeds it after page.js, and menu.css after style.css, the same way.
+//   Kit.splitButton(name, button, items, options)  `button` (the main button's markup), its arrow and, while open, the
+//       menu of `items`, each [label, pick]; `button` alone when there are no items. options.label names the arrow
+//       for a screen reader, options.onChange() draws the page again after the menu opens or closes
+//   Kit.menu.isOpen(name), Kit.menu.close()
+
+(function (Kit) {
+  var menus = {};
+  var openName = null;
+
+  function changed(name) {
+    var m = menus[name];
+    if (m && m.onChange) m.onChange();
+  }
+
+  function close() {
+    var was = openName;
+    openName = null;
+    if (was !== null) changed(was);
+  }
+
+  function splitButton(name, button, items, options) {
+    if (!button || !items || !items.length) return button;
+    options = options || {};
+    menus[name] = { items: items, onChange: options.onChange };
+    var open = openName === name;
+    // The arrow takes the main button's own look.
+    var look = button.indexOf("btn-primary") >= 0 ? "btn-primary" : "btn-secondary";
+    var n = Kit.esc(name);
+    return (
+      '<span class="kit-split">' + button +
+      '<button type="button" class="btn ' + look + ' kit-split-arrow" data-kit-menu="' + n + '" aria-label="' +
+      Kit.esc(options.label || "More") + '" aria-haspopup="menu" aria-expanded="' + open + '"></button>' +
+      (open
+        ? '<span class="kit-menu" role="menu">' +
+          items
+            .map(function (item, i) {
+              return '<button type="button" role="menuitem" data-kit-menu-item="' + n + '" data-index="' + i + '">' +
+                Kit.esc(item[0]) + "</button>";
+            })
+            .join("") +
+          "</span>"
+        : "") +
+      "</span>"
+    );
+  }
+
+  document.addEventListener("click", function (e) {
+    var t = e.target && e.target.closest ? e.target : null;
+    var arrow = t && t.closest("[data-kit-menu]");
+    var item = !arrow && t && t.closest("[data-kit-menu-item]");
+    if (arrow) {
+      var name = arrow.getAttribute("data-kit-menu");
+      openName = openName === name ? null : name;
+      changed(name);
+    } else if (item) {
+      var m = menus[item.getAttribute("data-kit-menu-item")];
+      var pick = m && m.items[Number(item.getAttribute("data-index"))];
+      var was = openName;
+      openName = null;
+      if (pick) pick[1]();
+      changed(was);
+    } else {
+      close();
+    }
+  });
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") close();
+  });
+
+  Kit.splitButton = splitButton;
+  Kit.menu = {
+    isOpen: function (name) {
+      return openName === name;
+    },
+    close: close,
+  };
+})(Kit);
diff --git a/template/src/lib/ui/pickgrid.css b/template/src/lib/ui/pickgrid.css
new file mode 100644
index 0000000..132263b
--- /dev/null
+++ b/template/src/lib/ui/pickgrid.css
@@ -0,0 +1,18 @@
+/* Picking a picture: Kit.pickGrid's grid of .kit-pick cells, and Kit.dropZone's zone. A page embeds this after
+   style.css, with pickgrid.js. */
+
+.kit-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
+.kit-pick { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
+.kit-pick:hover { background: var(--surface-hover); }
+.kit-pick.on { border-color: var(--accent); box-shadow: 0 0 0 2px #bfdbfe; }
+.kit-pick img { width: 28px; height: 28px; }
+.kit-pick.dark { background: #1f2a36; border-color: #1f2a36; }
+.kit-pick.dark:hover { background: #2b3a4a; }
+.kit-pick.dark img { width: 40px; height: 40px; }
+.kit-pick.photo img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; }
+.kit-pick-text { font-size: 9px; color: var(--text-muted); padding: 2px; word-break: break-all; text-align: center; }
+.kit-pick-tag { position: absolute; right: 3px; bottom: 2px; font-size: 9px; color: var(--text-muted); background: var(--surface); border-radius: 3px; padding: 0 3px; }
+
+.kit-drop { flex: 1; border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 18px 12px; text-align: center; font-size: 12px; background: var(--surface); }
+.kit-drop.over { border-color: var(--accent); background: #eff6ff; }
+.kit-drop .note { margin-top: 6px; }
diff --git a/template/src/lib/ui/pickgrid.js b/template/src/lib/ui/pickgrid.js
new file mode 100644
index 0000000..652b447
--- /dev/null
+++ b/template/src/lib/ui/pickgrid.js
@@ -0,0 +1,138 @@
+// Picking a picture: a grid of picture cells to pick one from, and a zone a file is dropped on, chosen into or pasted
+// into. A page embeds it after page.js, with pickgrid.css after style.css.
+//   Kit.pickGrid(el, options)   el becomes the grid; returns { fill(items, empty), set(item), mark(id), cell(id) }:
+//                               set redraws one item's cell in place, and the picked id's cell stays marked
+//     onPick(id)                a cell was picked
+//     empty                     what an empty grid says, unless fill names it
+//   An item is { id, title, src } for a picture or { id, title, text } for words in its place, with dark (a picture
+//   drawn on a dark tile), photo (one that fills the cell) and tag (a word in its corner).
+//   Kit.dropZone(el, options)   el becomes the zone
+//     onFile(file)              a file was dropped, chosen or pasted
+//     choose                    the button that opens the file chooser
+//     accept                    the chooser's accepted types
+//     pasteWhen()               whether a picture pasted outside a text box goes to this zone now
+
+(function (Kit) {
+  function cellFor(item) {
+    var b = document.createElement("button");
+    b.type = "button";
+    b.className = "kit-pick" + (item.dark ? " dark" : "") + (item.photo ? " photo" : "");
+    b.dataset.id = item.id;
+    b.title = item.title || item.id;
+    if (item.src) {
+      var img = document.createElement("img");
+      img.alt = "";
+      img.src = item.src;
+      b.appendChild(img);
+    } else {
+      var t = document.createElement("span");
+      t.className = "kit-pick-text";
+      t.textContent = item.text || item.id;
+      b.appendChild(t);
+    }
+    if (item.tag) {
+      var tag = document.createElement("span");
+      tag.className = "kit-pick-tag";
+      tag.textContent = item.tag;
+      b.appendChild(tag);
+    }
+    return b;
+  }
+
+  function pickGrid(el, options) {
+    options = options || {};
+    var picked = null;
+    el.classList.add("kit-pickgrid");
+    function find(id) {
+      return el.querySelector('button[data-id="' + String(id).replace(/["\\]/g, "\\$&") + '"]');
+    }
+    el.addEventListener("click", function (e) {
+      var b = e.target.closest("button[data-id]");
+      if (b && el.contains(b) && options.onPick) options.onPick(b.dataset.id);
+    });
+    function mark(id) {
+      picked = id == null ? null : String(id);
+      Array.prototype.forEach.call(el.querySelectorAll("button[data-id]"), function (b) {
+        b.classList.toggle("on", b.dataset.id === picked);
+      });
+    }
+    return {
+      fill: function (items, empty) {
+        el.textContent = "";
+        if (!items.length) {
+          var d = document.createElement("div");
+          d.className = "empty";
+          d.textContent = empty || options.empty || "Nothing here.";
+          el.appendChild(d);
+          return;
+        }
+        var frag = document.createDocumentFragment();
+        items.forEach(function (item) {
+          frag.appendChild(cellFor(item));
+        });
+        el.appendChild(frag);
+        mark(picked);
+      },
+      set: function (item) {
+        var old = find(item.id);
+        if (!old) return;
+        var cell = cellFor(item);
+        cell.classList.toggle("on", cell.dataset.id === picked);
+        el.insertBefore(cell, old);
+        el.removeChild(old);
+      },
+      mark: mark,
+      cell: find,
+    };
+  }
+
+  function dropZone(el, options) {
+    options = options || {};
+    el.classList.add("kit-drop");
+    var file = document.createElement("input");
+    file.type = "file";
+    file.hidden = true;
+    if (options.accept) file.accept = options.accept;
+    el.appendChild(file);
+    file.addEventListener("change", function () {
+      var f = file.files && file.files[0];
+      file.value = "";
+      if (f) options.onFile(f);
+    });
+    if (options.choose) {
+      options.choose.addEventListener("click", function () {
+        file.click();
+      });
+    }
+    ["dragenter", "dragover"].forEach(function (t) {
+      el.addEventListener(t, function (e) {
+        e.preventDefault();
+        el.classList.add("over");
+      });
+    });
+    ["dragleave", "drop"].forEach(function (t) {
+      el.addEventListener(t, function () {
+        el.classList.remove("over");
+      });
+    });
+    el.addEventListener("drop", function (e) {
+      e.preventDefault();
+      var f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
+      if (f) options.onFile(f);
+    });
+    if (options.pasteWhen) {
+      document.addEventListener("paste", function (e) {
+        if (!options.pasteWhen() || /^(INPUT|TEXTAREA)$/.test((e.target && e.target.tagName) || "")) return;
+        var item = Array.prototype.find.call((e.clipboardData && e.clipboardData.items) || [], function (i) {
+          return i.kind === "file" && /^image\//.test(i.type);
+        });
+        if (!item) return;
+        e.preventDefault();
+        options.onFile(item.getAsFile());
+      });
+    }
+  }
+
+  Kit.pickGrid = pickGrid;
+  Kit.dropZone = dropZone;
+})(Kit);
diff --git a/template/src/lib/ui/style.css b/template/src/lib/ui/style.css
index 712fc23..2d8bff9 100644
--- a/template/src/lib/ui/style.css
+++ b/template/src/lib/ui/style.css
@@ -229,6 +229,8 @@ tbody tr:last-child td { border-bottom: none; }
    .kit-form-ctl), and a note under a control is .kit-form-note. */
 .kit-form { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 14px; align-items: center; }
 .kit-form-row { display: contents; }
+/* display: contents would otherwise beat [hidden]. */
+.kit-form-row[hidden] { display: none; }
 .kit-form-row > label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin: 0; }
 .kit-form-ctl { display: flex; align-items: center; gap: 8px; min-height: 30px; min-width: 0; }
 .kit-form-note { grid-column: 2; margin-top: -4px; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
diff --git a/template/test/test_ui_pages.lua b/template/test/test_ui_pages.lua
index c86ce54..7e5cc56 100644
--- a/template/test/test_ui_pages.lua
+++ b/template/test/test_ui_pages.lua
@@ -147,7 +147,16 @@ local function selectors(css)
   return out
 end
 
-local KIT_CSS = { "style.css", "variables.css", "expressions.css" }
+local KIT_CSS = {
+  "style.css",
+  "variables.css",
+  "expressions.css",
+  "collapse.css",
+  "menu.css",
+  "combobox.css",
+  "color.css",
+  "pickgrid.css",
+}
 local kitSelectors = {}
 for _, name in ipairs(KIT_CSS) do
   local css = read(ROOT .. "src/lib/ui/" .. name)
@@ -178,6 +187,9 @@ listing:close()
 
 -- Each component's script comes with its stylesheet.
 local PAIRS = { ["variables.js"] = "variables.css", ["expressions.js"] = "expressions.css" }
+for _, name in ipairs({ "collapse", "menu", "combobox", "color", "pickgrid" }) do
+  PAIRS[name .. ".js"] = name .. ".css"
+end
 
 local checked = 0
 for _, path in ipairs(pages) do
diff --git a/tests/build_checks.py b/tests/build_checks.py
index 2bb0e8d..2801038 100644
--- a/tests/build_checks.py
+++ b/tests/build_checks.py
@@ -50,7 +50,8 @@
 </body>
 </html>
 """
-UI_FILES = ("style.css", "variables.css", "expressions.css", "page.js", "variables.js", "expressions.js")
+UI_FILES = ("style.css", "variables.css", "expressions.css", "page.js", "variables.js", "expressions.js",
+            "collapse.css", "collapse.js", "menu.css", "menu.js", "combobox.css", "combobox.js", "color.css", "color.js", "pickgrid.css", "pickgrid.js")
 
 
 def kit_as_built(text, build):
diff --git a/tests/template-renders/ui-expressions.files b/tests/template-renders/ui-expressions.files
index ef3d30f..523c4f0 100644
--- a/tests/template-renders/ui-expressions.files
+++ b/tests/template-renders/ui-expressions.files
@@ -38,13 +38,23 @@ src/lib/lru.lua
 src/lib/persist.lua
 src/lib/redact.lua
 src/lib/support-code.lua
+src/lib/ui/collapse.css
+src/lib/ui/collapse.js
+src/lib/ui/color.css
+src/lib/ui/color.js
+src/lib/ui/combobox.css
+src/lib/ui/combobox.js
 src/lib/ui/devices.lua
 src/lib/ui/expression-tab.lua
 src/lib/ui/expressions.css
 src/lib/ui/expressions.js
+src/lib/ui/menu.css
+src/lib/ui/menu.js
 src/lib/ui/page-params.lua
 src/lib/ui/page.js
 src/lib/ui/page.lua
+src/lib/ui/pickgrid.css
+src/lib/ui/pickgrid.js
 src/lib/ui/style.css
 src/lib/ui/tab-properties.lua
 src/lib/ui/variables.css
diff --git a/tests/template-renders/ui.files b/tests/template-renders/ui.files
index 9038d70..b60737e 100644
--- a/tests/template-renders/ui.files
+++ b/tests/template-renders/ui.files
@@ -36,10 +36,20 @@ src/lib/lru.lua
 src/lib/persist.lua
 src/lib/redact.lua
 src/lib/support-code.lua
+src/lib/ui/collapse.css
+src/lib/ui/collapse.js
+src/lib/ui/color.css
+src/lib/ui/color.js
+src/lib/ui/combobox.css
+src/lib/ui/combobox.js
 src/lib/ui/devices.lua
+src/lib/ui/menu.css
+src/lib/ui/menu.js
 src/lib/ui/page-params.lua
 src/lib/ui/page.js
 src/lib/ui/page.lua
+src/lib/ui/pickgrid.css
+src/lib/ui/pickgrid.js
 src/lib/ui/style.css
 src/lib/ui/tab-properties.lua
 src/lib/ui/variables.css
diff --git a/tests/ui_collapse_js.test.mjs b/tests/ui_collapse_js.test.mjs
new file mode 100644
index 0000000..925c821
--- /dev/null
+++ b/tests/ui_collapse_js.test.mjs
@@ -0,0 +1,91 @@
+// lib/ui/collapse.js on a stub page: a set's open state by key over its default, the markup a page draws its groups
+// and their toggle-all button with, and the clicks that turn a group or every group and draw the page again.
+//
+// Run from the template repo, against a render's copy:
+//   make render-ui-js NAME=ui
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import * as dom from "./ui_dom.mjs";
+
+const load = () => dom.load("", { scripts: ["collapse.js"] });
+
+/** An element on the stub page with these attributes, inside `parent` when given. */
+function el(document, attrs, parent) {
+  const node = document.createElement("div");
+  Object.entries(attrs).forEach(([k, v]) => node.setAttribute(k, v));
+  if (parent) parent.appendChild(node);
+  return node;
+}
+const click = (document, target) => document.fire({ type: "click", target });
+
+test("a group's state is its own once turned, else the set's default", () => {
+  const { Kit } = load();
+  const set = Kit.collapse("ledger");
+  assert.equal(set.isOpen("1:0x0006"), true, "open unless told otherwise");
+  set.toggle("1:0x0006");
+  assert.equal(set.isOpen("1:0x0006"), false);
+  assert.equal(set.isOpen("1:0x0702"), true, "the others keep the default");
+  assert.equal(set.anyOpen(["1:0x0006", "1:0x0702"]), true);
+  assert.equal(set.anyOpen(["1:0x0006"]), false);
+  set.setAll(false);
+  assert.equal(set.isOpen("1:0x0702"), false, "a new default reaches every group");
+  set.toggle("1:0x0702");
+  set.setAll(false);
+  assert.equal(set.isOpen("1:0x0702"), false, "and drops what was turned by hand");
+  assert.equal(Kit.collapse("closed", { open: false }).isOpen("x"), false, "a set can start closed");
+});
+
+test("a group draws its head, then its body, open or not", () => {
+  const { Kit } = load();
+  const set = Kit.collapse("set:<a>");
+  assert.equal(set.head('1:"x"'), 'data-kit-collapse="set:&lt;a&gt;" data-key="1:&quot;x&quot;"', "names and keys are escaped");
+  assert.equal(
+    set.group("k", "<div>H</div>", "<p>B</p>", "lg-kids"),
+    '<div class="kit-collapse open"><div>H</div><div class="kit-collapse-body lg-kids"><p>B</p></div></div>'
+  );
+  set.toggle("k");
+  assert.match(set.group("k", "", ""), /^<div class="kit-collapse"><div class="kit-collapse-body">/);
+  assert.equal(Kit.collapse.caret(), '<span class="kit-caret">▸</span>');
+  assert.equal(Kit.collapse.caret(true), '<span class="kit-caret none"></span>', "a row with nothing to open keeps the caret's place");
+});
+
+test("the toggle-all button offers what a click would do to what is on screen", () => {
+  const { Kit } = load();
+  const set = Kit.collapse("ledger");
+  assert.equal(set.toggleAll([]), "", "no groups, no button");
+  assert.match(set.toggleAll(["a", "b"]), /data-kit-collapse-all="ledger" data-open="false">Collapse all</);
+  set.toggle("a");
+  assert.match(set.toggleAll(["a", "b"]), />Collapse all</, "one still open");
+  set.toggle("b");
+  assert.match(set.toggleAll(["a", "b"]), /data-open="true">Expand all</, "none open");
+});
+
+test("a click on a head turns its group and draws the page again; Expand all turns them all", () => {
+  const { Kit, document } = load();
+  let drawn = 0;
+  const set = Kit.collapse("ledger", { onChange: () => drawn++ });
+  const head = el(document, { "data-kit-collapse": "ledger", "data-key": "1:0x0006" });
+  const caret = el(document, { class: "kit-caret" }, head);
+  click(document, caret);
+  assert.equal(set.isOpen("1:0x0006"), false, "a click inside the head counts");
+  assert.equal(drawn, 1);
+  click(document, head);
+  assert.equal(set.isOpen("1:0x0006"), true);
+  const all = el(document, { "data-kit-collapse-all": "ledger", "data-open": "false" });
+  click(document, all);
+  assert.equal(set.anyOpen(["1:0x0006", "2:0x0402"]), false);
+  assert.equal(drawn, 3);
+  click(document, el(document, { class: "elsewhere" }));
+  click(document, el(document, { "data-kit-collapse": "unknown", "data-key": "x" }));
+  assert.equal(drawn, 3, "other clicks, and a set no page made, change nothing");
+});
+
+test("sets are apart: a click turns only its own", () => {
+  const { Kit, document } = load();
+  const ledger = Kit.collapse("ledger");
+  const settings = Kit.collapse("settings");
+  click(document, el(document, { "data-kit-collapse": "settings", "data-key": "k" }));
+  assert.equal(settings.isOpen("k"), false);
+  assert.equal(ledger.isOpen("k"), true);
+});
diff --git a/tests/ui_color_js.test.mjs b/tests/ui_color_js.test.mjs
new file mode 100644
index 0000000..8d44813
--- /dev/null
+++ b/tests/ui_color_js.test.mjs
@@ -0,0 +1,277 @@
+// lib/ui/color.js on a stub page: the swatch that takes a color input's place and follows its value, the popover's
+// offered and recent colors, the hex box and sliders setting the input as a pick would, Enter and an outside click
+// keeping the color, Esc putting it back or handing it to the page, and the dropper picking a picture's pixel over its
+// backdrop.
+//
+// Run from the template repo, against a render's copy:
+//   make render-ui-js NAME=ui
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import vm from "node:vm";
+import * as dom from "./ui_dom.mjs";
+
+const COLOR_JS = readFileSync(join(dom.UI_DIR, "color.js"), "utf8");
+
+// The stub DOM, extended for markup: the popover is built from HTML and read back with selectors.
+const { Element } = dom;
+const simple = (part) => {
+  const attrs = [...part.matchAll(/\[([\w-]+)(?:="([^"]*)")?\]/g)].map((m) => [m[1], m[2]]);
+  part = part.replace(/\[[^\]]*\]/g, "");
+  const tag = (part.match(/^[a-z]+/i) || [""])[0].toUpperCase();
+  const classes = [...part.matchAll(/\.([\w-]+)/g)].map((m) => m[1]);
+  const id = (part.match(/#([\w-]+)/) || [])[1];
+  return (el) =>
+    (!tag || el.tagName === tag) &&
+    classes.every((c) => el.classList.contains(c)) &&
+    (!id || el.attrs.id === id) &&
+    attrs.every(([name, value]) => {
+      const have = name.startsWith("data-") ? el.dataset[name.slice(5)] ?? el.attrs[name] : el.attrs[name];
+      return value === undefined ? have !== undefined : String(have) === value;
+    });
+};
+const selectorFn = (selector) => {
+  const parts = selector.trim().split(/\s+/).map(simple);
+  return (el) => {
+    if (!parts[parts.length - 1](el)) return false;
+    let i = parts.length - 2;
+    for (let p = el.parentNode; p && i >= 0; p = p.parentNode) if (p.attrs && parts[i](p)) i--;
+    return i < 0;
+  };
+};
+const descendants = (el) => el.children.flatMap((c) => [c, ...descendants(c)]);
+Object.assign(Element.prototype, {
+  querySelectorAll(selector) {
+    return descendants(this).filter(selectorFn(selector));
+  },
+  querySelector(selector) {
+    return this.querySelectorAll(selector)[0] || null;
+  },
+  closest(selector) {
+    const ok = selectorFn(selector);
+    for (let el = this; el && el.attrs; el = el.parentNode) if (ok(el)) return el;
+    return null;
+  },
+  remove() {
+    if (this.parentNode) this.parentNode.removeChild(this);
+  },
+  select() {},
+  getBoundingClientRect() {
+    return this.rect || { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 };
+  },
+});
+Object.defineProperty(Element.prototype, "nextElementSibling", {
+  get() {
+    const kids = this.parentNode ? this.parentNode.children : [];
+    return kids[kids.indexOf(this) + 1] || null;
+  },
+});
+Object.defineProperty(Element.prototype, "offsetWidth", { get: () => 264 });
+
+const VOID = new Set(["input", "img", "br"]);
+/** Builds `html` as children of `parent`: tags, attributes and text, enough for the popover's markup. */
+function parse(html, parent, document) {
+  parent.children = [];
+  const stack = [parent];
+  for (const m of html.matchAll(/<\/(\w+)>|<(\w+)([^>]*)>|([^<]+)/g)) {
+    const top = stack[stack.length - 1];
+    if (m[1]) stack.pop();
+    else if (m[2]) {
+      const attrs = {};
+      for (const a of m[3].matchAll(/([\w-]+)(?:="([^"]*)")?/g)) attrs[a[1]] = a[2] === undefined ? "" : a[2];
+      const el = new Element(m[2], attrs, document);
+      el.className = attrs.class || "";
+      el.hidden = "hidden" in attrs;
+      Object.keys(attrs)
+        .filter((k) => k.startsWith("data-"))
+        .forEach((k) => (el.dataset[k.slice(5)] = attrs[k]));
+      top.appendChild(el);
+      if (!VOID.has(m[2]) && !m[3].endsWith("/")) stack.push(el);
+    } else top.textContent += m[4];
+  }
+}
+
+/** page.js and color.js on a stub page with a color input `id` holding `value`, its label before it. */
+function load({ value = "#109eff", inputClass = "" } = {}) {
+  const page = dom.load("");
+  const { ctx, document } = page;
+  const listeners = {};
+  document.addEventListener = (t, fn) => (listeners[t] = listeners[t] || []).push(fn);
+  document.removeEventListener = (t, fn) => (listeners[t] = (listeners[t] || []).filter((f) => f !== fn));
+  document.fire = (event) => (listeners[event.type] || []).slice().forEach((fn) => fn(event));
+  document.listeners = listeners;
+  document.documentElement = { clientWidth: 1000, clientHeight: 800 };
+  const make = document.createElement;
+  document.createElement = (tag) => {
+    const el = make(tag);
+    let html = "";
+    Object.defineProperty(el, "innerHTML", {
+      get: () => html,
+      set: (v) => parse((html = v), el, document),
+    });
+    return el;
+  };
+  const native = { value: "" };
+  class HTMLInputElement {}
+  Object.defineProperty(HTMLInputElement.prototype, "value", {
+    get() {
+      return this.nativeValue ?? native.value;
+    },
+    set(v) {
+      this.nativeValue = String(v);
+    },
+  });
+  const store = {};
+  Object.assign(ctx, {
+    HTMLInputElement,
+    MutationObserver: class {
+      observe() {}
+    },
+    localStorage: { getItem: (k) => store[k] ?? null, setItem: (k, v) => (store[k] = v) },
+    scrollX: 0,
+    scrollY: 0,
+  });
+  vm.runInContext(COLOR_JS, ctx);
+  const field = page.body.appendChild(new Element("div", {}, document));
+  const label = field.appendChild(new Element("label", { for: "c" }, document));
+  label.textContent = "Tile color";
+  label.htmlFor = "c";
+  const input = field.appendChild(new Element("input", { id: "c", type: "color" }, document));
+  input.id = "c";
+  input.className = inputClass;
+  Object.defineProperty(input, "value", {
+    configurable: true,
+    get() {
+      return input.nativeValue ?? "";
+    },
+    set(v) {
+      input.nativeValue = String(v);
+    },
+  });
+  input.nativeValue = value;
+  document.querySelector = (selector) => (selector === 'label[for="c"]' ? label : null);
+  const inputs = [];
+  input.addEventListener("input", () => inputs.push(input.nativeValue));
+  return { ...page, Kit: ctx.Kit, ctx, field, label, input, inputs, store, listeners };
+}
+const popOf = (body) => body.children.find((c) => c.classList.contains("kit-color")) || null;
+const key = (page, k) => page.document.fire({ type: "keydown", key: k, preventDefault() {} });
+
+test("Kit.color reads and writes hex, rgb and hsl", () => {
+  const { Kit } = load();
+  assert.equal(Kit.color.normal(" 1af "), "#11AAFF");
+  assert.equal(Kit.color.normal("#12"), null);
+  assert.deepEqual([...Kit.color.rgb("#109EFF")], [16, 158, 255]);
+  assert.equal(Kit.color.hex([16, 158, 255.4]), "#109EFF");
+  assert.equal(Kit.color.fromHsl(Kit.color.hsl("#109EFF")), "#109EFF");
+  assert.equal(Kit.color.fromHsl({ h: 0, s: 1, l: 0.5 }), "#FF0000");
+});
+
+test("the swatch takes the input's place, carries its label and follows its value", () => {
+  const { Kit, field, label, input } = load();
+  Kit.colorPicker(input);
+  const swatch = field.children[1];
+  assert.equal(swatch.className, "kit-swatch");
+  assert.equal(swatch.id, "c-swatch");
+  assert.equal(label.htmlFor, "c-swatch");
+  assert.equal(swatch.getAttribute("aria-label"), "Tile color");
+  assert.equal(input.hidden, true);
+  assert.equal(swatch.firstChild.style.background, "#109eff");
+  input.value = "#00ff00";
+  assert.equal(swatch.firstChild.style.background, "#00ff00", "a value set from code repaints it");
+  input.className = "no-color";
+  input.value = "#00ff00";
+  assert.ok(swatch.classList.contains("no-color"), "a no-color input crosses it out");
+});
+
+test("the popover offers the page's colors and the recent ones, and a chip, the hex box or a slider picks", () => {
+  const page = load();
+  const { Kit, input, inputs, body } = page;
+  Kit.colorPicker(input, { offer: () => [{ title: "This look", colors: ["#FFFFFF", "#109EFF"] }], recentKey: "r" });
+  page.store.r = JSON.stringify(["#00FF00", "nope"]);
+  input.kitSwatch.fire("click");
+  const pop = popOf(body);
+  assert.ok(pop.classList.contains("kit-pop"));
+  assert.deepEqual(pop.querySelectorAll(".kit-color-label").map((l) => l.textContent), ["This look", "Recent"]);
+  assert.deepEqual(pop.querySelectorAll(".kit-color-chip").map((c) => c.dataset.hex), ["#FFFFFF", "#109EFF", "#00FF00"]);
+  assert.ok(pop.querySelector('.kit-color-chip[data-hex="#109EFF"]').classList.contains("on"), "the input's color is marked");
+  pop.fire("click", { target: pop.querySelector('.kit-color-chip[data-hex="#FFFFFF"]') });
+  assert.deepEqual(inputs, ["#ffffff"], "a chip sets the input and fires its input event");
+  const box = pop.querySelector(".kit-color-hex input");
+  box.value = "#12";
+  box.fire("input");
+  assert.ok(box.classList.contains("input-error"));
+  box.value = "f00";
+  box.fire("input");
+  assert.deepEqual(inputs, ["#ffffff", "#ff0000"]);
+  const [h, s, l] = pop.querySelectorAll(".kit-color-slider input");
+  assert.deepEqual([h.value, s.value, l.value], [0, 100, 50]);
+  h.value = "120";
+  h.fire("input");
+  assert.deepEqual(inputs.at(-1), "#00ff00", "a slider picks too");
+  assert.equal(h.nextElementSibling.textContent, "120");
+});
+
+test("Enter or a click outside keeps the color and remembers it; Esc puts it back or hands it to the page", () => {
+  const page = load();
+  const { Kit, input, body, store } = page;
+  Kit.colorPicker(input, { recentKey: "r" });
+  input.kitSwatch.fire("click");
+  let box = popOf(body).querySelector(".kit-color-hex input");
+  box.value = "#123456";
+  box.fire("input");
+  box.fire("keydown", { key: "Enter" });
+  assert.equal(popOf(body), null, "Enter closes it");
+  assert.deepEqual(JSON.parse(store.r), ["#123456"], "and the color is a recent one");
+  input.kitSwatch.fire("click");
+  box = popOf(body).querySelector(".kit-color-hex input");
+  box.value = "#abcdef";
+  box.fire("input");
+  key(page, "Escape");
+  assert.equal(popOf(body), null);
+  assert.equal(input.value, "#123456", "Esc puts the color it opened on back");
+  const cancelled = [];
+  Kit.colorPicker.close();
+  input.kitColor.onCancel = (start) => cancelled.push(start);
+  input.kitSwatch.fire("click");
+  key(page, "Escape");
+  assert.deepEqual(cancelled, ["#123456"], "or hands Esc to the page");
+  input.kitSwatch.fire("click");
+  page.document.fire({ type: "mousedown", target: body, button: 0 });
+  assert.equal(popOf(body), null, "a click outside closes it");
+  input.kitSwatch.fire("click");
+  input.kitSwatch.fire("click");
+  assert.equal(popOf(body), null, "its swatch toggles it");
+});
+
+test("the dropper shows only with a picture, outlines its area, and picks a pixel over the backdrop", () => {
+  const page = load();
+  const { Kit, input, body, document } = page;
+  Kit.colorPicker(input);
+  input.kitSwatch.fire("click");
+  assert.equal(popOf(body).querySelector(".kit-color-dropper").hidden, true, "no dropper without a picture");
+  Kit.colorPicker.close();
+  const area = body.appendChild(new Element("div", {}, document));
+  const img = area.appendChild(new Element("img", {}, document));
+  Object.assign(img, { naturalWidth: 2, naturalHeight: 2, rect: { left: 0, top: 0, right: 100, bottom: 100, width: 100, height: 100 } });
+  // A half see-through red pixel over a white backdrop reads as pink.
+  img.kitPixels = { getContext: () => ({ getImageData: () => ({ data: [255, 0, 0, 128] }) }) };
+  input.kitColor.dropper = { when: () => true, image: () => img, area: () => area, backdrop: () => [255, 255, 255] };
+  input.kitSwatch.fire("click");
+  const drop = popOf(body).querySelector(".kit-color-dropper");
+  assert.equal(drop.hidden, false);
+  drop.fire("click");
+  assert.ok(area.classList.contains("kit-color-target"), "the area is outlined while it is armed");
+  assert.equal(drop.getAttribute("aria-pressed"), "true");
+  const event = { type: "mousedown", target: img, button: 0, clientX: 80, clientY: 20, preventDefault() {} };
+  page.document.fire(event);
+  assert.equal(input.value, "#ff7f7f");
+  assert.ok(popOf(body), "a pick keeps the picker open");
+  assert.equal(area.classList.contains("kit-color-target"), false, "and disarms the dropper");
+  drop.fire("click");
+  key(page, "Escape");
+  assert.ok(popOf(body), "Esc while armed only disarms it");
+  assert.equal(drop.getAttribute("aria-pressed"), "false");
+});
diff --git a/tests/ui_combobox_js.test.mjs b/tests/ui_combobox_js.test.mjs
new file mode 100644
index 0000000..f07ed28
--- /dev/null
+++ b/tests/ui_combobox_js.test.mjs
@@ -0,0 +1,195 @@
+// lib/ui/combobox.js, the searchable dropdown, on page.js in a stub DOM: its markup, opening and closing by click,
+// key and outside click, the search, a pick, a list that loads, and a redraw that keeps it open.
+//
+// Run from the template repo, against a render's copy:
+//   UI_DIR=<render>/src/lib/ui node --test tests/ui_combobox_js.test.mjs
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { Element, load as loadKit } from "./ui_dom.mjs";
+
+const load = () => {
+  const page = loadKit("", { scripts: ["combobox.js"] });
+  page.document.documentElement = { clientWidth: 1000, clientHeight: 800 };
+  return page;
+};
+
+// The stub DOM parses no HTML, so a drawn control is built here as the markup describes it.
+function find(root, cls) {
+  for (const child of root.children) {
+    if (child.classList.contains(cls)) return child;
+    const deeper = find(child, cls);
+    if (deeper) return deeper;
+  }
+  return null;
+}
+
+function mount(page, key, { search = true } = {}) {
+  const doc = page.document;
+  const root = doc.field({ tag: "div", "data-combo": key });
+  root.className = "kit-combo";
+  const part = (tag, cls, parent) => {
+    const el = parent.appendChild(new Element(tag, {}, doc));
+    el.className = cls;
+    return el;
+  };
+  const trigger = part("button", "kit-combo-trigger", root);
+  const pop = part("div", "kit-combo-pop", root);
+  const input = search ? part("input", "kit-combo-search", pop) : null;
+  const list = part("div", "kit-combo-list", pop);
+  [root, pop, list].forEach((el) => (el.querySelector = (sel) => find(el, sel.slice(1))));
+  [pop, trigger].forEach((el) => (el.getBoundingClientRect = () => ({ top: 100, bottom: 120, right: 300, height: 150 })));
+  return { root, trigger, pop, input, list };
+}
+
+const DEVICES = [
+  { value: "100", label: "Kitchen > Fridge", section: "Devices" },
+  { value: "101", label: "Kitchen > Oven", section: "Devices" },
+  { value: "900", label: "Scheduler", section: "Agents" },
+];
+
+const labels = (html) => [...html.matchAll(/class="kit-combo-item[^"]*"[^>]*>([^<]*)</g)].map((m) => m[1]);
+const sections = (html) => [...html.matchAll(/class="kit-combo-section">([^<]*)</g)].map((m) => m[1]);
+const click = (page, target) => page.document.fire({ type: "click", target });
+const key = (page, target, name) => {
+  const event = { type: "keydown", key: name, target, prevented: false, preventDefault: () => (event.prevented = true) };
+  page.document.fire(event);
+  return event;
+};
+
+test("the markup is a trigger, a search box and an empty list, the label escaped and the placeholder shown with none", () => {
+  const { Kit } = load();
+  const html = Kit.combobox("dev", { label: "", placeholder: "Device...", items: () => DEVICES, style: "width:180px", className: "wide" });
+  assert.match(html, /^<div class="kit-combo wide" data-combo="dev" style="width:180px">/);
+  assert.match(html, /<button type="button" class="kit-combo-trigger placeholder"[^>]*aria-expanded="false"[^>]*>Device\.\.\.<\/button>/);
+  assert.match(html, /<input type="text" class="kit-combo-search"/);
+  assert.match(html, /<div class="kit-combo-list" role="listbox"><\/div>/);
+  const picked = Kit.combobox("dev", { label: "<b>Oven</b>", items: () => DEVICES });
+  assert.match(picked, /class="kit-combo-trigger" [^>]*title="&lt;b&gt;Oven&lt;\/b&gt;">&lt;b&gt;Oven&lt;\/b&gt;</);
+  assert.doesNotMatch(Kit.combobox("v", { items: () => [], search: false }), /kit-combo-search/);
+});
+
+test("a click on the trigger opens it with every choice under its section and the search focused; another closes it", () => {
+  const page = load();
+  page.Kit.combobox("dev", { placeholder: "Device...", items: () => DEVICES, value: "101", onPick: () => {} });
+  const c = mount(page, "dev");
+  click(page, c.trigger);
+  assert.equal(c.root.classList.contains("open"), true);
+  assert.equal(c.trigger.getAttribute("aria-expanded"), "true");
+  assert.deepEqual(labels(c.list.innerHTML), ["Kitchen &gt; Fridge", "Kitchen &gt; Oven", "Scheduler"]);
+  assert.deepEqual(sections(c.list.innerHTML), ["Devices", "Agents"]);
+  assert.match(c.list.innerHTML, /class="kit-combo-item selected"[^>]*>Kitchen &gt; Oven/, "the picked one is marked");
+  assert.equal(page.document.activeElement, c.input);
+  click(page, c.trigger);
+  assert.equal(c.root.classList.contains("open"), false);
+  assert.equal(c.trigger.getAttribute("aria-expanded"), "false");
+});
+
+test("the search narrows the list, a section only with its matches, and says so when nothing matches", () => {
+  const page = load();
+  page.Kit.combobox("dev", { items: () => DEVICES, onPick: () => {} });
+  const c = mount(page, "dev");
+  click(page, c.trigger);
+  c.input.value = "oven";
+  c.input.fire("input");
+  assert.deepEqual(labels(c.list.innerHTML), ["Kitchen &gt; Oven"]);
+  assert.deepEqual(sections(c.list.innerHTML), ["Devices"]);
+  c.input.value = "garage";
+  c.input.fire("input");
+  assert.match(c.list.innerHTML, /<div class="kit-combo-none">No matches<\/div>/);
+});
+
+test("Down and Enter pick, a click on a choice picks, and both close it", () => {
+  const page = load();
+  const picks = [];
+  page.Kit.combobox("dev", { items: () => DEVICES, onPick: (value, item) => picks.push([value, item.label]) });
+  const c = mount(page, "dev");
+  click(page, c.trigger);
+  key(page, c.input, "ArrowDown");
+  key(page, c.input, "ArrowDown");
+  assert.match(c.list.innerHTML, /class="kit-combo-item active"[^>]*>Kitchen &gt; Oven/);
+  assert.equal(key(page, c.input, "Enter").prevented, true);
+  assert.deepEqual(picks, [["101", "Kitchen > Oven"]]);
+  assert.equal(c.root.classList.contains("open"), false);
+  click(page, c.trigger);
+  key(page, c.input, "ArrowUp");
+  assert.match(c.list.innerHTML, /class="kit-combo-item active"[^>]*>Scheduler/, "Up from the top wraps to the last");
+  const item = c.list.appendChild(new Element("div", { "data-index": "0" }, page.document));
+  item.className = "kit-combo-item";
+  click(page, item);
+  assert.deepEqual(picks.at(-1), ["100", "Kitchen > Fridge"]);
+  click(page, c.trigger);
+  c.input.value = "sched";
+  c.input.fire("input");
+  key(page, c.input, "Enter");
+  assert.deepEqual(picks.at(-1), ["900", "Scheduler"], "Enter takes the only match");
+});
+
+test("Escape and a click outside close it, Escape back on the trigger", () => {
+  const page = load();
+  page.Kit.combobox("dev", { items: () => DEVICES, onPick: () => {} });
+  const c = mount(page, "dev");
+  click(page, c.trigger);
+  key(page, c.input, "Escape");
+  assert.equal(c.root.classList.contains("open"), false);
+  assert.equal(page.document.activeElement, c.trigger);
+  click(page, c.trigger);
+  click(page, page.body);
+  assert.equal(c.root.classList.contains("open"), false);
+});
+
+test("a list still loading says so, and its refresh fills it", () => {
+  const page = load();
+  let rows = null;
+  page.Kit.combobox("var", { items: () => rows, onPick: () => {} });
+  const c = mount(page, "var");
+  click(page, c.trigger);
+  assert.match(c.list.innerHTML, /<div class="kit-combo-none">Loading…<\/div>/);
+  rows = [{ value: "100:1", label: "LEVEL" }];
+  page.Kit.combobox.refresh("var");
+  assert.deepEqual(labels(c.list.innerHTML), ["LEVEL"]);
+  page.Kit.combobox.refresh("other");
+  assert.deepEqual(labels(c.list.innerHTML), ["LEVEL"], "a closed one's refresh changes nothing");
+});
+
+test("drawn again while open, it stays open with its search and gets the focus back", () => {
+  const page = load();
+  const opts = { items: () => DEVICES, onPick: () => {} };
+  page.Kit.combobox("dev", opts);
+  let c = mount(page, "dev");
+  click(page, c.trigger);
+  c.input.value = "kit";
+  c.input.fire("input");
+  const html = page.Kit.combobox("dev", opts);
+  assert.match(html, /class="kit-combo open"/);
+  assert.match(html, /aria-expanded="true"/);
+  assert.match(html, /class="kit-combo-search" placeholder="Search…" value="kit"/);
+  assert.deepEqual(labels(html), ["Kitchen &gt; Fridge", "Kitchen &gt; Oven"]);
+  page.document.activeElement = null;
+  page.flush();
+  assert.equal(page.document.activeElement, c.input);
+  assert.doesNotMatch(page.Kit.combobox("dev2", opts), / open"/, "only the open one");
+});
+
+test("set shows another pick on the drawn control", () => {
+  const page = load();
+  page.Kit.combobox("dev", { placeholder: "Device...", label: "Kitchen > Oven", items: () => DEVICES, onPick: () => {} });
+  const c = mount(page, "dev");
+  page.Kit.combobox.set("dev", { label: "", value: "" });
+  assert.equal(c.trigger.textContent, "Device...");
+  assert.equal(c.trigger.classList.contains("placeholder"), true);
+  page.Kit.combobox.set("dev", { label: "Kitchen > Fridge", value: "100" });
+  assert.equal(c.trigger.textContent, "Kitchen > Fridge");
+  assert.equal(c.trigger.title, "Kitchen > Fridge");
+  assert.equal(c.trigger.classList.contains("placeholder"), false);
+});
+
+test("a list that would leave the pane opens left and up", () => {
+  const page = load();
+  page.Kit.combobox("dev", { items: () => DEVICES, onPick: () => {} });
+  const c = mount(page, "dev");
+  page.document.documentElement = { clientWidth: 250, clientHeight: 200 };
+  click(page, c.trigger);
+  assert.equal(c.pop.classList.contains("flip-right"), true);
+  assert.equal(c.pop.classList.contains("flip-up"), true);
+});
diff --git a/tests/ui_menu_js.test.mjs b/tests/ui_menu_js.test.mjs
new file mode 100644
index 0000000..cad67d5
--- /dev/null
+++ b/tests/ui_menu_js.test.mjs
@@ -0,0 +1,77 @@
+// lib/ui/menu.js on a stub page: the split button's markup, closed and open, the arrow that opens it, a pick, and the
+// click elsewhere and Escape that close it, each drawing the page again.
+//
+// Run from the template repo, against a render's copy:
+//   make render-ui-js NAME=ui
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import * as dom from "./ui_dom.mjs";
+
+const load = () => dom.load("", { scripts: ["menu.js"] });
+
+/** An element on the stub page with these attributes. */
+function el(document, attrs) {
+  const node = document.createElement("button");
+  Object.entries(attrs).forEach(([k, v]) => node.setAttribute(k, v));
+  return node;
+}
+const click = (document, target) => document.fire({ type: "click", target });
+const MAIN = '<button class="btn btn-primary">Update firmware</button>';
+
+test("with nothing more to offer it is the button alone", () => {
+  const { Kit } = load();
+  assert.equal(Kit.splitButton("fw", MAIN, []), MAIN);
+  assert.equal(Kit.splitButton("fw", "", [["Check", () => {}]]), "");
+});
+
+test("closed, it is the button and an arrow in its look; open, the menu of the other choices too", () => {
+  const { Kit, document } = load();
+  let drawn = 0;
+  const items = [["Check for updates", () => {}], ["Update from a <URL>", () => {}]];
+  const draw = () => Kit.splitButton("fw", MAIN, items, { label: "More ways to update", onChange: () => drawn++ });
+  const closed = draw();
+  assert.match(closed, /^<span class="kit-split"><button class="btn btn-primary">Update firmware<\/button>/);
+  assert.match(closed, /class="btn btn-primary kit-split-arrow" data-kit-menu="fw" aria-label="More ways to update" aria-haspopup="menu" aria-expanded="false"/);
+  assert.doesNotMatch(closed, /kit-menu"/);
+  assert.match(Kit.splitButton("x", '<button class="btn btn-secondary">Check</button>', items), /btn btn-secondary kit-split-arrow/);
+  click(document, el(document, { "data-kit-menu": "fw" }));
+  assert.equal(Kit.menu.isOpen("fw"), true);
+  assert.equal(drawn, 1, "opening draws the page again");
+  const open = draw();
+  assert.match(open, /aria-expanded="true"/);
+  assert.match(open, /<span class="kit-menu" role="menu"><button type="button" role="menuitem" data-kit-menu-item="fw" data-index="0">Check for updates<\/button>/);
+  assert.match(open, /data-index="1">Update from a &lt;URL&gt;</, "labels are escaped");
+});
+
+test("a pick closes the menu, runs its choice and draws the page again", () => {
+  const { Kit, document } = load();
+  const picked = [];
+  let drawn = 0;
+  Kit.splitButton("fw", MAIN, [["A", () => picked.push("a")], ["B", () => picked.push("b")]], { onChange: () => drawn++ });
+  click(document, el(document, { "data-kit-menu": "fw" }));
+  click(document, el(document, { "data-kit-menu-item": "fw", "data-index": "1" }));
+  assert.deepEqual(picked, ["b"]);
+  assert.equal(Kit.menu.isOpen("fw"), false);
+  assert.equal(drawn, 2);
+});
+
+test("the arrow again, a click elsewhere or Escape closes it", () => {
+  const { Kit, document } = load();
+  let drawn = 0;
+  Kit.splitButton("fw", MAIN, [["A", () => {}]], { onChange: () => drawn++ });
+  const arrow = el(document, { "data-kit-menu": "fw" });
+  click(document, arrow);
+  click(document, arrow);
+  assert.equal(Kit.menu.isOpen("fw"), false, "the arrow closes what it opened");
+  click(document, arrow);
+  click(document, el(document, { class: "elsewhere" }));
+  assert.equal(Kit.menu.isOpen("fw"), false);
+  click(document, arrow);
+  document.fire({ type: "keydown", key: "Escape" });
+  assert.equal(Kit.menu.isOpen("fw"), false);
+  assert.equal(drawn, 6);
+  click(document, el(document, { class: "elsewhere" }));
+  document.fire({ type: "keydown", key: "Escape" });
+  assert.equal(drawn, 6, "with nothing open, nothing is drawn again");
+});
diff --git a/tests/ui_pickgrid_js.test.mjs b/tests/ui_pickgrid_js.test.mjs
new file mode 100644
index 0000000..e251a6f
--- /dev/null
+++ b/tests/ui_pickgrid_js.test.mjs
@@ -0,0 +1,147 @@
+// lib/ui/pickgrid.js on a stub page: the grid's cells for pictures, words, dark and photo pictures and tags, a pick
+// and its mark across a refill, an empty grid's words, and the drop zone taking a file chosen, dropped or pasted.
+//
+// Run from the template repo, against a render's copy:
+//   make render-ui-js NAME=ui
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import * as dom from "./ui_dom.mjs";
+
+// The stub DOM, extended: attribute selectors, fragments, a textContent that clears, and a file input's click.
+const { Element } = dom;
+const matchOne = (el, part) => {
+  const tag = (part.match(/^[a-z]+/i) || [""])[0].toUpperCase();
+  const attrs = [...part.matchAll(/\[([\w-]+)(?:="([^"]*)")?\]/g)].map((m) => [m[1], m[2]]);
+  return (
+    (!tag || el.tagName === tag) &&
+    attrs.every(([name, value]) => {
+      const have = name.startsWith("data-") ? el.dataset[name.slice(5)] : el.attrs[name];
+      return value === undefined ? have !== undefined : String(have) === value;
+    })
+  );
+};
+const descendants = (el) => el.children.flatMap((c) => [c, ...descendants(c)]);
+Object.assign(Element.prototype, {
+  querySelectorAll(selector) {
+    return descendants(this).filter((el) => matchOne(el, selector));
+  },
+  querySelector(selector) {
+    return this.querySelectorAll(selector)[0] || null;
+  },
+  closest(selector) {
+    for (let el = this; el && el.attrs; el = el.parentNode) if (matchOne(el, selector)) return el;
+    return null;
+  },
+  click() {
+    this.clicks = (this.clicks || 0) + 1;
+  },
+});
+const insert = Element.prototype.insertBefore;
+Element.prototype.insertBefore = function (node, ref) {
+  if (node.tagName !== "#FRAGMENT") return insert.call(this, node, ref);
+  node.children.slice().forEach((c) => insert.call(this, c, ref));
+  return node;
+};
+
+function load() {
+  const page = dom.load("", { scripts: ["pickgrid.js"] });
+  page.document.createDocumentFragment = () => new Element("#fragment", {}, page.document);
+  return page;
+}
+/** An element in the page whose textContent, set, clears its children, as the real one does. */
+function box(page, tag = "div") {
+  const el = page.body.appendChild(new Element(tag, {}, page.document));
+  let text = "";
+  Object.defineProperty(el, "textContent", {
+    get: () => text,
+    set: (v) => ((el.children = []), (text = v)),
+  });
+  return el;
+}
+const cells = (grid) => grid.children.filter((c) => c.tagName === "BUTTON");
+
+test("the grid draws pictures, words, dark and photo pictures and tags, and reports a pick", () => {
+  const page = load();
+  const el = box(page);
+  const picks = [];
+  const grid = page.Kit.pickGrid(el, { onPick: (id) => picks.push(id), empty: "No pictures yet." });
+  assert.ok(el.classList.contains("kit-pickgrid"));
+  grid.fill([
+    { id: "mdi:battery", title: "Battery", src: "data:x" },
+    { id: "pack:fan", src: "data:y", dark: true },
+    { id: "mine:p1", src: "data:z", photo: true, tag: "SVG" },
+    { id: "mine:p2", text: "Gone" },
+  ]);
+  const [a, b, c, d] = cells(el);
+  assert.equal(a.className, "kit-pick");
+  assert.equal(a.title, "Battery");
+  assert.equal(a.children[0].src, "data:x");
+  assert.equal(b.className, "kit-pick dark");
+  assert.equal(b.title, "pack:fan", "a cell with no title is named by its id");
+  assert.equal(c.className, "kit-pick photo");
+  assert.equal(c.children[1].className, "kit-pick-tag");
+  assert.equal(c.children[1].textContent, "SVG");
+  assert.equal(d.children[0].className, "kit-pick-text");
+  assert.equal(d.children[0].textContent, "Gone");
+  el.fire("click", { target: b.children[0] });
+  assert.deepEqual(picks, ["pack:fan"]);
+  assert.equal(grid.cell("mine:p1"), c);
+});
+
+test("a mark follows the picked id across a refill, and an empty grid says so", () => {
+  const page = load();
+  const el = box(page);
+  const grid = page.Kit.pickGrid(el, { empty: "No pictures yet." });
+  grid.fill([{ id: "a", src: "x" }, { id: "b", src: "y" }]);
+  grid.mark("b");
+  assert.deepEqual(cells(el).map((c) => c.classList.contains("on")), [false, true]);
+  grid.fill([{ id: "b", src: "y" }, { id: "c", src: "z" }]);
+  assert.deepEqual(cells(el).map((c) => c.classList.contains("on")), [true, false], "a refill keeps the mark");
+  grid.set({ id: "c", src: "late" });
+  assert.equal(cells(el)[1].children[0].src, "late", "set redraws a cell in place");
+  grid.set({ id: "b", text: "B" });
+  assert.equal(cells(el)[0].classList.contains("on"), true, "keeping its mark");
+  grid.set({ id: "gone", src: "x" });
+  assert.equal(cells(el).length, 2, "and leaves a grid without that id alone");
+  grid.fill([]);
+  assert.equal(el.children.length, 1);
+  assert.equal(el.children[0].className, "empty");
+  assert.equal(el.children[0].textContent, "No pictures yet.");
+  grid.fill([], "Searching…");
+  assert.equal(el.children[0].textContent, "Searching…", "a fill may say something else");
+});
+
+test("the drop zone takes a file chosen, dropped or pasted, and shows a drag over it", () => {
+  const page = load();
+  const zone = box(page);
+  const choose = zone.appendChild(new Element("button", {}, page.document));
+  const files = [];
+  let pasting = false;
+  page.Kit.dropZone(zone, { onFile: (f) => files.push(f.name), choose, accept: "image/*", pasteWhen: () => pasting });
+  assert.ok(zone.classList.contains("kit-drop"));
+  const input = zone.children.find((c) => c.type === "file");
+  assert.equal(input.hidden, true);
+  assert.equal(input.accept, "image/*");
+  choose.fire("click");
+  assert.equal(input.clicks, 1, "the button opens the chooser");
+  input.files = [{ name: "chosen.png" }];
+  input.fire("change");
+  zone.fire("dragover");
+  assert.ok(zone.classList.contains("over"));
+  const drop = zone.fire("drop", { dataTransfer: { files: [{ name: "dropped.png" }] } });
+  assert.equal(drop.prevented, true);
+  assert.equal(zone.classList.contains("over"), false);
+  const paste = (target) =>
+    page.document.fire({
+      type: "paste",
+      target,
+      clipboardData: { items: [{ kind: "file", type: "image/png", getAsFile: () => ({ name: "pasted.png" }) }] },
+      preventDefault() {},
+    });
+  paste(page.body);
+  pasting = true;
+  paste(new Element("textarea"));
+  paste(page.body);
+  assert.deepEqual(files, ["chosen.png", "dropped.png", "pasted.png"], "a paste counts only when asked and outside a text box");
+});

From 89e19a2bcfaad5432032583e412e7c06fdb129b1 Mon Sep 17 00:00:00 2001
From: Derek Miller <1340081+derek-miller@users.noreply.github.com>
Date: Tue, 10 Nov 2026 22:38:40 -0600
Subject: [PATCH 4/4] fix(ui): the combobox's hook is data-kit-combo like the
 other widgets', and follow's doc names no caller

---
 template/src/lib/support-code.lua |  2 +-
 template/src/lib/ui/combobox.js   | 12 ++++++------
 tests/ui_combobox_js.test.mjs     |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/template/src/lib/support-code.lua b/template/src/lib/support-code.lua
index 54481e1..bc4683e 100644
--- a/template/src/lib/support-code.lua
+++ b/template/src/lib/support-code.lua
@@ -119,7 +119,7 @@ function SupportCode:onChange(callback)
 end
 
 --- Calls `callback(open)` as the window opens and closes, alongside the driver's `onChange`, for a library whose view
---- changes with it: lib.ui.tab-properties' card, whose Log Level list does.
+--- changes with the window.
 --- @param callback fun(open: boolean)
 function SupportCode:follow(callback)
   table.insert(self._followers, callback)
diff --git a/template/src/lib/ui/combobox.js b/template/src/lib/ui/combobox.js
index c84be7e..1e977c6 100644
--- a/template/src/lib/ui/combobox.js
+++ b/template/src/lib/ui/combobox.js
@@ -24,8 +24,8 @@
   var active = -1;
 
   function control(key) {
-    var all = document.querySelectorAll("[data-combo]");
-    for (var i = 0; i < all.length; i++) if (all[i].getAttribute("data-combo") === key) return all[i];
+    var all = document.querySelectorAll("[data-kit-combo]");
+    for (var i = 0; i < all.length; i++) if (all[i].getAttribute("data-kit-combo") === key) return all[i];
     return null;
   }
 
@@ -63,7 +63,7 @@
     var isOpen = key === openKey;
     var label = Kit.str(options.label);
     var html =
-      '<div class="kit-combo' + (isOpen ? " open" : "") + (options.className ? " " + options.className : "") + '" data-combo="' + Kit.esc(key) + '"' +
+      '<div class="kit-combo' + (isOpen ? " open" : "") + (options.className ? " " + options.className : "") + '" data-kit-combo="' + Kit.esc(key) + '"' +
       (options.style ? ' style="' + Kit.esc(options.style) + '"' : "") + ">" +
       '<button type="button" class="kit-combo-trigger' + (label ? "" : " placeholder") + '" aria-haspopup="listbox" aria-expanded="' + isOpen + '"' +
       ' title="' + Kit.esc(options.title || label) + '">' + Kit.esc(label || options.placeholder || "") + "</button>" +
@@ -158,8 +158,8 @@
   combobox.close = close;
 
   document.addEventListener("click", function (e) {
-    var el = e.target.closest ? e.target.closest("[data-combo]") : null;
-    var key = el ? el.getAttribute("data-combo") : null;
+    var el = e.target.closest ? e.target.closest("[data-kit-combo]") : null;
+    var key = el ? el.getAttribute("data-kit-combo") : null;
     if (key === null || !defs[key]) return close();
     if (e.target.closest(".kit-combo-trigger")) return key === openKey ? close() : open(key);
     var item = e.target.closest(".kit-combo-item");
@@ -172,7 +172,7 @@
     fill(openKey);
   });
   document.addEventListener("keydown", function (e) {
-    if (openKey === null || !e.target.closest || !e.target.closest("[data-combo]")) return;
+    if (openKey === null || !e.target.closest || !e.target.closest("[data-kit-combo]")) return;
     var key = openKey;
     var count = (shown(key) || []).length;
     if (e.key === "Escape") {
diff --git a/tests/ui_combobox_js.test.mjs b/tests/ui_combobox_js.test.mjs
index f07ed28..c337402 100644
--- a/tests/ui_combobox_js.test.mjs
+++ b/tests/ui_combobox_js.test.mjs
@@ -26,7 +26,7 @@ function find(root, cls) {
 
 function mount(page, key, { search = true } = {}) {
   const doc = page.document;
-  const root = doc.field({ tag: "div", "data-combo": key });
+  const root = doc.field({ tag: "div", "data-kit-combo": key });
   root.className = "kit-combo";
   const part = (tag, cls, parent) => {
     const el = parent.appendChild(new Element(tag, {}, doc));
@@ -60,7 +60,7 @@ const key = (page, target, name) => {
 test("the markup is a trigger, a search box and an empty list, the label escaped and the placeholder shown with none", () => {
   const { Kit } = load();
   const html = Kit.combobox("dev", { label: "", placeholder: "Device...", items: () => DEVICES, style: "width:180px", className: "wide" });
-  assert.match(html, /^<div class="kit-combo wide" data-combo="dev" style="width:180px">/);
+  assert.match(html, /^<div class="kit-combo wide" data-kit-combo="dev" style="width:180px">/);
   assert.match(html, /<button type="button" class="kit-combo-trigger placeholder"[^>]*aria-expanded="false"[^>]*>Device\.\.\.<\/button>/);
   assert.match(html, /<input type="text" class="kit-combo-search"/);
   assert.match(html, /<div class="kit-combo-list" role="listbox"><\/div>/);