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

package/dist/{cloud-tenants-6PSTDE3F.cjs → cloud-tenants-U2KMEIO7.cjs}

@@ -9,25 +9,25 @@ var _chunkSTEJZPIOcjs = require('./chunk-STEJZPIO.cjs');
 var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
-var _chunkFMH2DYBCcjs = require('./chunk-FMH2DYBC.cjs');
-require('./chunk-ZCU2PYCW.cjs');
-require('./chunk-GY2JESOC.cjs');
-require('./chunk-WA4X55XY.cjs');
+var _chunkVRDHAR3Xcjs = require('./chunk-VRDHAR3X.cjs');
+require('./chunk-MPTMT773.cjs');
+require('./chunk-RB7VLVMD.cjs');
+require('./chunk-ZV45VS6K.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-XCH7SPGI.cjs');
-require('./chunk-FQSXZC2K.cjs');
+require('./chunk-XVFM6SJA.cjs');
+require('./chunk-2JRSYWFP.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-RO72PRQI.cjs');
-require('./chunk-YUMFVQIN.cjs');
-require('./chunk-T5FRANE6.cjs');
-require('./chunk-74ALTXXC.cjs');
-require('./chunk-BIA77I6B.cjs');
-require('./chunk-3RFQPQ7Z.cjs');
-require('./chunk-GZKWF6NH.cjs');
-require('./chunk-EFTUFJS2.cjs');
+require('./chunk-ZRDMGMY7.cjs');
+require('./chunk-C42WIUH6.cjs');
+require('./chunk-7VI7TOGI.cjs');
+require('./chunk-YL6ZB2SR.cjs');
+require('./chunk-GTONIRJU.cjs');
+require('./chunk-RNLRS4ID.cjs');
+require('./chunk-XZ6DKGT4.cjs');
+require('./chunk-LELS4XMX.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
 require('./chunk-KHPX3KU4.cjs');
@@ -1816,20 +1816,20 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-NET74KSQ.cjs');
-require('./chunk-3RYIF4OW.cjs');
-require('./chunk-SVP6DJFL.cjs');
+require('./chunk-TZ4GKUO2.cjs');
+require('./chunk-XXJL5GY3.cjs');
+require('./chunk-57B5RUYD.cjs');
 require('./chunk-JKX2C3I2.cjs');
 require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-NS64LMVE.cjs');
-require('./chunk-22XAPV6N.cjs');
-require('./chunk-OJJ4RL2T.cjs');
-require('./chunk-63N4FN5V.cjs');
-require('./chunk-M7YZGRAV.cjs');
-require('./chunk-EQZXJUYV.cjs');
+require('./chunk-FZB4RMRK.cjs');
+require('./chunk-DGNBXZXT.cjs');
+require('./chunk-R3JX4MXD.cjs');
+require('./chunk-SETFUCZA.cjs');
+require('./chunk-AAECWUNV.cjs');
+require('./chunk-JTSUAHDL.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
 require('./chunk-OOYBIS7D.cjs');
@@ -1838,29 +1838,25 @@ require('./chunk-6VOOPMP5.cjs');
 require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
 require('./chunk-BLH2SFOO.cjs');
-require('./chunk-I5MSCD57.cjs');
+require('./chunk-3LW5TD54.cjs');
 require('./chunk-ASMNNSUQ.cjs');
 require('./chunk-CW3ML76U.cjs');
-require('./chunk-MWLD6NXV.cjs');
-require('./chunk-R3TWQ3ZJ.cjs');
+require('./chunk-VFZFCRAL.cjs');
+require('./chunk-5P4TDV7V.cjs');
 require('./chunk-DGFDBPO7.cjs');
-require('./chunk-HOTM4UM6.cjs');
+require('./chunk-E76ONBKF.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
-require('./chunk-HTRILBJD.cjs');
-require('./chunk-K6VWTUCH.cjs');
-require('./chunk-AKK3EO37.cjs');
+require('./chunk-YXDHVHB2.cjs');
+require('./chunk-FL2RMEDX.cjs');
+require('./chunk-XIFEZ2JT.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
-require('./chunk-NO5UJLLQ.cjs');
-require('./chunk-2QMBXGMQ.cjs');
+require('./chunk-WEANWBJH.cjs');
+require('./chunk-XFRBEXQN.cjs');
+require('./chunk-TF5D5MNO.cjs');
 require('./chunk-V45KLJQP.cjs');
+require('./chunk-65VVJSQZ.cjs');
 require('./chunk-KHKPLOU4.cjs');
-require('./chunk-L4UI63K6.cjs');
-require('./chunk-OF336YWG.cjs');
-require('./chunk-3LU4UFPS.cjs');
-require('./chunk-RB6BSE3O.cjs');
-require('./chunk-H3RYUTND.cjs');
-require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/cloud-tenants.tsx
 var _react = require('react');
@@ -1920,7 +1916,7 @@ var getHref = () => "#";
 function CloudTenantsScreen(_props) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildCloudTenantsFixture(cast), [cast]);
-  const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFMH2DYBCcjs.TenantsTableView, { rows: fixture.rows, getHref, now: fixture.now });
+  const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.TenantsTableView, { rows: fixture.rows, getHref, now: fixture.now });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-l)]", children: table });
 }
 

package/dist/components/agent-identity.d.ts

@@ -1,6 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { AGENT_IDENTITIES_API_PATH, type AgentIdentityIcon, type AgentIdentityIcons } from '../hooks/use-agent-identities';
-export { AGENT_IDENTITIES_API_PATH, type AgentIdentityIcon, type AgentIdentityIcons };
+import { type AgentIdentityIcon, type AgentIdentityIcons } from '../hooks/use-agent-identities';
 /**
  * The colour an agent's GLYPH is drawn in when its identity names none: the
  * theme's text colour, the same wherever the mark sits. An agent's mark is one

package/dist/components/agent-identity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-identity.d.ts","sourceRoot":"","sources":["../../src/components/agent-identity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8D,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvH,OAAO,EACL,yBAAyB,EAEzB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,+BAA+B,CAAC;AAIvC,OAAO,EAAE,yBAAyB,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAC;AAEtF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,8BAA8B,CAAC;AA2B/D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAoC,EACpC,OAAc,EACd,QAAQ,GACT,EAAE;IACD,0GAA0G;IAC1G,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAOA;AAED,6FAA6F;AAC7F,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAWnG;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CASzF;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAEvF"}
+{"version":3,"file":"agent-identity.d.ts","sourceRoot":"","sources":["../../src/components/agent-identity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8D,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvH,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,+BAA+B,CAAC;AAIvC;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,8BAA8B,CAAC;AA2B/D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAoC,EACpC,OAAc,EACd,QAAQ,GACT,EAAE;IACD,0GAA0G;IAC1G,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAOA;AAED,6FAA6F;AAC7F,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAWnG;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CASzF;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAEvF"}

package/dist/components/agent-identity.js

@@ -60,7 +60,6 @@ function useAgentTint(slug) {
 }
 export {
   AGENT_GLYPH_COLOR,
-  AGENT_IDENTITIES_API_PATH,
   AGENT_PICTURE_CLASS,
   AgentIdentityProvider,
   useAgentAccents,

package/dist/components/agent-mark.d.ts

@@ -31,12 +31,10 @@ export interface AgentAvatarProps {
     size: number;
     className?: string;
 }
+export declare function AgentAvatar({ agent, size, className }: AgentAvatarProps): import("react").JSX.Element;
 /**
- * THE picture of an AI agent wherever a page shows one speaking, acting or
- * named: the agent's mark (`AgentMark`, its identity's icon) in a round frame of
- * a given size. The twin of a person's avatar. A caller names the agent by its
- * slug and never a picture, so an agent looks the same in a card, a log row, a
- * command bar and an example, and a new icon in its identity reaches all of them.
+ * An agent's avatar while the agent is not known yet (the record that names it is read): the avatar's own round
+ * frame at the same `size`, so the picture takes its place without moving anything.
  */
-export declare function AgentAvatar({ agent, size, className }: AgentAvatarProps): import("react").JSX.Element;
+export declare function AgentAvatarSkeleton({ size, className }: Pick<AgentAvatarProps, 'size' | 'className'>): import("react").JSX.Element;
 //# sourceMappingURL=agent-mark.d.ts.map

package/dist/components/agent-mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-mark.d.ts","sourceRoot":"","sources":["../../src/components/agent-mark.tsx"],"names":[],"mappings":"AASA,uGAAuG;AACvG,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,SAAc,EAAE,KAAyB,EAAE,EAAE,cAAc,+BAmB7F;AAED,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BASvE"}
+{"version":3,"file":"agent-mark.d.ts","sourceRoot":"","sources":["../../src/components/agent-mark.tsx"],"names":[],"mappings":"AAUA,uGAAuG;AACvG,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,SAAc,EAAE,KAAyB,EAAE,EAAE,cAAc,+BAmB7F;AAED,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAMvE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,WAAW,CAAC,+BAEpG"}

package/dist/components/agent-mark.js

@@ -5,6 +5,7 @@ import Image from "../embed-shims/next-image.js";
 import { cn } from "../utils/cn.js";
 import { AGENT_GLYPH_COLOR, AGENT_PICTURE_CLASS, useAgentIdentityIcon } from "./agent-identity.js";
 import { resolveIcon } from "./chat/utils/icon-library.js";
+import { UnifiedSkeleton } from "./loading/unified-skeleton.js";
 const MARK_IMAGE_SIZES = "96px";
 function AgentMark({ agent, className = "", color = AGENT_GLYPH_COLOR }) {
   const identity = useAgentIdentityIcon(agent);
@@ -21,17 +22,15 @@ function AgentMark({ agent, className = "", color = AGENT_GLYPH_COLOR }) {
   }
   return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className });
 }
+const AGENT_AVATAR_FRAME_CLASS = "inline-flex shrink-0 overflow-hidden rounded-full";
 function AgentAvatar({ agent, size, className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex shrink-0 overflow-hidden rounded-full", className),
-      style: { width: size, height: size },
-      children: /* @__PURE__ */ jsx(AgentMark, { agent, className: "h-full w-full" })
-    }
-  );
+  return /* @__PURE__ */ jsx("span", { className: cn(AGENT_AVATAR_FRAME_CLASS, className), style: { width: size, height: size }, children: /* @__PURE__ */ jsx(AgentMark, { agent, className: "h-full w-full" }) });
+}
+function AgentAvatarSkeleton({ size, className }) {
+  return /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(AGENT_AVATAR_FRAME_CLASS, className), width: size, height: size });
 }
 export {
   AgentAvatar,
+  AgentAvatarSkeleton,
   AgentMark
 };

package/dist/components/authors/author-detail-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"author-detail-view.d.ts","sourceRoot":"","sources":["../../../src/components/authors/author-detail-view.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAO/D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,aAAa,CAAC;IACtB,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,qBAAqB,qBAgErG"}
+{"version":3,"file":"author-detail-view.d.ts","sourceRoot":"","sources":["../../../src/components/authors/author-detail-view.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAU/D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,aAAa,CAAC;IACtB,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,qBAAqB,qBA+FrG"}

package/dist/components/authors/author-detail-view.js

@@ -1,28 +1,45 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useChatRuntime } from "../../contexts/chat-runtime-context.js";
 import Image from "../../embed-shims/next-image.js";
+import { AVATAR_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { formatBioText } from "../../utils/format.js";
-import { getProxiedImageUrl } from "../../utils/image-proxy.js";
-import { SocialIconRow } from "../social-icon-row.js";
+import { useProxiedImageUrl } from "../chat/hooks/use-proxied-image-url.js";
+import { InteractiveSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { SocialIconRow, socialIconRowClass } from "../social-icon-row.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { SquareAvatar } from "../ui/square-avatar.js";
 import { StatusBadge } from "../ui/status-badge.js";
+const VIEW_CLASS = "flex flex-col gap-5 md:gap-6";
+const IDENTITY_ROW_CLASS = "flex w-full items-start gap-6";
+const AVATAR_BOX_CLASS = `relative ${AVATAR_SIZE.profile} shrink-0`;
+const IDENTITY_TEXT_CLASS = "flex min-w-0 flex-col justify-center gap-2";
+const NAME_CLASS = "truncate leading-none text-ods-text-primary text-h2";
+const SUBTITLE_CLASS = "truncate text-h4 leading-none text-ods-text-secondary";
+const BIO_CLASS = "text-ods-text-secondary text-h6";
+const TOPICS_CLASS = "flex flex-wrap gap-2";
+const AUTHOR_SKELETON_SOCIALS = 5;
 function AuthorDetailView({ author, proxyImageUrl, children, className }) {
-  const runtime = useChatRuntime();
-  const proxiedAvatar = author.avatarUrl ? proxyImageUrl ? proxyImageUrl(author.avatarUrl) : getProxiedImageUrl(author.avatarUrl, {
-    proxyPrefix: runtime?.endpoints.imageProxyUrlPrefix,
-    skipDomains: runtime?.endpoints.imageProxySkipDomains,
-    directHttps: true
-  }) ?? author.avatarUrl : null;
+  const loading = useLoadingScope();
+  const proxiedAvatar = useProxiedImageUrl(loading ? null : author.avatarUrl, { proxyImageUrl }) || null;
   const subtitle = [author.jobTitle, author.company].filter(Boolean).join(" @ ");
   const bioText = formatBioText(author.about);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5 md:gap-6", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "relative h-24 w-24 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "relative h-full w-full overflow-hidden rounded-full border border-ods-border bg-ods-bg-surface", children: proxiedAvatar ? /* @__PURE__ */ jsx(Image, { src: proxiedAvatar, alt: author.fullName, fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center font-heading text-3xl text-ods-text-secondary", children: author.fullName.charAt(0).toUpperCase() }) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "truncate leading-none text-ods-text-primary text-h2", children: author.fullName }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "truncate font-body text-lg leading-none text-ods-text-secondary", children: subtitle }),
-        author.socialLinks.length > 0 && // Ghost compact row (transparent 32px) — metadata, not CTAs.
+  return /* @__PURE__ */ jsxs("div", { className: cn(VIEW_CLASS, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: IDENTITY_ROW_CLASS, "aria-hidden": loading || void 0, children: [
+      /* @__PURE__ */ jsx("div", { className: AVATAR_BOX_CLASS, children: loading ? (
+        // The avatar in its scope draws its own skeleton, the round box of this frame.
+        /* @__PURE__ */ jsx(SquareAvatar, { variant: "round", alt: "", className: "h-full w-full" })
+      ) : /* @__PURE__ */ jsx("div", { className: "relative h-full w-full overflow-hidden rounded-full border border-ods-border bg-ods-bg-surface", children: proxiedAvatar ? /* @__PURE__ */ jsx(Image, { src: proxiedAvatar, alt: author.fullName, fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-ods-text-secondary text-h2", children: author.fullName.charAt(0).toUpperCase() }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: cn(IDENTITY_TEXT_CLASS, loading && "w-full"), children: [
+        /* @__PURE__ */ jsx("p", { className: NAME_CLASS, children: loading ? (
+          // A typical name's width (about 282px at the name's `text-h2`).
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-72 max-w-full" })
+        ) : author.fullName }),
+        (loading || subtitle) && /* @__PURE__ */ jsx("p", { className: SUBTITLE_CLASS, children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-48 max-w-full" }) : subtitle }),
+        loading ? /* @__PURE__ */ jsx("div", { className: socialIconRowClass(true), children: Array.from({ length: AUTHOR_SKELETON_SOCIALS }, (_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton icons never reorder
+          /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon-sm" }, i)
+        )) }) : author.socialLinks.length > 0 && // Ghost compact row (transparent 32px) — metadata, not CTAs.
         /* @__PURE__ */ jsx(
           SocialIconRow,
           {
@@ -36,8 +53,24 @@ function AuthorDetailView({ author, proxyImageUrl, children, className }) {
         )
       ] })
     ] }),
-    bioText && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: bioText }),
-    author.knowsAbout.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: author.knowsAbout.map((topic) => /* @__PURE__ */ jsx(StatusBadge, { text: topic, variant: "button", colorScheme: "cyan", singleLine: true }, topic)) }),
+    loading ? (
+      // A bio's usual length per width: five lines on a phone, three on a tablet, two from desktop.
+      /* @__PURE__ */ jsxs("p", { className: BIO_CLASS, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 5, className: "w-full content-md:hidden" }),
+        /* @__PURE__ */ jsx(
+          TextLineSkeleton,
+          {
+            type: "inherit",
+            as: "span",
+            lines: 3,
+            className: "hidden w-full content-md:flex content-lg:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 2, className: "hidden w-full content-lg:flex" })
+      ] })
+    ) : bioText && /* @__PURE__ */ jsx("p", { className: BIO_CLASS, children: bioText }),
+    !loading && author.knowsAbout.length > 0 && // Optional per author (not drawn while loading): marked so for the loading-state check.
+    /* @__PURE__ */ jsx("div", { className: TOPICS_CLASS, "data-loading-optional": true, children: author.knowsAbout.map((topic) => /* @__PURE__ */ jsx(StatusBadge, { text: topic, variant: "button", colorScheme: "cyan", singleLine: true }, topic)) }),
     children
   ] });
 }

package/dist/components/calendar.cjs

@@ -2,11 +2,11 @@
 "use client";
 
 
-var _chunk2QMBXGMQcjs = require('../chunk-2QMBXGMQ.cjs');
+var _chunkTF5D5MNOcjs = require('../chunk-TF5D5MNO.cjs');
 require('../chunk-V45KLJQP.cjs');
 
 
-var _chunk3ATAYP36cjs = require('../chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('../chunk-65VVJSQZ.cjs');
 
 // src/components/calendar.tsx
 var _lucidereact = require('lucide-react');
@@ -17,7 +17,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
     _reactdaypicker.DayPicker,
     {
       showOutsideDays,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, "p-3", className),
+      className: _chunk65VVJSQZcjs.cn.call(void 0, "p-3", className),
       classNames: {
         months: "relative flex flex-col md:flex-row gap-[var(--spacing-system-mf)]",
         month: "flex flex-col gap-[var(--spacing-system-s)]",
@@ -28,12 +28,12 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         // Boundary-month nav state arrives as BOTH native `disabled` and
         // `aria-disabled` depending on the react-day-picker code path — style
         // both (the same pairing buttonSurfaceClasses uses).
-        button_previous: _chunk3ATAYP36cjs.cn.call(void 0, 
-          _chunk2QMBXGMQcjs.buttonVariants.call(void 0, { variant: "outline", size: "icon-sm" }),
+        button_previous: _chunk65VVJSQZcjs.cn.call(void 0, 
+          _chunkTF5D5MNOcjs.buttonVariants.call(void 0, { variant: "outline", size: "icon-sm" }),
           "bg-transparent opacity-60 hover:opacity-100 disabled:opacity-25 aria-disabled:pointer-events-none aria-disabled:opacity-25"
         ),
-        button_next: _chunk3ATAYP36cjs.cn.call(void 0, 
-          _chunk2QMBXGMQcjs.buttonVariants.call(void 0, { variant: "outline", size: "icon-sm" }),
+        button_next: _chunk65VVJSQZcjs.cn.call(void 0, 
+          _chunkTF5D5MNOcjs.buttonVariants.call(void 0, { variant: "outline", size: "icon-sm" }),
           "bg-transparent opacity-60 hover:opacity-100 disabled:opacity-25 aria-disabled:pointer-events-none aria-disabled:opacity-25"
         ),
         month_caption: "flex h-8 items-center justify-center",
@@ -45,8 +45,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         day: "h-9 w-9 p-0 text-center align-middle",
         // 'icon-sm' again: a size MUST be passed or the default's `md:h-12` +
         // `text-h3` leak through and inflate day cells on desktop.
-        day_button: _chunk3ATAYP36cjs.cn.call(void 0, 
-          _chunk2QMBXGMQcjs.buttonVariants.call(void 0, { variant: "transparent", size: "icon-sm" }),
+        day_button: _chunk65VVJSQZcjs.cn.call(void 0, 
+          _chunkTF5D5MNOcjs.buttonVariants.call(void 0, { variant: "transparent", size: "icon-sm" }),
           "h-9 w-9 rounded-md p-0 font-normal text-ods-text-primary text-h6"
         ),
         selected: "[&>button]:bg-ods-accent [&>button]:text-ods-text-on-accent [&>button]:hover:bg-ods-accent",
@@ -62,7 +62,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
       components: {
         // v9 passes 'up'/'down' for dropdown captions too — branch all four.
         Chevron: ({ orientation, className: chevronClassName }) => {
-          const cls = _chunk3ATAYP36cjs.cn.call(void 0, "h-4 w-4", chevronClassName);
+          const cls = _chunk65VVJSQZcjs.cn.call(void 0, "h-4 w-4", chevronClassName);
           if (orientation === "right") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: cls });
           if (orientation === "up") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronUp, { className: cls });
           if (orientation === "down") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { className: cls });

package/dist/components/case-studies/entity-quotes-panel.d.ts

@@ -4,10 +4,12 @@ export interface EntityQuotesPanelProps {
     quotes: readonly EntityQuote[] | null | undefined;
     className?: string;
 }
+export declare function EntityQuotesPanel({ quotes, className }: EntityQuotesPanelProps): import("react").JSX.Element | null;
 /**
- * THE quote list display: one `StackedRowsPanel` row per quote, the quote
- * with its speaker beneath, under a "Key Quotes · N" caption. Renders nothing
- * when there are none.
+ * The quotes while they are read: the real "Key Quotes" caption (its count is read data, so it is left out) over
+ * the panel's rows, each a quote's two lines and its speaker line as bars in the quote's own elements.
  */
-export declare function EntityQuotesPanel({ quotes, className }: EntityQuotesPanelProps): import("react").JSX.Element | null;
+export declare function EntityQuotesPanelSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=entity-quotes-panel.d.ts.map

package/dist/components/case-studies/entity-quotes-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-quotes-panel.d.ts","sourceRoot":"","sources":["../../../src/components/case-studies/entity-quotes-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAIhE,MAAM,WAAW,sBAAsB;IACrC,kFAAkF;IAClF,MAAM,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,sCAsB9E"}
+{"version":3,"file":"entity-quotes-panel.d.ts","sourceRoot":"","sources":["../../../src/components/case-studies/entity-quotes-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAMhE,MAAM,WAAW,sBAAsB;IACrC,kFAAkF;IAClF,MAAM,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,sCA6B9E;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAyB9E"}

package/dist/components/case-studies/entity-quotes-panel.js

@@ -1,26 +1,58 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ENTITY_QUOTES_TITLE } from "../../types/video-processing.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { StackedRowsPanel } from "../ui/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+const QUOTE_CLASS = "flex flex-col gap-[var(--spacing-system-xxs)]";
+const QUOTE_TEXT_CLASS = "text-ods-text-primary text-h4";
+const QUOTE_SPEAKER_CLASS = "text-ods-text-secondary text-h4";
+const QUOTES_SKELETON_ROWS = 3;
 function EntityQuotesPanel({ quotes, className }) {
+  if (useLoadingScope()) return null;
   if (!quotes || quotes.length === 0) return null;
+  return (
+    // Optional per record, so the loading state draws none: the gate leaves the loaded panel out of its comparison.
+    // A plain block around the one panel, so the parent's spacing applies to it as it did to the panel.
+    /* @__PURE__ */ jsx("div", { "data-loading-optional": true, children: /* @__PURE__ */ jsx(
+      StackedRowsPanel,
+      {
+        className,
+        title: `${ENTITY_QUOTES_TITLE} \xB7 ${quotes.length}`,
+        rows: quotes.map((q) => ({
+          id: q.key,
+          columns: [
+            {
+              key: "quote",
+              content: /* @__PURE__ */ jsxs("blockquote", { className: QUOTE_CLASS, children: [
+                /* @__PURE__ */ jsxs("p", { className: QUOTE_TEXT_CLASS, children: [
+                  "\u201C",
+                  q.text,
+                  "\u201D"
+                ] }),
+                q.speaker && /* @__PURE__ */ jsx("p", { className: QUOTE_SPEAKER_CLASS, children: q.speaker })
+              ] })
+            }
+          ]
+        }))
+      }
+    ) })
+  );
+}
+function EntityQuotesPanelSkeleton({ className }) {
   return /* @__PURE__ */ jsx(
     StackedRowsPanel,
     {
       className,
-      title: `${ENTITY_QUOTES_TITLE} \xB7 ${quotes.length}`,
-      rows: quotes.map((q) => ({
-        id: q.key,
+      title: ENTITY_QUOTES_TITLE,
+      rows: Array.from({ length: QUOTES_SKELETON_ROWS }, (_, i) => ({
+        id: `skeleton-${i}`,
         columns: [
           {
             key: "quote",
-            content: /* @__PURE__ */ jsxs("blockquote", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
-              /* @__PURE__ */ jsxs("p", { className: "text-ods-text-primary text-h4", children: [
-                "\u201C",
-                q.text,
-                "\u201D"
-              ] }),
-              q.speaker && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h4", children: q.speaker })
+            content: /* @__PURE__ */ jsxs("div", { className: QUOTE_CLASS, "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx("p", { className: QUOTE_TEXT_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 2, className: "w-full" }) }),
+              /* @__PURE__ */ jsx("p", { className: QUOTE_SPEAKER_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-40" }) })
             ] })
           }
         ]
@@ -29,5 +61,6 @@ function EntityQuotesPanel({ quotes, className }) {
   );
 }
 export {
-  EntityQuotesPanel
+  EntityQuotesPanel,
+  EntityQuotesPanelSkeleton
 };