@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/media/lightbox.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+import type { MediaItem } from "./types.js";
+declare const lightboxLabels: {
+    viewer: string;
+    counter: string;
+    counterCaption: string;
+    close: string;
+    previous: string;
+    next: string;
+    zoomIn: string;
+    zoomOut: string;
+    resetZoom: string;
+    download: string;
+    info: string;
+    error: string;
+    filename: string;
+    dimensions: string;
+    size: string;
+    type: string;
+    uploaded: string;
+    uploadedBy: string;
+    alt: string;
+    noAlt: string;
+    decorative: string;
+};
+export type LightboxLabels = typeof lightboxLabels;
+interface LightboxContextValue {
+    open: (index?: number) => void;
+    close: () => void;
+    isOpen: boolean;
+    index: number;
+}
+/** Open / close the surrounding `Lightbox` from custom triggers. */
+export declare function useLightbox(): LightboxContextValue;
+export interface LightboxProps {
+    items: MediaItem[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** Pinch / wheel / double-tap / +−0 zoom. Default `true` (max 3×). */
+    zoom?: boolean | {
+        max?: number;
+    };
+    /** Thumbnail strip at the bottom. Default `true` with more than one item. */
+    thumbnails?: boolean;
+    /** Download button (original file). */
+    download?: boolean;
+    /** File-details side panel toggle (admin). Uses `MediaAsset` fields. */
+    info?: boolean;
+    /** Wrap around at the ends. Default `true`. */
+    loop?: boolean;
+    /** `solid` (default) the scene at 96% · `dim` the overlay colour · `blur` overlay + blur. */
+    backdrop?: "solid" | "dim" | "blur";
+    /** `minimal` hides caption and thumbnails. */
+    chrome?: "minimal" | "full";
+    labels?: Partial<LightboxLabels>;
+    /** Triggers and the gallery that opens the viewer. */
+    children?: React.ReactNode;
+}
+/**
+ * Full-screen viewer for images and video: swipe / arrows to navigate, pinch / wheel / double-tap
+ * zoom with pan, thumbnails, captions and an optional file-details panel. Dialog pattern (focus
+ * trap, Esc, focus returns). Keys: ←/→ navigate, Home/End, + / − / 0 zoom.
+ *
+ * ```tsx
+ * <Lightbox items={photos} download>
+ *   {photos.map((p, i) => <LightboxTrigger key={p.id} index={i}><Image src={p} alt={p.alt} aspect="1/1" /></LightboxTrigger>)}
+ * </Lightbox>
+ * ```
+ */
+export declare function Lightbox({ items, open: openProp, defaultOpen, onOpenChange, index: indexProp, defaultIndex, onIndexChange, zoom, thumbnails, download, info, loop, backdrop, chrome, labels, children, }: LightboxProps): React.JSX.Element;
+export interface LightboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Item to open. */
+    index: number;
+    asChild?: boolean;
+}
+/** Opens the surrounding Lightbox at `index`. Renders a button (or the child with `asChild`). */
+export declare const LightboxTrigger: React.ForwardRefExoticComponent<LightboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/media/lightbox.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog as DialogPrimitive, Slot } from "radix-ui";
+import { Download, ImageOff, Info, X, ZoomIn, ZoomOut } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { Layer } from "../lib/layer.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { IconButton } from "../components/button.js";
+import { Spinner } from "../components/spinner.js";
+import { Carousel, CarouselSlide, CarouselThumbs, CarouselViewport } from "../components/carousel.js";
+import { isMediaAsset, toMediaSource } from "./media-provider.js";
+import { usePanZoom } from "./use-pan-zoom.js";
+import { VideoPlayer } from "./video-player.js";
+const lightboxLabels = {
+    viewer: "Image viewer",
+    counter: "Image {index} of {total}",
+    counterCaption: "Image {index} of {total}: {caption}",
+    close: "Close viewer",
+    previous: "Previous image",
+    next: "Next image",
+    zoomIn: "Zoom in",
+    zoomOut: "Zoom out",
+    resetZoom: "Reset zoom",
+    download: "Download",
+    info: "File details",
+    error: "This image could not be loaded.",
+    filename: "File name",
+    dimensions: "Dimensions",
+    size: "Size",
+    type: "Type",
+    uploaded: "Uploaded",
+    uploadedBy: "Uploaded by",
+    alt: "Alt text",
+    noAlt: "Missing alt text",
+    decorative: "Decorative (no alt text)",
+};
+const LightboxContext = React.createContext(null);
+/** Open / close the surrounding `Lightbox` from custom triggers. */
+export function useLightbox() {
+    const ctx = React.useContext(LightboxContext);
+    if (!ctx)
+        throw new Error("useLightbox must be used inside <Lightbox>.");
+    return ctx;
+}
+/**
+ * Full-screen viewer for images and video: swipe / arrows to navigate, pinch / wheel / double-tap
+ * zoom with pan, thumbnails, captions and an optional file-details panel. Dialog pattern (focus
+ * trap, Esc, focus returns). Keys: ←/→ navigate, Home/End, + / − / 0 zoom.
+ *
+ * ```tsx
+ * <Lightbox items={photos} download>
+ *   {photos.map((p, i) => <LightboxTrigger key={p.id} index={i}><Image src={p} alt={p.alt} aspect="1/1" /></LightboxTrigger>)}
+ * </Lightbox>
+ * ```
+ */
+export function Lightbox({ items, open: openProp, defaultOpen = false, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, zoom = true, thumbnails, download = false, info = false, loop = true, backdrop = "solid", chrome = "full", labels, children, }) {
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, name: "Lightbox" });
+    const [index, setIndex] = useControllableState({ value: indexProp, defaultValue: defaultIndex, onChange: onIndexChange, name: "Lightbox" });
+    const returnFocus = React.useRef(null);
+    const ctx = React.useMemo(() => ({
+        open: (i) => {
+            returnFocus.current = typeof document !== "undefined" ? document.activeElement : null;
+            if (i !== undefined)
+                setIndex(i);
+            setOpen(true);
+        },
+        close: () => setOpen(false),
+        isOpen: open,
+        index,
+    }), [open, index, setIndex, setOpen]);
+    return (_jsxs(LightboxContext.Provider, { value: ctx, children: [children, _jsx(DialogPrimitive.Root, { open: open, onOpenChange: setOpen, children: _jsx(LightboxViewer, { items: items, index: Math.min(Math.max(0, index), Math.max(0, items.length - 1)), setIndex: setIndex, zoom: zoom, thumbnails: thumbnails ?? items.length > 1, download: download, info: info, loop: loop, backdrop: backdrop, chrome: chrome, labels: labels, returnFocus: returnFocus }) })] }));
+}
+/** Opens the surrounding Lightbox at `index`. Renders a button (or the child with `asChild`). */
+export const LightboxTrigger = React.forwardRef(function LightboxTrigger({ index, asChild, onClick, className, type, ...props }, ref) {
+    const lb = useLightbox();
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { ref: ref, type: asChild ? undefined : type ?? "button", "data-slot": "lightbox-trigger", "aria-haspopup": "dialog", className: cn(!asChild && "focus-ring block cursor-zoom-in rounded-[inherit]", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                lb.open(index);
+        }, ...props }));
+});
+function LightboxViewer({ items, index, setIndex, zoom, thumbnails, download, info, loop, backdrop, chrome, labels, returnFocus }) {
+    const t = useLabels("lightbox", lightboxLabels, labels);
+    const { dir, locale } = useLocale();
+    const container = usePortalContainer();
+    const sources = React.useMemo(() => items.map((it, i) => toMediaSource(it, i)), [items]);
+    const current = sources[index];
+    const currentAsset = isMediaAsset(items[index]) ? items[index] : undefined;
+    const zoomMax = typeof zoom === "object" ? zoom.max ?? 3 : 3;
+    const canZoom = zoom !== false && current?.kind === "image";
+    const pz = usePanZoom({ max: zoomMax, disabled: !canZoom });
+    const [infoOpen, setInfoOpen] = React.useState(false);
+    const [loaded, setLoaded] = React.useState({});
+    const nf = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const pct = React.useMemo(() => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 }), [locale]);
+    const { reset } = pz;
+    React.useEffect(() => reset(), [index, reset]);
+    const go = (d) => {
+        const n = sources.length;
+        if (n < 2)
+            return;
+        const next = index + d;
+        setIndex(loop ? (next + n) % n : Math.min(n - 1, Math.max(0, next)));
+    };
+    const onKeyDown = (e) => {
+        if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        const target = e.target;
+        if (target.closest("input, textarea, [role=slider], [data-slot=video-player]"))
+            return;
+        const back = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+        const fwd = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+        if (e.key === back)
+            go(-1);
+        else if (e.key === fwd)
+            go(1);
+        else if (e.key === "Home")
+            setIndex(0);
+        else if (e.key === "End")
+            setIndex(sources.length - 1);
+        else if (canZoom && (e.key === "+" || e.key === "="))
+            pz.zoomIn();
+        else if (canZoom && e.key === "-")
+            pz.zoomOut();
+        else if (canZoom && e.key === "0")
+            pz.reset();
+        else
+            return;
+        e.preventDefault();
+    };
+    const counterText = current
+        ? current.caption || current.alt
+            ? t("counterCaption", { index: nf.format(index + 1), total: nf.format(sources.length), caption: current.caption || current.alt })
+            : t("counter", { index: nf.format(index + 1), total: nf.format(sources.length) })
+        : "";
+    const darkChrome = backdrop !== "solid";
+    const toolBtn = "text-fg-muted hover:text-fg";
+    return (_jsxs(DialogPrimitive.Portal, { container: container, children: [_jsx(DialogPrimitive.Overlay, { "data-slot": "lightbox-overlay", "data-backdrop": backdrop, "data-overlay-blurred": backdrop === "blur" ? "" : undefined, className: "vui-lightbox-overlay ui-fade fixed inset-0 z-(--z-overlay)" }), _jsx(Layer, { asChild: true, children: _jsxs(DialogPrimitive.Content, { "data-slot": "lightbox", "data-backdrop": backdrop, "aria-label": t("viewer"), "aria-describedby": undefined, onKeyDown: onKeyDown, onCloseAutoFocus: (e) => {
+                        const el = returnFocus.current;
+                        if (el && el.isConnected) {
+                            e.preventDefault();
+                            el.focus();
+                        }
+                    }, onOpenAutoFocus: (e) => {
+                        const close = e.currentTarget?.querySelector("[data-autofocus]");
+                        if (close) {
+                            e.preventDefault();
+                            close.focus();
+                        }
+                    }, className: cn("vui-lightbox ui-fade fixed inset-0 z-(--z-overlay) flex flex-col text-fg outline-none", darkChrome && "dark"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: t("viewer") }), _jsxs("div", { "data-slot": "lightbox-toolbar", className: "relative z-20 flex items-center gap-2 px-3 pt-3 sm:px-4", children: [_jsxs("p", { "aria-live": "polite", "aria-atomic": true, className: "tabular min-w-0 flex-1 truncate ps-1 text-[13px] text-fg-muted", children: [_jsx("span", { className: "sr-only", children: counterText }), _jsxs("span", { "aria-hidden": true, children: [_jsx("span", { className: "font-medium text-fg", children: nf.format(index + 1) }), _jsx("span", { className: "mx-1 text-fg-subtle", children: "/" }), nf.format(sources.length), currentAsset?.filename ? _jsx("span", { className: "ms-3 hidden text-fg-subtle sm:inline", children: currentAsset.filename }) : null] })] }), _jsxs("div", { className: "surface-popover flex items-center gap-0.5 rounded-full p-1", children: [canZoom ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: t("zoomOut"), tooltip: false, size: "sm", className: cn("rounded-full!", toolBtn), disabled: !pz.canZoomOut, onClick: pz.zoomOut, children: _jsx(ZoomOut, {}) }), _jsx("button", { type: "button", onClick: pz.reset, "aria-label": t("resetZoom"), className: "focus-ring tabular h-8 min-w-12 rounded-full px-1.5 text-[12px] font-medium text-fg-muted hover:bg-hover hover:text-fg", children: pct.format(pz.scale) }), _jsx(IconButton, { label: t("zoomIn"), tooltip: false, size: "sm", className: cn("rounded-full!", toolBtn), disabled: !pz.canZoomIn, onClick: pz.zoomIn, children: _jsx(ZoomIn, {}) }), _jsx("span", { "aria-hidden": true, className: "mx-1 h-4 w-px bg-line" })] })) : null, download && current ? (_jsx(IconButton, { asChild: true, label: t("download"), tooltip: false, size: "sm", className: cn("rounded-full!", toolBtn), children: _jsx("a", { href: current.src, download: currentAsset?.filename ?? "", target: "_blank", rel: "noopener noreferrer", children: _jsx(Download, {}) }) })) : null, info ? (_jsx(IconButton, { label: t("info"), tooltip: false, size: "sm", "aria-pressed": infoOpen, className: cn("rounded-full!", toolBtn, infoOpen && "bg-selected text-fg"), onClick: () => setInfoOpen((o) => !o), children: _jsx(Info, {}) })) : null, _jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(IconButton, { label: t("close"), tooltip: false, size: "sm", className: cn("rounded-full!", toolBtn), "data-autofocus": true, children: _jsx(X, {}) }) })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs(Carousel, { label: t("viewer"), index: index, onIndexChange: setIndex, loop: loop && sources.length > 1, gap: "none", controls: "inside", options: { watchDrag: !pz.zoomed && sources.length > 1 }, className: "flex min-h-0 min-w-0 flex-1 flex-col", labels: { previous: t("previous"), next: t("next") }, children: [_jsx(CarouselViewport, { className: "h-full", containerClassName: "h-full", arrows: sources.length > 1, children: sources.map((s, i) => (_jsx(CarouselSlide, { className: "h-full", children: s.kind === "video" ? (_jsx("div", { className: "flex h-full items-center justify-center p-4 sm:px-16 sm:py-8", children: _jsx("div", { className: "w-full", style: { maxWidth: `calc((100dvh - 12rem) * ${(s.width && s.height ? s.width / s.height : 16 / 9).toFixed(4)})` }, children: Math.abs(i - index) <= 1 ? (_jsx(VideoPlayer, { src: s.src, poster: s.poster, title: s.caption || s.alt, aspect: s.width && s.height ? s.width / s.height : "16/9" })) : null }) })) : (_jsxs("div", { "data-slot": "lightbox-stage", className: "relative flex h-full items-center justify-center overflow-hidden p-3 sm:px-16 sm:py-6", ...(i === index ? pz.bind : null), children: [s.placeholder && loaded[s.id] !== "loaded" ? (_jsx("img", { "aria-hidden": true, alt: "", src: s.placeholder, className: "vui-image-blur pointer-events-none absolute inset-6 m-auto max-h-[calc(100%-3rem)] max-w-[calc(100%-3rem)] object-contain" })) : null, loaded[s.id] === "error" ? (_jsxs("div", { role: "img", "aria-label": s.alt || t("error"), className: "flex flex-col items-center gap-2 text-sm text-fg-muted", children: [_jsx(ImageOff, { "aria-hidden": true, className: "size-7", strokeWidth: 1.5 }), t("error")] })) : Math.abs(i - index) <= 1 || (loop && Math.abs(i - index) === sources.length - 1) ? (_jsx("img", { src: s.src, alt: s.alt, width: s.width, height: s.height, draggable: false, decoding: "async", onLoad: () => setLoaded((m) => ({ ...m, [s.id]: "loaded" })), onError: () => setLoaded((m) => ({ ...m, [s.id]: "error" })), className: cn("vui-lightbox-img relative max-h-full max-w-full object-contain select-none", loaded[s.id] === "loaded" ? "opacity-100" : "opacity-0"), style: i === index && canZoom ? pz.style : undefined })) : null, !loaded[s.id] && i === index ? _jsx(Spinner, { size: "md", className: "absolute text-fg-muted" }) : null] })) }, s.id))) }), chrome === "full" ? (_jsxs("div", { className: "flex flex-none flex-col items-center gap-1 px-4 pb-3", children: [current?.caption ? (_jsx("p", { "data-slot": "lightbox-caption", className: "max-w-[68ch] text-center text-[13.5px] leading-relaxed text-pretty text-fg-muted", children: current.caption })) : null, thumbnails ? _jsx(CarouselThumbs, { aspect: 1, items: sources.map((s) => ({ src: s.kind === "video" ? s.poster ?? "" : s.src, alt: s.alt })), align: "center", className: "mt-1 w-full" }) : null] })) : null] }), info && infoOpen && currentAsset ? _jsx(LightboxInfo, { asset: currentAsset, labels: labels }) : null] })] }) })] }));
+}
+function LightboxInfo({ asset, labels }) {
+    const t = useLabels("lightbox", lightboxLabels, labels);
+    const f = useFormat();
+    const rows = [
+        [t("filename"), _jsx("span", { className: "break-all", children: asset.filename })],
+        [t("type"), asset.mime],
+        [t("size"), f.bytes(asset.size)],
+    ];
+    if (asset.width && asset.height)
+        rows.push([t("dimensions"), `${f.number(asset.width)} × ${f.number(asset.height)}`]);
+    rows.push([t("uploaded"), f.date(asset.createdAt, "medium")]);
+    if (asset.uploadedBy)
+        rows.push([t("uploadedBy"), asset.uploadedBy.name]);
+    return (_jsxs("aside", { "data-slot": "lightbox-info", "aria-label": t("info"), className: "surface-popover m-3 ms-0 hidden w-80 flex-none flex-col gap-5 overflow-y-auto rounded-ui-lg p-5 md:flex", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[11px] font-medium tracking-[0.08em] text-fg-subtle uppercase", children: t("alt") }), _jsx("p", { className: cn("mt-1.5 text-[13.5px] leading-relaxed", asset.alt ? "text-fg" : "text-warning"), children: asset.alt || (asset.alt === "" ? t("decorative") : t("noAlt")) })] }), asset.description ? _jsx("p", { className: "text-[13.5px] leading-relaxed text-fg-muted", children: asset.description }) : null, _jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2.5 border-t border-line pt-4 text-[13px]", children: rows.map(([k, v]) => (_jsxs(React.Fragment, { children: [_jsx("dt", { className: "text-fg-subtle", children: k }), _jsx("dd", { className: "tabular text-end text-fg", children: v })] }, k))) })] }));
+}

package/dist/media/link-preview.d.ts

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { type SerpDevice, type SerpField } from "./serp.js";
+import type { MediaAsset } from "./types.js";
+declare const previewLabels: {
+    search: string;
+    social: string;
+    untitled: string;
+    noDescription: string;
+    noImage: string;
+    wrongRatio: string;
+    smallImage: string;
+    noindex: string;
+    tabs: string;
+    searchTab: string;
+    desktop: string;
+    mobile: string;
+    meterGood: string;
+    meterShort: string;
+    meterLong: string;
+    meterEmpty: string;
+    meterChars: string;
+    meterPx: string;
+    xFrom: string;
+};
+export type LinkPreviewLabels = typeof previewLabels;
+export interface LinkPreviewData {
+    url: string;
+    title: string;
+    description?: string;
+    siteName?: string;
+    favicon?: string;
+    image?: MediaAsset | string | null;
+    /** Date shown before the description (articles). `YYYY-MM-DD` or a Date. */
+    publishedAt?: Date | string;
+    /** Replaces the URL path in the search breadcrumb. */
+    breadcrumbs?: string[];
+    twitterCard?: "summary" | "summary_large_image";
+    /** Shows the "Hidden from search engines" banner. */
+    noindex?: boolean;
+}
+export type SocialPlatform = "facebook" | "linkedin" | "x" | "whatsapp" | "slack";
+export interface PreviewFrameProps {
+    /** `auto` follows the surrounding theme; `light` / `dark` force the platform's own theme. */
+    appearance?: "light" | "dark" | "auto";
+    /** `sm` for sidebars (SEO panel), `md` default. */
+    size?: "sm" | "md";
+}
+export interface SearchPreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, PreviewFrameProps {
+    data: LinkPreviewData;
+    device?: SerpDevice;
+    /** Focus keyword to bold in the description (as search engines do). */
+    highlight?: string;
+    labels?: Partial<LinkPreviewLabels>;
+}
+/**
+ * How a page appears in a search result on desktop or mobile, with pixel-accurate truncation
+ * (`measureSerp`) and keyword bolding.
+ */
+export declare const SearchPreview: React.ForwardRefExoticComponent<SearchPreviewProps & React.RefAttributes<HTMLDivElement>>;
+export interface SocialCardPreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, PreviewFrameProps {
+    data: LinkPreviewData;
+    platform: SocialPlatform;
+    /** Hide the warnings under the card. */
+    hideWarnings?: boolean;
+    labels?: Partial<LinkPreviewLabels>;
+}
+/** How a shared link unfurls on Facebook, LinkedIn, X, WhatsApp or Slack, with image warnings. */
+export declare const SocialCardPreview: React.ForwardRefExoticComponent<SocialCardPreviewProps & React.RefAttributes<HTMLDivElement>>;
+export interface LengthMeterProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    /** Character limit. Default: the SERP ideal maximum for `field`, else 160. */
+    max?: number;
+    /** Below this the meter says "too short". */
+    min?: number;
+    /** Also measure pixel width as a search result `title` / `description`. */
+    field?: SerpField;
+    device?: SerpDevice;
+    /** Field name for the announcement ("SEO title"). */
+    label?: string;
+    labels?: Partial<LinkPreviewLabels>;
+}
+/**
+ * Characters (graphemes) and, for SEO fields, rendered pixels against the limit, said in words
+ * too ("58 of 60 characters, 540 of 600 px: good"), never by colour alone.
+ */
+export declare const LengthMeter: React.ForwardRefExoticComponent<LengthMeterProps & React.RefAttributes<HTMLDivElement>>;
+export interface LinkPreviewTabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "defaultValue" | "onChange">, PreviewFrameProps {
+    data: LinkPreviewData;
+    /** Which previews to offer. Default search, Facebook, X, WhatsApp. */
+    platforms?: ("search" | SocialPlatform)[];
+    defaultValue?: "search" | SocialPlatform;
+    highlight?: string;
+    labels?: Partial<LinkPreviewLabels>;
+}
+/** Search | Facebook | X | WhatsApp previews of one link in tabs; search has a desktop / mobile switch. */
+export declare function LinkPreviewTabs({ data, platforms, defaultValue, highlight: term, appearance, size, labels, className, ...props }: LinkPreviewTabsProps): React.JSX.Element;
+export {};

package/dist/media/link-preview.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Link previews imitate third-party UIs (search results, social cards). This file and the
+// `--preview-*` variables in styles/media.css are the kit's one deliberate token exception:
+// the previews follow each platform's look, the frame and meters around them use kit tokens.
+import * as React from "react";
+import { ImageIcon, TriangleAlert, EyeOff } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/tabs.js";
+import { isMediaAsset } from "./media-provider.js";
+import { countGraphemes, measureSerp, SERP_LIMITS } from "./serp.js";
+const previewLabels = {
+    search: "Search result preview",
+    social: "{platform} link preview",
+    untitled: "Untitled page",
+    noDescription: "No description: search engines will pick text from the page.",
+    noImage: "No social image. The link will show as a plain card.",
+    wrongRatio: "Image is {ratio}:1. {platform} shows {target}:1 and will crop it.",
+    smallImage: "Image is {width}×{height}. {platform} recommends at least {minWidth}×{minHeight}.",
+    noindex: "Hidden from search engines (noindex)",
+    tabs: "Preview",
+    searchTab: "Search",
+    desktop: "Desktop",
+    mobile: "Mobile",
+    meterGood: "good",
+    meterShort: "too short",
+    meterLong: "too long",
+    meterEmpty: "missing",
+    meterChars: "{count} of {max} characters",
+    meterPx: "{px} of {maxPx} px",
+    xFrom: "From {host}",
+};
+const PLATFORM_NAME = { facebook: "Facebook", linkedin: "LinkedIn", x: "X", whatsapp: "WhatsApp", slack: "Slack" };
+function parseUrl(url) {
+    try {
+        const u = new URL(url);
+        return { host: u.hostname.replace(/^www\./, ""), path: u.pathname.split("/").filter(Boolean).map(decodeURIComponent) };
+    }
+    catch {
+        return { host: url.replace(/^https?:\/\//, "").split("/")[0] ?? url, path: [] };
+    }
+}
+function imageOf(image) {
+    if (!image)
+        return null;
+    if (typeof image === "string")
+        return { src: image, alt: "" };
+    if (isMediaAsset(image))
+        return { src: image.variants?.og?.url ?? image.url, width: image.variants?.og?.width ?? image.width, height: image.variants?.og?.height ?? image.height, alt: image.alt };
+    return null;
+}
+function toDate(d) {
+    if (d instanceof Date)
+        return d;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(d);
+    return m ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])) : new Date(d);
+}
+/** `false` on the server and the first client render, then `true`: canvas measuring runs after hydration. */
+function usePrecise() {
+    const [precise, setPrecise] = React.useState(false);
+    React.useEffect(() => setPrecise(true), []);
+    return precise;
+}
+/** Bolds case-insensitive matches of `term` (locale-aware). */
+function highlight(text, term, locale) {
+    if (!term?.trim())
+        return text;
+    const hay = text.toLocaleLowerCase(locale);
+    const needle = term.trim().toLocaleLowerCase(locale);
+    const out = [];
+    let i = 0;
+    let k = 0;
+    while (needle && (k = hay.indexOf(needle, i)) !== -1) {
+        if (k > i)
+            out.push(text.slice(i, k));
+        out.push(_jsx("b", { children: text.slice(k, k + needle.length) }, k));
+        i = k + needle.length;
+    }
+    out.push(text.slice(i));
+    return out;
+}
+/**
+ * How a page appears in a search result on desktop or mobile, with pixel-accurate truncation
+ * (`measureSerp`) and keyword bolding.
+ */
+export const SearchPreview = React.forwardRef(function SearchPreview({ data, device = "desktop", highlight: term, appearance = "auto", size = "md", labels, className, ...props }, ref) {
+    const t = useLabels("linkPreview", previewLabels, labels);
+    const { locale } = useLocale();
+    const { host, path } = parseUrl(data.url);
+    const crumbs = data.breadcrumbs ?? path.slice(0, 3);
+    const estimate = !usePrecise();
+    const title = measureSerp(data.title || t("untitled"), "title", device, locale, { estimate });
+    const desc = data.description ? measureSerp(data.description, "description", device, locale, { estimate }) : null;
+    const date = data.publishedAt ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(toDate(data.publishedAt)) : null;
+    const site = data.siteName ?? host;
+    return (_jsxs("div", { ref: ref, "data-slot": "search-preview", className: cn("vui-lp-frame", className), ...props, children: [data.noindex ? (_jsxs("p", { className: "mb-2 flex items-center gap-1.5 text-[12.5px] font-medium text-warning", children: [_jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }), t("noindex")] })) : null, _jsxs("div", { role: "figure", "aria-label": t("search"), "data-appearance": appearance, "data-device": device, "data-size": size, dir: "auto", className: cn("vui-lp vui-lp-serp", data.noindex && "opacity-55"), children: [_jsxs("div", { className: "vui-lp-serp-site", children: [_jsx("span", { className: "vui-lp-favicon", "aria-hidden": true, children: data.favicon ? _jsx("img", { src: data.favicon, alt: "" }) : _jsx("span", { children: site.charAt(0).toUpperCase() }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "vui-lp-serp-sitename", children: site }), _jsxs("span", { className: "vui-lp-serp-url", children: [data.url.startsWith("http") ? `https://${host}` : host, crumbs.map((c, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { "aria-hidden": true, children: " \u203A " }), c] }, i)))] })] })] }), _jsx("p", { className: "vui-lp-serp-title", "data-missing": data.title ? undefined : "", "data-truncated": title.truncated ? "" : undefined, children: title.display }), _jsxs("p", { className: "vui-lp-serp-desc", "data-missing": desc ? undefined : "", children: [date ? _jsxs("span", { className: "vui-lp-serp-date", children: [date, " \u2014 "] }) : null, desc ? highlight(desc.display, term, locale) : t("noDescription")] })] })] }));
+});
+/* ------------------------------------------------------------------ */
+/* Social card                                                          */
+/* ------------------------------------------------------------------ */
+const TARGET_RATIO = { facebook: 1.91, linkedin: 1.91, x: 1.91, whatsapp: 1.91, slack: 1.91 };
+const MIN_SIZE = { width: 1200, height: 630 };
+/** How a shared link unfurls on Facebook, LinkedIn, X, WhatsApp or Slack, with image warnings. */
+export const SocialCardPreview = React.forwardRef(function SocialCardPreview({ data, platform, appearance = "auto", size = "md", hideWarnings, labels, className, ...props }, ref) {
+    const t = useLabels("linkPreview", previewLabels, labels);
+    const { locale } = useLocale();
+    const { host } = parseUrl(data.url);
+    const img = imageOf(data.image);
+    const name = PLATFORM_NAME[platform];
+    const nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+    const large = platform !== "x" || data.twitterCard !== "summary";
+    const title = data.title || t("untitled");
+    const warnings = [];
+    if (!img)
+        warnings.push(t("noImage"));
+    else if (img.width && img.height) {
+        const r = img.width / img.height;
+        if (large && Math.abs(r - TARGET_RATIO[platform]) > 0.12)
+            warnings.push(t("wrongRatio", { ratio: nf.format(Math.round(r * 100) / 100), platform: name, target: nf.format(TARGET_RATIO[platform]) }));
+        if (large && (img.width < MIN_SIZE.width || img.height < MIN_SIZE.height))
+            warnings.push(t("smallImage", { width: String(img.width), height: String(img.height), platform: name, minWidth: String(MIN_SIZE.width), minHeight: String(MIN_SIZE.height) }));
+    }
+    const media = (cls) => img ? (_jsx("span", { className: cn("vui-lp-media", cls), children: _jsx("img", { src: img.src, alt: "", loading: "lazy", decoding: "async" }) })) : (_jsx("span", { className: cn("vui-lp-media vui-lp-media-empty", cls), "aria-hidden": true, children: _jsx(ImageIcon, { strokeWidth: 1.4 }) }));
+    const titleEl = (_jsx("span", { className: "vui-lp-title", "data-missing": data.title ? undefined : "", children: title }));
+    const descEl = data.description ? _jsx("span", { className: "vui-lp-desc", children: data.description }) : null;
+    let card;
+    switch (platform) {
+        case "facebook":
+            card = (_jsxs(_Fragment, { children: [media(), _jsxs("span", { className: "vui-lp-body", children: [_jsx("span", { className: "vui-lp-domain", children: host.toUpperCase() }), titleEl, descEl] })] }));
+            break;
+        case "linkedin":
+            card = (_jsxs(_Fragment, { children: [media(), _jsxs("span", { className: "vui-lp-body", children: [titleEl, _jsx("span", { className: "vui-lp-domain", children: host })] })] }));
+            break;
+        case "x":
+            card = large ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative block", children: [media(), _jsx("span", { className: "vui-lp-x-badge", children: host })] }), _jsx("span", { className: "vui-lp-x-below", children: t("xFrom", { host }) })] })) : (_jsxs("span", { className: "vui-lp-x-summary", children: [media("vui-lp-x-thumb"), _jsxs("span", { className: "vui-lp-body", children: [_jsx("span", { className: "vui-lp-domain", children: host }), titleEl, descEl] })] }));
+            break;
+        case "whatsapp":
+            card = (_jsxs("span", { className: "vui-lp-wa-bubble", children: [_jsxs("span", { className: "vui-lp-wa-card", children: [media(), _jsxs("span", { className: "vui-lp-body", children: [titleEl, descEl, _jsx("span", { className: "vui-lp-domain", children: host })] })] }), _jsx("span", { className: "vui-lp-wa-link", children: data.url })] }));
+            break;
+        case "slack":
+            card = (_jsxs("span", { className: "vui-lp-slack", children: [_jsxs("span", { className: "vui-lp-slack-site", children: [data.favicon ? _jsx("img", { src: data.favicon, alt: "", className: "vui-lp-slack-icon" }) : null, data.siteName ?? host] }), titleEl, descEl, media("vui-lp-slack-media")] }));
+            break;
+    }
+    return (_jsxs("div", { ref: ref, "data-slot": "social-card-preview", className: cn("vui-lp-frame", className), ...props, children: [_jsx("div", { role: "figure", "aria-label": t("social", { platform: name }), "data-appearance": appearance, "data-platform": platform, "data-size": size, dir: "auto", className: "vui-lp vui-lp-social", children: card }), !hideWarnings && warnings.length ? (_jsx("ul", { className: "mt-2.5 flex flex-col gap-1", children: warnings.map((w) => (_jsxs("li", { className: "flex items-start gap-1.5 text-[12.5px] leading-snug text-warning", children: [_jsx(TriangleAlert, { "aria-hidden": true, className: "mt-px size-3.5 shrink-0" }), w] }, w))) })) : null] }));
+});
+/**
+ * Characters (graphemes) and, for SEO fields, rendered pixels against the limit, said in words
+ * too ("58 of 60 characters, 540 of 600 px: good"), never by colour alone.
+ */
+export const LengthMeter = React.forwardRef(function LengthMeter({ value, max: maxProp, min: minProp, field, device = "desktop", label, labels, className, ...props }, ref) {
+    const t = useLabels("linkPreview", previewLabels, labels);
+    const { locale } = useLocale();
+    const nf = new Intl.NumberFormat(locale);
+    const spec = field ? SERP_LIMITS[device][field] : null;
+    const max = maxProp ?? spec?.idealChars[1] ?? 160;
+    const min = minProp ?? spec?.idealChars[0] ?? 0;
+    const count = countGraphemes(value, locale);
+    const estimate = !usePrecise();
+    const m = field ? measureSerp(value, field, device, locale, { estimate }) : null;
+    const over = count > max || Boolean(m?.truncated);
+    const status = count === 0 ? "empty" : over ? "long" : count < min ? "short" : "good";
+    const tone = status === "good" ? "success" : status === "long" || status === "empty" ? "danger" : "warning";
+    const ratio = m ? m.px / m.maxPx : count / max;
+    const statusText = t(status === "good" ? "meterGood" : status === "short" ? "meterShort" : status === "long" ? "meterLong" : "meterEmpty");
+    const chars = t("meterChars", { count: nf.format(count), max: nf.format(max) });
+    const px = m ? t("meterPx", { px: nf.format(Math.round(m.px)), maxPx: nf.format(m.maxPx) }) : null;
+    const text = `${chars}${px ? `, ${px}` : ""}: ${statusText}`;
+    return (_jsxs("div", { ref: ref, "data-slot": "length-meter", "data-status": status, className: cn("flex items-center gap-2.5", className), ...props, children: [_jsx("div", { role: "meter", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": m ? m.maxPx : max, "aria-valuenow": m ? Math.round(m.px) : count, "aria-valuetext": text, className: "relative h-1 min-w-12 flex-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { className: cn("absolute inset-y-0 start-0 rounded-full transition-[width] duration-200", `tone-${tone}`), style: { width: `${Math.min(100, ratio * 100)}%`, background: "var(--tone)" } }) }), _jsxs("span", { "aria-hidden": true, className: "tabular shrink-0 text-[12px] text-fg-muted", children: [_jsx("span", { className: cn(`tone-${tone}`, "text-(--tone)"), children: nf.format(count) }), _jsxs("span", { className: "text-fg-subtle", children: [" / ", nf.format(max)] }), px ? _jsxs("span", { className: "ms-2 text-fg-subtle", children: [nf.format(Math.round(m.px)), " px"] }) : null] })] }));
+});
+/** Search | Facebook | X | WhatsApp previews of one link in tabs; search has a desktop / mobile switch. */
+export function LinkPreviewTabs({ data, platforms = ["search", "facebook", "x", "whatsapp"], defaultValue, highlight: term, appearance, size, labels, className, ...props }) {
+    const t = useLabels("linkPreview", previewLabels, labels);
+    const [device, setDevice] = React.useState("desktop");
+    return (_jsx("div", { "data-slot": "link-preview-tabs", className: className, ...props, children: _jsxs(Tabs, { defaultValue: defaultValue ?? platforms[0], children: [_jsx(TabsList, { "aria-label": t("tabs"), children: platforms.map((p) => (_jsx(TabsTrigger, { value: p, children: p === "search" ? t("searchTab") : PLATFORM_NAME[p] }, p))) }), platforms.map((p) => (_jsx(TabsContent, { value: p, children: p === "search" ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { role: "group", "aria-label": t("search"), className: "inline-flex self-start rounded-ui-sm bg-surface-2 p-0.5 text-[12.5px]", children: ["desktop", "mobile"].map((d) => (_jsx("button", { type: "button", "aria-pressed": device === d, onClick: () => setDevice(d), className: cn("focus-ring rounded-[calc(var(--radius)-6px)] px-2.5 py-1 font-medium text-fg-muted transition-colors", device === d && "bg-surface text-fg shadow-sm"), children: t(d) }, d))) }), _jsx(SearchPreview, { data: data, device: device, highlight: term, appearance: appearance, size: size, labels: labels })] })) : (_jsx(SocialCardPreview, { data: data, platform: p, appearance: appearance, size: size, labels: labels })) }, p)))] }) }));
+}