@dashforge/tw 1.2.0 → 1.4.0

package/dist/index.esm.js

@@ -11813,6 +11813,665 @@ Avatar.displayName = 'Avatar';
 });
 AvatarGroup.displayName = 'AvatarGroup';
 
+/**
+ * `<Skeleton>` variant recipe.
+ *
+ * Slots:
+ *  - `root` — single element (atomic component)
+ *
+ * Variant axes:
+ *  - `variant` (`text` | `rectangle` | `circle`) — shape / radius
+ *  - `animation` (`pulse` | `wave` | `none`) — how the placeholder
+ *    "breathes" while data loads. Always gated on
+ *    `prefers-reduced-motion` (no exception — animations are
+ *    purely cosmetic).
+ *
+ * Implementation notes:
+ *
+ *  - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
+ *    1.0 ↔ 0.5 over 2s, ease-in-out infinite).
+ *  - `wave` overlays a moving gradient. Implemented with a
+ *    `relative` container + an `::after` pseudo-element via a
+ *    Tailwind arbitrary-value class. The gradient slides
+ *    horizontally over the surface, mimicking the MUI Skeleton
+ *    "wave" look.
+ *  - Color uses neutral-200 (light) and neutral-800 (dark) for
+ *    the base, picked up automatically by the dashforge preset's
+ *    CSS-variable layer.
+ *
+ * Accessibility: the root has `aria-hidden="true"` (set on the JSX
+ * side, not here). Screen readers skip the skeleton entirely;
+ * the surrounding component is responsible for announcing
+ * loading state via `aria-busy` or `aria-live` if needed.
+ */ const skeletonVariants = tv({
+    slots: {
+        root: [
+            'block',
+            // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+            'bg-neutral-200',
+            'motion-reduce:animate-none'
+        ]
+    },
+    variants: {
+        variant: {
+            text: {
+                root: 'rounded h-[1em] w-full'
+            },
+            rectangle: {
+                root: 'rounded-md w-full h-[100px]'
+            },
+            circle: {
+                root: 'rounded-full w-10 h-10'
+            }
+        },
+        animation: {
+            pulse: {
+                root: 'animate-pulse'
+            },
+            wave: {
+                root: [
+                    'relative overflow-hidden',
+                    // The wave is rendered via an arbitrary-value ::after
+                    // pseudo-element with a moving linear gradient. Tailwind
+                    // doesn't ship a `wave` keyframe; we use the built-in
+                    // `animate-pulse` as a fallback if a consumer needs to
+                    // override. The gradient stop direction works in both
+                    // light and dark mode (white shimmer in light, lighter
+                    // overlay in dark).
+                    'after:absolute after:inset-0',
+                    'after:bg-gradient-to-r after:from-transparent after:via-white/40 after:to-transparent',
+                    'dark:after:via-white/10',
+                    'after:animate-pulse',
+                    'after:motion-reduce:animate-none'
+                ]
+            },
+            none: {
+                root: ''
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'text',
+        animation: 'pulse'
+    }
+});
+
+/**
+ * Dashforge TW `<Skeleton>` — loading placeholder primitive.
+ *
+ * Renders as a non-interactive `<span aria-hidden="true">` so screen
+ * readers skip it. The surrounding component is responsible for
+ * announcing loading state via `aria-busy` or `aria-live` if needed.
+ *
+ * Variants:
+ *   - `variant` — `text` (default, line shape) / `rectangle` / `circle`
+ *   - `animation` — `pulse` (default) / `wave` / `none`
+ *
+ * Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" width="200px" />
+ * <Skeleton variant="rectangle" width="100%" height="120px" />
+ * <Skeleton variant="circle" width="40px" />
+ * ```
+ */ function Skeleton(props) {
+    var _themeSlotProps_root, _slotProps_root;
+    const themeDefaults = useComponentDefaults('Skeleton');
+    const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
+    const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    const { variant = 'text', animation = 'pulse', width, height, sx, slotProps } = merged;
+    const v = skeletonVariants({
+        variant,
+        animation
+    });
+    // Width / height come through as inline style — Tailwind doesn't
+    // know about arbitrary user-supplied lengths. We default `circle`'s
+    // height to `width` so consumers don't have to repeat themselves.
+    const style = {};
+    if (width != null) style.width = width;
+    if (height != null) {
+        style.height = height;
+    } else if (variant === 'circle' && width != null) {
+        style.height = width;
+    }
+    return jsx("span", {
+        "aria-hidden": "true",
+        role: "presentation",
+        className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        style: style
+    });
+}
+
+/**
+ * `<Image>` variant recipe.
+ *
+ * Slots:
+ *  - `root`     — positioned wrapper. Holds the `<img>` plus the
+ *                 loading skeleton / error-fallback overlays, and owns
+ *                 the corner radius + overflow clipping. `relative` so
+ *                 the overlays can be `absolute inset-0`.
+ *  - `img`      — the `<img>` element. `object-*` (the `fit` axis)
+ *                 lives here; `block w-full h-full` so it fills the
+ *                 reserved box when an aspect ratio / dimensions are
+ *                 given.
+ *  - `skeleton` — the loading placeholder overlay (a `<Skeleton>`
+ *                 stretched over the reserved box).
+ *  - `fallback` — the broken-image overlay shown after `onError`.
+ *
+ * Variant axes:
+ *  - `fit`     — CSS `object-fit`. `cover` (default) crops to fill,
+ *                `contain` letterboxes, etc.
+ *  - `rounded` — corner radius token, applied to `root` (which clips
+ *                the image via `overflow-hidden`).
+ *
+ * Neutral fallback surface auto-inverts through the dashforge preset's
+ * CSS-variable layer (no explicit `dark:`).
+ */ const imageVariants = tv({
+    slots: {
+        root: [
+            'relative',
+            'block',
+            'overflow-hidden'
+        ],
+        img: [
+            'block',
+            'w-full',
+            'h-full'
+        ],
+        skeleton: [
+            'absolute',
+            'inset-0',
+            'h-full',
+            'w-full'
+        ],
+        fallback: [
+            'absolute',
+            'inset-0',
+            'flex',
+            'items-center',
+            'justify-center',
+            // Neutral surface — auto-inverts via CSS vars, no `dark:`.
+            'bg-neutral-100',
+            'text-neutral-400'
+        ]
+    },
+    variants: {
+        fit: {
+            cover: {
+                img: 'object-cover'
+            },
+            contain: {
+                img: 'object-contain'
+            },
+            fill: {
+                img: 'object-fill'
+            },
+            none: {
+                img: 'object-none'
+            },
+            'scale-down': {
+                img: 'object-scale-down'
+            }
+        },
+        rounded: {
+            none: {
+                root: 'rounded-none'
+            },
+            sm: {
+                root: 'rounded-sm'
+            },
+            md: {
+                root: 'rounded-md'
+            },
+            lg: {
+                root: 'rounded-lg'
+            },
+            full: {
+                root: 'rounded-full'
+            }
+        }
+    },
+    defaultVariants: {
+        fit: 'cover',
+        rounded: 'none'
+    }
+});
+
+/**
+ * Broken-image glyph — inline SVG fallback shown after a load error
+ * when no custom `fallback` is provided. Inline (no icon-library dep),
+ * mirroring `<Avatar>`'s default user icon.
+ *
+ * @internal
+ */ function BrokenImageIcon() {
+    return jsxs("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+            jsx("rect", {
+                x: "3",
+                y: "3",
+                width: "18",
+                height: "18",
+                rx: "2"
+            }),
+            jsx("path", {
+                d: "m3 15 5-5 4 4"
+            }),
+            jsx("path", {
+                d: "m14 14 2-2 5 5"
+            }),
+            jsx("path", {
+                d: "m21 3-18 18"
+            })
+        ]
+    });
+}
+/**
+ * Dashforge TW `<Image>` — a declarative, robust wrapper over the
+ * native `<img>`. Zero eval, no data fetching: it renders a URL you
+ * give it, and adds the three things a bare `<img>` lacks.
+ *
+ *   1. **No layout shift** — pass `aspectRatio` (or `width` + `height`)
+ *      and the box is reserved before the image loads (CSS
+ *      `aspect-ratio`, no JS measurement).
+ *   2. **Loading skeleton** — a `<Skeleton>` fills the reserved box
+ *      while the image loads, and is skipped for already-cached images
+ *      so there is no flash.
+ *   3. **Graceful error** — on load failure a muted fallback replaces
+ *      the broken-image glyph (`fallback` to customise).
+ *
+ * Lazy by default (`loading="lazy"`). Any native `<img>` attribute not
+ * named here (`srcSet`, `sizes`, `decoding`, …) is forwarded to the
+ * underlying element. The ref points at the `<img>`.
+ *
+ * @example
+ * ```tsx
+ * <Image src="/hero.jpg" alt="Team at work" aspectRatio={16 / 9} rounded="lg" />
+ * <Image src={avatarUrl} alt="Jane Doe" width={48} height={48} rounded="full" />
+ * ```
+ */ const Image = /*#__PURE__*/ forwardRef(function Image(props, ref) {
+    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_img, _slotProps_img, _themeSlotProps_skeleton, _slotProps_skeleton, _themeSlotProps_fallback, _slotProps_fallback;
+    const themeDefaults = useComponentDefaults('Image');
+    const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
+    const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    const { src, alt, aspectRatio, width, height, fit = 'cover', rounded = 'none', loading = 'lazy', showSkeleton = true, fallback, access, visibleWhen, sx, slotProps, onLoad, onError, style } = merged, rest = _object_without_properties_loose(merged, [
+        "src",
+        "alt",
+        "aspectRatio",
+        "width",
+        "height",
+        "fit",
+        "rounded",
+        "loading",
+        "showSkeleton",
+        "fallback",
+        "access",
+        "visibleWhen",
+        "sx",
+        "slotProps",
+        "onLoad",
+        "onError",
+        "style"
+    ]);
+    // Gating — hooks are always called (rules of hooks), the early return
+    // comes after. `visibleWhen` is a no-op outside a <DashForm>.
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // Reset load / error state when the source changes in place — React's
+    // official "adjust state during render" pattern (no effect, no flash),
+    // so a previously-failed image doesn't keep showing its fallback.
+    const [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setLoaded(false);
+        setFailed(false);
+    }
+    // Forward the ref AND resolve the already-cached case: for a cached
+    // image `onLoad` may fire before React attaches the handler, so we
+    // read `.complete` at mount and skip the skeleton flash.
+    const handleRef = useCallback((node)=>{
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+        if (node && node.complete && node.naturalWidth > 0) setLoaded(true);
+    }, [
+        ref
+    ]);
+    const handleLoad = (e)=>{
+        setLoaded(true);
+        onLoad == null ? void 0 : onLoad(e);
+    };
+    const handleError = (e)=>{
+        setFailed(true);
+        onError == null ? void 0 : onError(e);
+    };
+    // Gated out entirely (hooks above already ran — rules of hooks safe).
+    if (!isVisible || !accessState.visible) return null;
+    // An image has no interactive state, so 'disable' / 'readonly' render it
+    // dimmed and non-interactive rather than truly disabled.
+    const accessDimmed = accessState.disabled || accessState.readonly;
+    const v = imageVariants({
+        fit,
+        rounded
+    });
+    // A skeleton needs a reserved box to paint into — without a known
+    // shape there is no space, so we skip it (and there's layout shift,
+    // documented as the reason to always pass aspectRatio / dimensions).
+    const hasReservedBox = aspectRatio != null || width != null && height != null;
+    const showSkeletonOverlay = showSkeleton && !loaded && !failed && hasReservedBox;
+    const rootStyle = _extends({}, style);
+    if (aspectRatio != null) {
+        rootStyle.aspectRatio = typeof aspectRatio === 'number' ? `${aspectRatio} / 1` : aspectRatio;
+    }
+    if (width != null) rootStyle.width = width;
+    if (height != null) rootStyle.height = height;
+    return jsxs("div", {
+        "aria-disabled": accessDimmed || undefined,
+        className: cn(v.root(), accessDimmed && 'opacity-60 pointer-events-none', sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        style: Object.keys(rootStyle).length ? rootStyle : undefined,
+        children: [
+            jsx("img", _extends({
+                ref: handleRef,
+                src: src,
+                alt: alt,
+                loading: loading,
+                onLoad: handleLoad,
+                onError: handleError
+            }, rest, {
+                className: cn(v.img(), themeSlotProps == null ? void 0 : (_themeSlotProps_img = themeSlotProps.img) == null ? void 0 : _themeSlotProps_img.className, slotProps == null ? void 0 : (_slotProps_img = slotProps.img) == null ? void 0 : _slotProps_img.className),
+                // Hide the broken-image glyph once we know it failed; the
+                // fallback overlay takes its place.
+                style: failed ? {
+                    visibility: 'hidden'
+                } : undefined
+            })),
+            showSkeletonOverlay && jsx(Skeleton, {
+                variant: "rectangle",
+                animation: "pulse",
+                sx: cn(v.skeleton(), themeSlotProps == null ? void 0 : (_themeSlotProps_skeleton = themeSlotProps.skeleton) == null ? void 0 : _themeSlotProps_skeleton.className, slotProps == null ? void 0 : (_slotProps_skeleton = slotProps.skeleton) == null ? void 0 : _slotProps_skeleton.className)
+            }),
+            failed && jsx("div", {
+                className: cn(v.fallback(), themeSlotProps == null ? void 0 : (_themeSlotProps_fallback = themeSlotProps.fallback) == null ? void 0 : _themeSlotProps_fallback.className, slotProps == null ? void 0 : (_slotProps_fallback = slotProps.fallback) == null ? void 0 : _slotProps_fallback.className),
+                children: fallback != null ? fallback : jsx(BrokenImageIcon, {})
+            })
+        ]
+    });
+});
+Image.displayName = 'Image';
+
+/**
+ * `<Video>` variant recipe — the moving-image twin of `imageVariants`.
+ *
+ * Slots:
+ *  - `root`     — positioned wrapper. Holds the `<video>` plus the
+ *                 loading skeleton / error-fallback overlays, and owns
+ *                 the corner radius + overflow clipping. `relative` so
+ *                 the overlays can be `absolute inset-0`.
+ *  - `video`    — the `<video>` element. `object-*` (the `fit` axis)
+ *                 lives here; `block w-full h-full` so it fills the
+ *                 reserved box when an aspect ratio / dimensions are
+ *                 given.
+ *  - `skeleton` — the loading placeholder overlay (a `<Skeleton>`
+ *                 stretched over the reserved box).
+ *  - `fallback` — the error overlay shown after `onError`.
+ *
+ * Variant axes:
+ *  - `fit`     — CSS `object-fit`. `cover` (default) crops to fill,
+ *                `contain` letterboxes, etc.
+ *  - `rounded` — corner radius token, applied to `root` (which clips
+ *                the video via `overflow-hidden`).
+ *
+ * Neutral fallback surface auto-inverts through the dashforge preset's
+ * CSS-variable layer (no explicit `dark:`).
+ */ const videoVariants = tv({
+    slots: {
+        root: [
+            'relative',
+            'block',
+            'overflow-hidden'
+        ],
+        video: [
+            'block',
+            'w-full',
+            'h-full'
+        ],
+        skeleton: [
+            'absolute',
+            'inset-0',
+            'h-full',
+            'w-full'
+        ],
+        fallback: [
+            'absolute',
+            'inset-0',
+            'flex',
+            'items-center',
+            'justify-center',
+            // Neutral surface — auto-inverts via CSS vars, no `dark:`.
+            'bg-neutral-100',
+            'text-neutral-400'
+        ]
+    },
+    variants: {
+        fit: {
+            cover: {
+                video: 'object-cover'
+            },
+            contain: {
+                video: 'object-contain'
+            },
+            fill: {
+                video: 'object-fill'
+            },
+            none: {
+                video: 'object-none'
+            },
+            'scale-down': {
+                video: 'object-scale-down'
+            }
+        },
+        rounded: {
+            none: {
+                root: 'rounded-none'
+            },
+            sm: {
+                root: 'rounded-sm'
+            },
+            md: {
+                root: 'rounded-md'
+            },
+            lg: {
+                root: 'rounded-lg'
+            },
+            full: {
+                root: 'rounded-full'
+            }
+        }
+    },
+    defaultVariants: {
+        fit: 'cover',
+        rounded: 'none'
+    }
+});
+
+/**
+ * Broken-media glyph — inline SVG fallback shown after a load error
+ * when no custom `fallback` is provided. Inline (no icon-library dep),
+ * mirroring `<Image>`'s broken-image glyph.
+ *
+ * @internal
+ */ function BrokenMediaIcon() {
+    return jsxs("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+            jsx("path", {
+                d: "M2 2 22 22"
+            }),
+            jsx("path", {
+                d: "M10.66 5H14a2 2 0 0 1 2 2v3.34l1 1L22 8v8"
+            }),
+            jsx("path", {
+                d: "M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2"
+            })
+        ]
+    });
+}
+/**
+ * Dashforge TW `<Video>` — the moving-image twin of `<Image>`. A
+ * declarative, robust wrapper over the native `<video>`. Zero eval, no
+ * data fetching: it renders a URL you give it and adds what a bare
+ * `<video>` lacks.
+ *
+ *   1. **No layout shift** — pass `aspectRatio` (or `width` + `height`)
+ *      and the box is reserved before the video loads.
+ *   2. **Loading skeleton** — a `<Skeleton>` fills the reserved box
+ *      while the first frame loads; skipped when a `poster` is given
+ *      and for already-buffered video (no flash).
+ *   3. **Graceful error** — on load failure a muted fallback replaces
+ *      the player (`fallback` to customise).
+ *
+ * Controls on by default. Any native `<video>` attribute not named here
+ * (`autoPlay`, `loop`, `muted`, `playsInline`, `crossOrigin`, …) is
+ * forwarded; pass `<source>` children for multi-format delivery. The
+ * ref points at the `<video>`.
+ *
+ * @example
+ * ```tsx
+ * <Video src="/demo.mp4" poster="/demo.jpg" aspectRatio={16 / 9} rounded="lg" />
+ * <Video src="/loop.webm" aspectRatio={1} autoPlay loop muted playsInline controls={false} />
+ * ```
+ */ const Video = /*#__PURE__*/ forwardRef(function Video(props, ref) {
+    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_video, _slotProps_video, _themeSlotProps_skeleton, _slotProps_skeleton, _themeSlotProps_fallback, _slotProps_fallback;
+    const themeDefaults = useComponentDefaults('Video');
+    const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
+    const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    const { src, poster, aspectRatio, width, height, fit = 'cover', rounded = 'none', controls = true, preload = 'metadata', showSkeleton = true, fallback, access, visibleWhen, sx, slotProps, onLoadedData, onError, style, children } = merged, rest = _object_without_properties_loose(merged, [
+        "src",
+        "poster",
+        "aspectRatio",
+        "width",
+        "height",
+        "fit",
+        "rounded",
+        "controls",
+        "preload",
+        "showSkeleton",
+        "fallback",
+        "access",
+        "visibleWhen",
+        "sx",
+        "slotProps",
+        "onLoadedData",
+        "onError",
+        "style",
+        "children"
+    ]);
+    // Gating — hooks are always called (rules of hooks), the early return
+    // comes after. `visibleWhen` is a no-op outside a <DashForm>.
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // Reset load / error state when the source changes in place — React's
+    // official "adjust state during render" pattern (no effect, no flash).
+    const [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setLoaded(false);
+        setFailed(false);
+    }
+    // Forward the ref AND resolve the already-buffered case: a cached
+    // video may reach HAVE_CURRENT_DATA before React attaches the
+    // handler, so we read `.readyState` at mount and skip the skeleton.
+    const handleRef = useCallback((node)=>{
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+        if (node && node.readyState >= 2) setLoaded(true);
+    }, [
+        ref
+    ]);
+    const handleLoadedData = (e)=>{
+        setLoaded(true);
+        onLoadedData == null ? void 0 : onLoadedData(e);
+    };
+    const handleError = (e)=>{
+        setFailed(true);
+        onError == null ? void 0 : onError(e);
+    };
+    // Gated out entirely (hooks above already ran — rules of hooks safe).
+    if (!isVisible || !accessState.visible) return null;
+    // A video has no interactive state, so 'disable' / 'readonly' render it
+    // dimmed and non-interactive rather than truly disabled.
+    const accessDimmed = accessState.disabled || accessState.readonly;
+    const v = videoVariants({
+        fit,
+        rounded
+    });
+    // A skeleton needs a reserved box to paint into, and is redundant when
+    // a poster is present (the poster is the loading visual).
+    const hasReservedBox = aspectRatio != null || width != null && height != null;
+    const showSkeletonOverlay = showSkeleton && !loaded && !failed && hasReservedBox && poster == null;
+    const rootStyle = _extends({}, style);
+    if (aspectRatio != null) {
+        rootStyle.aspectRatio = typeof aspectRatio === 'number' ? `${aspectRatio} / 1` : aspectRatio;
+    }
+    if (width != null) rootStyle.width = width;
+    if (height != null) rootStyle.height = height;
+    return jsxs("div", {
+        "aria-disabled": accessDimmed || undefined,
+        className: cn(v.root(), accessDimmed && 'opacity-60 pointer-events-none', sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        style: Object.keys(rootStyle).length ? rootStyle : undefined,
+        children: [
+            jsx("video", _extends({
+                ref: handleRef,
+                src: src,
+                poster: poster,
+                controls: controls,
+                preload: preload,
+                onLoadedData: handleLoadedData,
+                onError: handleError
+            }, rest, {
+                className: cn(v.video(), themeSlotProps == null ? void 0 : (_themeSlotProps_video = themeSlotProps.video) == null ? void 0 : _themeSlotProps_video.className, slotProps == null ? void 0 : (_slotProps_video = slotProps.video) == null ? void 0 : _slotProps_video.className),
+                // Hide the failed player; the fallback overlay takes its place.
+                style: failed ? {
+                    visibility: 'hidden'
+                } : undefined,
+                children: children
+            })),
+            showSkeletonOverlay && jsx(Skeleton, {
+                variant: "rectangle",
+                animation: "pulse",
+                sx: cn(v.skeleton(), themeSlotProps == null ? void 0 : (_themeSlotProps_skeleton = themeSlotProps.skeleton) == null ? void 0 : _themeSlotProps_skeleton.className, slotProps == null ? void 0 : (_slotProps_skeleton = slotProps.skeleton) == null ? void 0 : _slotProps_skeleton.className)
+            }),
+            failed && jsx("div", {
+                className: cn(v.fallback(), themeSlotProps == null ? void 0 : (_themeSlotProps_fallback = themeSlotProps.fallback) == null ? void 0 : _themeSlotProps_fallback.className, slotProps == null ? void 0 : (_slotProps_fallback = slotProps.fallback) == null ? void 0 : _slotProps_fallback.className),
+                children: fallback != null ? fallback : jsx(BrokenMediaIcon, {})
+            })
+        ]
+    });
+});
+Video.displayName = 'Video';
+
 /**
  * `boxVariants` — the surface primitive for @dashforge/tw.
  *
@@ -14878,136 +15537,6 @@ const accordionVariants = tv({
     });
 }
 
-/**
- * `<Skeleton>` variant recipe.
- *
- * Slots:
- *  - `root` — single element (atomic component)
- *
- * Variant axes:
- *  - `variant` (`text` | `rectangle` | `circle`) — shape / radius
- *  - `animation` (`pulse` | `wave` | `none`) — how the placeholder
- *    "breathes" while data loads. Always gated on
- *    `prefers-reduced-motion` (no exception — animations are
- *    purely cosmetic).
- *
- * Implementation notes:
- *
- *  - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
- *    1.0 ↔ 0.5 over 2s, ease-in-out infinite).
- *  - `wave` overlays a moving gradient. Implemented with a
- *    `relative` container + an `::after` pseudo-element via a
- *    Tailwind arbitrary-value class. The gradient slides
- *    horizontally over the surface, mimicking the MUI Skeleton
- *    "wave" look.
- *  - Color uses neutral-200 (light) and neutral-800 (dark) for
- *    the base, picked up automatically by the dashforge preset's
- *    CSS-variable layer.
- *
- * Accessibility: the root has `aria-hidden="true"` (set on the JSX
- * side, not here). Screen readers skip the skeleton entirely;
- * the surrounding component is responsible for announcing
- * loading state via `aria-busy` or `aria-live` if needed.
- */ const skeletonVariants = tv({
-    slots: {
-        root: [
-            'block',
-            // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
-            'bg-neutral-200',
-            'motion-reduce:animate-none'
-        ]
-    },
-    variants: {
-        variant: {
-            text: {
-                root: 'rounded h-[1em] w-full'
-            },
-            rectangle: {
-                root: 'rounded-md w-full h-[100px]'
-            },
-            circle: {
-                root: 'rounded-full w-10 h-10'
-            }
-        },
-        animation: {
-            pulse: {
-                root: 'animate-pulse'
-            },
-            wave: {
-                root: [
-                    'relative overflow-hidden',
-                    // The wave is rendered via an arbitrary-value ::after
-                    // pseudo-element with a moving linear gradient. Tailwind
-                    // doesn't ship a `wave` keyframe; we use the built-in
-                    // `animate-pulse` as a fallback if a consumer needs to
-                    // override. The gradient stop direction works in both
-                    // light and dark mode (white shimmer in light, lighter
-                    // overlay in dark).
-                    'after:absolute after:inset-0',
-                    'after:bg-gradient-to-r after:from-transparent after:via-white/40 after:to-transparent',
-                    'dark:after:via-white/10',
-                    'after:animate-pulse',
-                    'after:motion-reduce:animate-none'
-                ]
-            },
-            none: {
-                root: ''
-            }
-        }
-    },
-    defaultVariants: {
-        variant: 'text',
-        animation: 'pulse'
-    }
-});
-
-/**
- * Dashforge TW `<Skeleton>` — loading placeholder primitive.
- *
- * Renders as a non-interactive `<span aria-hidden="true">` so screen
- * readers skip it. The surrounding component is responsible for
- * announcing loading state via `aria-busy` or `aria-live` if needed.
- *
- * Variants:
- *   - `variant` — `text` (default, line shape) / `rectangle` / `circle`
- *   - `animation` — `pulse` (default) / `wave` / `none`
- *
- * Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
- *
- * @example
- * ```tsx
- * <Skeleton variant="text" width="200px" />
- * <Skeleton variant="rectangle" width="100%" height="120px" />
- * <Skeleton variant="circle" width="40px" />
- * ```
- */ function Skeleton(props) {
-    var _themeSlotProps_root, _slotProps_root;
-    const themeDefaults = useComponentDefaults('Skeleton');
-    const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
-    const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
-    const { variant = 'text', animation = 'pulse', width, height, sx, slotProps } = merged;
-    const v = skeletonVariants({
-        variant,
-        animation
-    });
-    // Width / height come through as inline style — Tailwind doesn't
-    // know about arbitrary user-supplied lengths. We default `circle`'s
-    // height to `width` so consumers don't have to repeat themselves.
-    const style = {};
-    if (width != null) style.width = width;
-    if (height != null) {
-        style.height = height;
-    } else if (variant === 'circle' && width != null) {
-        style.height = width;
-    }
-    return jsx("span", {
-        "aria-hidden": "true",
-        role: "presentation",
-        className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
-        style: style
-    });
-}
-
 /**
  * `<Pagination>` variant recipe.
  *
@@ -18792,6 +19321,6 @@ function SearchIcon(props) {
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '1.1.1';
+ */ const VERSION = '1.4.0';
 
-export { AVATAR_SOFT_FALLBACK, AVATAR_TONE_FALLBACK, Accordion, Alert, AlertTitle, AppShell, AspectRatio, Autocomplete, Avatar, AvatarGroup, Badge, Box, Breadcrumbs, Button, Calendar, Card, CardActionArea, CardContent, Checkbox, Chip, ConfirmDialogProvider, Container, DRAWER_SIZE_PRESETS, DataGrid, DatePicker, DateRangePicker, DateTimePicker, Dialog, Divider, Drawer, Grid, ICON_BUTTON_BASE, ICON_BUTTON_SIZE_OVERRIDES, IconButton, LeftNav, Link, Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuSkeleton, MenuTrigger, NumberField, OTPField, Pagination, Popover, Progress, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, SPINNER_COLORS, SPINNER_STROKE_WIDTH, SPINNER_TRACK_OPACITY, Select, Skeleton, Slider, SnackbarProvider, Spinner, Stack, Step, Stepper, Switch, Table, Tabs, TextField, Textarea, TimePicker, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, alertVariants, appShellVariants, autocompleteVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, chipVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateRangeDayVariants, dateRangePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, drawerVariants, getNestedValue, gridVariants, leftNavVariants, linkVariants, menuVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, progressVariants, radioGroupVariants, selectVariants, skeletonVariants, sliderVariants, snackbarVariants, spinnerVariants, stackVariants, stepperVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, timePickerVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar, useStep };
+export { AVATAR_SOFT_FALLBACK, AVATAR_TONE_FALLBACK, Accordion, Alert, AlertTitle, AppShell, AspectRatio, Autocomplete, Avatar, AvatarGroup, Badge, Box, Breadcrumbs, Button, Calendar, Card, CardActionArea, CardContent, Checkbox, Chip, ConfirmDialogProvider, Container, DRAWER_SIZE_PRESETS, DataGrid, DatePicker, DateRangePicker, DateTimePicker, Dialog, Divider, Drawer, Grid, ICON_BUTTON_BASE, ICON_BUTTON_SIZE_OVERRIDES, IconButton, Image, LeftNav, Link, Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuSkeleton, MenuTrigger, NumberField, OTPField, Pagination, Popover, Progress, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, SPINNER_COLORS, SPINNER_STROKE_WIDTH, SPINNER_TRACK_OPACITY, Select, Skeleton, Slider, SnackbarProvider, Spinner, Stack, Step, Stepper, Switch, Table, Tabs, TextField, Textarea, TimePicker, Tooltip, TopBar, Typography, VERSION, Video, VisuallyHidden, accordionVariants, alertVariants, appShellVariants, autocompleteVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, chipVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateRangeDayVariants, dateRangePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, drawerVariants, getNestedValue, gridVariants, imageVariants, leftNavVariants, linkVariants, menuVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, progressVariants, radioGroupVariants, selectVariants, skeletonVariants, sliderVariants, snackbarVariants, spinnerVariants, stackVariants, stepperVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, timePickerVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar, useStep, videoVariants };