@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/lightbox/index.jsx

@@ -0,0 +1,284 @@
+// Ported from yet-another-react-lightbox (src/Lightbox.tsx, src/modules/{Portal,Controller/Controller,Carousel,Toolbar,
+// Navigation/Navigation}.tsx, src/components/{ImageSlide,IconButton}.tsx, v3.32.2), MIT, © Igor Danchenko.
+// Rivet:
+// - Parts instead of YARL's module tree + plugin augmentation: `<Lightbox>` (portal root on the cdk div overlay layer:
+//   `ModalOverlay` > `Modal role="dialog"`, never a native `<dialog>`) wraps a render-function child with the parts:
+//   `LightboxCarousel` (slides; children = YARL `render.slide`), `LightboxToolbar`, `LightboxClose`, `LightboxPrevious`,
+//   `LightboxNext`; plugins are parts in their own subpaths (`@rivetjs/cdk/lightbox/zoom`, …): 0 B unless imported.
+// - Focus containment / restoration, Escape (`controller.closeOnEscape`), scroll lock and `inert` outside = cdk
+//   `ModalOverlay` (YARL Portal + NoScroll). Fade = CSS on `[data-entering]` / `[data-exiting]` (duration
+//   `--rv-lightbox-fade`); `onEntering` / `onEntered` / `onExiting` / `onExited` follow the overlay's enter / exit.
+// - Layout: the container is a CSS grid (`top` / `start` / `main` / `end` / `bottom` areas): the carousel fills `main`,
+//   the Thumbnails strip takes its side's area (YARL shrinks the carousel by the thumbnails size); toolbar, navigation and
+//   captions are absolutely positioned (not grid items).
+// - Slides render as absolutely positioned boxes at `inset-inline-start: offset × (100% + spacing)` (RTL mirrors), the
+//   track moves with the house motion (`./behaviour.ts`); 2 × preload + 1 slides in the DOM, keyed by global position.
+// - Media sizing is CSS only (no measurement): slides are size containers, media fit with `max-width` / `max-height`
+//   (images) or `cqw` / `cqh` boxes (video, embed, PDF); image `sizes` = `min(100vw, <ratio>vh)` unless given.
+// - Icons: headless — buttons render their children (the styled layer passes lucide icons); YARL's SVG icons dropped.
+// - Resumable: a closed lightbox renders only the overlay anchor; slides data must serialize (plain objects). Inline
+//   (`./inline`) server-renders the view; its browser-only listeners install on the first pointer / focus.
+import { computed, createContext, onCleanup, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Provider, Show, clientEffect } from "@rivetjs/runtime/dom";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { Modal, ModalOverlay } from "../modal/index.jsx";
+import { OverlayTriggerStateContext } from "../overlay/contexts.js";
+import { createOverlayTriggerState } from "../state/overlays.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { useId } from "../utils/id.js";
+import { closeLightbox, ensureLightbox, focusLightbox, lightboxKeyDown, lightboxLengthCss, lightboxNext, lightboxPointerDown, lightboxPointerMove, lightboxPointerUp, lightboxPrev, syncLightboxIndex, syncLightboxMedia, } from "./behaviour.js";
+import { createLightboxState, getSlideIndex, isImageFitCover, isImageSlide, lightboxIndex, lightboxNavigation, lightboxSlides, lightboxWindow, translateLabel, translateSlideCounter, } from "./state.js";
+import { liveOptions } from "../utils/live.jsx";
+export * from "./state.js";
+export * from "./behaviour.js";
+/* ------------------------------------------------------------------------------------------------
+ * Contexts
+ * ----------------------------------------------------------------------------------------------*/
+/** The lightbox state for the parts (id `rv-lightbox`). */
+export const LightboxContext = resumableContext(createContext(null, { id: "rv-lightbox" }));
+export const LightboxSlideContext = resumableContext(createContext(null, { id: "rv-lightbox-slide" }));
+/** The enclosing lightbox state (throws outside a lightbox). */
+export function useLightbox() {
+    const state = useContext(LightboxContext);
+    if (!state)
+        throw new Error("Lightbox parts must be rendered inside <Lightbox> or <LightboxInline>.");
+    return state;
+}
+/** The enclosing slide (`null` outside a carousel slide). */
+export const useLightboxSlide = () => useContext(LightboxSlideContext);
+/** Offset of a rendered slide from the current one (tracked; 0 = current). */
+export const lightboxSlideOffset = (state, slide) => slide.position - state.globalIndex();
+/**
+ * A modal media lightbox (YARL `<Lightbox>`): portal on the cdk overlay layer, focus trap + restore, Escape, scroll lock,
+ * swipe / pull / wheel / keyboard navigation.
+ */
+export function Lightbox(props) {
+    const id = useId(props.id);
+    // Live props: a controlled `isOpen={open()}` stays live (accessor; `controllable` reads it, never writes it).
+    const overlay = createOverlayTriggerState({
+        isOpen: liveOptions(props, [], ["isOpen"]).isOpen,
+        defaultOpen: props.defaultOpen,
+        onOpenChange: props.onOpenChange,
+    });
+    const state = createLightboxState(props, id, overlay);
+    const children = props.children;
+    const cls = props.class ?? "rv-Lightbox", style = props.style, overlayCls = props.overlayClass ?? "rv-LightboxOverlay", overlayStyle = props.overlayStyle, containerCls = props.containerClass;
+    const label = props["aria-label"] ?? translateLabel(state.labels, "Lightbox");
+    const fade = `${state.animation.fade}ms`;
+    const on = state.on;
+    return (<Provider token={OverlayTriggerStateContext} value={overlay}>
+      <ModalOverlay isKeyboardDismissDisabled={!state.controller.closeOnEscape} class={overlayCls} style={{ "--rv-lightbox-fade": fade, ...overlayStyle }} data-lightbox-overlay="" onEnter={() => on.onEntering?.()} onExit={() => on.onExiting?.()}>
+        {(values) => (<Modal class={cls} style={{ position: "absolute", inset: "0", ...style }} data-lightbox-root="">
+            {() => (<LightboxView state={state} entering={values.isEntering} dialogLabel={label} class={containerCls}>
+                {children}
+              </LightboxView>)}
+          </Modal>)}
+      </ModalOverlay>
+    </Provider>);
+}
+/** Default parts when a lightbox has no children (YARL default modules: carousel, toolbar with Close, navigation). */
+function DefaultParts(props) {
+    const inline = props.inline;
+    return (<>
+      <LightboxCarousel />
+      {inline ? null : (<LightboxToolbar>
+          <LightboxClose />
+        </LightboxToolbar>)}
+      <LightboxPrevious />
+      <LightboxNext />
+    </>);
+}
+/** The interactive container: pointer swipe / pull, keyboard, wheel (YARL `Controller`). */
+export function LightboxView(props) {
+    const state = props.state;
+    const children = props.children;
+    const cls = props.class ?? "rv-LightboxContainer", style = props.style, dialogLabel = props.dialogLabel;
+    // Opening with a changed `index`: start there (no animation).
+    untrack(() => syncLightboxIndex(state));
+    if (!state.inline) {
+        const on = state.on, entering = props.entering;
+        clientEffect(() => untrack(() => {
+            ensureLightbox(state);
+            if (state.controller.focus)
+                focusLightbox(state);
+            on.onView?.({ index: lightboxIndex(state) });
+            queueMicrotask(() => syncLightboxMedia(state));
+        }));
+        // Controlled `index` changed from outside while open: jump.
+        clientEffect(() => syncLightboxIndex(state));
+        let entered = false;
+        clientEffect(() => {
+            if (entered || (entering && entering()))
+                return;
+            entered = true;
+            untrack(() => on.onEntered?.());
+        });
+        onCleanup(() => {
+            if (typeof document !== "undefined")
+                on.onExited?.();
+        });
+    }
+    return (<div id={`${state.id}-container`} class={cls} tabIndex={-1} role={dialogLabel === undefined ? undefined : "dialog"} aria-modal={dialogLabel === undefined ? undefined : "true"} aria-label={dialogLabel} data-lightbox-container="" data-inline={dataBool(state.inline)} data-gesture={state.gesture()} style={{
+            position: "absolute",
+            inset: "0",
+            overflow: "hidden",
+            display: "grid",
+            gridTemplate: `"top top top" auto "start main end" minmax(0, 1fr) "bottom bottom bottom" auto / auto minmax(0, 1fr) auto`,
+            touchAction: state.controller.touchAction,
+            ...style,
+        }} onPointerDown={(event) => lightboxPointerDown(state, event)} onPointerMove={(event) => lightboxPointerMove(state, event)} onPointerUp={(event) => lightboxPointerUp(state, event)} onPointerCancel={(event) => lightboxPointerUp(state, event)} onPointerEnter={() => ensureLightbox(state)} onFocusIn={() => ensureLightbox(state)} onKeyDown={(event) => lightboxKeyDown(state, event)}>
+      <Provider token={LightboxContext} value={state}>
+        {children === undefined ? <DefaultParts inline={state.inline}/> : renderSlot(children)}
+      </Provider>
+    </div>);
+}
+/** The slides around the current one (2 × preload + 1), APG carousel semantics (YARL `Carousel`). */
+export function LightboxCarousel(props) {
+    const state = useLightbox();
+    const render = props.children;
+    const renderFn = typeof render === "function" && !isSlot(render) ? render : undefined;
+    const cls = props.class ?? "rv-LightboxCarousel", style = props.style, slideCls = props.slideClass ?? "rv-LightboxSlide", slideStyle = props.slideStyle;
+    const labels = state.labels;
+    const items = computed(() => lightboxWindow(state));
+    const spacing = lightboxLengthCss(state.carousel.spacing);
+    const padding = lightboxLengthCss(state.carousel.padding);
+    return (<div id={`${state.id}-carousel`} class={cls} role="region" aria-roledescription={translateLabel(labels, "Carousel")} aria-label={translateLabel(labels, "Photo gallery")} aria-live={state.playing() ? "off" : "polite"} data-lightbox-carousel="" style={{ position: "relative", gridArea: "main", minWidth: "0", minHeight: "0", ...style }}>
+      <For each={items} by={(item) => item.key}>
+        {(item) => (<LightboxSlideBox state={state} slide={untrack(item).slide} index={untrack(item).index} position={untrack(item).offset + untrack(state.globalIndex)} class={slideCls} style={slideStyle} spacing={spacing} padding={padding} render={renderFn}/>)}
+      </For>
+    </div>);
+}
+function LightboxSlideBox(props) {
+    const { state, slide, index, position, spacing, padding, render } = props;
+    const cls = props.class, style = props.style;
+    const labels = state.labels;
+    const value = { slide, index, position };
+    const info = { index, offset: () => position - state.globalIndex() };
+    return (<div class={cls} role="group" aria-roledescription={translateLabel(labels, "Slide")} aria-label={translateSlideCounter(labels, lightboxSlides(state).length, index)} data-lightbox-slide="" data-index={index} data-type={slide.type ?? "image"} data-current={dataBool(position === state.globalIndex())} inert={position === state.globalIndex() ? undefined : true} style={{
+            position: "absolute",
+            top: "0",
+            bottom: "0",
+            width: "100%",
+            insetInlineStart: `calc(${position - state.globalIndex()} * (100% + ${spacing}))`,
+            boxSizing: "border-box",
+            padding,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            containerType: "size",
+            ...style,
+        }}>
+      <Provider token={LightboxSlideContext} value={value}>
+        {render ? render(slide, info) : isImageSlide(slide) ? <LightboxImage /> : null}
+      </Provider>
+    </div>);
+}
+const maxOf = (values) => {
+    const max = Math.max(...values.filter(Boolean));
+    return Number.isFinite(max) ? max : 0;
+};
+/** An image slide: `srcset` / `sizes`, `object-fit`, loading / error placeholder, `onClick` (YARL `ImageSlide`). */
+export function LightboxImage(props) {
+    const state = useLightbox();
+    const ctx = useLightboxSlide();
+    const image = (props.slide ?? ctx?.slide);
+    const position = ctx?.position;
+    const index = ctx?.index ?? 0;
+    const cls = props.class ?? "rv-LightboxImage", style = props.style, imageProps = props.imageProps, loading = props.loading, error = props.error, placeholderCls = props.placeholderClass ?? "rv-LightboxPlaceholder";
+    // Server-rendered images (inline) may load before the page resumes: assume complete and bind no load / error
+    // handlers (a cold `load` would boot the page and replay per image); browser-created ones track their status.
+    const browser = typeof document !== "undefined";
+    const status = signal(browser ? "loading" : "complete");
+    const cover = isImageFitCover(image, state.carousel.imageFit);
+    const maxWidth = maxOf([...(image.srcSet?.map((x) => x.width) ?? []), image.width ?? 0]);
+    const maxHeight = maxOf([...(image.srcSet?.map((x) => x.height) ?? []), image.height ?? 0]);
+    const srcSet = image.srcSet
+        ?.slice()
+        .sort((a, b) => a.width - b.width)
+        .map((item) => `${item.src} ${item.width}w`)
+        .join(", ");
+    const sizes = image.sizes ?? (srcSet ? (maxWidth && maxHeight && !cover ? `min(100vw, ${Math.round((maxWidth / maxHeight) * 1000) / 10}vh)` : "100vw") : undefined);
+    const boxStyle = cover
+        ? { width: "100%", height: "100%", objectFit: "cover" }
+        : maxWidth && maxHeight
+            ? { maxWidth: `min(${maxWidth}px, 100%)`, maxHeight: `min(${maxHeight}px, 100%)`, objectFit: "contain" }
+            : { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" };
+    const on = state.on;
+    return (<>
+      <img {...imageProps} class={cls} data-lightbox-zoomable="" data-cover={dataBool(cover)} data-status={status()} draggable={false} alt={image.alt ?? ""} width={image.width} height={image.height} sizes={sizes} srcSet={srcSet} src={image.src} style={{ ...boxStyle, minWidth: "0", minHeight: "0", userSelect: "none", ...style }} onLoad={browser
+            ? (event) => {
+                const img = event.currentTarget;
+                ("decode" in img ? img.decode() : Promise.resolve())
+                    .catch(() => { })
+                    .then(() => {
+                    if (img.isConnected)
+                        status.set("complete");
+                });
+            }
+            : undefined} onError={browser ? () => status.set("error") : undefined} onClick={() => {
+            if (position === undefined || position === untrack(state.globalIndex))
+                on.onClick?.({ index });
+        }}/>
+      <Show when={() => status() !== "complete" && (status() === "error" ? error !== undefined : loading !== undefined)}>
+        {() => (<div class={placeholderCls} data-status={status()} aria-hidden="true" style={{ position: "absolute", inset: "0", display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
+            {status() === "error" ? renderSlot(error) : renderSlot(loading)}
+          </div>)}
+      </Show>
+    </>);
+}
+/** Toolbar container (YARL `Toolbar`; position it with CSS). */
+export function LightboxToolbar(props) {
+    const cls = props.class ?? "rv-LightboxToolbar", style = props.style, children = props.children;
+    return (<div class={cls} style={style} data-lightbox-toolbar="">
+      {renderSlot(children)}
+    </div>);
+}
+/** Renders toggle-button children (`LightboxToggleChildren`). */
+export const lightboxToggleContent = (children, on) => typeof children === "function" && !isSlot(children) ? children(on) : renderSlot(children);
+/** A labelled icon button (YARL `IconButton`): `type="button"`, `aria-label` + `title`, `data-action`; toggles set `pressed`. */
+export function LightboxButton(props) {
+    const cls = props.class ?? "rv-LightboxButton", style = props.style, label = props.label, children = props.children, isDisabled = props.isDisabled, onPress = props.onPress, action = props.action, pressed = props.pressed, hidden = props.hidden;
+    const disabled = () => (typeof isDisabled === "function" ? isDisabled() : !!isDisabled);
+    const text = () => (typeof label === "function" ? label() : label);
+    return (<button type="button" class={cls} style={style} aria-label={text()} title={text()} aria-pressed={pressed ? String(pressed()) : undefined} hidden={hidden ? hidden() : undefined} data-action={action} disabled={disabled()} data-disabled={dataBool(disabled())} onClick={(event) => onPress?.(event)}>
+      {renderSlot(children)}
+    </button>);
+}
+const labelOf = (state, label, key) => label ?? translateLabel(state.labels, key);
+/** Close button (YARL toolbar `close`). Hidden inline. */
+export function LightboxClose(props) {
+    const state = useLightbox();
+    if (state.inline)
+        return null;
+    const onPress = props.onPress;
+    return (<LightboxButton {...props} action="close" label={labelOf(state, props.label, "Close")} onPress={(event) => {
+            closeLightbox(state);
+            onPress?.(event);
+        }}/>);
+}
+/** Previous button (YARL Navigation); disabled at the start of a finite carousel. */
+export function LightboxPrevious(props) {
+    const state = useLightbox();
+    const onPress = props.onPress;
+    const isDisabled = props.isDisabled;
+    return (<LightboxButton {...props} action="prev" label={labelOf(state, props.label, "Previous")} isDisabled={() => (typeof isDisabled === "function" ? isDisabled() : !!isDisabled) || lightboxNavigation(state).prevDisabled} onPress={(event) => {
+            lightboxPrev(state);
+            onPress?.(event);
+        }}/>);
+}
+/** Next button (YARL Navigation); disabled at the end of a finite carousel. */
+export function LightboxNext(props) {
+    const state = useLightbox();
+    const onPress = props.onPress;
+    const isDisabled = props.isDisabled;
+    return (<LightboxButton {...props} action="next" label={labelOf(state, props.label, "Next")} isDisabled={() => (typeof isDisabled === "function" ? isDisabled() : !!isDisabled) || lightboxNavigation(state).nextDisabled} onPress={(event) => {
+            lightboxNext(state);
+            onPress?.(event);
+        }}/>);
+}
+/** Index of the current slide, for parts outside the carousel (tracked). */
+export const useLightboxIndex = () => {
+    const state = useLightbox();
+    return () => getSlideIndex(state.globalIndex(), lightboxSlides(state).length);
+};

package/lightbox/inline/index.d.ts

@@ -0,0 +1,18 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type LightboxStateProps } from "../state.js";
+export interface LightboxInlineProps extends LightboxStateProps {
+    id?: string;
+    /** Root class. @default "rv-LightboxInline" */
+    class?: string;
+    /** Root style (give it a size: `aspect-ratio`, `height`). */
+    style?: StyleObject;
+    /** Class of the container (gesture surface). @default "rv-LightboxContainer" */
+    containerClass?: string;
+    /** Accessible name of the gallery region. @default labels["Photo gallery"] */
+    "aria-label"?: string;
+    /** Parts (default: carousel + previous / next). */
+    children?: Content | (() => Content);
+}
+/** An inline (in-page) lightbox carousel (YARL Inline plugin). */
+export declare function LightboxInline(props: LightboxInlineProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/inline/index.jsx

@@ -0,0 +1,15 @@
+import { useId } from "../../utils/id.js";
+import { LightboxView } from "../index.jsx";
+import { createLightboxState, translateLabel } from "../state.js";
+/** An inline (in-page) lightbox carousel (YARL Inline plugin). */
+export function LightboxInline(props) {
+    const id = useId(props.id);
+    const state = createLightboxState(props, id);
+    const cls = props.class ?? "rv-LightboxInline", style = props.style, children = props.children, containerCls = props.containerClass;
+    const label = props["aria-label"] ?? translateLabel(state.labels, "Photo gallery");
+    return (<section class={cls} aria-label={label} data-lightbox-inline="" style={{ position: "relative", ...style }}>
+      <LightboxView state={state} class={containerCls}>
+        {children}
+      </LightboxView>
+    </section>);
+}

package/lightbox/pdf/index.d.ts

@@ -0,0 +1,18 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type LightboxSlidePdf } from "../state.js";
+export interface LightboxPdfProps {
+    /** The PDF slide (default: the enclosing carousel slide). */
+    slide?: LightboxSlidePdf;
+    /** @default "rv-LightboxPdf" */
+    class?: string;
+    style?: StyleObject;
+    /** Class of the fallback link. @default "rv-LightboxPdfFallback" */
+    fallbackClass?: string;
+    /** Fallback content inside the link (default: the "Open PDF" label). */
+    fallback?: Content;
+    /** Fill the slide box instead of keeping the page aspect ratio. @default false */
+    fill?: boolean;
+}
+/** A PDF slide: native viewer (`<object type="application/pdf">`) with a link fallback. */
+export declare function LightboxPdf(props: LightboxPdfProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/pdf/index.jsx

@@ -0,0 +1,31 @@
+// Rivet-authored (no YARL counterpart): a PDF slide in the browser's built-in viewer.
+// - `<object type="application/pdf">` (Chrome / Edge / Firefox / Safari desktop viewers) whose fallback content is a link
+//   to the file (mobile browsers without an inline viewer, viewers disabled by policy). No pdf.js: 0 B of viewer code, the
+//   native viewer brings search / print / zoom; pdf.js (~1 MB) would only buy custom chrome.
+// - The `<object>` is mounted while the slide is current or a direct neighbour (preload, like images), so the
+//   lightbox fetches nothing until opened; the carousel window drops it further away.
+// - Sizing is CSS only (slide box = size container): page aspect ratio (A4 default) clamped to the slide box.
+import { Show } from "@rivetjs/runtime/dom";
+import { renderSlot } from "@rivetjs/runtime/slot";
+import { useLightbox, useLightboxSlide } from "../index.jsx";
+import { translateLabel } from "../state.js";
+/** A PDF slide: native viewer (`<object type="application/pdf">`) with a link fallback. */
+export function LightboxPdf(props) {
+    const state = useLightbox();
+    const ctx = useLightboxSlide();
+    const slide = (props.slide ?? ctx?.slide);
+    const position = ctx?.position;
+    const cls = props.class ?? "rv-LightboxPdf", style = props.style, fallbackCls = props.fallbackClass ?? "rv-LightboxPdfFallback", fallback = props.fallback;
+    const width = slide.width ?? 1240, height = slide.height ?? 1754;
+    const box = props.fill
+        ? { width: "100%", height: "100%" }
+        : { width: `min(100cqw, calc(100cqh * ${width} / ${height}))`, aspectRatio: `${width} / ${height}`, height: "auto" };
+    const label = translateLabel(state.labels, "Open PDF");
+    return (<Show when={() => position === undefined || Math.abs(position - state.globalIndex()) <= 1}>
+      {() => (<object class={cls} data-lightbox-media="" data={slide.src} type="application/pdf" aria-label={slide.title ?? label} style={{ display: "block", border: "0", ...box, ...style }}>
+          <a class={fallbackCls} href={slide.src} target="_blank" rel="noopener" download="">
+            {fallback === undefined ? (slide.title ?? label) : renderSlot(fallback)}
+          </a>
+        </object>)}
+    </Show>);
+}

package/lightbox/share/index.d.ts

@@ -0,0 +1,29 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type LightboxSlide, type LightboxState } from "../state.js";
+/** Custom share handler (YARL `share.share`). */
+export type LightboxShareFunction = (props: {
+    slide: LightboxSlide;
+}) => void;
+/** Whether the browser has the Web Share API (YARL `isShareSupported`). */
+export declare const lightboxShareSupported: () => boolean;
+/** Share data of a slide (YARL `resolveShareData`). */
+export declare function lightboxShareData(slide: LightboxSlide | undefined): ShareData | undefined;
+/** Whether the slide can be shared (YARL `canShare`). */
+export declare const lightboxCanShare: (slide: LightboxSlide | undefined, custom?: LightboxShareFunction) => boolean;
+/** Shares the current slide (YARL Share plugin action). */
+export declare function lightboxShare(state: LightboxState, custom?: LightboxShareFunction): void;
+export interface LightboxShareProps {
+    class?: string;
+    style?: StyleObject;
+    label?: string;
+    children?: Content;
+    /** Custom share (YARL `share.share`; also makes the button visible without the Web Share API). */
+    share?: LightboxShareFunction;
+    /** Called after sharing starts (YARL `on.share`). */
+    onShare?: (props: {
+        index: number;
+    }) => void;
+}
+/** Share button (YARL `ShareButton`): hidden without the Web Share API, disabled when the slide is not shareable. */
+export declare function LightboxShare(props: LightboxShareProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/share/index.jsx

@@ -0,0 +1,43 @@
+import { getOwnerWindow } from "../../utils/dom.js";
+import { LightboxButton, useLightbox } from "../index.jsx";
+import { isImageSlide, lightboxSlide, translateLabel } from "../state.js";
+/** Whether the browser has the Web Share API (YARL `isShareSupported`). */
+export const lightboxShareSupported = () => typeof getOwnerWindow()?.navigator?.share === "function";
+/** Share data of a slide (YARL `resolveShareData`). */
+export function lightboxShareData(slide) {
+    if (!slide || slide.share === false)
+        return undefined;
+    const share = slide.share;
+    if (typeof share === "object")
+        return share.url || share.text || share.title ? { url: share.url, text: share.text, title: share.title } : undefined;
+    if (typeof share === "string")
+        return { url: share };
+    if (isImageSlide(slide) || slide.type === "pdf")
+        return { url: slide.src };
+    return undefined;
+}
+/** Whether the slide can be shared (YARL `canShare`). */
+export const lightboxCanShare = (slide, custom) => !!slide && (custom ? slide.share !== false : !!lightboxShareData(slide));
+/** Shares the current slide (YARL Share plugin action). */
+export function lightboxShare(state, custom) {
+    const slide = lightboxSlide(state);
+    if (!slide || !lightboxCanShare(slide, custom))
+        return;
+    if (custom)
+        custom({ slide });
+    else
+        getOwnerWindow()
+            .navigator.share(lightboxShareData(slide))
+            .catch(() => { });
+}
+/** Share button (YARL `ShareButton`): hidden without the Web Share API, disabled when the slide is not shareable. */
+export function LightboxShare(props) {
+    const state = useLightbox();
+    const custom = props.share, onShare = props.onShare;
+    return (<LightboxButton class={props.class} style={props.style} action="share" label={props.label ?? translateLabel(state.labels, "Share")} hidden={() => !custom && typeof document !== "undefined" && !lightboxShareSupported()} isDisabled={() => !lightboxCanShare(lightboxSlide(state), custom)} onPress={() => {
+            lightboxShare(state, custom);
+            onShare?.({ index: state.index.value() });
+        }}>
+      {props.children}
+    </LightboxButton>);
+}

package/lightbox/slideshow/index.d.ts

@@ -0,0 +1,24 @@
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type LightboxToggleChildren } from "../index.jsx";
+import { type LightboxState } from "../state.js";
+/** Starts the slideshow (YARL `slideshow.ref.play`). */
+export declare function lightboxPlay(state: LightboxState): void;
+/** Stops the slideshow (YARL `slideshow.ref.pause`). */
+export declare function lightboxPause(state: LightboxState): void;
+export interface LightboxSlideshowProps {
+    class?: string;
+    style?: StyleObject;
+    /** Label override (default "Play" / "Pause"). */
+    label?: string;
+    /** Icon: content, or a function of the playing state. */
+    children?: LightboxToggleChildren;
+    /** Start playing when the part mounts. @default false */
+    autoplay?: boolean;
+    /** Delay between slides (ms). @default 3000 */
+    delay?: number;
+    /** YARL `on.slideshowStart` / `on.slideshowStop`. */
+    onStart?: () => void;
+    onStop?: () => void;
+}
+/** Play / pause button (YARL `SlideshowButton`); disabled on the last slide of a finite carousel. */
+export declare function LightboxSlideshow(props: LightboxSlideshowProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/slideshow/index.jsx

@@ -0,0 +1,118 @@
+// Ported from yet-another-react-lightbox (src/plugins/slideshow/{Slideshow.tsx,SlideshowButton.tsx,
+// SlideshowContext.tsx,props.ts}, v3.32.2), MIT, © Igor Danchenko.
+// Rivet:
+// - `<LightboxSlideshow>` play / pause button part (YARL SlideshowButton) + free functions `lightboxPlay` /
+//   `lightboxPause` (YARL `slideshow.ref`); playing state = `state.playing` (resumable; the carousel sets
+//   `aria-live="off"` while playing, APG rotation).
+// - Wait rule = YARL's: the next slide is scheduled `delay` ms after the current slide is ready — an image that is still
+//   loading, or a video that is playing, holds the slideshow until it loads / ends (YARL slide status events; here read
+//   from the current slide's DOM: `img.complete`, `video.paused` / `ended`). A finite carousel stops at the last slide.
+// - Timers live in a WeakMap keyed by the state (never serialized); the `rv-lightbox-view` event (core, after every
+//   slide change) reschedules. `autoplay` starts when the part mounts (an inline lightbox with `autoplay` runs at load).
+import { onCleanup, untrack } from "@rivetjs/reactivity";
+import { clientEffect } from "@rivetjs/runtime/dom";
+import { lightboxContainer, lightboxNext } from "../behaviour.js";
+import { LightboxButton, lightboxToggleContent, useLightbox } from "../index.jsx";
+import { getSlideIndex, lightboxSlides, translateLabel } from "../state.js";
+const runners = new WeakMap();
+const atEnd = (state) => {
+    const count = lightboxSlides(state).length;
+    return state.carousel.finite && getSlideIndex(state.globalIndex(), count) >= count - 1;
+};
+function clear(r) {
+    clearTimeout(r.timer);
+    r.timer = undefined;
+    r.wait?.();
+    r.wait = undefined;
+}
+function schedule(state, r) {
+    clear(r);
+    if (!untrack(state.playing))
+        return;
+    if (untrack(() => atEnd(state))) {
+        lightboxPause(state);
+        return;
+    }
+    const slide = lightboxContainer(state)?.querySelector("[data-lightbox-slide][data-current]");
+    const img = slide?.querySelector("img");
+    const video = slide?.querySelector("video");
+    const hold = (el, events) => {
+        const go = () => schedule(state, r);
+        for (const e of events)
+            el.addEventListener(e, go, { once: true });
+        r.wait = () => {
+            for (const e of events)
+                el.removeEventListener(e, go);
+        };
+    };
+    if (video && !video.paused && !video.ended)
+        hold(video, ["ended", "pause"]);
+    else if (img && !img.complete)
+        hold(img, ["load", "error"]);
+    else
+        r.timer = setTimeout(() => {
+            r.timer = undefined;
+            if (untrack(state.playing))
+                lightboxNext(state);
+        }, r.delay);
+}
+/** Starts the slideshow (YARL `slideshow.ref.play`). */
+export function lightboxPlay(state) {
+    const r = runners.get(state);
+    if (!r || untrack(state.playing) || untrack(() => atEnd(state)))
+        return;
+    r.container = lightboxContainer(state);
+    r.container?.addEventListener("rv-lightbox-view", r.onView);
+    state.playing.set(true);
+    r.onStart?.();
+    schedule(state, r);
+}
+/** Stops the slideshow (YARL `slideshow.ref.pause`). */
+export function lightboxPause(state) {
+    const r = runners.get(state);
+    if (!untrack(state.playing))
+        return;
+    state.playing.set(false);
+    if (!r)
+        return;
+    clear(r);
+    r.container?.removeEventListener("rv-lightbox-view", r.onView);
+    r.container = null;
+    r.onStop?.();
+}
+function runner(state, delay, onStart, onStop) {
+    let r = runners.get(state);
+    if (!r) {
+        const created = { delay, timer: undefined, wait: undefined, container: null, onView: () => schedule(state, created), onStart, onStop };
+        runners.set(state, created);
+        r = created;
+    }
+    r.delay = delay;
+    r.onStart = onStart;
+    r.onStop = onStop;
+    return r;
+}
+/** Play / pause button (YARL `SlideshowButton`); disabled on the last slide of a finite carousel. */
+export function LightboxSlideshow(props) {
+    const state = useLightbox();
+    const label = props.label, children = props.children, autoplay = props.autoplay ?? false, delay = props.delay ?? 3000, onStart = props.onStart, onStop = props.onStop;
+    if (autoplay)
+        clientEffect(() => untrack(() => {
+            runner(state, delay, onStart, onStop);
+            lightboxPlay(state);
+        }));
+    onCleanup(() => {
+        if (typeof document !== "undefined")
+            lightboxPause(state);
+    });
+    const on = () => state.playing();
+    return (<LightboxButton class={props.class} style={props.style} action="slideshow" pressed={on} isDisabled={() => !state.playing() && atEnd(state)} label={() => label ?? translateLabel(state.labels, state.playing() ? "Pause" : "Play")} onPress={() => {
+            runner(state, delay, onStart, onStop);
+            if (untrack(state.playing))
+                lightboxPause(state);
+            else
+                lightboxPlay(state);
+        }}>
+      {lightboxToggleContent(children, on)}
+    </LightboxButton>);
+}