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

package/dist/components/ui/progress.js

@@ -3,16 +3,21 @@ import { jsx } from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
-const Progress = forwardRef(({ className, value, indicatorClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+const PROGRESS_VARIANT = {
+  default: { root: "h-2 bg-secondary", indicator: "bg-primary" },
+  step: { root: "h-1 bg-ods-border", indicator: "bg-ods-accent" }
+};
+const Progress = forwardRef(({ className, value, indicatorClassName, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
   ProgressPrimitive.Root,
   {
     ref,
-    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className),
+    className: cn("relative w-full overflow-hidden rounded-full", PROGRESS_VARIANT[variant].root, className),
+    value,
     ...props,
     children: /* @__PURE__ */ jsx(
       ProgressPrimitive.Indicator,
       {
-        className: cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName),
+        className: cn("h-full w-full flex-1 transition-all", PROGRESS_VARIANT[variant].indicator, indicatorClassName),
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )

package/dist/components/ui/release-changelog-section.d.ts

@@ -33,7 +33,28 @@ interface ReleaseChangelogSectionProps {
     MarkdownRenderer?: React.ComponentType<{
         content: string;
     }>;
+    /** Mark the loaded section `data-loading-optional`: a block its page's loading state does not draw. */
+    loadingOptional?: boolean;
 }
-export declare function ReleaseChangelogSection({ title, entries, isBreaking, hideTitle, collapsible, defaultCollapsed, previewFirst, icon, MarkdownRenderer, }: ReleaseChangelogSectionProps): React.JSX.Element | null;
+export declare function ReleaseChangelogSection({ title, entries, isBreaking, hideTitle, collapsible, defaultCollapsed, previewFirst, icon, MarkdownRenderer, loadingOptional, }: ReleaseChangelogSectionProps): React.JSX.Element | null;
+export interface ReleaseChangelogSectionSkeletonProps {
+    /** The section's heading (static copy: drawn for real). */
+    title: string;
+    /** Entries drawn when not `previewFirst` (the first fold). Default 1. */
+    count?: number;
+    isBreaking?: boolean;
+    hideTitle?: boolean;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    /** The preview-first mode: the first entry clamped to the preview height, then the toggle row. */
+    previewFirst?: boolean;
+    icon?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A changelog section while it is read: the real icon and heading, the count badge as a chip, the first entry (title
+ * line and description lines) as bars, clamped to the preview height with FadePreview's toggle row in preview mode.
+ */
+export declare function ReleaseChangelogSectionSkeleton({ title, count, isBreaking, hideTitle, collapsible, defaultCollapsed, previewFirst, icon, className, }: ReleaseChangelogSectionSkeletonProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=release-changelog-section.d.ts.map

package/dist/components/ui/release-changelog-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"release-changelog-section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/release-changelog-section.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAKlE,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;sCAQkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;6DAIyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;wEAGoE;IACpE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7D;AAMD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,gBAAuB,EACvB,YAAoB,EACpB,IAAI,EACJ,gBAAuC,GACxC,EAAE,4BAA4B,4BA2D9B"}
+{"version":3,"file":"release-changelog-section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/release-changelog-section.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AASlE,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;sCAQkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;6DAIyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;wEAGoE;IACpE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,uGAAuG;IACvG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmCD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,gBAAuB,EACvB,YAAoB,EACpB,IAAI,EACJ,gBAAuC,EACvC,eAAuB,GACxB,EAAE,4BAA4B,4BAsE9B;AA+CD,MAAM,WAAW,oCAAoC;IACnD,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kGAAkG;IAClG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,+BAA+B,CAAC,EAC9C,KAAK,EACL,KAAkC,EAClC,UAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,gBAAuB,EACvB,YAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE,oCAAoC,qBAoCtC"}

package/dist/components/ui/release-changelog-section.js

@@ -2,10 +2,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
-import { Badge } from "./badge.js";
+import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { Badge, BadgeSkeleton } from "./badge.js";
+import { Button } from "./button/index.js";
 import { FadePreview } from "./fade-preview.js";
+import { useLoadingScope } from "./loading-scope.js";
 import { RichMarkdownRenderer } from "./markdown/index.js";
 const PREVIEW_COLLAPSED_HEIGHT = 120;
+const SECTION_CLASS = "space-y-4";
+const COLLAPSIBLE_TITLE_ROW_CLASS = "flex w-full cursor-pointer items-center justify-between";
+const COLLAPSIBLE_TITLE_BUTTON_CLASS = cn(
+  COLLAPSIBLE_TITLE_ROW_CLASS,
+  "whitespace-normal text-left [&_svg]:h-6 [&_svg]:w-6"
+);
+const TITLE_BASE_CLASS = "flex items-center gap-2 text-h2";
+const titleClass = (isBreaking) => `${TITLE_BASE_CLASS} ${isBreaking ? "text-ods-error" : "text-ods-text-primary"}`;
+const COUNT_BADGE_CLASS = "ml-2";
+const CHEVRON_CLASS = "!h-4 !w-4 shrink-0 text-ods-text-secondary transition-transform duration-200";
+const ENTRY_LIST_CLASS = "space-y-6";
+const ENTRY_CLASS = "ml-0 border-l-2 border-ods-border pl-4";
+const ENTRY_TITLE_CLASS = "mb-2 text-ods-text-primary text-h3 [&_p+p]:!mt-2 [&_p]:!my-0 [&_p]:!text-[length:var(--font-size-h3-body)] [&_p]:!font-bold [&_p]:!leading-[var(--font-line-space-h3-body)]";
+const ENTRY_DESCRIPTION_CLASS = "text-ods-text-primary text-h4 [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!font-medium [&_p]:!leading-[var(--font-line-space-h4-body)]";
+const COMPACT_BUTTON_HEIGHT_CLASS = "h-6";
+const PREVIEW_TOGGLE_SKELETON_CLASS = cn("mt-[var(--spacing-system-mf)] w-28", COMPACT_BUTTON_HEIGHT_CLASS);
+const CHANGELOG_SKELETON_ENTRIES = 1;
 function ReleaseChangelogSection({
   title,
   entries,
@@ -15,43 +36,50 @@ function ReleaseChangelogSection({
   defaultCollapsed = true,
   previewFirst = false,
   icon,
-  MarkdownRenderer = RichMarkdownRenderer
+  MarkdownRenderer = RichMarkdownRenderer,
+  loadingOptional = false
 }) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
+  const loading = useLoadingScope();
+  if (loading)
+    return /* @__PURE__ */ jsx(
+      ReleaseChangelogSectionSkeleton,
+      {
+        title,
+        isBreaking,
+        hideTitle,
+        collapsible,
+        defaultCollapsed,
+        previewFirst,
+        icon
+      }
+    );
   if (!entries || entries.length === 0) return null;
   const inPreviewMode = previewFirst && !collapsible;
   const showEntries = !collapsible || !collapsed;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: SECTION_CLASS, "data-loading-optional": loadingOptional || void 0, children: [
     !hideTitle && (collapsible ? /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
         type: "button",
+        variant: "glyph",
+        size: "wrap",
         onClick: () => setCollapsed(!collapsed),
-        className: "flex w-full cursor-pointer items-center justify-between",
+        "aria-expanded": !collapsed,
+        className: COLLAPSIBLE_TITLE_BUTTON_CLASS,
         children: [
-          /* @__PURE__ */ jsxs(
-            "h2",
-            {
-              className: `flex items-center gap-2 text-h2 ${isBreaking ? "text-ods-error" : "text-ods-text-primary"}`,
-              children: [
-                icon,
-                title,
-                /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-2", children: entries.length })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: `h-4 w-4 shrink-0 text-ods-text-secondary transition-transform duration-200 ${!collapsed ? "rotate-180" : ""}`
-            }
-          )
+          /* @__PURE__ */ jsxs("h2", { className: titleClass(isBreaking), children: [
+            icon,
+            title,
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: COUNT_BADGE_CLASS, children: entries.length })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: `${CHEVRON_CLASS} ${!collapsed ? "rotate-180" : ""}` })
         ]
       }
-    ) : /* @__PURE__ */ jsxs("h2", { className: `flex items-center gap-2 text-h2 ${isBreaking ? "text-ods-error" : "text-ods-text-primary"}`, children: [
+    ) : /* @__PURE__ */ jsxs("h2", { className: titleClass(isBreaking), children: [
       icon,
       title,
-      /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-2", children: entries.length })
+      /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: COUNT_BADGE_CLASS, children: entries.length })
     ] })),
     showEntries && (inPreviewMode ? (
       /* Preview-first mode: the shared `FadePreview` primitive clamps
@@ -73,8 +101,8 @@ function ChangelogEntryList({
   entries,
   MarkdownRenderer
 }) {
-  return /* @__PURE__ */ jsx("ul", { className: "space-y-6", children: entries.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: "ml-0 border-l-2 border-ods-border pl-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-2 text-ods-text-primary text-h3 [&_p+p]:!mt-2 [&_p]:!my-0 [&_p]:!text-[length:var(--font-size-h3-body)] [&_p]:!font-bold [&_p]:!leading-[var(--font-line-space-h3-body)]", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: entry.title }) }),
+  return /* @__PURE__ */ jsx("ul", { className: ENTRY_LIST_CLASS, children: entries.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: ENTRY_CLASS, children: [
+    /* @__PURE__ */ jsx("div", { className: ENTRY_TITLE_CLASS, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: entry.title }) }),
     entry.description && /* Entry description — body text matches the main release
        summary at the SAME 14/18px responsive `text-h4` scale.
        The `MarkdownRenderer` forces its own `<p>` typography
@@ -82,9 +110,49 @@ function ChangelogEntryList({
        inflate the changelog body to 20px. The `[&_p]:!` overrides
        pin every descendant `<p>` back to the h4 responsive tokens
        so the breakpoints stay aligned with the rest of the page. */
-    /* @__PURE__ */ jsx("div", { className: "text-ods-text-primary text-h4 [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!font-medium [&_p]:!leading-[var(--font-line-space-h4-body)]", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: entry.description }) })
+    /* @__PURE__ */ jsx("div", { className: ENTRY_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: entry.description }) })
   ] }, index)) });
 }
+function ReleaseChangelogSectionSkeleton({
+  title,
+  count = CHANGELOG_SKELETON_ENTRIES,
+  isBreaking = false,
+  hideTitle = false,
+  collapsible = false,
+  defaultCollapsed = true,
+  previewFirst = false,
+  icon,
+  className
+}) {
+  const heading = /* @__PURE__ */ jsxs("h2", { className: titleClass(isBreaking), children: [
+    icon,
+    title,
+    /* @__PURE__ */ jsx(BadgeSkeleton, { className: cn(COUNT_BADGE_CLASS, "w-[2ch]") })
+  ] });
+  const inPreviewMode = previewFirst && !collapsible;
+  const showEntries = !collapsible || !defaultCollapsed;
+  const list = /* @__PURE__ */ jsx(ChangelogEntryListSkeleton, { count: inPreviewMode ? 1 : count });
+  return /* @__PURE__ */ jsxs("div", { className: cn(SECTION_CLASS, className), "aria-hidden": true, children: [
+    !hideTitle && (collapsible ? /* @__PURE__ */ jsxs("div", { className: COLLAPSIBLE_TITLE_ROW_CLASS, children: [
+      heading,
+      /* @__PURE__ */ jsx(ChevronDown, { className: cn(CHEVRON_CLASS, !defaultCollapsed && "rotate-180") })
+    ] }) : heading),
+    showEntries && (inPreviewMode ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden", style: { maxHeight: PREVIEW_COLLAPSED_HEIGHT }, children: list }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: PREVIEW_TOGGLE_SKELETON_CLASS })
+    ] }) : list)
+  ] });
+}
+function ChangelogEntryListSkeleton({ count }) {
+  return /* @__PURE__ */ jsx("ul", { className: ENTRY_LIST_CLASS, children: Array.from({ length: count }, (_, index) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton entries never reorder
+    /* @__PURE__ */ jsxs("li", { className: ENTRY_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: ENTRY_TITLE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-2/3" }) }),
+      /* @__PURE__ */ jsx("div", { className: ENTRY_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", lines: 5, className: "w-full" }) })
+    ] }, index)
+  )) });
+}
 export {
-  ReleaseChangelogSection
+  ReleaseChangelogSection,
+  ReleaseChangelogSectionSkeleton
 };

package/dist/components/ui/search-input.d.ts.map

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

package/dist/components/ui/search-input.js

@@ -15,8 +15,12 @@ import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collisi
 import { cn } from "../../utils/cn.js";
 import { SearchIcon } from "../icons-v2-generated/index.js";
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { HiddenTagsPopup } from "./hidden-tags-popup.js";
 import { Tag } from "./tag.js";
+const SEARCH_RESULT_ROW_CLASS = "flex min-h-10 items-center border-b border-ods-border px-3 last:border-b-0";
+const SEARCH_RESULTS_FOLD = 8;
 const containerStyles = cn(
   // Layout & spacing — matches lib Input component
   "flex h-11 cursor-text items-center gap-2 rounded-[6px] border px-3 content-md:h-12",
@@ -233,7 +237,8 @@ function SearchInput({
         role: "option",
         "aria-selected": isHighlighted,
         className: cn(
-          "flex min-h-10 cursor-pointer items-center border-b border-ods-border px-3 transition-colors last:border-b-0",
+          SEARCH_RESULT_ROW_CLASS,
+          "cursor-pointer transition-colors",
           isHighlighted && "bg-ods-bg-hover",
           !isHighlighted && "hover:bg-ods-bg-hover"
         ),
@@ -246,7 +251,10 @@ function SearchInput({
   };
   const renderDropdownContent = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-ods-text-secondary text-h6", children: "Loading..." });
+      return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading results", children: Array.from({ length: SEARCH_RESULTS_FOLD }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+        /* @__PURE__ */ jsx("div", { className: SEARCH_RESULT_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-2/3" }) }, i)
+      )) });
     }
     if (flatResults.length === 0) {
       return /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-ods-text-secondary text-h6", children: emptyResultsText });
@@ -372,7 +380,7 @@ function SearchInput({
             }
           },
           children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
-            /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "max-h-[320px] min-h-0 w-full", children: /* @__PURE__ */ jsx("div", { role: "listbox", children: renderDropdownContent() }) }),
+            /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "max-h-[320px] min-h-0 w-full", children: /* @__PURE__ */ jsx("div", { role: isLoading ? void 0 : "listbox", children: renderDropdownContent() }) }),
             /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, { className: "hidden", orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, {}) })
           ] })
         }

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

@@ -1 +1 @@
-{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,OAAO,CAAC;AASjE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;qEACiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,kFAAkF;AAClF,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yGAAyG;IACzG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;uDACmD;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAClF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,+BA+M/D"}
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,OAAO,CAAC;AAoBjE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;qEACiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,kFAAkF;AAClF,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yGAAyG;IACzG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;uDACmD;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAClF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,+BAwN/D"}

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

@@ -6,9 +6,15 @@ import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collisi
 import { cn } from "../../utils/cn.js";
 import { CheckIcon, SearchIcon } from "../icons-v2-generated/index.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { FieldWrapper } from "./field-wrapper.js";
 import { Input } from "./input.js";
 import { usePortalContainer } from "./portal-container.js";
+const SELECT_ROW_CLASS = "flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left";
+const SELECT_TILE_CLASS = "flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]";
+const SELECT_ROWS_FOLD = 8;
+const SELECT_TILES_FOLD = 12;
 function SearchableSelect(allProps) {
   const {
     options,
@@ -17,7 +23,7 @@ function SearchableSelect(allProps) {
     placeholder = "Select...",
     searchPlaceholder = "Search...",
     emptyText = "No results found",
-    loadingText = "Loading\u2026",
+    loadingText = "Loading options",
     isLoading = false,
     disabled = false,
     trigger,
@@ -139,8 +145,15 @@ function SearchableSelect(allProps) {
                 // bottom/right rule, so the grid needs no gap.
                 isGrid ? "grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))]" : "py-[var(--spacing-system-xs)]"
               ),
-              role: "listbox",
-              children: isLoading ? /* @__PURE__ */ jsx("div", { className: statusClass, children: loadingText }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: statusClass, children: emptyText }) : filtered.map((opt) => {
+              role: isLoading ? void 0 : "listbox",
+              children: isLoading ? (
+                // The options while they are read: the list's own rows (or tiles), a label bar each; `loadingText` is
+                // what a screen reader hears.
+                /* @__PURE__ */ jsx(LoadingRegion, { label: loadingText, className: "contents", children: Array.from({ length: isGrid ? SELECT_TILES_FOLD : SELECT_ROWS_FOLD }, (_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+                  /* @__PURE__ */ jsx("div", { className: isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: isGrid ? "h6" : "h4", className: isGrid ? "w-full" : "w-2/3" }) }, i)
+                )) })
+              ) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: statusClass, children: emptyText }) : filtered.map((opt) => {
                 const isSelected = value === opt.value;
                 return /* @__PURE__ */ jsx(
                   "button",
@@ -151,7 +164,7 @@ function SearchableSelect(allProps) {
                     onClick: () => handleSelect(opt.value),
                     className: cn(
                       "transition-colors hover:bg-ods-bg-hover",
-                      isGrid ? "flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]" : "flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left",
+                      isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS,
                       isSelected && "bg-ods-bg-hover"
                     ),
                     children: renderOption ? renderOption(opt, isSelected) : isGrid ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/ui/skeleton-surface.d.ts

@@ -1,7 +1,15 @@
 /**
- * What a skeleton looks like: the pulsing surface every loading stand-in draws
- * (`UnifiedSkeleton` and its presets, `TextHold`'s bars). A plain module, with
- * no client directive, so a server component can read the string itself.
+ * THE two pulses of the library, and the only places `animate-pulse` is written (a test fails on any other).
+ * A plain module, with no client directive, so a server component can read the strings itself.
+ *
+ * - `SKELETON_SURFACE_CLASS`: what a skeleton looks like, the pulsing surface every loading shape draws
+ *   (`UnifiedSkeleton` and its presets, `TextHold`'s bars). Every surface carries the `ods-skeleton` marker, and
+ *   a surface stops the pulse of every surface inside it: a skeleton drawn inside another one pulses with its
+ *   parent, once, never twice over (two opacity animations multiplied read as a faster, harsher pulse).
+ * - `LIVE_PULSE_CLASS`: a live indicator that is not a loading state (a "working" status dot, a connecting
+ *   light, a busy mark). Same animation and timing as the skeleton, so the page has one rhythm.
  */
-export declare const SKELETON_SURFACE_CLASS = "animate-pulse motion-reduce:animate-none bg-ods-skeleton";
+export declare const SKELETON_SURFACE_MARKER = "ods-skeleton";
+export declare const SKELETON_SURFACE_CLASS = "ods-skeleton animate-pulse motion-reduce:animate-none bg-ods-skeleton [&_.ods-skeleton]:animate-none";
+export declare const LIVE_PULSE_CLASS = "animate-pulse motion-reduce:animate-none";
 //# sourceMappingURL=skeleton-surface.d.ts.map

package/dist/components/ui/skeleton-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-surface.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton-surface.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6DAA6D,CAAC"}
+{"version":3,"file":"skeleton-surface.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton-surface.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAGtD,eAAO,MAAM,sBAAsB,yGACqE,CAAC;AAEzG,eAAO,MAAM,gBAAgB,6CAA6C,CAAC"}

package/dist/components/ui/skeleton-surface.js

@@ -1,5 +1,9 @@
 "use client";
-const SKELETON_SURFACE_CLASS = "animate-pulse motion-reduce:animate-none bg-ods-skeleton";
+const SKELETON_SURFACE_MARKER = "ods-skeleton";
+const SKELETON_SURFACE_CLASS = "ods-skeleton animate-pulse motion-reduce:animate-none bg-ods-skeleton [&_.ods-skeleton]:animate-none";
+const LIVE_PULSE_CLASS = "animate-pulse motion-reduce:animate-none";
 export {
-  SKELETON_SURFACE_CLASS
+  LIVE_PULSE_CLASS,
+  SKELETON_SURFACE_CLASS,
+  SKELETON_SURFACE_MARKER
 };

package/dist/components/ui/slack-channel-chip.d.ts

@@ -8,8 +8,12 @@ export interface SlackChannelChipProps {
 }
 /**
  * Inline Slack-channel reference: the Slack icon + "#name", optionally linked
- * to the channel's web deep link. Server-component safe (no hooks/state).
+ * to the channel's web deep link. In a page's loading state the channel is read: the chip is its skeleton.
  * Degrades gracefully: no name renders plain "Slack", no href renders unlinked.
  */
 export declare function SlackChannelChip({ name, href, className }: SlackChannelChipProps): import("react").JSX.Element;
+/** A SlackChannelChip while its channel is read: Slack's mark (static), the channel's name a bar of its line. */
+export declare function SlackChannelChipSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=slack-channel-chip.d.ts.map

package/dist/components/ui/slack-channel-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slack-channel-chip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slack-channel-chip.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAahF"}
+{"version":3,"file":"slack-channel-chip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slack-channel-chip.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAchF;AAED,iHAAiH;AACjH,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO7E"}

package/dist/components/ui/slack-channel-chip.js

@@ -1,16 +1,29 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "../../embed-shims/next-link.js";
+import { ICON_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { SlackIcon } from "../icons-v2-generated/brand-logos/slack-icon.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
+const CHIP_CLASS = "inline-flex items-center gap-1 align-baseline text-ods-text-primary";
+const MARK_CLASS = `${ICON_SIZE.sm} flex-shrink-0`;
 function SlackChannelChip({ name, href, className }) {
-  const inner = /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1 align-baseline text-ods-text-primary", className), children: [
-    /* @__PURE__ */ jsx(SlackIcon, { className: "h-4 w-4 flex-shrink-0" }),
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(SlackChannelChipSkeleton, { className });
+  const inner = /* @__PURE__ */ jsxs("span", { className: cn(CHIP_CLASS, className), children: [
+    /* @__PURE__ */ jsx(SlackIcon, { className: MARK_CLASS }),
     name ? `#${name}` : "Slack"
   ] });
   if (!href) return inner;
   return /* @__PURE__ */ jsx(Link, { href, target: "_blank", rel: "noopener noreferrer", className: "hover:underline", children: inner });
 }
+function SlackChannelChipSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(CHIP_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(SlackIcon, { className: MARK_CLASS }),
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "inline-block w-24 align-bottom" })
+  ] });
+}
 export {
-  SlackChannelChip
+  SlackChannelChip,
+  SlackChannelChipSkeleton
 };

package/dist/components/ui/snap-carousel.d.ts

@@ -21,6 +21,9 @@ export interface SnapCarouselProps<T> {
     nextLabel?: string;
     /** A slide to bring into view whenever this value changes (a link that names it). Only the track moves, never the page. */
     focusIndex?: number;
+    /** The slides are read data (a list whose length is the record's): each slide is marked an item of ONE read list
+     *  (`data-loading-item`), so a loading state drawn with the same carousel has the same structure as the loaded one. */
+    readItems?: boolean;
     className?: string;
 }
 /**
@@ -34,5 +37,5 @@ export interface SnapCarouselProps<T> {
  * mouse button down on it, the keyboard inside it); there is no pause button. While it is auto-playing the active dot fills over the
  * interval, so the wait is visible.
  */
-export declare function SnapCarousel<T>({ items, renderItem, getKey, label, autoAdvanceMs, slideClassName, prevLabel, nextLabel, focusIndex, className, }: SnapCarouselProps<T>): import("react").JSX.Element | null;
+export declare function SnapCarousel<T>({ items, renderItem, getKey, label, autoAdvanceMs, slideClassName, prevLabel, nextLabel, focusIndex, readItems, className, }: SnapCarouselProps<T>): import("react").JSX.Element | null;
 //# sourceMappingURL=snap-carousel.d.ts.map

package/dist/components/ui/snap-carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snap-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/snap-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAWjF;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEjF;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2HAA2H;IAC3H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,aAAoB,EACpB,cAAgC,EAChC,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,sCAsItB"}
+{"version":3,"file":"snap-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/snap-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAWjF;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEjF;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2HAA2H;IAC3H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;2HACuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,aAAoB,EACpB,cAAgC,EAChC,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,SAAiB,EACjB,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,sCAuItB"}

package/dist/components/ui/snap-carousel.js

@@ -45,6 +45,7 @@ function SnapCarousel({
   prevLabel = "Previous",
   nextLabel = "Next",
   focusIndex,
+  readItems = false,
   className
 }) {
   const trackRef = useRef(null);
@@ -115,6 +116,7 @@ function SnapCarousel({
             "aria-label": `${itemIndex + 1} / ${count}`,
             "aria-current": itemIndex === index ? "true" : void 0,
             className: cn("flex shrink-0 grow-0 snap-start", slideClassName),
+            "data-loading-item": readItems || void 0,
             children: /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderItem(item, itemIndex) })
           },
           getKey ? getKey(item, itemIndex) : itemIndex

package/dist/components/ui/square-avatar.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes } from 'react';
 interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
+    /** A step of the shared avatar scale (`AVATAR_SIZE`). */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** Exact pixel size (width & height). Overrides the `size` bucket dimensions —
      *  for callers with a numeric-px API (e.g. UserDisplay/MSPDisplay). */
@@ -21,4 +22,6 @@ interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const SquareAvatar: import("react").NamedExoticComponent<SquareAvatarProps & import("react").RefAttributes<HTMLDivElement>>;
 export { SquareAvatar };
+/** A SquareAvatar while its person is read: a box of the avatar's own size and corner. */
+export declare function SquareAvatarSkeleton({ size, sizePx, variant, className, }: Pick<SquareAvatarProps, 'size' | 'sizePx' | 'variant' | 'className'>): import("react").JSX.Element;
 //# sourceMappingURL=square-avatar.d.ts.map

package/dist/components/ui/square-avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"square-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/square-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAoB,MAAM,OAAO,CAAC;AAM9D,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;2EACuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;0EAEsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,yGAyGjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"square-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/square-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAoB,MAAM,OAAO,CAAC;AAS9D,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;2EACuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;0EAEsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD,QAAA,MAAM,YAAY,yGA4FjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,0FAA0F;AAC1F,wBAAgB,oBAAoB,CAAC,EACnC,IAAW,EACX,MAAM,EACN,OAAkB,EAClB,SAAS,GACV,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC,+BAatE"}

package/dist/components/ui/square-avatar.js

@@ -3,8 +3,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, forwardRef } from "react";
 import Image from "../../embed-shims/next-image.js";
 import { useAuthedImageSrc } from "../../hooks/use-authed-image-src.js";
+import { AVATAR_SIZE, AVATAR_SIZE_PX } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { personInitials } from "../../utils/format.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
+const SQUARE_AVATAR_VARIANT_CLASS = {
+  square: "rounded-md",
+  round: "rounded-full"
+};
 const SquareAvatar = memo(
   forwardRef(
     ({
@@ -20,28 +27,15 @@ const SquareAvatar = memo(
       style,
       ...props
     }, ref) => {
-      const resolvedSrc = useAuthedImageSrc(src);
-      const sizeClasses = {
-        // xs (24px): dense card meta rows — avatar stacks on delivery/
-        // roadmap cards. Part of the shared scale so no caller ever
-        // bypasses the buckets with raw sizePx for a standard size.
-        xs: "h-6 w-6",
-        sm: "h-8 w-8",
-        md: "h-10 w-10",
-        lg: "h-12 w-12",
-        xl: "h-16 w-16"
-      };
-      const sizePxBySize = {
-        xs: 24,
-        sm: 32,
-        md: 40,
-        lg: 48,
-        xl: 64
-      };
-      const variantClasses = {
-        square: "rounded-md",
-        round: "rounded-full"
-      };
+      const held = useLoadingScope();
+      const authedSrc = useAuthedImageSrc(held ? void 0 : src);
+      if (held) {
+        return /* @__PURE__ */ jsx(SquareAvatarSkeleton, { size, sizePx, variant, className });
+      }
+      const resolvedSrc = authedSrc;
+      const sizeClasses = AVATAR_SIZE;
+      const sizePxBySize = AVATAR_SIZE_PX;
+      const variantClasses = SQUARE_AVATAR_VARIANT_CLASS;
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -109,6 +103,27 @@ const SquareAvatar = memo(
   )
 );
 SquareAvatar.displayName = "SquareAvatar";
+function SquareAvatarSkeleton({
+  size = "md",
+  sizePx,
+  variant = "square",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    UnifiedSkeleton,
+    {
+      className: cn(
+        "shrink-0",
+        sizePx === void 0 && AVATAR_SIZE[size],
+        SQUARE_AVATAR_VARIANT_CLASS[variant],
+        className
+      ),
+      width: sizePx,
+      height: sizePx
+    }
+  );
+}
 export {
-  SquareAvatar
+  SquareAvatar,
+  SquareAvatarSkeleton
 };