@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.749

package/dist/components/tickets/help-center-create-form.js

@@ -2,35 +2,47 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ContactForm } from "../contact/index.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Input, Label } from "../ui/index.js";
 import { RequiredMark } from "../ui/required-mark.js";
 const SUBJECT_MAX_CHARS = 200;
-function HelpCenterCreateFormSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col rounded-2xl border border-ods-border p-6 content-md:rounded-3xl content-md:p-8 content-lg:p-10", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-6 content-md:mb-8", children: /* @__PURE__ */ jsx("div", { className: "mb-3 h-10 w-72 animate-pulse rounded bg-ods-border content-md:mb-4" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-grow flex-col space-y-4 content-md:space-y-6", children: [
-      /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-1 h-[27px] w-20 animate-pulse rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-12 w-full animate-pulse rounded bg-ods-border" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-grow flex-col", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-1 h-[27px] w-32 animate-pulse rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-24 w-full flex-grow animate-pulse rounded bg-ods-border" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-7 w-7 shrink-0 animate-pulse rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-ods-border" })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 content-md:flex-row content-md:gap-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-72 animate-pulse rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-12 w-32 animate-pulse rounded bg-ods-border" })
-      ] })
-    ] })
-  ] });
+function HelpCenterCreateFormSkeleton({
+  region = true
+} = {}) {
+  return /* @__PURE__ */ jsxs(
+    LoadingRegion,
+    {
+      label: "Loading the form",
+      announce: region,
+      className: "flex h-full flex-col rounded-2xl border border-ods-border p-6 content-md:rounded-3xl content-md:p-8 content-lg:p-10",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-6 content-md:mb-8", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-3 h-10 w-72 rounded content-md:mb-4" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-grow flex-col space-y-4 content-md:space-y-6", children: [
+          /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("input", { type: "hidden", "aria-hidden": true }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-[27px] w-20 rounded" }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-full rounded" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-grow flex-col", children: [
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-[27px] w-32 rounded" }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-24 w-full flex-grow rounded" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-7 w-7 shrink-0 rounded" }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-40 rounded" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 content-md:flex-row content-md:gap-6", children: [
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-72 rounded" }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-32 rounded" })
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function HelpCenterCreateForm({
   actions,

package/dist/components/tickets/index.cjs

@@ -14,11 +14,11 @@
 
 
 
-var _chunkJOPFX3PJcjs = require('../../chunk-JOPFX3PJ.cjs');
-require('../../chunk-JNBOQ7F2.cjs');
-require('../../chunk-46EIXJFC.cjs');
-require('../../chunk-BEC43GHL.cjs');
-require('../../chunk-7Y3VMMJB.cjs');
+var _chunkVEVIMDNKcjs = require('../../chunk-VEVIMDNK.cjs');
+require('../../chunk-OZLIKBKC.cjs');
+require('../../chunk-GOFEOCQN.cjs');
+require('../../chunk-34TWK3JE.cjs');
+require('../../chunk-2J2OBP4N.cjs');
 require('../../chunk-HEVW75L3.cjs');
 
 
@@ -26,11 +26,11 @@ require('../../chunk-HEVW75L3.cjs');
 
 
 
-var _chunkUNR74CACcjs = require('../../chunk-UNR74CAC.cjs');
-require('../../chunk-6XP6RNFD.cjs');
-require('../../chunk-HNLI4OU5.cjs');
+var _chunkHOEVD6ENcjs = require('../../chunk-HOEVD6EN.cjs');
+require('../../chunk-SECT4H34.cjs');
+require('../../chunk-C6LPOYDM.cjs');
 require('../../chunk-NTGIQP7O.cjs');
-require('../../chunk-U6XWGK53.cjs');
+require('../../chunk-ALPRQ3ZX.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
 require('../../chunk-4FWURR3W.cjs');
@@ -38,17 +38,17 @@ require('../../chunk-LU7TD6QS.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-BBM2ICOY.cjs');
+require('../../chunk-3TELPOVH.cjs');
 require('../../chunk-YUMFVQIN.cjs');
 
 
 
-var _chunkZNUSYMH7cjs = require('../../chunk-ZNUSYMH7.cjs');
-require('../../chunk-BBTSJYTR.cjs');
-require('../../chunk-PSIKUDUV.cjs');
+var _chunkWZX26ODJcjs = require('../../chunk-WZX26ODJ.cjs');
+require('../../chunk-V3UJ6NDR.cjs');
+require('../../chunk-LVO7FALW.cjs');
 require('../../chunk-3RFQPQ7Z.cjs');
 require('../../chunk-YRULLK7N.cjs');
-require('../../chunk-B27QEHYR.cjs');
+require('../../chunk-P6F6PHVK.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1845,8 +1845,8 @@ require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-YIRX6C7V.cjs');
-require('../../chunk-P7KTAXXE.cjs');
+require('../../chunk-XJ3J4UIS.cjs');
+require('../../chunk-OFO75R2O.cjs');
 require('../../chunk-QYLIHZKZ.cjs');
 require('../../chunk-63N4FN5V.cjs');
 require('../../chunk-L2IQESTQ.cjs');
@@ -1869,16 +1869,18 @@ require('../../chunk-HOTM4UM6.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
 require('../../chunk-HTRILBJD.cjs');
 require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-L2RMTGOK.cjs');
+require('../../chunk-MGF3FUKD.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
+require('../../chunk-UGCRLRCT.cjs');
 require('../../chunk-2QMBXGMQ.cjs');
 require('../../chunk-V45KLJQP.cjs');
 require('../../chunk-G7SBHMRR.cjs');
-require('../../chunk-AKTPO2DN.cjs');
+require('../../chunk-L4UI63K6.cjs');
 require('../../chunk-OF336YWG.cjs');
 require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-5M5C6UV4.cjs');
+require('../../chunk-RB6BSE3O.cjs');
+require('../../chunk-2YXOD2KL.cjs');
 require('../../chunk-3ATAYP36.cjs');
 
 
@@ -1902,4 +1904,4 @@ require('../../chunk-3ATAYP36.cjs');
 
 
 
-exports.HelpCenterCard = _chunkJOPFX3PJcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkJOPFX3PJcjs.HelpCenterCreateForm; exports.HelpCenterCreateFormSkeleton = _chunkJOPFX3PJcjs.HelpCenterCreateFormSkeleton; exports.HelpCenterList = _chunkJOPFX3PJcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunkZNUSYMH7cjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkUNR74CACcjs.TOAST_COPY; exports.TicketCenter = _chunkJOPFX3PJcjs.TicketCenter; exports.TicketDetailDrawer = _chunkJOPFX3PJcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkJOPFX3PJcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkUNR74CACcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkJOPFX3PJcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkJOPFX3PJcjs.TicketReplyComposer; exports.TicketRow = _chunkJOPFX3PJcjs.TicketRow; exports.buildTicketOpenHref = _chunkZNUSYMH7cjs.buildTicketOpenHref; exports.isOptimistic = _chunkUNR74CACcjs.isOptimistic; exports.mapTicketActionError = _chunkJOPFX3PJcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkUNR74CACcjs.useOptionalTicketLive; exports.useTicketActions = _chunkJOPFX3PJcjs.useTicketActions; exports.useTicketEngagements = _chunkJOPFX3PJcjs.useTicketEngagements; exports.useTicketLive = _chunkUNR74CACcjs.useTicketLive; exports.useTicketsList = _chunkJOPFX3PJcjs.useTicketsList;
+exports.HelpCenterCard = _chunkVEVIMDNKcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkVEVIMDNKcjs.HelpCenterCreateForm; exports.HelpCenterCreateFormSkeleton = _chunkVEVIMDNKcjs.HelpCenterCreateFormSkeleton; exports.HelpCenterList = _chunkVEVIMDNKcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunkWZX26ODJcjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkHOEVD6ENcjs.TOAST_COPY; exports.TicketCenter = _chunkVEVIMDNKcjs.TicketCenter; exports.TicketDetailDrawer = _chunkVEVIMDNKcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkVEVIMDNKcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkHOEVD6ENcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkVEVIMDNKcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkVEVIMDNKcjs.TicketReplyComposer; exports.TicketRow = _chunkVEVIMDNKcjs.TicketRow; exports.buildTicketOpenHref = _chunkWZX26ODJcjs.buildTicketOpenHref; exports.isOptimistic = _chunkHOEVD6ENcjs.isOptimistic; exports.mapTicketActionError = _chunkVEVIMDNKcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkHOEVD6ENcjs.useOptionalTicketLive; exports.useTicketActions = _chunkVEVIMDNKcjs.useTicketActions; exports.useTicketEngagements = _chunkVEVIMDNKcjs.useTicketEngagements; exports.useTicketLive = _chunkHOEVD6ENcjs.useTicketLive; exports.useTicketsList = _chunkVEVIMDNKcjs.useTicketsList;

package/dist/components/tickets/ticket-center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-center.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-center.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAe9D,MAAM,WAAW,iBAAiB;IAChC;kCAC8B;IAC9B,KAAK,CAAC,EAAE,OAAO,YAAY,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAoB,EAAE,GAAE,iBAAsB,+BAmB5E"}
+{"version":3,"file":"ticket-center.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-center.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAgB9D,MAAM,WAAW,iBAAiB;IAChC;kCAC8B;IAC9B,KAAK,CAAC,EAAE,OAAO,YAAY,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAoB,EAAE,GAAE,iBAAsB,+BAmB5E"}

package/dist/components/tickets/ticket-center.js

@@ -8,9 +8,10 @@ import { formatRelativeTime } from "../../utils/date-utils.js";
 import { devSectionAnchorId } from "../../utils/dev-sections/dev-section-param-keys.js";
 import { useChatIdentity } from "../chat/hooks/use-chat-identity.js";
 import { EmptyState } from "../empty-state.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
 import { Card } from "../ui/card.js";
-import { Skeleton } from "../ui/skeleton.js";
 import { useTicketActions } from "./hooks/use-ticket-actions.js";
 import { useTicketsList } from "./hooks/use-tickets-list.js";
 import { TicketOpenForm } from "./ticket-open-form.js";
@@ -131,12 +132,14 @@ function TicketCenterAuthed({
     ] })
   ] });
 }
-function TicketCenterSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+function TicketCenterSkeleton({
+  region = true
+} = {}) {
+  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading tickets", announce: region, className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "mb-4 h-7 w-48" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "mb-3 h-10 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" })
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-4 h-7 w-48" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-3 h-10 w-full" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-24 w-full" })
     ] }),
     /* @__PURE__ */ jsx(TicketListSkeleton, {})
   ] });
@@ -144,11 +147,11 @@ function TicketCenterSkeleton() {
 function TicketListSkeleton() {
   return /* @__PURE__ */ jsx(Card, { className: "overflow-hidden", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex h-20 items-center gap-4 border-b border-ods-border px-4 last:border-b-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" })
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-2/3" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-full" })
     ] }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16" })
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20" }),
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-16" })
   ] }, i)) });
 }
 export {

package/dist/components/tickets/ticket-detail-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-detail-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-detail-drawer.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAU/E,OAAO,KAAK,EAAE,SAAS,EAAuB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAGvF;;;sBAGsB;AACtB,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,EAAE,OAAO,CAAC;IAC3B;+BAC2B;IAC3B,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACpG,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClD;yEACqE;IACrE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;qEAIiE;IACjE,UAAU,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC5C;yDACqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,IAAI,EACJ,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,UAAU,EACV,iBAAiB,GAClB,EAAE,uBAAuB,+BAmDzB"}
+{"version":3,"file":"ticket-detail-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-detail-drawer.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAU/E,OAAO,KAAK,EAAE,SAAS,EAAuB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAGvF;;;sBAGsB;AACtB,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,EAAE,OAAO,CAAC;IAC3B;+BAC2B;IAC3B,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACpG,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClD;yEACqE;IACrE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;qEAIiE;IACjE,UAAU,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC5C;yDACqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,IAAI,EACJ,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,UAAU,EACV,iBAAiB,GAClB,EAAE,uBAAuB,+BAmDzB"}

package/dist/components/tickets/ticket-detail-drawer.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
+import { LoadingRegion } from "../loading/loading-region.js";
 import { formatRelativeTime } from "../../utils/date-utils.js";
 import { ChatMessageRow, ChatMessageRowSkeleton } from "../chat/chat-message-row.js";
 import { useChatIdentity } from "../chat/hooks/use-chat-identity.js";
@@ -103,7 +104,7 @@ function TicketTimelinePanel({ ticket }) {
   const customerName = (isViewerTheCustomer ? viewerName : null) || ticketCustomerName || viewerName || identity.user?.email || "You";
   const customerAvatar = isViewerTheCustomer ? identity.user?.avatarUrl ?? void 0 : void 0;
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: `${TICKET_FEED_FRAME} ${TICKET_FEED_HEIGHT}`, children: /* @__PURE__ */ jsx("div", { className: TICKET_FEED_INNER, children: Array.from({ length: TICKET_FEED_SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx(ChatMessageRowSkeleton, {}, i)) }) });
+    return /* @__PURE__ */ jsx("div", { className: `${TICKET_FEED_FRAME} ${TICKET_FEED_HEIGHT}`, children: /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading messages", className: TICKET_FEED_INNER, children: Array.from({ length: TICKET_FEED_SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx(ChatMessageRowSkeleton, {}, i)) }) });
   }
   if (bodyTurns.length === 0 && engagements.length === 0) {
     return /* @__PURE__ */ jsx(

package/dist/components/ui/admin-form-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"admin-form-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/admin-form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASxD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4GAA4G;IAC5G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAc,EACd,MAAc,EACd,OAAe,EACf,KAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,KAAa,EACb,WAAW,EACX,YAAkB,EAClB,UAAU,EACV,QAAQ,GACT,EAAE,oBAAoB,+BAsHtB"}
+{"version":3,"file":"admin-form-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/admin-form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUxD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4GAA4G;IAC5G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAc,EACd,MAAc,EACd,OAAe,EACf,KAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,KAAa,EACb,WAAW,EACX,YAAkB,EAClB,UAAU,EACV,QAAQ,GACT,EAAE,oBAAoB,+BAqHtB"}

package/dist/components/ui/admin-form-drawer.js

@@ -2,10 +2,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 import { HUBSPOT_DO_NOT_COLLECT_FORM_PROPS } from "../../utils/hubspot-collected-forms.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "./button/index.js";
 import { Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "./drawer.js";
 import { UnsavedChangesChip } from "./modal-guarded-close.js";
-import { Skeleton } from "./skeleton.js";
 const SKELETON_FIELD_WIDTHS = ["w-24", "w-32", "w-20", "w-40", "w-28", "w-36"];
 function AdminFormDrawer({
   title,
@@ -70,13 +71,10 @@ function AdminFormDrawer({
                     e.preventDefault();
                   }
                 },
-                children: loading ? /* @__PURE__ */ jsxs("div", { "aria-busy": "true", className: "flex flex-col gap-[var(--spacing-system-lf)]", children: [
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" }),
-                  SKELETON_FIELD_WIDTHS.map((labelWidth, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--spacing-system-xsf)]", "aria-hidden": "true", children: [
-                    /* @__PURE__ */ jsx(Skeleton, { className: `h-4 ${labelWidth}` }),
-                    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
-                  ] }, i))
-                ] }) : children
+                children: loading ? /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading", className: "flex flex-col gap-[var(--spacing-system-lf)]", children: SKELETON_FIELD_WIDTHS.map((labelWidth, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--spacing-system-xsf)]", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: `h-4 ${labelWidth}` }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-full" })
+                ] }, i)) }) : children
               }
             ) }),
             error && /* @__PURE__ */ jsx("p", { role: "alert", className: "shrink-0 text-ods-error text-h6", children: error }),

package/dist/components/ui/admin-form-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"admin-form-modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/admin-form-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AASpB,qFAAqF;AACrF,KAAK,oBAAoB,GACrB;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAChE;IAAE,UAAU,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExE,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gFAAgF;IAChF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kFAAkF;IAClF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAc,EACd,MAAc,EACd,OAAe,EACf,KAAY,EACZ,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,KAAa,EACb,WAAW,EACX,IAAI,EACJ,gBAAuD,EACvD,QAAQ,EACR,UAAU,EACV,WAAW,GACZ,EAAE,uBAAuB,GAAG,oBAAoB,sCA8IhD"}
+{"version":3,"file":"admin-form-modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/admin-form-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAQpB,qFAAqF;AACrF,KAAK,oBAAoB,GACrB;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAChE;IAAE,UAAU,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExE,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gFAAgF;IAChF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kFAAkF;IAClF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAc,EACd,MAAc,EACd,OAAe,EACf,KAAY,EACZ,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,KAAa,EACb,WAAW,EACX,IAAI,EACJ,gBAAuD,EACvD,QAAQ,EACR,UAAU,EACV,WAAW,GACZ,EAAE,uBAAuB,GAAG,oBAAoB,sCA8IhD"}

package/dist/components/ui/admin-form-modal.js

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { HUBSPOT_DO_NOT_COLLECT_FORM_PROPS } from "../../utils/hubspot-collected-forms.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "./button/index.js";
 import { UnsavedChangesChip, useGuardedClose } from "./modal-guarded-close.js";
 import {
@@ -12,7 +14,6 @@ import {
   ModalV2Title,
   ModalV2TwoColumn
 } from "./modal-v2.js";
-import { Skeleton } from "./skeleton.js";
 const SKELETON_FIELD_WIDTHS = ["w-24", "w-32", "w-20", "w-40", "w-28", "w-36"];
 function AdminFormModal({
   title,
@@ -73,10 +74,13 @@ function AdminFormModal({
             // a shrink-to-fit flex item pinned to the left of a 1400px panel).
             // The placeholder owns its own layout and mirrors the column count so
             // the modal doesn't visibly re-flow when the entity lands.
-            /* @__PURE__ */ jsx(ModalV2Content, { children: loadingContent ? /* @__PURE__ */ jsx("div", { "aria-busy": "true", children: loadingContent }) : /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsx(ModalV2Content, { children: loadingContent ? (
+              // The one announcement: a `loadingContent` with a region of its own takes `region={false}`.
+              /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading", children: loadingContent })
+            ) : /* @__PURE__ */ jsx(
+              LoadingRegion,
               {
-                "aria-busy": "true",
+                label: "Loading",
                 className: (
                   // Mirrors the PANEL WIDTH, not the slot API. `wide` covers the
                   // master-detail modals too (seo-redirect, managed-repo,
@@ -85,13 +89,10 @@ function AdminFormModal({
                   // as a broken form rather than a loading one.
                   skeletonColumns === 2 ? "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-2" : "grid grid-cols-1 gap-[var(--spacing-system-xl)]"
                 ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" }),
-                  Array.from({ length: skeletonColumns }, (_, col) => /* @__PURE__ */ jsx("div", { className: "space-y-[var(--spacing-system-lf)]", "aria-hidden": "true", children: SKELETON_FIELD_WIDTHS.map((labelWidth, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--spacing-system-xsf)]", children: [
-                    /* @__PURE__ */ jsx(Skeleton, { className: `h-4 ${labelWidth}` }),
-                    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
-                  ] }, i)) }, col))
-                ]
+                children: Array.from({ length: skeletonColumns }, (_, col) => /* @__PURE__ */ jsx("div", { className: "space-y-[var(--spacing-system-lf)]", "aria-hidden": "true", children: SKELETON_FIELD_WIDTHS.map((labelWidth, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--spacing-system-xsf)]", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: `h-4 ${labelWidth}` }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-full" })
+                ] }, i)) }, col))
               }
             ) })
           ) : twoColumn ? /* @__PURE__ */ jsx(ModalV2TwoColumn, { left: leftColumn, right: rightColumn }) : /* @__PURE__ */ jsx(ModalV2Content, { className: contentClassName, children }),

package/dist/components/ui/analyzing-state.d.ts

@@ -9,7 +9,7 @@ export interface AnalyzingStateProps {
  * and the chat's own typing dots. It says an agent is at work, where a bare
  * sentence in an empty box reads as idle.
  *
- * Built from the shared pieces only: `Skeleton` for the rows and
+ * Built from the shared pieces only: `UnifiedSkeleton` for the rows and
  * `ChatTypingIndicator` for the dots. Still under reduced motion. It is
  * announced as a status; the rows and dots are decoration.
  */

package/dist/components/ui/analyzing-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analyzing-state.d.ts","sourceRoot":"","sources":["../../../src/components/ui/analyzing-state.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,oGAAoG;IACpG,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BA+BvE"}
+{"version":3,"file":"analyzing-state.d.ts","sourceRoot":"","sources":["../../../src/components/ui/analyzing-state.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,oGAAoG;IACpG,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BA4BvE"}

package/dist/components/ui/analyzing-state.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { ChatTypingIndicator } from "../chat/chat-typing-indicator.js";
-import { Skeleton } from "./skeleton.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 const ROW_OPACITY = ["opacity-100", "opacity-60", "opacity-30"];
 const ROW_STAGGER_MS = 200;
 function AnalyzingState({ label, className }) {
@@ -17,15 +17,9 @@ function AnalyzingState({ label, className }) {
             opacity
           ),
           children: [
-            /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                className: "h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan motion-reduce:animate-none",
-                style: delay
-              }
-            ),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 min-w-0 flex-1 motion-reduce:animate-none", style: delay }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-12 shrink-0 motion-reduce:animate-none", style: delay })
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan", style: delay }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-2.5 min-w-0 flex-1", style: delay }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-2.5 w-12 shrink-0", style: delay })
           ]
         },
         opacity

package/dist/components/ui/content-loader.d.ts

@@ -19,12 +19,16 @@ export interface ContentLoaderProps {
      * Container CSS classes
      */
     containerClassName?: string;
+    /** What is loading, read once by a screen reader. Default "Loading". */
+    label?: string;
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
 }
 /**
  * Unified content loader component that replaces duplicate loading patterns
  * Uses ODS design tokens for consistent theming
  */
-export declare function ContentLoader({ variant, items, showTitle, className, containerClassName, }: ContentLoaderProps): import("react").JSX.Element;
+export declare function ContentLoader({ variant, items, showTitle, className, containerClassName, label, region, }: ContentLoaderProps): import("react").JSX.Element;
 export declare const CardLoader: (props: Omit<ContentLoaderProps, "variant">) => import("react").JSX.Element;
 export declare const FormLoader: (props: Omit<ContentLoaderProps, "variant">) => import("react").JSX.Element;
 export declare const DetailLoader: (props: Omit<ContentLoaderProps, "variant">) => import("react").JSX.Element;

package/dist/components/ui/content-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/content-loader.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAgB,EAChB,KAAS,EACT,SAAgB,EAChB,SAAS,EACT,kBAAkB,GACnB,EAAE,kBAAkB,+BAmGpB;AAGD,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAEtE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC"}
+{"version":3,"file":"content-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/content-loader.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAgB,EAChB,KAAS,EACT,SAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,KAAiB,EACjB,MAAa,GACd,EAAE,kBAAkB,+BAmGpB;AAGD,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAEtE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC"}

package/dist/components/ui/content-loader.js

@@ -1,52 +1,56 @@
 "use client";
 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";
 function ContentLoader({
   variant = "card",
   items = 4,
   showTitle = true,
   className,
-  containerClassName
+  containerClassName,
+  label = "Loading",
+  region = true
 }) {
-  const renderCardSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
-    showTitle && /* @__PURE__ */ jsx("div", { className: "mb-6 h-8 w-64 rounded bg-ods-skeleton" }),
+  const renderCardSkeleton = () => /* @__PURE__ */ jsxs("div", { children: [
+    showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
     /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-6 grid grid-cols-1 gap-6 content-md:grid-cols-4", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-2 h-4 w-20 rounded bg-ods-skeleton" }),
-        /* @__PURE__ */ jsx("div", { className: "h-6 w-32 rounded bg-ods-skeleton" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-20 rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-32 rounded" })
       ] }, i)) }),
-      /* @__PURE__ */ jsx("div", { className: "border-t border-ods-border pt-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-64 rounded bg-ods-skeleton" }) })
+      /* @__PURE__ */ jsx("div", { className: "border-t border-ods-border pt-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-64 rounded" }) })
     ] })
   ] });
-  const renderFormSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
-    showTitle && /* @__PURE__ */ jsx("div", { className: "mb-6 h-8 w-64 rounded bg-ods-card" }),
+  const renderFormSkeleton = () => /* @__PURE__ */ jsxs("div", { children: [
+    showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
     /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ods-card p-6", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-2 h-4 w-32 rounded bg-ods-skeleton" }),
-      /* @__PURE__ */ jsx("div", { className: "h-10 rounded bg-ods-skeleton" })
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-32 rounded" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 rounded" })
     ] }, i)) }) })
   ] });
-  const renderDetailSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
-    showTitle && /* @__PURE__ */ jsx("div", { className: "mb-6 h-8 w-64 rounded bg-ods-skeleton" }),
+  const renderDetailSkeleton = () => /* @__PURE__ */ jsxs("div", { children: [
+    showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
     /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 content-lg:grid-cols-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "content-lg:col-span-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-4 h-64 rounded bg-ods-skeleton" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-ods-skeleton" }, i)) })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-4 h-64 rounded" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" }, i)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-4 h-32 rounded bg-ods-skeleton" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-3 rounded bg-ods-skeleton" }, i)) })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-4 h-32 rounded" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 rounded" }, i)) })
       ] })
     ] }) })
   ] });
-  const renderListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-3", children: [
-    showTitle && /* @__PURE__ */ jsx("div", { className: "mb-6 h-8 w-64 rounded bg-ods-skeleton" }),
+  const renderListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
     Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-12 w-12 rounded bg-ods-skeleton" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded" }),
       /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-2 h-4 w-3/4 rounded bg-ods-skeleton" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 rounded bg-ods-skeleton" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-3/4 rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "h-8 w-20 rounded bg-ods-skeleton" })
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20 rounded" })
     ] }) }, i))
   ] });
   const renderSkeleton = () => {
@@ -62,7 +66,7 @@ function ContentLoader({
         return renderCardSkeleton();
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("p-6", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn(className), children: renderSkeleton() }) });
+  return /* @__PURE__ */ jsx(LoadingRegion, { label, announce: region, className: cn("p-6", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn(className), children: renderSkeleton() }) });
 }
 const CardLoader = (props) => /* @__PURE__ */ jsx(ContentLoader, { ...props, variant: "card" });
 const FormLoader = (props) => /* @__PURE__ */ jsx(ContentLoader, { ...props, variant: "form" });

package/dist/components/ui/dashboard-info-card.d.ts

@@ -80,10 +80,24 @@ export interface DashboardInfoCardProps {
      */
     caption?: ReactNode;
     /**
-     * The figure is still being fetched: the SAME card, its title, value and caption
-     * drawn as bars of their own line heights, so the loaded card replaces it in place.
+     * The figure is still being fetched: the SAME card, so the loaded card replaces it in
+     * place. `title` / `titleSlot` / `titleTag` / `icon` are drawn as they are (they are known
+     * before the data; with neither title a bar holds the title line), the value and caption are
+     * bars of their own line heights, the progress ring is held when `showProgress` is set, and
+     * the percentage when `loadingShowsPercentage` is set, the sub-value when `loadingShowsSubValue` is set.
      */
     loading?: boolean;
+    /**
+     * While `loading`: hold the percentage's box (plain "(NN%)" text, or a `Tag` when
+     * `percentageDisplay` / `progressVariant` would draw one), because the loaded card will show
+     * a percentage. Default `false`.
+     */
+    loadingShowsPercentage?: boolean;
+    /**
+     * While `loading`: hold the `subValue`'s box (one `text-h6` line beside the value) for a card
+     * whose loaded state will carry one. Default `false`.
+     */
+    loadingShowsSubValue?: boolean;
 }
-export declare function DashboardInfoCard({ title, titleSlot, titleTag, icon, value, percentage, showProgress, progressVariant, percentageDisplay, progressOverflow, progressSize, className, href, tooltip, valueClassName, subValue, caption, loading, }: DashboardInfoCardProps): import("react").JSX.Element;
+export declare function DashboardInfoCard({ title, titleSlot, titleTag, icon, value, percentage, showProgress, progressVariant, percentageDisplay, progressOverflow, progressSize, className, href, tooltip, valueClassName, subValue, caption, loading, loadingShowsPercentage, loadingShowsSubValue, }: DashboardInfoCardProps): import("react").JSX.Element;
 //# sourceMappingURL=dashboard-info-card.d.ts.map

package/dist/components/ui/dashboard-info-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-info-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dashboard-info-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAoB,KAAK,wBAAwB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAIpH;;;;;;;GAOG;AACH,MAAM,MAAM,kCAAkC,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhG,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,6BAA6B,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,YAAoB,EACpB,eAAe,EACf,iBAA0B,EAC1B,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAe,GAChB,EAAE,sBAAsB,+BAiKxB"}
+{"version":3,"file":"dashboard-info-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dashboard-info-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAoB,KAAK,wBAAwB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAIpH;;;;;;;GAOG;AACH,MAAM,MAAM,kCAAkC,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhG,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,6BAA6B,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,YAAoB,EACpB,eAAe,EACf,iBAA0B,EAC1B,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAe,EACf,sBAA8B,EAC9B,oBAA4B,GAC7B,EAAE,sBAAsB,+BA6MxB"}