@lynn123411/dsh-model-submenu 0.3.10 → 0.3.12

package/src/client/EffortSlider.tsx

@@ -3,9 +3,10 @@
  *
  * The Host's second menu cell is a button that drills into a list of levels.
  * This slider sits inside that same cell, between the Host's label and value, so
- * the levels are reachable without leaving the menu. Levels are discrete: the
- * knob snaps to one detent per level, the drag only moves the knob, and the
- * release commits once. Keyboard arrows step and commit immediately.
+ * the levels are reachable without leaving the menu. The levels are discrete but
+ * the drag is not: the knob follows the pointer continuously, the level it
+ * reports is the detent nearest that position, and letting go eases the knob onto
+ * that detent and commits once. Keyboard arrows step and commit immediately.
  *
  * The fill takes the level's color, so the track and the two captions read as
  * one signal: "off" is neutral, the levels above it walk a blue-to-violet ramp,
@@ -14,10 +15,10 @@
  * "Provider default" is not a detent: it is a state, drawn as an empty track
  * with a hollow knob, so it never reads as the lowest level.
  */
-import { useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
 import type { EffortChoice } from './selection.ts';
 import { LEVEL_GRADIENT, isTopLevel, levelColor } from './level-color.ts';
-import { knobOffset, offsetOf, stepAt } from './slider.ts';
+import { detentAt, fillWidth, fractionAt, knobOffset, offsetOf } from './slider.ts';
 import css from './ModelOptions.module.css';
 
 /** Props of the slider: the levels, the one in force, and the commit path. */
@@ -49,22 +50,41 @@ export function EffortSlider({
   steps, current, defaultActive, defaultIndex, defaultLabel, busy, label, onCommit,
 }: EffortSliderProps) {
   const trackRef = useRef<HTMLDivElement | null>(null);
-  // The drag index lives in a ref as well as in state: a press and a release can
-  // arrive in one task, and the release must not read a render that never ran.
+  // The drag position lives in a ref as well as in state: a press and a release
+  // can arrive in one task, and the release must not read a render that never ran.
   const dragRef = useRef<number | null>(null);
+  // While dragging this is where the pointer is along the travel, not a level:
+  // the knob has to move with the pointer, or the drag reads as a series of jumps.
   const [drag, setDrag] = useState<number | null>(null);
+  // After a release that submits, the knob waits on the detent it settled on
+  // instead of springing back to the old level while the write is in flight.
+  const [hold, setHold] = useState<number | null>(null);
+  const dragging = drag !== null;
   const resting = defaultActive ? defaultIndex : current;
-  const active = drag ?? resting;
-  const beginDrag = (index: number | null): void => {
-    dragRef.current = index;
-    setDrag(index);
+  const active = dragging ? detentAt(drag, steps.length) : resting;
+  const knobFraction = drag ?? hold ?? offsetOf(resting, steps.length);
+  // The color and the ticks follow the knob, not the level in force: during a
+  // drag, and while a commit is in flight, the knob has already gone ahead.
+  const shown = dragging || hold !== null ? detentAt(knobFraction, steps.length) : resting;
+  const beginDrag = (fraction: number | null): void => {
+    dragRef.current = fraction;
+    setDrag(fraction);
   };
 
-  const indexAt = (clientX: number): number => {
+  // The hold ends as soon as the write does, whether it landed on the new level
+  // or was rejected: the displayed level is the truth again either way.
+  useEffect(() => {
+    if (!busy) setHold(null);
+  }, [busy]);
+  useEffect(() => {
+    setHold(null);
+  }, [current, defaultActive]);
+
+  const fractionAtPointer = (clientX: number): number => {
     const track = trackRef.current;
-    if (track === null) return active;
+    if (track === null) return dragRef.current ?? knobFraction;
     const rect = track.getBoundingClientRect();
-    return stepAt(clientX, rect.left, rect.width, steps.length);
+    return fractionAt(clientX, rect.left, rect.width);
   };
 
   const onPointerDown = (event: PointerEvent<HTMLDivElement>): void => {
@@ -73,7 +93,8 @@ export function EffortSlider({
     // also settle the cell and pull focus out of the slider.
     event.preventDefault();
     event.stopPropagation();
-    beginDrag(indexAt(event.clientX));
+    setHold(null);
+    beginDrag(fractionAtPointer(event.clientX));
     try {
       event.currentTarget.setPointerCapture(event.pointerId);
     } catch {
@@ -84,18 +105,20 @@ export function EffortSlider({
 
   const onPointerMove = (event: PointerEvent<HTMLDivElement>): void => {
     if (dragRef.current === null || busy) return;
-    const next = indexAt(event.clientX);
-    if (next !== dragRef.current) beginDrag(next);
+    beginDrag(fractionAtPointer(event.clientX));
   };
 
   const settle = (event: PointerEvent<HTMLDivElement>, commit: boolean): void => {
     if (dragRef.current === null) return;
-    const next = indexAt(event.clientX);
+    const next = detentAt(fractionAtPointer(event.clientX), steps.length);
     beginDrag(null);
     if (!commit) return;
     // Leaving the provider default is a change even when the knob lands where
     // the default already pointed.
-    if (next !== current || defaultActive) onCommit(next);
+    if (next !== current || defaultActive) {
+      setHold(offsetOf(next, steps.length));
+      onCommit(next);
+    }
   };
 
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
@@ -117,13 +140,12 @@ export function EffortSlider({
     if (next !== current || defaultActive) onCommit(next);
   };
 
-  const knobFraction = offsetOf(active, steps.length);
   const offset = knobOffset(knobFraction);
   // The provider default fills nothing: the knob shows where it lands, the
   // track stays empty so it never reads as a chosen level.
-  const idle = defaultActive && drag === null;
+  const idle = defaultActive && !dragging && hold === null;
   const filled = idle ? 0 : knobFraction;
-  const fill = isTopLevel(active, steps.length) ? LEVEL_GRADIENT : levelColor(active, steps.length);
+  const fill = isTopLevel(shown, steps.length) ? LEVEL_GRADIENT : levelColor(shown, steps.length);
   return <div
     ref={trackRef}
     className={css.slider}
@@ -133,11 +155,11 @@ export function EffortSlider({
     aria-valuemin={0}
     aria-valuemax={Math.max(0, steps.length - 1)}
     aria-valuenow={active}
-    aria-valuetext={defaultActive && drag === null ? defaultLabel : steps[active]?.label}
+    aria-valuetext={defaultActive && !dragging ? defaultLabel : steps[active]?.label}
     aria-disabled={busy || undefined}
     data-busy={busy ? '' : undefined}
-    data-dragging={drag === null ? undefined : ''}
-    data-default={defaultActive && drag === null ? '' : undefined}
+    data-dragging={dragging ? '' : undefined}
+    data-default={idle ? '' : undefined}
     onPointerDown={onPointerDown}
     onPointerMove={onPointerMove}
     onPointerUp={(event) => { settle(event, true); }}
@@ -146,11 +168,11 @@ export function EffortSlider({
     onClick={(event) => { event.stopPropagation(); }}
   >
     <div className={css.sliderTrack} aria-hidden="true">
-      <div className={css.sliderFill} style={{ width: knobOffset(filled), background: fill }} />
+      <div className={css.sliderFill} style={{ width: fillWidth(filled), background: fill }} />
       {steps.map((step, index) => <span
         key={step.key}
         className={css.sliderTick}
-        data-on={index <= active && !idle ? '' : undefined}
+        data-on={index <= shown && !idle ? '' : undefined}
         style={{ left: knobOffset(offsetOf(index, steps.length)) }}
       />)}
       <div className={css.sliderKnob} style={{ left: offset }} />

package/src/client/ModelOptions.module.css

@@ -41,17 +41,22 @@
   cursor: default;
 }
 
+/* The track is a capsule and the knob a larger circle riding on it: the knob
+ * overhangs at both ends, so it reads as a knob rather than as the track's own
+ * end cap. */
 .sliderTrack {
   position: relative;
   width: 100%;
-  height: 20px;
+  height: 16px;
   border-radius: 999px;
   corner-shape: round;
   background: var(--dsw-alias-border-l3);
 }
 
-/* The fill takes the level's color and is clipped to the filled part, so the
- * color under the knob is the color the level's text takes. */
+/* The fill is the track's own shape cut at the knob: its right cap carries the
+ * track's radius and ends under the knob, so the color runs into the knob
+ * instead of stopping at a straight edge, and the last detent reaches the
+ * track's end. */
 .sliderFill {
   position: absolute;
   top: 0;
@@ -59,8 +64,10 @@
   left: 0;
   border-radius: 999px;
   corner-shape: round;
-  overflow: hidden;
   pointer-events: none;
+  /* A level change eases the color to its new width; the drag turns this off so
+   * the edge stays under the pointer. */
+  transition: width 160ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* One detent per level: the dot is the only thing that says the levels are
@@ -86,6 +93,9 @@
 .sliderKnob {
   position: absolute;
   top: 50%;
+  /* The provider default draws a 1.5px ring; border-box keeps that ring inside
+   * the 20px circle the travel is computed for. */
+  box-sizing: border-box;
   width: 20px;
   height: 20px;
   margin: -10px 0 0 -10px;
@@ -94,6 +104,21 @@
   background: var(--dsw-alias-label-primary-foreground);
   box-shadow: var(--dsw-elevation-soft);
   pointer-events: none;
+  /* Letting go eases the knob onto the detent it settled on; the drag turns this
+   * off so the knob sits exactly under the pointer. */
+  transition: left 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.slider[data-dragging] .sliderKnob,
+.slider[data-dragging] .sliderFill {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sliderKnob,
+  .sliderFill {
+    transition: none;
+  }
 }
 
 /* Provider default: nothing is filled and the knob is a hollow ring, so the
@@ -367,6 +392,3 @@
   flex-wrap: wrap;
 }
 
-.footerDot {
-  color: var(--dsw-alias-label-dimmed);
-}

package/src/client/ModelPicker.tsx

@@ -31,7 +31,6 @@ import {
   searchRows,
   type CatalogModel,
   type ModelRow as CatalogRow,
-  type PickerTab,
 } from './rows.ts'
 import { Tag, isMobileDevice } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ModelFactsLookup } from './facts-source.ts'
@@ -85,8 +84,6 @@ export function ModelPicker({
   const listRef = useRef<HTMLDivElement | null>(null)
   const [query, setQuery] = useState('')
   const [tab, setTab] = useState(ALL_TAB)
-  const [highlight, setHighlight] = useState(0)
-  const tabRefs = useRef(new Map<string, HTMLButtonElement>())
 
   const tabs = useMemo(() => pickerTabs(state.groups, t('picker.all')), [state.groups, t])
   const reason = useMemo(() => reasoningOf(state.groups), [state.groups])
@@ -106,7 +103,6 @@ export function ModelPicker({
     if (!open) return
     setQuery('')
     setTab(ALL_TAB)
-    setHighlight(0)
     if (listRef.current !== null) listRef.current.scrollTop = 0
     // 粗指针设备不自动聚焦文本输入：移动端弹键盘会顶起布局，宿主座位也这样守。
     const frame = requestAnimationFrame(() => {
@@ -115,34 +111,8 @@ export function ModelPicker({
     return () => { cancelAnimationFrame(frame) }
   }, [open])
 
-  useEffect(() => {
-    setHighlight((current) => visible.length === 0 ? 0 : Math.min(current, visible.length - 1))
-  }, [visible.length])
-
-  useEffect(() => {
-    const row = listRef.current?.querySelector<HTMLElement>(`[data-row-index="${highlight}"]`)
-    row?.scrollIntoView({ block: 'nearest' })
-  }, [highlight])
-
   if (!open) return null
 
-  const activeRow = visible[highlight]
-  const activeId = activeRow === undefined ? undefined : `${id}-row-${highlight}`
-  const onSearchKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault()
-      if (visible.length === 0) return
-      setHighlight((current) => {
-        const next = current + (event.key === 'ArrowDown' ? 1 : -1)
-        return (next + visible.length) % visible.length
-      })
-      return
-    }
-    if (event.key === 'Enter' && activeRow !== undefined && !busy) {
-      event.preventDefault()
-      pick(activeRow)
-    }
-  }
   const pick = (row: CatalogRow) => {
     const selection = planModelCommit(live, row.provider, row.model, reason, rememberedOf?.(row.provider, row.model))
     if (selection === null) {
@@ -151,27 +121,6 @@ export function ModelPicker({
     }
     onPick(selection)
   }
-  /** Move to another tab and hand it the keyboard, in one step. */
-  const goTab = (next: PickerTab | undefined) => {
-    if (next === undefined || next.id === tab) return
-    setTab(next.id)
-    setHighlight(0)
-    tabRefs.current.get(next.id)?.focus()
-  }
-  const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-    const index = tabs.findIndex((candidate) => candidate.id === tab)
-    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-      event.preventDefault()
-      const step = event.key === 'ArrowRight' ? 1 : -1
-      goTab(tabs[((index === -1 ? 0 : index) + step + tabs.length) % tabs.length])
-      return
-    }
-    if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault()
-      goTab(tabs[event.key === 'Home' ? 0 : tabs.length - 1])
-    }
-  }
-
   const failures = state.failures.filter((failure) => tab === ALL_TAB || failure.id === tab)
   const failed = state.error !== null && state.status === 'error'
   const loading = state.status === 'loading'
@@ -192,13 +141,11 @@ export function ModelPicker({
           role="searchbox"
           aria-label={t('picker.search')}
           aria-controls={`${id}-list`}
-          aria-activedescendant={activeId}
           placeholder={t('picker.search')}
           icon={<IconSearchOutlineRegular size={14} />}
           value={query}
           readOnly={busy}
           onChange={(event) => { setQuery(event.target.value) }}
-          onKeyDown={onSearchKeyDown}
           data-modal-autofocus=""
         />
       </div>
@@ -206,10 +153,6 @@ export function ModelPicker({
         {tabs.map((entry) => (
           <button
             key={entry.id}
-            ref={(node) => {
-              if (node === null) tabRefs.current.delete(entry.id)
-              else tabRefs.current.set(entry.id, node)
-            }}
             type="button"
             role="tab"
             id={`${id}-tab-${entry.id}`}
@@ -217,29 +160,13 @@ export function ModelPicker({
             aria-controls={`${id}-list`}
             tabIndex={0}
             className={css.pickerTab}
-            onClick={() => {
-              setTab(entry.id)
-              setHighlight(0)
-            }}
-            onKeyDown={onTabKeyDown}
-            onFocus={() => {
-              if (entry.id !== tab) {
-                setTab(entry.id)
-                setHighlight(0)
-              }
-            }}
+            onClick={() => { setTab(entry.id) }}
           >
             {entry.label}
           </button>
         ))}
       </div>
-      <div
-        ref={listRef}
-        id={`${id}-list`}
-        className={css.pickerList}
-        role="menu"
-        aria-label={t('picker.title')}
-      >
+      <div ref={listRef} id={`${id}-list`} className={css.pickerList}>
         {loading && <div className={css.notice}>{t('status.loading')}</div>}
         {failed && (
           <div className={css.notice}>
@@ -256,8 +183,8 @@ export function ModelPicker({
         {visible.length === 0 && !loading && !failed && (
           <div className={css.notice}>{state.groups.length === 0 ? t('status.empty') : t('picker.searchEmpty')}</div>
         )}
-        {visible.map((row, index) => (
-          <div key={`${row.provider}/${row.model}`} data-row-index={index} id={`${id}-row-${index}`}>
+        {visible.map((row) => (
+          <div key={`${row.provider}/${row.model}`}>
             <ModelRow
               name={row.entry.name}
               badge={row.entry.badge === undefined
@@ -277,10 +204,7 @@ export function ModelPicker({
               starLabel={isFavorite(favorites, row.provider, row.model)
                 ? t('picker.unfavorite', { model: row.entry.name })
                 : t('picker.favorite', { model: row.entry.name })}
-              starTabStop={index === highlight}
-              rowTabIndex={-1}
               onPick={() => { pick(row) }}
-              onFocusRow={() => { setHighlight(index) }}
               onToggleFavorite={() => { onToggleFavorite(row.provider, row.model) }}
             />
           </div>
@@ -288,12 +212,6 @@ export function ModelPicker({
       </div>
       <div className={css.pickerFooter}>
         <span className={css.footerHint}>
-          <ShortcutKeys keys={['↑', '↓']} />
-          <span>{t('picker.hintNavigate')}</span>
-          <span className={css.footerDot}>·</span>
-          <ShortcutKeys keys={['Enter']} />
-          <span>{t('picker.hintSelect')}</span>
-          <span className={css.footerDot}>·</span>
           <ShortcutKeys keys={['Esc']} />
           <span>{t('picker.hintClose')}</span>
         </span>

package/src/client/ModelRow.tsx

@@ -27,14 +27,8 @@ export interface ModelRowProps {
   readonly meta?: string | undefined;
   /** Localized accessible name for the star control. */
   readonly starLabel?: string | undefined;
-  /** Whether the star is a Tab stop right now (the picker's roving highlight). */
-  readonly starTabStop?: boolean;
-  /** Tab order of the row itself; the picker keeps rows out of it so ↑/↓ own the walk. */
-  readonly rowTabIndex?: number;
   /** Pick this row. */
   readonly onPick: () => void;
-  /** The row took the keyboard, so its star becomes reachable. */
-  readonly onFocusRow?: (() => void) | undefined;
   /** Toggle this row's favorite. */
   readonly onToggleFavorite: () => void;
   /** Extra row content, such as the picker's disabled reason. */
@@ -48,7 +42,7 @@ export interface ModelRowProps {
  */
 export function ModelRow({
   name, badge, selected, busy, favorited, meta, starLabel,
-  starTabStop = false, rowTabIndex, onPick, onFocusRow, onToggleFavorite, children,
+  onPick, onToggleFavorite, children,
 }: ModelRowProps) {
   return <div
     className={css.row}
@@ -57,14 +51,11 @@ export function ModelRow({
   >
     <button
       type="button"
-      role="menuitemradio"
-      aria-checked={selected}
-      tabIndex={rowTabIndex}
+      aria-current={selected ? 'true' : undefined}
       className={css.rowPick}
       title={name}
       disabled={busy}
       onClick={onPick}
-      onFocus={onFocusRow}
     >
       <span className={css.rowCopy}>
         <span className={css.rowName}>{name}</span>
@@ -77,7 +68,6 @@ export function ModelRow({
       className={css.starButton}
       aria-pressed={favorited}
       aria-label={starLabel}
-      tabIndex={starTabStop ? 0 : -1}
       disabled={busy}
       onClick={onToggleFavorite}
     >

package/src/client/locales.ts

@@ -19,8 +19,6 @@ export type ModelSubmenuLocaleKey =
   | 'picker.all'
   | 'picker.favorite'
   | 'picker.unfavorite'
-  | 'picker.hintNavigate'
-  | 'picker.hintSelect'
   | 'picker.hintClose'
   | 'meta.effort'
   | 'meta.images'
@@ -51,8 +49,6 @@ export const zh: Record<ModelSubmenuLocaleKey, string> = {
   'picker.all': '全部',
   'picker.favorite': '收藏 {model}',
   'picker.unfavorite': '取消收藏 {model}',
-  'picker.hintNavigate': '导航',
-  'picker.hintSelect': '选择',
   'picker.hintClose': '关闭',
   'meta.effort': '思考',
   'meta.images': '图片输入',
@@ -77,8 +73,6 @@ export const en: Record<ModelSubmenuLocaleKey, string> = {
   'picker.all': 'All',
   'picker.favorite': 'Favorite {model}',
   'picker.unfavorite': 'Remove {model} from favorites',
-  'picker.hintNavigate': 'navigate',
-  'picker.hintSelect': 'select',
   'picker.hintClose': 'close',
   'meta.effort': 'Effort',
   'meta.images': 'Images',

package/src/client/slider.ts

@@ -1,19 +1,29 @@
 /**
  * Geometry of the discrete effort slider.
  *
- * The track carries one detent per level and the knob's centre travels between
- * two ends inset by the knob radius, so the knob never overhangs the track. A
- * pointer position becomes the detent nearest it; a detent becomes a fraction
- * of the track that CSS turns into the knob's centre and the filled width.
+ * The track is a capsule and the knob a slightly larger circle riding on it, so
+ * the knob overhangs the track instead of merging with its rounded end. The
+ * knob's centre travels between two points inset by the knob's radius, so the
+ * knob never runs past either end. A pointer position becomes a position along
+ * that travel; a position becomes the detent nearest it, or the CSS lengths that
+ * put the knob and the fill there.
  */
 
 /**
- * Knob diameter in CSS pixels, and the track's height: the slider stands as tall
- * as the row's text line. The centre stops half of it from each end of the
- * track, so the knob never overhangs.
+ * Track height in CSS pixels; the stylesheet keeps the same value. Half of it is
+ * the radius of the track's ends and of the fill's cap.
+ */
+export const TRACK_HEIGHT = 16;
+
+/**
+ * Knob diameter in CSS pixels. It is larger than the track, so the knob reads as
+ * a knob riding on the track rather than as the track's own end cap.
  */
 export const KNOB_SIZE = 20;
 
+/** The knob's centre keeps its own radius away from either end of the track. */
+const KNOB_RADIUS = KNOB_SIZE / 2;
+
 /**
  * @param index - detent index.
  * @param count - number of detents.
@@ -26,26 +36,63 @@ export function offsetOf(index: number, count: number): number {
 }
 
 /**
+ * Where a pointer sits along the knob's travel. The drag reads this rather than a
+ * detent, so the knob follows the pointer instead of jumping a level at a time.
  * @param clientX - pointer position in viewport coordinates.
  * @param left - the track's left edge in viewport coordinates.
  * @param width - the track's width in pixels.
- * @param count - number of detents.
- * @returns the detent nearest the pointer, clamped to the two ends.
+ * @returns the position as a fraction of the travel, clamped to 0 and 1.
  */
-export function stepAt(clientX: number, left: number, width: number, count: number): number {
-  if (count <= 1) return 0;
+export function fractionAt(clientX: number, left: number, width: number): number {
   const usable = width - KNOB_SIZE;
   if (usable <= 0) return 0;
-  const fraction = (clientX - left - KNOB_SIZE / 2) / usable;
+  const fraction = (clientX - left - KNOB_RADIUS) / usable;
+  return Math.min(Math.max(fraction, 0), 1);
+}
+
+/**
+ * @param fraction - a knob position between 0 and 1.
+ * @param count - number of detents.
+ * @returns the detent nearest that position.
+ */
+export function detentAt(fraction: number, count: number): number {
+  if (count <= 1) return 0;
   const clamped = Math.min(Math.max(fraction, 0), 1);
   return Math.round(clamped * (count - 1));
 }
 
+/**
+ * @param clientX - pointer position in viewport coordinates.
+ * @param left - the track's left edge in viewport coordinates.
+ * @param width - the track's width in pixels.
+ * @param count - number of detents.
+ * @returns the detent nearest the pointer, clamped to the two ends.
+ */
+export function stepAt(clientX: number, left: number, width: number, count: number): number {
+  if (count <= 1) return 0;
+  return detentAt(fractionAt(clientX, left, width), count);
+}
+
 /**
  * @param fraction - a knob position between 0 and 1.
  * @returns the CSS length that puts the knob centre there, inset at both ends.
  */
 export function knobOffset(fraction: number): string {
   const clamped = Math.min(Math.max(fraction, 0), 1);
-  return `calc(${KNOB_SIZE / 2}px + ${clamped} * (100% - ${KNOB_SIZE}px))`;
+  return `calc(${KNOB_RADIUS}px + ${clamped} * (100% - ${KNOB_SIZE}px))`;
+}
+
+/**
+ * Width of the colored fill for a knob position.
+ *
+ * The fill is the track's own shape cut at the knob: its right cap carries the
+ * track's radius and ends under the knob, so the color runs into the knob
+ * instead of stopping at a straight edge, and the last detent reaches the track's
+ * end rather than the knob's centre.
+ * @param fraction - a knob position between 0 and 1.
+ * @returns the CSS width of the fill.
+ */
+export function fillWidth(fraction: number): string {
+  const clamped = Math.min(Math.max(fraction, 0), 1);
+  return `calc(${TRACK_HEIGHT}px + ${clamped} * (100% - ${TRACK_HEIGHT}px))`;
 }