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

package/dist/components/features/notifications/notification-tile.js

@@ -8,6 +8,8 @@ import { formatTicketRelativeTime } from "../../../utils/date-utils.js";
 import { CheckCircleIcon } from "../../icons-v2-generated/signs-and-symbols/check-circle-icon.js";
 import { XmarkIcon } from "../../icons-v2-generated/signs-and-symbols/xmark-icon.js";
 import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { Button } from "../../ui/button/index.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { dotColorByVariant, progressColorByVariant as toastProgressColorByVariant } from "../../ui/toaster.js";
 const variantBySeverity = {
   INFO: "info",
@@ -27,10 +29,25 @@ const progressColorByVariant = {
   default: "bg-ods-accent",
   info: "bg-ods-accent"
 };
-const headerControlClass = "absolute inset-0 flex items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary";
+const headerControlClass = "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2";
 const TILE_ICON_BOX_CLASS = `flex ${ICON_SIZE.sm} shrink-0 items-center justify-center`;
 const TILE_CONTROL_BOX_CLASS = `relative ${ICON_SIZE.sm} shrink-0`;
-function NotificationTile({
+function NotificationTile(props) {
+  if (useLoadingScope() || props.loading) {
+    const variant = "variant" in props && props.variant || (props.actions ? "approval" : "default");
+    return /* @__PURE__ */ jsx(
+      NotificationTileSkeleton,
+      {
+        variant,
+        presentation: props.presentation,
+        descriptionLines: props.descriptionLines,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(LoadedNotificationTile, { ...props });
+}
+function LoadedNotificationTile({
   notification,
   liveDurationMs = 4e3,
   onComplete,
@@ -129,15 +146,17 @@ function NotificationTile({
                     onClick: () => onComplete(id)
                   }
                 ].map(({ active, label, icon: actionIcon, onClick }) => /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
+                    variant: "transparent",
+                    size: "icon-inline",
                     type: "button",
                     onClick,
                     "aria-label": label,
                     "aria-hidden": !active,
                     disabled: !active,
                     tabIndex: active ? 0 : -1,
-                    className: cn(headerControlClass, !active && "pointer-events-none opacity-0"),
+                    className: cn(headerControlClass, !active && "invisible"),
                     children: actionIcon
                   },
                   label
@@ -242,6 +261,5 @@ export {
   APPROVAL_BUTTON_CLASS,
   APPROVAL_TOGGLE_BUTTON_CLASS,
   LOCKSCREEN_APPROVAL_BUTTON_CLASS,
-  NotificationTile,
-  NotificationTileSkeleton
+  NotificationTile
 };

package/dist/components/features/os-type-badge-group.d.ts

@@ -7,6 +7,8 @@ export interface OSTypeBadgeGroupProps {
     iconSize?: string;
     /** Maximum number of badges to display before showing "+N more" */
     maxDisplay?: number;
+    /** Draws its loading state (also inside a `LoadingScope`): one icon's box at `iconSize`. */
+    loading?: boolean;
 }
 /**
  * OSTypeBadgeGroup - Displays multiple OS type icons in a group (icons only, no labels)
@@ -17,5 +19,5 @@ export interface OSTypeBadgeGroupProps {
  * <OSTypeBadgeGroup osTypes={['macos', 'linux']} maxDisplay={2} />
  * ```
  */
-export declare function OSTypeBadgeGroup({ osTypes, className, iconSize, maxDisplay }: OSTypeBadgeGroupProps): import("react").JSX.Element | null;
+export declare function OSTypeBadgeGroup({ osTypes, className, iconSize, maxDisplay, loading, }: OSTypeBadgeGroupProps): import("react").JSX.Element | null;
 //# sourceMappingURL=os-type-badge-group.d.ts.map

package/dist/components/features/os-type-badge-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"os-type-badge-group.d.ts","sourceRoot":"","sources":["../../../src/components/features/os-type-badge-group.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,qBAAqB;IACpC,mEAAmE;IACnE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,SAAc,EAAE,QAAoB,EAAE,UAAU,EAAE,EAAE,qBAAqB,sCAiBpH"}
+{"version":3,"file":"os-type-badge-group.d.ts","sourceRoot":"","sources":["../../../src/components/features/os-type-badge-group.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,qBAAqB;IACpC,mEAAmE;IACnE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAc,EACd,QAAoB,EACpB,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,sCAyBvB"}

package/dist/components/features/os-type-badge-group.js

@@ -1,8 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { MediaSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { OSTypeBadge } from "./os-type-badge.js";
-function OSTypeBadgeGroup({ osTypes, className = "", iconSize = "w-5 h-5", maxDisplay }) {
+function OSTypeBadgeGroup({
+  osTypes,
+  className = "",
+  iconSize = "w-5 h-5",
+  maxDisplay,
+  loading
+}) {
+  if (useLoadingScope() || loading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), children: /* @__PURE__ */ jsx(MediaSkeleton.Icon, { className: iconSize }) });
+  }
   if (!osTypes || osTypes.length === 0) {
     return null;
   }

package/dist/components/features/os-type-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"os-type-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/os-type-badge.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkClD,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAEA,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAEA,CAAC"}
+{"version":3,"file":"os-type-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/os-type-badge.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ClD,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAEA,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAEA,CAAC"}

package/dist/components/features/os-type-badge.js

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { getOSIcon, getOSLabel, normalizeOSType } from "../../utils/os-utils.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 const OSTypeBadge = ({
   osType,
   className = "",
@@ -11,6 +13,14 @@ const OSTypeBadge = ({
   labelOnly = false,
   rightIcon = null
 }) => {
+  if (useLoadingScope() && !osType) {
+    if (iconOnly) return /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(iconSize, className) });
+    if (labelOnly) return /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: cn("w-16", className) });
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-h4", className), children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: iconSize }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-16" })
+    ] });
+  }
   if (!osType) {
     return labelOnly ? /* @__PURE__ */ jsx("span", { className: cn("text-ods-text-secondary", className), children: "Unknown" }) : null;
   }

package/dist/components/features/paths-display.d.ts

@@ -67,13 +67,6 @@ export declare const PATHS_DISPLAY_SKELETON_ROWS = 2;
  * ```
  */
 export declare function PathsDisplay({ paths, onCopyPath, title, description, className, showCopyButtons, copyIconSize, leadingIcon, }: PathsDisplayProps): React.JSX.Element | null;
-/**
- * The paths list while its paths are read: the same frame, its title, description, leading icon and copy glyph for
- * real, and `rows` rows with a bar of a path each.
- */
-export declare function PathsDisplaySkeleton({ rows, title, description, showCopyButtons, copyIconSize, leadingIcon, className, }: Pick<PathsDisplayProps, 'title' | 'description' | 'showCopyButtons' | 'copyIconSize' | 'leadingIcon' | 'className'> & {
-    rows?: number;
-}): React.JSX.Element;
 /**
  * Pre-defined path sets for common use cases
  */

package/dist/components/features/paths-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths-display.d.ts","sourceRoot":"","sources":["../../../src/components/features/paths-display.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAUD,8EAA8E;AAC9E,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,EACT,eAAsB,EACtB,YAAwB,EACxB,WAAW,GACZ,EAAE,iBAAiB,4BA4CnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAkC,EAClC,KAAK,EACL,WAAW,EACX,eAAsB,EACtB,YAAwB,EACxB,WAAW,EACX,SAAS,GACV,EAAE,IAAI,CACL,iBAAiB,EACjB,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,CAC3F,GAAG;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,qBAsBA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAYlB,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,eAAe,CAAC;AAElE;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM,EAAE,CAE5E;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAOnE,CAAC;AAEX;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM,CAElF"}
+{"version":3,"file":"paths-display.d.ts","sourceRoot":"","sources":["../../../src/components/features/paths-display.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AASD,8EAA8E;AAC9E,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,EACT,eAAsB,EACtB,YAAwB,EACxB,WAAW,GACZ,EAAE,iBAAiB,4BA8CnB;AA+CD;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAYlB,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,eAAe,CAAC;AAElE;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM,EAAE,CAE5E;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAOnE,CAAC;AAEX;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM,CAElF"}

package/dist/components/features/paths-display.js

@@ -3,13 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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 { useLoadingScope } from "../ui/loading-scope.js";
+import { Button, buttonVariants } from "../ui/button/index.js";
+import { LoadingItems, useLoadingScope } from "../ui/loading-scope.js";
 const PATHS_CLASS = "flex flex-col gap-3";
 const PATHS_TITLE_CLASS = "text-ods-text-primary text-h4";
 const PATHS_DESCRIPTION_CLASS = "text-ods-text-secondary text-h6";
 const PATHS_FRAME_CLASS = "overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg";
 const PATHS_ROW_CLASS = "flex items-center gap-4 border-b border-ods-border p-4 last:border-b-0";
-const PATHS_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 PATHS_COPY_BUTTON_LAYOUT = "shrink-0";
 const PATHS_DISPLAY_SKELETON_ROWS = 2;
 const PATH_SKELETON_WIDTHS = ["w-3/5", "w-2/5", "w-1/2", "w-1/3"];
 function PathsDisplay({
@@ -42,16 +43,18 @@ function PathsDisplay({
   return /* @__PURE__ */ jsxs("div", { className: cn(PATHS_CLASS, className), children: [
     title && /* @__PURE__ */ jsx("div", { className: PATHS_TITLE_CLASS, children: title }),
     description && /* @__PURE__ */ jsx("div", { className: PATHS_DESCRIPTION_CLASS, children: description }),
-    /* @__PURE__ */ jsx("div", { className: PATHS_FRAME_CLASS, children: paths.map((path) => /* @__PURE__ */ jsxs("div", { className: PATHS_ROW_CLASS, children: [
+    /* @__PURE__ */ jsx("div", { className: PATHS_FRAME_CLASS, children: paths.map((path) => /* @__PURE__ */ jsxs("div", { className: PATHS_ROW_CLASS, "data-loading-item": true, children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ods-text-primary", children: leadingIcon }),
       /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-ods-text-primary text-h4", children: path }),
       showCopyButtons && onCopyPath && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-sm",
           type: "button",
           onClick: () => onCopyPath(path),
           "aria-label": `Copy ${path}`,
-          className: PATHS_COPY_BUTTON_CLASS,
+          className: PATHS_COPY_BUTTON_LAYOUT,
           children: /* @__PURE__ */ jsx(Copy02Icon, { className: copyIconSize })
         }
       )
@@ -70,11 +73,17 @@ function PathsDisplaySkeleton({
   return /* @__PURE__ */ jsxs("div", { className: cn(PATHS_CLASS, className), "aria-hidden": true, children: [
     title && /* @__PURE__ */ jsx("div", { className: PATHS_TITLE_CLASS, children: title }),
     description && /* @__PURE__ */ jsx("div", { className: PATHS_DESCRIPTION_CLASS, children: description }),
-    /* @__PURE__ */ jsx("div", { className: PATHS_FRAME_CLASS, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", { className: PATHS_ROW_CLASS, children: [
+    /* @__PURE__ */ jsx("div", { className: PATHS_FRAME_CLASS, children: /* @__PURE__ */ jsx(LoadingItems, { count: rows, children: (i) => /* @__PURE__ */ jsxs("div", { className: PATHS_ROW_CLASS, "data-loading-item": true, children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ods-text-primary", children: leadingIcon }),
       /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: PATH_SKELETON_WIDTHS[i % PATH_SKELETON_WIDTHS.length] }) }),
-      showCopyButtons && /* @__PURE__ */ jsx("span", { className: PATHS_COPY_BUTTON_CLASS, children: /* @__PURE__ */ jsx(Copy02Icon, { className: copyIconSize }) })
-    ] }, i)) })
+      showCopyButtons && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(buttonVariants({ variant: "transparent", size: "icon-sm" }), PATHS_COPY_BUTTON_LAYOUT),
+          children: /* @__PURE__ */ jsx(Copy02Icon, { className: copyIconSize })
+        }
+      )
+    ] }) }) })
   ] });
 }
 const OPENFRAME_PATHS = {
@@ -108,7 +117,6 @@ export {
   OPENFRAME_PATHS,
   PATHS_DISPLAY_SKELETON_ROWS,
   PathsDisplay,
-  PathsDisplaySkeleton,
   getOpenFrameDoctorCommand,
   getOpenFramePaths
 };

package/dist/components/features/platform-badge.d.ts

@@ -7,9 +7,10 @@ interface PlatformBadgeProps {
     size?: 'xs' | 'sm' | 'md';
     showLabel?: boolean;
     className?: string;
+    /** The record is still being read: the badge draws its skeleton at its size. A loading scope does the same while
+     *  no platform is given. */
+    loading?: boolean;
 }
-export declare function PlatformBadge({ platform, size, showLabel, className }: PlatformBadgeProps): import("react").JSX.Element | null;
-/** A platform badge while its record is read: one shape of the badge's height at its size. */
-export declare function PlatformBadgeSkeleton({ size, showLabel, className, }: Pick<PlatformBadgeProps, 'size' | 'showLabel' | 'className'>): import("react").JSX.Element;
+export declare function PlatformBadge({ platform, size, showLabel, className, loading }: PlatformBadgeProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=platform-badge.d.ts.map

package/dist/components/features/platform-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platform-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/platform-badge.tsx"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACtB,GAAG,IAAI,CAAC;IACT,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAgB,EAAE,SAAS,EAAE,EAAE,kBAAkB,sCA+BvG;AAYD,8FAA8F;AAC9F,wBAAgB,qBAAqB,CAAC,EACpC,IAAW,EACX,SAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,WAAW,GAAG,WAAW,CAAC,+BAa9D"}
+{"version":3,"file":"platform-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/platform-badge.tsx"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACtB,GAAG,IAAI,CAAC;IACT,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;gCAC4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAuBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAgB,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,kBAAkB,sCAgChH"}

package/dist/components/features/platform-badge.js

@@ -23,8 +23,9 @@ const sizeClasses = {
   }
 };
 const PLATFORM_BADGE_FRAME_CLASS = "inline-flex items-center rounded-full border";
-function PlatformBadge({ platform, size = "sm", showLabel = true, className }) {
-  if (useLoadingScope() && !platform) {
+function PlatformBadge({ platform, size = "sm", showLabel = true, className, loading }) {
+  const inScope = useLoadingScope();
+  if (loading || inScope && !platform) {
     return /* @__PURE__ */ jsx(PlatformBadgeSkeleton, { size, showLabel, className });
   }
   if (!platform) {
@@ -76,6 +77,5 @@ function PlatformBadgeSkeleton({
   );
 }
 export {
-  PlatformBadge,
-  PlatformBadgeSkeleton
+  PlatformBadge
 };

package/dist/components/features/policies/policies-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"policies-table.d.ts","sourceRoot":"","sources":["../../../../src/components/features/policies/policies-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AAMvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAiBzD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mEAAmE;IACnE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,wJAAwJ;IACxJ,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAiB,EACjB,YAAoB,EACpB,QAAgB,EAChB,YAAY,EACZ,UAAU,EACV,SAAiB,EACjB,YAAoB,EACpB,kBAAkB,EAClB,SAAS,EACT,YAAiB,EACjB,OAAe,EACf,UAAU,EACV,aAAqB,GACtB,EAAE,kBAAkB,+BAgKpB"}
+{"version":3,"file":"policies-table.d.ts","sourceRoot":"","sources":["../../../../src/components/features/policies/policies-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AAgBvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAmDzD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mEAAmE;IACnE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,wJAAwJ;IACxJ,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAiB,EACjB,YAAoB,EACpB,QAAgB,EAChB,YAAY,EACZ,UAAU,EACV,SAAiB,EACjB,YAAoB,EACpB,kBAAkB,EAClB,SAAS,EACT,YAAY,EACZ,OAAe,EACf,UAAU,EACV,aAAqB,GACtB,EAAE,kBAAkB,+BAuJpB"}

package/dist/components/features/policies/policies-table.js

@@ -3,14 +3,48 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { openInNewTab } from "../../../utils/open-in-new-tab.js";
 import { ArrowRightUpIcon } from "../../icons-v2-generated/arrows/arrow-right-up-icon.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { Button } from "../../ui/button/index.js";
-import { DataTable, useDataTable } from "../../ui/data-table/index.js";
+import {
+  DataTable,
+  dataTableLoadingRows,
+  useDataTable
+} from "../../ui/data-table/index.js";
+import { DATA_TABLE_SKELETON_ROWS } from "../../ui/data-table/utils.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { MoreActionsMenu } from "../../ui/more-actions-menu.js";
 import { Tag } from "../../ui/tag.js";
 import { TruncateText } from "../../ui/truncate-text.js";
 import { OSTypeBadgeGroup } from "../os-type-badge-group.js";
 const EMPTY_COLUMN_FILTERS = [];
 const ALL_PLATFORMS = ["windows", "darwin", "linux"];
+const loadingPolicy = (id) => ({
+  id,
+  name: "",
+  critical: false,
+  severityLabel: "",
+  status: { label: "", variant: "grey" },
+  href: ""
+});
+function PolicySeverity({ label }) {
+  if (useLoadingScope() && !label) return /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-16" });
+  return /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: label });
+}
+function OpenPolicyButton({ href, name }) {
+  const loading = useLoadingScope();
+  return /* @__PURE__ */ jsx("div", { "data-no-row-click": true, className: "pointer-events-auto flex items-center justify-end", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: loading ? void 0 : openInNewTab(href),
+      disabled: loading,
+      variant: "outline",
+      size: "icon",
+      leftIcon: /* @__PURE__ */ jsx(ArrowRightUpIcon, { className: "h-5 w-5" }),
+      "aria-label": `Open ${name}`,
+      className: "bg-ods-card"
+    }
+  ) });
+}
 const NOTE_TONE_CLASS = {
   error: "text-ods-error",
   warning: "text-ods-warning"
@@ -26,13 +60,14 @@ function PoliciesTable({
   stickyHeader = false,
   stickyHeaderOffset,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
   hasMore = false,
   onLoadMore,
   isLoadingMore = false
 }) {
+  const loading = useLoadingScope() || isLoading;
   const [sorting, setSorting] = useState([]);
-  const hasActions = useMemo(() => isLoading || rows.some((r) => r.actions && r.actions.length > 0), [isLoading, rows]);
+  const hasActions = useMemo(() => loading || rows.some((r) => r.actions && r.actions.length > 0), [loading, rows]);
   const columns = useMemo(() => {
     const cols = [
       {
@@ -48,7 +83,7 @@ function PoliciesTable({
         id: "severity",
         accessorFn: (row) => row.critical ? 1 : 0,
         header: "SEVERITY",
-        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: row.original.severityLabel }),
+        cell: ({ row }) => /* @__PURE__ */ jsx(PolicySeverity, { label: row.original.severityLabel }),
         enableSorting: sortable,
         meta: { width: "w-[100px]", sortable, hideAt: "md" }
       }
@@ -91,24 +126,18 @@ function PoliciesTable({
     cols.push({
       id: "open",
       header: "",
-      cell: ({ row }) => row.original.href ? /* @__PURE__ */ jsx("div", { "data-no-row-click": true, className: "pointer-events-auto flex items-center justify-end", children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: openInNewTab(row.original.href),
-          variant: "outline",
-          size: "icon",
-          leftIcon: /* @__PURE__ */ jsx(ArrowRightUpIcon, { className: "h-5 w-5" }),
-          "aria-label": `Open ${row.original.name}`,
-          className: "bg-ods-card"
-        }
-      ) }) : null,
+      cell: ({ row }) => row.original.href !== void 0 ? /* @__PURE__ */ jsx(OpenPolicyButton, { href: row.original.href, name: row.original.name }) : null,
       enableSorting: false,
       meta: { width: "w-12 shrink-0 flex-none", hideAt: "md", align: "right" }
     });
     return cols;
   }, [showPlatform, sortable, hasActions]);
+  const loadingRows = useMemo(
+    () => loading ? dataTableLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS, loadingPolicy) : null,
+    [loading, skeletonRows]
+  );
   const table = useDataTable({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row) => row.id,
     clientSideSorting: sortable,
@@ -126,7 +155,7 @@ function PoliciesTable({
     });
   }, []);
   const rowHref = useCallback((row) => rowAsLink ? row.href : void 0, [rowAsLink]);
-  const showHeader = isLoading || rows.length > 0;
+  const showHeader = loading || rows.length > 0;
   return /* @__PURE__ */ jsxs(DataTable, { table, children: [
     showHeader && /* @__PURE__ */ jsx(
       DataTable.Header,
@@ -141,7 +170,8 @@ function PoliciesTable({
     /* @__PURE__ */ jsx(
       DataTable.Body,
       {
-        loading: isLoading,
+        loading,
+        loadingCells: true,
         skeletonRows,
         emptyMessage,
         emptyState,
@@ -149,15 +179,7 @@ function PoliciesTable({
         rowHref
       }
     ),
-    hasMore && onLoadMore && /* @__PURE__ */ jsx(
-      DataTable.InfiniteFooter,
-      {
-        hasNextPage: true,
-        isFetchingNextPage: isLoadingMore,
-        onLoadMore,
-        skeletonRows: 2
-      }
-    )
+    hasMore && onLoadMore && /* @__PURE__ */ jsx(DataTable.InfiniteFooter, { hasNextPage: true, isFetchingNextPage: isLoadingMore, onLoadMore })
   ] });
 }
 export {

package/dist/components/features/policy-configuration-panel.d.ts

@@ -1,4 +1,6 @@
 import type { FC } from 'react';
 import type { PolicyConfigurationPanelProps } from '../../types/permissions';
+/** How many collapsed category rows the panel draws while loading when the host passes no categories. */
+export declare const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
 export declare const PolicyConfigurationPanel: FC<PolicyConfigurationPanelProps>;
 //# sourceMappingURL=policy-configuration-panel.d.ts.map

package/dist/components/features/policy-configuration-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"policy-configuration-panel.d.ts","sourceRoot":"","sources":["../../../src/components/features/policy-configuration-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAIV,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAgPjC,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAqDtE,CAAC"}
+{"version":3,"file":"policy-configuration-panel.d.ts","sourceRoot":"","sources":["../../../src/components/features/policy-configuration-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAIV,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAejC,yGAAyG;AACzG,eAAO,MAAM,8CAA8C,IAAI,CAAC;AAoRhE,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA+DtE,CAAC"}

package/dist/components/features/policy-configuration-panel.js

@@ -4,19 +4,32 @@ import { ChevronDown, Shield } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { useCollapsible } from "../chat/hooks/use-collapsible.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { ToolIcon } from "../tool-icon.js";
 import { Button } from "../ui/button/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from "./approval-level.js";
 const approvalLevelOptions = APPROVAL_LEVELS.map((value) => ({ value, label: APPROVAL_LEVEL_META[value].label }));
 const POLICY_LEVEL_WIDTH = "w-[180px]";
 const CATEGORY_LEVEL_WIDTH = "w-[256px]";
+const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
+const CATEGORY_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-m)] border-t border-ods-border bg-ods-card py-[var(--spacing-system-s)] pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] first:border-t-0";
+const ICON_TILE_SIZE_CLASS = "h-8 w-8 shrink-0 rounded-md";
+const ICON_TILE_CLASS = cn(ICON_TILE_SIZE_CLASS, "flex items-center justify-center border border-ods-border bg-ods-bg");
+const CATEGORY_TEXT_CLASS = "flex min-w-0 flex-1 flex-col";
+const CATEGORY_LEVEL_COLUMN_CLASS = cn(
+  "hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block",
+  CATEGORY_LEVEL_WIDTH
+);
+const CHEVRON_CLASS = "h-6 w-6 text-ods-text-primary transition-transform duration-300";
 const getApprovalLevelLabel = (level) => APPROVAL_LEVEL_META[level]?.label ?? level;
-const ApprovalLevelDropdown = ({ value, onChange, allowClear = false, triggerClassName, contentClassName }) => /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-  /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+const ApprovalLevelDropdown = ({ value, onChange, allowClear = false, triggerClassName, contentClassName, disabled }) => /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+  /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
     Button,
     {
       variant: "outline",
+      disabled,
       rightIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-6 w-6 text-ods-text-secondary" }),
       className: cn(
         "flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] transition-colors !text-h6 hover:bg-ods-bg-hover",
@@ -36,7 +49,7 @@ const PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
     if (level) onPermissionChange(categoryId, policy.id, level);
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg", children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
+    /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: policy.name, children: policy.name }),
       /* @__PURE__ */ jsx("p", { className: "break-all text-ods-text-secondary text-h6", children: policy.commandPattern }),
@@ -61,20 +74,34 @@ const PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
     ) : /* @__PURE__ */ jsx("div", { className: cn("px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)]", POLICY_LEVEL_WIDTH), children: policy.approvalLevel && /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: getApprovalLevelLabel(policy.approvalLevel) }) }) })
   ] });
 };
-const CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle, onBulkLevelChange, onPolicyPermissionChange }) => {
+const LOADING_CATEGORY = { id: "", name: "", policies: [] };
+const CategorySection = ({
+  category,
+  editMode,
+  isExpanded: isExpandedProp,
+  bulkLevel,
+  onToggle,
+  onBulkLevelChange,
+  onPolicyPermissionChange,
+  loading: loadingGiven = false,
+  ...props
+}) => {
+  const loading = useLoadingScope() || loadingGiven;
+  const isExpanded = isExpandedProp && !loading;
   const { innerRef, containerStyle } = useCollapsible({ expanded: isExpanded, durationMs: 300 });
   const handleBulkChange = (level) => onBulkLevelChange(category.id, level);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "flex cursor-pointer items-center gap-[var(--spacing-system-m)] border-t border-ods-border bg-ods-card py-[var(--spacing-system-s)] pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] transition-colors first:border-t-0 hover:bg-ods-bg-hover",
-        onClick: () => onToggle(category.id),
+        ...loadingItemProps(props),
+        className: cn(CATEGORY_HEADER_CLASS, !loading && "cursor-pointer transition-colors hover:bg-ods-bg-hover"),
+        onClick: loading ? void 0 : () => onToggle(category.id),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg", children: /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx(Shield, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: category.name, children: category.name }),
-            /* @__PURE__ */ jsxs("p", { className: "text-ods-text-secondary text-h6", children: [
+          /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx(Shield, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: CATEGORY_TEXT_CLASS, children: [
+            category.name ? /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: category.name, children: category.name }) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-40 max-w-full" }),
+            loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-24" }) : /* @__PURE__ */ jsxs("p", { className: "text-ods-text-secondary text-h6", children: [
               category.policies.length,
               " Configurations"
             ] }),
@@ -85,7 +112,8 @@ const CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle,
                 onChange: handleBulkChange,
                 allowClear: true,
                 triggerClassName: "w-full",
-                contentClassName: CATEGORY_LEVEL_WIDTH
+                contentClassName: CATEGORY_LEVEL_WIDTH,
+                disabled: loading
               }
             ) })
           ] }),
@@ -96,35 +124,21 @@ const CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle,
               onChange: handleBulkChange,
               allowClear: true,
               triggerClassName: CATEGORY_LEVEL_WIDTH,
-              contentClassName: CATEGORY_LEVEL_WIDTH
-            }
-          ) }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block",
-                CATEGORY_LEVEL_WIDTH
-              )
+              contentClassName: CATEGORY_LEVEL_WIDTH,
+              disabled: loading
             }
-          ),
+          ) }) : /* @__PURE__ */ jsx("div", { className: CATEGORY_LEVEL_COLUMN_CLASS }),
           /* @__PURE__ */ jsx(
             Button,
             {
               type: "button",
               variant: "transparent",
+              disabled: loading,
               onClick: (e) => {
                 e.stopPropagation();
                 onToggle(category.id);
               },
-              leftIcon: /* @__PURE__ */ jsx(
-                ChevronDown,
-                {
-                  className: cn(
-                    "h-6 w-6 text-ods-text-primary transition-transform duration-300",
-                    isExpanded && "rotate-180"
-                  )
-                }
-              ),
+              leftIcon: /* @__PURE__ */ jsx(ChevronDown, { className: cn(CHEVRON_CLASS, isExpanded && "rotate-180") }),
               className: "h-auto w-auto shrink-0 rounded-md",
               "aria-label": isExpanded ? "Collapse" : "Expand"
             }
@@ -143,7 +157,7 @@ const CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle,
           visibility: isExpanded ? "visible" : "hidden"
         },
         className: isExpanded ? "opacity-100" : "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: category.policies.map((policy) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: (loading ? [] : category.policies).map((policy) => /* @__PURE__ */ jsx(
           PolicyRow,
           {
             policy,
@@ -158,13 +172,17 @@ const CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle,
   ] });
 };
 const NO_BULK_LEVELS = {};
+const PANEL_CLASS = "overflow-hidden rounded-md border border-ods-border bg-ods-card";
 const PolicyConfigurationPanel = ({
   categories,
   editMode,
   onPolicyPermissionChange,
   onCategoryPermissionChange,
+  loading: loadingProp,
+  skeletonCount = POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES,
   className
 }) => {
+  const loading = useLoadingScope() || !!loadingProp;
   const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
   const [bulkLevels, setBulkLevels] = useState(NO_BULK_LEVELS);
   const [bulkLevelsFor, setBulkLevelsFor] = useState(editMode);
@@ -186,21 +204,25 @@ const PolicyConfigurationPanel = ({
       onCategoryPermissionChange(categoryId, level);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-md border border-ods-border bg-ods-card", className), children: categories.map((category) => /* @__PURE__ */ jsx(
+  const shown = loading && categories.length === 0 ? Array.from({ length: skeletonCount }, () => LOADING_CATEGORY) : categories;
+  return /* @__PURE__ */ jsx("div", { className: cn(PANEL_CLASS, className), children: shown.map((category, index) => /* @__PURE__ */ jsx(
     CategorySection,
     {
+      "data-loading-item": true,
       category,
       editMode,
       isExpanded: expandedIds.has(category.id),
       bulkLevel: bulkLevels[category.id],
       onToggle: handleToggle,
       onBulkLevelChange: handleBulkLevelChange,
-      onPolicyPermissionChange
+      onPolicyPermissionChange,
+      loading
     },
-    category.id
+    category.id || index
   )) });
 };
 PolicyConfigurationPanel.displayName = "PolicyConfigurationPanel";
 export {
+  POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES,
   PolicyConfigurationPanel
 };