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

package/dist/components/shared/roadmap/roadmap-grid.d.ts

@@ -37,18 +37,8 @@ export interface RoadmapGridProps {
      * Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count for a roadmap that lists everything it holds.
      */
     skeletonCount?: number;
-    /** @deprecated Use `skeletonCount`. */
+    /** @deprecated Ignored: the skeleton draws `skeletonCount` (a list draws its full count, never a fold). */
     fold?: number;
 }
-/**
- * The quarter-grouped grid while its items are read: one quarter, its heading and item count as bars, then the
- * grid's card skeletons.
- */
-export declare function RoadmapGridQuarterSkeleton({ showLeftMargin, columns, count, }: {
-    showLeftMargin?: boolean;
-    columns?: 1 | 2;
-    /** The quarter's skeleton cards. Default the grid skeleton's own. */
-    count?: number;
-}): import("react").JSX.Element;
-export declare function RoadmapGrid({ items, onItemUpdate, showLeftMargin, columns, buildRefreshUrl, votingOptions, groupByQuarter, hasActiveFilters, quartersToKeepClosed, isLoading, skeletonCount, fold, }: RoadmapGridProps): import("react").JSX.Element;
+export declare function RoadmapGrid({ items, onItemUpdate, showLeftMargin, columns, buildRefreshUrl, votingOptions, groupByQuarter, hasActiveFilters, quartersToKeepClosed, isLoading, skeletonCount, }: RoadmapGridProps): import("react").JSX.Element;
 //# sourceMappingURL=roadmap-grid.d.ts.map

package/dist/components/shared/roadmap/roadmap-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roadmap-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/roadmap/roadmap-grid.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAoB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AA6DtF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD;oEACgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,yEAAyE;IACzE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,yDAAyD;IACzD,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC;;;kEAG8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;qEACiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;qDACiD;IACjD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0HAA0H;IAC1H,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAiDD;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,cAAqB,EACrB,OAAW,EACX,KAAK,GACN,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAiBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,cAAqB,EACrB,OAAW,EACX,eAA2C,EAC3C,aAAa,EACb,cAAsB,EACtB,gBAAwB,EACxB,oBAAwB,EACxB,SAAiB,EACjB,aAAa,EACb,IAAI,GACL,EAAE,gBAAgB,+BAsLlB"}
+{"version":3,"file":"roadmap-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/roadmap/roadmap-grid.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAoB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAgHtF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD;oEACgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,yEAAyE;IACzE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,yDAAyD;IACzD,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC;;;kEAG8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;qEACiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;qDACiD;IACjD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0HAA0H;IAC1H,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2GAA2G;IAC3G,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAiFD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,cAAqB,EACrB,OAAW,EACX,eAA2C,EAC3C,aAAa,EACb,cAAsB,EACtB,gBAAwB,EACxB,oBAAwB,EACxB,SAAiB,EACjB,aAAa,GACd,EAAE,gBAAgB,+BAqLlB"}

package/dist/components/shared/roadmap/roadmap-grid.js

@@ -6,11 +6,23 @@ import { devSectionAnchorId } from "../../../utils/dev-sections/dev-section-para
 import { contentFetch } from "../../../utils/embed-content-fetch.js";
 import { RoadmapCard } from "../../chat/entity-cards/roadmap-card.js";
 import { EmptyState } from "../../empty-state.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
 import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../ui/index.js";
 import { useLoadingScope } from "../../ui/loading-scope.js";
-import { RoadmapGridSkeleton, roadmapGridClass } from "./roadmap-grid-skeleton.js";
 import { useRoadmapVoting } from "./use-roadmap-voting.js";
+function roadmapGridClass(columns, showLeftMargin) {
+  return `grid grid-cols-1 gap-6 ${columns === 2 ? "content-md:grid-cols-2" : ""} ${showLeftMargin ? "content-md:ml-[120px]" : ""}`;
+}
+const ROADMAP_GRID_SKELETON_CARDS = 4;
+function RoadmapGridSkeleton({
+  region = true,
+  count = ROADMAP_GRID_SKELETON_CARDS,
+  showLeftMargin = true,
+  columns = 2
+}) {
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the roadmap", announce: region, className: roadmapGridClass(columns, showLeftMargin), children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "min-w-0", "data-loading-item": true, children: /* @__PURE__ */ jsx(RoadmapCard, { loading: true }) }, i)) });
+}
 const DEFAULT_BUILD_REFRESH_URL = (taskId) => `/api/roadmap/${taskId}`;
 const BACKLOG = "Backlog";
 function getStatusPriority(status) {
@@ -107,10 +119,8 @@ function RoadmapGrid({
   hasActiveFilters = false,
   quartersToKeepClosed = 2,
   isLoading = false,
-  skeletonCount,
-  fold
+  skeletonCount
 }) {
-  const skeletonCards = skeletonCount ?? fold;
   const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
   const inScope = useLoadingScope();
   const [votingTasks, setVotingTasks] = useState(/* @__PURE__ */ new Set());
@@ -182,7 +192,7 @@ function RoadmapGrid({
     );
   }, [hasActiveFilters, sortedQuartersKey, isInitialized, quartersToKeepClosed]);
   if (inScope || isLoading) {
-    return groupByQuarter ? /* @__PURE__ */ jsx(RoadmapGridQuarterSkeleton, { showLeftMargin, columns, count: skeletonCards }) : /* @__PURE__ */ jsx(RoadmapGridSkeleton, { region: !inScope, count: skeletonCards, showLeftMargin, columns });
+    return groupByQuarter ? /* @__PURE__ */ jsx(RoadmapGridQuarterSkeleton, { showLeftMargin, columns, count: skeletonCount }) : /* @__PURE__ */ jsx(RoadmapGridSkeleton, { region: !inScope, count: skeletonCount, showLeftMargin, columns });
   }
   if (items.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -275,6 +285,5 @@ function RoadmapGrid({
   );
 }
 export {
-  RoadmapGrid,
-  RoadmapGridQuarterSkeleton
+  RoadmapGrid
 };

package/dist/components/shared/roadmap/roadmap-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roadmap-view.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/roadmap/roadmap-view.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAUpE,MAAM,WAAW,gBAAgB;IAC/B;0BACsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,yDAAyD;IACzD,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC;iEAC6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;iEAC6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAA2B,EAC3B,YAAY,EACZ,cAAc,EACd,eAAe,EACf,aAAa,EACb,cAAyC,EACzC,cAAyC,GAC1C,GAAE,gBAAqB,+BAuEvB"}
+{"version":3,"file":"roadmap-view.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/roadmap/roadmap-view.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAYpE,MAAM,WAAW,gBAAgB;IAC/B;0BACsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,yDAAyD;IACzD,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC;iEAC6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;iEAC6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAA2B,EAC3B,YAAY,EACZ,cAAc,EACd,eAAe,EACf,aAAa,EACb,cAAyC,EACzC,cAAyC,GAC1C,GAAE,gBAAqB,+BAuEvB"}

package/dist/components/shared/roadmap/roadmap-view.js

@@ -9,8 +9,9 @@ import { STICKY_HEADER_OFFSET_PX } from "../../../utils/same-page-hash-nav.js";
 import { usePageDataSync } from "../../layout/page-data-sync.js";
 import { DataSyncLine } from "../../ui/data-attribution.js";
 import { LoadError } from "../../ui/error-state.js";
-import { RoadmapGrid, RoadmapGridQuarterSkeleton } from "./roadmap-grid.js";
+import { RoadmapGrid } from "./roadmap-grid.js";
 const DEFAULT_ENDPOINT = "/api/roadmap";
+const NO_ITEMS = [];
 const SYNCED_LIST_CLASS = "flex w-full flex-col gap-[var(--spacing-system-lf)]";
 const DEFAULT_SEARCH_PARAM_KEY = DEV_SECTION_PARAM_KEYS.search;
 const DEFAULT_STATUS_PARAM_KEY = DEV_SECTION_PARAM_KEYS.status;
@@ -44,7 +45,7 @@ function RoadmapView({
   if (isLoading && !data) {
     return /* @__PURE__ */ jsxs("div", { className: SYNCED_LIST_CLASS, children: [
       !syncInPage && /* @__PURE__ */ jsx(DataSyncLine, { loading: true }),
-      /* @__PURE__ */ jsx(RoadmapGridQuarterSkeleton, { showLeftMargin })
+      /* @__PURE__ */ jsx(RoadmapGrid, { items: NO_ITEMS, isLoading: true, groupByQuarter: true, showLeftMargin })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: SYNCED_LIST_CLASS, children: [

package/dist/components/smooth-accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"smooth-accordion.d.ts","sourceRoot":"","sources":["../../src/components/smooth-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,eAAe,kLAA0B,CAAC;AAGvD,eAAO,MAAM,mBAAmB,+LAK9B,CAAC;AAIH,UAAU,2BAA4B,SAAQ,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IACvG,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,2HAsBlC,CAAC;AAKF,eAAO,MAAM,sBAAsB;mBAI8C,MAAM,GAAG,QAAQ;kDA6DhG,CAAC"}
+{"version":3,"file":"smooth-accordion.d.ts","sourceRoot":"","sources":["../../src/components/smooth-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,eAAe,kLAA0B,CAAC;AAGvD,eAAO,MAAM,mBAAmB,+LAK9B,CAAC;AAIH,UAAU,2BAA4B,SAAQ,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IACvG,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,2HAoBlC,CAAC;AAKF,eAAO,MAAM,sBAAsB;mBAI8C,MAAM,GAAG,QAAQ;kDA6DhG,CAAC"}

package/dist/components/smooth-accordion.js

@@ -30,8 +30,6 @@ const SmoothAccordionTrigger = forwardRef(
           {
             size: "md",
             isExpanded: false,
-            backgroundColor: "transparent",
-            borderColor: "var(--color-border-default)",
             className: "transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180"
           }
         )

package/dist/components/social-icon-row.d.ts

@@ -15,6 +15,11 @@ interface SocialIconRowProps {
      *  presentation-only here — the caller must still gate which links it passes
      *  server-side. Default false keeps a single flat row. */
     groupByVisibility?: boolean;
+    /**
+     * The links are a read list (a person's profiles, whose number is the data's): every button carries
+     * `data-loading-item`, as the caller's loading state's buttons do. Default false (a fixed set, e.g. the defaults).
+     */
+    listItems?: boolean;
 }
 /** The icon of a social platform, or `undefined` for a platform with no art yet. */
 export declare function socialIcon(platform: string): IconComponent | undefined;
@@ -26,6 +31,6 @@ export declare function socialIconButtonProps(compact?: boolean): {
     size: 'icon-sm' | 'icon';
     className?: string;
 };
-export declare function SocialIconRow({ className, links, variant, compact, groupByVisibility, }: SocialIconRowProps): import("react").JSX.Element;
+export declare function SocialIconRow({ className, links, variant, compact, groupByVisibility, listItems, }: SocialIconRowProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=social-icon-row.d.ts.map

package/dist/components/social-icon-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"social-icon-row.d.ts","sourceRoot":"","sources":["../../src/components/social-icon-row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAU,KAAK,aAAa,EAAgB,MAAM,2BAA2B,CAAC;AAGrF,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IAClF;;;;yEAIqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;8DAG0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA0CD,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAGtE;AAUD,0HAA0H;AAC1H,wBAAgB,kBAAkB,CAAC,OAAO,UAAQ,GAAG,MAAM,CAE1D;AAED;kDACkD;AAClD,wBAAgB,qBAAqB,CAAC,OAAO,UAAQ,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEvG;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAc,EACd,KAAoB,EACpB,OAAO,EACP,OAAe,EACf,iBAAyB,GAC1B,EAAE,kBAAkB,+BAkEpB"}
+{"version":3,"file":"social-icon-row.d.ts","sourceRoot":"","sources":["../../src/components/social-icon-row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAU,KAAK,aAAa,EAAgB,MAAM,2BAA2B,CAAC;AAGrF,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IAClF;;;;yEAIqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;8DAG0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0CD,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAGtE;AAUD,0HAA0H;AAC1H,wBAAgB,kBAAkB,CAAC,OAAO,UAAQ,GAAG,MAAM,CAE1D;AAED;kDACkD;AAClD,wBAAgB,qBAAqB,CAAC,OAAO,UAAQ,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEvG;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAc,EACd,KAAoB,EACpB,OAAO,EACP,OAAe,EACf,iBAAyB,EACzB,SAAiB,GAClB,EAAE,kBAAkB,+BAqEpB"}

package/dist/components/social-icon-row.js

@@ -49,9 +49,11 @@ function SocialIconRow({
   links = defaultLinks,
   variant,
   compact = false,
-  groupByVisibility = false
+  groupByVisibility = false,
+  listItems = false
 }) {
   const resolvedVariant = variant !== void 0 ? variant : compact ? "transparent" : "outline";
+  const marker = { "data-loading-item": listItems || void 0 };
   const renderButton = (link, index) => {
     const ariaLabel = link.label || link.platform;
     return link.onClick ? /* @__PURE__ */ jsx(
@@ -62,6 +64,7 @@ function SocialIconRow({
         ...socialIconButtonProps(compact),
         "aria-label": ariaLabel,
         onClick: link.onClick,
+        ...marker,
         children: renderSocialIcon(link.platform)
       },
       index
@@ -77,6 +80,7 @@ function SocialIconRow({
           href: link.href,
           openInNewTab: true,
           "aria-label": ariaLabel,
+          ...marker,
           children: renderSocialIcon(link.platform)
         },
         index

package/dist/components/tickets/help-center-card.d.ts

@@ -1,6 +1,19 @@
 import { type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import type { AnyTicket } from './types';
-export interface HelpCenterCardProps {
+/** A row whose ticket is still read (a list's loading form): only its DOM id and the list's markers. */
+export interface HelpCenterCardLoadingProps {
+    ticket: null;
+    id?: string;
+    /** The list's markers (`data-loading-item`), on the row's root. */
+    [key: `data-${string}`]: unknown;
+}
+export type HelpCenterCardProps = HelpCenterCardLoadedProps | HelpCenterCardLoadingProps;
+/**
+ * One Help Center row, loaded and loading. ONE switch: in a loading scope, or with `ticket={null}` (the list's loading
+ * form), it is its own {@link HelpCenterCardSkeleton}; the list never picks it.
+ */
+export declare function HelpCenterCard(props: HelpCenterCardProps): import("react").JSX.Element;
+export interface HelpCenterCardLoadedProps {
     ticket: AnyTicket;
     expanded: boolean;
     onToggle: (id: string) => void;
@@ -20,6 +33,7 @@ export interface HelpCenterCardProps {
      *  offset is already baked in via `STICKY_HEADER_OFFSET_PX` so the row
      *  lands BELOW the chrome regardless of whether `id` is set. */
     id?: string;
+    /** The list's markers (`data-loading-item`), on the row's root. */
+    [key: `data-${string}`]: unknown;
 }
-export declare function HelpCenterCard({ ticket, expanded, onToggle, busy, supportSystemDown, onSendMessage, onClose, onReopen, onActionCollapsed, replyError, onClearReplyError, id, }: HelpCenterCardProps): import("react").JSX.Element;
 //# sourceMappingURL=help-center-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"help-center-card.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/help-center-card.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAE1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,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,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;6EACyE;IACzE,UAAU,CAAC,EAAE,uBAAuB,CAAC,YAAY,CAAC,CAAC;IACnD,iBAAiB,CAAC,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IACjE;;;;oEAIgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,EAAE,GACH,EAAE,mBAAmB,+BA+HrB"}
+{"version":3,"file":"help-center-card.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/help-center-card.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAE1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,wGAAwG;AACxG,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAMD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GAAG,0BAA0B,CAAC;AAEzF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAIxD;AAaD,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,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,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;6EACyE;IACzE,UAAU,CAAC,EAAE,uBAAuB,CAAC,YAAY,CAAC,CAAC;IACnD,iBAAiB,CAAC,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IACjE;;;;oEAIgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC"}

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

@@ -1,16 +1,29 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from "react";
+import { cn } from "../../utils/cn.js";
 import { formatRelativeTime } from "../../utils/date-utils.js";
 import { STICKY_HEADER_OFFSET_PX } from "../../utils/same-page-hash-nav.js";
 import { scrollElementIntoView } from "../../utils/scroll-into-view.js";
 import { getStatusColorScheme } from "../chat/utils/agent-status-message.js";
 import { DevCardRowContent } from "../shared/dev-section/dev-card-row.js";
 import { StatusBadge } from "../ui/index.js";
+import { Button } from "../ui/button/index.js";
+import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { TicketDetailDrawer } from "./ticket-detail-drawer.js";
 import { useOptionalTicketLive } from "./ticket-live-provider.js";
 import { isOptimistic } from "./types.js";
-function HelpCenterCard({
+const HELP_CENTER_ROW_CLASS = "border-b border-ods-border last:border-b-0";
+const HELP_CENTER_SUMMARY_PAD_CLASS = "w-full p-[12px] content-md:p-[16px]";
+function HelpCenterCard(props) {
+  const inScope = useLoadingScope();
+  if (inScope || props.ticket === null) return /* @__PURE__ */ jsx(HelpCenterCardSkeleton, { id: props.id, ...loadingItemProps(props) });
+  return /* @__PURE__ */ jsx(HelpCenterCardLoaded, { ...props });
+}
+function HelpCenterCardSkeleton({ id, ...props }) {
+  return /* @__PURE__ */ jsx("div", { id, className: HELP_CENTER_ROW_CLASS, "aria-hidden": true, ...loadingItemProps(props), children: /* @__PURE__ */ jsx("div", { className: HELP_CENTER_SUMMARY_PAD_CLASS, children: /* @__PURE__ */ jsx(DevCardRowContent, { loading: true, title: "", subtitle: "", description: "", rightBadges: null }) }) });
+}
+function HelpCenterCardLoaded({
   ticket,
   expanded,
   onToggle,
@@ -22,7 +35,8 @@ function HelpCenterCard({
   onActionCollapsed,
   replyError,
   onClearReplyError,
-  id
+  id,
+  ...props
 }) {
   const optimistic = isOptimistic(ticket);
   const rawStatus = (ticket.status ?? "OPEN").toUpperCase();
@@ -49,9 +63,11 @@ function HelpCenterCard({
   const live = useOptionalTicketLive();
   const unreadCount = !optimistic && ticket.external_id && live?.unreadByTicket[ticket.external_id] || 0;
   const rightBadges = /* @__PURE__ */ jsxs(Fragment, { children: [
-    unreadCount > 0 && /* @__PURE__ */ jsx(
+    unreadCount > 0 && // Only rows with unread replies carry it; the row's loading form draws the status badge alone.
+    /* @__PURE__ */ jsx(
       StatusBadge,
       {
+        "data-loading-optional": true,
         text: `${unreadCount} NEW`,
         colorScheme: "warning",
         variant: "card",
@@ -67,9 +83,11 @@ function HelpCenterCard({
         className: "border border-ods-border"
       }
     ),
-    priority && /* @__PURE__ */ jsx(
+    priority && // Not every ticket states a priority; the row's loading form draws the status badge alone.
+    /* @__PURE__ */ jsx(
       StatusBadge,
       {
+        "data-loading-optional": true,
         text: priority,
         colorScheme: mapPriorityScheme(priority),
         variant: "card",
@@ -83,19 +101,20 @@ function HelpCenterCard({
       ref: rowRef,
       id,
       style: { scrollMarginTop: STICKY_HEADER_OFFSET_PX },
-      className: `border-b border-ods-border last:border-b-0 ${optimistic ? "opacity-60" : ""}`,
+      className: `${HELP_CENTER_ROW_CLASS} ${optimistic ? "opacity-60" : ""}`,
       "aria-busy": optimistic || void 0,
+      ...loadingItemProps(props),
       children: [
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "card",
             type: "button",
             onClick: isExpandable ? handleClick : void 0,
             disabled: !isExpandable,
             "aria-expanded": isExpandable ? isExpanded : void 0,
             "aria-controls": isExpanded ? `help-center-drawer-${ticket.id}` : void 0,
-            className: "w-full p-[12px] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent disabled:cursor-default content-md:p-[16px]",
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx("span", { className: cn("block", HELP_CENTER_SUMMARY_PAD_CLASS), children: /* @__PURE__ */ jsx(
               DevCardRowContent,
               {
                 title,
@@ -104,7 +123,7 @@ function HelpCenterCard({
                 emptyDescription: "No description provided",
                 rightBadges
               }
-            )
+            ) })
           }
         ),
         isExpanded && /* @__PURE__ */ jsx("div", { id: `help-center-drawer-${ticket.id}`, children: /* @__PURE__ */ jsx(

package/dist/components/tickets/help-center-create-form.d.ts

@@ -1,5 +1,5 @@
 import type { UseTicketActionsReturn } from './hooks/use-ticket-actions';
-export interface HelpCenterCreateFormProps {
+interface HelpCenterCreateFormLoadedProps {
     /** The full actions bag from `useTicketActions` — we read
      *  `submitTicket` from it. Passing the whole bag (rather than just
      *  the one method) keeps the wiring shape consistent with other
@@ -22,43 +22,21 @@ export interface HelpCenterCreateFormProps {
      *  is down. Wired from the parent's
      *  `useTicketActions.onSupportSystemDown` flag. */
     supportSystemDown?: boolean;
+    /** Not loading: the form. */
+    loading?: false;
 }
 /**
- * Loading placeholder that mirrors `<HelpCenterCreateForm>`'s outer
- * dimensions PIXEL-FOR-PIXEL so the page chrome doesn't shift when
- * identity resolves and the real form mounts.
- *
- * Verified against live DOM bounding-rect measurements at the lg
- * breakpoint — every section's top + height matches the real form to
- * the pixel (skeleton wrapper 556px == real wrapper 556px). Each
- * section uses the SAME flex / spacing / padding classes the real
- * form uses, so the gaps propagate identically; only the inner
- * content swaps an `<Input>` / `<Textarea>` / `<Button>` for a
- * same-sized animated `bg-ods-border` bar.
- *
- *   wrapper          → `p-6 content-md:p-8 content-lg:p-10` + border + rounded-3xl
- *   heading area     → 56px (`mb-6 content-md:mb-8` container, h-10 inner bar
- *                       + `mb-3 content-md:mb-4` = 40 + 16)
- *   subject section  → 79px (`h-[27px]` label + `mb-1` (4px) + h-12
- *                       input = 27 + 4 + 48)
- *   message section  → 127px (`h-[27px]` label + `mb-1` + h-24
- *                       textarea = 27 + 4 + 96)
- *   attachments row  → 28px (h-7 add button + helper label)
- *   footer           → 56px (h-12 button + `pt-2 mt-auto`)
- *   between sections → `space-y-4 content-md:space-y-6` (16/24px)
- *
- * One non-obvious detail: the real `<ContactForm>` renders 4
- * `<input type="hidden">` registrations BEFORE the visible Subject
- * section (for the hidden name/email/helpCategory/message fields).
- * Tailwind's `space-y-*` rule (`:not([hidden]) ~ :not([hidden])`)
- * counts `type="hidden"` inputs as siblings, so Subject gets a 24px
- * top margin. The skeleton mirrors those 4 hidden inputs exactly so
- * the spacing rule fires identically — without them the whole stack
- * shifts up 24px on every page load.
+ * The form's props. `loading: true` (the session identity is still being read): the form draws its own loading state
+ * (as in a page's loading scope), at the loaded form's size, and the other props may be left out.
  */
-export declare function HelpCenterCreateFormSkeleton({ region, }?: {
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}): import("react").JSX.Element;
-export declare function HelpCenterCreateForm({ actions, sessionName, sessionEmail, supportSystemDown, }: HelpCenterCreateFormProps): import("react").JSX.Element;
+export type HelpCenterCreateFormProps = HelpCenterCreateFormLoadedProps | ({
+    loading: true;
+} & Partial<Omit<HelpCenterCreateFormLoadedProps, 'loading'>>);
+/**
+ * The ticket form. ONE structure: while the session identity is read (`loading`) it is the SAME form in a loading
+ * scope (its title, labels and footer copy real, each field and control its own loading form), announced once (an
+ * outer scope has already said it); in a page's loading scope it draws the same way.
+ */
+export declare function HelpCenterCreateForm(props: HelpCenterCreateFormProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=help-center-create-form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"help-center-create-form.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/help-center-create-form.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAIzE,MAAM,WAAW,yBAAyB;IACxC;;;;;uEAKmE;IACnE,OAAO,EAAE,sBAAsB,CAAC;IAChC;;;;;;;;2EAQuE;IACvE,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;uDAEmD;IACnD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAa,GACd,GAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CACb,+BAwEL;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,WAAW,EACX,YAAY,EACZ,iBAAyB,GAC1B,EAAE,yBAAyB,+BA4E3B"}
+{"version":3,"file":"help-center-create-form.d.ts","sourceRoot":"","sources":["../../../src/components/tickets/help-center-create-form.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAIzE,UAAU,+BAA+B;IACvC;;;;;uEAKmE;IACnE,OAAO,EAAE,sBAAsB,CAAC;IAChC;;;;;;;;2EAQuE;IACvE,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;uDAEmD;IACnD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GACnC,+BAA+B,GAAG,CAAC;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,+BAA+B,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAEpH;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,+BAUpE"}

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
 };