@design-edito/tools 0.5.13 → 0.5.15

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 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 transitions from './transitions/index.js'
 export * as wait from './wait/index.js'

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

@@ -85,6 +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 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 (`{{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).
  *
@@ -105,6 +116,7 @@ export type Props = PropsWithChildren<WithClassName<{
     mute?: boolean;
     playbackRate?: number;
     currentTimeMs?: number;
+    timeFormat?: string;
     onPlayButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isPlaying: boolean, video: HTMLVideoElement | null) => void;
     onPauseButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isPlaying: boolean, video: HTMLVideoElement | null) => void;
     onLoudButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isLoud: boolean, video: HTMLVideoElement | null) => void;

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
@@ -49,7 +50,11 @@ import { forceExitFullscreen, forceFullscreen, forceLoud, forceMute, forcePause,
  * @returns A `<figure>` element containing the video, its controls, optional
  * subtitles.
  */
-export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pauseBtnContent, loudBtnContent, muteBtnContent, fullscreenBtnContent, play, fullscreen, mute, muted, volume = 1, playbackRate = 1, currentTimeMs: givenCurrentTimeMs, onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, ...intrinsicVideoAttributes }) => {
+export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pauseBtnContent, loudBtnContent, muteBtnContent, fullscreenBtnContent, play, fullscreen, mute, muted, volume = 1, playbackRate = 1, currentTimeMs: givenCurrentTimeMs, 
+// Milliseconds by default, which is what this component has always rendered — a
+// default that changes under a consumer is a change nobody asked for. An article
+// usually wants `'{{mm}}:{{ss}}'` and says so.
+timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, ...intrinsicVideoAttributes }) => {
     const videoRef = useRef(null);
     const [totalTime, setTotalTime] = useState(0);
     const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
@@ -302,5 +307,5 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
                         ? _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, 'mm:ss:ms') }), _jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, 'mm:ss:ms') }), _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,35 +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;
-/**
- * Renders a duration into a caller-defined pattern.
- *
- * The pattern is a free-form string in which the following tokens are replaced,
- * longest first, so that `mm` is consumed before `m`:
- *
- * - `hh`, `mm`, `ss` — hours, minutes and seconds, zero-padded to two digits.
- * - `ms` — the remaining milliseconds, zero-padded to three digits.
- * - `frame` — the remaining 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:ms'`.
- * @param fps - Frame rate used to derive the `frame` and `f` tokens. Defaults to `25`.
- * @returns The formatted duration.
- *
- * @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.
- *
- * Since `h`, `m`, `s` and `f` are tokens on their own, **every** occurrence of
- * those letters is substituted, wherever it sits: `'mm min ss'` renders as
- * `'01 1in 01'`. Separate the fields with punctuation. This is what
- * `agnostic/time/dates/format-date` avoids by delimiting its tokens with
- * `{{…}}` — worth aligning on the day this one is made public.
- */
-export declare function formatTime(ms: number, format: string, fps?: number): string;
 /**
  * Where along the timeline a click landed.
  *

package/components/Video/utils.js

@@ -107,57 +107,6 @@ export function secondsToMs(seconds) {
 export function msToSeconds(ms) {
     return ms / 1000;
 }
-/**
- * Renders a duration into a caller-defined pattern.
- *
- * The pattern is a free-form string in which the following tokens are replaced,
- * longest first, so that `mm` is consumed before `m`:
- *
- * - `hh`, `mm`, `ss` — hours, minutes and seconds, zero-padded to two digits.
- * - `ms` — the remaining milliseconds, zero-padded to three digits.
- * - `frame` — the remaining 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:ms'`.
- * @param fps - Frame rate used to derive the `frame` and `f` tokens. Defaults to `25`.
- * @returns The formatted duration.
- *
- * @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.
- *
- * Since `h`, `m`, `s` and `f` are tokens on their own, **every** occurrence of
- * those letters is substituted, wherever it sits: `'mm min ss'` renders as
- * `'01 1in 01'`. Separate the fields with punctuation. This is what
- * `agnostic/time/dates/format-date` avoids by delimiting its tokens with
- * `{{…}}` — worth aligning on the day this one is made public.
- */
-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);
-    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: hours,
-        m: minutes,
-        s: seconds,
-        f: frames
-    };
-    return Object
-        .keys(tokens)
-        .sort((a, b) => b.length - a.length)
-        .reduce((acc, t) => acc.replace(new RegExp(t, 'gv'), String(tokens[t])), format);
-}
 /**
  * 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,5 +1,5 @@
-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'

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

@@ -1,5 +1,5 @@
-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'

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/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as moveDir from './move-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'

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

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as moveDir from './move-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'

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

@@ -1,11 +1,11 @@
 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 move from './move/index.js'
 export * as remove from './remove/index.js'
+export * as move from './move/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'

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

@@ -1,11 +1,11 @@
 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 move from './move/index.js'
 export * as remove from './remove/index.js'
+export * as move from './move/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'

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

@@ -1,11 +1,11 @@
 export * as copyDir from './copy-dir/index.js'
-export * as downloadFile from './download-file/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 copyDir from './copy-dir/index.js'
-export * as downloadFile from './download-file/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/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'

package/node/ftps/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 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'

package/node/images/transform/operations/index.d.ts

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
-export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
+export * as brighten from './brighten/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
-export * as hue from './hue/index.js'
 export * as level from './level/index.js'
-export * as normalize from './normalize/index.js'
 export * as lighten from './lighten/index.js'
+export * as hue from './hue/index.js'
 export * as overlay from './overlay/index.js'
+export * as normalize from './normalize/index.js'
 export * as resize from './resize/index.js'
-export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'
+export * as rotate from './rotate/index.js'