@krizaka/ui 3.22.0 → 3.23.0

package/dist/media-grid.js

@@ -6,16 +6,16 @@ import {
 import {
   Card,
   Skeleton
-} from "./chunk-AQSZJJAJ.js";
+} from "./chunk-MQPC3P4T.js";
 import "./chunk-JXLDUDTD.js";
 import {
   Button,
   LoaderGlyph
-} from "./chunk-3BC4XQ6C.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";
@@ -64,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
@@ -82,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,
@@ -116,33 +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";
+import * as React5 from "react";
 
 // src/media-grid/preview-focus.ts
 var MIN_RATIO = 0.6;
@@ -185,7 +251,7 @@ 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 jsx6, 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,
@@ -215,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);
@@ -228,7 +294,7 @@ function VideoCard({
   const { live, arm, disarm } = usePreviewIntent(node, canPreview, previewDelay);
   const row = layout === "row";
   const tall = aspect === "portrait" && !row;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "article",
     {
       ref: setRef,
@@ -241,10 +307,10 @@ function VideoCard({
       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" && poster && /* @__PURE__ */ jsx6("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__ */ jsx6(
+      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,
@@ -254,21 +320,21 @@ function VideoCard({
               className: cn(fit === "contain" && "relative object-contain", blurred && "scale-110 blur-xl")
             }
           ),
-          live && previewSrc && /* @__PURE__ */ jsx6(PreviewLayer, { src: previewSrc, contain: fit === "contain" }),
-          overlay && /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 z-20 flex", children: overlay }),
-          badges && /* @__PURE__ */ jsx6(Card.Overlay, { corner: "top-left", className: "theme-dark pointer-events-none flex-wrap", children: badges }),
-          duration && /* @__PURE__ */ jsx6(Card.Overlay, { corner: "bottom-right", className: "pointer-events-none", children: /* @__PURE__ */ jsx6("span", { className: "rounded-sm bg-scrim px-1.5 py-0.5 font-mono text-[11px] text-fg-on-media", children: duration }) })
+          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: "static min-w-0 flex-1 justify-between gap-2 p-3", children: [
-          /* @__PURE__ */ jsx6("h3", { className: "m-0 min-h-[2.5em] text-sm font-semibold leading-tight text-fg", children: /* @__PURE__ */ jsx6(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__ */ jsx6(Avatar, { src: creator.avatarSrc, defaultAvatar: creator.defaultAvatar, alt: "", fallback: creator.name.charAt(0), size: "xs", className: "shrink-0" }),
-              creator.href ? /* @__PURE__ */ jsx6(BlockLink, { href: creator.href, linkAs, className: "min-w-0 truncate hover:text-fg", children: creator.name }) : /* @__PURE__ */ jsx6("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__ */ jsx6("span", { className: "shrink-0 font-mono text-[11px] text-fg-muted", children: meta }),
-              action && /* @__PURE__ */ jsx6("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 })
             ] })
           ] })
         ] })
@@ -277,8 +343,8 @@ function VideoCard({
   );
 }
 function PreviewLayer({ src, contain }) {
-  const [ready, setReady] = React3.useState(false);
-  return /* @__PURE__ */ jsx6(
+  const [ready, setReady] = React5.useState(false);
+  return /* @__PURE__ */ jsx7(
     "img",
     {
       src,
@@ -296,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;
@@ -310,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) => {
@@ -320,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);
@@ -328,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);
@@ -353,24 +419,24 @@ function usePreviewIntent(node, enabled, delay) {
 }
 
 // src/media-grid/video-card-skeleton.tsx
-import { jsx as jsx7, jsxs as jsxs5 } 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__ */ jsx7("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__ */ jsxs5(Card.Root, { tone: "glass", className: cn("h-full w-full max-w-full", row ? "flex-row" : "flex-col"), children: [
-    /* @__PURE__ */ jsx7(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__ */ jsx7(Skeleton, { shape: "rect", className: "h-full w-full rounded-none" }) }),
-    /* @__PURE__ */ jsxs5(Card.Body, { className: "static min-w-0 flex-1 justify-between gap-2 p-3", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex min-h-[2.5em] flex-col justify-center gap-1.5", children: [
-        /* @__PURE__ */ jsx7(Skeleton, { className: "h-3" }),
-        /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-3/5" })
+  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__ */ jsx8(Skeleton, { className: "h-3" }),
+        /* @__PURE__ */ jsx8(Skeleton, { className: "h-3 w-3/5" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: cn("flex text-xs", tall ? "flex-col gap-1" : "h-8 items-center gap-2"), children: [
-        /* @__PURE__ */ jsxs5("div", { className: "flex h-6 min-w-0 items-center gap-2", children: [
-          /* @__PURE__ */ jsx7(Skeleton, { shape: "circle", className: "h-6 w-6 shrink-0" }),
-          /* @__PURE__ */ jsx7(Skeleton, { className: "h-2.5 w-20" })
+      /* @__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__ */ jsx8(Skeleton, { shape: "circle", className: "h-6 w-6 shrink-0" }),
+          /* @__PURE__ */ jsx8(Skeleton, { className: "h-2.5 w-20" })
         ] }),
-        /* @__PURE__ */ jsx7("div", { className: cn("flex items-center", tall ? "h-7" : "ml-auto"), children: /* @__PURE__ */ jsx7(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" }) })
       ] })
     ] })
   ] }) });
@@ -381,19 +447,20 @@ var GRID2 = {
 };
 function MediaGridSkeleton({ label, count = 8, shelfCount = 0, layout = "grid", frame = "landscape", className, ...props }) {
   const row = layout === "list";
-  return /* @__PURE__ */ jsxs5("div", { role: "status", "aria-busy": "true", "data-media-grid-skeleton": "", className: cn("flex min-w-0 flex-col gap-8", className), ...props, children: [
-    /* @__PURE__ */ jsx7("span", { className: "sr-only", children: label }),
-    shelfCount > 0 && /* @__PURE__ */ jsxs5("div", { "aria-hidden": true, className: "min-w-0", children: [
-      /* @__PURE__ */ jsx7(Skeleton, { className: "mb-3 h-4 w-24" }),
-      /* @__PURE__ */ jsx7("ul", { className: "m-0 flex list-none items-stretch gap-3 overflow-hidden p-0", children: Array.from({ length: shelfCount }, (_, i) => /* @__PURE__ */ jsx7("li", { className: "w-[9.5rem] shrink-0 sm:w-44", children: /* @__PURE__ */ jsx7(VideoCardSkeleton, { aspect: "portrait" }) }, i)) })
+  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__ */ jsx8("span", { className: "sr-only", children: label }),
+    shelfCount > 0 && /* @__PURE__ */ jsxs6("div", { "aria-hidden": true, className: "min-w-0", children: [
+      /* @__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__ */ jsx7("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__ */ jsx7("li", { className: "min-w-0", children: /* @__PURE__ */ jsx7(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