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

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

@@ -5,41 +5,40 @@ import { useState } from "react";
 import Image from "../../../embed-shims/next-image.js";
 import Link from "../../../embed-shims/next-link.js";
 import { useImageEdgeColor } from "../../../hooks/ui/use-image-edge-color.js";
+import { MEDIA_ASPECT } from "../../../styles/component-sizes.js";
 import { cn } from "../../../utils/cn.js";
 import { formatProgramDate, formatProgramDateRange } from "../../../utils/format.js";
 import { isImageMedia } from "../../../utils/media-type.js";
 import { programMetaFormatters, programMetaLine } from "../../../utils/program-instant.js";
 import { PROGRAM_META_RENDERERS } from "../../../utils/program-meta-renderers.js";
+import { programItemToStripProfile } from "../../features/video-bites-shared.js";
 import { CardHoverPlay } from "../../features/video-center-badge.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { Button } from "../../ui/button/button.js";
 import { ImageGalleryModal } from "../../ui/image-gallery-modal.js";
-import { SquareAvatar } from "../../ui/square-avatar.js";
-import { Tag } from "../../ui/tag.js";
-import {
-  programItemToStripProfile
-} from "../types/entities/program-types.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { SquareAvatar, SquareAvatarSkeleton } from "../../ui/square-avatar.js";
+import { Tag, TagSkeleton } from "../../ui/tag.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_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_SKELETON_FRAME_CLASS, ContentCardFrame } from "./content-card-frame.js";
-import { EntityPortraitCard } from "./entity-portrait-card.js";
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from "./entity-portrait-card.js";
 import { useEntityCardLink } from "./use-entity-card-link.js";
 import { useEntityCardPlaceholder } from "./use-entity-card-placeholder.js";
 const EDITORIAL_FRAME = CONTENT_CARD_SKELETON_FRAME_CLASS;
 const EDITORIAL_ROW_GRID = "grid grid-cols-[88px_minmax(0,1fr)] items-center gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)] sm:grid-cols-[120px_minmax(0,1fr)] sm:gap-[var(--spacing-system-l)]";
-const EDITORIAL_ROW_THUMB = "relative block aspect-square w-full overflow-hidden rounded-md";
+const EDITORIAL_ROW_THUMB = `relative block ${MEDIA_ASPECT.square} w-full overflow-hidden rounded-md`;
 const EDITORIAL_ROW_TEXT = "flex min-w-0 flex-col gap-[var(--spacing-system-xs)]";
-const EDITORIAL_FEATURE_COVER = "relative block aspect-video w-full overflow-hidden";
+const EDITORIAL_FEATURE_COVER = `relative block ${MEDIA_ASPECT.video} w-full overflow-hidden`;
 const EDITORIAL_FEATURE_BODY = "flex flex-col gap-[var(--spacing-system-s)] p-[var(--spacing-system-l)]";
 const EDITORIAL_META_ROW = "flex h-[1lh] min-w-0 items-center gap-x-[var(--spacing-system-s)] overflow-hidden whitespace-nowrap text-h6";
 const EDITORIAL_PERSON_ROW = "flex h-8 min-w-0 items-center gap-[var(--spacing-system-s)]";
@@ -54,66 +53,71 @@ const DEFAULT_TAG_ROW = "flex flex-wrap gap-[var(--spacing-system-xsf)]";
 const DEFAULT_GALLERY_ROW = "flex gap-[var(--spacing-system-mf)]";
 const DEFAULT_GALLERY_THUMB = "relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg md:h-40 md:w-40 xl:h-[200px] xl:w-[200px]";
 const DEFAULT_FOOTER = "flex justify-end border-t border-ods-border pt-[var(--spacing-system-lf)]";
+const DEFAULT_HOSTS_ROW = "flex flex-wrap gap-2 md:justify-end";
+const DEFAULT_TAGS_FOLD = 2;
+const EDITORIAL_PERSON_AVATAR = { variant: "round", size: "sm" };
+const programActionLabel = (singular) => `View ${singular.toLowerCase()}`;
+function ProgramActionButton({ label, href, newTab }) {
+  return /* @__PURE__ */ jsx(Button, { variant: "outline", href, openInNewTab: newTab, rightIcon: /* @__PURE__ */ jsx(ArrowRight, { className: "h-5 w-5" }), children: label });
+}
 function ProgramCardSkeleton({
   size = "default",
   eyebrow = true,
   media = 0,
-  tags = false
+  tags = false,
+  hosts = 1,
+  typeLabel,
+  actionLabel,
+  className
 }) {
+  if (size === "portrait") return /* @__PURE__ */ jsx(EntityPortraitCardSkeleton, { typeLabel, className });
   if (size === "row") {
-    return /* @__PURE__ */ jsxs("span", { className: cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID), children: [
+    return /* @__PURE__ */ jsxs("span", { className: cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID, className), children: [
       /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: EDITORIAL_ROW_THUMB }),
       /* @__PURE__ */ jsxs("span", { className: EDITORIAL_ROW_TEXT, children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[2lh] w-full rounded text-h3" }),
-        /* @__PURE__ */ jsx("span", { className: EDITORIAL_META_ROW, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-40 rounded" }) }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[2lh] w-full rounded text-h6" })
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h3", lines: 2, className: "w-full" }),
+        /* @__PURE__ */ jsx("span", { className: EDITORIAL_META_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "w-40" }) }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h6", lines: 2, className: "w-full" })
       ] })
     ] });
   }
   if (size === "feature") {
-    return /* @__PURE__ */ jsxs("span", { className: cn(EDITORIAL_FRAME, "flex flex-col"), children: [
+    return /* @__PURE__ */ jsxs("span", { className: cn(EDITORIAL_FRAME, "flex flex-col", className), children: [
       /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(EDITORIAL_FEATURE_COVER, "rounded-none") }),
       /* @__PURE__ */ jsxs("span", { className: EDITORIAL_FEATURE_BODY, children: [
-        eyebrow && /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-28 rounded text-h5" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[2lh] w-full rounded text-h3" }),
-        /* @__PURE__ */ jsx("span", { className: EDITORIAL_META_ROW, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-40 rounded" }) }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[3lh] w-full rounded text-h4" }),
+        eyebrow && /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h5", className: "w-28" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h3", lines: 2, className: "w-full" }),
+        /* @__PURE__ */ jsx("span", { className: EDITORIAL_META_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "w-40" }) }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h4", lines: 3, className: "w-full" }),
         /* @__PURE__ */ jsxs("span", { className: EDITORIAL_PERSON_ROW, children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-8 w-8 shrink-0 rounded-full" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-40 rounded text-h6" })
+          /* @__PURE__ */ jsx(SquareAvatarSkeleton, { ...EDITORIAL_PERSON_AVATAR, className: "shrink-0" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h6", className: "w-40" })
         ] })
       ] })
     ] });
   }
   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" }) })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "flex h-5 shrink-0 items-center self-start", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3.5 w-3.5 rounded" }) })
-    ] });
+    return /* @__PURE__ */ jsx(CompactCardSkeleton, { trailingIcon: true, className });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DEFAULT_BODY), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DEFAULT_BODY, className), children: [
     /* @__PURE__ */ jsxs("div", { className: DEFAULT_HEADER, children: [
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: DEFAULT_COVER_FRAME }),
       /* @__PURE__ */ jsxs("div", { className: DEFAULT_TEXT, children: [
-        /* @__PURE__ */ jsx("div", { className: DEFAULT_TITLE, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[2lh] w-3/4 rounded" }) }),
+        /* @__PURE__ */ jsx("div", { className: DEFAULT_TITLE, children: /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", lines: 2, className: "w-3/4" }) }),
         /* @__PURE__ */ jsxs("div", { className: DEFAULT_META_ROW, children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-32 rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-40 rounded" })
+          /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "w-32" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "w-40" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: DEFAULT_DESCRIPTION, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[3lh] w-full rounded" }) }),
-        tags && /* @__PURE__ */ jsxs("div", { className: DEFAULT_TAG_ROW, children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-8 w-24 rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-8 w-24 rounded" })
-        ] })
-      ] })
+        /* @__PURE__ */ jsx("div", { className: DEFAULT_DESCRIPTION, children: /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", lines: 3, className: "w-full" }) }),
+        tags && /* @__PURE__ */ jsx("div", { className: DEFAULT_TAG_ROW, children: Array.from({ length: DEFAULT_TAGS_FOLD }, (_, i) => /* @__PURE__ */ jsx(TagSkeleton, {}, i)) })
+      ] }),
+      hosts > 0 && /* @__PURE__ */ jsx("div", { className: DEFAULT_HOSTS_ROW, children: Array.from({ length: hosts }, (_, i) => /* @__PURE__ */ jsx(SquareAvatarSkeleton, { variant: "round", size: "sm" }, i)) })
     ] }),
     media > 0 && /* @__PURE__ */ jsx("div", { className: DEFAULT_GALLERY_ROW, children: Array.from({ length: media }, (_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: DEFAULT_GALLERY_THUMB }, i)) }),
-    /* @__PURE__ */ jsx("div", { className: DEFAULT_FOOTER, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-11 w-40 rounded md:h-12" }) })
+    /* @__PURE__ */ jsx("div", { className: DEFAULT_FOOTER, children: actionLabel ? (
+      // The action's words are copy: the real button, not a control while it loads.
+      /* @__PURE__ */ jsx("span", { inert: true, "aria-hidden": true, className: "flex", children: /* @__PURE__ */ jsx(ProgramActionButton, { label: actionLabel }) })
+    ) : /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "default", className: "w-40" }) })
   ] });
 }
 function getHosts(hosts) {
@@ -255,11 +259,10 @@ function ProgramEditorialCard({
         /* @__PURE__ */ jsx(
           SquareAvatar,
           {
-            variant: "round",
+            ...EDITORIAL_PERSON_AVATAR,
             src: profile.avatarUrl || void 0,
             alt: profile.name,
-            fallback: profile.name.charAt(0).toUpperCase(),
-            size: "sm"
+            fallback: profile.name.charAt(0).toUpperCase()
           }
         ),
         /* @__PURE__ */ jsxs("span", { className: "truncate text-h6", children: [
@@ -301,6 +304,21 @@ function ProgramCard({
     placeholderUrl: placeholderUrlProp,
     aspect: size === "sm" || size === "row" ? "square" : "wide"
   });
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(
+      ProgramCardSkeleton,
+      {
+        size,
+        eyebrow: !!eyebrow,
+        media: media.filter((m) => isImageMedia(m)).length,
+        tags: tags.length > 0,
+        hosts: getHosts(item.hosts).length,
+        typeLabel: size === "portrait" && showTypeBadge ? config.labels.singular : void 0,
+        actionLabel: programActionLabel(config.labels.singular),
+        className
+      }
+    );
+  }
   const coverImage = item.cover_url;
   const images = media.filter((m) => isImageMedia(m));
   const hosts = getHosts(item.hosts);
@@ -436,7 +454,9 @@ function ProgramCard({
       /* @__PURE__ */ jsx("p", { className: DEFAULT_DESCRIPTION, children: item.description }),
       tags.length > 0 && /* @__PURE__ */ jsx("div", { className: DEFAULT_TAG_ROW, children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { as: "span", label: tag, variant: "outline" }, tag)) })
     ] }),
-    hosts.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 md:justify-end", children: hosts.map((host, index) => /* @__PURE__ */ jsx(
+    hosts.length > 0 && // A type whose cards always show hosts (`cardShowsHosts`) draws them while loading; elsewhere only some
+    // records have hosts, so the row is record-dependent.
+    /* @__PURE__ */ jsx("div", { className: DEFAULT_HOSTS_ROW, "data-loading-optional": config.cardShowsHosts ? void 0 : true, children: hosts.map((host, index) => /* @__PURE__ */ jsx(
       SquareAvatar,
       {
         variant: "round",
@@ -449,7 +469,7 @@ function ProgramCard({
     )) })
   ] });
   const cardFrameClass = cn(DEFAULT_BODY, className);
-  const actionLabel = `View ${config.labels.singular.toLowerCase()}`;
+  const actionLabel = programActionLabel(config.labels.singular);
   if (wholeCardClickable) {
     return /* @__PURE__ */ jsxs(ContentCardFrame, { as: "a", href, target, rel, className: cardFrameClass, children: [
       cardHeader,
@@ -470,16 +490,7 @@ function ProgramCard({
   return /* @__PURE__ */ jsxs(ContentCardFrame, { as: "div", className: cardFrameClass, children: [
     /* @__PURE__ */ jsx(Link, { href, target, rel, className: "block", children: cardHeader }),
     images.length > 0 && /* @__PURE__ */ jsx(MediaGallery, { images, title: item.title }),
-    /* @__PURE__ */ jsx("div", { className: DEFAULT_FOOTER, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outline",
-        href,
-        openInNewTab: target === "_blank",
-        rightIcon: /* @__PURE__ */ jsx(ArrowRight, { className: "h-5 w-5" }),
-        children: actionLabel
-      }
-    ) })
+    /* @__PURE__ */ jsx("div", { className: DEFAULT_FOOTER, children: /* @__PURE__ */ jsx(ProgramActionButton, { label: actionLabel, href, newTab: target === "_blank" }) })
   ] });
 }
 export {

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

@@ -1,8 +1,17 @@
 import type { RoadmapItem } from '../types/entities/roadmap-item';
 type CardSize = 'default' | 'sm';
 export type VoteType = 'up' | 'down' | null;
-export declare function RoadmapCardSkeleton({ size }: {
+/**
+ * A roadmap card while it is read. `default`, in the card's own boxes: the 64px icon box, the title as two `text-h3`
+ * lines, the quarter and id as a `text-h5` line, the status badge's box (beside the heading from md, its own row
+ * below), the description as three `text-h4` lines and the vote buttons' 48px box (with `votes`); the assignees and
+ * target version are drawn only when an item has them, so the skeleton leaves them out. `sm`: the compact card's rows.
+ */
+export declare function RoadmapCardSkeleton({ size, votes, className, }: {
     size?: CardSize;
+    /** `default`: the card shows its vote buttons (the caller passes `onVote`). */
+    votes?: boolean;
+    className?: string;
 }): import("react").JSX.Element;
 export interface RoadmapCardProps {
     item: RoadmapItem;

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

@@ -1 +1 @@
-{"version":3,"file":"roadmap-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/roadmap-card.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAmBlE,KAAK,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;AACjC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;AAE5C,wBAAgB,mBAAmB,CAAC,EAAE,IAAgB,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,+BAsD5E;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;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,mEAAmE;IACnE,QAAQ,CAAC,EAAE,cAAc,GAAG,eAAe,GAAG,eAAe,CAAC;IAC9D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;mCAI+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAaD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EAEJ,MAAM,EAEN,GAAG,EACH,IAAgB,EAChB,QAAyB,EACzB,SAAS,EACT,EAAE,EACF,QAAQ,EACR,MAAM,EACN,QAAgB,GACjB,EAAE,gBAAgB,+BA6OlB"}
+{"version":3,"file":"roadmap-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/roadmap-card.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAmBlE,KAAK,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;AACjC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;AAoB5C;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAgB,EAChB,KAAY,EACZ,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4CA;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;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,mEAAmE;IACnE,QAAQ,CAAC,EAAE,cAAc,GAAG,eAAe,GAAG,eAAe,CAAC;IAC9D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;mCAI+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAaD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EAEJ,MAAM,EAEN,GAAG,EACH,IAAgB,EAChB,QAAyB,EACzB,SAAS,EACT,EAAE,EACF,QAAQ,EACR,MAAM,EACN,QAAgB,GACjB,EAAE,gBAAgB,+BAwOlB"}

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

@@ -4,15 +4,17 @@ import { ThumbsUp, ThumbsDown } from "lucide-react";
 import { useState } from "react";
 import Image from "../../../embed-shims/next-image.js";
 import Link from "../../../embed-shims/next-link.js";
+import { MEDIA_ASPECT, TEXT_LINES_MIN, TILE_SIZE } from "../../../styles/component-sizes.js";
 import { cn } from "../../../utils/cn.js";
-import { getProxiedImageUrl } from "../../../utils/image-proxy.js";
 import { ImageClassicIcon } from "../../icons-v2-generated/audio-and-visual/image-classic-icon.js";
 import { FigmaClassicIcon } from "../../icons-v2-generated/brand-logos/figma-classic-icon.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { AvatarStack } from "../../ui/avatar-stack.js";
 import { Button } from "../../ui/button/button.js";
 import { ImageGalleryModal } from "../../ui/image-gallery-modal.js";
-import { StatusBadge, generationTierFromLabel } from "../../ui/status-badge.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { StatusBadge, StatusBadgeSkeleton, generationTierFromLabel } from "../../ui/status-badge.js";
+import { useProxiedImageUrl } from "../hooks/use-proxied-image-url.js";
 import { getStatusColorScheme } from "../utils/agent-status-message.js";
 import { getTaskTypeLabel } from "../utils/clickup-task-type-utils.js";
 import {
@@ -20,62 +22,61 @@ import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
   safeHref
 } 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 { RoadmapVoteButton } from "./roadmap-vote-button.js";
 import { TaskTypeIcon } from "./task-type-icon.js";
-function RoadmapCardSkeleton({ size = "default" }) {
+const ROADMAP_COMPACT_SLOT = `${MEDIA_ASPECT.square} ${TILE_SIZE.xl} shrink-0 self-start overflow-hidden rounded-md border border-ods-border p-1.5`;
+const ROADMAP_CARD_BODY = "flex h-full scroll-mt-24 flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]";
+const ROADMAP_CARD_HEADER = "flex w-full items-center gap-[16px]";
+const ROADMAP_CARD_ICON_BOX = `flex ${TILE_SIZE.feature} flex-shrink-0 items-center justify-center rounded-lg`;
+const ROADMAP_CARD_HEADING = "flex min-w-0 flex-1 flex-col";
+const ROADMAP_CARD_TITLE_ROW = `flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+const ROADMAP_CARD_META_ROW = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+const ROADMAP_CARD_SUMMARY_ROW = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROADMAP_CARD_FOOTER = "flex w-full items-center justify-between";
+const ROADMAP_CARD_VOTES = "flex h-[48px] overflow-hidden rounded-[6px]";
+const ROADMAP_CARD_FOOTER_END = "flex min-w-0 items-center gap-2";
+function RoadmapCardSkeleton({
+  size = "default",
+  votes = true,
+  className
+}) {
   if (size === "sm") {
-    return /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_SKELETON_OUTER, children: [
-      /* @__PURE__ */ jsx(
-        UnifiedSkeleton,
-        {
-          as: "span",
-          className: "block aspect-square h-12 w-12 shrink-0 self-start rounded-md border border-ods-border p-1.5"
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: COMPACT_CARD_TEXT_COL, children: [
-        /* @__PURE__ */ jsxs("span", { className: `${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`, children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3.5 w-1/2 rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-4 w-12 shrink-0 rounded" })
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: `${COMPACT_CARD_META_ROW_BOX} flex-nowrap gap-2`, children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-2/5 flex-1 rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-10 shrink-0 rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-6 w-14 shrink-0 rounded-full" })
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "h-3 w-5/6 rounded" }) })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(
+      CompactCardSkeleton,
+      {
+        slotClassName: ROADMAP_COMPACT_SLOT,
+        titleWidth: "w-1/2",
+        titleBadges: ["w-12"],
+        rows: [
+          // The votes, Figma and screenshot marks after the meta line are the record's (optional): not drawn.
+          { width: "w-2/5 flex-1" },
+          { width: "w-5/6" }
+        ],
+        className
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, "flex h-full flex-col gap-4 p-[var(--spacing-system-lf)]"), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-16 w-16 flex-shrink-0 rounded-lg" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded" })
+  return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, ROADMAP_CARD_BODY, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: ROADMAP_CARD_HEADER, children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: ROADMAP_CARD_ICON_BOX }),
+      /* @__PURE__ */ jsxs("div", { className: ROADMAP_CARD_HEADING, children: [
+        /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", lines: 2, className: "w-3/4" }) }),
+        /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_META_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-1/3" }) })
       ] }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-16 rounded" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-full rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-5/6 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-4/5 rounded" })
+      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(StatusBadgeSkeleton, {}) })
     ] }),
+    /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(StatusBadgeSkeleton, {}) }),
+    /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_SUMMARY_ROW, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 3, className: "w-full" }) }),
     /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-32 rounded" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-14 rounded-full" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20 rounded" })
-      ] })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_FOOTER, children: votes && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(ROADMAP_CARD_VOTES, "w-32") }) })
   ] });
 }
 function assigneePeople(assignees) {
@@ -99,8 +100,10 @@ function RoadmapCard({
   isVoting = false
 }) {
   const [showScreenshots, setShowScreenshots] = useState(false);
+  const loading = useLoadingScope();
   const logoUrl = item.icon && item.icon.startsWith("http") ? item.icon : null;
-  const iconSrc = logoUrl ? getProxiedImageUrl(logoUrl, { directHttps: true }) || logoUrl : null;
+  const iconSrc = useProxiedImageUrl(logoUrl) || null;
+  if (loading) return /* @__PURE__ */ jsx(RoadmapCardSkeleton, { size, votes: !!onVote, className });
   if (size === "sm") {
     const compactHref = safeHref(href ?? null);
     const hasVotes = (item.upvotes ?? 0) > 0 || (item.downvotes ?? 0) > 0;
@@ -112,7 +115,7 @@ function RoadmapCard({
       /* @__PURE__ */ jsx(
         "span",
         {
-          className: "flex aspect-square h-12 w-12 shrink-0 items-center justify-center self-start overflow-hidden rounded-md border border-ods-border bg-ods-bg p-1.5 text-ods-accent",
+          className: cn(ROADMAP_COMPACT_SLOT, "flex items-center justify-center bg-ods-bg text-ods-accent"),
           title: typeLabel ?? void 0,
           children: useTypeIcon ? /* @__PURE__ */ jsx(TaskTypeIcon, { customItemId: item.customItemId, className: "h-6 w-6" }) : iconSrc ? /* @__PURE__ */ jsx(
             Image,
@@ -187,120 +190,109 @@ function RoadmapCard({
     }
     return /* @__PURE__ */ jsx(Link, { href: compactHref, target, rel, className: `${COMPACT_CARD_OUTER} ${className ?? ""}`, children: body });
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      className: cn(
-        CONTENT_CARD_FRAME_CLASS,
-        "flex h-full scroll-mt-24 flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-[16px]", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg", children: iconSrc ? /* @__PURE__ */ jsx(
-            Image,
-            {
-              src: iconSrc,
-              alt: `${item.title} logo`,
-              width: 40,
-              height: 40,
-              unoptimized: true,
-              className: "object-contain p-1"
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase text-ods-text-secondary", children: item.title?.substring(0, 2) || "??" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex min-h-[48px] items-center", children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 flex-1 text-ods-text-primary text-h3", children: item.title }) }),
-            /* @__PURE__ */ jsx("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsxs("p", { className: "truncate text-ods-text-secondary text-h5", children: [
-              item.quarter,
-              ", ",
-              item.id
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(
-            StatusBadge,
-            {
-              text: item.status.toUpperCase(),
-              colorScheme: getStatusColorScheme(item.status),
-              className: "border border-ods-border"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(
-          StatusBadge,
+  return /* @__PURE__ */ jsxs("div", { id, className: cn(CONTENT_CARD_FRAME_CLASS, ROADMAP_CARD_BODY, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: ROADMAP_CARD_HEADER, children: [
+      /* @__PURE__ */ jsx("div", { className: cn(ROADMAP_CARD_ICON_BOX, "border border-ods-border bg-ods-bg"), children: iconSrc ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: iconSrc,
+          alt: `${item.title} logo`,
+          width: 40,
+          height: 40,
+          unoptimized: true,
+          className: "object-contain p-1"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase text-ods-text-secondary", children: item.title?.substring(0, 2) || "??" }) }),
+      /* @__PURE__ */ jsxs("div", { className: ROADMAP_CARD_HEADING, children: [
+        /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 flex-1 text-ods-text-primary text-h3", children: item.title }) }),
+        /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_META_ROW, children: /* @__PURE__ */ jsxs("p", { className: "truncate text-ods-text-secondary text-h5", children: [
+          item.quarter,
+          ", ",
+          item.id
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(
+        StatusBadge,
+        {
+          text: item.status.toUpperCase(),
+          colorScheme: getStatusColorScheme(item.status),
+          className: "border border-ods-border"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(
+      StatusBadge,
+      {
+        text: item.status.toUpperCase(),
+        colorScheme: getStatusColorScheme(item.status),
+        className: "border border-ods-border"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: ROADMAP_CARD_SUMMARY_ROW, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-ods-text-secondary text-h4", children: item.description || "" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs("div", { className: ROADMAP_CARD_FOOTER, children: [
+      onVote && /* @__PURE__ */ jsxs("div", { className: cn(ROADMAP_CARD_VOTES, "border border-ods-border bg-ods-card"), children: [
+        /* @__PURE__ */ jsx(
+          RoadmapVoteButton,
           {
-            text: item.status.toUpperCase(),
-            colorScheme: getStatusColorScheme(item.status),
-            className: "border border-ods-border"
+            voteType: "up",
+            count: item.upvotes,
+            color: "var(--color-text-secondary)",
+            className: "rounded-none",
+            isActive: userVote === "up",
+            onClick: () => onVote("up"),
+            disabled: isVoting
           }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-ods-text-secondary text-h4", children: item.description || "" }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-          onVote && /* @__PURE__ */ jsxs("div", { className: "flex h-[48px] overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", children: [
-            /* @__PURE__ */ jsx(
-              RoadmapVoteButton,
-              {
-                voteType: "up",
-                count: item.upvotes,
-                color: "var(--color-text-secondary)",
-                className: "rounded-none",
-                isActive: userVote === "up",
-                onClick: () => onVote("up"),
-                disabled: isVoting
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              RoadmapVoteButton,
-              {
-                voteType: "down",
-                count: item.downvotes,
-                className: "rounded-none",
-                color: "var(--color-text-secondary)",
-                isActive: userVote === "down",
-                onClick: () => onVote("down"),
-                disabled: isVoting
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-            item.assignees && item.assignees.length > 0 ? /* @__PURE__ */ jsx(AvatarStack, { size: "xs", people: assigneePeople(item.assignees), className: "shrink-0" }) : null,
-            item.screenshots && item.screenshots.length > 0 && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "small-legacy",
-                onClick: () => setShowScreenshots(true),
-                leftIcon: /* @__PURE__ */ jsx(ImageClassicIcon, { className: "h-5 w-5" })
-              }
-            ),
-            (() => {
-              const figmaSafe = safeHref(item.figmaUrl);
-              return figmaSafe ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "outline",
-                  size: "small-legacy",
-                  openInNewTab: true,
-                  href: figmaSafe,
-                  leftIcon: /* @__PURE__ */ jsx(FigmaClassicIcon, { className: "h-5 w-5" })
-                }
-              ) : null;
-            })(),
-            item.targetVersion && /* @__PURE__ */ jsx(StatusBadge, { gen: generationTierFromLabel(item.targetVersion), text: item.targetVersion })
-          ] })
-        ] }),
-        item.screenshots && item.screenshots.length > 0 && /* @__PURE__ */ jsx(
-          ImageGalleryModal,
+        ),
+        /* @__PURE__ */ jsx(
+          RoadmapVoteButton,
           {
-            images: item.screenshots,
-            isOpen: showScreenshots,
-            onClose: () => setShowScreenshots(false)
+            voteType: "down",
+            count: item.downvotes,
+            className: "rounded-none",
+            color: "var(--color-text-secondary)",
+            isActive: userVote === "down",
+            onClick: () => onVote("down"),
+            disabled: isVoting
           }
         )
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: ROADMAP_CARD_FOOTER_END, children: [
+        item.assignees && item.assignees.length > 0 ? /* @__PURE__ */ jsx(AvatarStack, { size: "xs", people: assigneePeople(item.assignees), className: "shrink-0" }) : null,
+        item.screenshots && item.screenshots.length > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "small-legacy",
+            onClick: () => setShowScreenshots(true),
+            leftIcon: /* @__PURE__ */ jsx(ImageClassicIcon, { className: "h-5 w-5" })
+          }
+        ),
+        (() => {
+          const figmaSafe = safeHref(item.figmaUrl);
+          return figmaSafe ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "small-legacy",
+              openInNewTab: true,
+              href: figmaSafe,
+              leftIcon: /* @__PURE__ */ jsx(FigmaClassicIcon, { className: "h-5 w-5" })
+            }
+          ) : null;
+        })(),
+        item.targetVersion && /* @__PURE__ */ jsx(StatusBadge, { gen: generationTierFromLabel(item.targetVersion), text: item.targetVersion })
+      ] })
+    ] }),
+    item.screenshots && item.screenshots.length > 0 && /* @__PURE__ */ jsx(
+      ImageGalleryModal,
+      {
+        images: item.screenshots,
+        isOpen: showScreenshots,
+        onClose: () => setShowScreenshots(false)
+      }
+    )
+  ] });
 }
 export {
   RoadmapCard,