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

package/dist/components/features/auth/sso-join-form.js

@@ -1,12 +1,15 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { accentSentenceMarks } from "../../layout/page-heading.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { Button } from "../../ui/button/index.js";
 import { CheckboxBlock } from "../../ui/checkbox-block.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { SquareAvatar } from "../../ui/square-avatar.js";
 import { Tag } from "../../ui/tag.js";
 import { TermsAgreementLabel } from "./terms-agreement-label.js";
+const ROLES_CLASS = "flex shrink-0 items-center gap-[var(--spacing-system-xs)]";
 function SsoJoinForm({
   name,
   email,
@@ -26,10 +29,13 @@ function SsoJoinForm({
   termsSuffix,
   loading = false,
   disabled = false,
-  className
+  className,
+  identityLoading = false
 }) {
-  const fieldsDisabled = disabled || loading;
+  const readingIdentity = useLoadingScope() || identityLoading;
+  const fieldsDisabled = disabled || loading || readingIdentity;
   const displayName = name?.trim() || email?.trim() || "";
+  const shownRoles = readingIdentity && roles.length === 0 ? [""] : roles;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -46,6 +52,7 @@ function SsoJoinForm({
           /* @__PURE__ */ jsx(
             SquareAvatar,
             {
+              loading: identityLoading,
               size: "lg",
               variant: "round",
               src: avatarUrl,
@@ -54,11 +61,14 @@ function SsoJoinForm({
               initialsClassName: "text-ods-text-secondary text-h6"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: readingIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-40 max-w-full" }),
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-28 max-w-full" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "truncate text-ods-text-primary text-h4", children: displayName }),
             /* @__PURE__ */ jsx("span", { className: "truncate text-ods-text-secondary text-h6", children: organizationName })
-          ] }),
-          roles.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xs)]", children: roles.map((role) => /* @__PURE__ */ jsx(Tag, { variant: "grey", label: role }, role)) })
+          ] }) }),
+          shownRoles.length > 0 && /* @__PURE__ */ jsx("div", { className: ROLES_CLASS, children: shownRoles.map((role, i) => /* @__PURE__ */ jsx(Tag, { loading: readingIdentity, variant: "grey", label: role }, `${role}-${i}`)) })
         ] }),
         /* @__PURE__ */ jsx(
           CheckboxBlock,

package/dist/components/features/auth/sso-providers.d.ts

@@ -24,7 +24,15 @@ export interface SsoProviderButtonsProps {
      * button as the generic one.
      */
     tag?: string;
+    /** The providers are still being read: the buttons draw their boxes, one per entry of `providers` (the ones the
+     *  form may offer), or `SSO_PROVIDERS_SKELETON_COUNT` when it names none. A loading scope does the same. */
+    loading?: boolean;
 }
+/**
+ * How many provider buttons a form draws while the providers are read when it names none of its own: every provider
+ * the auth forms offer for sign-in (Google, Microsoft and Apple).
+ */
+export declare const SSO_PROVIDERS_SKELETON_COUNT = 3;
 /** Stacked full-width SSO provider buttons shared by the auth forms. */
-export declare function SsoProviderButtons({ providers, onSsoClick, actionLabel, disabled, enabledProviders, tag, }: SsoProviderButtonsProps): import("react").JSX.Element;
+export declare function SsoProviderButtons({ providers, onSsoClick, actionLabel, disabled, enabledProviders, tag, loading, }: SsoProviderButtonsProps): import("react").JSX.Element;
 //# sourceMappingURL=sso-providers.d.ts.map

package/dist/components/features/auth/sso-providers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sso-providers.d.ts","sourceRoot":"","sources":["../../../../src/components/features/auth/sso-providers.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7E,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,aAAa,CAAA;CAAE,CAaxF,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,UAAU,EACV,WAA6B,EAC7B,QAAgB,EAChB,gBAAgB,EAChB,GAAG,GACJ,EAAE,uBAAuB,+BAqCzB"}
+{"version":3,"file":"sso-providers.d.ts","sourceRoot":"","sources":["../../../../src/components/features/auth/sso-providers.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAMhF,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7E,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,aAAa,CAAA;CAAE,CAaxF,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;gHAC4G;IAC5G,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAKD;;;GAGG;AACH,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAa9C,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,UAAU,EACV,WAA6B,EAC7B,QAAgB,EAChB,gBAAgB,EAChB,GAAG,EACH,OAAO,GACR,EAAE,uBAAuB,+BAwCzB"}

package/dist/components/features/auth/sso-providers.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { requireIcon } from "../../chat/utils/icon-loading.js";
+import { InteractiveSkeleton } from "../../loading/unified-skeleton.js";
 import { Button } from "../../ui/button/index.js";
+import { LoadingItems, useLoadingScope } from "../../ui/loading-scope.js";
 import { StatusBadge } from "../../ui/status-badge.js";
 const PROVIDER_META = {
   openframe: {
@@ -17,20 +19,29 @@ const PROVIDER_META = {
   microsoft: { name: "Microsoft", Icon: requireIcon({ set: "MicrosoftLogoIcon" }) },
   apple: { name: "Apple", Icon: requireIcon({ set: "AppleLogoIcon" }) }
 };
+const SSO_PROVIDER_BUTTONS_CLASS = "flex flex-col gap-[var(--spacing-system-l)]";
+const SSO_PROVIDERS_SKELETON_COUNT = 3;
+function SsoProviderButtonsSkeleton({ count }) {
+  return /* @__PURE__ */ jsx("div", { className: SSO_PROVIDER_BUTTONS_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(LoadingItems, { count, children: () => /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { className: "w-full", "data-loading-item": true }) }) });
+}
 function SsoProviderButtons({
   providers,
   onSsoClick,
   actionLabel = "Continue with",
   disabled = false,
   enabledProviders,
-  tag
+  tag,
+  loading
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-system-l)]", children: providers.map((provider) => {
+  if (useLoadingScope() || loading)
+    return /* @__PURE__ */ jsx(SsoProviderButtonsSkeleton, { count: providers.length || SSO_PROVIDERS_SKELETON_COUNT });
+  return /* @__PURE__ */ jsx("div", { className: SSO_PROVIDER_BUTTONS_CLASS, children: providers.map((provider) => {
     const meta = PROVIDER_META[provider];
     const Icon = meta.Icon;
     return /* @__PURE__ */ jsxs(
       Button,
       {
+        "data-loading-item": true,
         type: "button",
         variant: "outline",
         fullWidth: true,
@@ -62,5 +73,6 @@ function SsoProviderButtons({
 }
 export {
   PROVIDER_META,
+  SSO_PROVIDERS_SKELETON_COUNT,
   SsoProviderButtons
 };

package/dist/components/features/board/board-column.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { BoardColumnDef, BoardTicket } from './types';
+import { type BoardColumnDef, type BoardTicket } from './types';
 export interface BoardColumnProps {
     column: BoardColumnDef;
     collapsed?: boolean;

package/dist/components/features/board/board-column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"board-column.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/board-column.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvF,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;2EACuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;gFAEgF;AAChF,eAAO,MAAM,WAAW,wDA0GtB,CAAC"}
+{"version":3,"file":"board-column.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/board-column.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvF,OAAO,EAA0B,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAGxF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;2EACuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;gFAEgF;AAChF,eAAO,MAAM,WAAW,wDA0GtB,CAAC"}

package/dist/components/features/board/board-column.js

@@ -6,12 +6,13 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { autoScrollColumn } from "../../../utils/auto-scroll-ancestors.js";
 import { cn } from "../../../utils/cn.js";
 import { TagIcon } from "../../icons-v2-generated/shopping/tag-icon.js";
+import { LoadingItems } from "../../ui/loading-scope.js";
 import { BoardColumnHeader } from "./board-column-header.js";
 import { tintOnDark } from "./color-utils.js";
 import { useDropAim } from "./drop-aim.js";
 import { DROP_LINE_ATTRIBUTE, nearestCardIn } from "./lane-geometry.js";
 import { TicketCard } from "./ticket-card.js";
-import { TicketCardSkeleton } from "./ticket-card-skeleton.js";
+import { BOARD_COLUMN_PAGE_SIZE } from "./types.js";
 import { useLaneScrollAnchor } from "./use-lane-scroll-anchor.js";
 const BoardColumn = memo(function BoardColumnImpl({
   column,
@@ -161,7 +162,10 @@ function ColumnBody({
         ref: scrollRef,
         className: "flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto py-[5px] [overflow-anchor:none]",
         children: [
-          column.isLoading ? /* @__PURE__ */ jsx(SkeletonStack, {}) : column.tickets.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx(
+          column.isLoading ? (
+            // A lane loads one page of its tickets: its loading form draws that page, each card its own skeleton.
+            /* @__PURE__ */ jsx(LoadingItems, { count: column.pageSize ?? BOARD_COLUMN_PAGE_SIZE, children: () => /* @__PURE__ */ jsx(TicketCard, { ticket: null, columnId: column.id, "data-loading-item": true }) })
+          ) : column.tickets.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx(
             TicketCard,
             {
               ticket: t,
@@ -173,20 +177,18 @@ function ColumnBody({
               onReject,
               dragDisabled: touchMode || column.dragDisabled,
               dropDisabled: touchMode || column.dropDisabled,
-              allowedFromColumns: column.allowedFromColumns
+              allowedFromColumns: column.allowedFromColumns,
+              "data-loading-item": true
             },
             t.id
           )),
-          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx(TicketCardSkeleton, {}),
+          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx(TicketCard, { ticket: null, columnId: column.id }),
           column.hasMore && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1 shrink-0" })
         ]
       }
     )
   );
 }
-function SkeletonStack({ count = 4 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(TicketCardSkeleton, {}, `skeleton-${i}`)) });
-}
 function EmptyState({ columnId, touchMode }) {
   const aim = useDropAim();
   if (aim && aim.columnId === columnId) {

package/dist/components/features/board/board-ticket-approval.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"board-ticket-approval.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/board-ticket-approval.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,0BAA0B,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BAqDrG"}
+{"version":3,"file":"board-ticket-approval.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/board-ticket-approval.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,0BAA0B,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BAgDrG"}

package/dist/components/features/board/board-ticket-approval.js

@@ -5,36 +5,28 @@ import { cn } from "../../../utils/cn.js";
 import { ApprovalBatchMessage } from "../../chat/approval-batch-message.js";
 import { useCollapsible } from "../../chat/hooks/use-collapsible.js";
 import { Chevron02DownIcon, Chevron02UpIcon, DotsLoaderIcon, ShieldCheckIcon } from "../../icons-v2-generated/index.js";
+import { Button } from "../../ui/button/index.js";
 function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
   const [expanded, setExpanded] = useState(false);
   const { innerRef, containerStyle } = useCollapsible({ expanded });
   const isAdmin = pendingApproval.approvalType === "ADMIN";
   return /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex flex-col", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setExpanded((v) => !v),
-        "aria-expanded": expanded,
-        className: "flex w-full cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-h6",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: cn(
-                "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]",
-                isAdmin ? "text-ods-open-yellow" : "text-ods-text-secondary"
-              ),
-              children: [
-                isAdmin ? /* @__PURE__ */ jsx(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
-              ]
-            }
+    /* @__PURE__ */ jsxs(Button, { variant: "row", type: "button", onClick: () => setExpanded((v) => !v), "aria-expanded": expanded, children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)] text-h6",
+            isAdmin ? "text-ods-open-yellow" : "text-ods-text-secondary"
           ),
-          expanded ? /* @__PURE__ */ jsx(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
-        ]
-      }
-    ),
+          children: [
+            isAdmin ? /* @__PURE__ */ jsx(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
+          ]
+        }
+      ),
+      expanded ? /* @__PURE__ */ jsx(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
+    ] }),
     /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "pt-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx(
       ApprovalBatchMessage,
       {

package/dist/components/features/board/board.d.ts

@@ -33,9 +33,11 @@ export interface BoardProps {
  *
  * While the answer is unknown (SSR and the hydration render) neither subtree
  * exists — mounting one is a guess that runs the loser's effects and, for the
- * drag board, registers DnD on a device that may be a phone. The empty shell
- * keeps the container's footprint; `useMediaQuery` resolves in a pre-paint
- * layout effect, so on the client the shell is never actually painted.
+ * drag board, registers DnD on a device that may be a phone. `BoardShell` stands
+ * in: the same lanes, laid out as the drag board lays them out, with no DnD. It
+ * is what the server's HTML paints before the page hydrates, so the first paint
+ * already shows the lanes (and a loading lane its own loading cards) instead of
+ * an empty strip that fills in after hydration.
  */
 export declare function Board(props: BoardProps): import("react").JSX.Element;
 //# sourceMappingURL=board.d.ts.map

package/dist/components/features/board/board.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"board.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/board.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA+D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BpG,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AA2CxE,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC5E,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAMtC"}
+{"version":3,"file":"board.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/board.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA+D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BpG,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AA2CxE,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC5E,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAItC"}

package/dist/components/features/board/board.js

@@ -35,11 +35,24 @@ const DRAG_PREVIEW_Z = 1200;
 const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 function Board(props) {
   const dragAndDropEnabled = useMediaQuery(DRAG_AND_DROP_MEDIA_QUERY);
-  if (dragAndDropEnabled === void 0) {
-    return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", props.className) });
-  }
+  if (dragAndDropEnabled === void 0) return /* @__PURE__ */ jsx(BoardShell, { ...props });
   return dragAndDropEnabled ? /* @__PURE__ */ jsx(DragBoard, { ...props }) : /* @__PURE__ */ jsx(TouchBoard, { ...props });
 }
+function laneJoins(columns, i) {
+  const column = columns[i];
+  const joinLeft = !!(column.system && columns[i - 1]?.system);
+  const joinRight = !!(column.system && columns[i + 1]?.system);
+  return { joinLeft, joinRight, showGap: i > 0 && !joinLeft };
+}
+function BoardShell({ columns, className }) {
+  return /* @__PURE__ */ jsx("div", { inert: true, "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 overflow-x-hidden", children: columns.map((column, i) => {
+    const { joinLeft, joinRight, showGap } = laneJoins(columns, i);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      showGap && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
+      /* @__PURE__ */ jsx(BoardColumn, { column, touchMode: true, joinLeft, joinRight })
+    ] }, column.id);
+  }) }) });
+}
 function DragBoard({
   columns,
   onChange,
@@ -328,11 +341,7 @@ function DragBoard({
           onScroll,
           className: "flex min-h-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
           children: view.map((column, i) => {
-            const prev = view[i - 1];
-            const next = view[i + 1];
-            const joinLeft = !!(column.system && prev?.system);
-            const joinRight = !!(column.system && next?.system);
-            const showGap = i > 0 && !joinLeft;
+            const { joinLeft, joinRight, showGap } = laneJoins(view, i);
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               showGap && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
               /* @__PURE__ */ jsx(

package/dist/components/features/board/index.d.ts

@@ -8,11 +8,9 @@ export { TicketCard, TicketCardView, TicketCardBody } from './ticket-card';
 export type { TicketCardProps, TicketCardViewProps, TicketCardBodyProps } from './ticket-card';
 export { BoardTicketApproval } from './board-ticket-approval';
 export type { BoardTicketApprovalProps } from './board-ticket-approval';
-export { TicketCardSkeleton } from './ticket-card-skeleton';
-export type { TicketCardSkeletonProps } from './ticket-card-skeleton';
 export { useBoardCollapse } from './use-board-collapse';
 export type { BoardCollapseMap, UseBoardCollapseReturn } from './use-board-collapse';
 export { tintOnDark } from './color-utils';
-export { columnFromTicketStatus, groupTicketsByStatus } from './types';
+export { BOARD_COLUMN_PAGE_SIZE, columnFromTicketStatus, groupTicketsByStatus } from './types';
 export type { BoardChange, BoardColumnDef, BoardPriority, BoardTicket, BoardTicketActivity, BoardTicketActivityKind, BoardTicketAssignee, BoardTicketPendingApproval, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/features/board/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC3E,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACvE,YAAY,EACV,WAAW,EACX,cAAc,EACd,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,0BAA0B,GAC3B,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC3E,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/F,YAAY,EACV,WAAW,EACX,cAAc,EACd,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,0BAA0B,GAC3B,MAAM,SAAS,CAAC"}

package/dist/components/features/board/index.js

@@ -3,18 +3,17 @@ import { BoardColumn } from "./board-column.js";
 import { BoardColumnHeader } from "./board-column-header.js";
 import { TicketCard, TicketCardView, TicketCardBody } from "./ticket-card.js";
 import { BoardTicketApproval } from "./board-ticket-approval.js";
-import { TicketCardSkeleton } from "./ticket-card-skeleton.js";
 import { useBoardCollapse } from "./use-board-collapse.js";
 import { tintOnDark } from "./color-utils.js";
-import { columnFromTicketStatus, groupTicketsByStatus } from "./types.js";
+import { BOARD_COLUMN_PAGE_SIZE, columnFromTicketStatus, groupTicketsByStatus } from "./types.js";
 export {
+  BOARD_COLUMN_PAGE_SIZE,
   Board,
   BoardColumn,
   BoardColumnHeader,
   BoardTicketApproval,
   TicketCard,
   TicketCardBody,
-  TicketCardSkeleton,
   TicketCardView,
   columnFromTicketStatus,
   groupTicketsByStatus,

package/dist/components/features/board/ticket-card.d.ts

@@ -38,7 +38,9 @@ export interface TicketCardViewProps extends Omit<TicketCardBodyProps, 'href' |
  */
 export declare function TicketCardView({ className, style, ...bodyProps }: TicketCardViewProps): import("react").JSX.Element;
 export interface TicketCardProps {
-    ticket: BoardTicket;
+    /** The ticket. `null` is a card still being read (a lane's loading form): the card draws its own skeleton, as it
+     *  does in a loading scope. */
+    ticket: BoardTicket | null;
     columnId: string;
     columnColor?: string;
     href?: string;
@@ -52,11 +54,12 @@ export interface TicketCardProps {
     renderAssignSlot?: (ticket: BoardTicket) => ReactNode;
     onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>;
     onReject?: (ticketId: string, requestId?: string) => void | Promise<void>;
+    /** `data-*` markers (`data-loading-item` on a lane's cards), on the card's root in both forms. */
+    [key: `data-${string}`]: unknown;
 }
-/** Memoized: a drag moves one card, but it re-renders the column lists around
- *  it, and a board carries dozens of cards whose props did not change. Hosts
- *  must pass stable `renderAssignSlot` / `onApprove` / `onReject` (useCallback)
- *  for this to bite — an inline arrow re-renders every card on every keystroke
- *  anywhere in the page. */
+/**
+ * The board card, loaded and loading. ONE switch: in a loading scope, or with no ticket yet (`ticket={null}`), it is
+ * its own {@link TicketCardSkeleton}; otherwise the draggable card. The lane never picks the skeleton.
+ */
 export declare const TicketCard: import("react").NamedExoticComponent<TicketCardProps>;
 //# sourceMappingURL=ticket-card.d.ts.map

package/dist/components/features/board/ticket-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-card.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/ticket-card.tsx"],"names":[],"mappings":"AAOA,OAAO,EAOL,KAAK,aAAa,EAElB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EAAiB,WAAW,EAA2B,MAAM,SAAS,CAAC;AAanF;yBACyB;AACzB,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAsBxC,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC;IACtD;qFACiF;IACjF,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD;;;;;wDAKoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED;mFACmF;AACnF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,mBAAmB,+BAiJrB;AAOD;2DAC2D;AAC3D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;gEAC4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,+BAarF;AAMD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;0CAGsC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3E;AAED;;;;4BAI4B;AAC5B,eAAO,MAAM,UAAU,uDA4QrB,CAAC"}
+{"version":3,"file":"ticket-card.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/ticket-card.tsx"],"names":[],"mappings":"AAOA,OAAO,EAOL,KAAK,aAAa,EAElB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA0Bf,OAAO,KAAK,EAAiB,WAAW,EAA2B,MAAM,SAAS,CAAC;AAanF;yBACyB;AACzB,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAyBxC,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC;IACtD;qFACiF;IACjF,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD;;;;;wDAKoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED;mFACmF;AACnF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,mBAAmB,+BAgJrB;AAOD;2DAC2D;AAC3D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;gEAC4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,+BAarF;AAMD,MAAM,WAAW,eAAe;IAC9B;mCAC+B;IAC/B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;0CAGsC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,kGAAkG;IAClG,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAwRD;;;GAGG;AACH,eAAO,MAAM,UAAU,uDAIrB,CAAC"}

package/dist/components/features/board/ticket-card.js

@@ -27,7 +27,10 @@ import {
   MessagesIcon,
   UserCheckIcon
 } from "../../icons-v2-generated/index.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { Button } from "../../ui/button/index.js";
 import { DeletedUserAvatar } from "../../ui/deleted-user-avatar.js";
+import { loadingItemProps, useLoadingScope } from "../../ui/loading-scope.js";
 import { SquareAvatar } from "../../ui/square-avatar.js";
 import { Tag } from "../../ui/tag.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
@@ -53,6 +56,7 @@ const ACTIVITY_DEFAULT_LABEL = {
   stale: "No activity"
 };
 const TICKET_CARD_SHELL = "relative flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] select-none text-left";
+const TICKET_CARD_META_CLASS = "truncate text-ods-text-secondary text-h6";
 function TicketCardBody({
   ticket,
   columnColor,
@@ -114,7 +118,6 @@ function TicketCardBody({
   const timestampLabel = ticket.createdAt ? formatTicketRelativeTime(ticket.createdAt) : null;
   const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null;
   const metaLabel = [ticket.ticketNumber || null, timestampLabel].filter(Boolean).join(" \u2022 ");
-  const metaClass = "truncate text-ods-text-secondary text-h6";
   const meta = href ? /* @__PURE__ */ jsx(
     Link,
     {
@@ -123,10 +126,10 @@ function TicketCardBody({
       prefetch: false,
       tabIndex: -1,
       onClick: onLinkClick,
-      className: cn("pointer-events-auto block", metaClass),
+      className: cn("pointer-events-auto block", TICKET_CARD_META_CLASS),
       children: metaLabel
     }
-  ) : /* @__PURE__ */ jsx("p", { className: cn(tooltipLabel && "pointer-events-auto", metaClass), children: metaLabel });
+  ) : /* @__PURE__ */ jsx("p", { className: cn(tooltipLabel && "pointer-events-auto", TICKET_CARD_META_CLASS), children: metaLabel });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
@@ -184,7 +187,7 @@ function TicketCardView({ className, style, ...bodyProps }) {
     }
   );
 }
-const TicketCard = memo(function TicketCardImpl({
+const TicketCardImpl = memo(function TicketCardDraggable({
   ticket,
   columnId,
   columnColor,
@@ -194,7 +197,8 @@ const TicketCard = memo(function TicketCardImpl({
   allowedFromColumns,
   renderAssignSlot,
   onApprove,
-  onReject
+  onReject,
+  ...props
 }) {
   const ref = useRef(null);
   const ticketRef = useRef(ticket);
@@ -316,7 +320,8 @@ const TicketCard = memo(function TicketCardImpl({
     className: cardClasses,
     // Read by the lane's scroll anchor to keep the list still when tickets are
     // inserted above the viewport — see `use-lane-scroll-anchor.ts`.
-    [TICKET_ID_ATTRIBUTE]: ticket.id
+    [TICKET_ID_ATTRIBUTE]: ticket.id,
+    ...loadingItemProps(props)
   };
   const innerWrapperClass = "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]";
   if (isSource) {
@@ -364,19 +369,25 @@ const TicketCard = memo(function TicketCardImpl({
   return /* @__PURE__ */ jsxs("div", { ...outerProps, children: [
     insertionLine,
     /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "card",
         type: "button",
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         "aria-label": ticket.title,
         "aria-keyshortcuts": keyShortcuts,
-        className: "absolute inset-0 z-0 cursor-pointer rounded-md focus-visible:outline-none"
+        className: "absolute inset-0 z-0"
       }
     ),
     /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
   ] });
 });
+const TicketCard = memo(function TicketCardSwitch({ ticket, ...props }) {
+  const loading = useLoadingScope() || ticket === null;
+  if (loading) return /* @__PURE__ */ jsx(TicketCardSkeleton, { ...loadingItemProps(props) });
+  return /* @__PURE__ */ jsx(TicketCardImpl, { ticket, ...props });
+});
 function TicketTagRow({ tags }) {
   const visible = tags.slice(0, MAX_VISIBLE_TAGS);
   const hidden = tags.length - visible.length;
@@ -385,6 +396,28 @@ function TicketTagRow({ tags }) {
     hidden > 0 && /* @__PURE__ */ jsx(Tag, { variant: "outline", label: `+${hidden}` })
   ] });
 }
+function TicketCardSkeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: cn(TICKET_CARD_SHELL, className), ...loadingItemProps(props), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-3/4" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 shrink-0 rounded-sm" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-1/2" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 rounded-sm" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-8 rounded-full" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-start gap-[var(--spacing-system-xxs)]", children: [
+      /* @__PURE__ */ jsx(Tag, { loading: true, label: "" }),
+      /* @__PURE__ */ jsx(Tag, { loading: true, label: "" })
+    ] }),
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: cn(TICKET_CARD_META_CLASS, "w-1/3") })
+  ] });
+}
 export {
   DRAG_PREVIEW_OPACITY,
   TicketCard,

package/dist/components/features/board/types.d.ts

@@ -65,6 +65,8 @@ export interface BoardTicket {
     /** The AI agent that owns the ticket: its mark is shown with the assignees. */
     agent?: AgentName;
 }
+/** Tickets a lane reads per page when its host names no `pageSize` (its loading form draws this many cards). */
+export declare const BOARD_COLUMN_PAGE_SIZE = 20;
 export interface BoardColumnDef {
     id: string;
     /**
@@ -86,6 +88,9 @@ export interface BoardColumnDef {
     total?: number;
     hasMore?: boolean;
     isLoading?: boolean;
+    /** How many tickets the lane reads per page: its loading form draws that many cards. Default
+     *  {@link BOARD_COLUMN_PAGE_SIZE}. */
+    pageSize?: number;
     isLoadingMore?: boolean;
     system?: boolean;
     dropDisabled?: boolean;

package/dist/components/features/board/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/board/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE,uGAAuG;AACvG,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACnC;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,aAAa,GAAG,kBAAkB,GAAG,OAAO,CAAC;AAElG,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,uBAAuB,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IAEf,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,gHAAgH;AAChH,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,EAAE,CAAC;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;0CACsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAWD,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,WAAW,EAAE,EACtB,SAAS,GAAE,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,SAAS,CAAC,CAAM,GAC9D,cAAc,CAkBhB;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAcvG"}

package/dist/components/features/board/types.js

@@ -1,4 +1,5 @@
 "use client";
+const BOARD_COLUMN_PAGE_SIZE = 20;
 const STATUS_DEFAULTS = {
   ACTIVE: { label: "Active", color: "#5ea62e" },
   AI_ASSISTANCE: { label: "AI Handling", color: "#888888" },
@@ -50,6 +51,7 @@ function canonicalize(status) {
   return null;
 }
 export {
+  BOARD_COLUMN_PAGE_SIZE,
   columnFromTicketStatus,
   groupTicketsByStatus
 };

package/dist/components/features/capability-explorer.d.ts

@@ -73,26 +73,12 @@ export interface CapabilityExplorerProps {
      * `CAPABILITY_EXPLORER_SKELETON_JOBS`, a typical count for a host that states none.
      */
     skeletonCount?: number;
-    /** @deprecated Use `skeletonCount`. */
+    /** @deprecated Ignored: the skeleton draws `skeletonCount` (a list draws its full count, never a fold). */
     fold?: number;
     className?: string;
 }
 /** The element id of a job's tab (never the job's own id: that is the host's anchor). */
 export declare const capabilityTabId: (id: string) => string;
-/**
- * The explorer while its data loads, drawn as both layouts in their own boxes
- * (the width decides which shows, by CSS, since it is not known yet): the list
- * of jobs beside the panel with its copy, example, screen and footer, or the
- * first card over the carousel's controls. Every box is the loaded one's, so
- * nothing moves when the jobs arrive.
- */
-export declare function CapabilityExplorerSkeleton({ region, className, count, }: {
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-    className?: string;
-    /** The jobs the list draws: the jobs the host reads. Default a typical count. */
-    count?: number;
-}): import("react").JSX.Element;
 /**
  * The jobs a product does, one at a time with its real screen.
  *
@@ -109,5 +95,5 @@ export declare function CapabilityExplorerSkeleton({ region, className, count, }
  * carousel `activeId` brings that job's card into view (the track moves, the
  * page does not).
  */
-export declare function CapabilityExplorer({ items, labels, activeId, onActiveChange, renderScreen, requesterMark, responderMark, loading, skeletonCount, fold, className, }: CapabilityExplorerProps): import("react").JSX.Element | null;
+export declare function CapabilityExplorer({ items, labels, activeId, onActiveChange, renderScreen, requesterMark, responderMark, loading, skeletonCount, className, }: CapabilityExplorerProps): import("react").JSX.Element | null;
 //# sourceMappingURL=capability-explorer.d.ts.map