@charcuterie/ui 4.3.0 → 4.4.0

package/dist/TimecodeInput/TimecodeInput.d.ts

@@ -83,6 +83,23 @@ export type TimecodeInputProps = SlotProps & {
  * discard the boundary just typed. A **zero-length** section is
  * refused by name: it plays nothing, so swapping would hide a typo
  * behind a window that silently does not exist.
+ *
+ * ### The Narrow View stacks the two fields
+ *
+ * Below `--cq-sm` a section is two fields one above the other, under
+ * the captions "Start" and "End"; above it, the row with `to`
+ * between them. It is a **container** query, so a 390px modal on a
+ * 2560px monitor gets the stacked form that a window breakpoint
+ * would have denied it. The captions are `aria-hidden`, so the
+ * accessible name of each control is the same in both layouts.
+ *
+ * ### Milliseconds are optional to read as well as to type
+ *
+ * The grammar has always accepted `1:01:00`. The field now writes it
+ * back as `01:01:00` rather than as `01:01:00.000`, through
+ * `formatTimecode`'s `millisecondDigits: "auto"`, because a fraction
+ * nobody typed is not information. `1:01:00.5` still commits as
+ * `01:01:00.500`.
  */
 export declare const TimecodeInput: ({ className, durationMs, isDisabled, isRange, label, maxValueMs, minValueMs, onChange, placeholder, size, stepMs, valueMs, ...receivedSlotProps }: TimecodeInputProps) => ReactNode;
 //# sourceMappingURL=TimecodeInput.d.ts.map

package/dist/TimecodeInput/TimecodeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimecodeInput.d.ts","sourceRoot":"","sources":["../../src/TimecodeInput/TimecodeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAOlD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,KAAK,IAAI,CAAA;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CACjC,CAAA;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,aAAa,GAAI,mJAc3B,kBAAkB,KAAG,SAsWvB,CAAA"}
+{"version":3,"file":"TimecodeInput.d.ts","sourceRoot":"","sources":["../../src/TimecodeInput/TimecodeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAOlD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,KAAK,IAAI,CAAA;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CACjC,CAAA;AA+BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,eAAO,MAAM,aAAa,GAAI,mJAc3B,kBAAkB,KAAG,SAqbvB,CAAA"}

package/dist/TimecodeInput/TimecodeInput.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUniqueId } from "@charcuterie/logic";
 import { useState } from "react";
 import { CONTROL_SIZE_CLASS } from "../controlStyles.js";
@@ -8,6 +8,20 @@ import { mergeSlotProps } from "../slotProps.js";
 import { toClassName } from "../toClassName.js";
 import { clampTimecode, formatTimecode, parseTimecodeInput, } from "./timecode.js";
 const INPUT_CLASS = "w-full min-w-0 rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard placeholder:text-content-muted hover:border-border-strong aria-invalid:border-intent-danger-border";
+/**
+ * How this field prints, everywhere it prints — the text it writes
+ * back on commit, and the echo that reports what a draft resolves
+ * to. The two have to agree, so they read the same constant.
+ *
+ * `"auto"` rather than the exported default of three digits: a
+ * person who types `1:01:00` and tabs away did not ask for
+ * `01:01:00.000`, any more than typing `3` asks for `3.000`. A real
+ * fraction still prints in full, and the grammar reads both back to
+ * the same number.
+ */
+const DISPLAY_FORMAT = {
+    millisecondDigits: "auto",
+};
 const toSeededRange = (valueMs) => valueMs === undefined
     ? { end: null, start: null }
     : typeof valueMs === "number"
@@ -57,6 +71,23 @@ const toSeededRange = (valueMs) => valueMs === undefined
  * discard the boundary just typed. A **zero-length** section is
  * refused by name: it plays nothing, so swapping would hide a typo
  * behind a window that silently does not exist.
+ *
+ * ### The Narrow View stacks the two fields
+ *
+ * Below `--cq-sm` a section is two fields one above the other, under
+ * the captions "Start" and "End"; above it, the row with `to`
+ * between them. It is a **container** query, so a 390px modal on a
+ * 2560px monitor gets the stacked form that a window breakpoint
+ * would have denied it. The captions are `aria-hidden`, so the
+ * accessible name of each control is the same in both layouts.
+ *
+ * ### Milliseconds are optional to read as well as to type
+ *
+ * The grammar has always accepted `1:01:00`. The field now writes it
+ * back as `01:01:00` rather than as `01:01:00.000`, through
+ * `formatTimecode`'s `millisecondDigits: "auto"`, because a fraction
+ * nobody typed is not information. `1:01:00.5` still commits as
+ * `01:01:00.500`.
  */
 export const TimecodeInput = ({ className, durationMs, isDisabled = false, isRange = false, label, maxValueMs, minValueMs, onChange, placeholder = "e.g. 1:02:03.500", size = "md", stepMs = 1_000, valueMs, ...receivedSlotProps }) => {
     const baseId = useUniqueId();
@@ -66,12 +97,24 @@ export const TimecodeInput = ({ className, durationMs, isDisabled = false, isRan
     const [range, setRange] = useState(seededRange);
     const toDisplayText = (milliseconds) => milliseconds === null
         ? ""
-        : formatTimecode(milliseconds);
+        : formatTimecode(milliseconds, DISPLAY_FORMAT);
     const [texts, setTexts] = useState({
         end: toDisplayText(seededRange.end),
         start: toDisplayText(seededRange.start),
     });
+    /**
+     * Which endpoint the keyboard steps and the echo belong to. It
+     * SURVIVES blur, deliberately: a refusal has to keep naming the
+     * field it is about after the focus has gone somewhere else.
+     */
     const [activeEndpoint, setActiveEndpoint] = useState("start");
+    /**
+     * Whether a field of this control holds the focus. Separate from
+     * `activeEndpoint` because the two answer different questions —
+     * *which* endpoint, and *whether anybody is typing* — and only the
+     * second one may hide the echo.
+     */
+    const [isFocused, setIsFocused] = useState(false);
     /**
      * A refusal the grammar cannot see, because it is about the
      * **pair** rather than about either text: a zero-length section.
@@ -191,10 +234,39 @@ export const TimecodeInput = ({ className, durationMs, isDisabled = false, isRan
         : parsed.kind === "empty" || clampedPreview === null
             ? ""
             : clampedPreview === parsed.milliseconds
-                ? formatTimecode(parsed.milliseconds)
-                : `${formatTimecode(parsed.milliseconds)} is outside the media, so it commits as ${formatTimecode(clampedPreview)}.`;
-    const echoText = rangeRefusal ?? parsedEcho;
+                ? formatTimecode(parsed.milliseconds, DISPLAY_FORMAT)
+                : `${formatTimecode(parsed.milliseconds, DISPLAY_FORMAT)} is outside the media, so it commits as ${formatTimecode(clampedPreview, DISPLAY_FORMAT)}.`;
+    /**
+     * A restatement is a reading of the field above it, so it leaves
+     * with the focus. Left up, an unlabelled `00:05:00` under an idle
+     * control reads as a stray value rather than as a report on one.
+     *
+     * A REFUSAL stays, and both kinds do. `rangeRefusal` is set on
+     * commit — which is exactly blur — so a rule that hid it on blur
+     * would mean it was never readable at all. And an unparsed text
+     * keeps `aria-invalid` on the control, so the sentence saying why
+     * has to stay with it: an invalid field with no message is worse
+     * than the stray line this removes.
+     *
+     * Emptying a live region announces nothing, so the blur costs a
+     * screen reader no chatter.
+     */
+    const echoText = rangeRefusal ??
+        (isFocused || parsed.kind === "unparsed"
+            ? parsedEcho
+            : "");
     const isInvalid = rangeRefusal !== null || parsed.kind === "unparsed";
+    /**
+     * The Narrow View's caption over one field.
+     *
+     * Presentational, and `aria-hidden` for the same reason the word
+     * `to` is: each input already carries
+     * `aria-label="<label> <endpoint>"`, and a real `<label>` here
+     * would name the start control a second time and fight the `id` a
+     * `Field` above clones onto it. The eye gets a caption; the
+     * accessible name is the same in both layouts.
+     */
+    const renderCaption = (text) => (_jsx("span", { "aria-hidden": "true", className: "text-content-secondary text-sm cq-sm:hidden", children: text }));
     const renderInput = (endpoint) => {
         const ownProps = {
             "aria-describedby": echoId,
@@ -223,6 +295,7 @@ export const TimecodeInput = ({ className, durationMs, isDisabled = false, isRan
             // rather than by a keyboard the field cannot choose.
             inputMode: "numeric",
             onBlur: () => {
+                setIsFocused(false);
                 commitText(endpoint);
             },
             onChange: (changeEvent) => {
@@ -238,6 +311,7 @@ export const TimecodeInput = ({ className, durationMs, isDisabled = false, isRan
                 }));
             },
             onFocus: () => {
+                setIsFocused(true);
                 setActiveEndpoint(endpoint);
             },
             onKeyDown: (keyEvent) => {
@@ -251,7 +325,7 @@ export const TimecodeInput = ({ className, durationMs, isDisabled = false, isRan
                 ? mergeSlotProps(receivedSlotProps, ownProps)
                 : ownProps), key: endpoint }));
     };
-    return (_jsxs("div", { className: toClassName("flex flex-col gap-1", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [renderInput("start"), isRange ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-content-secondary text-sm", children: "to" }), renderInput("end")] })) : null] }), _jsx("p", { "aria-live": "polite", className: toClassName("min-h-5 text-sm", isInvalid
+    return (_jsxs("div", { className: toClassName("@container flex flex-col gap-1", className), children: [isRange ? (_jsxs("div", { className: "flex flex-col gap-2 cq-sm:flex-row cq-sm:items-center cq-sm:gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1 cq-sm:flex-1", children: [renderCaption("Start"), renderInput("start")] }), _jsx("span", { "aria-hidden": "true", className: "hidden shrink-0 text-content-secondary text-sm cq-sm:inline", children: "to" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1 cq-sm:flex-1", children: [renderCaption("End"), renderInput("end")] })] })) : (renderInput("start")), _jsx("p", { "aria-live": "polite", className: toClassName("min-h-5 text-sm", isInvalid
                     ? "text-intent-danger-content"
                     : "text-content-secondary"), id: echoId, role: "status", children: echoText })] }));
 };

package/dist/TimecodeInput/TimecodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimecodeInput.js","sourceRoot":"","sources":["../../src/TimecodeInput/TimecodeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimecodeInput.js","sourceRoot":"","sources":["../../src/TimecodeInput/TimecodeInput.tsx"],"names":[],"mappings":"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"}

package/dist/TimecodeInput/timecode.d.ts

@@ -86,8 +86,17 @@ export type FormatTimecodeOptions = {
      * unchanged because the largest field present is unbounded.
      */
     isHoursShown?: boolean;
-    /** `0` through `3`. `0` drops the fraction and its separator. */
-    millisecondDigits?: number;
+    /**
+     * `0` through `3`. `0` drops the fraction and its separator.
+     *
+     * `"auto"` prints the fraction only when there is one to print: a
+     * whole number of seconds comes back as `01:01:00`, and half a
+     * second more comes back as `01:01:00.500`. It is how a decimal
+     * number is written everywhere else — you write `3`, not `3.000` —
+     * and the grammar reads both spellings back to the number that
+     * produced them, because its fraction is optional.
+     */
+    millisecondDigits?: "auto" | number;
 };
 /**
  * A position in a piece of media, printed.
@@ -97,12 +106,16 @@ export type FormatTimecodeOptions = {
  * because it has not reached second 2 yet. Rounding would print a
  * seek point the media has not played.
  *
- * The default is the canonical `hh:mm:ss.mmm`, and that is what the
- * field writes back on commit. One spelling means a re-read of the
- * field parses to the number that produced it, and a screenshot of
- * the same value is the same picture — neither of which is true of
- * the fleet's five printers, three of which hide the hour and two of
- * which do not pad the minute.
+ * The default is the canonical `hh:mm:ss.mmm`. `TimecodeInput` asks
+ * for `millisecondDigits: "auto"` instead, so a whole second is
+ * written back as `01:01:00` rather than as `01:01:00.000` — a
+ * person who typed no fraction did not ask for one, and both
+ * spellings re-read to the number that produced them.
+ *
+ * Either way it is ONE spelling per value, which is what the fleet's
+ * five printers never were: three of them hide the hour and two do
+ * not pad the minute, so the same position is a different picture in
+ * each app.
  */
 export declare const formatTimecode: (milliseconds: number, { isHoursShown, millisecondDigits, }?: FormatTimecodeOptions) => string;
 /**

package/dist/TimecodeInput/timecode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timecode.d.ts","sourceRoot":"","sources":["../../src/TimecodeInput/timecode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAQH;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,IAAI,GAAG,MAAM,CAAA;IAClB,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAC3B;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GAC1C;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAExC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAKD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,GACzB,cAAc,MAAM,EACpB,uCAGG,qBAA0B,KAC5B,MAgCF,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GACxB,cAAc,MAAM,EACpB,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,MAaF,CAAA;AA6HD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,GAC7B,SAAS,MAAM,KACd,mBAsEF,CAAA"}
+{"version":3,"file":"timecode.d.ts","sourceRoot":"","sources":["../../src/TimecodeInput/timecode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAQH;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,IAAI,GAAG,MAAM,CAAA;IAClB,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAC3B;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GAC1C;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAExC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;;;;;;OASG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACpC,CAAA;AAKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc,GACzB,cAAc,MAAM,EACpB,uCAGG,qBAA0B,KAC5B,MAqCF,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GACxB,cAAc,MAAM,EACpB,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,MAaF,CAAA;AA6HD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,GAC7B,SAAS,MAAM,KACd,mBAsEF,CAAA"}

package/dist/TimecodeInput/timecode.js

@@ -65,18 +65,26 @@ const padTwo = (value) => String(value).padStart(2, "0");
  * because it has not reached second 2 yet. Rounding would print a
  * seek point the media has not played.
  *
- * The default is the canonical `hh:mm:ss.mmm`, and that is what the
- * field writes back on commit. One spelling means a re-read of the
- * field parses to the number that produced it, and a screenshot of
- * the same value is the same picture — neither of which is true of
- * the fleet's five printers, three of which hide the hour and two of
- * which do not pad the minute.
+ * The default is the canonical `hh:mm:ss.mmm`. `TimecodeInput` asks
+ * for `millisecondDigits: "auto"` instead, so a whole second is
+ * written back as `01:01:00` rather than as `01:01:00.000` — a
+ * person who typed no fraction did not ask for one, and both
+ * spellings re-read to the number that produced them.
+ *
+ * Either way it is ONE spelling per value, which is what the fleet's
+ * five printers never were: three of them hide the hour and two do
+ * not pad the minute, so the same position is a different picture in
+ * each app.
  */
 export const formatTimecode = (milliseconds, { isHoursShown = true, millisecondDigits = 3, } = {}) => {
     const total = Number.isFinite(milliseconds)
         ? Math.max(0, Math.floor(milliseconds))
         : 0;
-    const digits = Math.min(3, Math.max(0, Math.floor(millisecondDigits)));
+    const digits = millisecondDigits === "auto"
+        ? total % MILLISECONDS_PER_SECOND === 0
+            ? 0
+            : 3
+        : Math.min(3, Math.max(0, Math.floor(millisecondDigits)));
     const hours = isHoursShown
         ? Math.floor(total / MILLISECONDS_PER_HOUR)
         : 0;

package/dist/TimecodeInput/timecode.js.map

@@ -1 +1 @@
-{"version":3,"file":"timecode.js","sourceRoot":"","sources":["../../src/TimecodeInput/timecode.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"timecode.js","sourceRoot":"","sources":["../../src/TimecodeInput/timecode.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/TimecodeInput/TimecodeInput.mdx

@@ -74,11 +74,27 @@ Three mechanisms keep a grammar that permissive from being dangerous:
    the field, in a `role="status"` live region wired into the input's `aria-describedby`.
    Commit is Enter or blur; a keystroke never commits.
 
+The echo is a **reading of the focused field**, so it leaves when the focus does. A
+restatement left under an idle control is an unlabelled timecode floating on the page, which
+reads as a value rather than as a report on the one above it.
+
+A **refusal** is the other case and it stays up, both kinds of it. The zero-length complaint
+is written at the commit — which *is* the blur — so a rule that cleared it on blur would mean
+it was never readable. And a text the grammar cannot read keeps `aria-invalid` on the
+control, so the sentence saying why has to stay with it: an invalid field with no message is
+worse than the stray line this removes. Emptying a live region announces nothing, so none of
+this makes a screen reader chatty.
+
 **The largest field present is unbounded; every smaller one is 0–59.** That one sentence is
 every bound in the grammar. It is also why a bare number is seconds: seconds is the smallest
 unit the field prints, so the reading that needs no explanation is the one where the typist
 appended nothing.
 
+**Milliseconds are optional to read as well as to type.** The grammar has always accepted
+`1:01:00`, and the field now writes it back as `01:01:00` rather than as `01:01:00.000` — you
+write 3, not 3.000. A real fraction still prints in full: `1:01:00.5` commits as
+`01:01:00.500`, because a fraction pads on the right.
+
 Refused by name: a negative, a seconds or minutes field of 60 or more with a larger field
 beside it, more than three colon-separated parts, a fraction longer than three digits, and
 anything the accepting rules do not match. A refused value leaves the text **exactly as
@@ -132,6 +148,25 @@ its text is refused — which are exactly the states the echo exists for. A spin
 value is a widget that under-reports itself to a screen reader in its two most important
 states.
 
+## The Narrow View stacks the two fields
+
+A section is `[start] to [end]` in a row while there is room for it. Below `--cq-sm` the two
+fields **stack**, and the `to` is replaced by a "Start" caption over the first and an "End"
+caption over the second. Two `hh:mm:ss.mmm` fields and a word between them fill a 390px modal
+edge to edge with no slack, which is where this was reported from.
+
+It is a **container** query, not a window breakpoint. The box that ran out of room is this
+field's own, and a 390px dialog on a 2560px monitor is the Wide View by every media query
+ever written. The cost of `container-type: inline-size` is the `contain: inline-size` that
+rides with it, so `TimecodeInput` takes its width from its parent rather than from its
+content — give it a definite inline size, as with every container-query component here.
+
+The captions are `aria-hidden`, exactly as the `to` always was. Each input already carries
+`aria-label="<label> start"` / `"<label> end"`, and a real `<label>` would name the start
+control a second time and fight the `id` a `Field` above clones onto it. **The accessible
+name of each control is identical in both layouts**, and `TimecodeInput.test.tsx` asserts it
+at two container widths.
+
 <Canvas of={TimecodeInputStories.Responsive} />
 
 ## The formatter is exported, because the fleet writes it repeatedly
@@ -143,13 +178,18 @@ whether the hour is shown and whether the minute is padded. A read-only surface
 the exported one rather than spell a sixth.
 
 ```ts
-formatTimecode(3_723_500)                            // "01:02:03.500"
-formatTimecode(90_000, { isHoursShown: false })      // "01:30.000"
-formatTimecode(1_999, { millisecondDigits: 0 })      // "00:00:01" — truncates
+formatTimecode(3_723_500)                                 // "01:02:03.500"
+formatTimecode(90_000, { isHoursShown: false })           // "01:30.000"
+formatTimecode(1_999, { millisecondDigits: 0 })           // "00:00:01" — truncates
+formatTimecode(3_660_000, { millisecondDigits: "auto" })  // "01:01:00" — no fraction to print
+formatTimecode(3_660_500, { millisecondDigits: "auto" })  // "01:01:00.500"
 ```
 
-The default is the canonical `hh:mm:ss.mmm`, and it is what the field writes back on commit:
-one spelling means a re-read of the field parses to the number that produced it, and a
-screenshot of the same value is the same picture.
+The **default is the canonical `hh:mm:ss.mmm`** and it stays that way, because a published
+export is read by callers no change here can see. `TimecodeInput` opts in to `"auto"` for
+both the text it writes back and its own echo, so the two agree on the page.
+
+Either way it is one spelling per value: a re-read of the field parses to the number that
+produced it, and a screenshot of the same value is the same picture.
 
 <Canvas of={TimecodeInputStories.Interactive} />

package/src/TimecodeInput/TimecodeInput.stories.tsx

@@ -20,6 +20,12 @@ import { formatTimecode } from "./timecode.ts"
  */
 const DURATION_MS = 2_712_000
 
+/**
+ * The demo readout prints a committed value the way the field
+ * writes it — `millisecondDigits: "auto"` — so one position is one
+ * spelling everywhere on the page. `formatTimecode`'s own default is
+ * still the full `hh:mm:ss.mmm`, and the docs page shows both.
+ */
 const describeValue = (
   value: null | number | TimecodeRange,
 ) => {
@@ -28,7 +34,9 @@ const describeValue = (
   }
 
   if (typeof value === "number") {
-    return formatTimecode(value)
+    return formatTimecode(value, {
+      millisecondDigits: "auto",
+    })
   }
 
   // A section with neither end set is the same absence `onChange`
@@ -37,7 +45,7 @@ const describeValue = (
     return "—"
   }
 
-  return `${value.start === null ? "the beginning" : formatTimecode(value.start)} to ${value.end === null ? "the end" : formatTimecode(value.end)}`
+  return `${value.start === null ? "the beginning" : formatTimecode(value.start, { millisecondDigits: "auto" })} to ${value.end === null ? "the end" : formatTimecode(value.end, { millisecondDigits: "auto" })}`
 }
 
 const meta = {
@@ -97,6 +105,13 @@ const TimecodeHarness = ({
  * it before anything commits — `90` is ninety seconds, `1:30` is the
  * same position spelled the other way, `1:02:03.500` is the full
  * form. Enter or blur commits; Escape puts the last value back.
+ *
+ * The line is a reading of the field, so it leaves when the focus
+ * does. A refusal stays up, because a control that is still marked
+ * invalid needs the sentence that says why.
+ *
+ * Milliseconds are optional both ways: `1:01:00` commits as
+ * `01:01:00`, not as `01:01:00.000`.
  */
 export const Default: Story = {
   args: { label: "Start at" },
@@ -257,9 +272,14 @@ export const AllStates: Story = {
 }
 
 /**
- * The field at three container widths. Two inputs and a word between
- * them is the layout that runs out of room first, so the section
- * mode is the one worth looking at narrow.
+ * The field at three container widths, which is the only honest way
+ * to story a container query — the window never moves.
+ *
+ * Below `--cq-sm` the section becomes the **Narrow View**: the two
+ * fields stack, and the word `to` is replaced by a "Start" caption
+ * over the first and an "End" caption over the second. Two
+ * `hh:mm:ss.mmm` fields and a word between them fill a phone-width
+ * modal edge to edge, which is where this was reported from.
  */
 export const Responsive: Story = {
   args: { label: "Start at" },
@@ -286,7 +306,9 @@ export const Responsive: Story = {
  *
  * In the section below, type an end that sits before the start and
  * the pair **swaps**; type an end equal to the start and it is
- * **refused**, because a section with no length plays nothing.
+ * **refused**, because a section with no length plays nothing. The
+ * refusal is readable after the field has been left, which is when
+ * a commit-time complaint is written.
  */
 export const Interactive: Story = {
   args: { label: "Start at" },

package/src/TimecodeInput/TimecodeInput.test.tsx

@@ -7,7 +7,8 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./TimecodeInput.stories.tsx"
 
-const { AllStates, Interactive } = composeStories(stories)
+const { AllStates, Interactive, Responsive } =
+  composeStories(stories)
 
 const mountInteractive = async () => {
   const mounted = await mountStory(Interactive)
@@ -40,9 +41,7 @@ test("a typed position is echoed in full, and does NOT commit until Enter", asyn
   // and the field says so in a live region before anything is
   // stored.
   await waitFor(() => {
-    expect(
-      canvas.getByText("00:01:30.000"),
-    ).toBeInTheDocument()
+    expect(canvas.getByText("00:01:30")).toBeInTheDocument()
   })
 
   await expect(
@@ -53,13 +52,13 @@ test("a typed position is echoed in full, and does NOT commit until Enter", asyn
 
   await waitFor(() => {
     expect(
-      canvas.getByText("Chosen: 00:01:30.000"),
+      canvas.getByText("Chosen: 00:01:30"),
     ).toBeInTheDocument()
   })
 
   // Committed in the one canonical spelling, so a re-read of the
   // field parses to the number that produced it.
-  await expect(single).toHaveValue("00:01:30.000")
+  await expect(single).toHaveValue("00:01:30")
 })
 
 test("an overflowed field is refused by name, and the typed text survives", async () => {
@@ -101,7 +100,7 @@ test("Escape puts the last committed value back", async () => {
 
   await userEvent.type(single, "90{Enter}")
 
-  await expect(single).toHaveValue("00:01:30.000")
+  await expect(single).toHaveValue("00:01:30")
 
   await userEvent.clear(single)
 
@@ -109,7 +108,7 @@ test("Escape puts the last committed value back", async () => {
 
   await userEvent.keyboard("{Escape}")
 
-  await expect(single).toHaveValue("00:01:30.000")
+  await expect(single).toHaveValue("00:01:30")
 })
 
 test("the arrows step by stepMs, and Shift multiplies that by ten", async () => {
@@ -123,24 +122,24 @@ test("the arrows step by stepMs, and Shift multiplies that by ten", async () =>
   // than a draft the echo is reporting on.
   await waitFor(() => {
     expect(
-      canvas.getByText("Chosen: 00:00:01.000"),
+      canvas.getByText("Chosen: 00:00:01"),
     ).toBeInTheDocument()
   })
 
   await userEvent.keyboard("{Shift>}{ArrowUp}{/Shift}")
 
-  await expect(single).toHaveValue("00:00:11.000")
+  await expect(single).toHaveValue("00:00:11")
 
   await userEvent.keyboard("{ArrowDown}")
 
-  await expect(single).toHaveValue("00:00:10.000")
+  await expect(single).toHaveValue("00:00:10")
 
   // The floor is the start of the media, not a negative position.
   await userEvent.keyboard(
     "{Shift>}{ArrowDown}{ArrowDown}{/Shift}",
   )
 
-  await expect(single).toHaveValue("00:00:00.000")
+  await expect(single).toHaveValue("00:00:00")
 })
 
 test("a position past the end of the media says so, then commits clamped", async () => {
@@ -152,13 +151,13 @@ test("a position past the end of the media says so, then commits clamped", async
 
   await waitFor(() => {
     expect(
-      canvas.getByText(/commits as 00:45:12\.000/),
+      canvas.getByText(/commits as 00:45:12/),
     ).toBeInTheDocument()
   })
 
   await userEvent.keyboard("{Enter}")
 
-  await expect(single).toHaveValue("00:45:12.000")
+  await expect(single).toHaveValue("00:45:12")
 })
 
 test("an inverted section swaps, rather than throwing away the boundary just typed", async () => {
@@ -167,14 +166,12 @@ test("an inverted section swaps, rather than throwing away the boundary just typ
 
   await userEvent.click(end)
 
-  // The seeded start is 00:05:00.000, so this end sits before it.
+  // The seeded start is 00:05:00, so this end sits before it.
   await userEvent.type(end, "1:00{Enter}")
 
   await waitFor(() => {
     expect(
-      canvas.getByText(
-        "Chosen: 00:01:00.000 to 00:05:00.000",
-      ),
+      canvas.getByText("Chosen: 00:01:00 to 00:05:00"),
     ).toBeInTheDocument()
   })
 
@@ -200,7 +197,7 @@ test("a zero-length section is refused by name, because it plays nothing", async
   // The start is untouched and the end is still open — nothing was
   // committed, and the text is still what was typed.
   await expect(
-    canvas.getByText("Chosen: 00:05:00.000 to the end"),
+    canvas.getByText("Chosen: 00:05:00 to the end"),
   ).toBeInTheDocument()
 
   await expect(end).toHaveValue("5:00")
@@ -217,9 +214,7 @@ test("both ends are independently optional, and clearing one leaves the other al
 
   await waitFor(() => {
     expect(
-      canvas.getByText(
-        "Chosen: 00:05:00.000 to 00:10:00.000",
-      ),
+      canvas.getByText("Chosen: 00:05:00 to 00:10:00"),
     ).toBeInTheDocument()
   })
 
@@ -231,9 +226,7 @@ test("both ends are independently optional, and clearing one leaves the other al
 
   await waitFor(() => {
     expect(
-      canvas.getByText(
-        "Chosen: the beginning to 00:10:00.000",
-      ),
+      canvas.getByText("Chosen: the beginning to 00:10:00"),
     ).toBeInTheDocument()
   })
 })
@@ -260,20 +253,250 @@ test("the four states of a section all render as values, not as half-finished in
   ).toHaveLength(2)
 
   await expect(
-    canvas.getByText("Chosen: 00:05:00.000 to the end"),
+    canvas.getByText("Chosen: 00:05:00 to the end"),
   ).toBeInTheDocument()
 
   await expect(
-    canvas.getByText(
-      "Chosen: the beginning to 00:05:00.000",
-    ),
+    canvas.getByText("Chosen: the beginning to 00:05:00"),
   ).toBeInTheDocument()
 
   await expect(
-    canvas.getByText(
-      "Chosen: 00:05:00.000 to 00:15:00.000",
-    ),
+    canvas.getByText("Chosen: 00:05:00 to 00:15:00"),
+  ).toBeInTheDocument()
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("the echo is a reading of the focused field, so it leaves with the focus", async () => {
+  const { canvas, single } = await mountInteractive()
+
+  await userEvent.click(single)
+
+  await userEvent.type(single, "90")
+
+  await waitFor(() => {
+    expect(canvas.getByText("00:01:30")).toBeInTheDocument()
+  })
+
+  // Tab commits and takes the focus away. What is left underneath an
+  // idle field would be an unlabelled timecode, which reads as a
+  // stray value rather than as a report on the field above it.
+  await userEvent.tab()
+
+  await waitFor(() => {
+    expect(
+      canvas.queryByText("00:01:30"),
+    ).not.toBeInTheDocument()
+  })
+
+  // The value itself is untouched by any of that: the line is a
+  // reading, not the state.
+  await expect(single).toHaveValue("00:01:30")
+
+  await expect(
+    canvas.getByText("Chosen: 00:01:30"),
+  ).toBeInTheDocument()
+})
+
+test("an unparsed text keeps its refusal after the focus leaves, because the control is still invalid", async () => {
+  const { canvas, canvasElement, single } =
+    await mountInteractive()
+
+  await userEvent.click(single)
+
+  await userEvent.type(single, "1:90")
+
+  await userEvent.tab()
+
+  // `aria-invalid` survives the blur, so the sentence that says why
+  // has to survive it too. An invalid control with no message is
+  // worse than the stray line the test above removes.
+  await expect(single).toHaveAttribute(
+    "aria-invalid",
+    "true",
+  )
+
+  await expect(
+    canvas.getByText(/A minute has 60 seconds/),
   ).toBeInTheDocument()
 
+  await expect(single).toHaveValue("1:90")
+
   await expectNoAxeViolations(canvasElement)
 })
+
+test("a zero-length refusal is written at the commit, so it survives the blur that wrote it", async () => {
+  const { canvas, canvasElement, end } =
+    await mountInteractive()
+
+  await userEvent.click(end)
+
+  // The seeded start is 00:05:00, so this end has no length. Blur is
+  // the commit here, which is the case that would have hidden the
+  // complaint the instant it was made.
+  await userEvent.type(end, "5:00")
+
+  await userEvent.tab()
+
+  await waitFor(() => {
+    expect(
+      canvas.getByText(/A section needs a length/),
+    ).toBeInTheDocument()
+  })
+
+  await expect(end).toHaveAttribute("aria-invalid", "true")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+/**
+ * The container query, asserted rather than assumed — and the
+ * accessible name held identical across the two layouts it draws.
+ *
+ * The window never moves in this test. Each panel of the board is a
+ * fixed inline size around `--cq-sm`, which is the only honest way
+ * to exercise a query about the component's own box.
+ */
+test("the Narrow View stacks the two fields, and neither layout changes a control's name", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const narrowStart = expectAgentDrivable(canvas, {
+    name: "Section 15rem start",
+    role: "textbox",
+  })
+
+  const wideStart = expectAgentDrivable(canvas, {
+    name: "Section 34rem start",
+    role: "textbox",
+  })
+
+  expectAgentDrivable(canvas, {
+    name: "Section 15rem end",
+    role: "textbox",
+  })
+
+  expectAgentDrivable(canvas, {
+    name: "Section 34rem end",
+    role: "textbox",
+  })
+
+  const narrowRow = narrowStart.parentElement
+    ?.parentElement as HTMLElement
+
+  const wideRow = wideStart.parentElement
+    ?.parentElement as HTMLElement
+
+  await expect(
+    globalThis.getComputedStyle(narrowRow).flexDirection,
+  ).toBe("column")
+
+  await expect(
+    globalThis.getComputedStyle(wideRow).flexDirection,
+  ).toBe("row")
+
+  const [
+    narrowStartCaption,
+    narrowJoiner,
+    narrowEndCaption,
+  ] = Array.from(
+    narrowRow.querySelectorAll<HTMLElement>(
+      ":scope > * > span, :scope > span",
+    ),
+  )
+
+  const [wideStartCaption, wideJoiner, wideEndCaption] =
+    Array.from(
+      wideRow.querySelectorAll<HTMLElement>(
+        ":scope > * > span, :scope > span",
+      ),
+    )
+
+  // Narrow: two captions, no joining word.
+  await expect(narrowStartCaption).toHaveTextContent(
+    "Start",
+  )
+
+  await expect(narrowEndCaption).toHaveTextContent("End")
+
+  await expect(
+    globalThis.getComputedStyle(
+      narrowStartCaption as HTMLElement,
+    ).display,
+  ).not.toBe("none")
+
+  await expect(
+    globalThis.getComputedStyle(narrowJoiner as HTMLElement)
+      .display,
+  ).toBe("none")
+
+  // Wide: the joining word, no captions.
+  await expect(wideJoiner).toHaveTextContent("to")
+
+  await expect(
+    globalThis.getComputedStyle(wideJoiner as HTMLElement)
+      .display,
+  ).not.toBe("none")
+
+  await expect(
+    globalThis.getComputedStyle(
+      wideStartCaption as HTMLElement,
+    ).display,
+  ).toBe("none")
+
+  await expect(
+    globalThis.getComputedStyle(
+      wideEndCaption as HTMLElement,
+    ).display,
+  ).toBe("none")
+
+  // Every one of them is for the eye. A real `<label>` would name the
+  // start control a second time and fight the `id` a `Field` clones
+  // onto it, so nothing here is named "Start" or "End".
+  for (const caption of [
+    narrowStartCaption,
+    narrowJoiner,
+    narrowEndCaption,
+    wideStartCaption,
+    wideJoiner,
+    wideEndCaption,
+  ]) {
+    await expect(caption).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    )
+  }
+
+  await expect(
+    canvas.queryAllByRole("textbox", {
+      name: /^(Start|End)$/,
+    }),
+  ).toHaveLength(0)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("milliseconds are optional to read as well as to type", async () => {
+  const { canvas, single } = await mountInteractive()
+
+  await userEvent.click(single)
+
+  // No fraction typed, so no fraction written back. You write 3, not
+  // 3.000.
+  await userEvent.type(single, "10:00{Enter}")
+
+  await expect(single).toHaveValue("00:10:00")
+
+  await waitFor(() => {
+    expect(
+      canvas.getByText("Chosen: 00:10:00"),
+    ).toBeInTheDocument()
+  })
+
+  await userEvent.clear(single)
+
+  // A real fraction still prints in full, padded on the right.
+  await userEvent.type(single, "10:00.25{Enter}")
+
+  await expect(single).toHaveValue("00:10:00.250")
+})

package/src/TimecodeInput/TimecodeInput.tsx

@@ -64,6 +64,21 @@ const INPUT_CLASS =
 
 type Endpoint = "end" | "start"
 
+/**
+ * How this field prints, everywhere it prints — the text it writes
+ * back on commit, and the echo that reports what a draft resolves
+ * to. The two have to agree, so they read the same constant.
+ *
+ * `"auto"` rather than the exported default of three digits: a
+ * person who types `1:01:00` and tabs away did not ask for
+ * `01:01:00.000`, any more than typing `3` asks for `3.000`. A real
+ * fraction still prints in full, and the grammar reads both back to
+ * the same number.
+ */
+const DISPLAY_FORMAT = {
+  millisecondDigits: "auto",
+} as const
+
 const toSeededRange = (
   valueMs: number | TimecodeRange | undefined,
 ): TimecodeRange =>
@@ -117,6 +132,23 @@ const toSeededRange = (
  * discard the boundary just typed. A **zero-length** section is
  * refused by name: it plays nothing, so swapping would hide a typo
  * behind a window that silently does not exist.
+ *
+ * ### The Narrow View stacks the two fields
+ *
+ * Below `--cq-sm` a section is two fields one above the other, under
+ * the captions "Start" and "End"; above it, the row with `to`
+ * between them. It is a **container** query, so a 390px modal on a
+ * 2560px monitor gets the stacked form that a window breakpoint
+ * would have denied it. The captions are `aria-hidden`, so the
+ * accessible name of each control is the same in both layouts.
+ *
+ * ### Milliseconds are optional to read as well as to type
+ *
+ * The grammar has always accepted `1:01:00`. The field now writes it
+ * back as `01:01:00` rather than as `01:01:00.000`, through
+ * `formatTimecode`'s `millisecondDigits: "auto"`, because a fraction
+ * nobody typed is not information. `1:01:00.5` still commits as
+ * `01:01:00.500`.
  */
 export const TimecodeInput = ({
   className,
@@ -149,16 +181,29 @@ export const TimecodeInput = ({
   const toDisplayText = (milliseconds: null | number) =>
     milliseconds === null
       ? ""
-      : formatTimecode(milliseconds)
+      : formatTimecode(milliseconds, DISPLAY_FORMAT)
 
   const [texts, setTexts] = useState({
     end: toDisplayText(seededRange.end),
     start: toDisplayText(seededRange.start),
   })
 
+  /**
+   * Which endpoint the keyboard steps and the echo belong to. It
+   * SURVIVES blur, deliberately: a refusal has to keep naming the
+   * field it is about after the focus has gone somewhere else.
+   */
   const [activeEndpoint, setActiveEndpoint] =
     useState<Endpoint>("start")
 
+  /**
+   * Whether a field of this control holds the focus. Separate from
+   * `activeEndpoint` because the two answer different questions —
+   * *which* endpoint, and *whether anybody is typing* — and only the
+   * second one may hide the echo.
+   */
+  const [isFocused, setIsFocused] = useState(false)
+
   /**
    * A refusal the grammar cannot see, because it is about the
    * **pair** rather than about either text: a zero-length section.
@@ -355,14 +400,55 @@ export const TimecodeInput = ({
       : parsed.kind === "empty" || clampedPreview === null
         ? ""
         : clampedPreview === parsed.milliseconds
-          ? formatTimecode(parsed.milliseconds)
-          : `${formatTimecode(parsed.milliseconds)} is outside the media, so it commits as ${formatTimecode(clampedPreview)}.`
+          ? formatTimecode(
+              parsed.milliseconds,
+              DISPLAY_FORMAT,
+            )
+          : `${formatTimecode(parsed.milliseconds, DISPLAY_FORMAT)} is outside the media, so it commits as ${formatTimecode(clampedPreview, DISPLAY_FORMAT)}.`
 
-  const echoText = rangeRefusal ?? parsedEcho
+  /**
+   * A restatement is a reading of the field above it, so it leaves
+   * with the focus. Left up, an unlabelled `00:05:00` under an idle
+   * control reads as a stray value rather than as a report on one.
+   *
+   * A REFUSAL stays, and both kinds do. `rangeRefusal` is set on
+   * commit — which is exactly blur — so a rule that hid it on blur
+   * would mean it was never readable at all. And an unparsed text
+   * keeps `aria-invalid` on the control, so the sentence saying why
+   * has to stay with it: an invalid field with no message is worse
+   * than the stray line this removes.
+   *
+   * Emptying a live region announces nothing, so the blur costs a
+   * screen reader no chatter.
+   */
+  const echoText =
+    rangeRefusal ??
+    (isFocused || parsed.kind === "unparsed"
+      ? parsedEcho
+      : "")
 
   const isInvalid =
     rangeRefusal !== null || parsed.kind === "unparsed"
 
+  /**
+   * The Narrow View's caption over one field.
+   *
+   * Presentational, and `aria-hidden` for the same reason the word
+   * `to` is: each input already carries
+   * `aria-label="<label> <endpoint>"`, and a real `<label>` here
+   * would name the start control a second time and fight the `id` a
+   * `Field` above clones onto it. The eye gets a caption; the
+   * accessible name is the same in both layouts.
+   */
+  const renderCaption = (text: string) => (
+    <span
+      aria-hidden="true"
+      className="text-content-secondary text-sm cq-sm:hidden"
+    >
+      {text}
+    </span>
+  )
+
   const renderInput = (endpoint: Endpoint) => {
     const ownProps = {
       "aria-describedby": echoId,
@@ -398,6 +484,8 @@ export const TimecodeInput = ({
       // rather than by a keyboard the field cannot choose.
       inputMode: "numeric" as const,
       onBlur: () => {
+        setIsFocused(false)
+
         commitText(endpoint)
       },
       onChange: (changeEvent: {
@@ -417,6 +505,8 @@ export const TimecodeInput = ({
         }))
       },
       onFocus: () => {
+        setIsFocused(true)
+
         setActiveEndpoint(endpoint)
       },
       onKeyDown: (
@@ -444,28 +534,49 @@ export const TimecodeInput = ({
   }
 
   return (
+    // `@container` here, not on a wrapper: the box a caller sized is
+    // the box that either has room for two timecodes side by side or
+    // does not. A viewport breakpoint reads that backwards — a 390px
+    // modal on a 2560px monitor is a Wide View by the window and a
+    // Narrow View by every measurement that matters. The cost is the
+    // `contain: inline-size` that rides along with it, so this field
+    // takes its width from its parent rather than from its content:
+    // give it a definite inline size, as every container-query
+    // component in this library needs.
     <div
       className={toClassName(
-        "flex flex-col gap-1",
+        "@container flex flex-col gap-1",
         className,
       )}
     >
-      <div className="flex items-center gap-2">
-        {renderInput("start")}
-
-        {isRange ? (
-          <>
-            <span
-              aria-hidden="true"
-              className="shrink-0 text-content-secondary text-sm"
-            >
-              to
-            </span>
+      {isRange ? (
+        // Below `--cq-sm` the two fields STACK, each under a caption
+        // of its own, because `hh:mm:ss.mmm` twice and the word
+        // between them fills a phone-width modal edge to edge with
+        // no slack left. Above it, the row is unchanged.
+        <div className="flex flex-col gap-2 cq-sm:flex-row cq-sm:items-center cq-sm:gap-2">
+          <div className="flex min-w-0 flex-col gap-1 cq-sm:flex-1">
+            {renderCaption("Start")}
+
+            {renderInput("start")}
+          </div>
+
+          <span
+            aria-hidden="true"
+            className="hidden shrink-0 text-content-secondary text-sm cq-sm:inline"
+          >
+            to
+          </span>
+
+          <div className="flex min-w-0 flex-col gap-1 cq-sm:flex-1">
+            {renderCaption("End")}
 
             {renderInput("end")}
-          </>
-        ) : null}
-      </div>
+          </div>
+        </div>
+      ) : (
+        renderInput("start")
+      )}
 
       {/*
         The anti-silent-guess mechanism, and the reason this field is

package/src/TimecodeInput/timecode.test.ts

@@ -210,6 +210,49 @@ test("millisecondDigits truncates rather than rounding, because a position is no
   ).toBe("00:00:01")
 })
 
+test('millisecondDigits "auto" prints the fraction only when there is one', () => {
+  // The complaint this answers: typing `1:01:00` and tabbing away
+  // rewrote the field to `01:01:00.000`. You write 3, not 3.000.
+  expect(
+    formatTimecode(3_660_000, {
+      millisecondDigits: "auto",
+    }),
+  ).toBe("01:01:00")
+
+  // A real fraction still prints in full, at the same three digits.
+  expect(
+    formatTimecode(3_660_500, {
+      millisecondDigits: "auto",
+    }),
+  ).toBe("01:01:00.500")
+
+  expect(
+    formatTimecode(1, { millisecondDigits: "auto" }),
+  ).toBe("00:00:00.001")
+
+  expect(
+    formatTimecode(0, { millisecondDigits: "auto" }),
+  ).toBe("00:00:00")
+
+  // Both spellings read back to the number that produced them, so
+  // the shorter one costs the round trip nothing.
+  expect(parsedMilliseconds("01:01:00")).toBe(3_660_000)
+  expect(parsedMilliseconds("01:01:00.500")).toBe(3_660_500)
+
+  // It composes with the other option rather than replacing it.
+  expect(
+    formatTimecode(90_000, {
+      isHoursShown: false,
+      millisecondDigits: "auto",
+    }),
+  ).toBe("01:30")
+})
+
+test("the DEFAULT is still three digits, because a published export is read by callers this change never saw", () => {
+  expect(formatTimecode(3_660_000)).toBe("01:01:00.000")
+  expect(formatTimecode(90_000)).toBe("00:01:30.000")
+})
+
 test("formatTimecode refuses to print a position that does not exist", () => {
   expect(formatTimecode(-5_000)).toBe("00:00:00.000")
   expect(formatTimecode(Number.NaN)).toBe("00:00:00.000")

package/src/TimecodeInput/timecode.ts

@@ -90,8 +90,17 @@ export type FormatTimecodeOptions = {
    * unchanged because the largest field present is unbounded.
    */
   isHoursShown?: boolean
-  /** `0` through `3`. `0` drops the fraction and its separator. */
-  millisecondDigits?: number
+  /**
+   * `0` through `3`. `0` drops the fraction and its separator.
+   *
+   * `"auto"` prints the fraction only when there is one to print: a
+   * whole number of seconds comes back as `01:01:00`, and half a
+   * second more comes back as `01:01:00.500`. It is how a decimal
+   * number is written everywhere else — you write `3`, not `3.000` —
+   * and the grammar reads both spellings back to the number that
+   * produced them, because its fraction is optional.
+   */
+  millisecondDigits?: "auto" | number
 }
 
 const padTwo = (value: number) =>
@@ -105,12 +114,16 @@ const padTwo = (value: number) =>
  * because it has not reached second 2 yet. Rounding would print a
  * seek point the media has not played.
  *
- * The default is the canonical `hh:mm:ss.mmm`, and that is what the
- * field writes back on commit. One spelling means a re-read of the
- * field parses to the number that produced it, and a screenshot of
- * the same value is the same picture — neither of which is true of
- * the fleet's five printers, three of which hide the hour and two of
- * which do not pad the minute.
+ * The default is the canonical `hh:mm:ss.mmm`. `TimecodeInput` asks
+ * for `millisecondDigits: "auto"` instead, so a whole second is
+ * written back as `01:01:00` rather than as `01:01:00.000` — a
+ * person who typed no fraction did not ask for one, and both
+ * spellings re-read to the number that produced them.
+ *
+ * Either way it is ONE spelling per value, which is what the fleet's
+ * five printers never were: three of them hide the hour and two do
+ * not pad the minute, so the same position is a different picture in
+ * each app.
  */
 export const formatTimecode = (
   milliseconds: number,
@@ -123,10 +136,15 @@ export const formatTimecode = (
     ? Math.max(0, Math.floor(milliseconds))
     : 0
 
-  const digits = Math.min(
-    3,
-    Math.max(0, Math.floor(millisecondDigits)),
-  )
+  const digits =
+    millisecondDigits === "auto"
+      ? total % MILLISECONDS_PER_SECOND === 0
+        ? 0
+        : 3
+      : Math.min(
+          3,
+          Math.max(0, Math.floor(millisecondDigits)),
+        )
 
   const hours = isHoursShown
     ? Math.floor(total / MILLISECONDS_PER_HOUR)

package/src/sourceRules.test.ts

@@ -251,6 +251,13 @@ test("a container-query component is never storied in a shrink-to-fit cell", ()
     // measured in Docket, before any of the steps contained
     // anything.
     "Stepper",
+    // `TimecodeInput` queries its own box to decide whether a section
+    // is `[start] to [end]` in a row or two captioned fields stacked.
+    // The width that decides it is a modal's, not a window's: the
+    // report came from a 390px dialog, and the same dialog on a
+    // 2560px monitor is the Wide View by every media query and the
+    // Narrow View by the only measurement that matters.
+    "TimecodeInput",
   ])
 
   // `StoryCell`s are never nested, so the lazy match really does