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

package/dist/components/ui/ticket-status-tag.js

@@ -4,7 +4,9 @@ import { cn } from "../../utils/cn.js";
 import { deriveActiveColor, deriveHoverColor, getReadableTextColor } from "../../utils/ods-color-utils.js";
 import { CheckCircleIcon, Chevron02DownIcon } from "../icons-v2-generated/index.js";
 import { ActionsMenuDropdown } from "./actions-menu.js";
+import { Button } from "./button/index.js";
 import { ColorSwatch } from "./color-swatch.js";
+import { useLoadingScope } from "./loading-scope.js";
 import { Tag, tagVariants } from "./tag.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 const STATUS_CONFIG = {
@@ -108,8 +110,10 @@ function TicketStatusTag({
   onSelect,
   isPending = false,
   disabled = false,
-  disabledReason
+  disabledReason,
+  loading: loadingProp = false
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const config = getTicketStatusConfig(status);
   const customStyle = color ? {
     "--tag-bg": color,
@@ -121,6 +125,7 @@ function TicketStatusTag({
   const tag = /* @__PURE__ */ jsx(
     Tag,
     {
+      loading,
       label: label ?? config.label,
       variant: variant ?? config.variant,
       icon: showIcon ? config.icon : void 0,
@@ -128,8 +133,8 @@ function TicketStatusTag({
       style: customStyle
     }
   );
-  if (disabled || !options || options.length === 0 || !onSelect) {
-    if (disabled && disabledReason) {
+  if (loading || disabled || !options || options.length === 0 || !onSelect) {
+    if (!loading && disabled && disabledReason) {
       return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "w-fit shrink-0 cursor-not-allowed", children: tag }) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: disabledReason })
@@ -152,31 +157,40 @@ function TicketStatusTag({
           }))
         }
       ],
-      customTrigger: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          disabled: isPending,
-          "aria-label": "Change status",
-          style: customStyle,
-          className: cn(
-            // Reuse the tag's variant styling, but split into a label section and a
-            // separated chevron section (the common dropdown-button seam).
-            tagVariants({ variant: variant ?? config.variant }),
-            "w-fit shrink-0 items-stretch justify-start gap-0 overflow-hidden p-0",
-            "disabled:cursor-not-allowed disabled:opacity-60",
-            // Custom color: bg/hover/active from the CSS vars set above.
-            customColorClasses,
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[var(--spacing-system-xxs)] px-[var(--spacing-system-xsf)]", children: [
-              showIcon && config.icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: config.icon }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? config.label })
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center self-stretch border-l border-ods-border px-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: "size-4 shrink-0" }) })
-          ]
-        }
+      customTrigger: (
+        // The tag IS the control's look (its status colour), so the button contributes the click, the focus ring and
+        // the menu semantics and no surface of its own (`glyph` + `wrap`).
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "glyph",
+            size: "wrap",
+            type: "button",
+            disabled: isPending,
+            "aria-label": "Change status",
+            className: cn("w-fit shrink-0", className),
+            children: /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: customStyle,
+                className: cn(
+                  // The tag's variant styling, split into a label section and a separated chevron section (the common
+                  // dropdown-button seam). Custom color: bg/hover/active from the CSS vars set above.
+                  tagVariants({ variant: variant ?? config.variant }),
+                  "items-stretch justify-start gap-0 overflow-hidden p-0",
+                  customColorClasses
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[var(--spacing-system-xxs)] px-[var(--spacing-system-xsf)]", children: [
+                    showIcon && config.icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: config.icon }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? config.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center self-stretch border-l border-ods-border px-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: "size-4 shrink-0" }) })
+                ]
+              }
+            )
+          }
+        )
       )
     }
   );

package/dist/components/ui/timezone-select.d.ts

@@ -15,7 +15,8 @@ export interface TimezoneSelectProps {
     clearable?: boolean;
     placeholder?: string;
     className?: string;
-    /** The zone is still being resolved or read: the field draws its skeleton (`Autocomplete`'s `fieldLoading`). */
+    /** The zone is still being resolved or read: the field draws its skeleton (`Autocomplete`'s `fieldLoading`), the
+     *  picker's own box. In a loading scope it does the same. */
     loading?: boolean;
 }
 /**
@@ -23,5 +24,5 @@ export interface TimezoneSelectProps {
  * offset. The meeting scheduler and every form that stores a zone use it, so a
  * zone is always chosen from the list and never typed.
  */
-export declare function TimezoneSelect({ value, onChange, disabled, clearable, placeholder, className, loading, }: TimezoneSelectProps): import("react").JSX.Element;
+export declare function TimezoneSelect({ value, onChange, disabled, clearable, placeholder, className, loading: loadingProp, }: TimezoneSelectProps): import("react").JSX.Element;
 //# sourceMappingURL=timezone-select.d.ts.map

package/dist/components/ui/timezone-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timezone-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/timezone-select.tsx"],"names":[],"mappings":"AAKA,6DAA6D;AAC7D,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAYhD;AAED,qGAAqG;AACrG,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CAW3F;AAED,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,mFAAmF;IACnF,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,WAAgC,EAChC,SAAS,EACT,OAAe,GAChB,EAAE,mBAAmB,+BAiBrB"}
+{"version":3,"file":"timezone-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/timezone-select.tsx"],"names":[],"mappings":"AAMA,6DAA6D;AAC7D,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAYhD;AAED,qGAAqG;AACrG,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CAW3F;AAED,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,mFAAmF;IACnF,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;iEAC6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,WAAgC,EAChC,SAAS,EACT,OAAO,EAAE,WAAmB,GAC7B,EAAE,mBAAmB,+BAmBrB"}

package/dist/components/ui/timezone-select.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Autocomplete } from "./autocomplete.js";
+import { useLoadingScope } from "./loading-scope.js";
 function timezoneLabel(tz) {
   const name = tz.replace(/_/g, " ");
   try {
@@ -33,8 +34,9 @@ function TimezoneSelect({
   clearable = false,
   placeholder = "Search timezone\u2026",
   className,
-  loading = false
+  loading: loadingProp = false
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const options = useMemo(() => timezoneOptions(value), [value]);
   return /* @__PURE__ */ jsx(
     Autocomplete,

package/dist/components/ui/toaster.d.ts.map

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

package/dist/components/ui/toaster.js

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon.js";
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js";
 import { ToolIcon } from "../tool-icon.js";
+import { Button } from "./button/index.js";
 const dotColorByVariant = {
   default: "bg-ods-text-secondary",
   success: "bg-ods-success",
@@ -36,7 +37,7 @@ function ToastHeader({
       title ? /* @__PURE__ */ jsx(
         "p",
         {
-          className: "truncate pr-5 text-ods-text-primary text-h4",
+          className: "truncate pr-6 text-ods-text-primary text-h4",
           title: typeof title === "string" ? title : void 0,
           children: title
         }
@@ -51,12 +52,14 @@ function ToastHeader({
       ) : null
     ] }),
     dismissible ? /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "transparent",
+        size: "icon-sm",
         type: "button",
         "aria-label": "Close",
         onClick: () => sonnerToast.dismiss(id),
-        className: "absolute right-[7px] top-[7px] flex size-4 items-center justify-center text-ods-text-secondary transition-colors hover:text-ods-text-primary",
+        className: "absolute right-[var(--spacing-system-xxs)] top-[var(--spacing-system-xxs)]",
         children: /* @__PURE__ */ jsx(XmarkIcon, { size: 16 })
       }
     ) : null,
@@ -165,22 +168,26 @@ function CommandApprovalToast({
                 approvalDescription ? /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: approvalDescription }) : null,
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
                   /* @__PURE__ */ jsx(
-                    "button",
+                    Button,
                     {
+                      variant: "accent",
+                      size: "small",
                       type: "button",
                       onClick: handleApprove,
                       tabIndex: expanded ? 0 : -1,
-                      className: "flex flex-1 items-center justify-center rounded-md bg-ods-accent px-2 py-2 text-ods-text-on-accent transition-colors text-h5 hover:bg-ods-accent-hover active:bg-ods-accent-active",
+                      className: "flex-1",
                       children: approveLabel
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    "button",
+                    Button,
                     {
+                      variant: "outline",
+                      size: "small",
                       type: "button",
                       onClick: handleReject,
                       tabIndex: expanded ? 0 : -1,
-                      className: "flex flex-1 items-center justify-center rounded-md border border-ods-border bg-ods-card px-2 py-2 text-ods-text-primary transition-colors text-h5 hover:bg-ods-bg-hover",
+                      className: "flex-1",
                       children: rejectLabel
                     }
                   )
@@ -189,19 +196,10 @@ function CommandApprovalToast({
             ] })
           }
         ),
-        expanded ? null : /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setExpanded(true),
-            className: "flex w-full items-center gap-2 bg-ods-card px-3 py-2 text-left text-ods-text-primary transition-colors text-h6 hover:bg-ods-bg-hover",
-            "aria-expanded": false,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Show Command" }),
-              /* @__PURE__ */ jsx(Chevron02DownIcon, { size: 16 })
-            ]
-          }
-        )
+        expanded ? null : /* @__PURE__ */ jsxs(Button, { variant: "row", type: "button", onClick: () => setExpanded(true), "aria-expanded": false, children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Show Command" }),
+          /* @__PURE__ */ jsx(Chevron02DownIcon, { size: 16 })
+        ] })
       ]
     }
   );

package/dist/components/ui/truncate-text.d.ts

@@ -31,6 +31,11 @@ export interface TruncateTextProps {
      * trigger is `inline-block` so the inner truncation still measures.
      */
     as?: 'div' | 'span';
+    /**
+     * The text is read data still being read (a cell whose text is DERIVED from the read, so it is never empty): the
+     * text is its own bar. An empty text in a loading scope is one without it.
+     */
+    loading?: boolean;
 }
 /**
  * Truncated text bound to the ODS typography system. Shows a `FloatingTooltip`
@@ -42,5 +47,5 @@ export interface TruncateTextProps {
  * <TruncateText lines={3}>{description}</TruncateText>               // 3-line clamp
  * ```
  */
-export declare function TruncateText({ children, tooltip, className, side, lines, variant, tone, mono, triggerClassName, as, }: TruncateTextProps): import("react").JSX.Element;
+export declare function TruncateText({ children, tooltip, className, side, lines, variant, tone, mono, triggerClassName, as, loading: loadingProp, }: TruncateTextProps): import("react").JSX.Element;
 //# sourceMappingURL=truncate-text.d.ts.map

package/dist/components/ui/truncate-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"truncate-text.d.ts","sourceRoot":"","sources":["../../../src/components/ui/truncate-text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,4EAA4E;AAC5E,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1E,qEAAqE;AACrE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,CAAC;AAEvD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,uGAAuG;IACvG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oDAAoD;IACpD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sGAAsG;IACtG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAwBD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,IAAY,EACZ,KAAS,EACT,OAAc,EACd,IAAgB,EAChB,IAAY,EACZ,gBAAgB,EAChB,EAAU,GACX,EAAE,iBAAiB,+BAgCnB"}
+{"version":3,"file":"truncate-text.d.ts","sourceRoot":"","sources":["../../../src/components/ui/truncate-text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,4EAA4E;AAC5E,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1E,qEAAqE;AACrE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,CAAC;AAEvD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,uGAAuG;IACvG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oDAAoD;IACpD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sGAAsG;IACtG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwBD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,IAAY,EACZ,KAAS,EACT,OAAc,EACd,IAAgB,EAChB,IAAY,EACZ,gBAAgB,EAChB,EAAU,EACV,OAAO,EAAE,WAAmB,GAC7B,EAAE,iBAAiB,+BAoCnB"}

package/dist/components/ui/truncate-text.js

@@ -2,7 +2,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useIsTruncated } from "../../hooks/ui/use-is-truncated.js";
 import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
+import { useLoadingScope } from "./loading-scope.js";
 const VARIANT_CLASS = {
   h1: "text-h1",
   h2: "text-h2",
@@ -32,10 +34,14 @@ function TruncateText({
   tone = "primary",
   mono = false,
   triggerClassName,
-  as = "div"
+  as = "div",
+  loading: loadingProp = false
 }) {
   const isMultiLine = lines > 1;
   const { ref, isTruncated } = useIsTruncated(children, { multiline: isMultiLine });
+  const loading = useLoadingScope() && !children || loadingProp;
+  if (loading)
+    return /* @__PURE__ */ jsx(TextLineSkeleton, { type: variant, lines, as, className: cn("w-3/4", triggerClassName) });
   const clampClass = isMultiLine ? LINE_CLAMP_CLASS[lines] : "truncate block";
   return /* @__PURE__ */ jsx(
     FloatingTooltip,

package/dist/components/user-display.d.ts

@@ -16,16 +16,5 @@ interface UserDisplayProps {
  * the visual pattern used in CommentCard headers.
  */
 export declare function UserDisplay({ name, avatarUrl, subtitle, size, shape, compact, className, }: UserDisplayProps): import("react").JSX.Element;
-export interface UserDisplaySkeletonProps {
-    /** Avatar size in px (defaults 32). */
-    size?: number;
-    shape?: 'square' | 'round';
-    compact?: boolean;
-    /** Whether the row has a second line. */
-    subtitle?: boolean;
-    className?: string;
-}
-/** The row while it is read: the avatar's box, a bar for the name and, with `subtitle`, one for the second line. */
-export declare function UserDisplaySkeleton({ size, shape, compact, subtitle, className, }: UserDisplaySkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=user-display.d.ts.map

package/dist/components/user-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-display.d.ts","sourceRoot":"","sources":["../../src/components/user-display.tsx"],"names":[],"mappings":"AAQA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,IAAS,EACT,KAAgB,EAChB,OAAe,EACf,SAAS,GACV,EAAE,gBAAgB,+BAsBlB;AAED,MAAM,WAAW,wBAAwB;IACvC,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oHAAoH;AACpH,wBAAgB,mBAAmB,CAAC,EAClC,IAAS,EACT,KAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,+BAU1B"}
+{"version":3,"file":"user-display.d.ts","sourceRoot":"","sources":["../../src/components/user-display.tsx"],"names":[],"mappings":"AAQA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,IAAS,EACT,KAAgB,EAChB,OAAe,EACf,SAAS,GACV,EAAE,gBAAgB,+BAsBlB"}

package/dist/components/user-display.js

@@ -4,7 +4,7 @@ import { cn } from "../utils/cn.js";
 import { useProxiedImageUrl } from "./chat/hooks/use-proxied-image-url.js";
 import { TextLineSkeleton } from "./loading/unified-skeleton.js";
 import { useLoadingScope } from "./ui/loading-scope.js";
-import { SquareAvatar, SquareAvatarSkeleton } from "./ui/square-avatar.js";
+import { SquareAvatar } from "./ui/square-avatar.js";
 const USER_ROW_CLASS = "flex min-w-0 items-center gap-2";
 const USER_TEXT_CLASS = "min-w-0 flex-1";
 function UserDisplay({
@@ -45,7 +45,7 @@ function UserDisplaySkeleton({
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn(USER_ROW_CLASS, className), "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx(SquareAvatarSkeleton, { sizePx: size, variant: shape }),
+    /* @__PURE__ */ jsx(SquareAvatar, { loading: true, sizePx: size, variant: shape }),
     /* @__PURE__ */ jsxs("div", { className: USER_TEXT_CLASS, children: [
       /* @__PURE__ */ jsx(TextLineSkeleton, { type: compact ? "h6" : "h4", className: "w-28" }),
       subtitle && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-16" })
@@ -53,6 +53,5 @@ function UserDisplaySkeleton({
   ] });
 }
 export {
-  UserDisplay,
-  UserDisplaySkeleton
+  UserDisplay
 };

package/dist/components/vendor-display-button.d.ts

@@ -1,8 +1,8 @@
 import { type VendorWithMedia } from '../utils/vendor-media-stub';
-/** The default button's frame, without its surface and hover (a skeleton draws the same box). */
-export declare const VENDOR_DISPLAY_BUTTON_FRAME_CLASS = "flex max-w-full items-center gap-2 overflow-hidden rounded-lg border border-ods-border px-3 py-2";
-/** The default button's logo box. */
-export declare const VENDOR_DISPLAY_BUTTON_LOGO_CLASS: string;
+/** The default button's box: the `chip` kind's, which a skeleton draws too. */
+export declare const VENDOR_DISPLAY_BUTTON_FRAME_CLASS: string;
+/** The default button's logo box (it fits the chip's 32px height). */
+export declare const VENDOR_DISPLAY_BUTTON_LOGO_CLASS = "flex size-5 flex-shrink-0 items-center justify-center rounded";
 interface VendorDisplayButtonProps {
     vendor: VendorWithMedia;
     onClick?: (vendorSlug: string) => void;

package/dist/components/vendor-display-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vendor-display-button.d.ts","sourceRoot":"","sources":["../../src/components/vendor-display-button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGjF,iGAAiG;AACjG,eAAO,MAAM,iCAAiC,qGACsD,CAAC;AACrG,qCAAqC;AACrC,eAAO,MAAM,gCAAgC,QAA8E,CAAC;AAE5H,UAAU,wBAAwB;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAmB,EAAE,WAAW,EAAE,EAAE,wBAAwB,+BAmElH"}
+{"version":3,"file":"vendor-display-button.d.ts","sourceRoot":"","sources":["../../src/components/vendor-display-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAMjF,+EAA+E;AAC/E,eAAO,MAAM,iCAAiC,QAAiE,CAAC;AAChH,sEAAsE;AACtE,eAAO,MAAM,gCAAgC,kEAAkE,CAAC;AAEhH,UAAU,wBAAwB;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAmB,EAAE,WAAW,EAAE,EAAE,wBAAwB,+BA6DlH"}

package/dist/components/vendor-display-button.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "../embed-shims/next-image.js";
-import { TILE_SIZE } from "../styles/component-sizes.js";
 import { cn } from "../utils/cn.js";
 import { getVendorLogo } from "../utils/vendor-media-stub.js";
 import { useProxiedImageUrl } from "./chat/hooks/use-proxied-image-url.js";
-const VENDOR_DISPLAY_BUTTON_FRAME_CLASS = "flex max-w-full items-center gap-2 overflow-hidden rounded-lg border border-ods-border px-3 py-2";
-const VENDOR_DISPLAY_BUTTON_LOGO_CLASS = `flex ${TILE_SIZE.sm} flex-shrink-0 items-center justify-center rounded-lg`;
+import { BUTTON_KIND_CLASS, Button } from "./ui/button/index.js";
+const VENDOR_DISPLAY_BUTTON_LAYOUT_CLASS = "max-w-full overflow-hidden";
+const VENDOR_DISPLAY_BUTTON_FRAME_CLASS = cn(BUTTON_KIND_CLASS.chip, VENDOR_DISPLAY_BUTTON_LAYOUT_CLASS);
+const VENDOR_DISPLAY_BUTTON_LOGO_CLASS = "flex size-5 flex-shrink-0 items-center justify-center rounded";
 function VendorDisplayButton({ vendor, onClick, variant = "default", externalUrl }) {
   const handleClick = () => {
     if (externalUrl && vendor.slug) {
@@ -18,38 +19,24 @@ function VendorDisplayButton({ vendor, onClick, variant = "default", externalUrl
   const logoUrl = getVendorLogo(vendor);
   const logoSrc = useProxiedImageUrl(logoUrl, { directHttps: false });
   if (variant === "compact") {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: handleClick,
-        className: "inline-flex items-center gap-2 rounded-full border border-ods-border bg-ods-card px-3 py-1.5 transition-colors hover:border-ods-accent/50",
-        children: [
-          logoUrl ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 flex-shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ jsx(
-            Image,
-            {
-              src: logoSrc,
-              alt: `${vendor.title} logo`,
-              width: 20,
-              height: 20,
-              className: "h-full w-full object-cover"
-            }
-          ) }) : /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-ods-border", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-ods-text-secondary", children: vendor.title.charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: vendor.title })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs(Button, { variant: "chip", onClick: handleClick, children: [
+      logoUrl ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 flex-shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: logoSrc,
+          alt: `${vendor.title} logo`,
+          width: 20,
+          height: 20,
+          className: "h-full w-full object-cover"
+        }
+      ) }) : /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-ods-border", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-ods-text-secondary", children: vendor.title.charAt(0).toUpperCase() }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: vendor.title })
+    ] });
   }
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: handleClick,
-      className: cn(VENDOR_DISPLAY_BUTTON_FRAME_CLASS, "bg-ods-card transition-colors hover:border-ods-accent"),
-      children: [
-        logoUrl ? /* @__PURE__ */ jsx("div", { className: cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, "border border-ods-border bg-ods-card"), children: /* @__PURE__ */ jsx(Image, { src: logoSrc, alt: `${vendor.title} logo`, width: 24, height: 24, className: "rounded object-cover" }) }) : /* @__PURE__ */ jsx("div", { className: cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, "border border-ods-border bg-ods-border"), children: /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: vendor.title.charAt(0) }) }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-ods-text-primary text-h4", title: vendor.title, children: vendor.title })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Button, { variant: "chip", onClick: handleClick, className: VENDOR_DISPLAY_BUTTON_LAYOUT_CLASS, children: [
+    logoUrl ? /* @__PURE__ */ jsx("div", { className: cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, "border border-ods-border bg-ods-card"), children: /* @__PURE__ */ jsx(Image, { src: logoSrc, alt: `${vendor.title} logo`, width: 20, height: 20, className: "rounded object-cover" }) }) : /* @__PURE__ */ jsx("div", { className: cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, "border border-ods-border bg-ods-border"), children: /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: vendor.title.charAt(0) }) }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-ods-text-primary text-h4", title: vendor.title, children: vendor.title })
+  ] });
 }
 export {
   VENDOR_DISPLAY_BUTTON_FRAME_CLASS,

package/dist/components/vendor-icon.d.ts

@@ -10,16 +10,13 @@ interface VendorIconProps {
     className?: string;
     showBackground?: boolean;
     backgroundStyle?: 'dark' | 'light' | 'white';
+    /** The vendor is still being read: the icon draws its skeleton, the tile's own box. A loading scope does the same. */
+    loading?: boolean;
 }
-/** A vendor's logo while it is read: the tile's own box. */
-export declare function VendorIconSkeleton({ size, className }: {
-    size?: VendorIconProps['size'];
-    className?: string;
-}): import("react").JSX.Element;
 /**
  * Common VendorIcon component for displaying vendor logos consistently across the platform
  * Extracted from vendor-card.tsx for reuse in comparison tables, dropdowns, etc.
  */
-export declare function VendorIcon({ vendor, size, className, showBackground, backgroundStyle, }: VendorIconProps): import("react").JSX.Element;
+export declare function VendorIcon({ vendor, size, className, showBackground, backgroundStyle, loading: loadingProp, ...props }: VendorIconProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=vendor-icon.d.ts.map

package/dist/components/vendor-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vendor-icon.d.ts","sourceRoot":"","sources":["../../src/components/vendor-icon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAKjF,UAAU,eAAe;IACvB,MAAM,EAAE,eAAe,GAAG;QACxB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;CAC9C;AAyCD,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEpH;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAW,EACX,SAAc,EACd,cAAqB,EACrB,eAAwB,GACzB,EAAE,eAAe,+BAsCjB"}
+{"version":3,"file":"vendor-icon.d.ts","sourceRoot":"","sources":["../../src/components/vendor-icon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAKjF,UAAU,eAAe;IACvB,MAAM,EAAE,eAAe,GAAG;QACxB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,sHAAsH;IACtH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAW,EACX,SAAc,EACd,cAAqB,EACrB,eAAwB,EACxB,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,eAAe,+BAwCjB"}

package/dist/components/vendor-icon.js

@@ -5,7 +5,7 @@ import { cn } from "../utils/cn.js";
 import { getVendorLogo } from "../utils/vendor-media-stub.js";
 import { useProxiedImageUrl } from "./chat/hooks/use-proxied-image-url.js";
 import { UnifiedSkeleton } from "./loading/unified-skeleton.js";
-import { useLoadingScope } from "./ui/loading-scope.js";
+import { loadingItemProps, useLoadingScope } from "./ui/loading-scope.js";
 const sizeClasses = {
   xs: "w-6 h-6",
   sm: "w-8 h-8",
@@ -35,17 +35,29 @@ const backgroundClasses = {
   light: "bg-ods-card border border-ods-border",
   white: "bg-white border border-[#E5E5E5]"
 };
-function VendorIconSkeleton({ size = "md", className }) {
-  return /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(sizeClasses[size], "flex-shrink-0 rounded-lg", className) });
+function VendorIconSkeleton({
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    UnifiedSkeleton,
+    {
+      className: cn(sizeClasses[size], "flex-shrink-0 rounded-lg", className),
+      ...loadingItemProps(props)
+    }
+  );
 }
 function VendorIcon({
   vendor,
   size = "md",
   className = "",
   showBackground = true,
-  backgroundStyle = "dark"
+  backgroundStyle = "dark",
+  loading: loadingProp,
+  ...props
 }) {
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
   const logoUrl = getVendorLogo(vendor);
   const logoSrc = useProxiedImageUrl(logoUrl, { directHttps: false });
   const { width, height } = showBackground ? imageSizeMap[size] : { width: tilePxMap[size], height: tilePxMap[size] };
@@ -56,8 +68,9 @@ function VendorIcon({
     !showBackground && "overflow-hidden",
     className
   );
-  if (loading) return /* @__PURE__ */ jsx(VendorIconSkeleton, { size, className });
-  return /* @__PURE__ */ jsx("div", { className: containerClasses, children: logoUrl ? /* @__PURE__ */ jsx(
+  const markers = loadingItemProps(props);
+  if (loading) return /* @__PURE__ */ jsx(VendorIconSkeleton, { size, className, ...markers });
+  return /* @__PURE__ */ jsx("div", { className: containerClasses, ...markers, children: logoUrl ? /* @__PURE__ */ jsx(
     Image,
     {
       src: logoSrc,
@@ -78,6 +91,5 @@ function VendorIcon({
   ) });
 }
 export {
-  VendorIcon,
-  VendorIconSkeleton
+  VendorIcon
 };

package/dist/components/vendor-tag.d.ts

@@ -18,10 +18,5 @@ export declare function VendorClassificationIcon({ classification, accentColor,
     accentColor?: string;
     className?: string;
 }): import("react").JSX.Element | null;
-/** A vendor's tag while it is read: the tag's own frame, an icon box and a bar at the label's type step. */
-export declare function VendorTagSkeleton({ size, className }: {
-    size?: 'sm' | 'md';
-    className?: string;
-}): import("react").JSX.Element;
 export declare function VendorTag({ type, text, className, hidden, size, accentColor }: VendorTagProps): import("react").JSX.Element;
 //# sourceMappingURL=vendor-tag.d.ts.map

package/dist/components/vendor-tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vendor-tag.d.ts","sourceRoot":"","sources":["../../src/components/vendor-tag.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,cAAc;IAC7B,IAAI,EACA,aAAa,GACb,YAAY,GACZ,MAAM,GACN,UAAU,GACV,MAAM,GACN,YAAY,GACZ,aAAa,GACb,gBAAgB,GAChB,IAAI,GACJ,QAAQ,GACR,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,GACnB,aAAa,GACb,KAAK,GACL,MAAM,GACN,KAAK,GACL,SAAS,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAQD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,cAAc,EACd,WAAW,EACX,SAAS,GACV,EAAE;IACD,cAAc,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sCAyBA;AA0BD,4GAA4G;AAC5G,wBAAgB,iBAAiB,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOvG;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAc,EAAE,MAAc,EAAE,IAAW,EAAE,WAAW,EAAE,EAAE,cAAc,+BAmJjH"}
+{"version":3,"file":"vendor-tag.d.ts","sourceRoot":"","sources":["../../src/components/vendor-tag.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,cAAc;IAC7B,IAAI,EACA,aAAa,GACb,YAAY,GACZ,MAAM,GACN,UAAU,GACV,MAAM,GACN,YAAY,GACZ,aAAa,GACb,gBAAgB,GAChB,IAAI,GACJ,QAAQ,GACR,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,GACnB,aAAa,GACb,KAAK,GACL,MAAM,GACN,KAAK,GACL,SAAS,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAQD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,cAAc,EACd,WAAW,EACX,SAAS,GACV,EAAE;IACD,cAAc,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sCAyBA;AAoCD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAc,EAAE,MAAc,EAAE,IAAW,EAAE,WAAW,EAAE,EAAE,cAAc,+BAsJjH"}

package/dist/components/vendor-tag.js

@@ -7,6 +7,7 @@ import { formatClassification } from "../utils/format.js";
 import { vendorClassificationCopy } from "../utils/vendor-classification.js";
 import { resolveIcon } from "./chat/utils/icon-library.js";
 import { MediaSkeleton, TextLineSkeleton } from "./loading/unified-skeleton.js";
+import { useLoadingScope } from "./ui/loading-scope.js";
 const TONE_CLASS = {
   accent: "text-ods-text-on-accent",
   neutral: "text-ods-text-secondary",
@@ -59,6 +60,7 @@ function VendorTagSkeleton({ size = "md", className }) {
   ] });
 }
 function VendorTag({ type, text, className = "", hidden = false, size = "md", accentColor }) {
+  const loading = useLoadingScope();
   const baseClasses = cn(VENDOR_TAG_FRAME_CLASS, VENDOR_TAG_SIZE_CLASS[size]);
   const getTagContent = () => {
     switch (type) {
@@ -143,6 +145,7 @@ function VendorTag({ type, text, className = "", hidden = false, size = "md", ac
         };
     }
   };
+  if (loading) return /* @__PURE__ */ jsx(VendorTagSkeleton, { size, className: cn(className, hidden && "invisible") });
   const { text: displayText, icon, textColor } = getTagContent();
   return /* @__PURE__ */ jsxs("div", { className: cn(baseClasses, className, hidden && "invisible"), children: [
     icon,
@@ -151,6 +154,5 @@ function VendorTag({ type, text, className = "", hidden = false, size = "md", ac
 }
 export {
   VendorClassificationIcon,
-  VendorTag,
-  VendorTagSkeleton
+  VendorTag
 };