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

package/dist/components/categories-cart.js

@@ -1,9 +1,30 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import Link from "../embed-shims/next-link.js";
-import { UnifiedSkeleton } from "./loading/unified-skeleton.js";
-import { VendorIcon } from "./vendor-icon.js";
+import { ICON_SIZE } from "../styles/component-sizes.js";
+import { cn } from "../utils/cn.js";
+import { TextLineSkeleton } from "./loading/unified-skeleton.js";
+import { useLoadingScope } from "./ui/loading-scope.js";
+import { VendorIcon, VendorIconSkeleton } from "./vendor-icon.js";
+const CARD_SHELL_CLASS = "group relative block rounded-lg border border-ods-border bg-ods-card p-3 pb-4 md:p-4 md:pb-6";
+const CARD_STACK_CLASS = "flex flex-col gap-4 md:gap-6";
+const ICON_STRIP_CLASS = "relative h-8 w-full overflow-hidden md:h-10";
+const ICON_ROW_CLASS = "flex w-full gap-2 md:gap-3";
+const VENDOR_ICON_SIZE = "md";
+const VENDOR_ICON_CLASS = "overflow-hidden rounded opacity-60 grayscale filter";
+const INFO_STACK_CLASS = "grid grid-cols-1 gap-2";
+const TITLE_STACK_CLASS = "grid grid-cols-1 gap-1";
+const FOOT_ROW_CLASS = "flex items-start justify-between gap-4 md:items-end md:gap-6";
+const ARROW_BOX_CLASS = "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md border border-ods-border bg-transparent transition-colors md:h-12 md:w-12";
+const ARROW_ICON_CLASS = `${ICON_SIZE.step} text-ods-text-primary transition-colors`;
+const ICON_STRIP_FOLD = 20;
+function StripFades() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 w-4 bg-gradient-to-r from-ods-card to-transparent md:w-6" }),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-ods-card to-transparent md:w-6" })
+  ] });
+}
 function CategoriesCart({
   category,
   vendors = [],
@@ -12,40 +33,19 @@ function CategoriesCart({
   isLoading = false,
   className = ""
 }) {
+  if (useLoadingScope() || isLoading) return /* @__PURE__ */ jsx(CategoriesCartSkeleton, { className });
   return /* @__PURE__ */ jsx(
     Link,
     {
       href: `/vendors?category=${category.slug}`,
-      className: `group relative block rounded-lg border border-ods-border bg-ods-card p-3 pb-4 transition-colors hover:border-ods-accent md:p-4 md:pb-6 ${className}`,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative h-8 w-full overflow-hidden md:h-10", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex w-full gap-2 md:gap-3", children: isLoading ? (
-            // Skeleton loading for vendor icons
-            Array.from({ length: 20 }).map((_, index) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 flex-shrink-0 rounded md:h-10 md:w-10" }, index))
-          ) : vendors && vendors.length > 0 ? vendors.map((vendor) => /* @__PURE__ */ jsx(
-            VendorIcon,
-            {
-              vendor,
-              size: "md",
-              className: "overflow-hidden rounded opacity-60 grayscale filter"
-            },
-            vendor.id
-          )) : (
-            // No vendors found - show placeholder icons
-            Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded bg-ods-border opacity-30 md:h-10 md:w-10",
-                children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-sm bg-ods-skeleton md:h-6 md:w-6" })
-              },
-              index
-            ))
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 w-4 bg-gradient-to-r from-[#212121] to-transparent md:w-6" }),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-[#212121] to-transparent md:w-6" })
+      className: cn(CARD_SHELL_CLASS, "transition-colors hover:border-ods-accent", className),
+      children: /* @__PURE__ */ jsxs("div", { className: CARD_STACK_CLASS, children: [
+        /* @__PURE__ */ jsxs("div", { className: ICON_STRIP_CLASS, children: [
+          /* @__PURE__ */ jsx("div", { className: ICON_ROW_CLASS, children: vendors.map((vendor) => /* @__PURE__ */ jsx(VendorIcon, { vendor, size: VENDOR_ICON_SIZE, className: VENDOR_ICON_CLASS }, vendor.id)) }),
+          /* @__PURE__ */ jsx(StripFades, {})
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: INFO_STACK_CLASS, children: [
+          /* @__PURE__ */ jsxs("div", { className: TITLE_STACK_CLASS, children: [
             /* @__PURE__ */ jsx("h3", { className: "text-ods-text-primary transition-colors text-h3 group-hover:text-ods-accent", children: category.name }),
             /* @__PURE__ */ jsxs("p", { className: "text-ods-text-secondary text-h6", children: [
               subcategoryCount || 0,
@@ -54,14 +54,14 @@ function CategoriesCart({
               " Products"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 md:items-end md:gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: FOOT_ROW_CLASS, children: [
             /* @__PURE__ */ jsx("p", { className: "flex-1 text-ods-text-primary text-h4", children: category.description }),
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md border border-ods-border bg-transparent transition-colors group-hover:bg-ods-accent md:h-12 md:w-12",
+                className: cn(ARROW_BOX_CLASS, "group-hover:bg-ods-accent"),
                 "aria-label": `View ${category.name} category`,
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 text-ods-text-primary transition-colors group-hover:text-ods-text-on-accent md:h-6 md:w-6" })
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: cn(ARROW_ICON_CLASS, "group-hover:text-ods-text-on-accent") })
               }
             )
           ] })
@@ -70,6 +70,28 @@ function CategoriesCart({
     }
   );
 }
+function CategoriesCartSkeleton({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(CARD_SHELL_CLASS, className), "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: CARD_STACK_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { className: ICON_STRIP_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: ICON_ROW_CLASS, children: Array.from({ length: ICON_STRIP_FOLD }, (_, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton icons never reorder
+        /* @__PURE__ */ jsx(VendorIconSkeleton, { size: VENDOR_ICON_SIZE, className: "rounded" }, index)
+      )) }),
+      /* @__PURE__ */ jsx(StripFades, {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: INFO_STACK_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: TITLE_STACK_CLASS, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-40" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-48" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: FOOT_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "flex-1" }),
+        /* @__PURE__ */ jsx("div", { className: ARROW_BOX_CLASS, children: /* @__PURE__ */ jsx(ChevronRight, { className: ARROW_ICON_CLASS }) })
+      ] })
+    ] })
+  ] }) });
+}
 export {
-  CategoriesCart
+  CategoriesCart,
+  CategoriesCartSkeleton
 };

package/dist/components/category-card.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 function CategoryCard({ name, description, categoryCount, productCount, icons = [] }) {
   return /* @__PURE__ */ jsxs("article", { className: "box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-center justify-center gap-6", children: (icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-ods-skeleton", children: icon }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-center justify-center gap-6", children: (icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-ods-border", children: icon }, i)) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-2 text-left text-ods-text-primary text-h2", children: name }),
       /* @__PURE__ */ jsxs("div", { className: "mb-4 text-left text-ods-text-secondary text-h6", children: [

package/dist/components/chat/chat-attachment-bar.js

@@ -128,7 +128,7 @@ function AttachmentChip({ attachment, onRemove, disabled, size = "default" }) {
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("div", { className: "truncate text-ods-text-primary text-h6", title: file.name, children: file.name }),
           (!compact || status !== "ready") && /* @__PURE__ */ jsxs("div", { className: "text-ods-text-muted text-h6", children: [
-            status === "sniffing" && "Checking\u2026",
+            status === "sniffing" && "Checking the file",
             status === "uploading" && `${progress}% \xB7 ${formatFileSize(file.size)}`,
             status === "ready" && formatFileSize(file.size),
             status === "error" && /* @__PURE__ */ jsx("span", { className: "text-ods-error", title: errorMessage, children: errorMessage ?? "Upload failed" })

package/dist/components/chat/chat-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-container.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAWjE,OAAO,KAAK,EAA4B,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6B7F,QAAA,MAAM,aAAa,+GAejB,CAAC;AAIH,QAAA,MAAM,UAAU,4GA2Kf,CAAC;AAGF,QAAA,MAAM,WAAW,2HAQhB,CAAC;AAGF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;uCAEmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;+DAE2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,4GAoBf,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chat-container.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAYjE,OAAO,KAAK,EAA4B,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6B7F,QAAA,MAAM,aAAa,+GAejB,CAAC;AAIH,QAAA,MAAM,UAAU,4GA2Kf,CAAC;AAGF,QAAA,MAAM,WAAW,2HAQhB,CAAC;AAGF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;uCAEmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;+DAE2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,4GAoBf,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chat/chat-container.js

@@ -7,6 +7,7 @@ import { PlusCircleIcon } from "../icons-v2-generated/signs-and-symbols/plus-cir
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
+import { LIVE_PULSE_CLASS } from "../ui/skeleton-surface.js";
 import { SquareAvatar as Avatar } from "../ui/square-avatar.js";
 import { TicketStatusTag, resolveStatusTagProps } from "../ui/ticket-status-tag.js";
 import { MspOrganizationCard } from "./msp-organization-card.js";
@@ -19,7 +20,7 @@ const ConnectionIndicator = ({ status }) => {
       case "connected":
         return "bg-ods-success";
       case "connecting":
-        return "bg-ods-warning animate-pulse";
+        return `bg-ods-warning ${LIVE_PULSE_CLASS}`;
       case "disconnected":
         return "bg-ods-error";
       default:

package/dist/components/chat/chat-ticket-list.d.ts

@@ -10,5 +10,4 @@ export interface ChatTicketListProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const ChatTicketList: import("react").ForwardRefExoticComponent<ChatTicketListProps & import("react").RefAttributes<HTMLDivElement>>;
 export { ChatTicketList };
-export type { ChatTicketItemData };
 //# sourceMappingURL=chat-ticket-list.d.ts.map

package/dist/components/chat/chat-ticket-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-ticket-list.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-ticket-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAE1F,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,gHA8CnB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"chat-ticket-list.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-ticket-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAE1F,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,gHA8CnB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/chat/chat-turn.d.ts

@@ -12,12 +12,42 @@ export interface ChatTurnProps {
     /** What was said. A string is drawn as the message text; a node is drawn as given. */
     children?: ReactNode;
     className?: string;
+    /**
+     * The loading state a loading scope draws, the turn's own skeleton: the picture's size in px (none without it),
+     * the message's line count (1 by default) and whether a time is shown.
+     */
+    skeleton?: Omit<ChatTurnSkeletonProps, 'nameSize' | 'className'>;
 }
+/** The turn's layout, read by the turn and by its skeleton, so the skeleton is the turn's size. */
+export declare const TURN_ROW_CLASS = "flex min-w-0 items-start gap-[var(--spacing-system-sf)]";
+export declare const TURN_BODY_CLASS = "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]";
 /**
  * THE turn of a scripted conversation (an example card, a step of a demo): the
  * speaker's picture, then beside it their name, the time at the far end, and
  * what was said under them. Names read as they do everywhere else: the body
  * face, the text colour.
  */
-export declare function ChatTurn({ avatar, name, meta, nameSize, time, children, className }: ChatTurnProps): import("react").JSX.Element;
+export declare function ChatTurn({ avatar, name, meta, nameSize, time, children, className, skeleton, }: ChatTurnProps): import("react").JSX.Element;
+export interface ChatTurnSkeletonProps {
+    /** The picture's size in px; no picture without it. */
+    avatarPx?: number;
+    /** The picture's corner, as the caller draws it (a person's round photo by default, a square logo). */
+    avatarShape?: 'square' | 'round';
+    nameSize?: 'default' | 'quiet';
+    /** How many lines the message takes. */
+    lines?: 1 | 2 | 3;
+    /** Whether the name row carries a time at its far end. */
+    time?: boolean;
+    /** Whether the name carries a meta line; a string is static copy, drawn for real. */
+    meta?: boolean | string;
+    className?: string;
+}
+/**
+ * The turn's name row while it is read: a bar at the name's type step, the meta (stacked under it below
+ * `content-md`, beside it from there, as the turn draws it) and the time at the far end. Read by the turn's
+ * skeleton and by every card that draws a turn of its own.
+ */
+export declare function ChatTurnNameSkeleton({ nameSize, meta, time, }: Pick<ChatTurnSkeletonProps, 'nameSize' | 'meta' | 'time'>): import("react").JSX.Element;
+/** A turn while it is read: the picture's box, a bar at the name's type step, and a bar per message line. */
+export declare function ChatTurnSkeleton({ avatarPx, avatarShape, nameSize, lines, time, meta, className, }: ChatTurnSkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=chat-turn.d.ts.map

package/dist/components/chat/chat-turn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-turn.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-turn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC/B,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAoB,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BA2B9G"}
+{"version":3,"file":"chat-turn.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-turn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,aAAa;IAC5B,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC/B,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,UAAU,GAAG,WAAW,CAAC,CAAC;CAClE;AAED,mGAAmG;AACnG,eAAO,MAAM,cAAc,4DAA4D,CAAC;AACxF,eAAO,MAAM,eAAe,iEAAiE,CAAC;AAe9F;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAoB,EACpB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,+BA6Bf;AAED,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uGAAuG;IACvG,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC/B,wCAAwC;IACxC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAoB,EACpB,IAAY,EACZ,IAAY,GACb,EAAE,IAAI,CAAC,qBAAqB,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC,+BAc3D;AAED,6GAA6G;AAC7G,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAqB,EACrB,QAAoB,EACpB,KAAS,EACT,IAAY,EACZ,IAAY,EACZ,SAAS,GACV,EAAE,qBAAqB,+BAmBvB"}

package/dist/components/chat/chat-turn.js

@@ -1,30 +1,96 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-function ChatTurn({ avatar, name, meta, nameSize = "default", time, children, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-start gap-[var(--spacing-system-sf)]", className), children: [
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { SquareAvatarSkeleton } from "../ui/square-avatar.js";
+const TURN_ROW_CLASS = "flex min-w-0 items-start gap-[var(--spacing-system-sf)]";
+const TURN_BODY_CLASS = "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]";
+const NAME_ROW_CLASS = "flex min-w-0 items-baseline gap-[var(--spacing-system-xsf)]";
+const NAME_GROUP_CLASS = "flex min-w-0 flex-1 flex-col content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]";
+const META_CLASS = "min-w-0 text-ods-text-secondary text-h6 content-md:truncate";
+const NAME_TYPE = { default: "h4", quiet: "h6" };
+const NAME_CLASS = { default: "text-ods-text-primary text-h4", quiet: "text-ods-text-secondary text-h6" };
+const TIME_CLASS = "shrink-0 text-ods-text-secondary text-h6";
+const MESSAGE_CLASS = "m-0 whitespace-pre-wrap text-ods-text-primary text-h4";
+function ChatTurn({
+  avatar,
+  name,
+  meta,
+  nameSize = "default",
+  time,
+  children,
+  className,
+  skeleton
+}) {
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(
+      ChatTurnSkeleton,
+      {
+        nameSize,
+        time: skeleton?.time ?? time != null,
+        meta: skeleton?.meta ?? !!meta,
+        lines: skeleton?.lines,
+        avatarPx: skeleton?.avatarPx,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(TURN_ROW_CLASS, className), children: [
     avatar && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: avatar }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-[var(--spacing-system-xsf)]", children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-[var(--spacing-system-xsf)]", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "min-w-0 truncate",
-                nameSize === "quiet" ? "text-ods-text-secondary text-h6" : "text-ods-text-primary text-h4"
-              ),
-              children: name
-            }
-          ),
-          meta && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-ods-text-secondary text-h6", children: meta })
+    /* @__PURE__ */ jsxs("div", { className: TURN_BODY_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: NAME_ROW_CLASS, children: [
+        /* @__PURE__ */ jsxs("span", { className: NAME_GROUP_CLASS, children: [
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", NAME_CLASS[nameSize]), children: name }),
+          meta && /* @__PURE__ */ jsx("span", { className: META_CLASS, children: meta })
         ] }),
-        time && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ods-text-secondary text-h6", children: time })
+        time && /* @__PURE__ */ jsx("span", { className: TIME_CLASS, children: time })
       ] }),
-      typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: "m-0 whitespace-pre-wrap text-ods-text-primary text-h4", children }) : children
+      typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: MESSAGE_CLASS, children }) : children
+    ] })
+  ] });
+}
+function ChatTurnNameSkeleton({
+  nameSize = "default",
+  meta = false,
+  time = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: NAME_ROW_CLASS, children: [
+    /* @__PURE__ */ jsxs("span", { className: NAME_GROUP_CLASS, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: NAME_TYPE[nameSize], className: "w-24" }),
+      typeof meta === "string" ? /* @__PURE__ */ jsx("span", { className: META_CLASS, children: meta }) : meta && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-20" })
+    ] }),
+    time && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-12 shrink-0" })
+  ] });
+}
+function ChatTurnSkeleton({
+  avatarPx,
+  avatarShape = "round",
+  nameSize = "default",
+  lines = 1,
+  time = false,
+  meta = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(TURN_ROW_CLASS, className), "aria-hidden": true, children: [
+    avatarPx ? /* @__PURE__ */ jsx(SquareAvatarSkeleton, { sizePx: avatarPx, variant: avatarShape }) : null,
+    /* @__PURE__ */ jsxs("div", { className: TURN_BODY_CLASS, children: [
+      /* @__PURE__ */ jsx(ChatTurnNameSkeleton, { nameSize, meta, time }),
+      /* @__PURE__ */ jsx("div", { children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(
+        TextLineSkeleton,
+        {
+          type: "h4",
+          className: i === lines - 1 && lines > 1 ? "w-2/3" : "w-full"
+        },
+        i
+      )) })
     ] })
   ] });
 }
 export {
-  ChatTurn
+  ChatTurn,
+  ChatTurnNameSkeleton,
+  ChatTurnSkeleton,
+  TURN_BODY_CLASS,
+  TURN_ROW_CLASS
 };

package/dist/components/chat/embeddable-chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embeddable-chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat/embeddable-chat.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"embeddable-chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat/embeddable-chat.tsx"],"names":[],"mappings":"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"}

package/dist/components/chat/embeddable-chat.js

@@ -14,6 +14,7 @@ import { useRouter } from "../../embed-shims/next-navigation.js";
 import { useIsHydrated } from "../../hooks/ui/use-is-hydrated.js";
 import { cn } from "../../utils/cn.js";
 import { formatCitationIndices } from "../../utils/source-grouping.js";
+import { getSourceIconName } from "../../utils/source-icons.js";
 import { AgentMark } from "../agent-mark.js";
 import { EntityIcon } from "../icon-display.js";
 import {
@@ -79,7 +80,6 @@ import { mapHostMessage, pruneTimestampCache } from "./utils/host-message.js";
 import { resolveIcon } from "./utils/icon-library.js";
 import { computeIsNewTab, newTabAnchorAttrs } from "./utils/nav-anchor-props.js";
 import { formatSingularLookupInvocation } from "./utils/slash-dispatch-utils.js";
-import { getSourceIconName } from "./utils/source-icons.js";
 import { resolveSourceRowCTA, sourceRowCtxFromRuntime } from "./utils/source-row-cta.js";
 const HISTORY_RAIL_WIDTH = 320;
 const SPLIT_MIN_WIDTH = HISTORY_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;

package/dist/components/chat/entity-cards/admin-content-card-grid.d.ts

@@ -1,21 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 /** THE admin card grid: columns and gap shared by the live grid and its skeleton. */
 export declare const ADMIN_CONTENT_CARD_GRID_CLASS = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-system-lf)]";
-/**
- * One `AdminContentCard reserveRows`-shaped placeholder. It mirrors that card box
- * for box (3:2 cover, then a `gap-3 p-5` column: two-line title, subtitle line,
- * two-line summary, 28px badges row, meta line, bordered actions row), each text
- * row sized in its own typography's line height, so a skeleton, a real card and a
- * reserved slot are the same height at every breakpoint. `p-5` has no ODS token
- * (20px); it is the card's own padding and must match it exactly.
- */
-export declare function AdminContentCardSkeleton({ className, actions, subtitleRow, }: {
-    className?: string;
-    /** Matches the card's `subtitleRow`: off for a card type that has no subtitle line. */
-    subtitleRow?: boolean;
-    /** The bordered actions row. Off for a card rendered without `actions` (a read-only rail card). */
-    actions?: boolean;
-}): import("react").JSX.Element;
 export interface AdminContentCardGridSkeletonProps {
     /** How many placeholder cards: one page. */
     count?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"admin-content-card-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/admin-content-card-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,qFAAqF;AACrF,eAAO,MAAM,6BAA6B,kFACuC,CAAC;AAElF;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,OAAc,EACd,WAAkB,GACnB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BA8BA;AAED,MAAM,WAAW,iCAAiC;IAChD,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,KAAU,EACV,QAAmC,EACnC,SAAS,EACT,KAAiB,EACjB,MAAa,GACd,EAAE,iCAAiC,+BAanC;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACnC,8FAA8F;IAC9F,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAmC,EACnC,SAAS,EACT,YAAY,EACZ,aAAa,GACd,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BA2C9B"}
+{"version":3,"file":"admin-content-card-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/admin-content-card-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,qFAAqF;AACrF,eAAO,MAAM,6BAA6B,kFACuC,CAAC;AAElF,MAAM,WAAW,iCAAiC;IAChD,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,KAAU,EACV,QAAmC,EACnC,SAAS,EACT,KAAiB,EACjB,MAAa,GACd,EAAE,iCAAiC,+BAanC;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACnC,8FAA8F;IAC9F,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAmC,EACnC,SAAS,EACT,YAAY,EACZ,aAAa,GACd,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BA2C9B"}

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

@@ -2,43 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { LoadingRegion } from "../../loading/loading-region.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { AdminContentCardSkeleton } from "./admin-content-card.js";
 const ADMIN_CONTENT_CARD_GRID_CLASS = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-system-lf)]";
-function AdminContentCardSkeleton({
-  className,
-  actions = true,
-  subtitleRow = true
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex h-full flex-col overflow-hidden rounded-2xl border border-ods-border bg-transparent",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "aspect-[3/2] w-full shrink-0" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-sf)] p-5", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[2lh] w-full rounded text-h3" }),
-          subtitleRow && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-1/2 rounded text-h6" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[2lh] w-full rounded text-h6" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex h-7 items-center gap-[var(--spacing-system-xsf)]", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-20 rounded-full" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-24 rounded-full" })
-          ] }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-32 rounded text-h6" }),
-          actions && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between border-t border-ods-border pt-[var(--spacing-system-sf)]", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-24 rounded" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-system-xsf)]", children: [
-              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-20 rounded" }),
-              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-20 rounded" })
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
-}
 function AdminContentCardGridSkeleton({
   count = 12,
   Skeleton = AdminContentCardSkeleton,
@@ -96,6 +61,5 @@ function AdminContentCardGrid({
 export {
   ADMIN_CONTENT_CARD_GRID_CLASS,
   AdminContentCardGrid,
-  AdminContentCardGridSkeleton,
-  AdminContentCardSkeleton
+  AdminContentCardGridSkeleton
 };

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

@@ -43,5 +43,20 @@ interface AdminContentCardProps {
     className?: string;
 }
 export declare function AdminContentCard({ imageUrl, placeholderUrl, title, summary, subtitle, platforms, badges, meta, actions, reserveRows, subtitleRow, className, }: AdminContentCardProps): React.JSX.Element;
+/**
+ * One `AdminContentCard reserveRows`-shaped placeholder, in the card's own boxes: the 3:2 cover, a two-line `text-h3`
+ * title, the subtitle line, a two-line `text-h6` summary, the 28px badges row, the meta line and the bordered actions
+ * row. The actions are the caller's own controls (static) when it passes them, bars otherwise.
+ */
+export declare function AdminContentCardSkeleton({ className, actions, subtitleRow, }: {
+    className?: string;
+    /** Matches the card's `subtitleRow`: off for a card type that has no subtitle line. */
+    subtitleRow?: boolean;
+    /**
+     * The bordered actions row: `true` draws button bars, a node draws those controls for real, `false` (a read-only
+     * rail card) draws none.
+     */
+    actions?: boolean | React.ReactNode;
+}): React.JSX.Element;
 export {};
 //# sourceMappingURL=admin-content-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"admin-content-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/admin-content-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,qBAAqB;IAC7B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;8EAE0E;IAC1E,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sBAAsB;IACtB,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,wDAAwD;IACxD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,WAAkB,EAClB,SAAS,GACV,EAAE,qBAAqB,qBAqFvB"}
+{"version":3,"file":"admin-content-card.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/entity-cards/admin-content-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,qBAAqB;IAC7B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;8EAE0E;IAC1E,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sBAAsB;IACtB,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,wDAAwD;IACxD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,WAAkB,EAClB,SAAS,GACV,EAAE,qBAAqB,qBAqFvB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,OAAc,EACd,WAAkB,GACnB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;CACrC,qBAiCA"}

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

@@ -3,10 +3,19 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Image from "../../../embed-shims/next-image.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 { PlatformBadge } from "../../features/platform-badge.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
-import { CONTENT_CARD_FRAME_CLASS } from "./content-card-frame.js";
+import { PlatformBadge, PlatformBadgeSkeleton } from "../../features/platform-badge.js";
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from "./content-card-frame.js";
+const ADMIN_CARD_FRAME = "flex h-full flex-col";
+const ADMIN_CARD_COVER = `relative ${MEDIA_ASPECT.photo} w-full shrink-0 overflow-hidden`;
+const ADMIN_CARD_BODY = "flex flex-1 flex-col gap-3 p-5";
+const ADMIN_CARD_BADGES = "flex flex-wrap items-center gap-2";
+const ADMIN_CARD_BADGES_RESERVED = "min-h-7";
+const ADMIN_CARD_META = "flex items-center gap-3 text-ods-text-secondary text-h6";
+const ADMIN_CARD_ACTIONS = "mt-auto flex items-center justify-between border-t border-ods-border pt-3";
 function AdminContentCard({
   imageUrl,
   placeholderUrl,
@@ -26,8 +35,11 @@ function AdminContentCard({
   const displayUrl = imageUrl && !imageError ? imageUrl : placeholderUrl;
   const imageLoaded = Boolean(displayUrl) && loadedUrl === displayUrl;
   const imageBgColor = useImageEdgeColor(displayUrl || null, "transparent");
-  return /* @__PURE__ */ jsxs("article", { className: cn(CONTENT_CARD_FRAME_CLASS, "flex h-full flex-col", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "relative aspect-[3/2] w-full shrink-0 overflow-hidden", style: { backgroundColor: imageBgColor }, children: displayUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(AdminContentCardSkeleton, { className, subtitleRow, actions: actions ? actions : false });
+  }
+  return /* @__PURE__ */ jsxs("article", { className: cn(CONTENT_CARD_FRAME_CLASS, ADMIN_CARD_FRAME, className), children: [
+    /* @__PURE__ */ jsx("div", { className: ADMIN_CARD_COVER, style: { backgroundColor: imageBgColor }, children: displayUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
       !imageLoaded && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "absolute inset-0 h-full rounded-none" }),
       /* @__PURE__ */ jsx(
         Image,
@@ -48,11 +60,11 @@ function AdminContentCard({
         }
       )
     ] }) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-ods-bg" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: ADMIN_CARD_BODY, children: [
       /* @__PURE__ */ jsx("h3", { className: cn("line-clamp-2 break-words text-ods-text-primary text-h3", reserveRows && "min-h-[2lh]"), children: title }),
       (subtitle || reserveRows && subtitleRow) && /* @__PURE__ */ jsx("p", { className: cn("truncate text-ods-text-secondary text-h6", reserveRows && "min-h-[1lh]"), children: subtitle }),
       (summary || reserveRows) && /* @__PURE__ */ jsx("p", { className: cn("line-clamp-2 text-ods-text-secondary text-h6", reserveRows && "min-h-[2lh]"), children: summary }),
-      (Number(platforms?.length) > 0 || badges || reserveRows) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", reserveRows && "min-h-7"), children: [
+      (Number(platforms?.length) > 0 || badges || reserveRows) && /* @__PURE__ */ jsxs("div", { className: cn(ADMIN_CARD_BADGES, reserveRows && ADMIN_CARD_BADGES_RESERVED), children: [
         platforms?.map((p) => /* @__PURE__ */ jsx(
           PlatformBadge,
           {
@@ -63,11 +75,41 @@ function AdminContentCard({
         )),
         badges
       ] }),
-      (meta || reserveRows) && /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3 text-ods-text-secondary text-h6", reserveRows && "min-h-[1lh]"), children: meta }),
-      actions && /* @__PURE__ */ jsx("div", { className: "mt-auto flex items-center justify-between border-t border-ods-border pt-3", children: actions })
+      (meta || reserveRows) && /* @__PURE__ */ jsx("div", { className: cn(ADMIN_CARD_META, reserveRows && "min-h-[1lh]"), children: meta }),
+      actions && /* @__PURE__ */ jsx("div", { className: ADMIN_CARD_ACTIONS, children: actions })
+    ] })
+  ] });
+}
+function AdminContentCardSkeleton({
+  className,
+  actions = true,
+  subtitleRow = true
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, ADMIN_CARD_FRAME, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(ADMIN_CARD_COVER, "rounded-none") }),
+    /* @__PURE__ */ jsxs("div", { className: ADMIN_CARD_BODY, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", lines: 2, className: "w-full" }),
+      subtitleRow && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", lines: 2, className: "w-full" }),
+      /* @__PURE__ */ jsxs("div", { className: cn(ADMIN_CARD_BADGES, ADMIN_CARD_BADGES_RESERVED), children: [
+        /* @__PURE__ */ jsx(PlatformBadgeSkeleton, { size: "xs" }),
+        /* @__PURE__ */ jsx(PlatformBadgeSkeleton, { size: "xs" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: ADMIN_CARD_META, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-32" }) }),
+      actions === true ? /* @__PURE__ */ jsxs("div", { className: ADMIN_CARD_ACTIONS, children: [
+        /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "small-legacy" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-system-xsf)]", children: [
+          /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "small-legacy", className: "w-20" }),
+          /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "small-legacy", className: "w-20" })
+        ] })
+      ] }) : actions ? (
+        // The caller's own controls, drawn as they are but never focused while the card is a skeleton.
+        /* @__PURE__ */ jsx("div", { className: ADMIN_CARD_ACTIONS, inert: true, children: actions })
+      ) : null
     ] })
   ] });
 }
 export {
-  AdminContentCard
+  AdminContentCard,
+  AdminContentCardSkeleton
 };