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

package/dist/components/features/command-box.js

@@ -4,7 +4,7 @@ import { ChevronDown } from "lucide-react";
 import { cn } from "../../utils/cn.js";
 import { Copy02Icon } from "../icons-v2-generated/documents/copy-02-icon.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
-import { Button } from "../ui/button/index.js";
+import { Button, buttonVariants } from "../ui/button/index.js";
 import { FadePreview } from "../ui/fade-preview.js";
 import { useLoadingScope } from "../ui/loading-scope.js";
 const lineClampClasses = {
@@ -19,7 +19,7 @@ const COMMAND_BOX_CLASS = "flex flex-col gap-2";
 const COMMAND_BOX_TITLE_CLASS = "text-ods-text-primary text-h4";
 const COMMAND_BOX_FRAME_CLASS = "rounded-[6px] border border-ods-border bg-ods-bg p-4";
 const COMMAND_BOX_COPY_ROW_CLASS = "flex items-start gap-4";
-const COMMAND_BOX_COPY_BUTTON_CLASS = "shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
+const COMMAND_BOX_COPY_BUTTON_LAYOUT = "shrink-0";
 const COMMAND_BOX_ACTIONS_CLASS = "mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end";
 const COMMAND_BOX_ACTION_CLASS = "w-full content-md:w-auto";
 const fixedCommandHeight = (visibleLines) => `calc(${visibleLines} * var(--font-line-space-h6-caption))`;
@@ -34,10 +34,11 @@ function CommandBox({
   maxLines = 0,
   visibleLines,
   onCopy,
-  copyAriaLabel = "Copy command"
+  copyAriaLabel = "Copy command",
+  loading
 }) {
   const fixedHeight = visibleLines !== void 0 && visibleLines > 0;
-  if (useLoadingScope()) {
+  if (useLoadingScope() || loading) {
     return /* @__PURE__ */ jsx(
       CommandBoxSkeleton,
       {
@@ -74,7 +75,18 @@ function CommandBox({
     /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_FRAME_CLASS, children: [
       onCopy ? /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_COPY_ROW_CLASS, children: [
         commandText,
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onCopy, "aria-label": copyAriaLabel, className: COMMAND_BOX_COPY_BUTTON_CLASS, children: /* @__PURE__ */ jsx(Copy02Icon, { className: "h-5 w-5" }) })
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "transparent",
+            size: "icon-sm",
+            type: "button",
+            onClick: onCopy,
+            "aria-label": copyAriaLabel,
+            className: COMMAND_BOX_COPY_BUTTON_LAYOUT,
+            children: /* @__PURE__ */ jsx(Copy02Icon, {})
+          }
+        )
       ] }) : commandText,
       (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_ACTIONS_CLASS, children: [
         secondaryAction && /* @__PURE__ */ jsx(
@@ -139,7 +151,16 @@ function CommandBoxSkeleton({
     /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_FRAME_CLASS, children: [
       showCopy ? /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_COPY_ROW_CLASS, children: [
         commandLines,
-        /* @__PURE__ */ jsx("span", { className: COMMAND_BOX_COPY_BUTTON_CLASS, children: /* @__PURE__ */ jsx(Copy02Icon, { className: "h-5 w-5" }) })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              buttonVariants({ variant: "transparent", size: "icon-sm" }),
+              COMMAND_BOX_COPY_BUTTON_LAYOUT
+            ),
+            children: /* @__PURE__ */ jsx(Copy02Icon, {})
+          }
+        )
       ] }) : commandLines,
       (primaryActionLabel || secondaryActionLabel) && /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_ACTIONS_CLASS, children: [
         secondaryActionLabel && /* @__PURE__ */ jsx(
@@ -167,6 +188,5 @@ function CommandBoxSkeleton({
   ] });
 }
 export {
-  CommandBox,
-  CommandBoxSkeleton
+  CommandBox
 };

package/dist/components/features/conversation-card.d.ts

@@ -68,38 +68,13 @@ export interface ConversationCardProps {
     /** The lines the context and the outcome keep at least (default four on a phone, three wide). */
     lines?: ConversationCardLines;
     className?: string;
+    /** Draw the card's loading form outside a loading scope too (`useLoadingScope() || loading`). */
+    loading?: boolean;
 }
 /**
  * A request and what was done about it, as two turns and a footer: who asked
  * and what they said, who answered and the result (a command block with its
  * check), then one line that sums up the reader's own part in it.
  */
-export declare function ConversationCard({ requester, request, responder, outcome, outcomeAside, footerLabel, footerValue, footerTone, agent, selection, context, lines, className, }: ConversationCardProps): import("react").JSX.Element;
-/**
- * The card while it loads: the SAME frame, then each part at the number of
- * lines the loaded card keeps for it (the request's two, the context's
- * `lines`, four on a phone and three wide by default), so a loaded card takes the skeleton's place without
- * moving the page. Pass the parts the loaded card will have.
- */
-export declare function ConversationCardSkeleton({ avatarPx, context, requesterMeta, responderMeta, footer, footerLabel, lines, label, announce, className, }: {
-    /** What a screen reader hears while it loads. */
-    label?: string;
-    /** `false` inside another loading region (a row of cards): only the outermost region announces. */
-    announce?: boolean;
-    /** The speakers' avatar size, as the host draws it. */
-    avatarPx?: number;
-    /** The footer's question when the page states it ("Your part"): drawn for real. */
-    footerLabel?: string;
-    /** The loaded card has a context part ("Today"). */
-    context?: boolean;
-    /** The asker's name carries a meta line (their role); a string is static copy, drawn for real. */
-    requesterMeta?: boolean | string;
-    /** The answerer's name carries a meta line ("What changes"); a string is static copy, drawn for real. */
-    responderMeta?: boolean | string;
-    /** The loaded card has a footer. */
-    footer?: boolean;
-    /** The lines the loaded card keeps for its context and outcome (`ConversationCardProps.lines`). */
-    lines?: ConversationCardLines;
-    className?: string;
-}): import("react").JSX.Element;
+export declare function ConversationCard({ requester, request, responder, outcome, outcomeAside, footerLabel, footerValue, footerTone, agent, selection, context, lines, className, loading: loadingProp, }: ConversationCardProps): import("react").JSX.Element;
 //# sourceMappingURL=conversation-card.d.ts.map

package/dist/components/features/conversation-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-card.d.ts","sourceRoot":"","sources":["../../../src/components/features/conversation-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAelE;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAC;CACrC;AA4BD,8FAA8F;AAC9F,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAE9C,MAAM,WAAW,uBAAuB;IACtC,oDAAoD;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,uBAAuB,CAAC;IACnC,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,uBAAuB,CAAC;IACnC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACvD,iGAAiG;IACjG,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAsB,EACtB,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,+BAwGvB;AAeD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAsC,EACtC,OAAe,EACf,aAAqB,EACrB,aAAqB,EACrB,MAAc,EACd,WAAW,EACX,KAAK,EACL,KAAgC,EAChC,QAAe,EACf,SAAS,GACV,EAAE;IACD,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kGAAkG;IAClG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,yGAAyG;IACzG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mGAAmG;IACnG,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAuCA"}
+{"version":3,"file":"conversation-card.d.ts","sourceRoot":"","sources":["../../../src/components/features/conversation-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAclE;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAC;CACrC;AAwCD,8FAA8F;AAC9F,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAE9C,MAAM,WAAW,uBAAuB;IACtC,oDAAoD;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,uBAAuB,CAAC;IACnC,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,uBAAuB,CAAC;IACnC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACvD,iGAAiG;IACjG,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAsB,EACtB,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EAAE,WAAW,GACrB,EAAE,qBAAqB,+BA4GvB"}

package/dist/components/features/conversation-card.js

@@ -4,15 +4,14 @@ import { useId } from "react";
 import { cn } from "../../utils/cn.js";
 import { isOwnClick } from "../../utils/own-click.js";
 import { useAgentTint } from "../agent-identity.js";
-import { ChatTurn, ChatTurnNameSkeleton, TURN_BODY_CLASS, TURN_ROW_CLASS } from "../chat/chat-turn.js";
+import { ChatTurn } from "../chat/chat-turn.js";
 import { CheckCircleIcon } from "../icons-v2-generated/signs-and-symbols/check-circle-icon.js";
 import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js";
 import { PlusIcon } from "../icons-v2-generated/signs-and-symbols/plus-icon.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { BUTTON_ICON_SM_SIZE, Button } from "../ui/button/button.js";
-import { useLoadingScope } from "../ui/loading-scope.js";
-import { SquareAvatarSkeleton } from "../ui/square-avatar.js";
+import { InertWhileLoading, useLoadingScope } from "../ui/loading-scope.js";
 import { Tag } from "../ui/tag.js";
 const DEFAULT_PART_LINES = { phone: 4, wide: 3 };
 const PART_LINES_CLASS = "min-h-[calc(var(--cc-lines)*1lh)] content-md:min-h-[calc(var(--cc-lines-wide)*1lh)]";
@@ -28,6 +27,13 @@ const OUTCOME_ROW_CLASS = "flex items-start gap-[var(--spacing-system-xsf)] text
 const OUTCOME_TEXT_CLASS = cn("m-0 min-w-0 flex-1", OUTCOME_LINES_CLASS);
 const OUTCOME_CHECK_CLASS = "flex shrink-0 items-center";
 const OUTCOME_CHECK_STYLE = { height: "1lh" };
+const REQUEST_TEXT_CLASS = "m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3";
+const REQUEST_CLEAR_TOGGLE_STYLE = {
+  paddingRight: `calc(${BUTTON_ICON_SM_SIZE} + var(--spacing-system-xsf))`
+};
+const SELECTION_TOGGLE_CLASS = "absolute right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10";
+const CONTEXT_LABEL_CLASS = "text-ods-text-secondary text-h6";
+const SKELETON_AVATAR_SHAPE = "square";
 const CARD_FRAME_CLASS = "relative flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]";
 const ANSWER_BLOCK_CLASS = "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]";
 const CONTEXT_BLOCK_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-xxs)] border-ods-border border-t pt-[var(--spacing-system-sf)]";
@@ -46,18 +52,23 @@ function ConversationCard({
   selection,
   context,
   lines,
-  className
+  className,
+  loading: loadingProp
 }) {
   const tint = useAgentTint(agent);
   const requestId = useId();
-  if (useLoadingScope()) {
+  const loading = useLoadingScope() || loadingProp;
+  if (loading) {
     return /* @__PURE__ */ jsx(
       ConversationCardSkeleton,
       {
         avatarPx: CONVERSATION_CARD_AVATAR_PX,
-        context: !!context,
+        context: context ? context.label || true : false,
         requesterMeta: !!requester.meta,
         responderMeta: !!responder.meta,
+        requesterTime: !!requester.time,
+        responderTime: !!responder.time,
+        selection: selection ? { pressed: selection.pressed } : void 0,
         footer: !!footerLabel && footerValue !== void 0,
         footerLabel,
         lines,
@@ -96,7 +107,7 @@ function ConversationCard({
               event.stopPropagation();
               selection.onToggle();
             },
-            className: "absolute right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10",
+            className: SELECTION_TOGGLE_CLASS,
             children: selection.pressed ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
           }
         ),
@@ -104,8 +115,8 @@ function ConversationCard({
           "p",
           {
             id: requestId,
-            className: "m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3",
-            style: selection ? { paddingRight: `calc(${BUTTON_ICON_SM_SIZE} + var(--spacing-system-xsf))` } : void 0,
+            className: REQUEST_TEXT_CLASS,
+            style: selection ? REQUEST_CLEAR_TOGGLE_STYLE : void 0,
             title: request,
             children: [
               "\u201C",
@@ -115,7 +126,7 @@ function ConversationCard({
           }
         ) }),
         context && /* @__PURE__ */ jsxs("div", { className: CONTEXT_BLOCK_CLASS, children: [
-          /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h6", children: context.label }),
+          /* @__PURE__ */ jsx("span", { className: CONTEXT_LABEL_CLASS, children: context.label }),
           /* @__PURE__ */ jsx("p", { className: CONTEXT_TEXT_CLASS, style: partLinesStyle(lines?.context), children: context.text })
         ] }),
         /* @__PURE__ */ jsx(
@@ -141,20 +152,14 @@ function ConversationCard({
     }
   );
 }
-function TurnSkeleton({ avatarPx, meta, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: TURN_ROW_CLASS, children: [
-    /* @__PURE__ */ jsx(SquareAvatarSkeleton, { sizePx: avatarPx }),
-    /* @__PURE__ */ jsxs("div", { className: TURN_BODY_CLASS, children: [
-      /* @__PURE__ */ jsx(ChatTurnNameSkeleton, { meta, time: true }),
-      children
-    ] })
-  ] });
-}
 function ConversationCardSkeleton({
   avatarPx = CONVERSATION_CARD_AVATAR_PX,
   context = false,
   requesterMeta = false,
   responderMeta = false,
+  requesterTime = true,
+  responderTime = true,
+  selection,
   footer = false,
   footerLabel,
   lines,
@@ -165,21 +170,60 @@ function ConversationCardSkeleton({
   const contextLines = partLines(lines?.context);
   const outcomeLines = partLines(lines?.outcome);
   return /* @__PURE__ */ jsxs(LoadingRegion, { label, announce, className: cn(CARD_FRAME_CLASS, className), children: [
-    /* @__PURE__ */ jsx(TurnSkeleton, { avatarPx, meta: requesterMeta, children: /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 2, type: "h3" }) }),
+    selection && /* @__PURE__ */ jsx(InertWhileLoading, { className: "contents", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: selection.pressed ? "accent" : "outline",
+        size: "icon-sm",
+        "aria-pressed": selection.pressed,
+        className: SELECTION_TOGGLE_CLASS,
+        children: selection.pressed ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ChatTurn,
+      {
+        loading: true,
+        name: "",
+        skeleton: {
+          avatarPx,
+          avatarShape: SKELETON_AVATAR_SHAPE,
+          meta: requesterMeta,
+          time: requesterTime,
+          body: /* @__PURE__ */ jsx("div", { style: selection ? REQUEST_CLEAR_TOGGLE_STYLE : void 0, children: /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 2, type: "h3" }) })
+        }
+      }
+    ),
     context && /* @__PURE__ */ jsxs("div", { className: CONTEXT_BLOCK_CLASS, children: [
-      /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 1, type: "h6", className: "w-1/4" }),
+      typeof context === "string" ? /* @__PURE__ */ jsx("span", { className: CONTEXT_LABEL_CLASS, children: context }) : /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 1, type: "h6", className: "w-1/4" }),
       /* @__PURE__ */ jsxs("p", { className: CONTEXT_TEXT_CLASS, style: partLinesStyle(contextLines), children: [
         /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: contextLines.phone, type: "h4", className: "content-md:hidden" }),
         /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: contextLines.wide, type: "h4", className: "hidden content-md:flex" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: ANSWER_BLOCK_CLASS, children: /* @__PURE__ */ jsx(TurnSkeleton, { avatarPx, meta: responderMeta, children: /* @__PURE__ */ jsxs("div", { className: OUTCOME_ROW_CLASS, children: [
-      /* @__PURE__ */ jsxs("p", { className: OUTCOME_TEXT_CLASS, style: partLinesStyle(outcomeLines), children: [
-        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: outcomeLines.phone, type: "h4", className: "content-md:hidden" }),
-        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: outcomeLines.wide, type: "h4", className: "hidden content-md:flex" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: cn(OUTCOME_CHECK_CLASS, "invisible"), style: OUTCOME_CHECK_STYLE, children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 16, "aria-hidden": true }) })
-    ] }) }) }),
+    /* @__PURE__ */ jsx(
+      ChatTurn,
+      {
+        loading: true,
+        name: "",
+        className: ANSWER_BLOCK_CLASS,
+        skeleton: {
+          avatarPx,
+          avatarShape: SKELETON_AVATAR_SHAPE,
+          meta: responderMeta,
+          time: responderTime,
+          // The outcome's row: its text at a typical line count, beside the check's place (the row's width).
+          body: /* @__PURE__ */ jsxs("div", { className: OUTCOME_ROW_CLASS, children: [
+            /* @__PURE__ */ jsxs("p", { className: OUTCOME_TEXT_CLASS, style: partLinesStyle(outcomeLines), children: [
+              /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: outcomeLines.phone, type: "h4", className: "content-md:hidden" }),
+              /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: outcomeLines.wide, type: "h4", className: "hidden content-md:flex" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: cn(OUTCOME_CHECK_CLASS, "invisible"), style: OUTCOME_CHECK_STYLE, children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 16, "aria-hidden": true }) })
+          ] })
+        }
+      }
+    ),
     footer && /* @__PURE__ */ jsxs("div", { className: cn(FOOTER_ROW_CLASS, "text-ods-text-secondary text-h6"), children: [
       footerLabel ? /* @__PURE__ */ jsx("span", { children: footerLabel }) : /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 1, type: "h6", className: "w-1/4" }),
       /* @__PURE__ */ jsx(Tag, { as: "span", label: "\xA0", variant: "badge", className: "invisible" })
@@ -188,6 +232,5 @@ function ConversationCardSkeleton({
 }
 export {
   CONVERSATION_CARD_AVATAR_PX,
-  ConversationCard,
-  ConversationCardSkeleton
+  ConversationCard
 };

package/dist/components/features/devices/device-selector/device-selector.d.ts

@@ -34,5 +34,5 @@ import type { DeviceSelectorProps } from './device-selector.types';
  *   entirely, the search toolbar and row actions go away, and the table becomes
  *   a live preview of what the rule matches.
  */
-export declare function DeviceSelector<T extends DeviceRow = DeviceRow>({ devices, loading, loadingRegion, selectedIds: selectedIdsProp, onSelectionChange: onSelectionChangeProp, getDeviceKey: getDeviceKeyProp, infiniteScroll, disabled, showSelectionModeRadio, headerContent, addAllBehavior, singleSelect, isDeviceDisabled, hideColumns, showToolbar, totalCount, server, selectionMode, onSelectionModeChange, criteriaContent, }: DeviceSelectorProps<T>): import("react").JSX.Element;
+export declare function DeviceSelector<T extends DeviceRow = DeviceRow>({ devices, loading: loadingProp, loadingRegion, skeletonRows, selectedIds: selectedIdsProp, onSelectionChange: onSelectionChangeProp, getDeviceKey: getDeviceKeyProp, infiniteScroll, disabled, showSelectionModeRadio, headerContent, addAllBehavior, singleSelect, isDeviceDisabled, hideColumns, showToolbar, totalCount, server, selectionMode, onSelectionModeChange, criteriaContent, }: DeviceSelectorProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=device-selector.d.ts.map

package/dist/components/features/devices/device-selector/device-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,KAAK,EAAE,mBAAmB,EAAU,MAAM,yBAAyB,CAAC;AA6B3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC9D,OAAO,EACP,OAAO,EACP,aAAa,EACb,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EACd,QAAgB,EAChB,sBAA6B,EAC7B,aAAa,EACb,cAAwB,EACxB,YAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BA+qBxB"}
+{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,KAAK,EAAE,mBAAmB,EAAU,MAAM,yBAAyB,CAAC;AAoE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC9D,OAAO,EACP,OAAO,EAAE,WAAW,EACpB,aAAa,EACb,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EACd,QAAgB,EAChB,sBAA6B,EAC7B,aAAa,EACb,cAAwB,EACxB,YAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAmqBxB"}

package/dist/components/features/devices/device-selector/device-selector.js

@@ -11,6 +11,8 @@ import {
   TruncateText,
   useDataTable
 } from "../../../ui/index.js";
+import { DATA_TABLE_SKELETON_ROWS } from "../../../ui/data-table/utils.js";
+import { InertWhileLoading, useLoadingScope } from "../../../ui/loading-scope.js";
 import { OSTypeBadge } from "../../os-type-badge.js";
 import { formatLastOnline } from "../device-last-online.js";
 import { getDeviceName } from "../device-name.js";
@@ -28,6 +30,7 @@ const NOOP = () => {
 };
 const DEFAULT_GET_DEVICE_KEY = (d) => d.machineId || d.id;
 function CustomerCell({ device }) {
+  const loading = useLoadingScope();
   const fullImageUrl = useDeviceImageUrl(device.organizationImageUrl, device.organizationImageHash);
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
     /* @__PURE__ */ jsx(
@@ -40,14 +43,36 @@ function CustomerCell({ device }) {
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [
       /* @__PURE__ */ jsx(TruncateText, { children: device.organization || "" }),
-      device.organizationEmail && /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: device.organizationEmail })
+      (device.organizationEmail || loading) && /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: device.organizationEmail ?? "" })
     ] })
   ] });
 }
+function DeviceCell({ device }) {
+  const loading = useLoadingScope();
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-20 items-center gap-3", children: [
+    /* @__PURE__ */ jsx(DeviceTypeTile, { type: device.type }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ jsx(TruncateText, { children: getDeviceName(device) }),
+      /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", loading, children: formatLastOnline(device.last_seen || device.lastSeen) })
+    ] })
+  ] });
+}
+function StatusCell({ status }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(Tag, { loading: true, label: "", className: "w-min" });
+  const config = getDeviceStatusConfig(status);
+  return /* @__PURE__ */ jsx(Tag, { label: config.label, variant: config.variant, className: "w-min" });
+}
+function InertInScope({ children }) {
+  return /* @__PURE__ */ jsx(InertWhileLoading, { loading: useLoadingScope(), className: "contents", children });
+}
+function loadingDevices(count) {
+  return Array.from({ length: count }, (_, index) => ({ id: `loading-${index}`, machineId: "", status: "" }));
+}
 function DeviceSelector({
   devices,
-  loading,
+  loading: loadingProp,
   loadingRegion,
+  skeletonRows,
   selectedIds: selectedIdsProp,
   onSelectionChange: onSelectionChangeProp,
   getDeviceKey: getDeviceKeyProp,
@@ -66,6 +91,7 @@ function DeviceSelector({
   onSelectionModeChange,
   criteriaContent
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const selectedIds = selectedIdsProp ?? EMPTY_SET;
   const onSelectionChange = onSelectionChangeProp ?? NOOP;
   const getDeviceKey = getDeviceKeyProp ?? DEFAULT_GET_DEVICE_KEY;
@@ -329,17 +355,7 @@ function DeviceSelector({
         id: "device",
         accessorKey: "device",
         header: "DEVICE",
-        cell: ({ row }) => {
-          const device = row.original;
-          const lastSeen = device.last_seen || device.lastSeen;
-          return /* @__PURE__ */ jsxs("div", { className: "flex h-20 items-center gap-3", children: [
-            /* @__PURE__ */ jsx(DeviceTypeTile, { type: device.type }),
-            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-              /* @__PURE__ */ jsx(TruncateText, { children: getDeviceName(device) }),
-              /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: formatLastOnline(lastSeen) })
-            ] })
-          ] });
-        },
+        cell: ({ row }) => /* @__PURE__ */ jsx(DeviceCell, { device: row.original }),
         enableSorting: false
       },
       {
@@ -369,10 +385,7 @@ function DeviceSelector({
         id: "status",
         accessorKey: "status",
         header: "STATUS",
-        cell: ({ row }) => {
-          const config = getDeviceStatusConfig(row.original.status);
-          return /* @__PURE__ */ jsx(Tag, { label: config.label, variant: config.variant, className: "w-min" });
-        },
+        cell: ({ row }) => /* @__PURE__ */ jsx(StatusCell, { status: row.original.status }),
         enableSorting: false,
         meta: {
           width: "w-auto shrink-0 content-md:w-[160px]",
@@ -381,7 +394,7 @@ function DeviceSelector({
       },
       {
         id: "actions",
-        cell: ({ row }) => {
+        cell: ({ row }) => /* @__PURE__ */ jsx(InertInScope, { children: (() => {
           const device = row.original;
           const disabledReason = isDeviceDisabled?.(device);
           if (disabledReason) {
@@ -426,7 +439,7 @@ function DeviceSelector({
               disabled
             }
           ) });
-        },
+        })() }),
         enableSorting: false,
         meta: { width: "w-12 content-md:w-auto content-md:min-w-[130px] shrink-0 flex-none", align: "right" }
       }
@@ -447,8 +460,12 @@ function DeviceSelector({
     if (hidden.size === 0) return columns;
     return columns.filter((c) => !c.id || !hidden.has(c.id));
   }, [columns, hideColumns, isCriteria]);
+  const loadingRows = useMemo(
+    () => loading ? loadingDevices(skeletonRows ?? DATA_TABLE_SKELETON_ROWS) : null,
+    [loading, skeletonRows]
+  );
   const table = useDataTable({
-    data: devicesForTable,
+    data: loadingRows ?? devicesForTable,
     columns: visibleColumns,
     getRowId: (row) => String(getDeviceKey(row) ?? row.id),
     enableSorting: false,
@@ -485,44 +502,27 @@ function DeviceSelector({
     [selectedCount, singleSelect]
   );
   const availableInfiniteScroll = activeSubTab === "available" ? infiniteScroll : void 0;
-  const bulkAction = singleSelect || isCriteria ? null : activeSubTab === "available" ? /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: addAllDevices,
-      disabled,
-      className: "cursor-pointer border-0 bg-transparent text-ods-accent underline text-h6 hover:text-ods-accent-hover disabled:cursor-not-allowed disabled:opacity-50",
-      children: "Add All Devices"
-    }
-  ) : selectedCount > 0 ? /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: removeAllSelected,
-      disabled,
-      className: "cursor-pointer border-0 bg-transparent text-ods-error underline text-h6 hover:text-ods-error-hover disabled:cursor-not-allowed disabled:opacity-50",
-      children: [
-        "Remove ",
-        server ? server.totalCount ?? devicesForTable.length : selectedIds.size,
-        " Devices"
-      ]
-    }
-  ) : null;
+  const bulkAction = singleSelect || isCriteria ? null : activeSubTab === "available" ? /* @__PURE__ */ jsx(Button, { variant: "link", size: "compact", noPaddingX: true, type: "button", onClick: addAllDevices, disabled, children: "Add All Devices" }) : selectedCount > 0 ? /* @__PURE__ */ jsxs(Button, { variant: "link", size: "compact", noPaddingX: true, type: "button", onClick: removeAllSelected, disabled, children: [
+    "Remove ",
+    server ? server.totalCount ?? devicesForTable.length : selectedIds.size,
+    " Devices"
+  ] }) : null;
   const hasActiveFilter = columnFilters.length > 0 || selectedTags.length > 0 || searchTerm.trim().length > 0;
   const showHeader = isCriteria || loading || devicesForTable.length > 0 || hasActiveFilter;
   const deviceTable = /* @__PURE__ */ jsxs(DataTable, { table, children: [
     showHeader && /* @__PURE__ */ jsx(
       DataTable.Header,
       {
-        rightSlot: bulkAction ?? /* @__PURE__ */ jsx(DataTable.RowCount, { itemName: "device", totalCount: totalCount ?? server?.totalCount })
+        rightSlot: bulkAction ?? /* @__PURE__ */ jsx(DataTable.RowCount, { itemName: "device", totalCount: totalCount ?? server?.totalCount, loading })
       }
     ),
     /* @__PURE__ */ jsx(
       DataTable.Body,
       {
         loading,
+        loadingCells: true,
         loadingRegion,
-        skeletonRows: 8,
+        skeletonRows,
         emptyMessage: isCriteria ? "No devices match these criteria" : activeSubTab === "selected" ? "No devices selected" : "No devices found",
         rowClassName
       }

package/dist/components/features/devices/device-selector/device-selector.types.d.ts

@@ -64,6 +64,11 @@ export interface DeviceSelectorProps<T extends DeviceRow = DeviceRow> {
     loading: boolean;
     /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
     loadingRegion?: boolean;
+    /**
+     * How many rows the loading table draws: the host's page size when the list is paged or limited (infinite
+     * scroll's first page). Omitted, the table's own page size, else the table's default.
+     */
+    skeletonRows?: number;
     /**
      * Currently selected device keys. Optional so a skeleton can render the real
      * picker with nothing selected, the component falls back to an empty set and

package/dist/components/features/devices/device-selector/device-selector.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device-selector.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"device-selector.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.types.ts"],"names":[],"mappings":"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"}

package/dist/components/features/devices/device-type-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device-type-tile.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/device-type-tile.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,+BAM3E"}
+{"version":3,"file":"device-type-tile.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/device-type-tile.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,+BAY3E"}

package/dist/components/features/devices/device-type-tile.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { MonitorIcon } from "../../icons-v2-generated/index.js";
+import { MediaSkeleton } from "../../loading/unified-skeleton.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { renderDeviceTypeIcon } from "./device-type-icon.js";
 const ICON_CLASS = "size-4 text-ods-text-secondary";
 function DeviceTypeTile({ type }) {
-  return /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card", children: renderDeviceTypeIcon(type ?? void 0, ICON_CLASS) ?? /* @__PURE__ */ jsx(MonitorIcon, { className: ICON_CLASS }) });
+  const loading = useLoadingScope();
+  return /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card", children: loading ? /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm" }) : renderDeviceTypeIcon(type ?? void 0, ICON_CLASS) ?? /* @__PURE__ */ jsx(MonitorIcon, { className: ICON_CLASS }) });
 }
 export {
   DeviceTypeTile

package/dist/components/features/devices/devices-grid-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devices-grid-filters.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-grid-filters.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,qFAAqF;IACrF,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACzC,sFAAsF;IACtF,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5D,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EACV,SAAiB,GAClB,EAAE,uBAAuB,sCA8DzB"}
+{"version":3,"file":"devices-grid-filters.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-grid-filters.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,qFAAqF;IACrF,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACzC,sFAAsF;IACtF,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5D,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EACV,SAAiB,GAClB,EAAE,uBAAuB,sCAmDzB"}

package/dist/components/features/devices/devices-grid-filters.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { Filter02Icon } from "../../icons-v2-generated/index.js";
+import { Button } from "../../ui/button/index.js";
 import { FiltersDropdown } from "../filters-dropdown.js";
 function DevicesGridFilters({
   filterColumns,
@@ -23,26 +24,10 @@ function DevicesGridFilters({
       return /* @__PURE__ */ jsx(
         FiltersDropdown,
         {
-          triggerElement: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "group inline-flex cursor-pointer select-none items-center gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)]",
-              "aria-label": `Filter by ${column.label}`,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap uppercase text-ods-text-secondary transition-colors text-h5 group-hover:text-ods-text-primary", children: column.label }),
-                /* @__PURE__ */ jsx(
-                  Filter02Icon,
-                  {
-                    className: cn(
-                      "h-4 w-4 transition-colors",
-                      active ? "text-ods-accent" : "text-ods-text-secondary group-hover:text-ods-text-primary"
-                    )
-                  }
-                )
-              ]
-            }
-          ),
+          triggerElement: /* @__PURE__ */ jsxs(Button, { variant: "link", size: "compact", noPaddingX: true, type: "button", "aria-label": `Filter by ${column.label}`, children: [
+            /* @__PURE__ */ jsx("span", { className: "select-none whitespace-nowrap uppercase text-h5", children: column.label }),
+            /* @__PURE__ */ jsx(Filter02Icon, { className: cn(active && "text-ods-accent") })
+          ] }),
           sections: [
             {
               id: column.key,

package/dist/components/features/devices/devices-grid.d.ts

@@ -9,6 +9,13 @@ export interface DevicesGridProps<T extends DeviceRow = DeviceRow> {
     emptyMessage?: string;
     /** The loading state announces itself ("Loading devices"). `false` inside another loading region. Default `true`. */
     loadingRegion?: boolean;
+    /**
+     * The host's page size: the loading grid draws one full page of cards, and the next page's skeleton the same.
+     * Omitted, it falls back to {@link DEVICES_GRID_SKELETON_CARDS}.
+     */
+    pageSize?: number;
 }
-export declare function DevicesGrid<T extends DeviceRow = DeviceRow>({ devices, isLoading, hasNextPage, isFetchingNextPage, sentinelRef, emptyMessage, loadingRegion, }: DevicesGridProps<T>): React.JSX.Element;
+/** The cards a loading grid draws when the host states no page size. */
+export declare const DEVICES_GRID_SKELETON_CARDS = 12;
+export declare function DevicesGrid<T extends DeviceRow = DeviceRow>({ devices, isLoading: isLoadingProp, hasNextPage, isFetchingNextPage, sentinelRef, emptyMessage, loadingRegion, pageSize, }: DevicesGridProps<T>): React.JSX.Element;
 //# sourceMappingURL=devices-grid.d.ts.map

package/dist/components/features/devices/devices-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devices-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAC/D,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC3D,OAAO,EACP,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,YAAwE,EACxE,aAAoB,GACrB,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBA0DrB"}
+{"version":3,"file":"devices-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAC/D,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD,wEAAwE;AACxE,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAgB9C,wBAAgB,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC3D,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,YAAwE,EACxE,aAAoB,EACpB,QAAsC,GACvC,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBA6DrB"}