@design-edito/tools 0.5.14 → 0.5.15

package/agnostic/time/dates/format-date/types.d.ts

@@ -1,21 +1,21 @@
 /** Every token `formatDate` substitutes in a template. */
-export type DateToken = 'D' | 'DD' | 'd' | 'dd' | 'M' | 'MM' | 'MMM' | 'MMMM' | 'YY' | 'YYYY' | 'H' | 'HH' | 'h' | 'hh' | 'm' | 'mm' | 's' | 'ss' | 'ms' | 'A' | 'a' | 'th';
+export type DateToken = 'D' | 'DD' | 'd' | 'dd' | 'ddd' | 'dddd' | 'M' | 'MM' | 'MMM' | 'MMMM' | 'YY' | 'YYYY' | 'H' | 'HH' | 'h' | 'hh' | 'm' | 'mm' | 's' | 'ss' | 'ms' | 'A' | 'a' | 'th';
 /**
  * A date's parts, keyed by unit token.
  *
  * Quantities are **numbers** — a day of month is `1`, not `'01'`. Padding and
  * truncation are rendering concerns and belong to `formatDate`, which is why the
- * `DD`, `MM`, `YY`, `HH`, `hh`, `mm` and `ss` tokens have no entry here: they
- * render the same quantity as their unpadded twin. The parts that are localised
- * text rather than a quantity stay strings.
+ * `d`, `dd`, `DD`, `MM`, `YY`, `HH`, `hh`, `mm` and `ss` tokens have no entry
+ * here: they render the same quantity as the bare token they double. The parts
+ * that are localised text rather than a quantity stay strings.
  */
 export type DateTokenParts = {
-    /** Day of month, 1–31. */
+    /** Day of month, 1–31. Rendered by `D`, `DD`, `d` and `dd` alike. */
     D: number;
     /** Short weekday name, localised. */
-    d: string;
+    ddd: string;
     /** Full weekday name, localised. */
-    dd: string;
+    dddd: string;
     /** Month number, 1–12 — January is `1`, not `0`. */
     M: number;
     /** Short month name, localised. */
@@ -51,9 +51,9 @@ export type DateTokenParts = {
 export type NamedDateParts = {
     /** {@link DateTokenParts.D} */
     dayOfMonth: number;
-    /** {@link DateTokenParts.d} */
+    /** {@link DateTokenParts.ddd} */
     shortWeekdayName: string;
-    /** {@link DateTokenParts.dd} */
+    /** {@link DateTokenParts.dddd} */
     fullWeekdayName: string;
     /** {@link DateTokenParts.M} */
     monthNumber: number;

package/agnostic/time/duration/format-duration/index.d.ts

@@ -19,14 +19,31 @@ import type { FormatDurationOptions } from './types.js';
  * - `m` / `mm` : Minutes
  * - `s` / `ss` : Seconds
  * - `ms` : Milliseconds, padded to three digits
+ * - `f` / `ff` : The millisecond part counted in frames, at `options.fps`
  *
  * @param duration - The duration to format, as a {@link Duration} or a number of
  * milliseconds.
  * @param format - The template string containing tokens.
- * @param options - How to handle the remainder and the month/year approximation.
+ * @param options - How to handle the remainder, the month/year approximation and
+ * the frame rate.
  * @returns Formatted duration string. An unknown token is left untouched, braces
  * included.
  * @see {@link getDurationParts} to reach the same parts as plain values.
+ * @see {@link formatDate} — the same template grammar, for a point in time rather
+ * than a length of it.
+ *
+ * @remarks
+ * This function and `formatDate` share one grammar: `{{…}}` delimiters, everything
+ * outside them literal, the bare token being the plain number and the doubled one
+ * that same number padded to two digits, `ms` padded to three, and an unknown token
+ * left as written. No token means two different kinds of thing across the two.
+ *
+ * @remarks
+ * **The template decides the breakdown, so nothing is ever lost for not having been
+ * asked for.** `'{{w}}w {{h}}h'` counts hours up to 167 because the week is there and
+ * the day is not; `'{{mm}}:{{ss}}'` on an hour-long video reads `62:05` rather than
+ * dropping the hour. The single-unit case follows from the same rule: `'{{s}}s'`
+ * carries the whole duration.
  *
  * @remarks
  * A negative duration yields negative parts, so every token renders a signed

package/agnostic/time/duration/format-duration/index.js

@@ -1,8 +1,14 @@
 import { getDurationParts } from './parts.js';
 // Alternation is ordered, and the first branch that fits wins — so the longest
 // tokens come first. `m` ahead of `ms` or `mm` would swallow them.
-const tokenRegexp = /\{\{(YY|MM|ww|dd|hh|mm|ss|ms|Y|M|w|d|h|m|s)\}\}/gv;
-/** Which tokens read which unit, longest unit first. */
+const tokenRegexp = /\{\{(YY|MM|ww|dd|hh|mm|ss|ms|ff|Y|M|w|d|h|m|s|f)\}\}/gv;
+/**
+ * Which tokens read which unit, longest unit first.
+ *
+ * `f` and `ff` sit under `ms` rather than under a unit of their own: a frame is
+ * the millisecond part counted in another base, so a template asking for frames
+ * is a template asking the cascade to run down to milliseconds.
+ */
 const unitTokens = [
     ['Y', ['Y', 'YY']],
     ['M', ['M', 'MM']],
@@ -11,7 +17,7 @@ const unitTokens = [
     ['h', ['h', 'hh']],
     ['m', ['m', 'mm']],
     ['s', ['s', 'ss']],
-    ['ms', ['ms']]
+    ['ms', ['ms', 'f', 'ff']]
 ];
 function pad(value, length) {
     return `${value}`.padStart(length, '0');
@@ -36,8 +42,22 @@ const renderers = {
     'mm': parts => pad(parts.m, 2),
     's': parts => `${parts.s}`,
     'ss': parts => pad(parts.s, 2),
-    'ms': parts => pad(parts.ms, 3)
+    'ms': parts => pad(parts.ms, 3),
+    'f': (parts, fps) => `${toFrames(parts.ms, fps)}`,
+    'ff': (parts, fps) => pad(toFrames(parts.ms, fps), 2)
 };
+/**
+ * The millisecond part counted in frames.
+ *
+ * Truncated rather than rounded: a frame is only reached once it has fully
+ * elapsed, so 39 ms at 25 fps is frame `0`, not frame `1`. The sign is carried
+ * around the truncation, so a negative part stays negative — the whole function
+ * keeps a duration's parts faithful rather than tidying them.
+ */
+function toFrames(ms, fps) {
+    const sign = ms < 0 ? -1 : 1;
+    return Math.floor(Math.abs(ms) / 1000 * fps) * sign;
+}
 /** The units a template asks for, read off the tokens it actually uses. */
 function unitsInFormat(format) {
     return unitTokens
@@ -63,14 +83,31 @@ function unitsInFormat(format) {
  * - `m` / `mm` : Minutes
  * - `s` / `ss` : Seconds
  * - `ms` : Milliseconds, padded to three digits
+ * - `f` / `ff` : The millisecond part counted in frames, at `options.fps`
  *
  * @param duration - The duration to format, as a {@link Duration} or a number of
  * milliseconds.
  * @param format - The template string containing tokens.
- * @param options - How to handle the remainder and the month/year approximation.
+ * @param options - How to handle the remainder, the month/year approximation and
+ * the frame rate.
  * @returns Formatted duration string. An unknown token is left untouched, braces
  * included.
  * @see {@link getDurationParts} to reach the same parts as plain values.
+ * @see {@link formatDate} — the same template grammar, for a point in time rather
+ * than a length of it.
+ *
+ * @remarks
+ * This function and `formatDate` share one grammar: `{{…}}` delimiters, everything
+ * outside them literal, the bare token being the plain number and the doubled one
+ * that same number padded to two digits, `ms` padded to three, and an unknown token
+ * left as written. No token means two different kinds of thing across the two.
+ *
+ * @remarks
+ * **The template decides the breakdown, so nothing is ever lost for not having been
+ * asked for.** `'{{w}}w {{h}}h'` counts hours up to 167 because the week is there and
+ * the day is not; `'{{mm}}:{{ss}}'` on an hour-long video reads `62:05` rather than
+ * dropping the hour. The single-unit case follows from the same rule: `'{{s}}s'`
+ * carries the whole duration.
  *
  * @remarks
  * A negative duration yields negative parts, so every token renders a signed
@@ -84,11 +121,11 @@ function unitsInFormat(format) {
  * // => "1:02:05"
  */
 export function formatDuration(duration, format, options = {}) {
-    const { floorSmallestUnit = true, useApproximateMonthAndYear = true } = options;
+    const { floorSmallestUnit = true, useApproximateMonthAndYear = true, fps = 25 } = options;
     const parts = getDurationParts(duration, {
         units: unitsInFormat(format),
         floorSmallestUnit,
         useApproximateMonthAndYear
     });
-    return format.replace(tokenRegexp, (_match, token) => renderers[token](parts));
+    return format.replace(tokenRegexp, (_match, token) => renderers[token](parts, fps));
 }

package/agnostic/time/duration/format-duration/index.test.js

@@ -53,6 +53,33 @@ describe('formatDuration', () => {
             expect(formatDuration(seconds(-90), '{{m}}:{{ss}}')).toBe('-1:-30');
         });
     });
+    describe('frames', () => {
+        it('counts the sub-second remainder in frames, at 25 fps by default', () => {
+            expect(formatDuration(3725240, '{{mm}}:{{ss}}.{{ff}}')).toBe('62:05.06');
+            expect(formatDuration(3725240, '{{mm}}:{{ss}}.{{f}}')).toBe('62:05.6');
+        });
+        it('counts in the frame rate it is given', () => {
+            expect(formatDuration(3725240, '{{ss}}.{{ff}}', { fps: 50 })).toBe('3725.12');
+        });
+        // A frame is reached once it has fully elapsed, so the 40th millisecond is
+        // where frame 1 starts at 25 fps — not the 39th.
+        it('truncates rather than rounds to the frame', () => {
+            expect(formatDuration(39, '{{s}}.{{ff}}')).toBe('0.00');
+            expect(formatDuration(40, '{{s}}.{{ff}}')).toBe('0.01');
+        });
+        // Frames are milliseconds in another base, so they pull the cascade down to
+        // milliseconds exactly as `{{ms}}` would — without needing `{{ms}}` written.
+        it('runs the cascade down to milliseconds without a ms token', () => {
+            expect(formatDuration(3725240, '{{ss}}')).toBe('3725');
+            expect(formatDuration(3725240, '{{ss}}.{{ff}}')).toBe('3725.06');
+        });
+        it('puts the whole duration on frames when it is the only token', () => {
+            expect(formatDuration(seconds(2), '{{f}}')).toBe('50');
+        });
+        it('signs a frame count like every other part', () => {
+            expect(formatDuration(-240, '{{s}}.{{f}}')).toBe('0.-6');
+        });
+    });
 });
 describe('getDurationParts', () => {
     describe('breakdown', () => {

package/agnostic/time/duration/format-duration/types.d.ts

@@ -4,7 +4,7 @@
  */
 export type DurationUnit = 'ms' | 's' | 'm' | 'h' | 'd' | 'w' | 'M' | 'Y';
 /** Every token `formatDuration` substitutes in a template. */
-export type DurationToken = 'Y' | 'YY' | 'M' | 'MM' | 'w' | 'ww' | 'd' | 'dd' | 'h' | 'hh' | 'm' | 'mm' | 's' | 'ss' | 'ms';
+export type DurationToken = 'Y' | 'YY' | 'M' | 'MM' | 'w' | 'ww' | 'd' | 'dd' | 'h' | 'hh' | 'm' | 'mm' | 's' | 'ss' | 'ms' | 'f' | 'ff';
 /** Options for `getDurationParts`. */
 export type GetDurationPartsOptions = {
     /**
@@ -25,6 +25,16 @@ export type GetDurationPartsOptions = {
      * 365.2425 days and a month of exactly a twelfth of it.
      */
     useApproximateMonthAndYear?: boolean;
+    /**
+     * Frame rate the `f` and `ff` tokens count in. Defaults to `25`.
+     *
+     * Frames are a *rendering* of the millisecond part, not a unit of their own —
+     * they never appear in {@link DurationParts}, and a template asking for them
+     * asks for milliseconds under another base. So `'{{ss}}.{{ff}}'` reads the
+     * sub-second remainder, while `'{{f}}'` alone puts the whole duration on
+     * frames, exactly as `'{{ms}}'` alone puts it on milliseconds.
+     */
+    fps?: number;
 };
 /**
  * A duration's parts, keyed by unit token.
@@ -90,4 +100,14 @@ export type FormatDurationOptions = {
      * 365.2425 days and a month of exactly a twelfth of it.
      */
     useApproximateMonthAndYear?: boolean;
+    /**
+     * Frame rate the `f` and `ff` tokens count in. Defaults to `25`.
+     *
+     * Frames are a *rendering* of the millisecond part, not a unit of their own —
+     * they never appear in {@link DurationParts}, and a template asking for them
+     * asks for milliseconds under another base. So `'{{ss}}.{{ff}}'` reads the
+     * sub-second remainder, while `'{{f}}'` alone puts the whole duration on
+     * frames, exactly as `'{{ms}}'` alone puts it on milliseconds.
+     */
+    fps?: number;
 };

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
+export * as timeout from './timeout/index.js'
 export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
-export * as timeout from './timeout/index.js'
-export * as wait from './wait/index.js'
 export * as transitions from './transitions/index.js'
+export * as wait from './wait/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
+export * as timeout from './timeout/index.js'
 export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
-export * as timeout from './timeout/index.js'
-export * as wait from './wait/index.js'
 export * as transitions from './transitions/index.js'
+export * as wait from './wait/index.js'

package/components/Video/index.controlled.d.ts

@@ -85,12 +85,17 @@ type TrackData = {
  * fullscreen on its own — pressing Escape, typically — with the new state. This is
  * the signal a parent needs to update its `fullscreen` prop, and it is distinct
  * from `onIsFullscreenChanged`, which merely echoes that prop back once changed.
- * @property timeFormat - How the two clocks are written, as a {@link formatTime}
+ * @property timeFormat - How the two clocks are written, as a {@link formatDuration}
  * pattern. Tokens go in `{{…}}` and the rest is literal, so `'{{m}} min {{ss}}'` is a
  * valid answer. Defaults to `'{{mm}}:{{ss}}:{{ms}}'` — milliseconds included, which is
  * what a cutting room wants and almost never what an article does: `'{{mm}}:{{ss}}'` is
- * the usual one. Frames (`{{frame}}`, `{{f}}`) are derived at 25 fps, not configurable
+ * the usual one. Frames (`{{f}}`, `{{ff}}`) are derived at 25 fps, not configurable
  * here.
+ *
+ * The pattern decides how the duration is split: the units it names are the units it
+ * gets, each taking its whole part and handing the rest down. So `'{{mm}}:{{ss}}'` on
+ * an hour-long video reads `62:05` rather than dropping the hour — nothing is ever
+ * lost for not having been asked for.
  * @property className - Additional CSS class for the root element.
  * @property children - React content inserted into the <video> tag (fallback, etc).
  *

package/components/Video/index.controlled.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
+import { formatDuration } from '../../agnostic/time/duration/format-duration/index.js';
 import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import cssModule from './styles.module.css';
 import { video as publicClassName } from '../public-classnames.js';
 import { Subtitles } from '../Subtitles/index.js';
-import { forceExitFullscreen, forceFullscreen, forceLoud, forceMute, forcePause, forcePlay, forcePlaybackRate, forceVolume, formatTime, getTimelineClickProgress, msToSeconds, secondsToMs } from './utils.js';
+import { forceExitFullscreen, forceFullscreen, forceLoud, forceMute, forcePause, forcePlay, forcePlaybackRate, forceVolume, getTimelineClickProgress, msToSeconds, secondsToMs } from './utils.js';
 /**
  * Full-featured video player component. Wraps a native `<video>` element with
  * playback controls, volume, playback rate, a timeline, optional subtitles
@@ -306,5 +307,5 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
                         ? _jsx("source", { src: source }, index)
                         : _jsx("source", { src: source.src, type: source.type }, index)), parsedTracks.map((track, index) => typeof track === 'string'
                         ? _jsx("track", { src: track }, index)
-                        : _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: 'range', className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: Math.round(volumePercent) }), _jsx("button", { className: fullscreenBtnClss, onClick: handleFullscreenButtonClick, children: fullscreenBtnContent }), _jsx("input", { type: 'range', className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatTime(currentTimeMs, timeFormat) }), _jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, timeFormat) }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs, isEnded: isEnded })] });
+                        : _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: 'range', className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: Math.round(volumePercent) }), _jsx("button", { className: fullscreenBtnClss, onClick: handleFullscreenButtonClick, children: fullscreenBtnContent }), _jsx("input", { type: 'range', className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatDuration(currentTimeMs, timeFormat) }), _jsx("span", { className: totalTimeClss, children: formatDuration(totalTimeMs, timeFormat) }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs, isEnded: isEnded })] });
 };

package/components/Video/utils.d.ts

@@ -20,37 +20,6 @@ export declare const forceFullscreen: (video: HTMLVideoElement | null) => Promis
 export declare const forceExitFullscreen: (video: HTMLVideoElement | null) => Promise<boolean>;
 export declare function secondsToMs(seconds: number): number;
 export declare function msToSeconds(ms: number): number;
-/** The fields {@link formatTime} knows how to render. */
-export type TimeToken = 'hh' | 'mm' | 'ss' | 'ms' | 'frame' | 'h' | 'm' | 's' | 'f';
-/**
- * Renders a duration into a caller-defined pattern.
- *
- * Tokens are wrapped in `{{…}}` and everything outside them is literal, so a pattern
- * may carry words: `'{{m}} min {{ss}}'` renders as `'1 min 05'`.
- *
- * - `{{hh}}`, `{{mm}}`, `{{ss}}` — hours, minutes and seconds, zero-padded to two digits.
- * - `{{ms}}` — the remaining milliseconds, zero-padded to three digits.
- * - `{{frame}}` — those milliseconds expressed in frames, zero-padded to two digits.
- * - `{{h}}`, `{{m}}`, `{{s}}`, `{{f}}` — the same four values, unpadded.
- *
- * @param ms - The duration, in milliseconds.
- * @param format - The pattern to fill, e.g. `'{{mm}}:{{ss}}'`.
- * @param fps - Frame rate used to derive the `frame` and `f` tokens. Defaults to `25`.
- * @returns The formatted duration. An unknown token is left as written, braces
- *   included, rather than silently blanked — a typo has to be visible.
- *
- * @remarks
- * Every field is a remainder of the one above it, never a total: at one hour and a half,
- * `{{mm}}` is `30`, not `90`. A pattern that omits `{{hh}}` therefore loses the hours
- * rather than folding them into the minutes.
- *
- * **The delimiters are what make the pattern free-form.** Until they existed, `h`, `m`,
- * `s` and `f` were tokens on their own and every occurrence of those letters was
- * substituted wherever it sat — `'mm min ss'` rendered as `'01 1in 01'`, so a pattern
- * could only ever separate its fields with punctuation. That is why the format could not
- * be exposed as a prop: doing so would have published the trap.
- */
-export declare function formatTime(ms: number, format: string, fps?: number): string;
 /**
  * Where along the timeline a click landed.
  *

package/components/Video/utils.js

@@ -107,64 +107,6 @@ export function secondsToMs(seconds) {
 export function msToSeconds(ms) {
     return ms / 1000;
 }
-// Alternation is ordered and the first branch that fits wins, so the longest tokens
-// come first — the same regexp shape, and the same reason, as
-// `agnostic/time/dates/format-date`.
-const timeTokenRegexp = /\{\{(frame|hh|mm|ss|ms|h|m|s|f)\}\}/gv;
-/**
- * Renders a duration into a caller-defined pattern.
- *
- * Tokens are wrapped in `{{…}}` and everything outside them is literal, so a pattern
- * may carry words: `'{{m}} min {{ss}}'` renders as `'1 min 05'`.
- *
- * - `{{hh}}`, `{{mm}}`, `{{ss}}` — hours, minutes and seconds, zero-padded to two digits.
- * - `{{ms}}` — the remaining milliseconds, zero-padded to three digits.
- * - `{{frame}}` — those milliseconds expressed in frames, zero-padded to two digits.
- * - `{{h}}`, `{{m}}`, `{{s}}`, `{{f}}` — the same four values, unpadded.
- *
- * @param ms - The duration, in milliseconds.
- * @param format - The pattern to fill, e.g. `'{{mm}}:{{ss}}'`.
- * @param fps - Frame rate used to derive the `frame` and `f` tokens. Defaults to `25`.
- * @returns The formatted duration. An unknown token is left as written, braces
- *   included, rather than silently blanked — a typo has to be visible.
- *
- * @remarks
- * Every field is a remainder of the one above it, never a total: at one hour and a half,
- * `{{mm}}` is `30`, not `90`. A pattern that omits `{{hh}}` therefore loses the hours
- * rather than folding them into the minutes.
- *
- * **The delimiters are what make the pattern free-form.** Until they existed, `h`, `m`,
- * `s` and `f` were tokens on their own and every occurrence of those letters was
- * substituted wherever it sat — `'mm min ss'` rendered as `'01 1in 01'`, so a pattern
- * could only ever separate its fields with punctuation. That is why the format could not
- * be exposed as a prop: doing so would have published the trap.
- */
-export function formatTime(ms, format, fps = 25) {
-    const totalSeconds = Math.floor(ms / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = Math.floor(totalSeconds % 60);
-    const frames = Math.floor(((ms % 1000) / 1000) * fps);
-    const msRest = Math.floor(ms % 1000);
-    // Typed by {@link TimeToken} so the table and the regexp above cannot fall out of step,
-    // then read through a widened view: the capture is a `string` as far as the compiler
-    // knows, and widening is what lets it be looked up without asserting it back.
-    const tokens = {
-        hh: String(hours).padStart(2, '0'),
-        mm: String(minutes).padStart(2, '0'),
-        ss: String(seconds).padStart(2, '0'),
-        frame: String(frames).padStart(2, '0'),
-        ms: String(msRest).padStart(3, '0'),
-        h: String(hours),
-        m: String(minutes),
-        s: String(seconds),
-        f: String(frames)
-    };
-    const byName = tokens;
-    // One pass, so a rendered value can never be re-read as a token by a later pass — the
-    // reason the old implementation had to sort its keys by length.
-    return format.replace(timeTokenRegexp, (whole, token) => byName[token] ?? whole);
-}
 /**
  * Where along the timeline a click landed.
  *

package/components/index.d.ts

@@ -8,8 +8,8 @@ export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'
-export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
+export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
@@ -17,8 +17,8 @@ export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
-export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
+export * as select from './Select/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'

package/components/index.js

@@ -8,8 +8,8 @@ export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'
-export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
+export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
@@ -17,8 +17,8 @@ export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
-export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
+export * as select from './Select/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'

package/node/@aws-s3/storage/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/@aws-s3/storage/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/@aws-s3/storage/file/index.d.ts

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
+export * as copy from './copy/index.js'
 export * as exists from './exists/index.js'
-export * as remove from './remove/index.js'
 export * as move from './move/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'

package/node/@aws-s3/storage/file/index.js

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
+export * as copy from './copy/index.js'
 export * as exists from './exists/index.js'
-export * as remove from './remove/index.js'
 export * as move from './move/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'

package/node/@aws-s3/storage/index.d.ts

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/@aws-s3/storage/index.js

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/@google-cloud/storage/file/index.d.ts

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
-export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
+export * as exists from './exists/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as remove from './remove/index.js'
 export * as move from './move/index.js'
-export * as stat from './stat/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
-export * as upload from './upload/index.js'
+export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'
+export * as upload from './upload/index.js'

package/node/@google-cloud/storage/file/index.js

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
-export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
+export * as exists from './exists/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as remove from './remove/index.js'
 export * as move from './move/index.js'
-export * as stat from './stat/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
-export * as upload from './upload/index.js'
+export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'
+export * as upload from './upload/index.js'

package/node/cloud-storage/operations/index.d.ts

@@ -1,11 +1,11 @@
-export * as copyFile from './copy-file/index.js'
 export * as copyDir from './copy-dir/index.js'
+export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
-export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as listDir from './list-dir/index.js'
 export * as moveFile from './move-file/index.js'
 export * as removeDir from './remove-dir/index.js'
-export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'
+export * as removeFile from './remove-file/index.js'

package/node/cloud-storage/operations/index.js

@@ -1,11 +1,11 @@
-export * as copyFile from './copy-file/index.js'
 export * as copyDir from './copy-dir/index.js'
+export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
-export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as listDir from './list-dir/index.js'
 export * as moveFile from './move-file/index.js'
 export * as removeDir from './remove-dir/index.js'
-export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'
+export * as removeFile from './remove-file/index.js'

package/node/encryption/@aes-256-gcm/index.d.ts

@@ -1,2 +1,2 @@
-export * as uint8Array from './uint8-array/index.js'
 export * as buffer from './buffer/index.js'
+export * as uint8Array from './uint8-array/index.js'

package/node/encryption/@aes-256-gcm/index.js

@@ -1,2 +1,2 @@
-export * as uint8Array from './uint8-array/index.js'
 export * as buffer from './buffer/index.js'
+export * as uint8Array from './uint8-array/index.js'

package/node/files/index.d.ts

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as readWrite from './read-write/index.js'
 export * as subpaths from './subpaths/index.js'
+export * as readWrite from './read-write/index.js'

package/node/files/index.js

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as readWrite from './read-write/index.js'
 export * as subpaths from './subpaths/index.js'
+export * as readWrite from './read-write/index.js'

package/node/ftps/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/ftps/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/ftps/file/index.d.ts

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
+export * as copy from './copy/index.js'
 export * as exists from './exists/index.js'
-export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as move from './move/index.js'
 export * as upload from './upload/index.js'