@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/chat/entity-cards/blog-card.d.ts

@@ -25,9 +25,16 @@ export interface BlogCardProps {
      *  whole card if it wants a link). */
     priority?: boolean;
 }
-/** `portrait` shares the default skeleton shape (same zone boxes). */
-export declare function BlogCardSkeleton({ size }: {
+/**
+ * A blog card while it is read, one per density. `default`: the card's own rows (cover; the title as two `text-h3`
+ * lines; the summary as two `text-h6` lines; the byline's 32px avatar and `text-h6` line; the view count's icon is
+ * drawn for real beside its bar). `portrait`: the shared portrait skeleton with the static chip.
+ */
+export declare function BlogCardSkeleton({ size, showTypeBadge, className, }: {
     size?: 'default' | 'sm' | 'portrait';
+    /** `portrait`: the card shows the "Blog Post" chip. */
+    showTypeBadge?: boolean;
+    className?: string;
 }): import("react").JSX.Element;
 export declare function BlogCard({ post, href, target: targetProp, rel: relProp, targetPlatform, placeholderUrl: placeholderUrlProp, size, showTypeBadge, className, hasEmbeddedVideo, priority, }: BlogCardProps): import("react").JSX.Element;
 //# sourceMappingURL=blog-card.d.ts.map

package/dist/components/chat/entity-cards/blog-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blog-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/blog-card.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAwB3D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,eAAe,CAAC;IACtB,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb;mDAC+C;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC;;sCAEkC;IAClC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;sEACkE;IAClE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC;IACrC,oHAAoH;IACpH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;0CAEsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,gBAAgB,CAAC,EAAE,IAAgB,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,CAAA;CAAE,+BAkC9F;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,cAAc,EACd,cAAc,EAAE,kBAAkB,EAClC,IAAgB,EAChB,aAAoB,EACpB,SAAS,EACT,gBAAwB,EACxB,QAAgB,GACjB,EAAE,aAAa,+BAoJf"}
+{"version":3,"file":"blog-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/blog-card.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAwB3D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,eAAe,CAAC;IACtB,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb;mDAC+C;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC;;sCAEkC;IAClC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;sEACkE;IAClE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC;IACrC,oHAAoH;IACpH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;0CAEsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAgB,EAChB,aAAoB,EACpB,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC;IACrC,uDAAuD;IACvD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgCA;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,cAAc,EACd,cAAc,EAAE,kBAAkB,EAClC,IAAgB,EAChB,aAAoB,EACpB,SAAS,EACT,gBAAwB,EACxB,QAAgB,GACjB,EAAE,aAAa,+BAqJf"}

package/dist/components/chat/entity-cards/blog-card.js

@@ -3,49 +3,64 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Eye } from "lucide-react";
 import Image from "../../../embed-shims/next-image.js";
 import Link from "../../../embed-shims/next-link.js";
+import { AVATAR_SIZE, MEDIA_ASPECT, TEXT_LINES_MIN } from "../../../styles/component-sizes.js";
 import { cn } from "../../../utils/cn.js";
 import { formatDateWithTimezone } from "../../../utils/format.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { StatusBadge } from "../../ui/status-badge.js";
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW
 } from "../utils/compact-card-classes.js";
+import { CompactCardSkeleton } from "../utils/compact-card-skeleton.js";
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from "./content-card-frame.js";
-import { EntityPortraitCard } from "./entity-portrait-card.js";
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from "./entity-portrait-card.js";
 import { useCoverImageFallback } from "./use-cover-image-fallback.js";
 import { useEntityCardLink } from "./use-entity-card-link.js";
 import { useEntityCardPlaceholder } from "./use-entity-card-placeholder.js";
-function BlogCardSkeleton({ size = "default" }) {
+const BLOG_CARD_FRAME = "flex h-full flex-col";
+const BLOG_CARD_COVER = `relative ${MEDIA_ASPECT.og} w-full overflow-hidden`;
+const BLOG_CARD_BODY = "flex flex-grow flex-col p-4";
+const BLOG_CARD_TITLE_ROW = `mb-3 flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+const BLOG_CARD_SUMMARY_ROW = `mb-3 flex items-center text-h6 ${TEXT_LINES_MIN[2]}`;
+const BLOG_CARD_BYLINE = "mt-auto flex items-center justify-between gap-2 text-ods-text-secondary text-h6";
+const BLOG_CARD_BYLINE_PERSON = "flex min-w-0 items-center gap-2";
+const BLOG_CARD_VIEWS = "flex shrink-0 items-center gap-1";
+const BLOG_CARD_AVATAR = `${AVATAR_SIZE.sm} shrink-0 rounded-full object-cover`;
+const BLOG_POST_TYPE_LABEL = "Blog Post";
+function BlogCardSkeleton({
+  size = "default",
+  showTypeBadge = true,
+  className
+}) {
+  if (size === "portrait") {
+    return /* @__PURE__ */ jsx(EntityPortraitCardSkeleton, { typeLabel: showTypeBadge ? BLOG_POST_TYPE_LABEL : void 0, className });
+  }
   if (size === "sm") {
-    return /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_SKELETON_OUTER, children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: COMPACT_CARD_SKELETON_IMAGE_SLOT }),
-      /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_TEXT_COL, children: [
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3.5 w-3/5 rounded" }) }),
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-2/5 rounded" }) }),
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-11/12 rounded" }) })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(CompactCardSkeleton, { className });
   }
-  return /* @__PURE__ */ jsxs("article", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, "group flex h-full flex-col"), children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "aspect-[1200/630]" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-grow flex-col space-y-3 p-4", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-1/2 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-full rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-4/5 rounded" }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded-full" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-24 rounded" })
+  return /* @__PURE__ */ jsxs("article", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, BLOG_CARD_FRAME, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(BLOG_CARD_COVER, "rounded-none") }),
+    /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_BODY, children: [
+      /* @__PURE__ */ jsx("div", { className: BLOG_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", lines: 2, className: "w-full" }) }),
+      /* @__PURE__ */ jsx("div", { className: BLOG_CARD_SUMMARY_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", lines: 2, className: "w-full" }) }),
+      /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_BYLINE, children: [
+        /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_BYLINE_PERSON, children: [
+          /* @__PURE__ */ jsx(MediaSkeleton.Avatar, { size: "sm", className: BLOG_CARD_AVATAR }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-40" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_VIEWS, children: [
+          /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-8" })
+        ] })
       ] })
     ] })
   ] });
@@ -75,6 +90,7 @@ function BlogCard({
     aspect: size === "sm" ? "square" : "wide"
   });
   const { src: displayImage, onError: onImageError } = useCoverImageFallback(post.featured_image, placeholderUrl);
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(BlogCardSkeleton, { size, showTypeBadge, className });
   if (size === "sm") {
     const dateStr2 = post.published_at ? formatDateWithTimezone(post.published_at, null, "medium") : "";
     const firstCategory = post.categories?.find((c) => c && c.name)?.name;
@@ -113,7 +129,7 @@ function BlogCard({
         href,
         target,
         rel,
-        typeLabel: showTypeBadge ? "Blog Post" : void 0,
+        typeLabel: showTypeBadge ? BLOG_POST_TYPE_LABEL : void 0,
         imageUrl: post.featured_image,
         placeholderUrl,
         imageAlt: post.title,
@@ -128,8 +144,8 @@ function BlogCard({
     );
   }
   const dateStr = post.published_at ? formatDateWithTimezone(post.published_at, null, "medium") : "";
-  return /* @__PURE__ */ jsx("article", { className: cn(CONTENT_CARD_FRAME_CLASS, "flex h-full flex-col", className), role: "article", children: /* @__PURE__ */ jsxs(Link, { href, target, rel, className: "flex h-full flex-col focus:outline-none", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative aspect-[1200/630] w-full overflow-hidden bg-ods-bg", children: displayImage ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("article", { className: cn(CONTENT_CARD_FRAME_CLASS, BLOG_CARD_FRAME, className), role: "article", children: /* @__PURE__ */ jsxs(Link, { href, target, rel, className: "flex h-full flex-col focus:outline-none", children: [
+    /* @__PURE__ */ jsx("div", { className: cn(BLOG_CARD_COVER, "bg-ods-bg"), children: displayImage ? /* @__PURE__ */ jsx(
       Image,
       {
         src: displayImage,
@@ -143,8 +159,8 @@ function BlogCard({
         onError: onImageError
       }
     ) : null }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-grow flex-col p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-3 flex min-h-[50.4px] items-center md:min-h-[56px] lg:min-h-[61.6px]", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_BODY, children: [
+      /* @__PURE__ */ jsx("div", { className: BLOG_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx(
         "h3",
         {
           className: cn(
@@ -156,9 +172,9 @@ function BlogCard({
           children: post.title
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "mb-3 flex min-h-[42px] items-center md:min-h-[45px] lg:min-h-[48px]", children: /* @__PURE__ */ jsx("p", { className: cn("text-ods-text-primary text-h6", "line-clamp-2"), children: post.summary || "" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-2 text-ods-text-secondary text-h6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: BLOG_CARD_SUMMARY_ROW, children: /* @__PURE__ */ jsx("p", { className: cn("text-ods-text-primary text-h6", "line-clamp-2"), children: post.summary || "" }) }),
+      /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_BYLINE, children: [
+        /* @__PURE__ */ jsxs("div", { className: BLOG_CARD_BYLINE_PERSON, children: [
           post.author_avatar ? /* @__PURE__ */ jsx(
             Image,
             {
@@ -166,7 +182,7 @@ function BlogCard({
               alt: post.author_name || "",
               width: 32,
               height: 32,
-              className: "shrink-0 rounded-full",
+              className: BLOG_CARD_AVATAR,
               unoptimized: true
             }
           ) : null,
@@ -181,7 +197,7 @@ function BlogCard({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex shrink-0 items-center gap-1",
+            className: BLOG_CARD_VIEWS,
             "aria-label": `View count: ${(post.view_count ?? 0).toLocaleString("en-US")} views`,
             children: [
               /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 shrink-0" }),

package/dist/components/chat/entity-cards/campaign-card-admin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"campaign-card-admin.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/campaign-card-admin.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,qEAAqE;AACrE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,sBAAsB,qBAyC7F;AAED,wBAAgB,yBAAyB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAiB9E"}
+{"version":3,"file":"campaign-card-admin.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/campaign-card-admin.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,qEAAqE;AACrE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,sBAAsB,qBA0C7F;AAED,wBAAgB,yBAAyB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAI9E"}

package/dist/components/chat/entity-cards/campaign-card-admin.js

@@ -3,22 +3,22 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Megaphone } from "lucide-react";
 import Link from "../../../embed-shims/next-link.js";
 import { formatDateShort } from "../../../utils/date-formatters.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import {
   COMPACT_CARD_ICON_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW
 } from "../utils/compact-card-classes.js";
+import { CompactCardSkeleton } from "../utils/compact-card-skeleton.js";
 function CampaignCardAdmin({ campaign, className, anchorProps }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(CampaignCardAdminSkeleton, { className });
   const goalsCount = campaign.goals?.length || 0;
   const innerChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_ICON_SLOT, children: /* @__PURE__ */ jsx(Megaphone, { className: "h-5 w-5" }) }),
@@ -38,14 +38,7 @@ function CampaignCardAdmin({ campaign, className, anchorProps }) {
   return /* @__PURE__ */ jsx("span", { className: `${COMPACT_CARD_OUTER_STATIC} ${className ?? ""}`, "aria-label": "No link available", children: innerChildren });
 }
 function CampaignCardAdminSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs("span", { className: `${COMPACT_CARD_SKELETON_OUTER} ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: COMPACT_CARD_SKELETON_IMAGE_SLOT }),
-    /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_TEXT_COL, children: [
-      /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3.5 w-3/5 rounded" }) }),
-      /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-1/2 rounded" }) }),
-      /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-11/12 rounded" }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(CompactCardSkeleton, { rows: [{ width: "w-1/2" }, { width: "w-11/12" }], className });
 }
 export {
   CampaignCardAdmin,

package/dist/components/chat/entity-cards/case-study-card.d.ts

@@ -1,8 +1,6 @@
 import type { CaseStudyCardData } from '../../../types/case-study';
-export interface CaseStudyCardProps {
-    study: CaseStudyCardData;
-    /** Detail URL resolved by the caller. */
-    href: string;
+/** The card's options, the same loaded or loading. */
+interface CaseStudyCardOptions {
     /** When `_blank`, opens in a new tab. Set by chat dispatch via
      *  `computeIsNewTab`. Defaults to same-tab. */
     target?: '_blank';
@@ -25,10 +23,30 @@ export interface CaseStudyCardProps {
     showTypeBadge?: boolean;
     className?: string;
 }
-/** `portrait` shares the default skeleton shape — the portrait anatomy uses the
- *  same zone boxes (media aspect → 72px title → 60px person footer). */
-export declare function CaseStudyCardSkeleton({ size }: {
-    size?: 'default' | 'sm' | 'portrait' | 'result';
+/**
+ * The story and its link, or `loading` while the host reads the story (a client read): the card then draws its own
+ * skeleton (`CaseStudyCardSkeleton`), as it does in a loading scope.
+ */
+export type CaseStudyCardProps = CaseStudyCardOptions & ({
+    study: CaseStudyCardData;
+    /** Detail URL resolved by the caller. */
+    href: string;
+    loading?: false;
+} | {
+    loading: true;
+    study?: undefined;
+    href?: undefined;
+});
+/**
+ * A case study card while it is read, one per density, in the card's own boxes. Static words (the "Read" link, the
+ * portrait chip) are drawn for real; the title, people, metric and summary are bars.
+ */
+export declare function CaseStudyCardSkeleton({ size, showTypeBadge, className, }: {
+    size?: 'default' | 'sm' | 'portrait' | 'menu' | 'result';
+    /** `portrait`: the card shows the "Case Study" chip. */
+    showTypeBadge?: boolean;
+    className?: string;
 }): import("react").JSX.Element;
-export declare function CaseStudyCard({ study, href, target: targetProp, rel: relProp, targetPlatform, placeholderUrl: placeholderUrlProp, size, showTypeBadge, accentClassName, mediaMounted, onNavigate, className, }: CaseStudyCardProps): import("react").JSX.Element | null;
+export declare function CaseStudyCard(props: CaseStudyCardProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=case-study-card.d.ts.map

package/dist/components/chat/entity-cards/case-study-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"case-study-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/case-study-card.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,2BAA2B,CAAC;AA2BpF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,iBAAiB,CAAC;IACzB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb;mDAC+C;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;yFACqF;IACrF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IACzD;kFAC8E;IAC9E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;oFACgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oHAAoH;IACpH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6DD;wEACwE;AACxE,wBAAgB,qBAAqB,CAAC,EAAE,IAAgB,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,GAAG,QAAQ,CAAA;CAAE,+BAwD9G;AAkBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,cAAc,EACd,cAAc,EAAE,kBAAkB,EAClC,IAAgB,EAChB,aAAoB,EACpB,eAAmC,EACnC,YAAY,EACZ,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,sCAyMpB"}
+{"version":3,"file":"case-study-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/case-study-card.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,2BAA2B,CAAC;AA2BpF,sDAAsD;AACtD,UAAU,oBAAoB;IAC5B;mDAC+C;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;yFACqF;IACrF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IACzD;kFAC8E;IAC9E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;oFACgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oHAAoH;IACpH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GACnD,CACI;IACE,KAAK,EAAE,iBAAiB,CAAC;IACzB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CACzD,CAAC;AAkGJ;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,IAAgB,EAChB,aAAoB,EACpB,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IACzD,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAiDA;AAkBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAMtD"}

package/dist/components/chat/entity-cards/case-study-card.js

@@ -3,40 +3,54 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Image from "../../../embed-shims/next-image.js";
 import Link from "../../../embed-shims/next-link.js";
+import { ICON_SIZE, MEDIA_ASPECT } from "../../../styles/component-sizes.js";
 import { cn } from "../../../utils/cn.js";
 import { sortBitesByFeaturedAtDesc } from "../../features/video-bites-shared.js";
 import { CardHoverPlay } from "../../features/video-center-badge.js";
 import { VideoHoverPreviewSurface } from "../../features/video-hover-preview.js";
 import { EntityIcon } from "../../icon-display.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { Card } from "../../ui/card.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW
 } from "../utils/compact-card-classes.js";
+import { CompactCardSkeleton } from "../utils/compact-card-skeleton.js";
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from "./content-card-frame.js";
-import { EntityPortraitCard } from "./entity-portrait-card.js";
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from "./entity-portrait-card.js";
 import { hideOnError } from "./use-cover-image-fallback.js";
 import { useEntityCardLink } from "./use-entity-card-link.js";
 import { useEntityCardPlaceholder } from "./use-entity-card-placeholder.js";
 const CASE_STUDY_RESULT_STACK = "flex h-full flex-col gap-5 p-6";
 const CASE_STUDY_RESULT_METRIC_BOX = "flex h-[112px] shrink-0 flex-col justify-start gap-1 overflow-hidden";
 const CASE_STUDY_RESULT_FOOTER_BOX = "mt-auto flex h-[60px] shrink-0 items-center justify-between gap-3 border-t border-ods-border pt-4";
+const CASE_STUDY_DEFAULT_BODY = "flex flex-col gap-6 p-6";
+const CASE_STUDY_COVER = `relative ${MEDIA_ASPECT.og} w-full shrink-0 overflow-hidden rounded-sm`;
+const CASE_STUDY_TITLE_ZONE = "flex h-[72px] shrink-0 items-center";
+const CASE_STUDY_PERSON_ZONE = "flex h-[60px] shrink-0 items-center";
+const CASE_STUDY_PERSON_ROW = "flex w-full min-w-0 items-center gap-3";
+const CASE_STUDY_PERSON_TEXT = "min-w-0 flex-1";
+const CASE_STUDY_MENU_FRAME = "group/card group flex min-w-0 flex-col gap-[var(--spacing-system-sf)] rounded-xl border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent";
+const CASE_STUDY_MENU_SKELETON_FRAME = "flex min-w-0 flex-col gap-[var(--spacing-system-sf)] rounded-xl border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]";
+const CASE_STUDY_MENU_MEDIA = `relative block ${MEDIA_ASPECT.video} w-full shrink-0 overflow-hidden rounded-md`;
+const CASE_STUDY_MENU_MSP_ROW = "flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h6";
+const MSP_ICON_PX = 20;
+const MSP_ICON_CLASS = `${ICON_SIZE.md} shrink-0 rounded`;
+const CASE_STUDY_TYPE_LABEL = "Case Study";
 function headlineMetric(study) {
   const metric = study.metrics?.[0];
   return metric?.value && metric.label ? metric : null;
 }
 function CaseStudyPersonRow({ study }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex h-[60px] shrink-0 items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-3", children: [
+  return /* @__PURE__ */ jsx("div", { className: CASE_STUDY_PERSON_ZONE, children: /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_PERSON_ROW, children: [
     /* @__PURE__ */ jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [
       study.user?.avatar_url ? /* @__PURE__ */ jsx(
         Image,
@@ -61,7 +75,7 @@ function CaseStudyPersonRow({ study }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_PERSON_TEXT, children: [
       /* @__PURE__ */ jsxs("p", { className: "truncate text-ods-text-primary text-h6", children: [
         study.user?.full_name || "Anonymous",
         study.msp?.name && /* @__PURE__ */ jsxs("span", { className: "text-ods-text-secondary", children: [
@@ -73,47 +87,56 @@ function CaseStudyPersonRow({ study }) {
     ] })
   ] }) });
 }
-function CaseStudyCardSkeleton({ size = "default" }) {
+function CaseStudyPersonRowSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: CASE_STUDY_PERSON_ZONE, children: /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_PERSON_ROW, children: [
+    /* @__PURE__ */ jsx(MediaSkeleton.Avatar, { size: "md", className: "shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_PERSON_TEXT, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-2/3" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
+    ] })
+  ] }) });
+}
+function CaseStudyCardSkeleton({
+  size = "default",
+  showTypeBadge = true,
+  className
+}) {
+  if (size === "portrait") {
+    return /* @__PURE__ */ jsx(EntityPortraitCardSkeleton, { typeLabel: showTypeBadge ? CASE_STUDY_TYPE_LABEL : void 0, className });
+  }
   if (size === "result") {
-    return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex h-[60px] shrink-0 items-center gap-3", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded-full" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-2/3 rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded" })
-        ] })
-      ] }),
+    return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK, className), "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx(CaseStudyPersonRowSkeleton, {}),
       /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_RESULT_METRIC_BOX, "data-testid": "case-study-result-skeleton-metric", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-1/3 rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded" })
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h1", className: "w-1/3" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "w-3/4" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_RESULT_FOOTER_BOX, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", lines: 2, className: "w-2/3" }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ods-accent text-h6", children: "Read" })
+      ] })
+    ] });
+  }
+  if (size === "menu") {
+    return /* @__PURE__ */ jsxs("div", { className: cn(CASE_STUDY_MENU_SKELETON_FRAME, className), "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: CASE_STUDY_MENU_MEDIA }),
+      /* @__PURE__ */ jsxs("div", { className: CASE_STUDY_MENU_MSP_ROW, children: [
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: MSP_ICON_CLASS }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-28" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: CASE_STUDY_RESULT_FOOTER_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-2/3 rounded" }) })
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", lines: 2, className: "w-full" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-3/4" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "mt-auto w-28" })
     ] });
   }
   if (size === "sm") {
-    return /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_SKELETON_OUTER, children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: COMPACT_CARD_SKELETON_IMAGE_SLOT }),
-      /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_TEXT_COL, children: [
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3.5 w-3/5 rounded" }) }),
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-1/2 rounded" }) }),
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-11/12 rounded" }) })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(CompactCardSkeleton, { rows: [{ width: "w-1/2" }, { width: "w-11/12" }], className });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, "flex flex-col gap-6 p-6"), children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "aspect-[1200/630] w-full rounded-sm" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex h-[72px] flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-1/2 rounded" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex h-[60px] items-center gap-3", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded-full" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-2/3 rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded" })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: cn("block h-full", className), "aria-hidden": true, children: /* @__PURE__ */ jsxs(Card, { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_DEFAULT_BODY), children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(CASE_STUDY_COVER, "rounded-sm") }),
+    /* @__PURE__ */ jsx("div", { className: CASE_STUDY_TITLE_ZONE, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 3, className: "w-full" }) }),
+    /* @__PURE__ */ jsx(CaseStudyPersonRowSkeleton, {})
+  ] }) });
 }
 function caseStudyHighlight(study) {
   if (study.highlight_video_url) {
@@ -122,7 +145,14 @@ function caseStudyHighlight(study) {
   const bite = (study.video_bites ?? []).filter((candidate) => candidate.featured === true && candidate.url).sort(sortBitesByFeaturedAtDesc)[0];
   return bite ? { url: bite.url, posterUrl: bite.thumbnail_url ?? null } : null;
 }
-function CaseStudyCard({
+function CaseStudyCard(props) {
+  const inScope = useLoadingScope();
+  if (inScope || props.loading) {
+    return /* @__PURE__ */ jsx(CaseStudyCardSkeleton, { size: props.size, showTypeBadge: props.showTypeBadge, className: props.className });
+  }
+  return /* @__PURE__ */ jsx(LoadedCaseStudyCard, { ...props });
+}
+function LoadedCaseStudyCard({
   study,
   href,
   target: targetProp,
@@ -186,13 +216,9 @@ function CaseStudyCard({
         onPointerLeave: () => setHovered(false),
         onFocus: () => setHovered(true),
         onBlur: () => setHovered(false),
-        className: cn(
-          // `group/card` is what the shared play glyph accents on.
-          "group/card group flex min-w-0 flex-col gap-[var(--spacing-system-sf)] rounded-xl border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent",
-          className
-        ),
+        className: cn(CASE_STUDY_MENU_FRAME, className),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative block aspect-video w-full shrink-0 overflow-hidden rounded-md bg-ods-bg", children: videoUrl ? (
+          /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none bg-ods-bg", CASE_STUDY_MENU_MEDIA), children: videoUrl ? (
             // The shared hover surface, filled the way the walkthrough card fills
             // its own 16:9 slot (`cover`): an upright cut is cropped to the slot,
             // never letterboxed. Sound on hover, muted when the browser blocks it.
@@ -222,13 +248,13 @@ function CaseStudyCard({
             ),
             hasAnyVideo && /* @__PURE__ */ jsx(CardHoverPlay, { size: "md" })
           ] }) }),
-          study.msp?.name && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h6", children: [
+          study.msp?.name && /* @__PURE__ */ jsxs("span", { className: CASE_STUDY_MENU_MSP_ROW, children: [
             study.msp.icon_url && /* @__PURE__ */ jsx(
               EntityIcon,
               {
                 icon: { url: study.msp.icon_url },
-                size: 20,
-                className: "size-5 shrink-0 rounded object-contain"
+                size: MSP_ICON_PX,
+                className: cn(MSP_ICON_CLASS, "object-contain")
               }
             ),
             /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: study.msp.name })
@@ -262,7 +288,7 @@ function CaseStudyCard({
         href,
         target,
         rel,
-        typeLabel: showTypeBadge ? "Case Study" : void 0,
+        typeLabel: showTypeBadge ? CASE_STUDY_TYPE_LABEL : void 0,
         imageUrl: study.featured_image,
         placeholderUrl,
         imageAlt: study.msp?.name || study.title,
@@ -277,8 +303,8 @@ function CaseStudyCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx(Link, { href, target, rel, className: cn("block h-full", className), children: /* @__PURE__ */ jsxs(Card, { className: cn(CONTENT_CARD_FRAME_CLASS, "flex flex-col gap-6 p-6"), children: [
-    /* @__PURE__ */ jsx("div", { className: "relative aspect-[1200/630] w-full shrink-0 overflow-hidden rounded-sm bg-ods-bg", children: coverImage && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Link, { href, target, rel, className: cn("block h-full", className), children: /* @__PURE__ */ jsxs(Card, { className: cn(CONTENT_CARD_FRAME_CLASS, CASE_STUDY_DEFAULT_BODY), children: [
+    /* @__PURE__ */ jsx("div", { className: cn(CASE_STUDY_COVER, "bg-ods-bg"), children: coverImage && /* @__PURE__ */ jsx(
       Image,
       {
         src: coverImage,
@@ -290,7 +316,7 @@ function CaseStudyCard({
         onError: hideOnError
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "flex h-[72px] shrink-0 items-center", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-ods-text-primary text-h4", children: study.title }) }),
+    /* @__PURE__ */ jsx("div", { className: CASE_STUDY_TITLE_ZONE, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-ods-text-primary text-h4", children: study.title }) }),
     /* @__PURE__ */ jsx(CaseStudyPersonRow, { study })
   ] }) });
 }

package/dist/components/chat/entity-cards/chat-ticket-item.d.ts

@@ -45,6 +45,13 @@ export interface ChatTicketItemProps extends Omit<ButtonHTMLAttributes<HTMLButto
     /** Render a non-interactive skeleton placeholder sized to a real row. */
     isLoading?: boolean;
 }
+/**
+ * A ticket row while it is read: the title as a `text-h3` line and the reference line as a `text-h6` line, the status
+ * tag's box, and the chevron box with its icon (static) drawn for real.
+ */
+export declare function ChatTicketItemSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
 declare const ChatTicketItem: import("react").ForwardRefExoticComponent<ChatTicketItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { ChatTicketItem };
 //# sourceMappingURL=chat-ticket-item.d.ts.map

package/dist/components/chat/entity-cards/chat-ticket-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-ticket-item.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/chat-ticket-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAO9D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,MAAM,EAAE,MAAM,CAAC;IACf;;;;;4DAKwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;sDAIkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;qDAIiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;sDAKkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACnG,2EAA2E;IAC3E,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAID,QAAA,MAAM,cAAc,mHA0GnB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"chat-ticket-item.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/chat-ticket-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAS9D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,MAAM,EAAE,MAAM,CAAC;IACf;;;;;4DAKwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;sDAIkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;qDAIiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;sDAKkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACnG,2EAA2E;IAC3E,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AASD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAc3E;AAED,QAAA,MAAM,cAAc,mHAoFnB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,CAAC"}