makersclaw 0.8.2 → 0.8.4

package/r/trigger-picker.json

@@ -5,8 +5,8 @@
   "title": "TriggerPicker",
   "description": "What starts an automation, as a panel: by hand, on a schedule in the team's time zone, when an app sends an event, when one of an app's actions finishes, when a record is added or changed, when the automation's own web address is called (its secret made and replaced here, shown once), or when another automation finishes. The platform says which of these it runs (the list door's triggers); a connection's own events are listed as \"soon\" with what to use meanwhile. The schedule is offered in the shapes people ask for (every day, every weekday, every week, every hour, another schedule as five-field cron) with a time of day, a weekday, the team's zone or another, and a sentence saying it back (\"Runs weekdays at 07:00, team time\").",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/automation-model.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.4/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.4/r/automation-model.json"
   ],
   "dependencies": [],
   "files": [
@@ -54,7 +54,7 @@
   "docs": "Installed to components/makersclaw/blocks/trigger-picker. Import: import { TriggerPicker } from \"@/components/makersclaw/blocks/trigger-picker\". Props and an example: components/makersclaw/blocks/trigger-picker/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.2",
+      "version": "0.8.4",
       "useWhen": "An automation's trigger is edited in your own screen. automation-editor opens it when the trigger card is pressed; pass it the platform's triggers (useAutomations().triggers) so it offers what the platform runs."
     }
   }

package/r/whiteboard.json

@@ -5,8 +5,8 @@
   "title": "Whiteboard",
   "description": "A full-page freeform whiteboard on sketch-canvas: a top bar with the board's title (click to rename), the save state (Saving…, Saved, or the error with Retry), a Board / Text view switch, Export PNG and an optional Share button; under it the Miro-style canvas (tool rail, floating toolbar, zoom, undo). An empty board offers starter templates — blank, a grid of titled areas, a 2×2 matrix — and the Text view lists every word on the board for a screen reader or an agent. With onCreateTask, a selected note or text becomes a task from the top bar (\"Create task\", editable title; several notes make one task each), and a small badge marks it on the board from then on. The sketch is plain JSON; saves are async callbacks answering { ok }.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/sketch-canvas.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.4/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.4/r/sketch-canvas.json"
   ],
   "dependencies": [],
   "files": [
@@ -59,7 +59,7 @@
   "docs": "Installed to components/makersclaw/blocks/whiteboard. Import: import { Whiteboard, WHITEBOARD_TEMPLATES, gridSketch, matrixSketch } from \"@/components/makersclaw/blocks/whiteboard\". Props and an example: components/makersclaw/blocks/whiteboard/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.2",
+      "version": "0.8.4",
       "useWhen": "A screen is one board to think on: a team whiteboard, a planning or prioritisation board, a place to sketch an idea and keep it with a record. Not for marking up a screenshot (annotate), sketching a UI to build (sketch-to-app), a structured board of cards and connectors (flow-canvas), or a kanban (board)."
     }
   }

package/r/workflow-view.json

@@ -5,8 +5,8 @@
   "title": "WorkflowView",
   "description": "One job of the app's agent drawn as a graph on a dotted ground: the Trigger (\"Every weekday at 07:00\", \"When a deal is created\") → each step of the chosen run with how it went, as a mark and a word → the result. Over it a run picker with Re-run; in its head the Live switch and \"Trigger manually\" with its price; beside it the run history and the overview (run-history). Before any run it draws the job's declared steps in pencil, with an honest empty line. Fed by useJobs, useRuns and useRun (lib/hooks.js). Under about 768 px of its own width the history stacks under the graph and the graph runs top to bottom.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/run-history.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.4/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.4/r/run-history.json"
   ],
   "dependencies": [],
   "files": [
@@ -48,7 +48,7 @@
   "docs": "Installed to components/makersclaw/blocks/workflow-view. Import: import { WorkflowView } from \"@/components/makersclaw/blocks/workflow-view\". Props and an example: components/makersclaw/blocks/workflow-view/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.2",
+      "version": "0.8.4",
       "useWhen": "Superseded by automation-editor and run-view for an app whose jobs run on the automations engine; still the block for an app that has not moved (its jobs are the agent's wakes). A job's own page: the founder opens an automation to see what it does, how its last runs went and to run it now — a morning read, an inbox sweep, a nightly enrichment, an event-triggered workflow. For the job as a card beside the day's work use schedule-card; for a plain list of runs use run-history."
     }
   }

package/registry/blocks/agent-pane/README.md

@@ -64,6 +64,13 @@ Only a plan or a piece of one, a change the agent sent up, a counted job
 and a hand-off that never started get a new request; for those
 `chat.sameConversation` is false and the box keeps the app's own words.
 
+## Progress feedback
+
+The transcript owns progress feedback: one “Thinking…” line while no live
+text or specific tool work is moving, or an explicit queued line while the
+ask waits. A pending follow-up is never labelled “Starting…”. The composer
+keeps Stop available while the turn runs; there is no second working footer.
+
 ## Questions keep the conversation open
 
 While a question waits, the main composer stays available. Sending there

package/registry/blocks/agent-pane/agent-pane.jsx

@@ -38,10 +38,20 @@ import { MemberWords, Message } from "./transcript";
 // draws an Approve of its own. A sign-in, money, or a tool approval says
 // so and opens the desk.
 
-const STATE_LINE = {
-  queued: "Queued — it starts when the one before it ends",
-  working: "Working on it",
-};
+/** Specific work or streamed words already tell the member what is moving. */
+function showsProgress(message) {
+  if (message.role !== "assistant" || !message.live) return false;
+  return (message.blocks ?? []).some((block) => {
+    if (block.kind === "text") return block.streaming && Boolean(block.text?.trim());
+    if (block.kind === "plan") return block.items?.some((item) => item.state === "active");
+    if (block.kind !== "work") return false;
+    return (block.runs ?? []).some((run) =>
+      run.kind === "fold" ? run.summary?.running :
+      run.kind === "helpers" ? run.calls?.some((call) => call.status === "running") :
+      run.kind === "thought" ? run.streaming : run.status === "running",
+    );
+  });
+}
 
 /** What waits on the member, as the bar under the thread says it. */
 function needsTitle(kind, inApp) {
@@ -123,12 +133,13 @@ export function AgentPane({
   const inMakersclaw = chat?.place === "makersclaw";
   const questions = view?.questions ?? [];
   const result = chat?.request?.status === "done" ? chat.request?.result?.sentence : null;
-  // The thinking row: the turn runs and nothing visibly grows yet (the
-  // platform says when, in the view); words just sent wait for their turn.
+  // One generic progress row, only while nothing specific visibly moves.
+  // Pending words are a send, not proof that a worker is starting.
   const lastLegacy = legacy[legacy.length - 1];
-  const starting = Boolean(pending) && !messages.some((m) => m.role === "assistant" && m.live);
+  const visibleProgress = !pending && (view ? messages.some(showsProgress) : Boolean(lastLegacy?.writing || lastLegacy?.parts?.some((part) => part.type === "step" && part.status === "running")));
+  const queued = chat?.state === "queued";
   const thinking =
-    !needs && !inMakersclaw && (pending ? true : view ? view.thinking : live && !(lastLegacy?.writing || lastLegacy?.parts?.length));
+    live && !needs && !inMakersclaw && (queued || !visibleProgress);
 
   const openThing = onOpen ?? (typeof chat?.open === "function" ? chat.open : undefined);
   const answerHere = needs?.in_app === "answer" && typeof chat?.answer === "function";
@@ -139,8 +150,7 @@ export function AgentPane({
   const closedWords = needs ? (answerHere ? "Answer above first" : pressHere ? "Say yes above first" : "Answer on the desk first") : "This ask is in Makersclaw";
 
   // What sits between the lines and the box: what waits on the member, or
-  // that the agent works (its Stop is the box's, in the arrow's place), or
-  // how the ask ended.
+  // how the ask ended. Progress is in the transcript; Stop is the box's.
   const bar =
     needs && pressHere ? (
       <div className="max-h-[70%] shrink-0 overflow-y-auto border-t border-border p-2.5">{yes}</div>
@@ -169,12 +179,7 @@ export function AgentPane({
           )}
         </div>
       </div>
-    ) : live && !inMakersclaw ? (
-      <div className="flex shrink-0 items-center gap-2 border-t border-border px-3.5 py-1.5 text-xs text-muted-foreground">
-        <Spinner size="sm" label="Working" />
-        <span className="min-w-0 flex-1 truncate">{STATE_LINE[chat?.state] ?? STATE_LINE.working}</span>
-      </div>
-    ) : result ? (
+    ) : !live && result ? (
       <p className="flex shrink-0 items-start gap-2 border-t border-border px-3.5 py-1.5 text-xs text-muted-foreground">
         <Icon name="circle-check" size={14} className="mt-px shrink-0 text-success" />
         <span className="min-w-0 break-words">{result}</span>
@@ -222,8 +227,8 @@ export function AgentPane({
           ))}
           {pending ? <MemberWords>{pending}</MemberWords> : null}
           {thinking ? (
-            <div role="status" className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Spinner size="sm" label="Thinking" /> {starting ? "Starting…" : "Thinking…"}
+            <div role="status" aria-label="Agent progress" className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Spinner size="sm" label={queued ? "Queued" : "Thinking"} /> {queued ? "Queued — it starts when the one before it ends" : "Thinking…"}
             </div>
           ) : null}
           {!live && view?.failure ? (

package/registry/blocks/chat-pane/README.md

@@ -141,3 +141,7 @@ export default function Notes() {
   );
 }
 ```
+
+Dictation capability is detected after hydration: the server and first client
+render show the same composer, then supported browsers gain the microphone.
+This detection itself does not ask for microphone access.

package/registry/blocks/chat-pane/chat-attach.js

@@ -86,7 +86,12 @@ function recognitionCtor() {
  * refused (a frame the desk has not allowed it in, or the member said no).
  */
 export function useDictation(onText) {
-  const [supported] = useState(() => recognitionCtor() !== null);
+  // Server and first client render must draw the same composer. Browser
+  // capability becomes available only after hydration (no microphone is used).
+  const [supported, setSupported] = useState(false);
+  useEffect(() => {
+    setSupported(recognitionCtor() !== null);
+  }, []);
   const [listening, setListening] = useState(false);
   const [interim, setInterim] = useState("");
   const [error, setError] = useState(null);

package/registry/blocks/schedule-gantt/schedule-gantt.jsx

@@ -321,7 +321,9 @@ export function ScheduleGantt({
     const together = modeName === "move" && picked.size > 1 && picked.has(String(id)) ? [...picked].map(String) : null;
     dragRef.current = { id: String(id), mode: modeName, x0: e.clientX, start: shown.get(String(id))?.start, delta: 0, moved: false, pointerId: e.pointerId, together };
     try {
-      track.current?.setPointerCapture(e.pointerId);
+      // Keep an ordinary click/double-click on its bar; capture on the track
+      // retargeted that click and skipped the bar's selection/open callbacks.
+      e.currentTarget?.setPointerCapture(e.pointerId);
     } catch {
       // the pointer is gone already
     }
@@ -781,6 +783,7 @@ export function ScheduleGantt({
                     </div>
                   );
                 }
+                const shortBar = w <= 16;
                 const loop = r.stuck;
                 const guess = guesses?.has?.(e.id);
                 const barTop = y - BAR / 2 - (baseline ? 2 : 0);
@@ -797,7 +800,7 @@ export function ScheduleGantt({
                       {...common}
                       onPointerDown={(ev) => startDrag(ev, e.id, "move")}
                       className={cx(
-                        "absolute inset-0 overflow-hidden rounded-[2px] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        "absolute inset-0 rounded-[2px] outline-none focus-visible:ring-2 focus-visible:ring-ring",
                         trackClass,
                         isSel && "ring-2 ring-ring",
                         (dragging || movedByDrag) && !isSel && "ring-[1.5px] ring-ring",
@@ -806,16 +809,18 @@ export function ScheduleGantt({
                         onMove && !done && "cursor-grab",
                       )}
                     >
-                      {loop ? <span className="absolute inset-0 opacity-40" style={{ backgroundImage: "repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 6px)" }} /> : null}
-                      {!loop && !guess && !done && r.progress > 0 ? <span className={cx("absolute inset-y-0 left-0", fill)} style={{ width: `${r.progress}%` }} /> : null}
+                      <span aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-[2px]">
+                        {loop ? <span className="absolute inset-0 opacity-40" style={{ backgroundImage: "repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 6px)" }} /> : null}
+                        {!loop && !guess && !done && r.progress > 0 ? <span className={cx("absolute inset-y-0 left-0", fill)} style={{ width: `${r.progress}%` }} /> : null}
+                      </span>
+                      {/* A press on an end is still a press on this task. With no
+                          drag, its click/open callbacks must survive clipping. */}
+                      {onMove && !done ? <>
+                        <span onPointerDown={(ev) => startDrag(ev, e.id, "start")} aria-hidden="true" className={cx("absolute z-10 cursor-ew-resize", shortBar ? (dragging || isSel ? "-inset-y-[2px] -left-1.5 w-1.5 rounded-[2px] bg-ring" : "inset-y-0 -left-1.5 w-1.5") : dragging || isSel ? "-inset-y-[2px] -left-[2px] w-1.5 rounded-[2px] bg-ring" : "inset-y-0 left-0 w-2")} style={{ touchAction: "none" }} />
+                        <span onPointerDown={(ev) => startDrag(ev, e.id, "end")} aria-hidden="true" className={cx("absolute z-10 cursor-ew-resize", shortBar ? (dragging || isSel ? "-inset-y-[2px] -right-1.5 w-1.5 rounded-[2px] bg-ring" : "inset-y-0 -right-1.5 w-1.5") : dragging || isSel ? "-inset-y-[2px] -right-[2px] w-1.5 rounded-[2px] bg-ring" : "inset-y-0 right-0 w-2")} style={{ touchAction: "none" }} />
+                      </> : null}
                     </button>
                     {base ? <span aria-hidden="true" className="pointer-events-none absolute h-1 rounded-[1px] bg-chart-3" style={{ left: X(base.start) - x0, width: Math.max(ppd, X(base.due) + ppd - X(base.start)), top: BAR + 2 }} /> : null}
-                    {onMove && !done ? (
-                      <>
-                        <span onPointerDown={(ev) => startDrag(ev, e.id, "start")} aria-hidden="true" className={cx("absolute z-10 cursor-ew-resize", dragging || isSel ? "-inset-y-[2px] -left-[2px] w-1.5 rounded-[2px] bg-ring" : "inset-y-0 left-0 w-2")} style={{ touchAction: "none" }} />
-                        <span onPointerDown={(ev) => startDrag(ev, e.id, "end")} aria-hidden="true" className={cx("absolute z-10 cursor-ew-resize", dragging || isSel ? "-inset-y-[2px] -right-[2px] w-1.5 rounded-[2px] bg-ring" : "inset-y-0 right-0 w-2")} style={{ touchAction: "none" }} />
-                      </>
-                    ) : null}
                     {handles}
                     {labelEl(w, isSel ? 8 : 0)}
                   </div>

package/registry/blocks/schedule-gantt/sheet.jsx

@@ -313,12 +313,14 @@ export function SheetRow({ e, t, r, cols, selected, closed, cells, tags, late, e
 export function AddRow({ open, onOpen, draft, setDraft, onSubmit, busy, addRef, parentTitle, aboveTitle, onIndent, height = ROW }) {
   if (!open)
     return (
-      <button type="button" onClick={onOpen} className="flex w-full items-center gap-2 border-b border-border px-3 text-left text-[13px] text-muted-foreground outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" style={{ height }}>
-        <Icon name="plus" size={14} />
-        <span>Add task</span>
-        <kbd className="rounded-[3px] border border-border px-1 text-[10px]">Enter</kbd>
-        <span>milestone</span>
-        <kbd className="rounded-[3px] border border-border px-1 text-[10px]">Shift+Enter</kbd>
+      <button type="button" onClick={onOpen} title="Enter adds a task; Shift+Enter adds a milestone." aria-keyshortcuts="Enter Shift+Enter" className="@container/gantt-add flex w-full min-w-0 items-center gap-2 border-b border-border px-3 text-left text-[13px] text-muted-foreground outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" style={{ height }}>
+        <Icon name="plus" size={14} className="shrink-0" />
+        <span className="min-w-0 flex-1 truncate">Add task</span>
+        <kbd className="shrink-0 rounded-[3px] border border-border px-1 text-[10px]">Enter</kbd>
+        <span className="hidden shrink-0 items-center gap-2 @[18rem]/gantt-add:flex">
+          <span>milestone</span>
+          <kbd className="rounded-[3px] border border-border px-1 text-[10px]">Shift+Enter</kbd>
+        </span>
       </button>
     );
   return (

package/registry/blocks/schedule-gantt/track.jsx

@@ -26,7 +26,7 @@ export function TrackHead({ axis, range, ppd, z, gridW, marks }) {
     <>
       {axis.top.map((s) => (
         <div key={`t${s.start}`} className="absolute top-0 h-[18px] border-l border-border" style={{ left: (s.start - range.from) * ppd, width: (s.end - s.start + 1) * ppd }}>
-          <span className="sticky block w-max px-1.5 pt-0.5 text-[11px] font-semibold text-foreground" style={{ left: gridW }}>
+          <span title={s.label} className="sticky block w-max max-w-full truncate px-1.5 pt-0.5 text-[11px] font-semibold text-foreground" style={{ left: gridW }}>
             {s.label}
           </span>
         </div>

package/registry/blocks/time-strip/README.md

@@ -25,7 +25,7 @@ import { TimeStrip } from "@/components/makersclaw/blocks/time-strip";   // a sh
 
 A client component. No other block and no npm package. Positions are
 percentages of the length, so the server and the browser draw the same picture;
-nothing is measured except at the moment a person drags.
+the rendered width is measured to keep crowded mark controls separate.
 
 ## Times
 
@@ -58,7 +58,10 @@ is `"04:12"`.
 - `selected` — the id of the mark to show pressed (taller, ringed).
 - `onMark(mark)` — makes the marks buttons. Called with the mark as laid out
   (`{ ...yours, seconds, share, pct }`). ← → on a focused mark moves to the next
-  or the one before. Without it the marks are plain pictures with a label.
+  or the one before. When their hit regions would overlap, the exact visual
+  marks remain on the track and a scrolling row of 44px timestamp buttons
+  selects each mark separately. It returns to direct track buttons when there
+  is room. Without `onMark` the marks are plain pictures with a label.
 - `size` — `sm` (22 px, default) or `lg` (44 px).
 - `axis` — `true` (default): about `ticks` labels under the bar on whole steps,
   always the start and the end. `false`: none. Or your own labels,

package/registry/blocks/time-strip/strip-model.js

@@ -176,3 +176,9 @@ export function stripWords({ length, marks, noun = "mark" }) {
   const word = n === 1 ? noun : `${noun}s`;
   return n ? `${n} ${word} in ${clockOf(total)}` : `No ${noun}s in ${clockOf(total)}`;
 }
+
+/** Whether neighboring hit regions would overlap at the rendered track width. */
+export function marksAreDense(placed, width, hit = 20) {
+  if (!(width > 0)) return false;
+  return placed.some((mark, index) => index > 0 && (mark.share - placed[index - 1].share) * width < hit);
+}

package/registry/blocks/time-strip/time-strip.jsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button, Notice, Skeleton, cx } from "../../ui";
-import { clockOf, countMarks, lengthOf, marksOf, nextMark, pctOf, rangeOf, rangesOf, secondsAt, shareOf, stripWords, ticksFor, toSeconds } from "./strip-model";
+import { clockOf, countMarks, lengthOf, marksAreDense, marksOf, nextMark, pctOf, rangeOf, rangesOf, secondsAt, shareOf, stripWords, ticksFor, toSeconds } from "./strip-model";
 
 // One bar for a span that has a length (a call, a recording, a shift), with
 // marks at the times that matter on it. The marks are the app's: a cut, a
@@ -63,9 +63,20 @@ export function TimeStrip({
 }) {
   const track = useRef(null);
   const [drag, setDrag] = useState(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  useEffect(() => {
+    const element = track.current;
+    if (!element) return;
+    const measure = () => setTrackWidth(element.getBoundingClientRect().width);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [status]);
   const total = lengthOf(length);
   const look = SIZE[size] ?? SIZE.sm;
   const placed = marksOf(marks, total);
+  const dense = Boolean(onMark) && marksAreDense(placed, trackWidth);
   const gaps = rangesOf(away, total);
   const shown = drag ?? (selection ? rangeOf(selection.from, selection.to, total) : null);
   const canPick = Boolean(onSelect) && total > 0;
@@ -189,7 +200,7 @@ export function TimeStrip({
             on && "ring-2 ring-background",
           );
           const style = { "--at": `${m.pct}%` };
-          return onMark ? (
+          return onMark && !dense ? (
             <button
               key={m.id}
               type="button"
@@ -212,7 +223,7 @@ export function TimeStrip({
               data-mark={m.id}
             />
           ) : (
-            <span key={m.id} role="img" aria-label={name} title={name} className={className} style={style} />
+            <span key={m.id} role="img" aria-label={name} title={name} className={cx(className, dense && "pointer-events-none")} style={style} />
           );
         })}
         {canPick && shown && shown.widthPct > 0
@@ -250,6 +261,32 @@ export function TimeStrip({
           ))}
         </div>
       ) : null}
+      {dense ? (
+        <div className="grid min-w-0 gap-1">
+          <p className="text-xs text-muted-foreground">Marks are close together. Choose a time:</p>
+          <div role="group" aria-label={`${label} marks`} className="flex min-w-0 gap-1 overflow-x-auto pb-1">
+            {placed.map((mark) => (
+              <Button
+                key={mark.id}
+                data-mark={mark.id}
+                variant={selected === mark.id ? "secondary" : "quiet"}
+                aria-label={`${mark.label ? `${mark.label}, ` : ""}${noun} at ${clockOf(mark.seconds)}`}
+                aria-pressed={selected === mark.id}
+                title={mark.label}
+                className="shrink-0 tabular-nums"
+                style={{ minWidth: 44, minHeight: 44 }}
+                onClick={() => onMark(mark)}
+                onKeyDown={(event) => {
+                  if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+                  const to = nextMark(placed, mark.id, event.key === "ArrowRight" ? 1 : -1);
+                  const element = event.currentTarget.parentElement?.querySelector(`[data-mark="${CSS.escape(String(to))}"]`);
+                  if (element && to !== mark.id) { event.preventDefault(); element.focus(); }
+                }}
+              >{clockOf(mark.seconds)}</Button>
+            ))}
+          </div>
+        </div>
+      ) : null}
       <span className="sr-only">
         {words}
         {Object.keys(kinds).length > 1 ? `, in ${Object.keys(kinds).length} kinds` : ""}