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

package/lightbox/counter/index.jsx

@@ -0,0 +1,10 @@
+import { useLightbox } from "../index.jsx";
+import { lightboxIndex, lightboxSlides } from "../state.js";
+/** Slide counter `index / total` (YARL Counter). Renders nothing for an empty lightbox. */
+export function LightboxCounter(props) {
+    const state = useLightbox();
+    const cls = props.class ?? "rv-LightboxCounter", style = props.style, separator = props.separator ?? "/";
+    return (<div class={cls} style={style} aria-hidden="true" data-lightbox-counter="" hidden={lightboxSlides(state).length === 0}>
+      {`${lightboxIndex(state) + 1} ${separator} ${lightboxSlides(state).length}`}
+    </div>);
+}

package/lightbox/download/index.d.ts

@@ -0,0 +1,32 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type LightboxSlide, type LightboxState } from "../state.js";
+/** Custom download handler (YARL `download.download`). */
+export type LightboxDownloadFunction = (props: {
+    slide: LightboxSlide;
+    saveAs: (source: string | Blob, name?: string) => void;
+}) => void;
+/** The download URL of a slide (YARL `resolveDownloadUrl`). */
+export declare function lightboxDownloadUrl(slide: LightboxSlide | undefined): string | undefined;
+/** The download file name of a slide (YARL `downloadFilename` / `download.filename`). */
+export declare function lightboxDownloadFilename(slide: LightboxSlide | undefined): string | undefined;
+/** Whether the slide can be downloaded (YARL `canDownload`). */
+export declare function lightboxCanDownload(slide: LightboxSlide | undefined, custom?: LightboxDownloadFunction): boolean;
+/** Saves a URL or a Blob as a file (YARL `FileSaver.saveAs`). */
+export declare function lightboxSaveAs(source: string | Blob, name?: string): void;
+/** Downloads the current slide (YARL Download plugin action). */
+export declare function lightboxDownload(state: LightboxState, custom?: LightboxDownloadFunction): void;
+export interface LightboxDownloadProps {
+    class?: string;
+    style?: StyleObject;
+    label?: string;
+    children?: Content;
+    /** Custom download (YARL `download.download`). */
+    download?: LightboxDownloadFunction;
+    /** Called after a download starts (YARL `on.download`). */
+    onDownload?: (props: {
+        index: number;
+    }) => void;
+}
+/** Download button (YARL `DownloadButton`): disabled when the current slide cannot be downloaded. */
+export declare function LightboxDownload(props: LightboxDownloadProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/download/index.jsx

@@ -0,0 +1,89 @@
+import { getOwnerWindow } from "../../utils/dom.js";
+import { LightboxButton, useLightbox } from "../index.jsx";
+import { isImageSlide, lightboxSlide, translateLabel } from "../state.js";
+/** The download URL of a slide (YARL `resolveDownloadUrl`). */
+export function lightboxDownloadUrl(slide) {
+    if (!slide)
+        return undefined;
+    const d = slide.download;
+    return (slide.downloadUrl ||
+        (typeof d === "string" ? d : typeof d === "object" ? d.url : undefined) ||
+        (isImageSlide(slide) || slide.type === "pdf" ? slide.src : undefined));
+}
+/** The download file name of a slide (YARL `downloadFilename` / `download.filename`). */
+export function lightboxDownloadFilename(slide) {
+    if (!slide)
+        return undefined;
+    const d = slide.download;
+    return slide.downloadFilename || (typeof d === "object" ? d.filename : undefined);
+}
+/** Whether the slide can be downloaded (YARL `canDownload`). */
+export function lightboxCanDownload(slide, custom) {
+    if (!slide)
+        return false;
+    return custom ? slide.download !== false : slide.download !== false && !!lightboxDownloadUrl(slide);
+}
+const fileName = (url) => {
+    try {
+        return decodeURIComponent(new URL(url, getOwnerWindow()?.location?.href).pathname.split("/").pop() || "download");
+    }
+    catch {
+        return "download";
+    }
+};
+function click(href, name, newTab) {
+    const a = globalThis.document.createElement("a");
+    a.href = href;
+    a.download = name ?? "";
+    a.rel = "noopener";
+    if (newTab)
+        a.target = "_blank";
+    a.dispatchEvent(new MouseEvent("click"));
+}
+/** Saves a URL or a Blob as a file (YARL `FileSaver.saveAs`). */
+export function lightboxSaveAs(source, name) {
+    if (typeof source !== "string") {
+        const url = URL.createObjectURL(source);
+        click(url, name ?? "download", false);
+        setTimeout(() => URL.revokeObjectURL(url), 30_000);
+        return;
+    }
+    const filename = name ?? fileName(source);
+    let sameOrigin = false;
+    try {
+        const loc = getOwnerWindow().location;
+        sameOrigin = new URL(source, loc.href).origin === loc.origin;
+    }
+    catch {
+        // invalid URL: let the browser decide
+    }
+    if (source.startsWith("data:") || source.startsWith("blob:") || sameOrigin) {
+        click(source, filename, false);
+        return;
+    }
+    fetch(source, { mode: "cors" })
+        .then((response) => (response.ok ? response.blob() : Promise.reject(new Error(String(response.status)))))
+        .then((blob) => lightboxSaveAs(blob, filename))
+        .catch(() => click(source, filename, true));
+}
+/** Downloads the current slide (YARL Download plugin action). */
+export function lightboxDownload(state, custom) {
+    const slide = lightboxSlide(state);
+    if (!slide || !lightboxCanDownload(slide, custom))
+        return;
+    if (custom)
+        custom({ slide, saveAs: lightboxSaveAs });
+    else
+        lightboxSaveAs(lightboxDownloadUrl(slide), lightboxDownloadFilename(slide));
+}
+/** Download button (YARL `DownloadButton`): disabled when the current slide cannot be downloaded. */
+export function LightboxDownload(props) {
+    const state = useLightbox();
+    const custom = props.download, onDownload = props.onDownload;
+    return (<LightboxButton class={props.class} style={props.style} action="download" label={props.label ?? translateLabel(state.labels, "Download")} isDisabled={() => !lightboxCanDownload(lightboxSlide(state), custom)} onPress={() => {
+            lightboxDownload(state, custom);
+            onDownload?.({ index: state.index.value() });
+        }}>
+      {props.children}
+    </LightboxButton>);
+}

package/lightbox/embed/index.d.ts

@@ -0,0 +1,15 @@
+import type { StyleObject } from "@rivetjs/runtime/style";
+import type { LightboxSlideEmbed } from "../state.js";
+/** The iframe URL of an embed slide (youtube-nocookie / player.vimeo.com with `dnt=1` / `src`). */
+export declare function lightboxEmbedUrl(slide: LightboxSlideEmbed): string;
+export interface LightboxEmbedProps {
+    /** The embed slide (default: the enclosing carousel slide). */
+    slide?: LightboxSlideEmbed;
+    /** @default "rv-LightboxEmbed" */
+    class?: string;
+    style?: StyleObject;
+    /** Class of the poster image shown while the slide is not current. @default "rv-LightboxEmbedPoster" */
+    posterClass?: string;
+}
+/** An embed slide: an `<iframe>` mounted only while the slide is current (poster otherwise). */
+export declare function LightboxEmbed(props: LightboxEmbedProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/embed/index.jsx

@@ -0,0 +1,58 @@
+// Rivet-authored (no YARL counterpart; YARL users render iframes through `render.slide`): an embed slide for YouTube
+// (youtube-nocookie.com), Vimeo (`dnt=1`) or any iframe URL.
+// - Privacy / cost: the iframe exists only while its slide is the current one (`<Show>` on the slide offset): neighbours
+//   preloaded in the carousel window render the `poster` (or nothing), so a closed or unopened lightbox, and slides not
+//   yet viewed, make no request to the provider. Leaving the slide unmounts the iframe, which stops playback.
+// - Sizing is CSS only (slide box = size container): `width: min(100cqw, 100cqh × ratio)` + `aspect-ratio`.
+import { Show } from "@rivetjs/runtime/dom";
+import { useLightbox, useLightboxSlide } from "../index.jsx";
+/** The iframe URL of an embed slide (youtube-nocookie / player.vimeo.com with `dnt=1` / `src`). */
+export function lightboxEmbedUrl(slide) {
+    if (slide.src)
+        return slide.src;
+    const id = encodeURIComponent(slide.id ?? "");
+    const params = new URLSearchParams();
+    if (slide.provider === "youtube") {
+        params.set("rel", "0");
+        params.set("playsinline", "1");
+        if (slide.autoPlay)
+            params.set("autoplay", "1");
+        if (slide.muted)
+            params.set("mute", "1");
+        if (slide.start)
+            params.set("start", String(Math.floor(slide.start)));
+        return `https://www.youtube-nocookie.com/embed/${id}?${params}`;
+    }
+    if (slide.provider === "vimeo") {
+        params.set("dnt", "1");
+        if (slide.autoPlay)
+            params.set("autoplay", "1");
+        if (slide.muted)
+            params.set("muted", "1");
+        return `https://player.vimeo.com/video/${id}?${params}${slide.start ? `#t=${Math.floor(slide.start)}s` : ""}`;
+    }
+    return "";
+}
+/** An embed slide: an `<iframe>` mounted only while the slide is current (poster otherwise). */
+export function LightboxEmbed(props) {
+    const state = useLightbox();
+    const ctx = useLightboxSlide();
+    const slide = (props.slide ?? ctx?.slide);
+    const position = ctx?.position;
+    const cls = props.class ?? "rv-LightboxEmbed", style = props.style, posterCls = props.posterClass ?? "rv-LightboxEmbedPoster";
+    const width = slide.width ?? 1280, height = slide.height ?? 720;
+    const src = lightboxEmbedUrl(slide);
+    const allow = slide.allow ?? "autoplay; fullscreen; picture-in-picture; encrypted-media";
+    const poster = slide.poster;
+    const box = {
+        display: "block",
+        border: "0",
+        width: `min(100cqw, calc(100cqh * ${width} / ${height}))`,
+        aspectRatio: `${width} / ${height}`,
+        height: "auto",
+        ...style,
+    };
+    return (<Show when={() => position === undefined || position === state.globalIndex()} fallback={() => (poster ? <img class={posterCls} src={poster} alt="" draggable={false} style={{ ...box, objectFit: "cover" }}/> : null)}>
+      {() => (<iframe class={cls} data-lightbox-media="" src={src} title={slide.title} width={width} height={height} allow={allow} allowFullScreen referrerPolicy="strict-origin-when-cross-origin" loading="lazy" style={box}/>)}
+    </Show>);
+}

package/lightbox/fullscreen/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";
+/** Whether the Fullscreen API is available (YARL `isFullscreenEnabled`). Server: `true` (unknown). */
+export declare function lightboxFullscreenEnabled(): boolean;
+/** Enters fullscreen (YARL `fullscreen.ref.enter`). */
+export declare function lightboxEnterFullscreen(state: LightboxState): void;
+/** Exits fullscreen (YARL `fullscreen.ref.exit`). */
+export declare function lightboxExitFullscreen(state: LightboxState): void;
+export interface LightboxFullscreenProps {
+    class?: string;
+    style?: StyleObject;
+    /** Label override (default "Enter Fullscreen" / "Exit Fullscreen"). */
+    label?: string;
+    /** Icon: content, or a function of the fullscreen state. */
+    children?: LightboxToggleChildren;
+    /** Enter fullscreen when the lightbox opens. @default false */
+    auto?: boolean;
+    /** Called on enter / exit (YARL `on.enterFullscreen` / `on.exitFullscreen`). */
+    onEnter?: () => void;
+    onExit?: () => void;
+}
+/** Fullscreen toggle button (YARL `FullscreenButton`); hidden without the Fullscreen API. */
+export declare function LightboxFullscreen(props: LightboxFullscreenProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/lightbox/fullscreen/index.jsx

@@ -0,0 +1,80 @@
+// Ported from yet-another-react-lightbox (src/plugins/fullscreen/{Fullscreen.tsx,FullscreenButton.tsx,
+// FullscreenContext.tsx,props.ts}, v3.32.2), MIT, © Igor Danchenko.
+// Rivet:
+// - `<LightboxFullscreen>` toggle button part; the fullscreen element is the lightbox root (`[data-lightbox-root]`, or the
+//   inline root / container), with WebKit prefixes like YARL.
+// - State in `state.fullscreen` (resumable), synced from `fullscreenchange` (listener installed on first use).
+// - `auto`: enter when the (modal) lightbox opens (YARL `auto`); leaving the lightbox exits fullscreen.
+// - Hidden when the Fullscreen API is unavailable (YARL renders nothing; iOS Safari).
+import { onCleanup, untrack } from "@rivetjs/reactivity";
+import { clientEffect } from "@rivetjs/runtime/dom";
+import { lightboxContainer } from "../behaviour.js";
+import { LightboxButton, lightboxToggleContent, useLightbox } from "../index.jsx";
+import { translateLabel } from "../state.js";
+const fsDoc = () => globalThis.document;
+/** Whether the Fullscreen API is available (YARL `isFullscreenEnabled`). Server: `true` (unknown). */
+export function lightboxFullscreenEnabled() {
+    const d = fsDoc();
+    return !d || !!(d.fullscreenEnabled ?? d.webkitFullscreenEnabled);
+}
+const fullscreenElement = () => {
+    const d = fsDoc();
+    return d?.fullscreenElement ?? d?.webkitFullscreenElement;
+};
+function target(state) {
+    const container = lightboxContainer(state);
+    return (container?.closest("[data-lightbox-root],[data-lightbox-inline]") ?? container);
+}
+const listening = new WeakSet();
+function listen(state) {
+    const d = fsDoc();
+    if (!d || listening.has(state))
+        return;
+    listening.add(state);
+    const sync = () => {
+        const el = target(state);
+        state.fullscreen.set(!!el && fullscreenElement() === el);
+    };
+    d.addEventListener("fullscreenchange", sync);
+    d.addEventListener("webkitfullscreenchange", sync);
+}
+/** Enters fullscreen (YARL `fullscreen.ref.enter`). */
+export function lightboxEnterFullscreen(state) {
+    const el = target(state);
+    if (!el || !lightboxFullscreenEnabled())
+        return;
+    listen(state);
+    const request = el.requestFullscreen?.bind(el) ?? el.webkitRequestFullscreen?.bind(el);
+    request?.()?.catch?.(() => { });
+}
+/** Exits fullscreen (YARL `fullscreen.ref.exit`). */
+export function lightboxExitFullscreen(state) {
+    const d = fsDoc();
+    const el = target(state);
+    if (!d || !el || fullscreenElement() !== el)
+        return;
+    const exit = d.exitFullscreen?.bind(d) ?? d.webkitExitFullscreen?.bind(d);
+    exit?.()?.catch?.(() => { });
+}
+/** Fullscreen toggle button (YARL `FullscreenButton`); hidden without the Fullscreen API. */
+export function LightboxFullscreen(props) {
+    const state = useLightbox();
+    const label = props.label, children = props.children, onEnter = props.onEnter, onExit = props.onExit;
+    if (props.auto)
+        clientEffect(() => untrack(() => lightboxEnterFullscreen(state)));
+    if (!state.inline)
+        onCleanup(() => lightboxExitFullscreen(state));
+    const on = () => state.fullscreen();
+    return (<LightboxButton class={props.class} style={props.style} action="fullscreen" pressed={on} hidden={() => !lightboxFullscreenEnabled()} label={() => label ?? translateLabel(state.labels, state.fullscreen() ? "Exit Fullscreen" : "Enter Fullscreen")} onPress={() => {
+            if (state.fullscreen()) {
+                lightboxExitFullscreen(state);
+                onExit?.();
+            }
+            else {
+                lightboxEnterFullscreen(state);
+                onEnter?.();
+            }
+        }}>
+      {lightboxToggleContent(children, on)}
+    </LightboxButton>);
+}

package/lightbox/index.d.ts

@@ -0,0 +1,129 @@
+import type { Content, JSX } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type OverlayTriggerProps } from "../state/overlays.js";
+import { type LightboxSlide, type LightboxSlideImage, type LightboxState, type LightboxStateProps } from "./state.js";
+export * from "./state.js";
+export * from "./behaviour.js";
+/** The lightbox state for the parts (id `rv-lightbox`). */
+export declare const LightboxContext: import("@rivetjs/reactivity").Context<LightboxState | null>;
+/** One rendered slide (id `rv-lightbox-slide`): the slide, its index and its global position (offset = position − globalIndex). */
+export interface LightboxSlideContextValue {
+    slide: LightboxSlide;
+    index: number;
+    position: number;
+}
+export declare const LightboxSlideContext: import("@rivetjs/reactivity").Context<LightboxSlideContextValue | null>;
+/** The enclosing lightbox state (throws outside a lightbox). */
+export declare function useLightbox(): LightboxState;
+/** The enclosing slide (`null` outside a carousel slide). */
+export declare const useLightboxSlide: () => LightboxSlideContextValue | null;
+/** Offset of a rendered slide from the current one (tracked; 0 = current). */
+export declare const lightboxSlideOffset: (state: LightboxState, slide: LightboxSlideContextValue) => number;
+export interface LightboxProps extends LightboxStateProps, OverlayTriggerProps {
+    id?: string;
+    /** Class of the dialog element. @default "rv-Lightbox" */
+    class?: string;
+    style?: StyleObject;
+    /** Class of the backdrop / overlay element. @default "rv-LightboxOverlay" */
+    overlayClass?: string;
+    overlayStyle?: StyleObject;
+    /** Class of the container (gesture surface, `role="dialog"`). @default "rv-LightboxContainer" */
+    containerClass?: string;
+    /** Accessible name of the dialog. @default labels.Lightbox */
+    "aria-label"?: string;
+    /** Parts (a render function: the content is created when the lightbox opens). Default: carousel, close, prev / next. */
+    children?: Content | (() => Content);
+}
+/**
+ * A modal media lightbox (YARL `<Lightbox>`): portal on the cdk overlay layer, focus trap + restore, Escape, scroll lock,
+ * swipe / pull / wheel / keyboard navigation.
+ */
+export declare function Lightbox(props: LightboxProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface LightboxViewProps {
+    state: LightboxState;
+    /** Overlay entering accessor (modal only): `onEntered` fires when it turns false. */
+    entering?: () => boolean;
+    /** Modal: the container is the `role="dialog"` element with this accessible name. */
+    dialogLabel?: string;
+    /** @default "rv-LightboxContainer" */
+    class?: string;
+    style?: StyleObject;
+    children?: Content | (() => Content);
+}
+/** The interactive container: pointer swipe / pull, keyboard, wheel (YARL `Controller`). */
+export declare function LightboxView(props: LightboxViewProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** What a slide render function gets besides the slide. */
+export interface LightboxRenderSlideInfo {
+    /** Slide index in `[0, n)`. */
+    index: number;
+    /** Offset from the current slide (tracked accessor; 0 = current). */
+    offset: () => number;
+}
+export interface LightboxCarouselProps {
+    /** @default "rv-LightboxCarousel" */
+    class?: string;
+    style?: StyleObject;
+    /** Class of every slide box. @default "rv-LightboxSlide" */
+    slideClass?: string;
+    slideStyle?: StyleObject;
+    /** Renders a slide (YARL `render.slide`); default: `<LightboxImage />` for image slides, nothing for other types. */
+    children?: (slide: LightboxSlide, info: LightboxRenderSlideInfo) => Content;
+}
+/** The slides around the current one (2 × preload + 1), APG carousel semantics (YARL `Carousel`). */
+export declare function LightboxCarousel(props: LightboxCarouselProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface LightboxImageProps {
+    /** The image slide (default: the enclosing carousel slide). */
+    slide?: LightboxSlideImage;
+    /** @default "rv-LightboxImage" */
+    class?: string;
+    style?: StyleObject;
+    /** Extra `<img>` attributes (YARL `carousel.imageProps`). */
+    imageProps?: JSX.IntrinsicElements["img"];
+    /** Content shown while loading (YARL `render.iconLoading`). */
+    loading?: Content;
+    /** Content shown when the image failed (YARL `render.iconError`). */
+    error?: Content;
+    /** Class of the loading / error placeholder. @default "rv-LightboxPlaceholder" */
+    placeholderClass?: string;
+}
+/** An image slide: `srcset` / `sizes`, `object-fit`, loading / error placeholder, `onClick` (YARL `ImageSlide`). */
+export declare function LightboxImage(props: LightboxImageProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface LightboxToolbarProps {
+    /** @default "rv-LightboxToolbar" */
+    class?: string;
+    style?: StyleObject;
+    children?: Content;
+}
+/** Toolbar container (YARL `Toolbar`; position it with CSS). */
+export declare function LightboxToolbar(props: LightboxToolbarProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface LightboxButtonProps {
+    /** @default "rv-LightboxButton" */
+    class?: string;
+    style?: StyleObject;
+    /** `aria-label` + `title` (default: the part's label). */
+    label?: string;
+    /** Icon / content. */
+    children?: Content;
+    /** Disabled (value or accessor). */
+    isDisabled?: boolean | (() => boolean);
+    onPress?: (event: MouseEvent) => void;
+}
+/** Content of a toggle button: plain content, or a function of the toggle's state accessor (`(on) => <Show when={on}>…`). */
+export type LightboxToggleChildren = Content | ((on: () => boolean) => Content);
+/** Renders toggle-button children (`LightboxToggleChildren`). */
+export declare const lightboxToggleContent: (children: LightboxToggleChildren | undefined, on: () => boolean) => Content;
+/** A labelled icon button (YARL `IconButton`): `type="button"`, `aria-label` + `title`, `data-action`; toggles set `pressed`. */
+export declare function LightboxButton(props: Omit<LightboxButtonProps, "label"> & {
+    label?: string | (() => string);
+    action?: string;
+    pressed?: () => boolean;
+    hidden?: () => boolean;
+}): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Close button (YARL toolbar `close`). Hidden inline. */
+export declare function LightboxClose(props: LightboxButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+/** Previous button (YARL Navigation); disabled at the start of a finite carousel. */
+export declare function LightboxPrevious(props: LightboxButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Next button (YARL Navigation); disabled at the end of a finite carousel. */
+export declare function LightboxNext(props: LightboxButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Index of the current slide, for parts outside the carousel (tracked). */
+export declare const useLightboxIndex: () => (() => number);