@krizaka/ui 3.20.0 → 3.22.0

package/dist/index.d.ts

@@ -15,18 +15,17 @@ interface MarkProps {
 }
 
 /**
- * The Akinaza mark, "the open shop": a filled awning with the Krizaka cut at its corner, scalloped, its stripes in
- * light; under it the shop front, two windows and the open door — a warm light that breathes. In the Akinaza gradient
- * (forest → copper, the brand's mark gradient of @krizaka/tokens, the same in dark and light); one node, a coin, rides
- * the dashed orbit. The family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.
+ * The Akinaza mark, "the cut log": a log seen end-on in forest green, its year rings in light, cut at 45° by the beaver
+ * (the Krizaka chamfer) with the fresh face in copper, and a copper heart that breathes — a shop built ring by ring.
+ * One node, a coin, rides the dashed orbit. Below 48 px it crops to the emblem.
  */
 declare function AkinazaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 /**
- * The Kachizaka mark, "the sealed cup": a filled trophy whose rim wears the Krizaka cut, two handles, a stem and a
- * base, in the Kachizaka gradient (cobalt → gold, the brand's mark gradient of @krizaka/tokens, the same in dark and
- * light); on the bowl a star in light — the seal of the rules, locked at kick-off — breathes; one node, the ball, rides
- * the dashed orbit. The family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.
+ * The Kachizaka mark, "the podium": three steps cut at their outer corners, the winner in gold and the others in cobalt
+ * (the brand's two colours, kept apart), under a gold diamond — the family's lit node — that breathes: a friendly
+ * leaderboard where only points change hands. One node, the ball, rides the dashed orbit. Below 48 px it crops to the
+ * emblem.
  */
 declare function KachizakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
@@ -57,32 +56,26 @@ declare function ProductLogo({ id, ...props }: MarkProps & {
 }): React.JSX.Element;
 
 /**
- * The Yasakia mark: two voices — two solid speech bubbles that overlap, the left a shade deeper — in the Yasakia
- * gradient (emerald → turquoise, the brand's mark gradient of @krizaka/tokens, the same in dark and light). Where they
- * overlap, what the two share, is the bright core: a lens lit from above that breathes. The pair, two nodes on the
- * dashed orbit, turns slowly around it — the family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it
- * crops to the emblem.
+ * The Yasakia mark, "one conversation": one speech bubble with a tail on each side (turned 180°, never mirrored, so it
+ * can never read as a face) in the Yasakia gradient (emerald → turquoise, the same in dark and light), and the spark
+ * inside it — the family's lit node — that breathes: talk first, both ways. One node rides the dashed orbit. Below 48 px
+ * it crops to the emblem.
  */
 declare function YasakiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 /** @deprecated Yazakia was renamed Yasakia (2026-10): use `YasakiaLogo`. Kept for one minor version. */
 declare const YazakiaLogo: typeof YasakiaLogo;
 
 /**
- * The Yomizaka mark, "the reading": a filled page with the Krizaka cut at its corner, three lines of text in light, and
- * a lens — the eye that reads — resting on its lower half, its handle running out of the page. Page and lens in the
- * Yomizaka gradient (ink → indigo, the brand's mark gradient of @krizaka/tokens, the same in dark and light); the
- * lens' core is a pale indigo light that breathes; a line of light scans the page from top to bottom; one node, a
- * page, rides the dashed orbit. The family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it crops to
- * the emblem.
+ * The Yomizaka mark, "the watch": the owl — two lenses at the family stroke under one calm brow, its pupils glancing
+ * down the line it reads — in the Yomizaka gradient (ink → indigo, the same in dark and light). The pupils are the lit
+ * cores and breathe; one node, a page, rides the dashed orbit. Below 48 px it crops to the emblem.
  */
 declare function YomizakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 /**
- * The Yororis mark, "the hold": a "Y" whose arms are two filled leaves — open hands — rising from one stem and cupping
- * a warm core that breathes: held, given room, listened to. Leaves in the Yororis gradient (sand → sage, the brand's
- * mark gradient of @krizaka/tokens, the same in dark and light), a vein of light along each, the core in a warm sand
- * light; the moment, one node on the dashed orbit, comes round slowly. The family's grammar (orbit, ring, bold emblem,
- * bright core) with the slowest breath of the family. Below 48 px it crops to the emblem.
+ * The Yororis mark, "held": two open hands, two sage arcs of one circle, cup a warm sand core without closing on it —
+ * held, given room, free to go. The core breathes, the slowest breath of the family; one node, the moment, rides the
+ * dashed orbit. Below 48 px it crops to the emblem.
  */
 declare function YororisLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   YazakiaLogo,
   YomizakaLogo,
   YororisLogo
-} from "./chunk-LIPK4UCS.js";
+} from "./chunk-YCIBJ6OQ.js";
 import {
   cx
 } from "./chunk-6ISW63JI.js";

package/dist/maintenance-screen.d.ts

@@ -0,0 +1,68 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const maintenanceScreen: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    actions: string;
+}>>;
+type MaintenanceScreenProps = Omit<React.ComponentProps<"main">, "title"> & {
+    /** The headline (“Back in a few minutes”). */
+    title: React.ReactNode;
+    /** What is happening — the backend's localized maintenance `message`. */
+    message?: React.ReactNode;
+    /** The product's mark or mascot (decorative). */
+    mark?: React.ReactNode;
+    /** The button that checks again (“Try again”). */
+    retryLabel?: string;
+    /** Checks the backend again. */
+    onRetry?: () => void;
+};
+/** The maintenance screen: announced politely, with one way to check again. */
+declare function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, className, ...props }: MaintenanceScreenProps): React.JSX.Element;
+
+export { MaintenanceScreen, type MaintenanceScreenProps, maintenanceScreen };

package/dist/maintenance-screen.js

@@ -0,0 +1,35 @@
+import "./chunk-TDG7ED2W.js";
+import {
+  Button
+} from "./chunk-3IN6TOPM.js";
+import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
+
+// src/maintenance-screen/maintenance-screen.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var maintenanceScreen = tv({
+  slots: {
+    root: "mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg",
+    mark: "flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24",
+    title: "text-2xl font-semibold text-fg",
+    message: "text-fg-secondary",
+    actions: "mt-2 flex w-full flex-col gap-2"
+  }
+});
+function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, className, ...props }) {
+  const s = maintenanceScreen();
+  return /* @__PURE__ */ jsxs("main", { "data-kind": "maintenance", className: s.root({ className }), ...props, children: [
+    mark && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.mark(), children: mark }),
+    /* @__PURE__ */ jsxs("div", { role: "status", className: "flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+      message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message })
+    ] }),
+    retryLabel && onRetry && /* @__PURE__ */ jsx("div", { className: s.actions(), children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel }) })
+  ] });
+}
+export {
+  MaintenanceScreen,
+  maintenanceScreen
+};
+//# sourceMappingURL=maintenance-screen.js.map

package/dist/maintenance-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/maintenance-screen/maintenance-screen.tsx"],"sourcesContent":["// Server-safe. The service is down on purpose (maintenance on, from the backend's parameters): say so, say when to\n// come back, and let the person check again. Replaces the app, like the forced update.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const maintenanceScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type MaintenanceScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Back in a few minutes”). */\n  title: React.ReactNode;\n  /** What is happening — the backend's localized maintenance `message`. */\n  message?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that checks again (“Try again”). */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The maintenance screen: announced politely, with one way to check again. */\nexport function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, className, ...props }: MaintenanceScreenProps) {\n  const s = maintenanceScreen();\n  return (\n    <main data-kind=\"maintenance\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <div role=\"status\" className=\"flex flex-col items-center gap-4\">\n        <h1 className={s.title()}>{title}</h1>\n        {message && <p className={s.message()}>{message}</p>}\n      </div>\n      {retryLabel && onRetry && (\n        <div className={s.actions()}>\n          <Button variant=\"secondary\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        </div>\n      )}\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;AAIA,SAAS,UAAU;AA+BX,cAIF,YAJE;AA7BD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAgBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,MAAM,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AAC5H,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,eAAc,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACjE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,qBAAC,SAAI,MAAK,UAAS,WAAU,oCAC3B;AAAA,0BAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OAClD;AAAA,IACC,cAAc,WACb,oBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB,8BAAC,UAAO,SAAQ,aAAY,SAAS,SAClC,sBACH,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/marketing-layout.js

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 var skipLink = tv({
-  base: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring"
+  base: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
 });
 function SkipLink({ href = "#content", className, onClick, children, ...props }) {
   const handleClick = (event) => {

package/dist/marketing-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/skip-link/skip-link.tsx","../src/marketing-layout/marketing-layout.tsx"],"sourcesContent":["// Client (it moves focus). WCAG 2.4.1 Bypass Blocks: the first tab stop of a page, a link that skips the navigation and\n// lands on the content. Visually hidden until focused, then a pill above everything in the brand ring. The label is\n// passed translated; the target needs an `id` (and is made focusable, so focus really moves, router or not).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const skipLink = tv({\n  base:\n    \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n    \"focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring\",\n});\n\nexport type SkipLinkProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  /**\n   * The content to land on: `#` and its `id`. The element becomes focusable (`tabindex=\"-1\"`) when it is not.\n   * @default \"#content\"\n   */\n  href?: `#${string}`;\n};\n\n/** A \"skip to content\" link: the first tab stop, hidden until focused; Enter moves focus to the target. */\nexport function SkipLink({ href = \"#content\", className, onClick, children, ...props }: SkipLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const target = document.getElementById(decodeURIComponent(href.slice(1)));\n    if (!target) return;\n    if (!target.hasAttribute(\"tabindex\") && !target.matches(\"a[href], button, input, select, textarea, [contenteditable]\")) target.setAttribute(\"tabindex\", \"-1\");\n    target.focus();\n  };\n  return (\n    <a href={href} className={skipLink({ className })} onClick={handleClick} {...props}>\n      {children}\n    </a>\n  );\n}\n","// Server-safe. The page of a site (krizaka.com, a product's public pages): a link to skip to the content, the site's\n// bar, the page — its PageHero and Sections (@krizaka/ui/page) — and the footer. The bar floats over the hero\n// (`--kz-hero-top` clears it); everything shares the page frame (`--kz-page-max`, `--kz-page-gutter`).\nimport { SkipLink } from \"@krizaka/ui/skip-link\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const marketingLayout = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full flex-col bg-surface-0 text-fg\",\n    header: \"fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto\",\n    main: \"flex-1 outline-hidden\",\n  },\n});\nconst s = marketingLayout();\n\nexport type MarketingLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */\n  header: React.ReactNode;\n  /** The site's footer. */\n  footer?: React.ReactNode;\n  /** The words of the link that skips to the content (`Skip to content`). */\n  skipLabel: string;\n  /** The page: a PageHero, then Sections. */\n  children: React.ReactNode;\n};\n\n/** A site's page: skip link, floating bar, the page, the footer. */\nexport function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <SkipLink>{skipLabel}</SkipLink>\n      <div className={s.header()}>{header}</div>\n      <main id=\"content\" tabIndex={-1} className={s.main()}>\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AA2Bf;AAzBG,IAAM,WAAW,GAAG;AAAA,EACzB,MACE;AAEJ,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,YAAY,WAAW,SAAS,UAAU,GAAG,MAAM,GAAkB;AACrG,QAAM,cAAc,CAAC,UAA+C;AAClE,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,UAAM,SAAS,SAAS,eAAe,mBAAmB,KAAK,MAAM,CAAC,CAAC,CAAC;AACxE,QAAI,CAAC,OAAQ;AACb,QAAI,CAAC,OAAO,aAAa,UAAU,KAAK,CAAC,OAAO,QAAQ,6DAA6D,EAAG,QAAO,aAAa,YAAY,IAAI;AAC5J,WAAO,MAAM;AAAA,EACf;AACA,SACE,oBAAC,OAAE,MAAY,WAAW,SAAS,EAAE,UAAU,CAAC,GAAG,SAAS,aAAc,GAAG,OAC1E,UACH;AAEJ;;;AC9BA,SAAS,MAAAA,WAAU;AAyBf,SACE,OAAAC,MADF;AAvBG,IAAM,kBAAkBD,IAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,gBAAgB;AAcnB,SAAS,gBAAgB,EAAE,QAAQ,QAAQ,WAAW,WAAW,UAAU,GAAG,MAAM,GAAyB;AAClH,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAC,KAAC,YAAU,qBAAU;AAAA,IACrB,gBAAAA,KAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,IACpC,gBAAAA,KAAC,UAAK,IAAG,WAAU,UAAU,IAAI,WAAW,EAAE,KAAK,GAChD,UACH;AAAA,IACC;AAAA,KACH;AAEJ;","names":["tv","jsx"]}
+{"version":3,"sources":["../src/skip-link/skip-link.tsx","../src/marketing-layout/marketing-layout.tsx"],"sourcesContent":["// Client (it moves focus). WCAG 2.4.1 Bypass Blocks: the first tab stop of a page, a link that skips the navigation and\n// lands on the content. Visually hidden until focused, then a pill above everything in the brand ring. The label is\n// passed translated; the target needs an `id` (and is made focusable, so focus really moves, router or not).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const skipLink = tv({\n  base:\n    \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n    \"focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n});\n\nexport type SkipLinkProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  /**\n   * The content to land on: `#` and its `id`. The element becomes focusable (`tabindex=\"-1\"`) when it is not.\n   * @default \"#content\"\n   */\n  href?: `#${string}`;\n};\n\n/** A \"skip to content\" link: the first tab stop, hidden until focused; Enter moves focus to the target. */\nexport function SkipLink({ href = \"#content\", className, onClick, children, ...props }: SkipLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const target = document.getElementById(decodeURIComponent(href.slice(1)));\n    if (!target) return;\n    if (!target.hasAttribute(\"tabindex\") && !target.matches(\"a[href], button, input, select, textarea, [contenteditable]\")) target.setAttribute(\"tabindex\", \"-1\");\n    target.focus();\n  };\n  return (\n    <a href={href} className={skipLink({ className })} onClick={handleClick} {...props}>\n      {children}\n    </a>\n  );\n}\n","// Server-safe. The page of a site (krizaka.com, a product's public pages): a link to skip to the content, the site's\n// bar, the page — its PageHero and Sections (@krizaka/ui/page) — and the footer. The bar floats over the hero\n// (`--kz-hero-top` clears it); everything shares the page frame (`--kz-page-max`, `--kz-page-gutter`).\nimport { SkipLink } from \"@krizaka/ui/skip-link\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const marketingLayout = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full flex-col bg-surface-0 text-fg\",\n    header: \"fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto\",\n    main: \"flex-1 outline-hidden\",\n  },\n});\nconst s = marketingLayout();\n\nexport type MarketingLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */\n  header: React.ReactNode;\n  /** The site's footer. */\n  footer?: React.ReactNode;\n  /** The words of the link that skips to the content (`Skip to content`). */\n  skipLabel: string;\n  /** The page: a PageHero, then Sections. */\n  children: React.ReactNode;\n};\n\n/** A site's page: skip link, floating bar, the page, the footer. */\nexport function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <SkipLink>{skipLabel}</SkipLink>\n      <div className={s.header()}>{header}</div>\n      <main id=\"content\" tabIndex={-1} className={s.main()}>\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AA2Bf;AAzBG,IAAM,WAAW,GAAG;AAAA,EACzB,MACE;AAEJ,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,YAAY,WAAW,SAAS,UAAU,GAAG,MAAM,GAAkB;AACrG,QAAM,cAAc,CAAC,UAA+C;AAClE,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,UAAM,SAAS,SAAS,eAAe,mBAAmB,KAAK,MAAM,CAAC,CAAC,CAAC;AACxE,QAAI,CAAC,OAAQ;AACb,QAAI,CAAC,OAAO,aAAa,UAAU,KAAK,CAAC,OAAO,QAAQ,6DAA6D,EAAG,QAAO,aAAa,YAAY,IAAI;AAC5J,WAAO,MAAM;AAAA,EACf;AACA,SACE,oBAAC,OAAE,MAAY,WAAW,SAAS,EAAE,UAAU,CAAC,GAAG,SAAS,aAAc,GAAG,OAC1E,UACH;AAEJ;;;AC9BA,SAAS,MAAAA,WAAU;AAyBf,SACE,OAAAC,MADF;AAvBG,IAAM,kBAAkBD,IAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,gBAAgB;AAcnB,SAAS,gBAAgB,EAAE,QAAQ,QAAQ,WAAW,WAAW,UAAU,GAAG,MAAM,GAAyB;AAClH,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAC,KAAC,YAAU,qBAAU;AAAA,IACrB,gBAAAA,KAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,IACpC,gBAAAA,KAAC,UAAK,IAAG,WAAU,UAAU,IAAI,WAAW,EAAE,KAAK,GAChD,UACH;AAAA,IACC;AAAA,KACH;AAEJ;","names":["tv","jsx"]}

package/dist/media-grid.js

@@ -3,14 +3,16 @@ import "./chunk-NPF3OHE2.js";
 import {
   Avatar
 } from "./chunk-KB7OLYIJ.js";
+import {
+  Card,
+  Skeleton
+} from "./chunk-AQSZJJAJ.js";
 import "./chunk-JXLDUDTD.js";
 import {
   Button,
   LoaderGlyph
 } from "./chunk-3BC4XQ6C.js";
-import {
-  defineRecipe
-} from "./chunk-D3T54RSL.js";
+import "./chunk-D3T54RSL.js";
 import {
   cn
 } from "./chunk-2FRWNSRO.js";
@@ -113,7 +115,7 @@ function ShortsShelf({ label, title, items, getId, renderItem, seeAll, previousL
         onScroll: measure,
         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",
+        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)))
       }
     )
@@ -142,102 +144,6 @@ function MediaGrid({ items, getId, orientationOf, renderItem, mode = "split", fr
 // 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
-};
-
 // src/media-grid/preview-focus.ts
 var MIN_RATIO = 0.6;
 var ratios = /* @__PURE__ */ new Map();
@@ -279,7 +185,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 jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FRAME = { landscape: "aspect-video", portrait: "aspect-[9/16]" };
 function VideoCard({
   title,
@@ -322,7 +228,7 @@ function VideoCard({
   const { live, arm, disarm } = usePreviewIntent(node, canPreview, previewDelay);
   const row = layout === "row";
   const tall = aspect === "portrait" && !row;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "article",
     {
       ref: setRef,
@@ -335,10 +241,10 @@ function VideoCard({
       onFocus: (e) => (arm("focus"), onFocus?.(e)),
       onBlur: (e) => (disarm("focus"), onBlur?.(e)),
       ...props,
-      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(
+      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(
             Card.Image,
             {
               src: poster,
@@ -348,21 +254,21 @@ function VideoCard({
               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 }) })
+          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 }) })
         ] }),
-        /* @__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 })
+        /* @__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 })
             ] }),
-            (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 })
+            (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 })
             ] })
           ] })
         ] })
@@ -372,7 +278,7 @@ function VideoCard({
 }
 function PreviewLayer({ src, contain }) {
   const [ready, setReady] = React3.useState(false);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "img",
     {
       src,
@@ -446,39 +352,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 jsx7, jsxs as jsxs5 } 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" })
+  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" })
       ] }),
-      /* @__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__ */ 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__ */ jsx9("div", { className: cn("flex items-center", tall ? "h-7" : "ml-auto"), children: /* @__PURE__ */ jsx9(Skeleton, { className: "h-2.5 w-14" }) })
+        /* @__PURE__ */ jsx7("div", { className: cn("flex items-center", tall ? "h-7" : "ml-auto"), children: /* @__PURE__ */ jsx7(Skeleton, { className: "h-2.5 w-14" }) })
       ] })
     ] })
   ] }) });
@@ -489,13 +381,13 @@ 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 }),
-    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)) })
+  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)) })
     ] }),
-    /* @__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__ */ 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)) })
   ] });
 }
 export {