@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/features/ai-enrich/AIStatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIStatusIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/features/ai-enrich/AIStatusIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2C9D,CAAC"}
+{"version":3,"file":"AIStatusIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/features/ai-enrich/AIStatusIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2C9D,CAAC"}

package/dist/components/features/ai-enrich/AIStatusIndicator.js

@@ -7,6 +7,7 @@ import {
   getConfidenceLabel
 } from "../../../utils/confidence-helpers.js";
 import { SparklesIcon } from "../../icons-v2-generated/interface/sparkles-icon.js";
+import { LIVE_PULSE_CLASS } from "../../ui/skeleton-surface.js";
 const statusConfig = {
   idle: {
     color: "text-ods-text-secondary",
@@ -45,7 +46,7 @@ const AIStatusIndicator = ({
       {
         size: 16,
         className: cn(
-          status === "loading" && "animate-pulse",
+          status === "loading" && LIVE_PULSE_CLASS,
           confidence !== void 0 && status === "success" ? getConfidenceTextClass(confidence) : config.color
         )
       }

package/dist/components/features/approval-level.d.ts

@@ -45,6 +45,8 @@ export interface ApprovalLevelViewProps {
     showLabel?: boolean;
     /** Editable: the id of the element that names what is being decided (the rule's label). */
     'aria-labelledby'?: string;
+    /** The level is still being read: the view draws its own skeleton (also in a loading scope). */
+    loading?: boolean;
     className?: string;
 }
 /**
@@ -57,5 +59,17 @@ export interface ApprovalLevelViewProps {
  * Editable, each icon has its level's name as its accessible name and a
  * tooltip with what the level means (hover or keyboard focus; a tap selects).
  */
-export declare function ApprovalLevelView({ value, editable, onChange, disabled, showLabel, 'aria-labelledby': labelledBy, className, }: ApprovalLevelViewProps): import("react").JSX.Element;
+export declare function ApprovalLevelView({ value, editable, onChange, disabled, showLabel, 'aria-labelledby': labelledBy, loading, className, }: ApprovalLevelViewProps): import("react").JSX.Element;
+export interface ApprovalLevelSkeletonProps {
+    /** The editable form (the four levels' group) or the read-only one (the level's icon). */
+    editable?: boolean;
+    /** Whether the level's name is written before the icons (default true, like the view). */
+    showLabel?: boolean;
+    className?: string;
+}
+/**
+ * `ApprovalLevelView`'s own skeleton (a level chip, not a whole view): a level while it is read: the view's own row, the name a bar at its type step (the longest name's width), and the
+ * read-only icon's box or the editable group's four small toggle boxes. Inert: nothing in it can be picked.
+ */
+export declare function ApprovalLevelSkeleton({ editable, showLabel, className }: ApprovalLevelSkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=approval-level.d.ts.map

package/dist/components/features/approval-level.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"approval-level.d.ts","sourceRoot":"","sources":["../../../src/components/features/approval-level.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAU7D;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAAoD,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,+EAA+E;IAC/E,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAoBxE,CAAC;AAIF,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,KAAK,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAgB,EAChB,iBAAiB,EAAE,UAAU,EAC7B,SAAS,GACV,EAAE,sBAAsB,+BAqExB"}
+{"version":3,"file":"approval-level.d.ts","sourceRoot":"","sources":["../../../src/components/features/approval-level.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAc7D;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAAoD,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,+EAA+E;IAC/E,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAoBxE,CAAC;AAeF,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,KAAK,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gGAAgG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAgB,EAChB,iBAAiB,EAAE,UAAU,EAC7B,OAAe,EACf,SAAS,GACV,EAAE,sBAAsB,+BAuExB;AAED,MAAM,WAAW,0BAA0B;IACzC,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAgB,EAAE,SAAgB,EAAE,SAAS,EAAE,EAAE,0BAA0B,+BA6BlH"}

package/dist/components/features/approval-level.js

@@ -5,7 +5,11 @@ import { HeadsetIcon } from "../icons-v2-generated/audio-and-visual/headset-icon
 import { BannedIcon } from "../icons-v2-generated/security/banned-icon.js";
 import { CheckCircleIcon } from "../icons-v2-generated/signs-and-symbols/check-circle-icon.js";
 import { UserIcon } from "../icons-v2-generated/users/user-icon.js";
-import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TOGGLE_GROUP_CLASS, ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
+import { TextHold } from "../ui/layout-hold.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { TOGGLE_SIZE_CLASS } from "../ui/toggle.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
 import { TouchFriendlyTooltip } from "../ui/touch-friendly-tooltip.js";
 const APPROVAL_LEVELS = ["ALLOW", "DENY", "ASK_TECHNICIAN", "ASK_USER"];
@@ -31,6 +35,13 @@ const APPROVAL_LEVEL_META = {
   DENY: { label: "Restrict", hint: "Never runs.", Icon: BannedIcon, toneClassName: "text-ods-error" }
 };
 const ICON_PX = 16;
+const READ_ONLY_ROW_CLASS = "inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]";
+const EDITABLE_ROW_CLASS = "flex shrink-0 items-center gap-[var(--spacing-system-sf)]";
+const LEVEL_NAME_CLASS = "whitespace-nowrap text-h6";
+const LEVEL_BUTTON_CLASS = "px-2";
+const LONGEST_LEVEL_LABEL = APPROVAL_LEVELS.map((level) => APPROVAL_LEVEL_META[level].label).reduce(
+  (a, b) => b.length > a.length ? b : a
+);
 function ApprovalLevelView({
   value,
   editable,
@@ -38,22 +49,26 @@ function ApprovalLevelView({
   disabled = false,
   showLabel = true,
   "aria-labelledby": labelledBy,
+  loading = false,
   className
 }) {
-  const current = APPROVAL_LEVEL_META[value];
   const canEdit = editable ?? onChange !== void 0;
-  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: cn("whitespace-nowrap text-h6", current.toneClassName), children: current.label }) : null;
+  if (useLoadingScope() || loading) {
+    return /* @__PURE__ */ jsx(ApprovalLevelSkeleton, { editable: canEdit, showLabel, className });
+  }
+  const current = APPROVAL_LEVEL_META[value];
+  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: cn(LEVEL_NAME_CLASS, current.toneClassName), children: current.label }) : null;
   if (!canEdit) {
     const icon = /* @__PURE__ */ jsxs("span", { className: cn("inline-flex shrink-0", current.toneClassName), children: [
       /* @__PURE__ */ jsx(current.Icon, { size: ICON_PX, "aria-hidden": true }),
       !showLabel && /* @__PURE__ */ jsx("span", { className: "sr-only", children: current.label })
     ] });
-    return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", className), children: [
+    return /* @__PURE__ */ jsxs("span", { className: cn(READ_ONLY_ROW_CLASS, className), children: [
       name,
       showLabel ? icon : /* @__PURE__ */ jsx(TouchFriendlyTooltip, { content: `${current.label}: ${current.hint}`, side: "top", children: icon })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-[var(--spacing-system-sf)]", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(EDITABLE_ROW_CLASS, className), children: [
     name,
     /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsx(
       ToggleGroup,
@@ -78,7 +93,7 @@ function ApprovalLevelView({
                 {
                   value: level,
                   "aria-label": label,
-                  className: cn("px-2", level === value && toneClassName),
+                  className: cn(LEVEL_BUTTON_CLASS, level === value && toneClassName),
                   children: /* @__PURE__ */ jsx(Icon, { size: ICON_PX, "aria-hidden": true })
                 }
               ) }),
@@ -94,8 +109,29 @@ function ApprovalLevelView({
     ) })
   ] });
 }
+function ApprovalLevelSkeleton({ editable = false, showLabel = true, className }) {
+  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: LEVEL_NAME_CLASS, children: /* @__PURE__ */ jsx(TextHold, { children: LONGEST_LEVEL_LABEL }) }) : null;
+  if (!editable) {
+    return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn(READ_ONLY_ROW_CLASS, className), children: [
+      name,
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "inline-block shrink-0 rounded-sm", width: ICON_PX, height: ICON_PX })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, inert: true, className: cn(EDITABLE_ROW_CLASS, className), children: [
+    name,
+    /* @__PURE__ */ jsx("div", { className: TOGGLE_GROUP_CLASS, children: APPROVAL_LEVELS.map((level) => /* @__PURE__ */ jsx(
+      UnifiedSkeleton,
+      {
+        className: cn(TOGGLE_SIZE_CLASS.sm, LEVEL_BUTTON_CLASS, "box-content shrink-0 rounded-md"),
+        width: ICON_PX
+      },
+      level
+    )) })
+  ] });
+}
 export {
   APPROVAL_LEVELS,
   APPROVAL_LEVEL_META,
+  ApprovalLevelSkeleton,
   ApprovalLevelView
 };

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

@@ -66,6 +66,10 @@ export interface CapabilityExplorerProps {
     /** The marks beside the two turns of an example that names nobody of its own. */
     requesterMark?: ReactNode;
     responderMark?: ReactNode;
+    /** The jobs are being read (the host's query runs): the explorer draws its own skeleton. A page's loading scope does too. */
+    loading?: boolean;
+    /** The jobs the skeleton's list draws: one screen of the host's list. */
+    fold?: number;
     className?: string;
 }
 /** The element id of a job's tab (never the job's own id: that is the host's anchor). */
@@ -99,5 +103,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, className, }: CapabilityExplorerProps): import("react").JSX.Element | null;
+export declare function CapabilityExplorer({ items, labels, activeId, onActiveChange, renderScreen, requesterMark, responderMark, loading, fold, className, }: CapabilityExplorerProps): import("react").JSX.Element | null;
 //# sourceMappingURL=capability-explorer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"capability-explorer.d.ts","sourceRoot":"","sources":["../../../src/components/features/capability-explorer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAWnE,0FAA0F;AAC1F,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,sBAAsB,CAAC;QACnC,SAAS,CAAC,EAAE,sBAAsB,CAAC;KACpC,GAAG,IAAI,CAAC;IACT,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,kGAAkG;AAClG,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yFAAyF;IACzF,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC;IACzF,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,yFAAyF;AACzF,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAqB,CAAC;AAoInE;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,MAAa,EACb,SAAS,EACT,KAAS,GACV,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BA6FA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,sCA6MzB"}
+{"version":3,"file":"capability-explorer.d.ts","sourceRoot":"","sources":["../../../src/components/features/capability-explorer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAenE,0FAA0F;AAC1F,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,sBAAsB,CAAC;QACnC,SAAS,CAAC,EAAE,sBAAsB,CAAC;KACpC,GAAG,IAAI,CAAC;IACT,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,kGAAkG;AAClG,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yFAAyF;IACzF,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC;IACzF,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6HAA6H;IAC7H,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,yFAAyF;AACzF,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAqB,CAAC;AAmInE;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,MAAa,EACb,SAAS,EACT,KAAS,GACV,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAuEA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,OAAe,EACf,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,sCAgNzB"}

package/dist/components/features/capability-explorer.js

@@ -2,24 +2,35 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useContentLgUp } from "../../hooks/ui/use-content-breakpoint.js";
+import { TILE_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
+import { AgentAvatarSkeleton } from "../agent-mark.js";
 import { EntityIcon } from "../icon-display.js";
 import { Chevron02RightIcon } from "../icons-v2-generated/arrows/chevron-02-right-icon.js";
 import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { SnapCarousel, SnapCarouselControlsSkeleton } from "../ui/snap-carousel.js";
+import { SquareAvatarSkeleton } from "../ui/square-avatar.js";
 import { TruncateText } from "../ui/truncate-text.js";
 const PANEL_HEIGHT_CLASS = "h-[824px]";
 const PANEL_TOP_HEIGHT_CLASS = "h-[256px]";
 const PANEL_SCREEN_HEIGHT_CLASS = "h-[420px]";
 const PANEL_FOOTER_HEIGHT_CLASS = "h-[52px]";
 const CARD_HEIGHT_CLASS = "h-[700px]";
+const JOB_ICON_TILE_BOX = `${TILE_SIZE.md} shrink-0 rounded-lg`;
+const JOB_ICON_TILE_CLASS = cn(
+  JOB_ICON_TILE_BOX,
+  "flex items-center justify-center border border-ods-border bg-ods-bg"
+);
+const EXAMPLE_MARK_PX = 24;
 const capabilityTabId = (id) => `${id}-tab`;
+const HIGHLIGHT_ICON_PX = 16;
 function Highlights({ items, className }) {
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-1 gap-2", className), children: items.slice(0, 3).map((text) => /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 items-center gap-2.5", children: [
-    /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "shrink-0 text-ods-flamingo-cyan" }),
+    /* @__PURE__ */ jsx(CheckIcon, { size: HIGHLIGHT_ICON_PX, className: "shrink-0 text-ods-flamingo-cyan" }),
     /* @__PURE__ */ jsx(TruncateText, { variant: "h6", triggerClassName: "flex-1", children: text })
   ] }, text)) });
 }
@@ -34,7 +45,14 @@ function Example({
     /* @__PURE__ */ jsx("span", { className: "shrink-0", children: name }),
     note && /* @__PURE__ */ jsx("span", { className: "truncate text-ods-text-secondary", children: note })
   ] });
-  const mark = (node) => node ? /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center", children: node }) : null;
+  const mark = (node) => node ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "flex shrink-0 items-center justify-center",
+      style: { width: EXAMPLE_MARK_PX, height: EXAMPLE_MARK_PX },
+      children: node
+    }
+  ) : null;
   const requester = example.requester;
   const responder = example.responder;
   return /* @__PURE__ */ jsxs(
@@ -66,15 +84,14 @@ function Example({
     }
   );
 }
-const LINE_SKELETON_CLASS = "inline-block h-[0.7em] rounded align-middle";
 function ExampleSkeleton({ className }) {
   const turn = (first) => /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 gap-2.5", !first && "border-t border-ods-border pt-3"), children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-6 shrink-0 rounded-full" }),
+    first ? /* @__PURE__ */ jsx(SquareAvatarSkeleton, { variant: "round", sizePx: EXAMPLE_MARK_PX, className: "shrink-0" }) : /* @__PURE__ */ jsx(AgentAvatarSkeleton, { size: EXAMPLE_MARK_PX }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-28") }) }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-28" }),
       /* @__PURE__ */ jsxs("div", { className: "min-h-[2lh] text-h4", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-full") }) }),
-        /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-2/3") }) })
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-full" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-2/3" })
       ] })
     ] })
   ] });
@@ -94,10 +111,10 @@ function ExampleSkeleton({ className }) {
 }
 function JobHeadSkeleton() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-9 shrink-0 rounded-lg" }),
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: JOB_ICON_TILE_BOX }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-32") }) }),
-      /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-40") }) }) })
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-32" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-40" }) })
     ] })
   ] });
 }
@@ -118,8 +135,8 @@ function CapabilityExplorerSkeleton({
           children: [
             /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-3", children: /* @__PURE__ */ jsx(JobHeadSkeleton, {}) }),
             /* @__PURE__ */ jsxs("div", { className: "min-h-[3lh] text-h6", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-full") }) }),
-              /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-5/6") }) })
+              /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-full" }),
+              /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-5/6" })
             ] }),
             /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[300px] shrink-0 rounded-lg" }),
             /* @__PURE__ */ jsx(ExampleSkeleton, { className: "shrink-0" })
@@ -150,32 +167,19 @@ function CapabilityExplorerSkeleton({
           /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-col gap-5 overflow-hidden rounded-xl border border-ods-border bg-ods-card px-8 py-7", children: [
             /* @__PURE__ */ jsxs("div", { className: cn("grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8", PANEL_TOP_HEIGHT_CLASS), children: [
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col overflow-hidden", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx("div", { className: "text-h2", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-64") }) }) }),
+                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h2", className: "w-64" }) }),
                 /* @__PURE__ */ jsxs("div", { className: "min-h-[3lh] text-h4", children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-full") }) }),
-                  /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-4/5") }) })
+                  /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-full" }),
+                  /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-4/5" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "mt-auto grid grid-cols-1 gap-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 shrink-0 rounded-full" }),
-                  /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, i === 1 ? "w-56" : "w-48") }) })
+                  /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "shrink-0" }),
+                  /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: i === 1 ? "w-56" : "w-48" })
                 ] }, i)) })
               ] }),
               /* @__PURE__ */ jsx(ExampleSkeleton, {})
             ] }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("shrink-0 rounded-xl", PANEL_SCREEN_HEIGHT_CLASS) }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex min-w-0 shrink-0 items-center gap-[var(--spacing-system-sf)]",
-                  PANEL_FOOTER_HEIGHT_CLASS
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-h5", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-16") }) }),
-                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-7 w-36 rounded-md" })
-                ]
-              }
-            )
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("shrink-0 rounded-xl", PANEL_SCREEN_HEIGHT_CLASS) })
           ] })
         ]
       }
@@ -190,10 +194,14 @@ function CapabilityExplorer({
   renderScreen,
   requesterMark,
   responderMark,
+  loading = false,
+  fold,
   className
 }) {
   const wide = useContentLgUp();
   const listRef = useRef(null);
+  const inScope = useLoadingScope();
+  if (inScope || loading) return /* @__PURE__ */ jsx(CapabilityExplorerSkeleton, { region: !inScope, count: fold, className });
   if (items.length === 0) return null;
   if (wide === void 0) return /* @__PURE__ */ jsx(CapabilityExplorerSkeleton, { className });
   if (!wide) {
@@ -217,7 +225,7 @@ function CapabilityExplorer({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-                item.iconName && /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-flamingo-cyan", children: /* @__PURE__ */ jsx(EntityIcon, { icon: { name: item.iconName }, size: 18 }) }),
+                item.iconName && /* @__PURE__ */ jsx("span", { className: cn(JOB_ICON_TILE_CLASS, "text-ods-flamingo-cyan"), children: /* @__PURE__ */ jsx(EntityIcon, { icon: { name: item.iconName }, size: 18 }) }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("h3", { className: "flex min-w-0 items-center gap-2 text-ods-text-primary text-h4", children: [
                     /* @__PURE__ */ jsx(TruncateText, { as: "span", variant: "h4", triggerClassName: "flex-1", children: item.title }),
@@ -297,10 +305,7 @@ function CapabilityExplorer({
                     item.iconName && /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: cn(
-                          "flex size-9 shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg",
-                          selected ? "text-ods-flamingo-cyan" : "text-ods-text-secondary"
-                        ),
+                        className: cn(JOB_ICON_TILE_CLASS, selected ? "text-ods-flamingo-cyan" : "text-ods-text-secondary"),
                         children: /* @__PURE__ */ jsx(EntityIcon, { icon: { name: item.iconName }, size: 18 })
                       }
                     ),

package/dist/components/features/cards-strip.d.ts

@@ -97,6 +97,15 @@ interface CardsStripEngineProps {
     /** Merged into the engine's wrapper ref (e.g. `useVideoWarmup().ref`). */
     rootRef?: (el: HTMLDivElement | null) => void;
     className?: string;
+    /**
+     * The strip in a page's loading state, when its items are read (none handed in yet): `count` copies of `card`, the
+     * strip's cards' own skeleton (in children mode each in the managed cell's width). `count` is the strip's fold:
+     * the cards one screen of the strip shows. Absent: an empty strip draws nothing, in a scope too.
+     */
+    skeleton?: {
+        card: React.ReactNode;
+        count: number;
+    };
 }
 /** MODE A — render-prop (advanced): full ctx control, no cell wrapper. */
 interface RenderCardMode<T> {

package/dist/components/features/cards-strip.d.ts.map

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

package/dist/components/features/cards-strip.js

@@ -12,6 +12,7 @@ import { Chevron02LeftIcon } from "../icons-v2-generated/arrows/chevron-02-left-
 import { Chevron02RightIcon } from "../icons-v2-generated/arrows/chevron-02-right-icon.js";
 import { accentSentenceMarks, SECTION_HEADING_CLASS } from "../layout/page-heading.js";
 import { Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 const TRACK_GAP_PX = 16;
 const CHEVRON_SUPPRESS_MS = 4e3;
 const USER_SCROLL_SUPPRESS_MS = 3e3;
@@ -59,6 +60,14 @@ function measureBleedInsets(el) {
     right: Math.max(0, Math.floor(boundRight - rect.right))
   };
 }
+const STRIP_CELL_CLASS = "w-[var(--strip-cell-mobile)] shrink-0 self-stretch min-[768px]:w-[var(--strip-cell-desktop)]";
+const stripCellStyle = (mobile, desktop) => ({
+  "--strip-cell-mobile": `${mobile}px`,
+  "--strip-cell-desktop": `${desktop}px`,
+  maxWidth: STRIP_CELL_MAX_WIDTH
+});
+const STRIP_ROOT_CLASS = "flex w-full min-w-0 flex-col gap-6";
+const STRIP_TRACK_CLASS = "flex w-max items-stretch gap-4";
 function ManagedCell({
   item,
   ctx,
@@ -71,12 +80,8 @@ function ManagedCell({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "w-[var(--strip-cell-mobile)] shrink-0 self-stretch min-[768px]:w-[var(--strip-cell-desktop)]",
-      style: {
-        "--strip-cell-mobile": `${cardWidthMobile}px`,
-        "--strip-cell-desktop": `${desktopWidth}px`,
-        maxWidth: STRIP_CELL_MAX_WIDTH
-      },
+      className: STRIP_CELL_CLASS,
+      style: stripCellStyle(cardWidthMobile, desktopWidth),
       "data-strip-card-key": ctx.cardKey,
       onPointerEnter: ctx.isTouch ? void 0 : () => ctx.onActivate(ctx.cardKey),
       onPointerLeave: ctx.isTouch ? void 0 : () => ctx.onDeactivate(ctx.cardKey),
@@ -103,8 +108,10 @@ function CardsStrip(props) {
     prevLabel = "Previous items",
     nextLabel = "Next items",
     rootRef,
-    className
+    className,
+    skeleton
   } = props;
+  const inScope = useLoadingScope();
   const childrenMode = props.renderCard === void 0;
   const childItems = useMemo(
     () => childrenMode ? React.Children.toArray(props.children) : EMPTY_CHILDREN,
@@ -394,7 +401,24 @@ function CardsStrip(props) {
     }
     return /* @__PURE__ */ jsx(ManagedCell, { item, ctx, cardWidthMobile, cardWidthDesktop });
   };
-  if (items.length === 0) return null;
+  const heading = showTitle && title && /* @__PURE__ */ jsx("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: accentSentenceMarks(title) });
+  if (items.length === 0) {
+    if (!inScope || !skeleton) return null;
+    return /* @__PURE__ */ jsxs("div", { className: cn(STRIP_ROOT_CLASS, className), children: [
+      heading,
+      headerSlot,
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: STRIP_TRACK_CLASS, children: Array.from(
+        { length: skeleton.count },
+        (_, i) => childrenMode ? (
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+          /* @__PURE__ */ jsx("div", { className: STRIP_CELL_CLASS, style: stripCellStyle(cardWidthMobile, cardWidthDesktop), children: skeleton.card }, i)
+        ) : (
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+          /* @__PURE__ */ jsx(React.Fragment, { children: skeleton.card }, i)
+        )
+      ) }) })
+    ] });
+  }
   const copies = marqueeActive ? 2 : 1;
   const bled = overflows && (insets.left > 0 || insets.right > 0);
   const fadeOf = (inset) => Math.min(FADE_MAX_PX, Math.max(FADE_MIN_PX, inset));
@@ -407,9 +431,9 @@ function CardsStrip(props) {
         wrapperRef.current = node;
         rootRef?.(node);
       },
-      className: cn("flex w-full min-w-0 flex-col gap-6", className),
+      className: cn(STRIP_ROOT_CLASS, className),
       children: [
-        showTitle && title && /* @__PURE__ */ jsx("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: accentSentenceMarks(title) }),
+        heading,
         headerSlot,
         /* @__PURE__ */ jsxs("div", { className: "relative", style: bled ? { marginLeft: -insets.left, marginRight: -insets.right } : void 0, children: [
           /* @__PURE__ */ jsx(
@@ -430,7 +454,7 @@ function CardsStrip(props) {
               onPointerLeave: onHoverPointerLeave,
               onPointerCancel: clearHover,
               onScroll: onSeamWarp,
-              children: /* @__PURE__ */ jsx("div", { ref: trackRef, "data-copies": copies, className: "flex w-max items-stretch gap-4", children: Array.from(
+              children: /* @__PURE__ */ jsx("div", { ref: trackRef, "data-copies": copies, className: STRIP_TRACK_CLASS, children: Array.from(
                 { length: copies },
                 (_, copyIndex) => items.map((item, i) => {
                   const key = `${getItemKey(item, i)}__${copyIndex}__${i}`;

package/dist/components/features/command-box.d.ts

@@ -44,4 +44,23 @@ export interface CommandBoxProps {
     copyAriaLabel?: string;
 }
 export declare function CommandBox({ command, title, primaryAction, secondaryAction, className, commandClassName, maxLines, visibleLines, onCopy, copyAriaLabel, }: CommandBoxProps): React.JSX.Element;
+/**
+ * The command box while its command is read: the same box, its title and action buttons for real (their labels are
+ * the box's own words), and the command as a bar `lines` lines tall at the command's type step.
+ */
+export declare function CommandBoxSkeleton({ title, lines, visibleLines, primaryActionLabel, primaryActionIcon, primaryActionVariant, secondaryActionLabel, secondaryActionIcon, secondaryActionVariant, showCopy, className, }: {
+    title?: string;
+    lines?: number;
+    /** The box's fixed-height mode (`CommandBox` `visibleLines`): that many rows tall, plus the toggle row. */
+    visibleLines?: number;
+    primaryActionLabel?: string;
+    primaryActionIcon?: React.ReactNode;
+    primaryActionVariant?: CommandBoxAction['variant'];
+    secondaryActionLabel?: string;
+    secondaryActionIcon?: React.ReactNode;
+    secondaryActionVariant?: CommandBoxAction['variant'];
+    /** Draw the corner copy glyph (the box has `onCopy`). */
+    showCopy?: boolean;
+    className?: string;
+}): React.JSX.Element;
 //# sourceMappingURL=command-box.d.ts.map

package/dist/components/features/command-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-box.d.ts","sourceRoot":"","sources":["../../../src/components/features/command-box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;IAC/D,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,yDAAyD;IACzD,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6CD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,aAAa,EACb,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,QAAY,EACZ,YAAY,EACZ,MAAM,EACN,aAA8B,GAC/B,EAAE,eAAe,qBAwFjB"}
+{"version":3,"file":"command-box.d.ts","sourceRoot":"","sources":["../../../src/components/features/command-box.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;IAC/D,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,yDAAyD;IACzD,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0DD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,aAAa,EACb,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,QAAY,EACZ,YAAY,EACZ,MAAM,EACN,aAA8B,GAC/B,EAAE,eAAe,qBA0GjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,QAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACnD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,sBAAsB,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACrD,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBA+DA"}