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

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;CACpB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,WAAgC,EAChC,SAAS,GACV,EAAE,mBAAmB,+BAgBrB"}
+{"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"}

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

@@ -32,13 +32,15 @@ function TimezoneSelect({
   disabled,
   clearable = false,
   placeholder = "Search timezone\u2026",
-  className
+  className,
+  loading = false
 }) {
   const options = useMemo(() => timezoneOptions(value), [value]);
   return /* @__PURE__ */ jsx(
     Autocomplete,
     {
       className,
+      fieldLoading: loading,
       value: value || null,
       disabled,
       onChange: (tz) => {

package/dist/components/ui/toggle.d.ts

@@ -1,11 +1,17 @@
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { type VariantProps } from 'class-variance-authority';
+/** A toggle's height and side padding per size: read by `toggleVariants` and by every skeleton of a toggle. */
+export declare const TOGGLE_SIZE_CLASS: {
+    readonly default: "h-10 px-3";
+    readonly sm: "h-9 px-2.5";
+    readonly lg: "h-11 px-5";
+};
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "choice" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const Toggle: import("react").ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "choice" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLButtonElement>>;
 export { Toggle, toggleVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAmBnB,CAAC;AAEF,QAAA,MAAM,MAAM;;;mIAKV,CAAC;AAIH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,+GAA+G;AAC/G,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,QAAA,MAAM,cAAc;;;8EAkBnB,CAAC;AAEF,QAAA,MAAM,MAAM;;;mIAKV,CAAC;AAIH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/toggle.js

@@ -4,19 +4,22 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
+const TOGGLE_SIZE_CLASS = {
+  default: "h-10 px-3",
+  sm: "h-9 px-2.5",
+  lg: "h-11 px-5"
+};
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-ods-accent data-[state=on]:text-ods-text-on-accent",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-ods-border bg-transparent hover:bg-ods-accent hover:text-ods-text-on-accent"
+        outline: "border border-ods-border bg-transparent hover:bg-ods-accent hover:text-ods-text-on-accent",
+        // One answer of several (a form's choice chips): a quiet hover, and the picked one keeps its accent under the pointer.
+        choice: "border border-ods-border bg-transparent data-[state=on]:hover:bg-ods-accent-hover data-[state=on]:hover:text-ods-text-on-accent"
       },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5"
-      }
+      size: TOGGLE_SIZE_CLASS
     },
     defaultVariants: {
       variant: "default",
@@ -27,6 +30,7 @@ const toggleVariants = cva(
 const Toggle = forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 export {
+  TOGGLE_SIZE_CLASS,
   Toggle,
   toggleVariants
 };

package/dist/components/unified-pagination.d.ts

@@ -14,7 +14,9 @@ interface UnifiedPaginationProps {
      * nothing. Stops a one-page result from shifting the content above it.
      */
     reserveSpace?: boolean;
+    /** The list is still being read: the pager draws its own skeleton (also in a page's loading scope). */
+    loading?: boolean;
 }
-export declare function UnifiedPagination({ currentPage, totalPages, onPageChange, className, syncUrl, reserveSpace, }: UnifiedPaginationProps): import("react").JSX.Element | null;
+export declare function UnifiedPagination({ currentPage, totalPages, onPageChange, className, syncUrl, reserveSpace, loading: loadingProp, }: UnifiedPaginationProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=unified-pagination.d.ts.map

package/dist/components/unified-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unified-pagination.d.ts","sourceRoot":"","sources":["../../src/components/unified-pagination.tsx"],"names":[],"mappings":"AAMA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAA6C,EAC7C,OAAc,EACd,YAAoB,GACrB,EAAE,sBAAsB,sCAqExB"}
+{"version":3,"file":"unified-pagination.d.ts","sourceRoot":"","sources":["../../src/components/unified-pagination.tsx"],"names":[],"mappings":"AAOA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAA6C,EAC7C,OAAc,EACd,YAAoB,EACpB,OAAO,EAAE,WAAmB,GAC7B,EAAE,sBAAsB,sCAgFxB"}

package/dist/components/unified-pagination.js

@@ -3,16 +3,19 @@ import { jsx } from "react/jsx-runtime";
 import { useSearchParams, usePathname } from "../embed-shims/next-navigation.js";
 import { withQuery } from "../utils/search-params.js";
 import { Pagination } from "./pagination.js";
+import { useLoadingScope } from "./ui/loading-scope.js";
 function UnifiedPagination({
   currentPage,
   totalPages,
   onPageChange,
   className = "mt-8 flex justify-center w-full",
   syncUrl = true,
-  reserveSpace = false
+  reserveSpace = false,
+  loading: loadingProp = false
 }) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
+  const loading = useLoadingScope() || loadingProp;
   const pageHref = (page) => {
     const params = new URLSearchParams(searchParams.toString());
     if (page <= 1) params.delete("page");
@@ -35,6 +38,9 @@ function UnifiedPagination({
       });
     }, 0);
   };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Pagination, { loading: true, currentPage, totalPages, onPageChange: handlePageChange }) });
+  }
   if (totalPages <= 1) {
     return reserveSpace ? /* @__PURE__ */ jsx("div", { className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-none invisible", children: /* @__PURE__ */ jsx(Pagination, { currentPage: 1, totalPages: 1, onPageChange: () => {
     } }) }) }) : null;

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

@@ -16,5 +16,16 @@ 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":"AAMA,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;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,IAAS,EACT,KAAgB,EAChB,OAAe,EACf,SAAS,GACV,EAAE,gBAAgB,+BAgBlB"}
+{"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"}

package/dist/components/user-display.js

@@ -1,8 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../utils/cn.js";
-import { getProxiedImageUrl } from "../utils/image-proxy.js";
-import { SquareAvatar } from "./ui/square-avatar.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";
+const USER_ROW_CLASS = "flex min-w-0 items-center gap-2";
+const USER_TEXT_CLASS = "min-w-0 flex-1";
 function UserDisplay({
   name,
   avatarUrl,
@@ -12,23 +16,43 @@ function UserDisplay({
   compact = false,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(
-      SquareAvatar,
+  const avatarSrc = useProxiedImageUrl(avatarUrl);
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(
+      UserDisplaySkeleton,
       {
-        src: avatarUrl ? getProxiedImageUrl(avatarUrl) || avatarUrl : void 0,
-        fallback: name,
-        alt: name,
-        sizePx: size,
-        variant: shape
+        size,
+        shape,
+        compact,
+        subtitle: subtitle !== void 0,
+        className
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(USER_ROW_CLASS, className), children: [
+    /* @__PURE__ */ jsx(SquareAvatar, { src: avatarSrc || void 0, fallback: name, alt: name, sizePx: size, variant: shape }),
+    /* @__PURE__ */ jsxs("div", { className: USER_TEXT_CLASS, children: [
       /* @__PURE__ */ jsx("p", { className: cn("truncate text-ods-text-primary", compact ? "text-h6" : "text-h4"), children: name }),
-      subtitle && /* @__PURE__ */ jsx("span", { className: cn("block truncate text-ods-text-secondary text-h6"), children: subtitle })
+      subtitle && /* @__PURE__ */ jsx("span", { className: "block truncate text-ods-text-secondary text-h6", children: subtitle })
+    ] })
+  ] });
+}
+function UserDisplaySkeleton({
+  size = 32,
+  shape = "square",
+  compact = false,
+  subtitle = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(USER_ROW_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(SquareAvatarSkeleton, { 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" })
     ] })
   ] });
 }
 export {
-  UserDisplay
+  UserDisplay,
+  UserDisplaySkeleton
 };

package/dist/components/user-summary-stub.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-summary-stub.d.ts","sourceRoot":"","sources":["../../src/components/user-summary-stub.tsx"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,kEAAkE;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;2BACuB;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAChC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACzB,GAAG,IAAI,CAAC;IACT,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iFAAiF;IACjF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAkCD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAe,EACf,SAAS,EACT,aAAa,EACb,cAAsB,EACtB,UAAU,EACV,OAAe,EACf,UAAe,GAChB,EAAE,KAAK,+BAuLP"}
+{"version":3,"file":"user-summary-stub.d.ts","sourceRoot":"","sources":["../../src/components/user-summary-stub.tsx"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,kEAAkE;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;2BACuB;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAChC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACzB,GAAG,IAAI,CAAC;IACT,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iFAAiF;IACjF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAkCD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAe,EACf,SAAS,EACT,aAAa,EACb,cAAsB,EACtB,UAAU,EACV,OAAe,EACf,UAAe,GAChB,EAAE,KAAK,+BAmLP"}

package/dist/components/user-summary-stub.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "../embed-shims/next-image.js";
-import { getProxiedImageUrl } from "../utils/image-proxy-stub.js";
+import { useProxiedImageUrl } from "./chat/hooks/use-proxied-image-url.js";
 const getAuthProviderIcon = (provider) => {
   const p = provider.toLowerCase();
   switch (p) {
@@ -42,13 +42,15 @@ function UserSummary({
   compact = false,
   avatarSize = 40
 }) {
+  const avatarSrc = useProxiedImageUrl(avatarUrl, { directHttps: false });
+  const mspLogoSrc = useProxiedImageUrl(mspPreview?.logoUrl, { directHttps: false });
   if (compact) {
     return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
         avatarUrl ? /* @__PURE__ */ jsx(
           Image,
           {
-            src: getProxiedImageUrl(avatarUrl) ?? avatarUrl,
+            src: avatarSrc,
             alt: name,
             width: avatarSize,
             height: avatarSize,
@@ -65,7 +67,7 @@ function UserSummary({
         mspPreview && mspPreview.logoUrl && /* @__PURE__ */ jsx(
           Image,
           {
-            src: getProxiedImageUrl(mspPreview.logoUrl) ?? mspPreview.logoUrl,
+            src: mspLogoSrc,
             alt: mspPreview.name || "MSP",
             width: 24,
             height: 24,
@@ -102,20 +104,11 @@ function UserSummary({
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative h-24 w-24 shrink-0 overflow-visible", children: [
-        avatarUrl ? /* @__PURE__ */ jsx(
-          Image,
-          {
-            src: getProxiedImageUrl(avatarUrl) ?? avatarUrl,
-            alt: name,
-            width: 96,
-            height: 96,
-            className: "rounded-full object-cover"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full border border-ods-border bg-ods-card font-heading text-3xl text-ods-text-secondary", children: name.charAt(0).toUpperCase() }),
+        avatarUrl ? /* @__PURE__ */ jsx(Image, { src: avatarSrc, alt: name, width: 96, height: 96, className: "rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full border border-ods-border bg-ods-card font-heading text-3xl text-ods-text-secondary", children: name.charAt(0).toUpperCase() }),
         mspPreview && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1 flex size-10 select-none items-center justify-center overflow-hidden rounded-full bg-ods-bg ring-2 ring-ods-border", children: mspPreview.logoUrl ? /* @__PURE__ */ jsx(
           Image,
           {
-            src: getProxiedImageUrl(mspPreview.logoUrl) ?? mspPreview.logoUrl,
+            src: mspLogoSrc,
             alt: mspPreview.name || "MSP Logo",
             width: 40,
             height: 40,

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

@@ -1,4 +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;
 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":"AAIA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEjF,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,+BAwElH"}
+{"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"}

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

@@ -1,8 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "../embed-shims/next-image.js";
-import { getProxiedImageUrl } from "../utils/image-proxy-stub.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`;
 function VendorDisplayButton({ vendor, onClick, variant = "default", externalUrl }) {
   const handleClick = () => {
     if (externalUrl && vendor.slug) {
@@ -12,6 +16,7 @@ function VendorDisplayButton({ vendor, onClick, variant = "default", externalUrl
     }
   };
   const logoUrl = getVendorLogo(vendor);
+  const logoSrc = useProxiedImageUrl(logoUrl, { directHttps: false });
   if (variant === "compact") {
     return /* @__PURE__ */ jsxs(
       "button",
@@ -22,7 +27,7 @@ function VendorDisplayButton({ vendor, onClick, variant = "default", externalUrl
           logoUrl ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 flex-shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ jsx(
             Image,
             {
-              src: getProxiedImageUrl(logoUrl) || logoUrl,
+              src: logoSrc,
               alt: `${vendor.title} logo`,
               width: 20,
               height: 20,
@@ -38,23 +43,16 @@ function VendorDisplayButton({ vendor, onClick, variant = "default", externalUrl
     "button",
     {
       onClick: handleClick,
-      className: "flex max-w-full items-center gap-2 overflow-hidden rounded-lg border border-ods-border bg-ods-card px-3 py-2 transition-colors hover:border-ods-accent",
+      className: cn(VENDOR_DISPLAY_BUTTON_FRAME_CLASS, "bg-ods-card transition-colors hover:border-ods-accent"),
       children: [
-        logoUrl ? /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx(
-          Image,
-          {
-            src: getProxiedImageUrl(logoUrl) || logoUrl,
-            alt: `${vendor.title} logo`,
-            width: 24,
-            height: 24,
-            className: "rounded object-cover"
-          }
-        ) }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-border", children: /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: vendor.title.charAt(0) }) }),
+        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 })
       ]
     }
   );
 }
 export {
+  VENDOR_DISPLAY_BUTTON_FRAME_CLASS,
+  VENDOR_DISPLAY_BUTTON_LOGO_CLASS,
   VendorDisplayButton
 };

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

@@ -11,6 +11,11 @@ interface VendorIconProps {
     showBackground?: boolean;
     backgroundStyle?: 'dark' | 'light' | 'white';
 }
+/** 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.

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":"AAKA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEjF,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;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAW,EACX,SAAc,EACd,cAAqB,EACrB,eAAwB,GACzB,EAAE,eAAe,+BAkCjB"}
+{"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"}

package/dist/components/vendor-icon.js

@@ -2,8 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import Image from "../embed-shims/next-image.js";
 import { cn } from "../utils/cn.js";
-import { getProxiedImageUrl } from "../utils/image-proxy-stub.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";
 const sizeClasses = {
   xs: "w-6 h-6",
   sm: "w-8 h-8",
@@ -33,6 +35,9 @@ 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 VendorIcon({
   vendor,
   size = "md",
@@ -40,7 +45,9 @@ function VendorIcon({
   showBackground = true,
   backgroundStyle = "dark"
 }) {
+  const loading = useLoadingScope();
   const logoUrl = getVendorLogo(vendor);
+  const logoSrc = useProxiedImageUrl(logoUrl, { directHttps: false });
   const { width, height } = showBackground ? imageSizeMap[size] : { width: tilePxMap[size], height: tilePxMap[size] };
   const containerClasses = cn(
     sizeClasses[size],
@@ -49,10 +56,11 @@ function VendorIcon({
     !showBackground && "overflow-hidden",
     className
   );
+  if (loading) return /* @__PURE__ */ jsx(VendorIconSkeleton, { size, className });
   return /* @__PURE__ */ jsx("div", { className: containerClasses, children: logoUrl ? /* @__PURE__ */ jsx(
     Image,
     {
-      src: getProxiedImageUrl(logoUrl) || logoUrl,
+      src: logoSrc,
       alt: `${vendor.title} logo`,
       width,
       height,
@@ -70,5 +78,6 @@ function VendorIcon({
   ) });
 }
 export {
-  VendorIcon
+  VendorIcon,
+  VendorIconSkeleton
 };

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

@@ -18,5 +18,10 @@ 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":"AASA,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;AAoBD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAc,EAAE,MAAc,EAAE,IAAW,EAAE,WAAW,EAAE,EAAE,cAAc,+BAsJjH"}
+{"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"}

package/dist/components/vendor-tag.js

@@ -6,6 +6,7 @@ import { cn } from "../utils/cn.js";
 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";
 const TONE_CLASS = {
   accent: "text-ods-text-on-accent",
   neutral: "text-ods-text-secondary",
@@ -48,11 +49,17 @@ function classificationTag(value, text, accentColor) {
     icon: /* @__PURE__ */ jsx(VendorClassificationIcon, { classification: value, accentColor })
   };
 }
+const VENDOR_TAG_FRAME_CLASS = "flex items-center gap-1.5 whitespace-nowrap rounded border border-ods-border bg-ods-bg";
+const VENDOR_TAG_SIZE_CLASS = { sm: "px-2 py-1", md: "px-2.5 py-1.5" };
+const VENDOR_TAG_LABEL_TYPE = "h5";
+function VendorTagSkeleton({ size = "md", className }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: cn(VENDOR_TAG_FRAME_CLASS, VENDOR_TAG_SIZE_CLASS[size], className), children: [
+    /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "shrink-0 rounded-sm" }),
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: VENDOR_TAG_LABEL_TYPE, className: "w-16" })
+  ] });
+}
 function VendorTag({ type, text, className = "", hidden = false, size = "md", accentColor }) {
-  const baseClasses = cn(
-    "flex items-center gap-1.5 whitespace-nowrap rounded border border-ods-border bg-ods-bg",
-    size === "sm" ? "px-2 py-1" : "px-2.5 py-1.5"
-  );
+  const baseClasses = cn(VENDOR_TAG_FRAME_CLASS, VENDOR_TAG_SIZE_CLASS[size]);
   const getTagContent = () => {
     switch (type) {
       case "placeholder":
@@ -144,5 +151,6 @@ function VendorTag({ type, text, className = "", hidden = false, size = "md", ac
 }
 export {
   VendorClassificationIcon,
-  VendorTag
+  VendorTag,
+  VendorTagSkeleton
 };