@flamingo-stack/openframe-frontend-core 0.0.776 → 0.0.781

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

@@ -2,49 +2,18 @@
 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 { AnnouncedLoadingScope, useLoadingScope } from "../ui/loading-scope.js";
 import { RequiredMark } from "../ui/required-mark.js";
 const SUBJECT_MAX_CHARS = 200;
-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(props) {
+  const scoped = useLoadingScope();
+  if (props.loading || scoped) {
+    return /* @__PURE__ */ jsx(AnnouncedLoadingScope, { label: "Loading the form", active: true, className: "contents", children: /* @__PURE__ */ jsx(HelpCenterCreateFormBody, { sessionName: "", sessionEmail: "" }) });
+  }
+  return /* @__PURE__ */ jsx(HelpCenterCreateFormBody, { ...props });
 }
-function HelpCenterCreateForm({
+function HelpCenterCreateFormBody({
   actions,
   sessionName,
   sessionEmail,
@@ -100,6 +69,7 @@ function HelpCenterCreateForm({
           throw new Error("SUBJECT_REQUIRED");
         }
         setSubjectError(null);
+        if (!actions) throw new Error("TICKET_FORM_LOADING");
         const ok = await actions.submitTicket({
           subject: trimmedSubject,
           content: data.message,
@@ -115,6 +85,5 @@ function HelpCenterCreateForm({
   );
 }
 export {
-  HelpCenterCreateForm,
-  HelpCenterCreateFormSkeleton
+  HelpCenterCreateForm
 };

package/dist/components/tickets/help-center-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"help-center-list.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/help-center-list.tsx"],"names":[],"mappings":"AAgCA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAsB9D,MAAM,WAAW,mBAAmB;IAClC;2BACuB;IACvB,KAAK,CAAC,EAAE,OAAO,YAAY,CAAC;IAC5B;;;wDAGoD;IACpD,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD;;0EAEsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;kEAE8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAoB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,GAAE,mBAAwB,+BAgF1G"}
+{"version":3,"file":"help-center-list.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/help-center-list.tsx"],"names":[],"mappings":"AAgCA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAsB9D,MAAM,WAAW,mBAAmB;IAClC;2BACuB;IACvB,KAAK,CAAC,EAAE,OAAO,YAAY,CAAC;IAC5B;;;wDAGoD;IACpD,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD;;0EAEsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;kEAE8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAoB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,GAAE,mBAAwB,+BAoF1G"}

package/dist/components/tickets/help-center-list.js

@@ -16,11 +16,11 @@ import { useChatIdentity } from "../chat/hooks/use-chat-identity.js";
 import { EmptyState } from "../empty-state.js";
 import { ListEmptyState } from "../list-empty-state.js";
 import { DevSectionPage } from "../shared/dev-section/index.js";
-import { DevCardRowSkeletonList } from "../shared/dev-section/dev-card-row.js";
 import { Button } from "../ui/index.js";
+import { LoadingItems } from "../ui/loading-scope.js";
 import { UnifiedPagination } from "../unified-pagination.js";
 import { HelpCenterCard } from "./help-center-card.js";
-import { HelpCenterCreateForm, HelpCenterCreateFormSkeleton } from "./help-center-create-form.js";
+import { HelpCenterCreateForm } from "./help-center-create-form.js";
 import { useTicketActions } from "./hooks/use-ticket-actions.js";
 import { TICKETS_PAGE_SIZE, useTicketsList } from "./hooks/use-tickets-list.js";
 import { isOptimistic } from "./types.js";
@@ -41,8 +41,8 @@ function HelpCenterList({ toast = defaultToast, backButton, title, shell } = {})
         backButton,
         title,
         shell,
-        preControls: /* @__PURE__ */ jsx(HelpCenterCreateFormSkeleton, {}),
-        children: /* @__PURE__ */ jsx(DevCardRowSkeletonList, { rows: TICKETS_PAGE_SIZE })
+        preControls: /* @__PURE__ */ jsx(HelpCenterCreateForm, { loading: true }),
+        children: /* @__PURE__ */ jsx(HelpCenterRowsFrame, { children: /* @__PURE__ */ jsx(LoadingItems, { count: TICKETS_PAGE_SIZE, children: () => /* @__PURE__ */ jsx(HelpCenterCard, { ticket: null, "data-loading-item": true }) }) })
       }
     );
   }
@@ -177,14 +177,7 @@ function HelpCenterListAuthed({
       ] }),
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "accent", onClick: () => refetch(), children: "Retry" })
     ] }),
-    !error && /* @__PURE__ */ jsx("div", { className: "w-full", children: isLoading ? /* @__PURE__ */ jsx(DevCardRowSkeletonList, { rows: pageSize }) : !hasResults && isFetching ? (
-      // Bridge state — background refetch in flight and the
-      // optimistic placeholder was just removed by the mutation
-      // callback. Without this branch "No tickets yet" would flash
-      // for ~50ms between `removeOptimistic` and the server
-      // response landing.
-      /* @__PURE__ */ jsx(DevCardRowSkeletonList, { rows: 1 })
-    ) : !hasResults ? /* @__PURE__ */ jsx(
+    !error && /* @__PURE__ */ jsx("div", { className: "w-full", children: isLoading || !hasResults && isFetching ? /* @__PURE__ */ jsx(HelpCenterRowsFrame, { children: /* @__PURE__ */ jsx(LoadingItems, { count: pageSize, children: () => /* @__PURE__ */ jsx(HelpCenterCard, { ticket: null, "data-loading-item": true }) }) }) : !hasResults ? /* @__PURE__ */ jsx(
       ListEmptyState,
       {
         isFiltered: hasActiveFilters,
@@ -204,38 +197,32 @@ function HelpCenterListAuthed({
           description: "Open one above to start the conversation with the support team."
         }
       }
-    ) : (
-      // `overflow-clip` (NOT `overflow-hidden`) — both visually
-      // clip the rounded corners, but `hidden` makes the element
-      // a "scroll container" per CSSOM spec, which causes
-      // `scrollIntoView` calls inside (`<HelpCenterCard>` click
-      // handlers) to try scrolling THIS div (can't, overflow
-      // hidden) instead of bubbling up to the window. `clip`
-      // keeps the visual clip but NOT the scroll-container
-      // status, so click-to-scroll actually moves the page.
-      /* @__PURE__ */ jsx("div", { className: "w-full overflow-clip rounded-[6px] border border-ods-border bg-ods-card", children: merged.map((ticket) => /* @__PURE__ */ jsx(
-        HelpCenterCard,
-        {
-          id: devSectionAnchorId("ticket", ticket.external_id),
-          ticket,
-          expanded: expandedTicketId === ticket.id,
-          onToggle: toggleRow,
-          busy: isOptimistic(ticket) ? false : actions.isRowBusy(ticket.id),
-          supportSystemDown,
-          onSendMessage: actions.sendMessage,
-          onClose: actions.closeTicket,
-          onReopen: actions.reopenTicket,
-          onActionCollapsed: () => setOpenTicket(null),
-          replyError: actions.replyErrorFor(ticket.external_id),
-          onClearReplyError: () => actions.clearReplyError(ticket.external_id)
-        },
-        ticket.id
-      )) })
-    ) }),
+    ) : /* @__PURE__ */ jsx(HelpCenterRowsFrame, { children: merged.map((ticket) => /* @__PURE__ */ jsx(
+      HelpCenterCard,
+      {
+        "data-loading-item": true,
+        id: devSectionAnchorId("ticket", ticket.external_id),
+        ticket,
+        expanded: expandedTicketId === ticket.id,
+        onToggle: toggleRow,
+        busy: isOptimistic(ticket) ? false : actions.isRowBusy(ticket.id),
+        supportSystemDown,
+        onSendMessage: actions.sendMessage,
+        onClose: actions.closeTicket,
+        onReopen: actions.reopenTicket,
+        onActionCollapsed: () => setOpenTicket(null),
+        replyError: actions.replyErrorFor(ticket.external_id),
+        onClearReplyError: () => actions.clearReplyError(ticket.external_id)
+      },
+      ticket.id
+    )) }) }),
     !error && totalPages > 1 && /* @__PURE__ */ jsx(UnifiedPagination, { currentPage: page, totalPages })
   ] });
   return /* @__PURE__ */ jsx(DevSectionPage, { sectionKey: "tickets", backButton, title, shell, preControls: form, children: body });
 }
+function HelpCenterRowsFrame({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-clip rounded-[6px] border border-ods-border bg-ods-card", children });
+}
 export {
   HelpCenterList
 };

package/dist/components/tickets/index.cjs

@@ -15,40 +15,39 @@
 
 
 
-
-var _chunkAMVI5VXMcjs = require('../../chunk-AMVI5VXM.cjs');
-require('../../chunk-IXZNBDXT.cjs');
-require('../../chunk-2MF547RG.cjs');
-require('../../chunk-Z5KX56TK.cjs');
-require('../../chunk-24OYQQZC.cjs');
+var _chunkHPGCUYAZcjs = require('../../chunk-HPGCUYAZ.cjs');
+require('../../chunk-5PBWAF2D.cjs');
+require('../../chunk-XHJI7R4J.cjs');
+require('../../chunk-ZPYFPLPD.cjs');
+require('../../chunk-PID7LUDP.cjs');
+require('../../chunk-DIY4SJZI.cjs');
 require('../../chunk-HEVW75L3.cjs');
 
 
 
 
-var _chunkWAQPW4CBcjs = require('../../chunk-WAQPW4CB.cjs');
-require('../../chunk-XN6LXMH5.cjs');
-require('../../chunk-LJT2KRE2.cjs');
-require('../../chunk-RB7VLVMD.cjs');
-require('../../chunk-V3W56L2D.cjs');
+var _chunkLDGR5VCKcjs = require('../../chunk-LDGR5VCK.cjs');
+require('../../chunk-ODZ5XGWA.cjs');
+require('../../chunk-YEJWNHD3.cjs');
+require('../../chunk-4XDYSGRL.cjs');
+require('../../chunk-UONQCE5N.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-E64HPPRH.cjs');
-require('../../chunk-2JRSYWFP.cjs');
+require('../../chunk-ZV6RQNXE.cjs');
+require('../../chunk-VXAKQRV7.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-LNCBN4BL.cjs');
-require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-SMEX3BWO.cjs');
 
 
 
-var _chunkNWZSYG4Scjs = require('../../chunk-NWZSYG4S.cjs');
-require('../../chunk-KM2TVQCH.cjs');
-require('../../chunk-EHJE3UWZ.cjs');
-require('../../chunk-KKAY6GPU.cjs');
-require('../../chunk-5QP3K2CE.cjs');
-require('../../chunk-LELS4XMX.cjs');
+var _chunkHLZUBJPLcjs = require('../../chunk-HLZUBJPL.cjs');
+require('../../chunk-FWJ5YECN.cjs');
+require('../../chunk-T7SDYBST.cjs');
+require('../../chunk-QD7SKYCQ.cjs');
+require('../../chunk-AKCBLZAO.cjs');
+require('../../chunk-VZKAAXU3.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1837,20 +1836,21 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-CZIMISAR.cjs');
-require('../../chunk-XXJL5GY3.cjs');
-require('../../chunk-57B5RUYD.cjs');
+require('../../chunk-3IHGS44W.cjs');
+require('../../chunk-OJZBZH56.cjs');
+require('../../chunk-2OYKOHFK.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-OJLZ7PGO.cjs');
-require('../../chunk-MYHS4W2H.cjs');
-require('../../chunk-R3JX4MXD.cjs');
-require('../../chunk-SETFUCZA.cjs');
-require('../../chunk-VFUMM6JC.cjs');
-require('../../chunk-HY6BCZH7.cjs');
+require('../../chunk-JHDPEYZH.cjs');
+require('../../chunk-OHXB6HUX.cjs');
+require('../../chunk-JQWYXC2E.cjs');
+require('../../chunk-Q7HXTF2C.cjs');
+require('../../chunk-HTSRCFXP.cjs');
+require('../../chunk-RYIWADIB.cjs');
+require('../../chunk-AFJEUBDS.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1859,24 +1859,26 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-3LW5TD54.cjs');
-require('../../chunk-ASMNNSUQ.cjs');
+require('../../chunk-DJTPDK3W.cjs');
+require('../../chunk-7PNRXJX2.cjs');
 require('../../chunk-NTPX5GXI.cjs');
-require('../../chunk-VFZFCRAL.cjs');
-require('../../chunk-5P4TDV7V.cjs');
-require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-E76ONBKF.cjs');
+require('../../chunk-AQXKXZWB.cjs');
+require('../../chunk-V4FXUIMH.cjs');
+require('../../chunk-SZHDXXMK.cjs');
+require('../../chunk-IYU2ZH2J.cjs');
+require('../../chunk-5GJM7VRR.cjs');
+require('../../chunk-3VINTJPE.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-YXDHVHB2.cjs');
-require('../../chunk-FL2RMEDX.cjs');
-require('../../chunk-XIFEZ2JT.cjs');
+require('../../chunk-KWV23THO.cjs');
+require('../../chunk-T4ZVKEDP.cjs');
+require('../../chunk-L4XOCV7S.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-WEANWBJH.cjs');
-require('../../chunk-XFRBEXQN.cjs');
-require('../../chunk-TF5D5MNO.cjs');
+require('../../chunk-63OCO2G5.cjs');
+require('../../chunk-YNDH72VU.cjs');
+require('../../chunk-CDBFQVPA.cjs');
+require('../../chunk-N6YCOBLK.cjs');
 require('../../chunk-V45KLJQP.cjs');
-require('../../chunk-65VVJSQZ.cjs');
 require('../../chunk-KHKPLOU4.cjs');
 
 
@@ -1899,5 +1901,4 @@ require('../../chunk-KHKPLOU4.cjs');
 
 
 
-
-exports.HelpCenterCard = _chunkAMVI5VXMcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkAMVI5VXMcjs.HelpCenterCreateForm; exports.HelpCenterCreateFormSkeleton = _chunkAMVI5VXMcjs.HelpCenterCreateFormSkeleton; exports.HelpCenterList = _chunkAMVI5VXMcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunkNWZSYG4Scjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkAMVI5VXMcjs.TOAST_COPY; exports.TicketCenter = _chunkAMVI5VXMcjs.TicketCenter; exports.TicketDetailDrawer = _chunkAMVI5VXMcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkAMVI5VXMcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkWAQPW4CBcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkAMVI5VXMcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkAMVI5VXMcjs.TicketReplyComposer; exports.TicketRow = _chunkAMVI5VXMcjs.TicketRow; exports.buildTicketOpenHref = _chunkNWZSYG4Scjs.buildTicketOpenHref; exports.isOptimistic = _chunkAMVI5VXMcjs.isOptimistic; exports.mapTicketActionError = _chunkAMVI5VXMcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkWAQPW4CBcjs.useOptionalTicketLive; exports.useTicketActions = _chunkAMVI5VXMcjs.useTicketActions; exports.useTicketEngagements = _chunkAMVI5VXMcjs.useTicketEngagements; exports.useTicketLive = _chunkWAQPW4CBcjs.useTicketLive; exports.useTicketsList = _chunkAMVI5VXMcjs.useTicketsList;
+exports.HelpCenterCard = _chunkHPGCUYAZcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkHPGCUYAZcjs.HelpCenterCreateForm; exports.HelpCenterList = _chunkHPGCUYAZcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunkHLZUBJPLcjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkHPGCUYAZcjs.TOAST_COPY; exports.TicketCenter = _chunkHPGCUYAZcjs.TicketCenter; exports.TicketDetailDrawer = _chunkHPGCUYAZcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkHPGCUYAZcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkLDGR5VCKcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkHPGCUYAZcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkHPGCUYAZcjs.TicketReplyComposer; exports.TicketRow = _chunkHPGCUYAZcjs.TicketRow; exports.buildTicketOpenHref = _chunkHLZUBJPLcjs.buildTicketOpenHref; exports.isOptimistic = _chunkHPGCUYAZcjs.isOptimistic; exports.mapTicketActionError = _chunkHPGCUYAZcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkLDGR5VCKcjs.useOptionalTicketLive; exports.useTicketActions = _chunkHPGCUYAZcjs.useTicketActions; exports.useTicketEngagements = _chunkHPGCUYAZcjs.useTicketEngagements; exports.useTicketLive = _chunkLDGR5VCKcjs.useTicketLive; exports.useTicketsList = _chunkHPGCUYAZcjs.useTicketsList;

package/dist/components/tickets/index.d.ts

@@ -6,7 +6,7 @@ export { TicketLinkedDeliveryCard, type TicketLinkedDeliveryCardProps } from './
 export { TicketReplyComposer, type TicketReplyComposerProps } from './ticket-reply-composer';
 export { HelpCenterList, type HelpCenterListProps } from './help-center-list';
 export { HelpCenterCard, type HelpCenterCardProps } from './help-center-card';
-export { HelpCenterCreateForm, HelpCenterCreateFormSkeleton, type HelpCenterCreateFormProps, } from './help-center-create-form';
+export { HelpCenterCreateForm, type HelpCenterCreateFormProps } from './help-center-create-form';
 export { useTicketsList } from './hooks/use-tickets-list';
 export { useTicketActions, mapTicketActionError, type UseTicketActionsReturn } from './hooks/use-ticket-actions';
 export { useTicketEngagements, type TicketEngagement, type TicketEngagementFile } from './hooks/use-ticket-engagements';

package/dist/components/tickets/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC1G,OAAO,EAAE,wBAAwB,EAAE,KAAK,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAC7G,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAO7F,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,KAAK,UAAU,EACf,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,UAAU,IAAI,iBAAiB,EAC/B,YAAY,GACb,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC1G,OAAO,EAAE,wBAAwB,EAAE,KAAK,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAC7G,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAO7F,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,KAAK,UAAU,EACf,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,UAAU,IAAI,iBAAiB,EAC/B,YAAY,GACb,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC"}

package/dist/components/tickets/index.js

@@ -6,10 +6,7 @@ import { TicketLinkedDeliveryCard } from "./ticket-linked-delivery-card.js";
 import { TicketReplyComposer } from "./ticket-reply-composer.js";
 import { HelpCenterList } from "./help-center-list.js";
 import { HelpCenterCard } from "./help-center-card.js";
-import {
-  HelpCenterCreateForm,
-  HelpCenterCreateFormSkeleton
-} from "./help-center-create-form.js";
+import { HelpCenterCreateForm } from "./help-center-create-form.js";
 import { useTicketsList } from "./hooks/use-tickets-list.js";
 import { useTicketActions, mapTicketActionError } from "./hooks/use-ticket-actions.js";
 import { useTicketEngagements } from "./hooks/use-ticket-engagements.js";
@@ -26,7 +23,6 @@ import { TICKET_OPEN_PARAM, buildTicketOpenHref } from "../../utils/dev-sections
 export {
   HelpCenterCard,
   HelpCenterCreateForm,
-  HelpCenterCreateFormSkeleton,
   HelpCenterList,
   TICKET_OPEN_PARAM,
   TOAST_COPY as TICKET_TOAST_COPY,

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":"AAwBA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAwB9D,MAAM,WAAW,iBAAiB;IAChC;kCAC8B;IAC9B,KAAK,CAAC,EAAE,OAAO,YAAY,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAoB,EAAE,GAAE,iBAAsB,+BAI5E"}
+{"version":3,"file":"ticket-center.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-center.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAsB9D,MAAM,WAAW,iBAAiB;IAChC;kCAC8B;IAC9B,KAAK,CAAC,EAAE,OAAO,YAAY,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAoB,EAAE,GAAE,iBAAsB,+BAI5E"}

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

@@ -5,15 +5,14 @@ import { RefreshCw } from "lucide-react";
 import { useCallback, useState } from "react";
 import { toast as defaultToast } from "../../hooks/use-toast.js";
 import { devSectionAnchorId } from "../../utils/dev-sections/dev-section-param-keys.js";
-import { ChatTicketItemSkeleton } from "../chat/entity-cards/chat-ticket-item.js";
 import { useChatIdentity } from "../chat/hooks/use-chat-identity.js";
 import { EmptyState } from "../empty-state.js";
 import { usePageDataSync } from "../layout/page-data-sync.js";
-import { LoadingRegion } from "../loading/loading-region.js";
+import { LoadingFallback } from "../loading/loading-fallback.js";
 import { Button } from "../ui/button/index.js";
 import { Card } from "../ui/card.js";
 import { DataSyncLine } from "../ui/data-attribution.js";
-import { LoadingScope, useLoadingScope } from "../ui/loading-scope.js";
+import { LoadingItems, useLoadingScope } from "../ui/loading-scope.js";
 import { useTicketActions } from "./hooks/use-ticket-actions.js";
 import { TICKETS_PAGE_SIZE, useTicketsList } from "./hooks/use-tickets-list.js";
 import { TicketOpenForm } from "./ticket-open-form.js";
@@ -21,7 +20,6 @@ import { TicketRow } from "./ticket-row.js";
 import { isOptimistic } from "./types.js";
 const TICKET_CENTER_CLASS = "flex flex-col gap-6";
 const TICKET_LIST_BLOCK_CLASS = "flex flex-col gap-2";
-const TICKET_ROW_FRAME_CLASS = "border-b border-ods-border last:border-b-0";
 function TicketCenter({ toast = defaultToast } = {}) {
   if (useLoadingScope()) return /* @__PURE__ */ jsx(TicketCenterPending, { region: false });
   return /* @__PURE__ */ jsx(TicketCenterGate, { toast });
@@ -98,6 +96,7 @@ function TicketCenterAuthed({
       renderRow: (ticket) => /* @__PURE__ */ jsx(
         TicketRow,
         {
+          "data-loading-item": true,
           id: devSectionAnchorId("ticket", ticket.external_id),
           ticket,
           expanded: expandedTicketId === ticket.id,
@@ -118,7 +117,7 @@ function TicketCenterPending({
   region = true
 } = {}) {
   const syncInPage = usePageDataSync(null, true);
-  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading tickets", announce: region, children: /* @__PURE__ */ jsx(LoadingScope, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(LoadingFallback, { label: "Loading tickets", status: region, children: /* @__PURE__ */ jsx(
     TicketCenterView,
     {
       tickets: [],
@@ -130,7 +129,7 @@ function TicketCenterPending({
       supportSystemDown: false,
       renderRow: () => null
     }
-  ) }) });
+  ) });
 }
 function TicketCenterView({
   tickets,
@@ -197,14 +196,7 @@ function TicketListHeader({
   ] });
 }
 function TicketListSkeleton() {
-  return /* @__PURE__ */ jsx(Card, { className: "overflow-hidden", children: Array.from({ length: TICKETS_PAGE_SIZE }, (_, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: TICKET_ROW_FRAME_CLASS,
-      children: /* @__PURE__ */ jsx(ChatTicketItemSkeleton, {})
-    },
-    i
-  )) });
+  return /* @__PURE__ */ jsx(Card, { className: "overflow-hidden", children: /* @__PURE__ */ jsx(LoadingItems, { count: TICKETS_PAGE_SIZE, children: () => /* @__PURE__ */ jsx(TicketRow, { loading: true, "data-loading-item": true }) }) });
 }
 export {
   TicketCenter

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":"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"}
+{"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;AAW/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

@@ -4,10 +4,11 @@ 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 { ChatMessageRow } from "../chat/chat-message-row.js";
 import { useChatIdentity } from "../chat/hooks/use-chat-identity.js";
 import { EmptyState } from "../empty-state.js";
 import { Button } from "../ui/button/index.js";
+import { LoadingItems } from "../ui/loading-scope.js";
 import { SquareAvatar } from "../ui/square-avatar.js";
 import { TicketAttachmentsList } from "../ui/ticket-attachments-list.js";
 import { useTicketEngagements } from "./hooks/use-ticket-engagements.js";
@@ -104,7 +105,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(LoadingRegion, { label: "Loading messages", 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: /* @__PURE__ */ jsx(LoadingItems, { count: TICKET_FEED_SKELETON_ROWS, children: () => /* @__PURE__ */ jsx(ChatMessageRow, { loading: true, displayName: "", body: "", "data-loading-item": true }) }) }) });
   }
   if (bodyTurns.length === 0 && engagements.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -125,6 +126,7 @@ function TicketTimelinePanel({ ticket }) {
       return /* @__PURE__ */ jsx(
         ChatMessageRow,
         {
+          "data-loading-item": true,
           displayName: customerName,
           avatarUrl: customerAvatar,
           body: text
@@ -154,6 +156,7 @@ function TicketTimelinePanel({ ticket }) {
       return /* @__PURE__ */ jsx(
         ChatMessageRow,
         {
+          "data-loading-item": true,
           displayName: author,
           avatarUrl: avatarSrc,
           timeLabel: eng.createdAt ? formatRelativeTime(eng.createdAt) : null,

package/dist/components/tickets/ticket-open-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-open-form.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-open-form.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAS7E,MAAM,WAAW,mBAAmB;IAClC;wCACoC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,cAAc,EAAE,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3G,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,mBAAmB,+BA6GhG"}
+{"version":3,"file":"ticket-open-form.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-open-form.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAU7E,MAAM,WAAW,mBAAmB;IAClC;wCACoC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,cAAc,EAAE,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3G,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,mBAAmB,+BA6GhG"}

package/dist/components/tickets/ticket-open-form.js

@@ -7,6 +7,7 @@ import { useChatAttachments } from "../chat/hooks/use-chat-attachments.js";
 import { Button } from "../ui/button/index.js";
 import { Card } from "../ui/card.js";
 import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
 import { Textarea } from "../ui/textarea.js";
 import { TICKET_TEXT_MAX_CHARS } from "./types.js";
 const COUNTER_VISIBLE_AT = Math.floor(TICKET_TEXT_MAX_CHARS * 0.8);
@@ -41,7 +42,7 @@ function TicketOpenForm({ onSubmit, isSubmitting, supportSystemDown }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "ticket-subject", className: "mb-1 block text-ods-text-primary text-h6", children: "Ticket Subject" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "ticket-subject", className: "mb-1", children: "Ticket Subject" }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -56,7 +57,7 @@ function TicketOpenForm({ onSubmit, isSubmitting, supportSystemDown }) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "ticket-content", className: "mb-1 block text-ods-text-primary text-h6", children: "Your Message" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "ticket-content", className: "mb-1", children: "Your Message" }),
         /* @__PURE__ */ jsx(
           Textarea,
           {

package/dist/components/tickets/ticket-row.d.ts

@@ -1,6 +1,7 @@
 import { type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import type { AnyTicket } from './types';
-export interface TicketRowProps {
+/** A read ticket's row. */
+export interface TicketRowLoadedProps {
     ticket: AnyTicket;
     expanded: boolean;
     onToggle: (ticketId: string) => void;
@@ -17,6 +18,20 @@ export interface TicketRowProps {
      *  resolves it. `scroll-mt-24` is already baked into the outer
      *  element regardless. */
     id?: string;
+    loading?: false;
 }
-export declare function TicketRow({ ticket, expanded, onToggle, busy, supportSystemDown, onSendMessage, onClose, onReopen, onActionCollapsed, id, }: TicketRowProps): import("react").JSX.Element;
+/** A row while its ticket is read: the same frame with the summary tile's loading form, and no drawer. */
+export interface TicketRowLoadingProps {
+    loading: true;
+    id?: string;
+}
+/** A ticket row, or (`loading`) its loading form. List markers (`data-loading-item`) are forwarded in both forms. */
+export type TicketRowProps = (TicketRowLoadedProps | TicketRowLoadingProps) & {
+    [key: `data-${string}`]: unknown;
+};
+/**
+ * A ticket row. ONE switch (`useLoadingScope() || loading`): while the ticket is read the row draws the same frame
+ * with `ChatTicketItem loading` (its own loading form), else the summary tile and its drawer.
+ */
+export declare function TicketRow(props: TicketRowProps): import("react").JSX.Element;
 //# sourceMappingURL=ticket-row.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ticket-row.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-row.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACxD,OAAO,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC5C,QAAQ,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAC;IAC9C;yEACqE;IACrE,iBAAiB,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IAChE;;;8BAG0B;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,EAAE,GACH,EAAE,cAAc,+BAoFhB"}
+{"version":3,"file":"ticket-row.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/ticket-row.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAQzC,2BAA2B;AAC3B,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACxD,OAAO,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC5C,QAAQ,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAC;IAC9C;yEACqE;IACrE,iBAAiB,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IAChE;;;8BAG0B;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,0GAA0G;AAC1G,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,IAAI,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,qHAAqH;AACrH,MAAM,MAAM,cAAc,GAAG,CAAC,oBAAoB,GAAG,qBAAqB,CAAC,GAAG;IAC5E,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAW9C"}

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

@@ -5,9 +5,18 @@ import { formatRelativeTime } from "../../utils/date-utils.js";
 import { scrollElementIntoView } from "../../utils/scroll-into-view.js";
 import { ChatTicketItem } from "../chat/entity-cards/chat-ticket-item.js";
 import { Collapsible, CollapsibleContent } from "../collapsible.js";
+import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { TicketDetailDrawer } from "./ticket-detail-drawer.js";
 import { isOptimistic } from "./types.js";
-function TicketRow({
+const TICKET_ROW_FRAME_CLASS = "border-b border-ods-border last:border-b-0";
+const TICKET_ROW_OUTER_CLASS = "scroll-mt-24";
+function TicketRow(props) {
+  if (useLoadingScope() || props.loading) {
+    return /* @__PURE__ */ jsx("div", { id: props.id, className: TICKET_ROW_OUTER_CLASS, ...loadingItemProps(props), children: /* @__PURE__ */ jsx("div", { className: TICKET_ROW_FRAME_CLASS, children: /* @__PURE__ */ jsx(ChatTicketItem, { loading: true }) }) });
+  }
+  return /* @__PURE__ */ jsx(TicketRowLoaded, { ...props });
+}
+function TicketRowLoaded({
   ticket,
   expanded,
   onToggle,
@@ -17,7 +26,8 @@ function TicketRow({
   onClose,
   onReopen,
   onActionCollapsed,
-  id
+  id,
+  ...markers
 }) {
   const optimistic = isOptimistic(ticket);
   const rowRef = useRef(null);
@@ -55,7 +65,7 @@ function TicketRow({
     // when the task exists but its status hasn't synced yet.
     linkedTaskLabel: ticket.clickup ? ticket.clickup.status ? ticket.clickup.status.replace(/\b\w/g, (c) => c.toUpperCase()) : "Linked work" : void 0
   };
-  return /* @__PURE__ */ jsx("div", { ref: rowRef, id, className: "scroll-mt-24", children: /* @__PURE__ */ jsxs(Collapsible, { open: expanded && !optimistic, className: "border-b border-ods-border last:border-b-0", children: [
+  return /* @__PURE__ */ jsx("div", { ref: rowRef, id, className: TICKET_ROW_OUTER_CLASS, ...loadingItemProps(markers), children: /* @__PURE__ */ jsxs(Collapsible, { open: expanded && !optimistic, className: TICKET_ROW_FRAME_CLASS, children: [
     /* @__PURE__ */ jsx(
       ChatTicketItem,
       {

package/dist/components/ui/actions-menu.d.ts

@@ -71,6 +71,9 @@ export interface ActionsMenuDropdownProps extends ActionsMenuProps {
     /** Forwarded to the dropdown content — e.g. `e.preventDefault()` to stop
      *  Radix returning focus (and its focus ring) to the trigger on close. */
     onCloseAutoFocus?: (event: Event) => void;
+    /** The menu's subject is still being read: the trigger (default or custom) is drawn for real and inert, and the menu
+     *  cannot open. A loading scope does the same. */
+    loading?: boolean;
 }
 export declare const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps>;
 export default ActionsMenu;

package/dist/components/ui/actions-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/actions-menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAc3C,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CACxC;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAyOD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0BlD,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+GAA+G;IAC/G,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;8EAC0E;IAC1E,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqGlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"actions-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/actions-menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAe3C,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CACxC;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AA0ND,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0BlD,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+GAA+G;IAC/G,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;8EAC0E;IAC1E,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C;sDACkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiHlE,CAAC;AAEF,eAAe,WAAW,CAAC"}