@design-edito/tools 0.4.22 → 0.5.0

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

@@ -0,0 +1,50 @@
+import { type FunctionComponent, type TextareaHTMLAttributes, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link ControlledTextarea} component.
+ *
+ * Extends all native {@link TextareaHTMLAttributes} and {@link WithClassName}
+ * with optional label, error content, and automatic height adjustment.
+ *
+ * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
+ * @property error - Content rendered as an error message below the textarea. When omitted, no error is rendered.
+ * @property autoHeight - When `true`, automatically adjusts the textarea height
+ * to fit its content. Defaults to `false`.
+ * @property className - Additional class name(s) applied to the textarea element.
+ */
+export type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+    autoHeight?: boolean;
+}>;
+/**
+ * Controlled textarea field component.
+ *
+ * Renders a native `<textarea>` element with optional label and error feedback.
+ * The textarea value is entirely driven by the provided `value` prop and all
+ * native textarea attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
+ *
+ * When `autoHeight` is enabled, the textarea height automatically expands or
+ * shrinks to match its content.
+ *
+ * ### CSS elements
+ * - `label`
+ * - `error`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A labelled controlled textarea with optional error feedback.
+ *
+ * @remarks
+ * - The component does not manage its own value state.
+ * - Consumers are responsible for updating `value` in response to `onChange`.
+ * - Additional `className` values are merged with the component public class name
+ *   and applied to the underlying `<textarea>` element.
+ * - When `autoHeight` is enabled, height recalculation occurs whenever the
+ *   textarea value changes and every 500ms thereafter.
+ */
+export declare const ControlledTextarea: FunctionComponent<Props>;

package/components/Textarea/index.controlled.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useLayoutEffect, useRef } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { textarea as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+/**
+ * Controlled textarea field component.
+ *
+ * Renders a native `<textarea>` element with optional label and error feedback.
+ * The textarea value is entirely driven by the provided `value` prop and all
+ * native textarea attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
+ *
+ * When `autoHeight` is enabled, the textarea height automatically expands or
+ * shrinks to match its content.
+ *
+ * ### CSS elements
+ * - `label`
+ * - `error`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A labelled controlled textarea with optional error feedback.
+ *
+ * @remarks
+ * - The component does not manage its own value state.
+ * - Consumers are responsible for updating `value` in response to `onChange`.
+ * - Additional `className` values are merged with the component public class name
+ *   and applied to the underlying `<textarea>` element.
+ * - When `autoHeight` is enabled, height recalculation occurs whenever the
+ *   textarea value changes and every 500ms thereafter.
+ */
+export const ControlledTextarea = ({ label, error, autoHeight = false, value, className, ...rest }) => {
+    const [id] = useState(`_${randomHash(12)}`);
+    const textareaRef = useRef(null);
+    // Handlers
+    const adjustHeight = () => {
+        const textarea = textareaRef.current;
+        if (textarea === null)
+            return;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    // Fx. dep `authHeight`, `value` - Compute content height
+    useLayoutEffect(() => {
+        if (!autoHeight)
+            return;
+        adjustHeight();
+    }, [autoHeight, value]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("textarea", { ...rest, ref: textareaRef, className: rootClss, id: id, value: value, onChange: e => {
+                    const { target } = e;
+                    rest.onChange?.(e);
+                    if (value === undefined)
+                        return;
+                    if (typeof value === 'number') {
+                        target.value = `${value}`;
+                    }
+                    else if (typeof value === 'string') {
+                        target.value = value;
+                    }
+                    else {
+                        // value is readonly string[]
+                        // not supported for <select>; ignore or normalize if needed
+                    }
+                } }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+};

package/components/Textarea/index.d.ts

@@ -1,33 +1,38 @@
-import { type FunctionComponent, type TextareaHTMLAttributes, type ReactNode } from 'react';
-import type { WithClassName } from '../utils/types.js';
+import { type FunctionComponent } from 'react';
+import { type Props as ControlledProps } from './index.controlled.js';
 /**
  * Props for the {@link Textarea} component.
  *
- * Extends all native {@link TextareaHTMLAttributes} and {@link WithClassName}
- * with optional label and error content.
+ * Alias of {@link ControlledProps}.
  *
- * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
- * @property error - Content rendered as an error message below the textarea. When omitted, no error is rendered.
- * @property className - Additional class name(s) applied to the root element.
+ * All native textarea attributes remain available, including `value`,
+ * `defaultValue`, and `onChange`, allowing the component to operate
+ * in either controlled or hybrid mode.
  */
-export type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & WithClassName<{
-    label?: ReactNode;
-    error?: ReactNode;
-}>;
+export type Props = ControlledProps;
 /**
- * Textarea field component with optional label and error message.
+ * Textarea field component supporting controlled and hybrid usage.
  *
- * Renders a native `<textarea>` element inside a wrapper, with a stable
- * auto-generated `id` used to associate the label via `htmlFor`.
- * All standard textarea attributes are forwarded to the underlying element.
+ * Wraps {@link ControlledTextarea} and automatically manages the textarea
+ * value when no `value` prop is provided.
  *
  * ### CSS elements
  * - `label`
- * - `textarea`
  * - `error`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A labelled textarea wrapper with optional error feedback.
+ *
+ * @returns A labelled textarea with optional internal value management.
+ *
+ * @remarks
+ * - In controlled mode (`value` defined), the textarea value is fully driven
+ *   by the parent component and internal state is never updated.
+ * - In hybrid mode, internal state is initialized from `defaultValue` and
+ *   subsequently manages value updates itself.
+ * - In hybrid mode, the internal value is updated before forwarding the
+ *   `onChange` callback.
+ * - `defaultValue` is only used to initialize internal state and is not
+ *   forwarded to the underlying controlled component.
  */
 export declare const Textarea: FunctionComponent<Props>;

package/components/Textarea/index.js

@@ -1,30 +1,39 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
-import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
-import { randomHash } from '../../agnostic/random/uuid/index.js';
-import { textarea as publicClassName } from '../public-classnames.js';
-import { mergeClassNames } from '../utils/index.js';
-import cssModule from './styles.module.css';
+import { ControlledTextarea } from './index.controlled.js';
 /**
- * Textarea field component with optional label and error message.
+ * Textarea field component supporting controlled and hybrid usage.
  *
- * Renders a native `<textarea>` element inside a wrapper, with a stable
- * auto-generated `id` used to associate the label via `htmlFor`.
- * All standard textarea attributes are forwarded to the underlying element.
+ * Wraps {@link ControlledTextarea} and automatically manages the textarea
+ * value when no `value` prop is provided.
  *
  * ### CSS elements
  * - `label`
- * - `textarea`
  * - `error`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A labelled textarea wrapper with optional error feedback.
+ *
+ * @returns A labelled textarea with optional internal value management.
+ *
+ * @remarks
+ * - In controlled mode (`value` defined), the textarea value is fully driven
+ *   by the parent component and internal state is never updated.
+ * - In hybrid mode, internal state is initialized from `defaultValue` and
+ *   subsequently manages value updates itself.
+ * - In hybrid mode, the internal value is updated before forwarding the
+ *   `onChange` callback.
+ * - `defaultValue` is only used to initialize internal state and is not
+ *   forwarded to the underlying controlled component.
  */
-export const Textarea = ({ label, error, className, ...rest }) => {
-    const [id] = useState(`_${randomHash(12)}`);
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null), className);
-    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("textarea", { ...rest, className: rootClss, id: id }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+export const Textarea = ({ defaultValue, value, onChange, ...rest }) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(defaultValue ?? '');
+    const currentValue = isControlled ? value : internal;
+    const handleChange = (e) => {
+        if (!isControlled)
+            setInternal(e.target.value);
+        onChange?.(e);
+    };
+    return _jsx(ControlledTextarea, { ...rest, value: currentValue, onChange: handleChange });
 };

package/components/UIModule/index.js

@@ -94,6 +94,7 @@ export const UIModule = ({ src, props, stateHandlers, className }) => {
                 }
                 if ('update' in data && typeof data.update !== 'function')
                     return setLoadedModule(errs.updFunc);
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- shape fully validated by the checks above
                 const module = data;
                 setLoadedModule(module);
                 try {
@@ -109,7 +110,7 @@ export const UIModule = ({ src, props, stateHandlers, className }) => {
                         : new Error(unknownToString(err));
                     setLoadedModule(e);
                 }
-            }).catch(err => {
+            }).catch((err) => {
                 setLoading(false);
                 setLoadedModule(err instanceof Error ? err : new Error(unknownToString(err)));
                 setModuleTarget(null);
@@ -133,6 +134,7 @@ export const UIModule = ({ src, props, stateHandlers, className }) => {
     }, [src]);
     // Fx dep. `loadedModule` - log load errors
     useEffect(() => {
+        // eslint-disable-next-line no-console
         if (loadedModule instanceof Error)
             console.error(loadedModule);
     }, [loadedModule]);

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

@@ -1,5 +1,5 @@
 import { type FunctionComponent, type PropsWithChildren, type VideoHTMLAttributes, type ReactEventHandler } from 'react';
-import { type WithClassName } from '../utils/types.js';
+import type { WithClassName } from '../utils/types.js';
 import { type Props as SubsProps } from '../Subtitles/index.js';
 /**
  * Describes a single video source.

package/components/Video/index.controlled.js

@@ -54,16 +54,15 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         if (videoRef.current === null)
             return;
         const video = videoRef.current;
-        setTotalTime(Number(video.duration));
+        setTotalTime(video.duration);
         intrinsicVideoAttributes.onLoadedMetadata?.(e);
     }, [intrinsicVideoAttributes.onLoadedMetadata]);
     const handleOnTimeUpdateEvent = useCallback((e) => {
         const video = e.currentTarget;
-        const newTimeMs = secondsToMs(Number(video.currentTime));
+        const newTimeMs = secondsToMs(video.currentTime);
         setCurrentTimeMs(newTimeMs);
-        if (intrinsicVideoAttributes?.onTimeUpdate !== undefined) {
+        if (intrinsicVideoAttributes.onTimeUpdate !== undefined)
             intrinsicVideoAttributes.onTimeUpdate(e);
-        }
     }, [intrinsicVideoAttributes.onTimeUpdate]);
     const handleOnPlayEvent = useCallback((e) => {
         /* We must never play a video that has controlled time */
@@ -75,11 +74,11 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
     }, [isTimeControlled, intrinsicVideoAttributes.onPlay]);
     // Custom action handlers
     const handlePlayButtonClick = useCallback((e) => {
-        const isPlaying = videoRef.current !== null ? Boolean(videoRef.current.paused) : false;
+        const isPlaying = videoRef.current !== null ? videoRef.current.paused : false;
         actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
     }, [actionHandlers?.playButtonClick]);
     const handlePauseButtonClick = useCallback((e) => {
-        const isPlaying = videoRef.current !== null ? Boolean(videoRef.current.paused) : false;
+        const isPlaying = videoRef.current !== null ? videoRef.current.paused : false;
         actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
     }, [actionHandlers?.pauseButtonClick]);
     const handleLoudButtonClick = useCallback((e) => {
@@ -125,7 +124,7 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         'muted': !isLoud,
         ..._modifiers
     }), className);
-    const appliedVolume = volume ?? 0;
+    const appliedVolume = volume;
     const rootAttributes = {
         'data-play-on': isPlaying ? '' : undefined,
         'data-play-off': !isPlaying ? '' : undefined,
@@ -151,8 +150,10 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         if (Array.isArray(sources)) {
             if (sources.length === 0)
                 return [];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
             if (typeof sources[0] === 'string')
                 return sources.map(src => ({ src }));
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
             return sources;
         }
         return [];
@@ -165,8 +166,10 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         if (Array.isArray(tracks)) {
             if (tracks.length === 0)
                 return [];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
             if (typeof tracks[0] === 'string')
                 return tracks.map(src => ({ src }));
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
             return tracks;
         }
         return [];
@@ -208,9 +211,7 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         }
     }, [play, isTimeControlled]);
     useEffect(() => {
-        if (volume !== undefined) {
-            forceVolume(videoRef.current, volume);
-        }
+        forceVolume(videoRef.current, volume);
     }, [volume]);
     useEffect(() => {
         if (givenCurrentTimeMs !== undefined && videoRef.current !== null) {

package/components/Video/index.js

@@ -55,20 +55,20 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
         }
         setPlay(true);
         hasBeenAutoPlayed.current = true;
-    }, [controlledProps?.onPlay, shouldDisclaimerBeOn]);
+    }, [controlledProps.onPlay, shouldDisclaimerBeOn]);
     const handleOnPauseEvent = useCallback((e) => {
         setPlay(false);
         controlledProps.onPause?.(e);
-    }, [controlledProps?.onPause]);
+    }, [controlledProps.onPause]);
     const handleOnVolumeChangeEvent = useCallback((e) => {
-        setMute(Boolean(e.currentTarget.muted));
-        setVolume(Number(e.currentTarget.volume));
+        setMute(e.currentTarget.muted);
+        setVolume(e.currentTarget.volume);
         controlledProps.onVolumeChange?.(e);
-    }, [controlledProps?.onVolumeChange]);
+    }, [controlledProps.onVolumeChange]);
     const handleOnRateChangeEvent = useCallback((e) => {
-        setPlaybackRate(Number(e.currentTarget.playbackRate));
+        setPlaybackRate(e.currentTarget.playbackRate);
         controlledProps.onRateChange?.(e);
-    }, [controlledProps?.onRateChange]);
+    }, [controlledProps.onRateChange]);
     const handleOnFullscreenChangeEvent = useCallback((e) => {
         if (document.fullscreenElement === null || shouldDisclaimerBeOn) {
             setFullscreen(false);
@@ -77,7 +77,7 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
     const handleOnLoadedMetadataEvent = useCallback((e) => {
         muteAttributeWorkaround(e.currentTarget, controlledProps.muted ?? false);
         controlledProps.onLoadedMetadata?.(e);
-    }, [controlledProps?.onLoadedMetadata, controlledProps?.muted]);
+    }, [controlledProps.onLoadedMetadata, controlledProps.muted]);
     // User actions
     const handlePlayButtonClick = useCallback((e, isPlaying, video) => {
         controlledProps.actionHandlers?.playButtonClick?.(e, isPlaying, video);
@@ -111,20 +111,28 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
     const onIntersected = useCallback(({ ioEntry }) => {
         if (ioEntry === undefined)
             return;
-        const { isIntersecting = false } = ioEntry;
-        if (autoPauseWhenHidden === true && !isIntersecting) {
+        const { isIntersecting } = ioEntry;
+        if (autoPauseWhenHidden === true && !isIntersecting)
             setPlay(false);
-        }
-        if (autoLoudWhenVisible === true && isIntersecting) {
+        if (autoLoudWhenVisible === true && isIntersecting)
             setMute(false);
-        }
-        if (autoPlayWhenVisible === true && !shouldDisclaimerBeOn && !hasBeenAutoPlayed.current && isIntersecting) {
+        if (autoPlayWhenVisible === true
+            && !shouldDisclaimerBeOn
+            && !hasBeenAutoPlayed.current
+            && isIntersecting)
             setPlay(true);
-        }
-        if (autoMuteWhenHidden === true && !shouldDisclaimerBeOn && !hasBeenAutoPlayed.current && !isIntersecting) {
+        if (autoMuteWhenHidden === true
+            && !shouldDisclaimerBeOn
+            && !hasBeenAutoPlayed.current
+            && !isIntersecting)
             setMute(true);
-        }
-    }, [autoPlayWhenVisible, autoPauseWhenHidden, autoMuteWhenHidden, autoLoudWhenVisible, shouldDisclaimerBeOn]);
+    }, [
+        autoPlayWhenVisible,
+        autoPauseWhenHidden,
+        autoMuteWhenHidden,
+        autoLoudWhenVisible,
+        shouldDisclaimerBeOn
+    ]);
     const handleDiclaimerDismiss = useCallback((prevIsOn) => {
         setIsDisclaimerOn(false);
         if (controlledProps.autoPlay === true && !hasBeenAutoPlayed.current) {
@@ -133,9 +141,8 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
         disclaimer?.actionHandlers?.dismissClick?.(prevIsOn);
     }, [controlledProps.autoPlay, disclaimer?.actionHandlers?.dismissClick]);
     useEffect(() => {
-        if (isDisclaimerOn !== shouldDisclaimerBeOn) {
+        if (isDisclaimerOn !== shouldDisclaimerBeOn)
             setIsDisclaimerOn(shouldDisclaimerBeOn);
-        }
     }, [isDisclaimerOn, shouldDisclaimerBeOn]);
     useEffect(() => {
         if (shouldDisclaimerBeOn) {

package/components/Video/utils.d.ts

@@ -5,7 +5,7 @@ export declare const forceLoud: (video: HTMLVideoElement | null) => void;
 export declare const forceVolume: (video: HTMLVideoElement | null, volume: number) => void;
 export declare const forceCurrentTime: (video: HTMLVideoElement | null, time: number, setCurrentTime: Dispatch<SetStateAction<number>>) => void;
 export declare const forcePlay: (video: HTMLVideoElement | null) => Promise<boolean>;
-export declare const forcePause: (video: HTMLVideoElement | null) => Promise<boolean>;
+export declare const forcePause: (video: HTMLVideoElement | null) => boolean;
 export declare const forcePlaybackRate: (video: HTMLVideoElement | null, rate: number) => void;
 export declare const forceFullscreen: (video: HTMLVideoElement | null) => Promise<boolean>;
 export declare const forceExitFullscreen: (video: HTMLVideoElement | null) => Promise<boolean>;

package/components/Video/utils.js

@@ -13,21 +13,25 @@ export const muteAttributeWorkaround = (video, shouldMute) => {
 export const forceMute = (video) => {
     if (video === null)
         return;
+    // eslint-disable-next-line no-param-reassign
     video.muted = true;
 };
 export const forceLoud = (video) => {
     if (video === null)
         return;
+    // eslint-disable-next-line no-param-reassign
     video.muted = false;
 };
 export const forceVolume = (video, volume) => {
     if (video === null)
         return;
+    // eslint-disable-next-line no-param-reassign
     video.volume = volume;
 };
 export const forceCurrentTime = (video, time, setCurrentTime) => {
     if (video === null)
         return;
+    // eslint-disable-next-line no-param-reassign
     video.currentTime = time;
     setCurrentTime(time);
 };
@@ -41,11 +45,12 @@ export const forcePlay = async (video) => {
         return video.paused;
     }
     catch (e) {
+        // eslint-disable-next-line no-console
         console.error(e);
     }
     return false;
 };
-export const forcePause = async (video) => {
+export const forcePause = (video) => {
     if (video === null)
         return false;
     if (video.paused)
@@ -55,6 +60,7 @@ export const forcePause = async (video) => {
         return video.paused;
     }
     catch (e) {
+        // eslint-disable-next-line no-console
         console.error(e);
     }
     return false;
@@ -62,6 +68,7 @@ export const forcePause = async (video) => {
 export const forcePlaybackRate = (video, rate) => {
     if (video === null)
         return;
+    // eslint-disable-next-line no-param-reassign
     video.playbackRate = rate;
 };
 export const forceFullscreen = async (video) => {
@@ -72,6 +79,7 @@ export const forceFullscreen = async (video) => {
         return document.fullscreenElement === video;
     }
     catch (e) {
+        // eslint-disable-next-line no-console
         console.error(e);
     }
     return false;
@@ -85,6 +93,7 @@ export const forceExitFullscreen = async (video) => {
         return document.fullscreenElement !== video;
     }
     catch (e) {
+        // eslint-disable-next-line no-console
         console.error(e);
     }
     return false;
@@ -117,7 +126,7 @@ export function formatTime(ms, format, fps = 25) {
     const result = Object
         .keys(tokens)
         .sort((a, b) => b.length - a.length)
-        .reduce((acc, t) => acc.replace(new RegExp(t, 'g'), String(tokens[t])), format);
+        .reduce((acc, t) => acc.replace(new RegExp(t, 'gv'), String(tokens[t])), format);
     return result;
 }
 export const getTimelineClickProgress = (event, timeline, video) => {

package/components/index.d.ts

@@ -12,8 +12,8 @@ export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
-export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'

package/components/index.js

@@ -12,8 +12,8 @@ export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
-export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'

package/components/utils/types.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Extends a type with an optional `className` prop accepting a string or an array of string-or-nullish values.
+ *
+ * @template T - The base type to extend.
+ */
 export type WithClassName<T extends Record<string, unknown>> = T & {
     className?: string | Array<string | null | undefined>;
 };

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

@@ -12,15 +12,15 @@ export type CopyDirOptions = {
  * Recursively copies every object under `sourceDir` to the same relative path
  * beneath `targetDir` in a single S3 bucket (AWS SDK v3).
  *
- * @param {S3Client} client - The v3 S3 client instance.
- * @param {string} bucketName - The name of the S3 bucket.
- * @param {string} sourceDir - The source directory prefix to copy from.
- * @param {string} targetDir - The target directory prefix to copy to.
- * @param {CopyDirOptions} [options] - Optional copy‑behaviour configuration.
- * @param {Omit<ListObjectsV2CommandInput,'Bucket'|'Prefix'>} [options.listObjectsOptions] - Extra list parameters.
- * @param {Omit<CopyObjectCommandInput,'Bucket'|'Key'|'CopySource'>} [options.copyOptions] - Extra copy parameters.
- * @param {boolean} [options.overwrite=false] - Whether to overwrite existing files at target.
- * @returns {Promise<Outcome.Either<true, string>>}
+ * @param client - The v3 S3 client instance.
+ * @param bucketName - The name of the S3 bucket.
+ * @param sourceDir - The source directory prefix to copy from.
+ * @param targetDir - The target directory prefix to copy to.
+ * @param [options] - Optional copy‑behaviour configuration.
+ * @param [options.listObjectsOptions] - Extra list parameters.
+ * @param [options.copyOptions] - Extra copy parameters.
+ * @param [options.overwrite=false] - Whether to overwrite existing files at target.
+ * @returns
  * - Success: `Outcome.makeSuccess(true)` if every object is copied.
  * - Failure: `Outcome.makeFailure(errStr)` on error.
  */

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

@@ -1,19 +1,20 @@
 import { ListObjectsV2Command, CopyObjectCommand, HeadObjectCommand } from '@aws-sdk/client-s3';
 import * as Outcome from '../../../../../agnostic/misc/outcome/index.js';
 import { unknownToString } from '../../../../../agnostic/errors/unknown-to-string/index.js';
+import { deepGetProperty } from '../../../../../agnostic/objects/deep-get-property/index.js';
 /**
  * Recursively copies every object under `sourceDir` to the same relative path
  * beneath `targetDir` in a single S3 bucket (AWS SDK v3).
  *
- * @param {S3Client} client - The v3 S3 client instance.
- * @param {string} bucketName - The name of the S3 bucket.
- * @param {string} sourceDir - The source directory prefix to copy from.
- * @param {string} targetDir - The target directory prefix to copy to.
- * @param {CopyDirOptions} [options] - Optional copy‑behaviour configuration.
- * @param {Omit<ListObjectsV2CommandInput,'Bucket'|'Prefix'>} [options.listObjectsOptions] - Extra list parameters.
- * @param {Omit<CopyObjectCommandInput,'Bucket'|'Key'|'CopySource'>} [options.copyOptions] - Extra copy parameters.
- * @param {boolean} [options.overwrite=false] - Whether to overwrite existing files at target.
- * @returns {Promise<Outcome.Either<true, string>>}
+ * @param client - The v3 S3 client instance.
+ * @param bucketName - The name of the S3 bucket.
+ * @param sourceDir - The source directory prefix to copy from.
+ * @param targetDir - The target directory prefix to copy to.
+ * @param [options] - Optional copy‑behaviour configuration.
+ * @param [options.listObjectsOptions] - Extra list parameters.
+ * @param [options.copyOptions] - Extra copy parameters.
+ * @param [options.overwrite=false] - Whether to overwrite existing files at target.
+ * @returns
  * - Success: `Outcome.makeSuccess(true)` if every object is copied.
  * - Failure: `Outcome.makeFailure(errStr)` on error.
  */
@@ -42,10 +43,12 @@ export async function copyDir(client, bucketName, sourceDir, targetDir, options)
                         continue;
                     }
                     catch (err) {
-                        const code = err?.name ?? err?.$metadata?.httpStatusCode;
-                        if (code !== 'NotFound' && code !== 404) {
+                        const name = deepGetProperty(err, 'name');
+                        const httpStatusCode = deepGetProperty(err, '$metadata.httpStatusCode');
+                        const code = name ?? httpStatusCode;
+                        // eslint-disable-next-line max-depth
+                        if (code !== 'NotFound' && code !== 404)
                             return Outcome.makeFailure(unknownToString(err));
-                        }
                         // Not found, proceed with copy
                     }
                 }

package/node/@aws-s3/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/@aws-s3/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'