@krizaka/ui 3.21.0 → 3.23.0

package/dist/media-grid.js

@@ -3,17 +3,19 @@ import "./chunk-NPF3OHE2.js";
 import {
   Avatar
 } from "./chunk-KB7OLYIJ.js";
+import {
+  Card,
+  Skeleton
+} from "./chunk-MQPC3P4T.js";
 import "./chunk-JXLDUDTD.js";
 import {
   Button,
   LoaderGlyph
-} from "./chunk-3BC4XQ6C.js";
-import {
-  defineRecipe
-} from "./chunk-D3T54RSL.js";
+} from "./chunk-DZU6RMYD.js";
+import "./chunk-D3T54RSL.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/media-grid/load-more.tsx
 import * as React from "react";
@@ -62,7 +64,10 @@ function LoadMore({ onLoadMore, hasMore, loading = false, failed = false, label,
   ] });
 }
 
-// src/media-grid/shorts-shelf.tsx
+// src/media-grid/media-grid.tsx
+import * as React4 from "react";
+
+// src/media-grid/section-hint.tsx
 import * as React2 from "react";
 
 // src/block-link.tsx
@@ -80,33 +85,89 @@ function BlockLink({
   return /* @__PURE__ */ jsx3(Comp, { href, ...props });
 }
 
+// src/media-grid/section-hint.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function SectionHint({ label, text, link }) {
+  const [open, setOpen] = React2.useState(false);
+  const id = React2.useId();
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: "relative inline-flex",
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": label,
+            "aria-expanded": open,
+            "aria-controls": id,
+            onClick: () => setOpen((o) => !o),
+            className: "inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-muted transition-colors hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsx4("path", { d: "M12 11v5M12 8h.01" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            hidden: !open,
+            className: cn("absolute left-0 top-full z-20 mt-1 w-64 max-w-[80vw] rounded-xl border border-border-default bg-surface-1 p-3 text-sm font-normal leading-snug text-fg-secondary shadow-lg"),
+            children: [
+              text,
+              link && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx4(BlockLink, { href: link.href, linkAs: link.linkAs, className: "font-semibold text-fg-accent hover:underline", children: link.label })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/media-grid/shorts-shelf.tsx
-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" }) });
+import * as React3 from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Chevron = ({ flip }) => /* @__PURE__ */ jsx5("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__ */ jsx5("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 = React2.useRef(null);
-  const [edge, setEdge] = React2.useState({ start: true, end: false });
-  const measure = React2.useCallback(() => {
+function ShortsShelf({ label, title, hint, items, getId, renderItem, seeAll, previousLabel, nextLabel, className, ...props }) {
+  const row = React3.useRef(null);
+  const [edge, setEdge] = React3.useState({ start: true, end: false });
+  const measure = React3.useCallback(() => {
     const el = row.current;
     if (!el) return;
     setEdge({ start: el.scrollLeft <= 2, end: el.scrollLeft + el.clientWidth >= el.scrollWidth - 2 });
   }, []);
-  React2.useEffect(measure, [measure, items.length]);
+  React3.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 = React2.useId();
+  const headingId = React3.useId();
   if (items.length === 0) return null;
-  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, {}) })
+  return /* @__PURE__ */ jsxs3("section", { "aria-labelledby": headingId, "data-shorts-shelf": true, className: cn("min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx5("h2", { id: headingId, className: "m-0 mr-auto text-base font-bold text-fg", children: title ?? label }),
+      hint && /* @__PURE__ */ jsx5(SectionHint, { ...hint }),
+      seeAll && /* @__PURE__ */ jsx5(BlockLink, { href: seeAll.href, linkAs: seeAll.linkAs, className: "text-sm font-semibold text-fg-accent hover:underline", children: seeAll.label }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": previousLabel, disabled: edge.start, onClick: () => page(-1), className: ARROW, children: /* @__PURE__ */ jsx5(Chevron, { flip: true }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": nextLabel, disabled: edge.end, onClick: () => page(1), className: ARROW, children: /* @__PURE__ */ jsx5(Chevron, {}) })
     ] }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "ul",
       {
         ref: row,
@@ -114,129 +175,40 @@ 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 overflow-y-hidden overscroll-x-contain p-0 pt-1 -mt-1 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__ */ jsx4("li", { className: "w-[9.5rem] shrink-0 snap-start sm:w-44", children: renderItem(item, i) }, getId(item)))
+        children: items.map((item, i) => /* @__PURE__ */ jsx5("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 jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } 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"
 };
-function MediaGrid({ items, getId, orientationOf, renderItem, mode = "split", frame = "landscape", layout = "grid", shelf, className, ...props }) {
+function MediaGrid({ items, getId, orientationOf, renderItem, mode = "split", frame = "landscape", layout = "grid", shelf, grid, className, ...props }) {
+  const gridHeading = React4.useId();
   const row = layout === "list";
   const split = mode === "split";
   const verticals = split ? items.filter((i) => orientationOf(i) === "portrait") : [];
   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__ */ 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))) })
+  return /* @__PURE__ */ jsxs4("div", { "data-media-grid": mode, className: cn("flex min-w-0 flex-col gap-8", className), ...props, children: [
+    verticals.length > 0 && /* @__PURE__ */ jsx6(ShortsShelf, { ...shelf, items: verticals, getId, renderItem: (item) => renderItem(item, { ...state(item, "portrait"), layout: "stack" }) }),
+    rest.length > 0 && /* @__PURE__ */ jsxs4("section", { "aria-labelledby": grid ? gridHeading : void 0, "data-media-grid-section": true, className: "min-w-0", children: [
+      grid && /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("h2", { id: gridHeading, className: "m-0 text-base font-bold text-fg", children: grid.label }),
+        grid.hint && /* @__PURE__ */ jsx6(SectionHint, { ...grid.hint })
+      ] }),
+      /* @__PURE__ */ jsx6("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__ */ jsx6("li", { className: "min-w-0", children: renderItem(item, state(item, gridFrame)) }, getId(item))) })
+    ] })
   ] });
 }
 
 // src/media-grid/video-card.tsx
-import * as React3 from "react";
-
-// src/card/card.tsx
-import { Slot } from "radix-ui";
-import { tv as tv2 } from "tailwind-variants";
-
-// src/card/recipe.ts
-var cardRecipe = defineRecipe({
-  slots: {
-    root: "group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-    media: "relative overflow-hidden bg-media",
-    image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105",
-    fallback: "flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60",
-    overlay: "absolute z-10 flex items-center gap-1.5",
-    body: "relative flex flex-1 flex-col gap-3",
-    title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent",
-    description: "line-clamp-2 text-xs text-fg-secondary",
-    stat: "min-w-0",
-    statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
-    statValue: "font-display text-xl font-black tabular-nums text-fg",
-    footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary"
-  },
-  variants: {
-    radius: { md: { root: "rounded-md" }, lg: { root: "rounded-lg" }, xl: { root: "rounded-xl" } },
-    tone: { default: {}, elevated: { root: "bg-surface-2 shadow-md" }, glass: { root: "bg-surface-1/70 backdrop-blur-md" } },
-    interactive: { true: { root: "kz-spotlight kz-lift hover:border-accent/50" } },
-    padding: { none: { body: "p-0" }, sm: { body: "p-3" }, md: { body: "p-4" }, lg: { body: "p-6" } }
-  },
-  defaultVariants: { radius: "xl", tone: "default", padding: "md" }
-});
-
-// src/card/card.tsx
-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__ */ jsx6(
-    Comp,
-    {
-      "data-reveal": reveal === void 0 ? void 0 : "",
-      "data-interactive": interactive ? "" : void 0,
-      style: revealStyle,
-      className: card({ radius, tone, interactive }).root({ className }),
-      ...props
-    }
-  );
-}
-var ASPECT = { video: "aspect-video", square: "aspect-square", portrait: "aspect-[3/4]", auto: "" };
-function CardMedia({ aspect = "video", 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__ */ jsx6("div", { "data-fallback": "", "aria-hidden": true, className: slots.fallback({ className }), children: fallback });
-  }
-  return /* @__PURE__ */ jsx6("img", { src, alt, loading, decoding: "async", className: slots.image({ className }), ...props });
-}
-var CORNER = {
-  "top-left": "left-2.5 top-2.5",
-  "top-right": "right-2.5 top-2.5",
-  "bottom-left": "bottom-2.5 left-2.5",
-  "bottom-right": "bottom-2.5 right-2.5"
-};
-function CardOverlay({ corner = "top-left", 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__ */ jsx6("div", { className: card({ padding }).body({ className }), ...props });
-}
-function CardTitle({ as: Tag = "h3", className, ...props }) {
-  return /* @__PURE__ */ jsx6(Tag, { className: slots.title({ className }), ...props });
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx6("p", { className: slots.description({ className }), ...props });
-}
-function CardStat({ label, className, children, ...props }) {
-  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__ */ jsx6("div", { className: slots.footer({ className }), ...props });
-}
-var Card = {
-  Root: CardRoot,
-  Media: CardMedia,
-  Image: CardImage,
-  Overlay: CardOverlay,
-  Body: CardBody,
-  Title: CardTitle,
-  Description: CardDescription,
-  Stat: CardStat,
-  Footer: CardFooter
-};
+import * as React5 from "react";
 
 // src/media-grid/preview-focus.ts
 var MIN_RATIO = 0.6;
@@ -309,8 +281,8 @@ function VideoCard({
   ref,
   ...props
 }) {
-  const [node, setNode] = React3.useState(null);
-  const setRef = React3.useCallback(
+  const [node, setNode] = React5.useState(null);
+  const setRef = React5.useCallback(
     (el) => {
       setNode(el);
       if (typeof ref === "function") ref(el);
@@ -371,7 +343,7 @@ function VideoCard({
   );
 }
 function PreviewLayer({ src, contain }) {
-  const [ready, setReady] = React3.useState(false);
+  const [ready, setReady] = React5.useState(false);
   return /* @__PURE__ */ jsx7(
     "img",
     {
@@ -390,9 +362,9 @@ var matches = (query) => typeof window !== "undefined" && typeof window.matchMed
 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(
+  const [causes, setCauses] = React5.useState(/* @__PURE__ */ new Set());
+  const timers = React5.useRef(/* @__PURE__ */ new Map());
+  const arm = React5.useCallback(
     (cause) => {
       if (!enabled || saveData()) return;
       if (cause === "pointer" && !hoverCapable()) return;
@@ -404,7 +376,7 @@ function usePreviewIntent(node, enabled, delay) {
     },
     [enabled, delay]
   );
-  const disarm = React3.useCallback((cause) => {
+  const disarm = React5.useCallback((cause) => {
     clearTimeout(timers.current.get(cause));
     timers.current.delete(cause);
     setCauses((c) => {
@@ -414,7 +386,7 @@ function usePreviewIntent(node, enabled, delay) {
       return next;
     });
   }, []);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const pending = timers.current;
     return () => {
       for (const t of pending.values()) clearTimeout(t);
@@ -422,23 +394,23 @@ function usePreviewIntent(node, enabled, delay) {
     };
   }, []);
   const touch = enabled && !hoverCapable();
-  const leading = React3.useSyncExternalStore(
+  const leading = React5.useSyncExternalStore(
     subscribeLeader,
     () => isLeader(node),
     () => false
   );
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!node || !touch) return;
     return trackVisibility(node);
   }, [node, touch]);
-  const [ready, setReady] = React3.useState(false);
-  const [wasLeading, setWasLeading] = React3.useState(false);
+  const [ready, setReady] = React5.useState(false);
+  const [wasLeading, setWasLeading] = React5.useState(false);
   if (leading !== wasLeading) {
     setWasLeading(leading);
     if (!leading) setReady(false);
   }
   const wanted = touch && leading && !saveData() && !matches("(prefers-reduced-motion: reduce)");
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!wanted) return;
     const t = setTimeout(() => setReady(true), delay);
     return () => clearTimeout(t);
@@ -446,39 +418,25 @@ function usePreviewIntent(node, enabled, 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";
+import { jsx as jsx8, 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" }) }),
+  return /* @__PURE__ */ jsx8("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__ */ jsx8(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__ */ jsx8(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__ */ jsx8(Skeleton, { className: "h-3" }),
+        /* @__PURE__ */ jsx8(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__ */ jsx8(Skeleton, { shape: "circle", className: "h-6 w-6 shrink-0" }),
+          /* @__PURE__ */ jsx8(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" }) })
+        /* @__PURE__ */ jsx8("div", { className: cn("flex items-center", tall ? "h-7" : "ml-auto"), children: /* @__PURE__ */ jsx8(Skeleton, { className: "h-2.5 w-14" }) })
       ] })
     ] })
   ] }) });
@@ -490,18 +448,19 @@ var GRID2 = {
 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 }),
+    /* @__PURE__ */ jsx8("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__ */ jsx8(Skeleton, { className: "mb-3 h-4 w-24" }),
+      /* @__PURE__ */ jsx8("ul", { className: "m-0 flex list-none items-stretch gap-3 overflow-hidden p-0", children: Array.from({ length: shelfCount }, (_, i) => /* @__PURE__ */ jsx8("li", { className: "w-[9.5rem] shrink-0 sm:w-44", children: /* @__PURE__ */ jsx8(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)) })
+    /* @__PURE__ */ jsx8("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__ */ jsx8("li", { className: "min-w-0", children: /* @__PURE__ */ jsx8(VideoCardSkeleton, { aspect: frame, layout: row ? "row" : "stack" }) }, i)) })
   ] });
 }
 export {
   LoadMore,
   MediaGrid,
   MediaGridSkeleton,
+  SectionHint,
   ShortsShelf,
   VideoCard,
   VideoCardSkeleton