@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-3XNPMDZY.js

@@ -0,0 +1,478 @@
+"use client";
+
+// src/gallery.tsx
+import {
+  AspectRatio,
+  Button,
+  Card,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  Skeleton,
+  downloadUrl
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import { Download, ImageOff, Maximize2 } from "lucide-react";
+import {
+  createContext,
+  forwardRef,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GalleryContext = createContext(null);
+function useGallery() {
+  const ctx = use(GalleryContext);
+  if (!ctx) throw new Error("useGallery must be used within <Gallery />");
+  return ctx;
+}
+function triggerDownload(image) {
+  void downloadUrl(image.downloadUrl ?? image.src, image.downloadName);
+}
+function GalleryImg({
+  src,
+  alt,
+  className,
+  loading,
+  showSkeleton = true
+}) {
+  const [failed, setFailed] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    if (imgRef.current?.complete) setLoaded(true);
+  }, []);
+  if (failed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center gap-1 bg-muted text-muted-foreground",
+          className
+        ),
+        ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
+        children: /* @__PURE__ */ jsx(ImageOff, { className: "size-6", "aria-hidden": "true" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showSkeleton && !loaded ? /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0 size-full rounded-none" }) : null,
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: imgRef,
+        src,
+        alt,
+        loading,
+        onError: () => setFailed(true),
+        onLoad: () => setLoaded(true),
+        className
+      }
+    )
+  ] });
+}
+function GalleryDownloadButton({
+  image,
+  className,
+  tabIndex
+}) {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      size: "icon-sm",
+      variant: "outline",
+      tabIndex,
+      "aria-label": t("ai.gallery.downloadImage"),
+      className: cn("rounded-full bg-background/80 backdrop-blur-sm", className),
+      onClick: (event) => {
+        event.stopPropagation();
+        triggerDownload(image);
+      },
+      children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true" })
+    }
+  );
+}
+var HOVER_TOOLBAR = "opacity-0 transition-opacity duration-fast ease-standard group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none";
+var TILT_PERSPECTIVE = 800;
+var TILT_MAX_DEG = 6;
+var TILT_SCALE = 1.04;
+var tiltTransform = (rotateX, rotateY, scale) => `perspective(${TILT_PERSPECTIVE}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
+var TILT_REST = tiltTransform(0, 0, 1);
+function GalleryTilt({ className, children }) {
+  const reduced = useReducedMotion();
+  const ref = useRef(null);
+  const rect = useRef(null);
+  const raf = useRef(null);
+  useEffect(
+    () => () => {
+      if (raf.current != null) cancelAnimationFrame(raf.current);
+    },
+    []
+  );
+  if (reduced) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "group relative rounded-lg transition-shadow duration-base ease-standard hover:z-10 hover:shadow-xl",
+          className
+        ),
+        children
+      }
+    );
+  }
+  const write = (transform) => {
+    if (ref.current) ref.current.style.transform = transform;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: { transform: TILT_REST },
+      onPointerEnter: () => {
+        rect.current = ref.current?.getBoundingClientRect() ?? null;
+        write(tiltTransform(0, 0, TILT_SCALE));
+      },
+      onPointerMove: (event) => {
+        const r = rect.current;
+        if (!r) return;
+        const px = (event.clientX - r.left) / r.width - 0.5;
+        const py = (event.clientY - r.top) / r.height - 0.5;
+        if (raf.current != null) cancelAnimationFrame(raf.current);
+        raf.current = requestAnimationFrame(
+          () => write(tiltTransform(-py * TILT_MAX_DEG, px * TILT_MAX_DEG, TILT_SCALE))
+        );
+      },
+      onPointerLeave: () => {
+        if (raf.current != null) cancelAnimationFrame(raf.current);
+        write(TILT_REST);
+      },
+      className: cn(
+        "group relative rounded-lg transition-[transform,box-shadow] duration-base ease-standard hover:z-10 hover:shadow-2xl",
+        className
+      ),
+      children
+    }
+  );
+}
+function GalleryEmpty() {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-32 flex-col items-center justify-center gap-2 p-6 text-center text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(ImageOff, { className: "size-6", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("p", { className: "text-body", children: t("ai.gallery.noImages") })
+  ] });
+}
+function GallerySingle() {
+  const { t } = useLocale();
+  const { images, aspectRatio, hideDownload, actions } = useGallery();
+  const image = images[0];
+  if (!image) return null;
+  return /* @__PURE__ */ jsxs(GalleryTilt, { children: [
+    /* @__PURE__ */ jsx(AspectRatio, { ratio: aspectRatio, className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+      GalleryImg,
+      {
+        src: image.src,
+        alt: image.alt,
+        loading: "lazy",
+        className: "size-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute end-2 top-2 z-10 flex items-center gap-1", children: [
+      hideDownload ? null : /* @__PURE__ */ jsx(GalleryDownloadButton, { image, className: HOVER_TOOLBAR }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-sm",
+          variant: "outline",
+          "aria-label": t("ai.gallery.expandImage"),
+          className: "rounded-full bg-background/80 backdrop-blur-sm",
+          onClick: () => actions.open(0),
+          children: /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true" })
+        }
+      )
+    ] })
+  ] });
+}
+function GalleryTile({ image, index }) {
+  const { images, aspectRatio, hideDownload, actions } = useGallery();
+  const total = images.length;
+  const label = image.title ?? (image.alt || `Image ${index + 1} of ${total}`);
+  return /* @__PURE__ */ jsxs(GalleryTilt, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => actions.open(index),
+        "aria-label": label,
+        className: "block w-full rounded-lg focus-ring",
+        children: /* @__PURE__ */ jsx(AspectRatio, { ratio: aspectRatio, className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+          GalleryImg,
+          {
+            src: image.thumbnailSrc ?? image.src,
+            alt: "",
+            loading: "lazy",
+            className: "size-full object-cover"
+          }
+        ) })
+      }
+    ),
+    hideDownload ? null : /* @__PURE__ */ jsx(
+      GalleryDownloadButton,
+      {
+        image,
+        className: cn("absolute end-2 top-2 z-10", HOVER_TOOLBAR)
+      }
+    )
+  ] });
+}
+function GalleryOverflowTile() {
+  const { images, maxVisible, aspectRatio, actions } = useGallery();
+  const total = images.length;
+  const count = total - maxVisible;
+  return /* @__PURE__ */ jsx(GalleryTilt, { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => actions.open(maxVisible),
+      "aria-label": `Show all ${total} images`,
+      className: "block w-full rounded-lg border border-border bg-muted focus-ring",
+      children: /* @__PURE__ */ jsx(AspectRatio, { ratio: aspectRatio, className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxs("span", { className: "flex size-full items-center justify-center text-subtitle text-muted-foreground transition-colors duration-fast ease-standard group-hover:text-foreground motion-reduce:transition-none", children: [
+        "+",
+        count,
+        " more"
+      ] }) })
+    }
+  ) });
+}
+function GallerySkeletonTile() {
+  const { aspectRatio } = useGallery();
+  return /* @__PURE__ */ jsx(AspectRatio, { ratio: aspectRatio, className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(Skeleton, { className: "size-full rounded-none" }) });
+}
+function GallerySkeletonGrid() {
+  const { skeletonCount } = useGallery();
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", "aria-hidden": "true", children: Array.from({ length: Math.max(1, skeletonCount) }).map((_, i) => /* @__PURE__ */ jsx(GallerySkeletonTile, {}, `skeleton-${i}`)) });
+}
+function GalleryGrid() {
+  const { images, maxVisible, incoming, skeletonCount } = useGallery();
+  const total = images.length;
+  if (incoming) {
+    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: [
+      images.map((image, index) => /* @__PURE__ */ jsx(GalleryTile, { image, index }, `${image.src}-${index}`)),
+      Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx(GallerySkeletonTile, {}, `skeleton-${i}`))
+    ] });
+  }
+  const hasOverflow = total > maxVisible;
+  const visible = hasOverflow ? images.slice(0, maxVisible) : images;
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: [
+    visible.map((image, index) => /* @__PURE__ */ jsx(GalleryTile, { image, index }, `${image.src}-${index}`)),
+    hasOverflow ? /* @__PURE__ */ jsx(GalleryOverflowTile, {}) : null
+  ] });
+}
+function GalleryDetailPanel({
+  image,
+  index,
+  renderMeta
+}) {
+  const { t } = useLocale();
+  const custom = renderMeta?.(image, index);
+  if (custom != null) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: custom });
+  }
+  const hasMeta = image.meta != null && image.meta.length > 0;
+  const hasBody = Boolean(image.description) || hasMeta;
+  if (!hasBody) {
+    return /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground", children: t("ai.gallery.noDetails") });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    image.description ? /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground", children: image.description }) : null,
+    hasMeta ? /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-3", children: image.meta?.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-meta text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ jsx("dd", { className: "text-body text-foreground", children: item.value })
+    ] }, `${item.label}-${i}`)) }) : null
+  ] });
+}
+function GalleryCarousel() {
+  const { t } = useLocale();
+  const { images, state, actions, hideDownload } = useGallery();
+  const [api, setApi] = useState();
+  const showArrows = images.length > 1;
+  const { setActiveIndex } = actions;
+  const [startIndex] = useState(() => state.activeIndex);
+  const opts = useMemo(() => ({ startIndex, loop: false }), [startIndex]);
+  useEffect(() => {
+    if (!api) return;
+    const onSelect = () => setActiveIndex(api.selectedScrollSnap());
+    onSelect();
+    api.on("select", onSelect);
+    api.on("reInit", onSelect);
+    return () => {
+      api.off("select", onSelect);
+      api.off("reInit", onSelect);
+    };
+  }, [api, setActiveIndex]);
+  useEffect(() => {
+    if (!api) return;
+    const raf = requestAnimationFrame(() => api.reInit());
+    return () => cancelAnimationFrame(raf);
+  }, [api]);
+  return /* @__PURE__ */ jsxs(
+    Carousel,
+    {
+      setApi,
+      opts,
+      className: "relative w-full",
+      "aria-label": t("ai.gallery.label"),
+      children: [
+        /* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, index) => /* @__PURE__ */ jsx(
+          CarouselItem,
+          {
+            "aria-label": `${index + 1} of ${images.length}`,
+            children: /* @__PURE__ */ jsxs("div", { className: "group/slide relative flex items-center justify-center px-4", children: [
+              /* @__PURE__ */ jsx(
+                GalleryImg,
+                {
+                  src: image.src,
+                  alt: image.alt,
+                  showSkeleton: false,
+                  className: "max-h-[80vh] w-auto max-w-full object-contain"
+                }
+              ),
+              hideDownload ? null : /* @__PURE__ */ jsx(
+                GalleryDownloadButton,
+                {
+                  image,
+                  tabIndex: index === state.activeIndex ? 0 : -1,
+                  className: "absolute end-14 top-3 opacity-0 transition-opacity duration-fast ease-standard group-hover/slide:opacity-100 group-focus-within/slide:opacity-100 motion-reduce:transition-none"
+                }
+              )
+            ] })
+          },
+          `${image.src}-${index}`
+        )) }),
+        showArrows ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CarouselPrevious, { className: "start-4" }),
+          /* @__PURE__ */ jsx(CarouselNext, { className: "end-4" })
+        ] }) : null
+      ]
+    }
+  );
+}
+function GalleryModal() {
+  const { images, state, actions, renderMeta } = useGallery();
+  const total = images.length;
+  const active = images[state.activeIndex];
+  const fallbackTitle = active ? active.alt || `Image ${state.activeIndex + 1} of ${total}` : "Image preview";
+  return /* @__PURE__ */ jsx(Dialog, { open: state.open, onOpenChange: actions.setOpen, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      size: "full",
+      className: "grid grid-rows-[minmax(0,3fr)_minmax(0,2fr)] gap-0 overflow-hidden p-0 md:grid-cols-[minmax(0,1fr)_22rem] md:grid-rows-1",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative flex min-h-0 items-center justify-center overflow-hidden bg-muted", children: active ? /* @__PURE__ */ jsx(GalleryCarousel, {}) : null }),
+        /* @__PURE__ */ jsxs("aside", { className: "flex min-h-0 flex-col overflow-y-auto border-border bg-card p-6 max-md:border-t md:border-s", children: [
+          active?.title ? /* @__PURE__ */ jsx(DialogTitle, { className: "pe-8 text-title", children: active.title }) : /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: fallbackTitle }),
+          /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: total > 1 ? `Image ${state.activeIndex + 1} of ${total}. Use the arrow keys to browse.` : "Image preview" }),
+          active ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex-1", children: /* @__PURE__ */ jsx(
+            GalleryDetailPanel,
+            {
+              image: active,
+              index: state.activeIndex,
+              renderMeta
+            }
+          ) }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: active && total > 1 ? `${active.title ?? active.alt} \u2014 image ${state.activeIndex + 1} of ${total}` : "" })
+      ]
+    }
+  ) });
+}
+var Gallery = forwardRef(function Gallery2({
+  images,
+  maxVisible = 5,
+  aspectRatio = 1,
+  hideDownload = false,
+  loading = false,
+  expectedCount,
+  renderMeta,
+  className,
+  ...props
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const openAt = useCallback((index) => {
+    setActiveIndex(index);
+    setOpen(true);
+  }, []);
+  const close = useCallback(() => setOpen(false), []);
+  const target = expectedCount ?? (loading ? maxVisible : void 0);
+  const incoming = target !== void 0 && images.length < target;
+  const skeletonCount = incoming ? Math.max(0, Math.min(target, maxVisible) - images.length) : 0;
+  const loadingFromEmpty = incoming && images.length === 0;
+  const [liveMsg, setLiveMsg] = useState("");
+  useEffect(() => {
+    setLiveMsg(loadingFromEmpty ? "Loading images" : "");
+  }, [loadingFromEmpty]);
+  const value = useMemo(
+    () => ({
+      images,
+      maxVisible,
+      aspectRatio,
+      hideDownload,
+      incoming,
+      skeletonCount,
+      renderMeta,
+      state: { open, activeIndex },
+      actions: { open: openAt, close, setActiveIndex, setOpen }
+    }),
+    [
+      images,
+      maxVisible,
+      aspectRatio,
+      hideDownload,
+      incoming,
+      skeletonCount,
+      renderMeta,
+      open,
+      activeIndex,
+      openAt,
+      close
+    ]
+  );
+  let body;
+  if (images.length === 0) {
+    body = incoming ? /* @__PURE__ */ jsx(GallerySkeletonGrid, {}) : /* @__PURE__ */ jsx(GalleryEmpty, {});
+  } else if (incoming) {
+    body = /* @__PURE__ */ jsx(GalleryGrid, {});
+  } else if (images.length === 1) {
+    body = /* @__PURE__ */ jsx(GallerySingle, {});
+  } else {
+    body = /* @__PURE__ */ jsx(GalleryGrid, {});
+  }
+  return /* @__PURE__ */ jsxs(GalleryContext.Provider, { value, children: [
+    /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-2", className), ...props, children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: liveMsg }),
+      body
+    ] }),
+    images.length > 0 ? /* @__PURE__ */ jsx(GalleryModal, {}) : null
+  ] });
+});
+
+export {
+  Gallery
+};
+//# sourceMappingURL=chunk-3XNPMDZY.js.map

package/dist/chunk-3XNPMDZY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gallery.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Gallery — an OUTPUT-oriented image gallery for AI results / chat surfaces.\n *\n * A `Card` that renders a single image, or a thumbnail grid that collapses the\n * overflow into a \"+N more\" tile, and opens a unified lightbox `Dialog` with a\n * `Carousel` and a right-side metadata panel that tracks the active slide.\n *\n * Distinct from the other image surfaces in this package — don't merge them:\n *   - `attachments.tsx` — composer INPUT (removable, file-typed thumbnails).\n *   - `asset-preview.tsx` — a SINGLE asset in the context rail (type-switched).\n *   - `image.tsx` — a base64 `<img>` wrapper for AI-SDK generated images.\n * Gallery is the multi-image lightbox: expand / download / carousel / metadata.\n *\n * The data model is framework-agnostic (plain `{ src, alt, … }`) — it does NOT\n * couple to the AI-SDK message model. Map a `UIMessage` part onto `GalleryImage`\n * in the app or a thin adapter.\n */\n\nimport {\n  AspectRatio,\n  Button,\n  Card,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  Skeleton,\n  downloadUrl,\n  type CarouselApi,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport { useReducedMotion } from \"@elabs-ai/components-tokens\";\nimport { Download, ImageOff, Maximize2 } from \"lucide-react\";\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\n/** One labelled metadata row rendered in the detail panel `<dl>`. */\nexport interface GalleryMetaItem {\n  /** Field label (rendered muted, in the `<dt>`). */\n  label: string;\n  /** Field value — a string in the common case; `ReactNode` allows a link/badge. */\n  value: ReactNode;\n}\n\n/** A single gallery image plus its optional metadata. */\nexport interface GalleryImage {\n  /** Full-resolution source shown in the lightbox and standalone tile. */\n  src: string;\n  /** Required alt text (a11y). Pass `\"\"` to mark the image decorative. */\n  alt: string;\n  /** Cheaper thumbnail for the grid; falls back to `src`. */\n  thumbnailSrc?: string;\n  /** Headline shown in the panel; also feeds the dialog's accessible name. */\n  title?: string;\n  /** Long-form copy shown under the title in the detail panel. */\n  description?: string;\n  /** Structured key/value rows rendered as a `<dl>` in the detail panel. */\n  meta?: GalleryMetaItem[];\n  /** Overrides `src` for the download (e.g. a signed full-res URL). */\n  downloadUrl?: string;\n  /** Suggested download filename. */\n  downloadName?: string;\n}\n\nexport interface GalleryProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Images to display. `0` → empty state, `1` → standalone, `≥2` → grid. */\n  images: GalleryImage[];\n  /** Thumbnails to show before collapsing the rest into a \"+N more\" tile. @default 5 */\n  maxVisible?: number;\n  /** Aspect ratio for grid tiles and the standalone image. @default 1 (square) */\n  aspectRatio?: number;\n  /** Hide every download affordance (e.g. rights-restricted assets). @default false */\n  hideDownload?: boolean;\n  /**\n   * The set is still arriving (loading-states.md `loading` signal). Renders\n   * skeleton tiles in the grid footprint instead of the empty state, and fills\n   * the gap up to `expectedCount` (or `maxVisible`) while images stream in.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Total images expected once the set finishes arriving. When\n   * `images.length < expectedCount`, the arrived tiles render alongside\n   * skeleton tiles for the missing ones, so the grid fills in place (no reflow).\n   */\n  expectedCount?: number;\n  /**\n   * Replace the default metadata body in the detail panel. Receives the\n   * currently-active image, so it stays in sync with the carousel. The panel\n   * chrome + title heading remain.\n   */\n  renderMeta?: (image: GalleryImage, index: number) => ReactNode;\n}\n\ninterface GalleryContextValue {\n  images: GalleryImage[];\n  maxVisible: number;\n  aspectRatio: number;\n  hideDownload: boolean;\n  /** The set is still arriving — render skeleton tiles to fill the gap. */\n  incoming: boolean;\n  /** How many skeleton tiles to append after the arrived images. */\n  skeletonCount: number;\n  renderMeta?: GalleryProps[\"renderMeta\"];\n  state: { open: boolean; activeIndex: number };\n  actions: {\n    open: (index: number) => void;\n    close: () => void;\n    setActiveIndex: (index: number) => void;\n    setOpen: (open: boolean) => void;\n  };\n}\n\nconst GalleryContext = createContext<GalleryContextValue | null>(null);\n\nfunction useGallery(): GalleryContextValue {\n  const ctx = use(GalleryContext);\n  if (!ctx) throw new Error(\"useGallery must be used within <Gallery />\");\n  return ctx;\n}\n\nfunction triggerDownload(image: GalleryImage): void {\n  void downloadUrl(image.downloadUrl ?? image.src, image.downloadName);\n}\n\n/**\n * `<img>` with a `Skeleton` placeholder until it loads (loading-states.md — the\n * box is already reserved by `AspectRatio`, so no CLS) and a token-styled\n * fallback box when the source fails to load.\n */\nfunction GalleryImg({\n  src,\n  alt,\n  className,\n  loading,\n  showSkeleton = true,\n}: {\n  src: string;\n  alt: string;\n  className?: string;\n  loading?: \"lazy\" | \"eager\";\n  /**\n   * Show the `Skeleton` placeholder until load. Only meaningful inside a\n   * space-reserved box (`AspectRatio`); the lightbox sets `false` because the\n   * slide isn't sized to the image, so an `absolute inset-0` skeleton would fill\n   * the whole padded slide rather than the image footprint.\n   */\n  showSkeleton?: boolean;\n}) {\n  const [failed, setFailed] = useState(false);\n  const [loaded, setLoaded] = useState(false);\n  const imgRef = useRef<HTMLImageElement>(null);\n\n  // Cached images can finish before React attaches `onLoad` — read `complete`.\n  useEffect(() => {\n    if (imgRef.current?.complete) setLoaded(true);\n  }, []);\n\n  if (failed) {\n    return (\n      <div\n        className={cn(\n          \"flex flex-col items-center justify-center gap-1 bg-muted text-muted-foreground\",\n          className,\n        )}\n        {...(alt ? { role: \"img\", \"aria-label\": alt } : { \"aria-hidden\": true })}\n      >\n        <ImageOff className=\"size-6\" aria-hidden=\"true\" />\n      </div>\n    );\n  }\n\n  return (\n    <>\n      {showSkeleton && !loaded ? (\n        <Skeleton className=\"absolute inset-0 size-full rounded-none\" />\n      ) : null}\n      <img\n        ref={imgRef}\n        src={src}\n        alt={alt}\n        loading={loading}\n        onError={() => setFailed(true)}\n        onLoad={() => setLoaded(true)}\n        className={className}\n      />\n    </>\n  );\n}\n\n/** Round, frosted icon button that downloads `image`. */\nfunction GalleryDownloadButton({\n  image,\n  className,\n  tabIndex,\n}: {\n  image: GalleryImage;\n  className?: string;\n  /** Off-screen carousel slides pass -1 so they're not phantom tab stops. */\n  tabIndex?: number;\n}) {\n  const { t } = useLocale();\n\n  return (\n    <Button\n      type=\"button\"\n      size=\"icon-sm\"\n      variant=\"outline\"\n      tabIndex={tabIndex}\n      aria-label={t(\"ai.gallery.downloadImage\")}\n      className={cn(\"rounded-full bg-background/80 backdrop-blur-sm\", className)}\n      onClick={(event) => {\n        event.stopPropagation();\n        triggerDownload(image);\n      }}\n    >\n      <Download aria-hidden=\"true\" />\n    </Button>\n  );\n}\n\nconst HOVER_TOOLBAR =\n  \"opacity-0 transition-opacity duration-fast ease-standard group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none\";\n\n// \"Comes closer\" hover for a tile: a gentle scale-up + drop shadow, plus a 3D\n// tilt that tracks the cursor. Movement (tilt + scale) is gated by\n// useReducedMotion — the shadow still responds (\"reduced != none\", like Card).\n// The wrapper carries `group relative` (toolbar reveal + absolute children) and\n// NO overflow, so the shadow and the inner control's focus ring aren't clipped.\nconst TILT_PERSPECTIVE = 800; // px — larger = subtler tilt\nconst TILT_MAX_DEG = 6;\nconst TILT_SCALE = 1.04;\nconst tiltTransform = (rotateX: number, rotateY: number, scale: number) =>\n  `perspective(${TILT_PERSPECTIVE}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;\nconst TILT_REST = tiltTransform(0, 0, 1);\n\nfunction GalleryTilt({ className, children }: { className?: string; children: ReactNode }) {\n  const reduced = useReducedMotion();\n  const ref = useRef<HTMLDivElement>(null);\n  const rect = useRef<DOMRect | null>(null);\n  const raf = useRef<number | null>(null);\n\n  useEffect(\n    () => () => {\n      if (raf.current != null) cancelAnimationFrame(raf.current);\n    },\n    [],\n  );\n\n  // Reduced motion: no tilt/scale; the shadow alone signals the lift.\n  if (reduced) {\n    return (\n      <div\n        className={cn(\n          \"group relative rounded-lg transition-shadow duration-base ease-standard hover:z-10 hover:shadow-xl\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  const write = (transform: string) => {\n    if (ref.current) ref.current.style.transform = transform;\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={{ transform: TILT_REST }}\n      onPointerEnter={() => {\n        // Cache geometry once per hover (no per-move layout read); grow on enter.\n        rect.current = ref.current?.getBoundingClientRect() ?? null;\n        write(tiltTransform(0, 0, TILT_SCALE));\n      }}\n      onPointerMove={(event) => {\n        const r = rect.current;\n        if (!r) return;\n        const px = (event.clientX - r.left) / r.width - 0.5;\n        const py = (event.clientY - r.top) / r.height - 0.5;\n        if (raf.current != null) cancelAnimationFrame(raf.current);\n        raf.current = requestAnimationFrame(() =>\n          write(tiltTransform(-py * TILT_MAX_DEG, px * TILT_MAX_DEG, TILT_SCALE)),\n        );\n      }}\n      onPointerLeave={() => {\n        if (raf.current != null) cancelAnimationFrame(raf.current);\n        write(TILT_REST);\n      }}\n      className={cn(\n        \"group relative rounded-lg transition-[transform,box-shadow] duration-base ease-standard hover:z-10 hover:shadow-2xl\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction GalleryEmpty() {\n  const { t } = useLocale();\n  return (\n    <div className=\"flex min-h-32 flex-col items-center justify-center gap-2 p-6 text-center text-muted-foreground\">\n      <ImageOff className=\"size-6\" aria-hidden=\"true\" />\n      <p className=\"text-body\">{t(\"ai.gallery.noImages\")}</p>\n    </div>\n  );\n}\n\n/** The single-image branch — a framed image with an always-on expand button. */\nfunction GallerySingle() {\n  const { t } = useLocale();\n  const { images, aspectRatio, hideDownload, actions } = useGallery();\n  const image = images[0];\n  if (!image) return null;\n\n  return (\n    <GalleryTilt>\n      <AspectRatio ratio={aspectRatio} className=\"overflow-hidden rounded-lg\">\n        <GalleryImg\n          src={image.src}\n          alt={image.alt}\n          loading=\"lazy\"\n          className=\"size-full object-cover\"\n        />\n      </AspectRatio>\n      <div className=\"absolute end-2 top-2 z-10 flex items-center gap-1\">\n        {hideDownload ? null : <GalleryDownloadButton image={image} className={HOVER_TOOLBAR} />}\n        <Button\n          type=\"button\"\n          size=\"icon-sm\"\n          variant=\"outline\"\n          aria-label={t(\"ai.gallery.expandImage\")}\n          className=\"rounded-full bg-background/80 backdrop-blur-sm\"\n          onClick={() => actions.open(0)}\n        >\n          <Maximize2 aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </GalleryTilt>\n  );\n}\n\n/** One thumbnail in the grid — a button that opens the lightbox at `index`. */\nfunction GalleryTile({ image, index }: { image: GalleryImage; index: number }) {\n  const { images, aspectRatio, hideDownload, actions } = useGallery();\n  const total = images.length;\n  const label = image.title ?? (image.alt || `Image ${index + 1} of ${total}`);\n\n  return (\n    <GalleryTilt>\n      <button\n        type=\"button\"\n        onClick={() => actions.open(index)}\n        aria-label={label}\n        className=\"block w-full rounded-lg focus-ring\"\n      >\n        <AspectRatio ratio={aspectRatio} className=\"overflow-hidden rounded-lg\">\n          {/* Decorative: the button carries the accessible name. */}\n          <GalleryImg\n            src={image.thumbnailSrc ?? image.src}\n            alt=\"\"\n            loading=\"lazy\"\n            className=\"size-full object-cover\"\n          />\n        </AspectRatio>\n      </button>\n      {hideDownload ? null : (\n        <GalleryDownloadButton\n          image={image}\n          className={cn(\"absolute end-2 top-2 z-10\", HOVER_TOOLBAR)}\n        />\n      )}\n    </GalleryTilt>\n  );\n}\n\n/** The \"+N more\" tile — same footprint as a thumbnail; opens the carousel. */\nfunction GalleryOverflowTile() {\n  const { images, maxVisible, aspectRatio, actions } = useGallery();\n  const total = images.length;\n  const count = total - maxVisible;\n\n  return (\n    <GalleryTilt>\n      <button\n        type=\"button\"\n        onClick={() => actions.open(maxVisible)}\n        aria-label={`Show all ${total} images`}\n        className=\"block w-full rounded-lg border border-border bg-muted focus-ring\"\n      >\n        <AspectRatio ratio={aspectRatio} className=\"overflow-hidden rounded-lg\">\n          <span className=\"flex size-full items-center justify-center text-subtitle text-muted-foreground transition-colors duration-fast ease-standard group-hover:text-foreground motion-reduce:transition-none\">\n            +{count} more\n          </span>\n        </AspectRatio>\n      </button>\n    </GalleryTilt>\n  );\n}\n\n/** A grid tile placeholder — same footprint as a thumbnail, shown while loading. */\nfunction GallerySkeletonTile() {\n  const { aspectRatio } = useGallery();\n  return (\n    <AspectRatio ratio={aspectRatio} className=\"overflow-hidden rounded-lg\">\n      <Skeleton className=\"size-full rounded-none\" />\n    </AspectRatio>\n  );\n}\n\n/**\n * The all-skeleton grid for the loading-from-empty case (no images yet).\n * Decorative — the loading announcement comes from the persistent live region on\n * the always-mounted `Card` (so it fires reliably; ARIA22).\n */\nfunction GallerySkeletonGrid() {\n  const { skeletonCount } = useGallery();\n  return (\n    <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\" aria-hidden=\"true\">\n      {Array.from({ length: Math.max(1, skeletonCount) }).map((_, i) => (\n        <GallerySkeletonTile key={`skeleton-${i}`} />\n      ))}\n    </div>\n  );\n}\n\nfunction GalleryGrid() {\n  const { images, maxVisible, incoming, skeletonCount } = useGallery();\n  const total = images.length;\n\n  // While the set is still arriving, render the arrived tiles plus skeleton\n  // tiles for the missing ones — no \"+N more\" collapse until the set settles.\n  if (incoming) {\n    return (\n      <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n        {images.map((image, index) => (\n          <GalleryTile key={`${image.src}-${index}`} image={image} index={index} />\n        ))}\n        {Array.from({ length: skeletonCount }).map((_, i) => (\n          <GallerySkeletonTile key={`skeleton-${i}`} />\n        ))}\n      </div>\n    );\n  }\n\n  const hasOverflow = total > maxVisible;\n  const visible = hasOverflow ? images.slice(0, maxVisible) : images;\n\n  return (\n    <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n      {visible.map((image, index) => (\n        <GalleryTile key={`${image.src}-${index}`} image={image} index={index} />\n      ))}\n      {hasOverflow ? <GalleryOverflowTile /> : null}\n    </div>\n  );\n}\n\n/** Default detail-panel body: description + a `<dl>` of `meta` rows. */\nfunction GalleryDetailPanel({\n  image,\n  index,\n  renderMeta,\n}: {\n  image: GalleryImage;\n  index: number;\n  renderMeta?: GalleryProps[\"renderMeta\"];\n}) {\n  const { t } = useLocale();\n  const custom = renderMeta?.(image, index);\n  if (custom != null) {\n    return <div className=\"flex flex-col gap-4\">{custom}</div>;\n  }\n\n  const hasMeta = image.meta != null && image.meta.length > 0;\n  const hasBody = Boolean(image.description) || hasMeta;\n\n  if (!hasBody) {\n    return <p className=\"text-body text-muted-foreground\">{t(\"ai.gallery.noDetails\")}</p>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {image.description ? (\n        <p className=\"text-body text-muted-foreground\">{image.description}</p>\n      ) : null}\n      {hasMeta ? (\n        <dl className=\"flex flex-col gap-3\">\n          {image.meta?.map((item, i) => (\n            <div key={`${item.label}-${i}`} className=\"flex flex-col gap-0.5\">\n              <dt className=\"text-meta text-muted-foreground\">{item.label}</dt>\n              <dd className=\"text-body text-foreground\">{item.value}</dd>\n            </div>\n          ))}\n        </dl>\n      ) : null}\n    </div>\n  );\n}\n\n/** The lightbox carousel — one slide per image; syncs `activeIndex` on select. */\nfunction GalleryCarousel() {\n  const { t } = useLocale();\n  const { images, state, actions, hideDownload } = useGallery();\n  const [api, setApi] = useState<CarouselApi>();\n  const showArrows = images.length > 1;\n  const { setActiveIndex } = actions;\n  // Capture the open-at index ONCE (the modal remounts the carousel each open).\n  // Tying opts.startIndex to the live activeIndex hands Embla a changed options\n  // object on every slide (it deep-compares) → constant reInit → the native\n  // slide animation never plays. A stable opts keeps Embla's scroll intact;\n  // activeIndex flows one-way (carousel select → panel), never back into opts.\n  const [startIndex] = useState(() => state.activeIndex);\n  const opts = useMemo(() => ({ startIndex, loop: false }), [startIndex]);\n\n  useEffect(() => {\n    if (!api) return;\n    const onSelect = () => setActiveIndex(api.selectedScrollSnap());\n    onSelect();\n    api.on(\"select\", onSelect);\n    api.on(\"reInit\", onSelect);\n    return () => {\n      api.off(\"select\", onSelect);\n      api.off(\"reInit\", onSelect);\n    };\n  }, [api, setActiveIndex]);\n\n  // The dialog animates in (zoom-in-95); re-measure once laid out so Embla\n  // aligns and lands on the opened slide.\n  useEffect(() => {\n    if (!api) return;\n    const raf = requestAnimationFrame(() => api.reInit());\n    return () => cancelAnimationFrame(raf);\n  }, [api]);\n\n  return (\n    <Carousel\n      setApi={setApi}\n      opts={opts}\n      className=\"relative w-full\"\n      aria-label={t(\"ai.gallery.label\")}\n    >\n      <CarouselContent>\n        {images.map((image, index) => (\n          <CarouselItem\n            key={`${image.src}-${index}`}\n            aria-label={`${index + 1} of ${images.length}`}\n          >\n            <div className=\"group/slide relative flex items-center justify-center px-4\">\n              <GalleryImg\n                src={image.src}\n                alt={image.alt}\n                showSkeleton={false}\n                className=\"max-h-[80vh] w-auto max-w-full object-contain\"\n              />\n              {hideDownload ? null : (\n                <GalleryDownloadButton\n                  image={image}\n                  // Off-screen slides stay in the DOM (Embla); keep only the\n                  // active slide's download button in the tab order.\n                  tabIndex={index === state.activeIndex ? 0 : -1}\n                  className=\"absolute end-14 top-3 opacity-0 transition-opacity duration-fast ease-standard group-hover/slide:opacity-100 group-focus-within/slide:opacity-100 motion-reduce:transition-none\"\n                />\n              )}\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      {showArrows ? (\n        <>\n          <CarouselPrevious className=\"start-4\" />\n          <CarouselNext className=\"end-4\" />\n        </>\n      ) : null}\n    </Carousel>\n  );\n}\n\nfunction GalleryModal() {\n  const { images, state, actions, renderMeta } = useGallery();\n  const total = images.length;\n  const active = images[state.activeIndex];\n\n  const fallbackTitle = active\n    ? active.alt || `Image ${state.activeIndex + 1} of ${total}`\n    : \"Image preview\";\n\n  return (\n    <Dialog open={state.open} onOpenChange={actions.setOpen}>\n      <DialogContent\n        size=\"full\"\n        className=\"grid grid-rows-[minmax(0,3fr)_minmax(0,2fr)] gap-0 overflow-hidden p-0 md:grid-cols-[minmax(0,1fr)_22rem] md:grid-rows-1\"\n      >\n        <div className=\"relative flex min-h-0 items-center justify-center overflow-hidden bg-muted\">\n          {active ? <GalleryCarousel /> : null}\n        </div>\n        <aside className=\"flex min-h-0 flex-col overflow-y-auto border-border bg-card p-6 max-md:border-t md:border-s\">\n          {active?.title ? (\n            <DialogTitle className=\"pe-8 text-title\">{active.title}</DialogTitle>\n          ) : (\n            <DialogTitle className=\"sr-only\">{fallbackTitle}</DialogTitle>\n          )}\n          <DialogDescription className=\"sr-only\">\n            {total > 1\n              ? `Image ${state.activeIndex + 1} of ${total}. Use the arrow keys to browse.`\n              : \"Image preview\"}\n          </DialogDescription>\n          {active ? (\n            <div className=\"mt-4 flex-1\">\n              <GalleryDetailPanel\n                image={active}\n                index={state.activeIndex}\n                renderMeta={renderMeta}\n              />\n            </div>\n          ) : null}\n        </aside>\n        {/* Carousel navigation only changes the title's text, which doesn't\n            re-announce. A polite live region orients screen-reader users on each\n            slide change. (sr-only is position:absolute, so it adds no grid cell.) */}\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {active && total > 1\n            ? `${active.title ?? active.alt} — image ${state.activeIndex + 1} of ${total}`\n            : \"\"}\n        </span>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const Gallery = forwardRef<HTMLDivElement, GalleryProps>(function Gallery(\n  {\n    images,\n    maxVisible = 5,\n    aspectRatio = 1,\n    hideDownload = false,\n    loading = false,\n    expectedCount,\n    renderMeta,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const openAt = useCallback((index: number) => {\n    setActiveIndex(index);\n    setOpen(true);\n  }, []);\n  const close = useCallback(() => setOpen(false), []);\n\n  // The set is \"incoming\" while it's still arriving — either an explicit\n  // `loading` flag, or fewer images than the `expectedCount`. Fill the grid up\n  // to the target (capped at the visible footprint) with skeleton tiles.\n  const target = expectedCount ?? (loading ? maxVisible : undefined);\n  const incoming = target !== undefined && images.length < target;\n  const skeletonCount = incoming ? Math.max(0, Math.min(target, maxVisible) - images.length) : 0;\n\n  // Loading announcement: the live region must exist BEFORE its text appears\n  // (ARIA22), so the `sr-only` status span below is always mounted and its label\n  // is set one tick later via this effect — reliable on NVDA + Chrome.\n  const loadingFromEmpty = incoming && images.length === 0;\n  const [liveMsg, setLiveMsg] = useState(\"\");\n  useEffect(() => {\n    setLiveMsg(loadingFromEmpty ? \"Loading images\" : \"\");\n  }, [loadingFromEmpty]);\n\n  const value = useMemo<GalleryContextValue>(\n    () => ({\n      images,\n      maxVisible,\n      aspectRatio,\n      hideDownload,\n      incoming,\n      skeletonCount,\n      renderMeta,\n      state: { open, activeIndex },\n      actions: { open: openAt, close, setActiveIndex, setOpen },\n    }),\n    [\n      images,\n      maxVisible,\n      aspectRatio,\n      hideDownload,\n      incoming,\n      skeletonCount,\n      renderMeta,\n      open,\n      activeIndex,\n      openAt,\n      close,\n    ],\n  );\n\n  let body: ReactNode;\n  if (images.length === 0) {\n    body = incoming ? <GallerySkeletonGrid /> : <GalleryEmpty />;\n  } else if (incoming) {\n    body = <GalleryGrid />;\n  } else if (images.length === 1) {\n    body = <GallerySingle />;\n  } else {\n    body = <GalleryGrid />;\n  }\n\n  return (\n    <GalleryContext.Provider value={value}>\n      <Card ref={ref} className={cn(\"p-2\", className)} {...props}>\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {liveMsg}\n        </span>\n        {body}\n      </Card>\n      {images.length > 0 ? <GalleryModal /> : null}\n    </GalleryContext.Provider>\n  );\n});\n"],"mappings":"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","names":["Gallery"]}

package/dist/chunk-3YPT3V7L.js

@@ -0,0 +1,56 @@
+"use client";
+
+// src/shimmer.tsx
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { motion } from "motion/react";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var motionComponentCache = /* @__PURE__ */ new Map();
+var getMotionComponent = (element) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+var ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const MotionComponent = getMotionComponent(Component);
+  const reducedMotion = useReducedMotion();
+  const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+  return /* @__PURE__ */ jsx(
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: reducedMotion ? { duration: 0, repeat: 0 } : {
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY
+      },
+      children
+    }
+  );
+};
+var Shimmer = memo(ShimmerComponent);
+
+export {
+  Shimmer
+};
+//# sourceMappingURL=chunk-3YPT3V7L.js.map

package/dist/chunk-3YPT3V7L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shimmer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useReducedMotion } from \"@elabs-ai/components-tokens\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { MotionProps } from \"motion/react\";\nimport { motion } from \"motion/react\";\nimport type { CSSProperties, ElementType, JSX } from \"react\";\nimport { memo, useMemo } from \"react\";\n\ntype MotionHTMLProps = MotionProps & Record<string, unknown>;\n\n// Cache motion components at module level to avoid creating during render\nconst motionComponentCache = new Map<\n  keyof JSX.IntrinsicElements,\n  React.ComponentType<MotionHTMLProps>\n>();\n\nconst getMotionComponent = (element: keyof JSX.IntrinsicElements) => {\n  let component = motionComponentCache.get(element);\n  if (!component) {\n    component = motion.create(element);\n    motionComponentCache.set(element, component);\n  }\n  return component;\n};\n\nexport interface TextShimmerProps {\n  children: string;\n  as?: ElementType;\n  className?: string;\n  duration?: number;\n  spread?: number;\n}\n\nconst ShimmerComponent = ({\n  children,\n  as: Component = \"p\",\n  className,\n  duration = 2,\n  spread = 2,\n}: TextShimmerProps) => {\n  const MotionComponent = getMotionComponent(Component as keyof JSX.IntrinsicElements);\n\n  // The CSS --motion-factor gate cannot reach this JS timeline; resolve the\n  // motion preference (user > OS) here and stop the infinite sweep when reduced.\n  const reducedMotion = useReducedMotion();\n\n  const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);\n\n  return (\n    <MotionComponent\n      animate={{ backgroundPosition: \"0% center\" }}\n      className={cn(\n        \"relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent\",\n        \"[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]\",\n        className,\n      )}\n      initial={{ backgroundPosition: \"100% center\" }}\n      style={\n        {\n          \"--spread\": `${dynamicSpread}px`,\n          backgroundImage:\n            \"var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))\",\n        } as CSSProperties\n      }\n      transition={\n        reducedMotion\n          ? { duration: 0, repeat: 0 }\n          : {\n              duration,\n              ease: \"linear\",\n              repeat: Number.POSITIVE_INFINITY,\n            }\n      }\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n\nexport const Shimmer = memo(ShimmerComponent);\n"],"mappings":";;;AAEA,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,SAAS,cAAc;AAEvB,SAAS,MAAM,eAAe;AA2C1B;AAtCJ,IAAM,uBAAuB,oBAAI,IAG/B;AAEF,IAAM,qBAAqB,CAAC,YAAyC;AACnE,MAAI,YAAY,qBAAqB,IAAI,OAAO;AAChD,MAAI,CAAC,WAAW;AACd,gBAAY,OAAO,OAAO,OAAO;AACjC,yBAAqB,IAAI,SAAS,SAAS;AAAA,EAC7C;AACA,SAAO;AACT;AAUA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AACX,MAAwB;AACtB,QAAM,kBAAkB,mBAAmB,SAAwC;AAInF,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,gBAAgB,QAAQ,OAAO,UAAU,UAAU,KAAK,QAAQ,CAAC,UAAU,MAAM,CAAC;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,EAAE,oBAAoB,YAAY;AAAA,MAC3C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,oBAAoB,cAAc;AAAA,MAC7C,OACE;AAAA,QACE,YAAY,GAAG,aAAa;AAAA,QAC5B,iBACE;AAAA,MACJ;AAAA,MAEF,YACE,gBACI,EAAE,UAAU,GAAG,QAAQ,EAAE,IACzB;AAAA,QACE;AAAA,QACA,MAAM;AAAA,QACN,QAAQ,OAAO;AAAA,MACjB;AAAA,MAGL;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,UAAU,KAAK,gBAAgB;","names":[]}