@krizaka/ui 3.19.0 → 3.20.0

package/dist/media-grid.d.ts

@@ -1,5 +1,31 @@
 import * as React from 'react';
 
+interface LoadMoreProps extends Omit<React.ComponentProps<"div">, "children" | "onError"> {
+    /** Asks for the next page. Not called while `loading`, nor once `hasMore` is false. */
+    onLoadMore: () => void;
+    /** There is a next page. */
+    hasMore: boolean;
+    /** A page is on its way. */
+    loading?: boolean;
+    /** The last page failed: the button reads `retryLabel`, and nothing loads by itself until it is pressed. */
+    failed?: boolean;
+    /** The button, passed translated ("Load more"). */
+    label: string;
+    /** The wait, passed translated ("Loading more videos"). */
+    loadingLabel: string;
+    /** The button after a failure, passed translated ("Try again"). Defaults to `label`. */
+    retryLabel?: string;
+    /** Shown instead of the button when the list is over, passed translated ("You have seen everything"). Nothing if absent. */
+    endLabel?: string;
+    /**
+     * How far below the viewport the page is already requested (an IntersectionObserver `rootMargin`).
+     * @default "900px 0px"
+     */
+    rootMargin?: string;
+}
+/** Infinite scroll with a visible "Load more" under it. */
+declare function LoadMore({ onLoadMore, hasMore, loading, failed, label, loadingLabel, retryLabel, endLabel, rootMargin, className, ...props }: LoadMoreProps): React.JSX.Element;
+
 /** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */
 type LinkComponent = React.ElementType<{
     href: string;
@@ -81,8 +107,22 @@ interface VideoCardProps extends Omit<React.ComponentProps<"article">, "title">
     layout?: "stack" | "row";
     /** The picture. */
     poster?: string | null;
-    /** An animated picture (WebP) shown while the card is hovered or focused. */
+    /**
+     * An animated picture (WebP, a few hundred kB) that fades in over the poster once the pointer has rested on the card
+     * (or it is focused) for `previewDelay`, and is removed again on leave. It is never requested before. On a phone (no
+     * hover) only the card most inside the viewport plays it, unless the person asked for less data or less motion.
+     */
     previewSrc?: string | null;
+    /**
+     * How long the pointer must rest before the preview is requested, in ms: a pointer crossing the grid loads nothing.
+     * @default 200
+     */
+    previewDelay?: number;
+    /**
+     * `fetchPriority` of the poster: `high` for the first row (the largest contentful paint).
+     * @default "auto"
+     */
+    posterPriority?: "high" | "low" | "auto";
     /**
      * `cover` fills the frame; `contain` draws the whole picture over a blurred copy of itself (a source of the other
      * orientation: no cropped face, no black bar).
@@ -109,7 +149,7 @@ interface VideoCardProps extends Omit<React.ComponentProps<"article">, "title">
     loading?: "lazy" | "eager";
 }
 /** A video card whose frame, body and footer have one height per aspect, so a grid row or a shelf never staggers. */
-declare function VideoCard({ title, href, linkAs, aspect, layout, poster, previewSrc, fit, duration, badges, creator, meta, action, fallback, blurred, overlay, loading, className, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: VideoCardProps): React.JSX.Element;
+declare function VideoCard({ title, href, linkAs, aspect, layout, poster, previewSrc, previewDelay, posterPriority, fit, duration, badges, creator, meta, action, fallback, blurred, overlay, loading, className, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...props }: VideoCardProps): React.JSX.Element;
 
 interface MediaGridState {
     /** The frame the card is drawn in (`aspect` of `VideoCard`). */
@@ -143,4 +183,27 @@ interface MediaGridProps<T> extends Omit<React.ComponentProps<"div">, "children"
 /** A media grid that never mixes heights badly: a shelf for the 9:16, a uniform grid for the rest. */
 declare function MediaGrid<T>({ items, getId, orientationOf, renderItem, mode, frame, layout, shelf, className, ...props }: MediaGridProps<T>): React.JSX.Element;
 
-export { MediaGrid, type MediaGridProps, type MediaGridState, ShortsShelf, type ShortsShelfProps, VideoCard, type VideoCardAspect, type VideoCardCreator, type VideoCardProps };
+interface VideoCardSkeletonProps extends React.ComponentProps<"div"> {
+    /** `landscape` (16:9) or `portrait` (9:16), as the card it stands for. @default "landscape" */
+    aspect?: VideoCardAspect;
+    /** `stack` or `row`, as the card it stands for. @default "stack" */
+    layout?: "stack" | "row";
+}
+/** The placeholder of a `VideoCard` (decorative: announce the wait on the list, with `MediaGridSkeleton`). */
+declare function VideoCardSkeleton({ aspect, layout, className, ...props }: VideoCardSkeletonProps): React.JSX.Element;
+interface MediaGridSkeletonProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** What is loading, passed translated ("Loading videos"): announced once, the cards are hidden from assistive technology. */
+    label: string;
+    /** Cards in the grid. @default 8 */
+    count?: number;
+    /** Cards on the Shorts shelf above the grid (`split` mode); 0 for none. @default 0 */
+    shelfCount?: number;
+    /** `grid` or `list`. @default "grid" */
+    layout?: "grid" | "list";
+    /** The frame of the grid. @default "landscape" */
+    frame?: VideoCardAspect;
+}
+/** The placeholder of a `MediaGrid`: the same shelf and grid, skeleton cards, one polite announcement. */
+declare function MediaGridSkeleton({ label, count, shelfCount, layout, frame, className, ...props }: MediaGridSkeletonProps): React.JSX.Element;
+
+export { LoadMore, type LoadMoreProps, MediaGrid, type MediaGridProps, MediaGridSkeleton, type MediaGridSkeletonProps, type MediaGridState, ShortsShelf, type ShortsShelfProps, VideoCard, type VideoCardAspect, type VideoCardCreator, type VideoCardProps, VideoCardSkeleton, type VideoCardSkeletonProps };

package/dist/media-grid.js

@@ -2,7 +2,12 @@
 import "./chunk-NPF3OHE2.js";
 import {
   Avatar
-} from "./chunk-YIBKJ36L.js";
+} from "./chunk-KB7OLYIJ.js";
+import "./chunk-JXLDUDTD.js";
+import {
+  Button,
+  LoaderGlyph
+} from "./chunk-3BC4XQ6C.js";
 import {
   defineRecipe
 } from "./chunk-D3T54RSL.js";
@@ -10,11 +15,58 @@ import {
   cn
 } from "./chunk-2FRWNSRO.js";
 
-// src/media-grid/shorts-shelf.tsx
+// src/media-grid/load-more.tsx
 import * as React from "react";
 
-// src/block-link.tsx
+// src/spinner/spinner.tsx
+import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
+var spinnerVariants = tv({
+  base: "shrink-0 text-accent",
+  variants: { size: { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-10 w-10" } },
+  defaultVariants: { size: "md" }
+});
+function Spinner({ label, size, value, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LoaderGlyph,
+    {
+      role: "status",
+      "aria-label": label,
+      "aria-hidden": void 0,
+      value,
+      "data-size": size ?? "md",
+      className: spinnerVariants({ size, className }),
+      ...props
+    }
+  );
+}
+
+// src/media-grid/load-more.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function LoadMore({ onLoadMore, hasMore, loading = false, failed = false, label, loadingLabel, retryLabel, endLabel, rootMargin = "900px 0px", className, ...props }) {
+  const sentinel = React.useRef(null);
+  const ask = React.useRef(onLoadMore);
+  React.useEffect(() => {
+    ask.current = onLoadMore;
+  });
+  React.useEffect(() => {
+    const el = sentinel.current;
+    if (!el || !hasMore || loading || failed || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver((entries) => entries.some((e) => e.isIntersecting) && ask.current(), { rootMargin });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [hasMore, loading, failed, rootMargin]);
+  return /* @__PURE__ */ jsxs("div", { "data-load-more": "", "data-state": loading ? "loading" : failed ? "failed" : hasMore ? "idle" : "end", className: cn("relative flex min-h-14 items-center justify-center py-6", className), ...props, children: [
+    /* @__PURE__ */ jsx2("div", { ref: sentinel, "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0 h-px" }),
+    loading ? /* @__PURE__ */ jsx2(Spinner, { label: loadingLabel, size: "md" }) : hasMore ? /* @__PURE__ */ jsx2(Button, { type: "button", variant: "secondary", size: "md", onClick: () => onLoadMore(), children: failed ? retryLabel ?? label : label }) : endLabel ? /* @__PURE__ */ jsx2("p", { className: "m-0 text-sm text-fg-secondary", children: endLabel }) : null
+  ] });
+}
+
+// src/media-grid/shorts-shelf.tsx
+import * as React2 from "react";
+
+// src/block-link.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 var isExternal = (href) => /^[a-z][a-z0-9+.-]*:/i.test(href);
 function BlockLink({
   href,
@@ -23,38 +75,38 @@ function BlockLink({
   rel,
   ...props
 }) {
-  if (external) return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
+  if (external) return /* @__PURE__ */ jsx3("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
   const Comp = Link;
-  return /* @__PURE__ */ jsx(Comp, { href, ...props });
+  return /* @__PURE__ */ jsx3(Comp, { href, ...props });
 }
 
 // src/media-grid/shorts-shelf.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Chevron = ({ flip }) => /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className: flip ? "rotate-180" : void 0, children: /* @__PURE__ */ jsx2("path", { d: "m9 6 6 6-6 6" }) });
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Chevron = ({ flip }) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className: flip ? "rotate-180" : void 0, children: /* @__PURE__ */ jsx4("path", { d: "m9 6 6 6-6 6" }) });
 var ARROW = "hidden h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg shadow-sm transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 [@media(hover:hover)]:inline-flex";
 function ShortsShelf({ label, title, items, getId, renderItem, seeAll, previousLabel, nextLabel, className, ...props }) {
-  const row = React.useRef(null);
-  const [edge, setEdge] = React.useState({ start: true, end: false });
-  const measure = React.useCallback(() => {
+  const row = React2.useRef(null);
+  const [edge, setEdge] = React2.useState({ start: true, end: false });
+  const measure = React2.useCallback(() => {
     const el = row.current;
     if (!el) return;
     setEdge({ start: el.scrollLeft <= 2, end: el.scrollLeft + el.clientWidth >= el.scrollWidth - 2 });
   }, []);
-  React.useEffect(measure, [measure, items.length]);
+  React2.useEffect(measure, [measure, items.length]);
   const page = (dir) => {
     const el = row.current;
     if (el) el.scrollBy({ left: dir * el.clientWidth * 0.85, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
   };
-  const headingId = React.useId();
+  const headingId = React2.useId();
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": headingId, "data-shorts-shelf": true, className: cn("min-w-0", className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx2("h2", { id: headingId, className: "m-0 mr-auto text-base font-bold text-fg", children: title ?? label }),
-      seeAll && /* @__PURE__ */ jsx2(BlockLink, { href: seeAll.href, linkAs: seeAll.linkAs, className: "text-sm font-semibold text-fg-accent hover:underline", children: seeAll.label }),
-      /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": previousLabel, disabled: edge.start, onClick: () => page(-1), className: ARROW, children: /* @__PURE__ */ jsx2(Chevron, { flip: true }) }),
-      /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": nextLabel, disabled: edge.end, onClick: () => page(1), className: ARROW, children: /* @__PURE__ */ jsx2(Chevron, {}) })
+  return /* @__PURE__ */ jsxs2("section", { "aria-labelledby": headingId, "data-shorts-shelf": true, className: cn("min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4("h2", { id: headingId, className: "m-0 mr-auto text-base font-bold text-fg", children: title ?? label }),
+      seeAll && /* @__PURE__ */ jsx4(BlockLink, { href: seeAll.href, linkAs: seeAll.linkAs, className: "text-sm font-semibold text-fg-accent hover:underline", children: seeAll.label }),
+      /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": previousLabel, disabled: edge.start, onClick: () => page(-1), className: ARROW, children: /* @__PURE__ */ jsx4(Chevron, { flip: true }) }),
+      /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": nextLabel, disabled: edge.end, onClick: () => page(1), className: ARROW, children: /* @__PURE__ */ jsx4(Chevron, {}) })
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(
       "ul",
       {
         ref: row,
@@ -62,14 +114,14 @@ function ShortsShelf({ label, title, items, getId, renderItem, seeAll, previousL
         tabIndex: 0,
         "aria-labelledby": headingId,
         className: "m-0 flex list-none snap-x snap-mandatory items-stretch gap-3 overflow-x-auto overscroll-x-contain p-0 pb-2 [scrollbar-width:none] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-scrollbar]:hidden",
-        children: items.map((item, i) => /* @__PURE__ */ jsx2("li", { className: "w-[9.5rem] shrink-0 snap-start sm:w-44", children: renderItem(item, i) }, getId(item)))
+        children: items.map((item, i) => /* @__PURE__ */ jsx4("li", { className: "w-[9.5rem] shrink-0 snap-start sm:w-44", children: renderItem(item, i) }, getId(item)))
       }
     )
   ] });
 }
 
 // src/media-grid/media-grid.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var GRID = {
   landscape: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
   portrait: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6"
@@ -81,18 +133,18 @@ function MediaGrid({ items, getId, orientationOf, renderItem, mode = "split", fr
   const rest = split ? items.filter((i) => orientationOf(i) !== "portrait") : items;
   const gridFrame = split ? "landscape" : frame;
   const state = (item, aspect) => ({ aspect, layout: row ? "row" : "stack", mismatch: orientationOf(item) !== aspect });
-  return /* @__PURE__ */ jsxs2("div", { "data-media-grid": mode, className: cn("flex min-w-0 flex-col gap-8", className), ...props, children: [
-    verticals.length > 0 && /* @__PURE__ */ jsx3(ShortsShelf, { ...shelf, items: verticals, getId, renderItem: (item) => renderItem(item, { ...state(item, "portrait"), layout: "stack" }) }),
-    rest.length > 0 && /* @__PURE__ */ jsx3("ul", { "data-grid-frame": gridFrame, className: cn("m-0 grid list-none auto-rows-fr gap-4 p-0", row ? "grid-cols-1" : GRID[gridFrame]), children: rest.map((item) => /* @__PURE__ */ jsx3("li", { className: "min-w-0", children: renderItem(item, state(item, gridFrame)) }, getId(item))) })
+  return /* @__PURE__ */ jsxs3("div", { "data-media-grid": mode, className: cn("flex min-w-0 flex-col gap-8", className), ...props, children: [
+    verticals.length > 0 && /* @__PURE__ */ jsx5(ShortsShelf, { ...shelf, items: verticals, getId, renderItem: (item) => renderItem(item, { ...state(item, "portrait"), layout: "stack" }) }),
+    rest.length > 0 && /* @__PURE__ */ jsx5("ul", { "data-grid-frame": gridFrame, className: cn("m-0 grid list-none auto-rows-fr gap-4 p-0", row ? "grid-cols-1" : GRID[gridFrame]), children: rest.map((item) => /* @__PURE__ */ jsx5("li", { className: "min-w-0", children: renderItem(item, state(item, gridFrame)) }, getId(item))) })
   ] });
 }
 
 // src/media-grid/video-card.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 
 // src/card/card.tsx
 import { Slot } from "radix-ui";
-import { tv } from "tailwind-variants";
+import { tv as tv2 } from "tailwind-variants";
 
 // src/card/recipe.ts
 var cardRecipe = defineRecipe({
@@ -120,13 +172,13 @@ var cardRecipe = defineRecipe({
 });
 
 // src/card/card.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var card = tv(cardRecipe);
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var card = tv2(cardRecipe);
 var slots = card();
 function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }) {
   const Comp = asChild ? Slot.Root : "div";
   const revealStyle = reveal === void 0 ? style : { ...style, "--kz-delay": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` };
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-reveal": reveal === void 0 ? void 0 : "",
@@ -139,13 +191,13 @@ function CardRoot({ asChild, reveal, radius, tone, interactive, className, style
 }
 var ASPECT = { video: "aspect-video", square: "aspect-square", portrait: "aspect-[3/4]", auto: "" };
 function CardMedia({ aspect = "video", className, ...props }) {
-  return /* @__PURE__ */ jsx4("div", { "data-aspect": aspect, className: slots.media({ className: cn(ASPECT[aspect], className) }), ...props });
+  return /* @__PURE__ */ jsx6("div", { "data-aspect": aspect, className: slots.media({ className: cn(ASPECT[aspect], className) }), ...props });
 }
 function CardImage({ src, alt = "", fallback, loading = "lazy", className, ...props }) {
   if (!src) {
-    return /* @__PURE__ */ jsx4("div", { "data-fallback": "", "aria-hidden": true, className: slots.fallback({ className }), children: fallback });
+    return /* @__PURE__ */ jsx6("div", { "data-fallback": "", "aria-hidden": true, className: slots.fallback({ className }), children: fallback });
   }
-  return /* @__PURE__ */ jsx4("img", { src, alt, loading, decoding: "async", className: slots.image({ className }), ...props });
+  return /* @__PURE__ */ jsx6("img", { src, alt, loading, decoding: "async", className: slots.image({ className }), ...props });
 }
 var CORNER = {
   "top-left": "left-2.5 top-2.5",
@@ -154,25 +206,25 @@ var CORNER = {
   "bottom-right": "bottom-2.5 right-2.5"
 };
 function CardOverlay({ corner = "top-left", className, ...props }) {
-  return /* @__PURE__ */ jsx4("div", { "data-corner": corner, className: slots.overlay({ className: cn(CORNER[corner], className) }), ...props });
+  return /* @__PURE__ */ jsx6("div", { "data-corner": corner, className: slots.overlay({ className: cn(CORNER[corner], className) }), ...props });
 }
 function CardBody({ padding, className, ...props }) {
-  return /* @__PURE__ */ jsx4("div", { className: card({ padding }).body({ className }), ...props });
+  return /* @__PURE__ */ jsx6("div", { className: card({ padding }).body({ className }), ...props });
 }
 function CardTitle({ as: Tag = "h3", className, ...props }) {
-  return /* @__PURE__ */ jsx4(Tag, { className: slots.title({ className }), ...props });
+  return /* @__PURE__ */ jsx6(Tag, { className: slots.title({ className }), ...props });
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx4("p", { className: slots.description({ className }), ...props });
+  return /* @__PURE__ */ jsx6("p", { className: slots.description({ className }), ...props });
 }
 function CardStat({ label, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs3("div", { className: slots.stat({ className }), ...props, children: [
-    /* @__PURE__ */ jsx4("p", { className: slots.statLabel(), children: label }),
-    /* @__PURE__ */ jsx4("p", { className: slots.statValue(), children })
+  return /* @__PURE__ */ jsxs4("div", { className: slots.stat({ className }), ...props, children: [
+    /* @__PURE__ */ jsx6("p", { className: slots.statLabel(), children: label }),
+    /* @__PURE__ */ jsx6("p", { className: slots.statValue(), children })
   ] });
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx4("div", { className: slots.footer({ className }), ...props });
+  return /* @__PURE__ */ jsx6("div", { className: slots.footer({ className }), ...props });
 }
 var Card = {
   Root: CardRoot,
@@ -186,8 +238,48 @@ var Card = {
   Footer: CardFooter
 };
 
+// src/media-grid/preview-focus.ts
+var MIN_RATIO = 0.6;
+var ratios = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var leader = null;
+function elect() {
+  let best = null;
+  let bestRatio = MIN_RATIO - Number.EPSILON;
+  for (const [el, ratio] of ratios) {
+    if (ratio > bestRatio) {
+      best = el;
+      bestRatio = ratio;
+    }
+  }
+  if (best === leader) return;
+  leader = best;
+  for (const l of listeners) l();
+}
+function trackVisibility(el) {
+  if (typeof IntersectionObserver === "undefined") return () => {
+  };
+  observer ??= new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) ratios.set(e.target, e.isIntersecting ? e.intersectionRatio : 0);
+      elect();
+    },
+    { threshold: [0, 0.25, 0.5, 0.6, 0.75, 1] }
+  );
+  ratios.set(el, 0);
+  observer.observe(el);
+  return () => {
+    observer?.unobserve(el);
+    ratios.delete(el);
+    elect();
+  };
+}
+var subscribeLeader = (l) => (listeners.add(l), () => void listeners.delete(l));
+var isLeader = (el) => el !== null && leader === el;
+
 // src/media-grid/video-card.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FRAME = { landscape: "aspect-video", portrait: "aspect-[9/16]" };
 function VideoCard({
   title,
@@ -197,6 +289,8 @@ function VideoCard({
   layout = "stack",
   poster,
   previewSrc,
+  previewDelay = 200,
+  posterPriority = "auto",
   fit = "cover",
   duration,
   badges,
@@ -212,41 +306,63 @@ function VideoCard({
   onMouseLeave,
   onFocus,
   onBlur,
+  ref,
   ...props
 }) {
-  const [live, setLive] = React2.useState(false);
-  const picture = live && previewSrc ? previewSrc : poster;
+  const [node, setNode] = React3.useState(null);
+  const setRef = React3.useCallback(
+    (el) => {
+      setNode(el);
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const canPreview = Boolean(previewSrc) && !blurred;
+  const { live, arm, disarm } = usePreviewIntent(node, canPreview, previewDelay);
   const row = layout === "row";
   const tall = aspect === "portrait" && !row;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "article",
     {
+      ref: setRef,
       "data-aspect": aspect,
       "data-layout": layout,
       className: cn("group relative h-full min-w-0", className),
-      onMouseEnter: (e) => (setLive(true), onMouseEnter?.(e)),
-      onMouseLeave: (e) => (setLive(false), onMouseLeave?.(e)),
-      onFocus: (e) => (setLive(true), onFocus?.(e)),
-      onBlur: (e) => (setLive(false), onBlur?.(e)),
+      "data-preview": live ? "on" : void 0,
+      onMouseEnter: (e) => (arm("pointer"), onMouseEnter?.(e)),
+      onMouseLeave: (e) => (disarm("pointer"), onMouseLeave?.(e)),
+      onFocus: (e) => (arm("focus"), onFocus?.(e)),
+      onBlur: (e) => (disarm("focus"), onBlur?.(e)),
       ...props,
-      children: /* @__PURE__ */ jsxs4(Card.Root, { interactive: true, tone: "glass", className: cn("h-full w-full max-w-full", row ? "flex-row" : "flex-col"), children: [
-        /* @__PURE__ */ jsxs4(Card.Media, { aspect: "auto", className: cn("shrink-0", FRAME[aspect], row && (aspect === "portrait" ? "w-24 sm:w-28" : "w-40 sm:w-56")), children: [
-          fit === "contain" && picture && /* @__PURE__ */ jsx5("img", { src: picture, alt: "", "aria-hidden": true, loading: "lazy", className: "absolute inset-0 h-full w-full scale-125 object-cover opacity-70 blur-2xl" }),
-          /* @__PURE__ */ jsx5(Card.Image, { src: picture, loading, fallback, className: cn(fit === "contain" && "relative object-contain", blurred && "scale-110 blur-xl") }),
-          overlay && /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 z-20 flex", children: overlay }),
-          badges && /* @__PURE__ */ jsx5(Card.Overlay, { corner: "top-left", className: "theme-dark flex-wrap", children: badges }),
-          duration && /* @__PURE__ */ jsx5(Card.Overlay, { corner: "bottom-right", children: /* @__PURE__ */ jsx5("span", { className: "rounded-sm bg-scrim px-1.5 py-0.5 font-mono text-[11px] text-fg-on-media", children: duration }) })
+      children: /* @__PURE__ */ jsxs5(Card.Root, { interactive: true, tone: "glass", className: cn("h-full w-full max-w-full", row ? "flex-row" : "flex-col"), children: [
+        /* @__PURE__ */ jsxs5(Card.Media, { aspect: "auto", className: cn("shrink-0", FRAME[aspect], row && (aspect === "portrait" ? "w-24 sm:w-28" : "w-40 sm:w-56")), children: [
+          fit === "contain" && poster && /* @__PURE__ */ jsx7("img", { src: poster, alt: "", "aria-hidden": true, loading: "lazy", className: "absolute inset-0 h-full w-full scale-125 object-cover opacity-70 blur-2xl" }),
+          /* @__PURE__ */ jsx7(
+            Card.Image,
+            {
+              src: poster,
+              loading,
+              fetchPriority: posterPriority === "auto" ? void 0 : posterPriority,
+              fallback,
+              className: cn(fit === "contain" && "relative object-contain", blurred && "scale-110 blur-xl")
+            }
+          ),
+          live && previewSrc && /* @__PURE__ */ jsx7(PreviewLayer, { src: previewSrc, contain: fit === "contain" }),
+          overlay && /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 z-20 flex", children: overlay }),
+          badges && /* @__PURE__ */ jsx7(Card.Overlay, { corner: "top-left", className: "theme-dark pointer-events-none flex-wrap", children: badges }),
+          duration && /* @__PURE__ */ jsx7(Card.Overlay, { corner: "bottom-right", className: "pointer-events-none", children: /* @__PURE__ */ jsx7("span", { className: "rounded-sm bg-scrim px-1.5 py-0.5 font-mono text-[11px] text-fg-on-media", children: duration }) })
         ] }),
-        /* @__PURE__ */ jsxs4(Card.Body, { className: "min-w-0 flex-1 justify-between gap-2 p-3", children: [
-          /* @__PURE__ */ jsx5("h3", { className: "m-0 min-h-[2.5em] text-sm font-semibold leading-tight text-fg", children: /* @__PURE__ */ jsx5(BlockLink, { href, linkAs, className: "line-clamp-2 outline-none after:absolute after:inset-0 after:z-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-ring", children: title }) }),
-          /* @__PURE__ */ jsxs4("div", { className: cn("relative z-10 text-xs text-fg-secondary", tall ? "flex flex-col gap-1" : "flex h-8 items-center gap-2"), children: [
-            creator && /* @__PURE__ */ jsxs4("div", { className: "flex h-6 min-w-0 items-center gap-2", children: [
-              /* @__PURE__ */ jsx5(Avatar, { src: creator.avatarSrc, defaultAvatar: creator.defaultAvatar, alt: "", fallback: creator.name.charAt(0), size: "xs", className: "shrink-0" }),
-              creator.href ? /* @__PURE__ */ jsx5(BlockLink, { href: creator.href, linkAs, className: "min-w-0 truncate hover:text-fg", children: creator.name }) : /* @__PURE__ */ jsx5("span", { className: "min-w-0 truncate", children: creator.name })
+        /* @__PURE__ */ jsxs5(Card.Body, { className: "static min-w-0 flex-1 justify-between gap-2 p-3", children: [
+          /* @__PURE__ */ jsx7("h3", { className: "m-0 min-h-[2.5em] text-sm font-semibold leading-tight text-fg", children: /* @__PURE__ */ jsx7(BlockLink, { href, linkAs, className: "line-clamp-2 outline-none after:absolute after:inset-0 after:z-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-ring", children: title }) }),
+          /* @__PURE__ */ jsxs5("div", { className: cn("relative z-10 text-xs text-fg-secondary", tall ? "flex flex-col gap-1" : "flex h-8 items-center gap-2"), children: [
+            creator && /* @__PURE__ */ jsxs5("div", { className: "flex h-6 min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx7(Avatar, { src: creator.avatarSrc, defaultAvatar: creator.defaultAvatar, alt: "", fallback: creator.name.charAt(0), size: "xs", className: "shrink-0" }),
+              creator.href ? /* @__PURE__ */ jsx7(BlockLink, { href: creator.href, linkAs, className: "min-w-0 truncate hover:text-fg", children: creator.name }) : /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: creator.name })
             ] }),
-            (meta || action) && /* @__PURE__ */ jsxs4("div", { className: cn("flex items-center gap-2", tall ? "h-7 justify-between" : "ml-auto shrink-0"), children: [
-              meta && /* @__PURE__ */ jsx5("span", { className: "shrink-0 font-mono text-[11px] text-fg-muted", children: meta }),
-              action && /* @__PURE__ */ jsx5("span", { className: "shrink-0", children: action })
+            (meta || action) && /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-2", tall ? "h-7 justify-between" : "ml-auto shrink-0"), children: [
+              meta && /* @__PURE__ */ jsx7("span", { className: "shrink-0 font-mono text-[11px] text-fg-muted", children: meta }),
+              action && /* @__PURE__ */ jsx7("span", { className: "shrink-0", children: action })
             ] })
           ] })
         ] })
@@ -254,9 +370,140 @@ function VideoCard({
     }
   );
 }
+function PreviewLayer({ src, contain }) {
+  const [ready, setReady] = React3.useState(false);
+  return /* @__PURE__ */ jsx7(
+    "img",
+    {
+      src,
+      alt: "",
+      "aria-hidden": true,
+      decoding: "async",
+      "data-preview-layer": "",
+      "data-ready": ready ? "" : void 0,
+      onLoad: () => setReady(true),
+      className: cn("pointer-events-none absolute inset-0 h-full w-full opacity-0 transition-opacity duration-300 data-[ready]:opacity-100 motion-reduce:transition-none", contain ? "object-contain" : "object-cover")
+    }
+  );
+}
+var matches = (query) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches;
+var hoverCapable = () => matches("(hover: hover)");
+var saveData = () => typeof navigator !== "undefined" && navigator.connection?.saveData === true;
+function usePreviewIntent(node, enabled, delay) {
+  const [causes, setCauses] = React3.useState(/* @__PURE__ */ new Set());
+  const timers = React3.useRef(/* @__PURE__ */ new Map());
+  const arm = React3.useCallback(
+    (cause) => {
+      if (!enabled || saveData()) return;
+      if (cause === "pointer" && !hoverCapable()) return;
+      clearTimeout(timers.current.get(cause));
+      timers.current.set(
+        cause,
+        setTimeout(() => setCauses((c) => new Set(c).add(cause)), delay)
+      );
+    },
+    [enabled, delay]
+  );
+  const disarm = React3.useCallback((cause) => {
+    clearTimeout(timers.current.get(cause));
+    timers.current.delete(cause);
+    setCauses((c) => {
+      if (!c.has(cause)) return c;
+      const next = new Set(c);
+      next.delete(cause);
+      return next;
+    });
+  }, []);
+  React3.useEffect(() => {
+    const pending = timers.current;
+    return () => {
+      for (const t of pending.values()) clearTimeout(t);
+      pending.clear();
+    };
+  }, []);
+  const touch = enabled && !hoverCapable();
+  const leading = React3.useSyncExternalStore(
+    subscribeLeader,
+    () => isLeader(node),
+    () => false
+  );
+  React3.useEffect(() => {
+    if (!node || !touch) return;
+    return trackVisibility(node);
+  }, [node, touch]);
+  const [ready, setReady] = React3.useState(false);
+  const [wasLeading, setWasLeading] = React3.useState(false);
+  if (leading !== wasLeading) {
+    setWasLeading(leading);
+    if (!leading) setReady(false);
+  }
+  const wanted = touch && leading && !saveData() && !matches("(prefers-reduced-motion: reduce)");
+  React3.useEffect(() => {
+    if (!wanted) return;
+    const t = setTimeout(() => setReady(true), delay);
+    return () => clearTimeout(t);
+  }, [wanted, delay]);
+  return { live: enabled && (causes.size > 0 || wanted && ready), arm, disarm };
+}
+
+// src/skeleton/skeleton.tsx
+import { tv as tv3 } from "tailwind-variants";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var skeletonVariants = tv3({
+  base: "kz-skeleton block bg-surface-3",
+  variants: {
+    shape: { text: "h-3 w-full rounded-sm", circle: "aspect-square h-10 rounded-full", rect: "h-24 w-full rounded-lg" }
+  },
+  defaultVariants: { shape: "text" }
+});
+function Skeleton({ shape, className, ...props }) {
+  return /* @__PURE__ */ jsx8("span", { "aria-hidden": true, "data-shape": shape ?? "text", className: skeletonVariants({ shape, className }), ...props });
+}
+
+// src/media-grid/video-card-skeleton.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var FRAME2 = { landscape: "aspect-video", portrait: "aspect-[9/16]" };
+function VideoCardSkeleton({ aspect = "landscape", layout = "stack", className, ...props }) {
+  const row = layout === "row";
+  const tall = aspect === "portrait" && !row;
+  return /* @__PURE__ */ jsx9("div", { "aria-hidden": true, "data-skeleton": "video-card", "data-aspect": aspect, "data-layout": layout, className: cn("h-full min-w-0", className), ...props, children: /* @__PURE__ */ jsxs6(Card.Root, { tone: "glass", className: cn("h-full w-full max-w-full", row ? "flex-row" : "flex-col"), children: [
+    /* @__PURE__ */ jsx9(Card.Media, { aspect: "auto", className: cn("shrink-0", FRAME2[aspect], row && (aspect === "portrait" ? "w-24 sm:w-28" : "w-40 sm:w-56")), children: /* @__PURE__ */ jsx9(Skeleton, { shape: "rect", className: "h-full w-full rounded-none" }) }),
+    /* @__PURE__ */ jsxs6(Card.Body, { className: "static min-w-0 flex-1 justify-between gap-2 p-3", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex min-h-[2.5em] flex-col justify-center gap-1.5", children: [
+        /* @__PURE__ */ jsx9(Skeleton, { className: "h-3" }),
+        /* @__PURE__ */ jsx9(Skeleton, { className: "h-3 w-3/5" })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: cn("flex text-xs", tall ? "flex-col gap-1" : "h-8 items-center gap-2"), children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex h-6 min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx9(Skeleton, { shape: "circle", className: "h-6 w-6 shrink-0" }),
+          /* @__PURE__ */ jsx9(Skeleton, { className: "h-2.5 w-20" })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: cn("flex items-center", tall ? "h-7" : "ml-auto"), children: /* @__PURE__ */ jsx9(Skeleton, { className: "h-2.5 w-14" }) })
+      ] })
+    ] })
+  ] }) });
+}
+var GRID2 = {
+  landscape: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+  portrait: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6"
+};
+function MediaGridSkeleton({ label, count = 8, shelfCount = 0, layout = "grid", frame = "landscape", className, ...props }) {
+  const row = layout === "list";
+  return /* @__PURE__ */ jsxs6("div", { role: "status", "aria-busy": "true", "data-media-grid-skeleton": "", className: cn("flex min-w-0 flex-col gap-8", className), ...props, children: [
+    /* @__PURE__ */ jsx9("span", { className: "sr-only", children: label }),
+    shelfCount > 0 && /* @__PURE__ */ jsxs6("div", { "aria-hidden": true, className: "min-w-0", children: [
+      /* @__PURE__ */ jsx9(Skeleton, { className: "mb-3 h-4 w-24" }),
+      /* @__PURE__ */ jsx9("ul", { className: "m-0 flex list-none items-stretch gap-3 overflow-hidden p-0", children: Array.from({ length: shelfCount }, (_, i) => /* @__PURE__ */ jsx9("li", { className: "w-[9.5rem] shrink-0 sm:w-44", children: /* @__PURE__ */ jsx9(VideoCardSkeleton, { aspect: "portrait" }) }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx9("ul", { "aria-hidden": true, className: cn("m-0 grid list-none auto-rows-fr gap-4 p-0", row ? "grid-cols-1" : GRID2[frame]), children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx9("li", { className: "min-w-0", children: /* @__PURE__ */ jsx9(VideoCardSkeleton, { aspect: frame, layout: row ? "row" : "stack" }) }, i)) })
+  ] });
+}
 export {
+  LoadMore,
   MediaGrid,
+  MediaGridSkeleton,
   ShortsShelf,
-  VideoCard
+  VideoCard,
+  VideoCardSkeleton
 };
 //# sourceMappingURL=media-grid.js.map