@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/media/focal-point.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { MediaAsset } from "./types.js";
+declare const focalLabels: {
+    label: string;
+    roledescription: string;
+    valuetext: string;
+    instructions: string;
+    previews: string;
+    reset: string;
+};
+export type FocalPointLabels = typeof focalLabels;
+export type FocalPoint = {
+    x: number;
+    y: number;
+};
+export interface FocalPointPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    src: string | MediaAsset;
+    /** 0..1 in image space (not mirrored in RTL). */
+    value?: FocalPoint;
+    defaultValue?: FocalPoint;
+    /** Fires while dragging and on every key press. */
+    onValueChange?: (value: FocalPoint) => void;
+    /** Fires once when a drag or key press ends (autosave here). */
+    onValueCommit?: (value: FocalPoint) => void;
+    /** Live crop previews next to the image. Default `["1/1", "16/9", "4/5"]`; `false` hides them. */
+    previews?: false | ("1/1" | "16/9" | "4/5" | "4/3" | "1.91/1" | "3/2")[];
+    /** Max height of the image stage. Default 20rem. */
+    maxHeight?: number | string;
+    disabled?: boolean;
+    labels?: Partial<FocalPointLabels>;
+}
+/**
+ * Marks the part of an image that must stay in view when layouts crop it. A draggable marker over
+ * the image plus live previews in common ratios. The marker is a focusable 2-D control:
+ * arrows step 1%, Shift + arrows 10%, Home centres it.
+ *
+ * ```tsx
+ * <FocalPointPicker src={asset} defaultValue={asset.focalPoint} onValueCommit={(focalPoint) => adapter.update(asset.id, { focalPoint })} />
+ * ```
+ */
+export declare const FocalPointPicker: React.ForwardRefExoticComponent<FocalPointPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/media/focal-point.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Image } from "../components/image.js";
+import { isMediaAsset } from "./media-provider.js";
+const focalLabels = {
+    label: "Focal point",
+    roledescription: "focal point",
+    valuetext: "horizontal {x}, vertical {y}",
+    instructions: "Click or drag on the image, or use the arrow keys (Shift for bigger steps), to mark the part that must stay in view when the image is cropped.",
+    previews: "Crop previews",
+    reset: "Center",
+};
+const clamp = (n) => Math.min(1, Math.max(0, n));
+const round = (n) => Math.round(n * 1000) / 1000;
+/**
+ * Marks the part of an image that must stay in view when layouts crop it. A draggable marker over
+ * the image plus live previews in common ratios. The marker is a focusable 2-D control:
+ * arrows step 1%, Shift + arrows 10%, Home centres it.
+ *
+ * ```tsx
+ * <FocalPointPicker src={asset} defaultValue={asset.focalPoint} onValueCommit={(focalPoint) => adapter.update(asset.id, { focalPoint })} />
+ * ```
+ */
+export const FocalPointPicker = React.forwardRef(function FocalPointPicker({ src, value, defaultValue, onValueChange, onValueCommit, previews = ["1/1", "16/9", "4/5"], maxHeight = "20rem", disabled, labels, className, ...props }, ref) {
+    const t = useLabels("focalPoint", focalLabels, labels);
+    const { locale } = useLocale();
+    const [point, setPoint] = useControllableState({ value, defaultValue: defaultValue ?? (isMediaAsset(src) ? src.focalPoint : undefined) ?? { x: 0.5, y: 0.5 }, onChange: onValueChange, name: "FocalPointPicker" });
+    const stage = React.useRef(null);
+    const dragging = React.useRef(false);
+    const latest = React.useRef(point);
+    latest.current = point;
+    const instructionsId = React.useId();
+    const url = isMediaAsset(src) ? src.url : src;
+    const pct = React.useMemo(() => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 }), [locale]);
+    const fromPointer = (e) => {
+        const r = stage.current?.getBoundingClientRect();
+        if (!r || !r.width || !r.height)
+            return latest.current;
+        return { x: round(clamp((e.clientX - r.left) / r.width)), y: round(clamp((e.clientY - r.top) / r.height)) };
+    };
+    const onPointerDown = (e) => {
+        if (disabled || e.button !== 0)
+            return;
+        e.preventDefault();
+        dragging.current = true;
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        const next = fromPointer(e);
+        setPoint(next);
+        latest.current = next;
+        stage.current?.querySelector("[data-slot=focal-point-marker]")?.focus({ preventScroll: true });
+    };
+    const onPointerMove = (e) => {
+        if (!dragging.current)
+            return;
+        const next = fromPointer(e);
+        setPoint(next);
+        latest.current = next;
+    };
+    const onPointerUp = () => {
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        onValueCommit?.(latest.current);
+    };
+    const onKeyDown = (e) => {
+        if (disabled)
+            return;
+        const step = e.shiftKey ? 0.1 : 0.01;
+        const p = latest.current;
+        let next = null;
+        if (e.key === "ArrowLeft")
+            next = { x: clamp(p.x - step), y: p.y };
+        else if (e.key === "ArrowRight")
+            next = { x: clamp(p.x + step), y: p.y };
+        else if (e.key === "ArrowUp")
+            next = { x: p.x, y: clamp(p.y - step) };
+        else if (e.key === "ArrowDown")
+            next = { x: p.x, y: clamp(p.y + step) };
+        else if (e.key === "Home")
+            next = { x: 0.5, y: 0.5 };
+        if (!next)
+            return;
+        e.preventDefault();
+        next = { x: round(next.x), y: round(next.y) };
+        setPoint(next);
+        latest.current = next;
+        onValueCommit?.(next);
+    };
+    const ratio = isMediaAsset(src) && src.width && src.height ? src.width / src.height : undefined;
+    return (_jsx("div", { ref: ref, "data-slot": "focal-point", "data-disabled": disabled ? "" : undefined, className: cn("vui-focal @container", className), ...props, children: _jsxs("div", { className: cn("grid gap-4", previews && "@md:grid-cols-[minmax(0,1fr)_9.5rem]"), children: [_jsxs("div", { className: "flex min-w-0 items-center justify-center rounded-ui bg-scene p-2", children: [_jsxs("div", { ref: stage, "data-slot": "focal-point-stage", className: cn("vui-focal-stage relative inline-block max-w-full touch-none select-none", disabled ? "cursor-not-allowed opacity-60" : "cursor-crosshair"), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx("img", { src: url, alt: "", draggable: false, className: "block h-auto max-w-full rounded-ui-sm object-contain", style: { maxHeight, aspectRatio: ratio ? String(ratio) : undefined } }), _jsx("span", { "aria-hidden": true, className: "vui-focal-guides pointer-events-none absolute inset-0", style: { "--fx": `${point.x * 100}%`, "--fy": `${point.y * 100}%` } }), _jsx("div", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": t("label"), "aria-roledescription": t("roledescription"), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(point.x * 100), "aria-valuetext": t("valuetext", { x: pct.format(point.x), y: pct.format(point.y) }), "aria-describedby": instructionsId, "aria-disabled": disabled || undefined, "data-slot": "focal-point-marker", onKeyDown: onKeyDown, className: "vui-focal-marker focus-ring absolute", style: { left: `${point.x * 100}%`, top: `${point.y * 100}%` } })] }), _jsx("p", { id: instructionsId, className: "sr-only", children: t("instructions") })] }), previews ? (_jsx("div", { role: "group", "aria-label": t("previews"), className: "grid grid-cols-3 content-start gap-2 @md:grid-cols-1", children: previews.map((r) => (_jsxs("figure", { className: "m-0 grid gap-1", children: [_jsx(Image, { src: url, alt: "", aspect: r, focal: point, rounded: "ui", placeholder: "none", className: "rounded-ui-sm bg-surface-2" }), _jsx("figcaption", { "aria-hidden": true, className: "tabular text-[11px] text-fg-subtle", children: r.replace("/", ":") })] }, r))) })) : null] }) }));
+});

package/dist/media/gallery-layout.d.ts

@@ -0,0 +1,19 @@
+/** Distributes items into `columns` by known aspect ratios (w/h), shortest column first. */
+export declare function masonryColumns(ratios: number[], columns: number): number[][];
+export interface JustifiedRow {
+    /** Item indexes in this row. */
+    items: number[];
+    /** Row height in px. */
+    height: number;
+    /** `false` for an unfilled last row (kept at the target height). */
+    justified: boolean;
+}
+/**
+ * Flickr-style justified rows: fills each row with items at `rowHeight` until it overflows the
+ * container width, then scales the row so it fits exactly. The last row keeps `rowHeight`.
+ * A row never grows taller than `rowHeight * maxScale`.
+ */
+export declare function justifyRows(ratios: number[], width: number, rowHeight: number, gap?: number, maxScale?: number): JustifiedRow[];
+export type Responsive<T> = T | Partial<Record<"base" | "sm" | "md" | "lg", T>>;
+/** Picks the value for a container width (falls back to `base`, then `fallback`). */
+export declare function responsiveValue<T>(value: Responsive<T> | undefined, width: number | undefined, fallback: T): T;

package/dist/media/gallery-layout.js

@@ -0,0 +1,61 @@
+// Pure, deterministic layout math for Gallery (SSR-safe; no DOM).
+/** Distributes items into `columns` by known aspect ratios (w/h), shortest column first. */
+export function masonryColumns(ratios, columns) {
+    const n = Math.max(1, Math.floor(columns));
+    const cols = Array.from({ length: n }, () => []);
+    const heights = new Array(n).fill(0);
+    ratios.forEach((r, i) => {
+        let target = 0;
+        for (let c = 1; c < n; c++)
+            if (heights[c] < heights[target] - 1e-6)
+                target = c;
+        cols[target].push(i);
+        heights[target] += 1 / (r > 0 ? r : 1);
+    });
+    return cols;
+}
+/**
+ * Flickr-style justified rows: fills each row with items at `rowHeight` until it overflows the
+ * container width, then scales the row so it fits exactly. The last row keeps `rowHeight`.
+ * A row never grows taller than `rowHeight * maxScale`.
+ */
+export function justifyRows(ratios, width, rowHeight, gap = 0, maxScale = 1.6) {
+    const rows = [];
+    if (width <= 0)
+        return rows;
+    let row = [];
+    let sum = 0;
+    ratios.forEach((raw, i) => {
+        const r = raw > 0 ? raw : 1;
+        row.push(i);
+        sum += r;
+        const natural = sum * rowHeight + gap * (row.length - 1);
+        if (natural >= width) {
+            const height = Math.min((width - gap * (row.length - 1)) / sum, rowHeight * maxScale);
+            rows.push({ items: row, height, justified: true });
+            row = [];
+            sum = 0;
+        }
+    });
+    if (row.length) {
+        const fit = (width - gap * (row.length - 1)) / sum;
+        rows.push({ items: row, height: Math.min(rowHeight, fit), justified: false });
+    }
+    return rows;
+}
+const BP = { sm: 640, md: 768, lg: 1024 };
+/** Picks the value for a container width (falls back to `base`, then `fallback`). */
+export function responsiveValue(value, width, fallback) {
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "object" || value === null)
+        return value;
+    const v = value;
+    let out = v.base ?? fallback;
+    if (width === undefined)
+        return out;
+    for (const bp of ["sm", "md", "lg"])
+        if (width >= BP[bp] && v[bp] !== undefined)
+            out = v[bp];
+    return out;
+}

package/dist/media/gallery.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { type ImageAspect } from "../components/image.js";
+import { type LightboxProps } from "./lightbox.js";
+import { type Responsive } from "./gallery-layout.js";
+import type { MediaItem } from "./types.js";
+declare const galleryLabels: {
+    list: string;
+    enlarge: string;
+    enlargeUntitled: string;
+    remove: string;
+    caption: string;
+    captionPlaceholder: string;
+    add: string;
+    addHint: string;
+    loading: string;
+    video: string;
+};
+export type GalleryLabels = typeof galleryLabels;
+export declare const galleryVariants: (props?: ({
+    gap?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface GalleryProps<T extends MediaItem = MediaItem> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onAdd"> {
+    items: T[];
+    /** `grid` equal tiles · `masonry` columns by ratio · `justified` equal-height rows. */
+    layout?: "grid" | "masonry" | "justified";
+    /** Columns (grid, masonry), per container width: `{ base: 2, md: 3, lg: 4 }`. */
+    columns?: Responsive<number>;
+    /** Tile ratio (grid). Default `"1/1"`. */
+    aspect?: ImageAspect;
+    /** Target row height in px (justified). Default 220. */
+    rowHeight?: number;
+    captions?: "none" | "below" | "overlay";
+    gap?: "sm" | "md" | "lg";
+    rounded?: "none" | "ui" | "ui-lg";
+    /** Open items in a Lightbox. Pass an object for Lightbox options (`download`, `info`…). */
+    lightbox?: boolean | Omit<LightboxProps, "items" | "children">;
+    /** `sizes` for each image. Default derived from the column count. */
+    sizes?: string;
+    /** Skeleton tiles that keep their ratio. */
+    loading?: boolean;
+    skeletonCount?: number;
+    /** Edit mode: drag / keyboard reorder (+ Move menu), remove, caption. Uses the grid layout. */
+    editable?: boolean;
+    onReorder?: (ids: string[]) => void;
+    onRemove?: (id: string) => void;
+    onCaptionChange?: (id: string, caption: string) => void;
+    /** "Add images" tile (e.g. opens the Media picker). */
+    onAdd?: () => void;
+    /** Accessible name of the list. */
+    label?: string;
+    labels?: Partial<GalleryLabels>;
+}
+/**
+ * Lays out an image collection as an even grid, masonry columns or justified rows, with an
+ * optional Lightbox and an edit mode (reorder by drag or keyboard, a Move menu as the
+ * non-drag alternative, remove, caption, add). Masonry and justified layouts are computed from
+ * known ratios, so they are deterministic and SSR-safe.
+ *
+ * ```tsx
+ * <Gallery items={photos} layout="masonry" columns={{ base: 2, md: 3 }} lightbox />
+ * ```
+ */
+export declare function Gallery<T extends MediaItem = MediaItem>({ items, layout, columns, aspect, rowHeight, captions, gap, rounded, lightbox, sizes, loading, skeletonCount, editable, onReorder, onRemove, onCaptionChange, onAdd, label, labels, className, style, ...props }: GalleryProps<T>): React.JSX.Element | null;
+export {};

package/dist/media/gallery.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { ImagePlus, Play, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useContainerWidth } from "../lib/use-container-width.js";
+import { IconButton } from "../components/button.js";
+import { Image, aspectRatioOf } from "../components/image.js";
+import { SortableGrid } from "../sortable/index.js";
+import { Lightbox, LightboxTrigger } from "./lightbox.js";
+import { toMediaSource } from "./media-provider.js";
+import { justifyRows, masonryColumns, responsiveValue } from "./gallery-layout.js";
+const galleryLabels = {
+    list: "Gallery",
+    enlarge: "Enlarge image: {alt}",
+    enlargeUntitled: "Enlarge image {index}",
+    remove: "Remove {name}",
+    caption: "Caption for {name}",
+    captionPlaceholder: "Add a caption",
+    add: "Add images",
+    addHint: "Pick from the library or drop files",
+    loading: "Loading images",
+    video: "Video",
+};
+export const galleryVariants = cva("vui-gallery @container/gallery min-w-0", {
+    variants: {
+        gap: { sm: "[--gallery-gap:0.375rem]", md: "[--gallery-gap:0.75rem]", lg: "[--gallery-gap:1.25rem]" },
+    },
+    defaultVariants: { gap: "md" },
+});
+const DEFAULT_COLUMNS = { base: 2, sm: 3, lg: 4 };
+/**
+ * Lays out an image collection as an even grid, masonry columns or justified rows, with an
+ * optional Lightbox and an edit mode (reorder by drag or keyboard, a Move menu as the
+ * non-drag alternative, remove, caption, add). Masonry and justified layouts are computed from
+ * known ratios, so they are deterministic and SSR-safe.
+ *
+ * ```tsx
+ * <Gallery items={photos} layout="masonry" columns={{ base: 2, md: 3 }} lightbox />
+ * ```
+ */
+export function Gallery({ items, layout = "grid", columns = DEFAULT_COLUMNS, aspect = "1/1", rowHeight = 220, captions = "none", gap = "md", rounded = "ui", lightbox = false, sizes, loading = false, skeletonCount = 6, editable = false, onReorder, onRemove, onCaptionChange, onAdd, label, labels, className, style, ...props }) {
+    const t = useLabels("gallery", galleryLabels, labels);
+    const { locale } = useLocale();
+    const nf = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const { ref, width } = useContainerWidth();
+    const sources = React.useMemo(() => items.map((it, i) => toMediaSource(it, i)), [items]);
+    const ratios = sources.map((s) => (s.width && s.height ? s.width / s.height : 4 / 3));
+    const cols = responsiveValue(columns, width, 3);
+    const gapPx = gap === "sm" ? 6 : gap === "lg" ? 20 : 12;
+    const autoSizes = sizes ?? `(min-width: 1024px) ${Math.round(100 / Math.max(1, cols))}vw, ${Math.round(100 / Math.min(2, cols))}vw`;
+    const listLabel = label ?? t("list");
+    const rad = rounded === "none" ? undefined : rounded;
+    const colVars = {};
+    const colAttrs = {};
+    if (typeof columns === "number")
+        colVars["--cols-base"] = String(columns);
+    else
+        for (const [bp, n] of Object.entries(columns)) {
+            colVars[`--cols-${bp}`] = String(n);
+            if (bp !== "base")
+                colAttrs[`data-cols-${bp}`] = "";
+        }
+    const rootProps = {
+        ref,
+        "data-slot": "gallery",
+        "data-layout": editable ? "grid" : layout,
+        className: cn(galleryVariants({ gap }), className),
+        style: { ...colVars, ...style },
+        ...colAttrs,
+        ...props,
+    };
+    /* --- loading ------------------------------------------------------ */
+    if (loading) {
+        const r = aspectRatioOf(aspect) ?? 1;
+        return (_jsx("div", { ...rootProps, "aria-busy": "true", "aria-label": t("loading"), role: "status", children: _jsx("div", { className: "vui-gallery-grid grid", children: Array.from({ length: skeletonCount }, (_, i) => (_jsx("span", { "aria-hidden": true, className: cn("ui-shimmer block bg-skeleton", rad === "ui" ? "rounded-ui" : rad === "ui-lg" ? "rounded-ui-lg" : ""), style: { aspectRatio: String(layout === "grid" ? r : ratios[i % Math.max(1, ratios.length)] ?? [1, 0.75, 1.33][i % 3]) } }, i))) }) }));
+    }
+    /* --- edit mode ---------------------------------------------------- */
+    if (editable) {
+        const addTile = onAdd ? (_jsxs("button", { type: "button", "data-slot": "gallery-add", onClick: onAdd, className: cn("vui-gallery-add focus-ring group/add flex w-full flex-col items-center justify-center gap-1.5 border border-dashed border-field-border bg-surface-2 text-center transition-colors hover:border-field-border-hover hover:bg-hover", items.length === 0 ? "min-h-56 rounded-ui-lg p-8" : "mt-(--gallery-gap) min-h-14 rounded-ui px-4 py-3 sm:flex-row sm:gap-2.5"), children: [_jsx(ImagePlus, { "aria-hidden": true, className: cn("text-fg-muted transition-colors group-hover/add:text-fg", items.length === 0 ? "size-7" : "size-[18px]"), strokeWidth: 1.6 }), _jsx("span", { className: "text-sm font-medium text-fg", children: t("add") }), items.length === 0 ? _jsx("span", { className: "text-[13px] text-fg-muted", children: t("addHint") }) : null] })) : null;
+        return (_jsxs("div", { ...rootProps, children: [items.length ? (_jsx(SortableGrid, { "aria-label": listLabel, items: sources, getId: (s) => s.id, getLabel: (s) => s.alt || s.caption || filenameOf(items, s.id) || s.id, onReorder: (next) => onReorder?.(next.map((s) => s.id)), disabled: !onReorder, handle: true, minItemWidth: "10rem", className: "gap-(--gallery-gap)", itemClassName: "overflow-hidden", renderActions: onRemove
+                        ? (s) => (_jsx(IconButton, { label: t("remove", { name: s.alt || filenameOf(items, s.id) || s.id }), size: "xs", variant: "ghost", className: "bg-popover text-fg-muted shadow-sm hover:text-danger", onClick: () => onRemove(s.id), children: _jsx(Trash2, {}) }))
+                        : undefined, renderItem: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(Image, { src: assetOf(items, s.id) ?? s.src, alt: s.alt, aspect: aspect, sizes: "12rem", widths: [320, 480] }), onCaptionChange ? (_jsx("input", { type: "text", defaultValue: s.caption ?? "", "aria-label": t("caption", { name: s.alt || filenameOf(items, s.id) || s.id }), placeholder: t("captionPlaceholder"), onPointerDown: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                    e.stopPropagation();
+                                    if (e.key === "Enter")
+                                        e.currentTarget.blur();
+                                }, onBlur: (e) => {
+                                    if (e.currentTarget.value !== (s.caption ?? ""))
+                                        onCaptionChange(s.id, e.currentTarget.value);
+                                }, className: "focus-ring w-full border-t border-line bg-transparent px-2.5 py-2 text-[13px] text-fg placeholder:text-fg-subtle focus-visible:outline-offset-[-2px]" })) : null] })) })) : null, addTile] }));
+    }
+    if (items.length === 0)
+        return null;
+    /* --- view mode ---------------------------------------------------- */
+    const tile = (i, box = {}) => {
+        const s = sources[i];
+        // Video tiles show their poster (an <img> can't render the video file) with a play mark.
+        const isVideo = s.kind === "video";
+        const media = (_jsx(Image, { src: isVideo ? (s.poster ?? "") : (assetOf(items, s.id) ?? s.src), alt: lightbox ? "" : s.alt, width: s.width, height: s.height, aspect: box.aspect ?? (layout === "grid" ? aspect : "auto"), focal: s.focalPoint, blurDataURL: s.placeholder, sizes: autoSizes, rounded: rad, className: "vui-gallery-media w-full" }));
+        const playMark = isVideo ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-10 grid place-items-center", children: _jsx("span", { className: "dark grid size-11 place-items-center rounded-full bg-[color-mix(in_oklch,var(--scene)_62%,transparent)] text-fg backdrop-blur-sm", children: _jsx(Play, { className: "ms-0.5 size-4 fill-current" }) }) })) : null;
+        const overlay = captions === "overlay" && s.caption ? (_jsx("span", { "aria-hidden": lightbox ? true : undefined, className: "vui-gallery-overlay dark pointer-events-none absolute inset-x-0 bottom-0 z-10 rounded-b-[inherit] px-3 pt-8 pb-2.5 text-start text-[13px] leading-snug text-fg", children: s.caption })) : null;
+        const figureBody = lightbox ? (_jsxs(LightboxTrigger, { index: i, className: cn("vui-gallery-trigger group/tile relative block w-full overflow-hidden", rad === "ui" ? "rounded-ui" : rad === "ui-lg" ? "rounded-ui-lg" : ""), children: [_jsx("span", { className: "sr-only", children: s.alt ? t("enlarge", { alt: s.alt }) : t("enlargeUntitled", { index: nf.format(i + 1) }) }), media, playMark, overlay] })) : (_jsxs("div", { className: cn("relative overflow-hidden", rad === "ui" ? "rounded-ui" : rad === "ui-lg" ? "rounded-ui-lg" : ""), children: [media, playMark, overlay] }));
+        return (_jsx("li", { "data-slot": "gallery-item", className: cn("min-w-0", box.className), style: box.style, children: _jsxs("figure", { className: "m-0", children: [figureBody, captions === "below" && s.caption ? _jsx("figcaption", { className: "mt-2 text-[13px] leading-snug text-pretty text-fg-muted", children: s.caption }) : null, captions === "overlay" && s.caption && !lightbox ? _jsx("figcaption", { className: "sr-only", children: s.caption }) : null] }) }, s.id));
+    };
+    let body;
+    if (layout === "masonry") {
+        const groups = masonryColumns(ratios, cols);
+        body = (_jsx("div", { className: "vui-gallery-masonry flex items-start gap-(--gallery-gap)", "data-columns": cols, children: groups.map((g, c) => (_jsx("ul", { role: "list", "aria-label": c === 0 ? listLabel : undefined, className: "flex min-w-0 flex-1 flex-col gap-(--gallery-gap)", children: g.map((i) => tile(i)) }, c))) }));
+    }
+    else if (layout === "justified") {
+        if (width) {
+            const rows = justifyRows(ratios, width, rowHeight, gapPx);
+            body = (_jsx("ul", { role: "list", "aria-label": listLabel, className: "vui-gallery-justified flex flex-wrap gap-(--gallery-gap)", children: rows.flatMap((row) => row.items.map((i) => tile(i, { aspect: ratios[i], style: { width: Math.floor(ratios[i] * row.height * 100) / 100, flex: "none" } }))) }));
+        }
+        else {
+            // Before measuring (SSR): proportional flex rows — same look, no JS.
+            body = (_jsx("ul", { role: "list", "aria-label": listLabel, className: "vui-gallery-justified-css flex flex-wrap gap-(--gallery-gap)", children: sources.map((_, i) => tile(i, { aspect: ratios[i], style: { flex: `${ratios[i]} 1 ${ratios[i] * rowHeight}px` } })) }));
+        }
+    }
+    else {
+        body = (_jsx("ul", { role: "list", "aria-label": listLabel, className: "vui-gallery-grid grid", children: sources.map((_, i) => tile(i)) }));
+    }
+    const content = _jsx("div", { ...rootProps, children: body });
+    if (!lightbox)
+        return content;
+    const lbProps = typeof lightbox === "object" ? lightbox : {};
+    return (_jsx(Lightbox, { items: items, ...lbProps, children: content }));
+}
+function assetOf(items, id) {
+    const it = items.find((x) => "mime" in x && x.id === id);
+    return it;
+}
+function filenameOf(items, id) {
+    return assetOf(items, id)?.filename;
+}

package/dist/media/image-cropper.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+import type { CropRect, MediaAsset } from "./types.js";
+declare const cropperLabels: {
+    cropper: string;
+    toolbar: string;
+    instructions: string;
+    aspect: string;
+    zoom: string;
+    zoomIn: string;
+    zoomOut: string;
+    rotateLeft: string;
+    rotateRight: string;
+    flipH: string;
+    flipV: string;
+    reset: string;
+    original: string;
+    square: string;
+    social: string;
+    landscape: string;
+    classic: string;
+    portrait: string;
+    story: string;
+    avatar: string;
+    summary: string;
+};
+export type ImageCropperLabels = typeof cropperLabels;
+export interface CropPreset {
+    /** Visible name ("Social"). The ratio is appended ("Social 1.91:1"). */
+    label: string;
+    /** Width / height, or `"original"` for the image's own ratio. */
+    value: number | "original";
+    /** Key to store the crop under (`asset.crops[name]`), e.g. `"og"`. */
+    name?: string;
+}
+/** `1.91` → "1.91:1" (locale decimal: "1,91:1"), `16/9` → "16:9". */
+export declare function formatAspectRatio(value: number, locale?: string): string;
+export interface ImageCropperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    src: string | MediaAsset;
+    /** Crop in source pixels (rotated + flipped space). Controlled. */
+    value?: CropRect | null;
+    /** Initial crop (e.g. `asset.crops.og`). */
+    defaultValue?: CropRect | null;
+    /** Fires when an interaction ends, with the non-destructive crop. */
+    onChange?: (rect: CropRect, preset: CropPreset | undefined) => void;
+    aspect?: number | "original";
+    defaultAspect?: number | "original";
+    onAspectChange?: (aspect: number | "original") => void;
+    /** Ratio buttons. Pass `[]` to lock the ratio to `aspect`. */
+    presets?: CropPreset[];
+    shape?: "rect" | "round";
+    /** Rule-of-thirds grid while cropping. Default `true`. */
+    grid?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Show the toolbar (presets, zoom, rotate, flip, reset). Default `true`. */
+    toolbar?: boolean;
+    /** Allow rotate / flip. Default `true`. */
+    transform?: boolean;
+    /** Stage height. Default 22rem. */
+    height?: number | string;
+    labels?: Partial<ImageCropperLabels>;
+}
+/**
+ * Crops an image to a ratio with drag, pinch, wheel and keyboard (arrows move, the slider zooms),
+ * plus a toolbar: ratio presets, zoom, rotate ±90°, flip, reset. It outputs a **non-destructive**
+ * `CropRect` in source pixels — store it in `asset.crops` and let the loader apply it, or bake a
+ * copy with `getCroppedBlob()`.
+ *
+ * ```tsx
+ * <ImageCropper src={asset} defaultAspect={1.91} onChange={(rect) => adapter.update(asset.id, { crops: { ...asset.crops, og: rect } })} />
+ * ```
+ */
+export declare const ImageCropper: React.ForwardRefExoticComponent<ImageCropperProps & React.RefAttributes<HTMLDivElement>>;
+export interface CroppedBlobOptions {
+    type?: "image/webp" | "image/jpeg" | "image/png";
+    /** 0..1, default 0.9. */
+    quality?: number;
+    /** Downscale so the output is at most this wide. */
+    maxWidth?: number;
+}
+/**
+ * Bakes a `CropRect` into a new image (canvas, rotation- and flip-aware) for "Save as copy".
+ * The source must be same-origin or served with CORS, or the canvas is tainted.
+ */
+export declare function getCroppedBlob(src: string, rect: CropRect, options?: CroppedBlobOptions): Promise<Blob>;
+export {};