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

package/dist/components/ui/markdown-editor.js

@@ -1,12 +1,28 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2, Upload } from "lucide-react";
-import { useRef, useCallback, useState, useEffect } from "react";
+import { Suspense, createContext, useRef, useCallback, useContext, useState, useEffect } from "react";
 import dynamic from "../../embed-shims/next-dynamic.js";
 import { cn } from "../../utils/cn.js";
 import { IMAGE_FILE_ACCEPT, fileMediaType } from "../../utils/media-type.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { useMarkdownLinkCommand } from "./markdown-link-command.js";
-const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
+const MARKDOWN_EDITOR_DEFAULT_HEIGHT = 600;
+function MarkdownEditorFieldSkeleton({
+  height = MARKDOWN_EDITOR_DEFAULT_HEIGHT,
+  className
+}) {
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the editor", className, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "w-full rounded-md", height }) });
+}
+const MarkdownEditorHeightContext = createContext(MARKDOWN_EDITOR_DEFAULT_HEIGHT);
+function MarkdownEditorPending() {
+  return /* @__PURE__ */ jsx(MarkdownEditorFieldSkeleton, { height: useContext(MarkdownEditorHeightContext) });
+}
+const MDEditor = dynamic(() => import("@uiw/react-md-editor"), {
+  ssr: false,
+  loading: () => /* @__PURE__ */ jsx(MarkdownEditorPending, {})
+});
 const MARKDOWN_EDITOR_STYLE_ID = "ods-markdown-editor-styles";
 const mdEditorCSS = `
 :root { --md-editor-text-color: var(--color-text-primary) !important; }
@@ -92,7 +108,7 @@ function MarkdownEditor({
   onChange,
   placeholder = "",
   disabled = false,
-  height = 600,
+  height = MARKDOWN_EDITOR_DEFAULT_HEIGHT,
   minHeight = 100,
   className,
   onUploadFile,
@@ -278,8 +294,7 @@ function MarkdownEditor({
         accept: `${IMAGE_FILE_ACCEPT},.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.txt`
       }
     ),
-    !MDEditor && /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin" }) }),
-    MDEditor && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(MarkdownEditorHeightContext.Provider, { value: height, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(MarkdownEditorFieldSkeleton, { height }), children: /* @__PURE__ */ jsx(
       MDEditor,
       {
         value,
@@ -315,12 +330,13 @@ function MarkdownEditor({
         },
         "data-color-mode": "dark"
       }
-    ),
+    ) }) }),
     uploadProgress && /* @__PURE__ */ jsx("p", { className: "mt-1 text-ods-text-secondary text-h6", children: uploadProgress }),
     linkDialog,
     /* @__PURE__ */ jsx(MarkdownEditorStyles, {})
   ] });
 }
 export {
-  MarkdownEditor
+  MarkdownEditor,
+  MarkdownEditorFieldSkeleton
 };

package/dist/components/ui/numbered-step.d.ts

@@ -26,4 +26,14 @@ export interface NumberedStepProps extends StepNumberProps {
  * take the accent and its description reads at full strength.
  */
 export declare function NumberedStep({ number, title, description, current, accent, titleAs: Title, className, }: NumberedStepProps): import("react").JSX.Element;
+/**
+ * A numbered step while its words are read: its number drawn for real (it is the step's place), its title a
+ * `text-h3` bar and its description, when it carries one, a `text-h4` bar.
+ */
+export declare function NumberedStepSkeleton({ number, description, className, }: {
+    number: number;
+    /** The loaded step carries a description. Default `true`. */
+    description?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=numbered-step.d.ts.map

package/dist/components/ui/numbered-step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numbered-step.d.ts","sourceRoot":"","sources":["../../../src/components/ui/numbered-step.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uHAAuH;IACvH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAe,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,+BAazF;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAe,EACf,MAAM,EACN,OAAO,EAAE,KAAY,EACrB,SAAS,GACV,EAAE,iBAAiB,+BA2BnB"}
+{"version":3,"file":"numbered-step.d.ts","sourceRoot":"","sources":["../../../src/components/ui/numbered-step.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uHAAuH;IACvH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAe,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,+BAazF;AAMD,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAe,EACf,MAAM,EACN,OAAO,EAAE,KAAY,EACrB,SAAS,GACV,EAAE,iBAAiB,+BA2BnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,WAAkB,EAClB,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAUA"}

package/dist/components/ui/numbered-step.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 function StepNumber({ number, current = false, accent, className }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -15,6 +16,8 @@ function StepNumber({ number, current = false, accent, className }) {
     }
   );
 }
+const STEP_CLASS = "flex items-start gap-[var(--spacing-system-xs)]";
+const STEP_TEXT_CLASS = "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]";
 function NumberedStep({
   number,
   title,
@@ -24,9 +27,9 @@ function NumberedStep({
   titleAs: Title = "h3",
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-[var(--spacing-system-xs)]", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(STEP_CLASS, className), children: [
     /* @__PURE__ */ jsx(StepNumber, { number, current, accent }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: STEP_TEXT_CLASS, children: [
       /* @__PURE__ */ jsx(
         Title,
         {
@@ -51,7 +54,21 @@ function NumberedStep({
     ] })
   ] });
 }
+function NumberedStepSkeleton({
+  number,
+  description = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(STEP_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(StepNumber, { number }),
+    /* @__PURE__ */ jsxs("div", { className: cn(STEP_TEXT_CLASS, "flex-1"), children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-1/2" }),
+      description && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-3/4" })
+    ] })
+  ] });
+}
 export {
   NumberedStep,
+  NumberedStepSkeleton,
   StepNumber
 };

package/dist/components/ui/organization-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/organization-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;iCAC6B;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,eAAe,EACf,SAAS,EACT,IAAI,EACJ,gBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,EAAE,qBAAqB,qBAiGvB"}
+{"version":3,"file":"organization-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/organization-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;iCAC6B;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,eAAe,EACf,SAAS,EACT,IAAI,EACJ,gBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,EAAE,qBAAqB,qBA6GvB"}

package/dist/components/ui/organization-card.js

@@ -3,7 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Monitor } from "lucide-react";
 import Link from "../../embed-shims/next-link.js";
 import { cn } from "../../utils/cn.js";
+import {
+  OrganizationCardSkeleton,
+  ORGANIZATION_CARD_RADIUS_CLASS,
+  ORGANIZATION_CARD_LAYOUT_CLASS,
+  ORGANIZATION_CARD_SURFACE_CLASS,
+  ORGANIZATION_CARD_HEADER_CLASS,
+  ORGANIZATION_CARD_TEXT_CLASS,
+  ORGANIZATION_CARD_DESCRIPTION_CLASS,
+  ORGANIZATION_CARD_FOOTER_CLASS,
+  ORGANIZATION_CARD_STATS_CLASS,
+  ORGANIZATION_CARD_STAT_CLASS
+} from "../loading/organization-card-skeleton.js";
 import { EntityImage } from "./entity-image.js";
+import { useLoadingScope } from "./loading-scope.js";
 function OrganizationCard({
   organization,
   fetchedImageUrl,
@@ -15,6 +28,16 @@ function OrganizationCard({
   customFooter,
   deviceCount
 }) {
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(
+      OrganizationCardSkeleton,
+      {
+        className,
+        showDescription: Boolean(organization.description),
+        showFooter: Boolean(customFooter || footerStats)
+      }
+    );
+  }
   const handleActionClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -24,7 +47,9 @@ function OrganizationCard({
     "div",
     {
       className: cn(
-        "relative flex w-full flex-col gap-3 overflow-clip rounded-[6px] border border-ods-border bg-ods-card p-4",
+        ORGANIZATION_CARD_LAYOUT_CLASS,
+        ORGANIZATION_CARD_SURFACE_CLASS,
+        ORGANIZATION_CARD_RADIUS_CLASS,
         "transition-colors",
         href && "cursor-pointer hover:border-ods-border-hover hover:bg-ods-card-hover",
         className
@@ -50,9 +75,9 @@ function OrganizationCard({
             children: actionButton.icon
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_HEADER_CLASS, children: [
           /* @__PURE__ */ jsx(EntityImage, { src: fetchedImageUrl || organization.imageUrl, alt: organization.name }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_TEXT_CLASS, children: [
             /* @__PURE__ */ jsx("h3", { className: "truncate text-ods-text-primary transition-colors text-h3", title: organization.name, children: organization.name }),
             /* @__PURE__ */ jsx(
               "p",
@@ -64,8 +89,8 @@ function OrganizationCard({
             )
           ] })
         ] }),
-        organization.description && /* @__PURE__ */ jsx("div", { className: "h-12 w-full overflow-hidden", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-ods-text-primary text-h4", title: organization.description, children: organization.description }) }),
-        customFooter ? customFooter : footerStats && footerStats.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4", children: footerStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
+        organization.description && /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-ods-text-primary text-h4", title: organization.description, children: organization.description }) }),
+        customFooter ? customFooter : footerStats && footerStats.length > 0 ? /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_FOOTER_CLASS, children: /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_STATS_CLASS, children: footerStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_STAT_CLASS, children: [
           stat.icon,
           /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: typeof stat.value === "number" ? stat.value.toLocaleString() : stat.value }),
           stat.label && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h6", children: stat.label })

package/dist/components/ui/page-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-actions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sJAAsJ;IACtJ,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAwKF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAC;IAC9D,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAyED,wBAAgB,WAAW,CAAC,EAC1B,OAAwB,EACxB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,qBA0BlB;AAmND,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,wBAE/E;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-actions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sJAAsJ;IACtJ,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAwKF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAC;IAC9D,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAyED,wBAAgB,WAAW,CAAC,EAC1B,OAAwB,EACxB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,qBA0BlB;AA+MD,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,wBAE/E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/ui/page-actions.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { cn } from "../../utils/cn.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/index.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { InteractiveSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { ActionsMenuDropdown } from "./actions-menu.js";
 import { Button, SplitButton } from "./button/index.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
@@ -130,10 +130,6 @@ function renderRawActionButton(action, opts = {}) {
   );
 }
 const ACTIONS_GAP = "gap-[var(--spacing-system-xs)]";
-const SKELETON_HEIGHT = "h-11 md:h-12";
-const SKELETON_ICON_WIDTH = "w-11 md:w-12";
-const SKELETON_LABEL_WIDTH = "w-[120px] md:w-[140px]";
-const SKELETON_RADIUS = "rounded-md";
 function ActionSkeletons({
   actions,
   fullWidth,
@@ -142,20 +138,20 @@ function ActionSkeletons({
   const items = actions.length > 0 ? actions : [null];
   return /* @__PURE__ */ jsx(Fragment, { children: items.map((action, idx) => {
     const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === "icon";
-    return /* @__PURE__ */ jsx(
-      UnifiedSkeleton,
-      {
-        className: cn(
-          SKELETON_HEIGHT,
-          SKELETON_RADIUS,
-          isIconOnly ? SKELETON_ICON_WIDTH : fullWidth ? "flex-1" : SKELETON_LABEL_WIDTH
-        )
-      },
-      `action-skeleton-${idx}`
-    );
+    const key = `action-skeleton-${idx}`;
+    if (isIconOnly) return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon" }, key);
+    if (action) {
+      return /* @__PURE__ */ jsxs("span", { inert: true, "aria-hidden": true, className: cn("relative inline-flex", fullWidth && "flex-1"), children: [
+        /* @__PURE__ */ jsx("span", { className: cn("invisible inline-flex", fullWidth && "flex-1"), children: renderRawActionButton(action, { fullWidth }) }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "absolute inset-0 h-full" })
+      ] }, key);
+    }
+    return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "default", className: fullWidth ? "flex-1" : void 0 }, key);
   }) });
 }
-const MOBILE_TRIGGER_SKELETON_CLASS = cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS);
+function MobileTriggerSkeleton() {
+  return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon" });
+}
 function PageActions({
   variant = "icon-buttons",
   actions,
@@ -212,7 +208,7 @@ function IconButtonsVariant({
         hasMenuActions && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: menuActions })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: MOBILE_TRIGGER_SKELETON_CLASS }) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
+    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx(MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
   ] });
 }
 function PrimaryButtonsVariant({
@@ -232,7 +228,7 @@ function PrimaryButtonsVariant({
       // into a labelled button, not a square one.
       /* @__PURE__ */ jsx(ActionSkeletons, { actions: desktopActions, emptyFallback: "label" })
     ) : desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
-    /* @__PURE__ */ jsx("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: MOBILE_TRIGGER_SKELETON_CLASS }) : /* @__PURE__ */ jsx(CompactPrimaryActions, { actions: desktopActions }) }),
+    /* @__PURE__ */ jsx("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ jsx(MobileTriggerSkeleton, {}) : /* @__PURE__ */ jsx(CompactPrimaryActions, { actions: desktopActions }) }),
     /* @__PURE__ */ jsx(MobileBottomActions, { actions: sortedActions, loading })
   ] });
 }
@@ -255,7 +251,7 @@ function MenuPrimaryVariant({
         desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: MOBILE_TRIGGER_SKELETON_CLASS }) : hasMobileMenuItems || selector ? (
+    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx(MobileTriggerSkeleton, {}) : hasMobileMenuItems || selector ? (
       // The selector rides into the menu as its header row: on mobile the
       // title row has no room for it, and hiding it entirely (what
       // `icon-buttons` does) would leave no way to switch views at all.

package/dist/components/ui/page-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-loader.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAeD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAiB,EACjB,WAAuC,EACvC,SAAS,EACT,QAAe,GAChB,EAAE,eAAe,+BAYjB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,QAAe,EAAE,EAAE,eAAe,+BAYhH"}
+{"version":3,"file":"page-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-loader.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAeD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAiB,EACjB,WAAuC,EACvC,SAAS,EACT,QAAe,GAChB,EAAE,eAAe,+BAYjB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,QAAe,EAAE,EAAE,eAAe,+BAYhH"}

package/dist/components/ui/page-loader.js

@@ -2,12 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { OpenframeLogoIcon } from "../icons-v2-generated/logos/openframe-logo-icon.js";
+import { LIVE_PULSE_CLASS } from "./skeleton-surface.js";
 function LoaderMark() {
   return /* @__PURE__ */ jsx("div", { className: "relative h-6 w-6", children: /* @__PURE__ */ jsx(
     OpenframeLogoIcon,
     {
       secondaryColor: "var(--color-text-tertiary)",
-      className: "h-6 w-6 animate-pulse text-ods-accent",
+      className: cn("h-6 w-6 text-ods-accent", LIVE_PULSE_CLASS),
       color: "currentColor"
     }
   ) });

package/dist/components/ui/people-cell.d.ts

@@ -36,6 +36,10 @@ export interface PersonCellProps {
     size?: 'sm' | 'lg';
 }
 export declare function PersonCell({ name, avatarUrl, secondary, fallbackName, onClick, actionTitle, size, }: PersonCellProps): import("react").JSX.Element;
+/** The cell while it loads: the SAME avatar box, gap and two lines (the name's type step, then the caption's). */
+export declare function PersonCellSkeleton({ size }: {
+    size?: PersonCellProps['size'];
+}): import("react").JSX.Element;
 export interface PeopleCellPerson {
     /** Stable render key (a profile id) — names can collide or be blank. */
     key?: string | number;

package/dist/components/ui/people-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"people-cell.d.ts","sourceRoot":"","sources":["../../../src/components/ui/people-cell.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAOD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,YAA2B,EAC3B,OAAO,EACP,WAAW,EACX,IAAW,GACZ,EAAE,eAAe,+BAgCjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAA2B,EAAE,EAAE,eAAe,+BAiClF"}
+{"version":3,"file":"people-cell.d.ts","sourceRoot":"","sources":["../../../src/components/ui/people-cell.tsx"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAUD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,YAA2B,EAC3B,OAAO,EACP,WAAW,EACX,IAAW,GACZ,EAAE,eAAe,+BAkCjB;AAED,kHAAkH;AAClH,wBAAgB,kBAAkB,CAAC,EAAE,IAAW,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;CAAE,+BAWrF;AAED,MAAM,WAAW,gBAAgB;IAC/B,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAA2B,EAAE,EAAE,eAAe,+BAmClF"}

package/dist/components/ui/people-cell.js

@@ -1,15 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { personFirstName } from "../../utils/format.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { AvatarStack } from "./avatar-stack.js";
 import { Button } from "./button/index.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
-import { SquareAvatar } from "./square-avatar.js";
+import { useLoadingScope } from "./loading-scope.js";
+import { SquareAvatar, SquareAvatarSkeleton } from "./square-avatar.js";
 import { TruncateText } from "./truncate-text.js";
 const PERSON_CELL_SIZE = {
   sm: { avatar: "sm", gap: "gap-3", primary: "h6" },
   lg: { avatar: "lg", gap: "gap-[var(--spacing-system-sf)]", primary: "h3" }
 };
+const PERSON_ROW_CLASS = "flex min-w-0 items-center";
 function PersonCell({
   name,
   avatarUrl,
@@ -19,9 +22,10 @@ function PersonCell({
   actionTitle,
   size = "sm"
 }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(PersonCellSkeleton, { size });
   const displayName = name || fallbackName;
   const scale = PERSON_CELL_SIZE[size];
-  const row = /* @__PURE__ */ jsxs("div", { className: `group/person-cell flex min-w-0 items-center ${scale.gap}`, children: [
+  const row = /* @__PURE__ */ jsxs("div", { className: `group/person-cell ${PERSON_ROW_CLASS} ${scale.gap}`, children: [
     /* @__PURE__ */ jsx(SquareAvatar, { size: scale.avatar, src: avatarUrl ?? void 0, alt: displayName, fallback: displayName }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx(
@@ -47,8 +51,19 @@ function PersonCell({
     }
   );
 }
+function PersonCellSkeleton({ size = "sm" }) {
+  const scale = PERSON_CELL_SIZE[size];
+  return /* @__PURE__ */ jsxs("div", { className: `${PERSON_ROW_CLASS} ${scale.gap}`, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(SquareAvatarSkeleton, { size: scale.avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: scale.primary, className: "w-3/4" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
+    ] })
+  ] });
+}
 const PEOPLE_CELL_STACK_SLOTS = 2;
 function PeopleCell({ people, fallbackName = "Unassigned" }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(PersonCellSkeleton, {});
   if (people.length <= 1) {
     const [person] = people;
     return /* @__PURE__ */ jsx(
@@ -79,5 +94,6 @@ function PeopleCell({ people, fallbackName = "Unassigned" }) {
 }
 export {
   PeopleCell,
-  PersonCell
+  PersonCell,
+  PersonCellSkeleton
 };

package/dist/components/ui/photo-wall.d.ts

@@ -34,5 +34,5 @@ export interface PhotoWallProps {
     /** The pictures are still being fetched: show the wall's own placeholder frames. */
     loading?: boolean;
 }
-export declare function PhotoWall({ images, columns, speed, fadeColor, className, loading }: PhotoWallProps): import("react").JSX.Element | null;
+export declare function PhotoWall({ images, columns, speed, fadeColor, className, loading: loadingProp, }: PhotoWallProps): import("react").JSX.Element | null;
 //# sourceMappingURL=photo-wall.d.ts.map

package/dist/components/ui/photo-wall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"photo-wall.d.ts","sourceRoot":"","sources":["../../../src/components/ui/photo-wall.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAI7D,CAAC;AAuBF,6HAA6H;AAC7H,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG9F;AAED,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,gBAAgB,CAM9F;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS;IAAE,WAAW,EAAE,gBAAgB,CAAA;CAAE,EAC1E,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EACxB,WAAW,EAAE,MAAM,GAClB,CAAC,EAAE,EAAE,CA0BP;AAmDD,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACtC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAW,EAAE,KAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAe,EAAE,EAAE,cAAc,sCAoInH"}
+{"version":3,"file":"photo-wall.d.ts","sourceRoot":"","sources":["../../../src/components/ui/photo-wall.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAI7D,CAAC;AAuBF,6HAA6H;AAC7H,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG9F;AAED,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,gBAAgB,CAM9F;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS;IAAE,WAAW,EAAE,gBAAgB,CAAA;CAAE,EAC1E,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EACxB,WAAW,EAAE,MAAM,GAClB,CAAC,EAAE,EAAE,CA0BP;AAmDD,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACtC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAW,EACX,KAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,EAAE,WAAmB,GAC7B,EAAE,cAAc,sCAuIhB"}

package/dist/components/ui/photo-wall.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Image, { resizedImageUrl } from "../../embed-shims/next-image.js";
 import { cn } from "../../utils/cn.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 import { MarqueeWall } from "./marquee-wall.js";
 const PHOTO_WALL_FRAME = {
   tall: 4 / 5,
@@ -96,7 +97,16 @@ function usePhotoOrientations(urls) {
   }, [key]);
   return measured?.key === key ? measured.byUrl : null;
 }
-function PhotoWall({ images, columns = 2, speed = 24, fadeColor, className, loading = false }) {
+function PhotoWall({
+  images,
+  columns = 2,
+  speed = 24,
+  fadeColor,
+  className,
+  loading: loadingProp = false
+}) {
+  const inScope = useLoadingScope();
+  const loading = loadingProp || inScope;
   const rootRef = useRef(null);
   const [box, setBox] = useState(null);
   useEffect(() => {
@@ -117,11 +127,11 @@ function PhotoWall({ images, columns = 2, speed = 24, fadeColor, className, load
     typeof window === "undefined" ? 1 : window.devicePixelRatio || 1
   ) : void 0;
   const unique = useMemo(() => {
-    if (requestWidth === void 0) return [];
+    if (requestWidth === void 0 || inScope) return [];
     const byUrl = /* @__PURE__ */ new Map();
     for (const image of images) if (!byUrl.has(image.url)) byUrl.set(image.url, image);
     return Array.from(byUrl.values());
-  }, [images, requestWidth]);
+  }, [images, requestWidth, inScope]);
   const drawnWidth = requestWidth ?? void 0;
   const drawnUrl = useCallback((url) => drawnWidth ? resizedImageUrl(url, drawnWidth) : url, [drawnWidth]);
   const urls = useMemo(() => unique.map((image) => drawnUrl(image.url)), [unique, drawnUrl]);

package/dist/components/ui/product-screen-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-screen-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-screen-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAC;AAM9F,gGAAgG;AAChG,eAAO,MAAM,2BAA2B,MAA8B,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,MAA0B,CAAC;AAErE,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,KAA0B,CAAC;AAKjE,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAqB,EACrB,WAAyC,EACzC,SAAqC,EACrC,IAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BAwEzB"}
+{"version":3,"file":"product-screen-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-screen-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAC;AAO9F,gGAAgG;AAChG,eAAO,MAAM,2BAA2B,MAA8B,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,MAA0B,CAAC;AAErE,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,KAA0B,CAAC;AAKjE,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAqB,EACrB,WAAyC,EACzC,SAAqC,EACrC,IAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BAkFzB"}

package/dist/components/ui/product-screen-frame.js

@@ -4,6 +4,7 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { LAYOUT_STEPS } from "../../styles/layout-steps.js";
 import { cn } from "../../utils/cn.js";
 import { PagePicture } from "../layout/page-picture.js";
+import { LoadingScope } from "./loading-scope.js";
 import { CollisionBoundaryContext, PortalContainerContext } from "./portal-container.js";
 const PRODUCT_SCREEN_DESIGN_WIDTH = LAYOUT_STEPS["2xl"].content;
 const PRODUCT_SCREEN_READABLE_WIDTH = LAYOUT_STEPS.lg.content;
@@ -64,10 +65,10 @@ function ProductScreenFrame({
           {
             inert: true,
             "aria-hidden": true,
-            className: cn("ods-content-area", mode === "pending" && "invisible"),
+            className: "ods-content-area",
             style: screenStyle,
             children: [
-              /* @__PURE__ */ jsx("div", { className: "ods-content-scope", children: /* @__PURE__ */ jsx(PagePicture, { children }) }),
+              /* @__PURE__ */ jsx("div", { className: "ods-content-scope", children: mode === "pending" ? /* @__PURE__ */ jsx(LoadingScope, { bare: true, children: /* @__PURE__ */ jsx(PagePicture, { children }) }) : /* @__PURE__ */ jsx(PagePicture, { children }) }),
               /* @__PURE__ */ jsx("div", { ref: setPortalHost, style: { display: "contents" } })
             ]
           }

package/dist/components/ui/progress-bar.d.ts

@@ -1,4 +1,13 @@
 import type React from 'react';
+/** The bar's height in px: below the content `md` step, and from it (the bar switches on the content's width). */
+export declare const PROGRESS_BAR_HEIGHT: {
+    readonly mobile: 8;
+    readonly desktop: 24;
+};
+/** The bar while its value is read: one box at the bar's own height, switched at the bar's own step. */
+export declare function ProgressBarSkeleton({ className }: {
+    className?: string;
+}): React.JSX.Element;
 type ProgressBarProps = {
     progress: number;
     warningThreshold?: number;

package/dist/components/ui/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqElD,CAAC"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,kHAAkH;AAClH,eAAO,MAAM,mBAAmB;;;CAAsC,CAAC;AAIvE,wGAAwG;AACxG,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAExE;AAED,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgFlD,CAAC"}

package/dist/components/ui/progress-bar.js

@@ -2,6 +2,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useContentMdUp } from "../../hooks/ui/use-content-breakpoint.js";
+import { cn } from "../../utils/cn.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+const PROGRESS_BAR_HEIGHT = { mobile: 8, desktop: 24 };
+const PROGRESS_BAR_HEIGHT_CLASS = "h-2 content-md:h-6";
+function ProgressBarSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(PROGRESS_BAR_HEIGHT_CLASS, "w-full rounded", className) });
+}
 const ProgressBar = ({
   progress,
   warningThreshold = 75,
@@ -9,8 +16,8 @@ const ProgressBar = ({
   segmentWidth = 3.43,
   mobileSegmentWidth = 5,
   segmentGap = 2,
-  height = 24,
-  mobileHeight = 8,
+  height = PROGRESS_BAR_HEIGHT.desktop,
+  mobileHeight = PROGRESS_BAR_HEIGHT.mobile,
   inverted = false
 }) => {
   const isMdUp = useContentMdUp() ?? true;
@@ -41,20 +48,33 @@ const ProgressBar = ({
       return "var(--color-success)";
     }
   };
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex w-full", style: { gap: `${segmentGap}px` }, children: Array.from({ length: segmentCount }).map((_, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "rounded",
-      style: {
-        width: `${effectiveSegmentWidth}px`,
-        height: `${effectiveHeight}px`,
-        backgroundColor: i < Math.round(progress / 100 * segmentCount) ? getColor() : "var(--color-bg-surface-active)"
-        // unfilled segments
-      }
-    },
-    i
-  )) });
+      ref: containerRef,
+      className: cn(
+        "flex w-full",
+        height === PROGRESS_BAR_HEIGHT.desktop && mobileHeight === PROGRESS_BAR_HEIGHT.mobile && PROGRESS_BAR_HEIGHT_CLASS
+      ),
+      style: { gap: `${segmentGap}px` },
+      children: Array.from({ length: segmentCount }).map((_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "rounded",
+          style: {
+            width: `${effectiveSegmentWidth}px`,
+            height: `${effectiveHeight}px`,
+            backgroundColor: i < Math.round(progress / 100 * segmentCount) ? getColor() : "var(--color-bg-surface-active)"
+            // unfilled segments
+          }
+        },
+        i
+      ))
+    }
+  );
 };
 export {
-  ProgressBar
+  PROGRESS_BAR_HEIGHT,
+  ProgressBar,
+  ProgressBarSkeleton
 };

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

@@ -1,6 +1,21 @@
 import * as ProgressPrimitive from '@radix-ui/react-progress';
+/**
+ * `default`: the original bar. `step`: a thin ODS bar (border-coloured track, accent fill)
+ * for a step line ("Step 1 of 2").
+ */
+declare const PROGRESS_VARIANT: {
+    readonly default: {
+        readonly root: "h-2 bg-secondary";
+        readonly indicator: "bg-primary";
+    };
+    readonly step: {
+        readonly root: "h-1 bg-ods-border";
+        readonly indicator: "bg-ods-accent";
+    };
+};
 declare const Progress: import("react").ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     indicatorClassName?: string;
+    variant?: keyof typeof PROGRESS_VARIANT;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export { Progress };
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAK9D,QAAA,MAAM,QAAQ;yBAGW,MAAM;kDAa7B,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAK9D;;;GAGG;AACH,QAAA,MAAM,gBAAgB;;;;;;;;;CAGZ,CAAC;AAEX,QAAA,MAAM,QAAQ;yBAGW,MAAM;cACjB,MAAM,OAAO,gBAAgB;kDAczC,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC"}