@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

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

@@ -2,41 +2,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
+import { Button } from "./button/index.js";
+import { FieldValueSkeleton } from "./field-value-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 const InputTrigger = forwardRef(
   ({ selectedLabel, placeholder, startIcon, endIcon, invalid, className, disabled, ...props }, ref) => {
     const isPlaceholder = selectedLabel === void 0 || selectedLabel === null || selectedLabel === "";
+    const inScope = useLoadingScope();
     return /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
+        variant: "field",
         ref,
         type: "button",
         disabled,
+        "aria-busy": inScope || void 0,
         "data-invalid": invalid || void 0,
         ...props,
-        className: cn(
-          "flex h-11 w-full items-center gap-2 rounded-[6px] border px-3 outline-none md:h-12",
-          "text-h4",
-          "border-ods-border bg-ods-card text-ods-text-primary",
-          "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
-          !invalid && "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
-          invalid && "border-ods-error enabled:hover:border-ods-error data-[state=open]:border-ods-error",
-          // Disabled - match Input / SelectTrigger: grey the TEXT, don't fade the
-          // whole control (a blanket opacity also washes out the border and the
-          // adornment icons, which no other field does). The child rule catches
-          // the label span, which sets its own placeholder colour. Scoped to
-          // DIRECT children: `selectedLabel` is a ReactNode the caller owns, so
-          // anything inside it that sets its own colour keeps it.
-          "disabled:cursor-not-allowed disabled:bg-ods-bg",
-          "disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
-          "transition-colors duration-200",
-          className
-        ),
+        className,
         children: [
           startIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-ods-text-secondary", children: startIcon }),
-          /* @__PURE__ */ jsx(
+          inScope ? /* @__PURE__ */ jsx(FieldValueSkeleton, {}) : /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn("min-w-0 flex-1 truncate text-left", isPlaceholder && "text-ods-text-secondary"),
+              className: cn(
+                "min-w-0 flex-1 truncate text-left",
+                disabled ? "text-ods-text-disabled" : isPlaceholder && "text-ods-text-secondary"
+              ),
               title: isPlaceholder ? placeholder : typeof selectedLabel === "string" ? selectedLabel : void 0,
               children: isPlaceholder ? placeholder : selectedLabel
             }

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

@@ -15,8 +15,14 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey).
         Only "error" and "warning" mark the field invalid (colored border). */
     errorVariant?: 'error' | 'warning' | 'success' | 'muted';
-    /** When true, shows a loading spinner as end adornment */
+    /** An action on the field is in progress (e.g. a check of what was typed): a spinner as the end adornment. Not a
+     *  loading state: the field's own loading state is a loading scope's (the label and adornments drawn for real, the
+     *  value a bar in the field's box). */
+    pending?: boolean;
+    /** @deprecated Use `pending`: this is an action's spinner, not the field's loading state (a loading scope). */
     loading?: boolean;
+    /** The value is typed by the person (a search or filter box), never read: drawn as is in a loading scope. */
+    userValue?: boolean;
 }
 declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAK7E,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,wDAAwD;IACxD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;8EAC0E;IAC1E,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAOD,QAAA,MAAM,KAAK,yGA2IT,CAAC;AAGH,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAQ7E,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,wDAAwD;IACxD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;8EAC0E;IAC1E,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD;;2CAEuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6GAA6G;IAC7G,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAOD,QAAA,MAAM,KAAK,yGAoJT,CAAC;AAGH,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/input.js

@@ -3,8 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
+import { FieldValueSkeleton } from "./field-value-skeleton.js";
 import { FieldWrapper } from "./field-wrapper.js";
 import { INPUT_HEIGHT_CLASS, INPUT_RADIUS_CLASS } from "./input-styles.js";
+import { Label } from "./label.js";
+import { useLoadingScope } from "./loading-scope.js";
 const invalidBorderClasses = {
   error: "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
   warning: "!border-ods-warning hover:!border-ods-warning has-[:focus]:!border-ods-warning"
@@ -20,12 +23,16 @@ const Input = forwardRef((allProps, ref) => {
     labelVariant,
     error,
     errorVariant = "error",
-    loading = false,
+    pending: pendingProp = false,
+    loading: deprecatedLoading = false,
+    userValue = false,
     ...props
   } = allProps;
+  const pending = pendingProp || deprecatedLoading;
   const errorSlot = "error" in allProps;
   const variantIsInvalid = errorVariant === "error" || errorVariant === "warning";
   const isInvalid = invalid || !!error && variantIsInvalid;
+  const inScope = useLoadingScope() && !userValue;
   if (type === "range") {
     const rangeInput = /* @__PURE__ */ jsx(
       "input",
@@ -65,8 +72,9 @@ const Input = forwardRef((allProps, ref) => {
     ) : rangeInput;
   }
   const content = /* @__PURE__ */ jsxs(
-    "label",
+    Label,
     {
+      variant: "surface",
       "data-invalid": isInvalid || void 0,
       className: cn(
         // Layout & spacing
@@ -97,10 +105,12 @@ const Input = forwardRef((allProps, ref) => {
       ),
       children: [
         startAdornment && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment }),
+        inScope && /* @__PURE__ */ jsx(FieldValueSkeleton, {}),
         /* @__PURE__ */ jsx(
           "input",
           {
             type,
+            hidden: inScope || props.hidden,
             className: cn(
               // Layout
               "min-w-0 flex-1 border-none bg-transparent outline-none",
@@ -121,8 +131,8 @@ const Input = forwardRef((allProps, ref) => {
             ...props
           }
         ),
-        loading && /* @__PURE__ */ jsx(Loader2, { className: "size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" }),
-        !loading && endAdornment && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
+        pending && /* @__PURE__ */ jsx(Loader2, { className: "size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" }),
+        !pending && endAdornment && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
       ]
     }
   );

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

@@ -1,8 +1,8 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { type VariantProps } from 'class-variance-authority';
 declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "small" | "default" | "medium" | "large" | null | undefined;
-    spacing?: "none" | "tight" | "normal" | "loose" | null | undefined;
+    variant?: "small" | "default" | "medium" | "large" | "surface" | null | undefined;
+    spacing?: "none" | "normal" | "loose" | "tight" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLLabelElement>>;
 export { Label };
 //# sourceMappingURL=label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA8ClE,QAAA,MAAM,KAAK;;;kIAKT,CAAC;AAGH,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmDlE,QAAA,MAAM,KAAK;;;kIAKT,CAAC;AAGH,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/label.js

@@ -4,15 +4,18 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
-const labelVariants = cva("block text-ods-text-primary text-h6", {
+const LABEL_TEXT_CLASS = "block text-ods-text-primary text-h6";
+const labelVariants = cva("", {
   variants: {
     variant: {
-      default: "",
+      default: LABEL_TEXT_CLASS,
       /** @deprecated alias of `default` — the three small scales converged on text-h6. */
-      small: "",
+      small: LABEL_TEXT_CLASS,
       /** @deprecated alias of `default`. */
-      medium: "",
-      large: "text-h4"
+      medium: LABEL_TEXT_CLASS,
+      large: cn(LABEL_TEXT_CLASS, "text-h4"),
+      /** A click surface that labels its control: no typography, the site's `className` is its look. */
+      surface: ""
     },
     spacing: {
       none: "",

package/dist/components/ui/leader-row.d.ts

@@ -6,19 +6,23 @@ export interface LeaderRowProps {
     status?: ReactNode;
     /** The row's element. Default `div`; `li` inside a list. */
     as?: 'div' | 'li';
+    /** The label's tone: `secondary` (default, the quiet label) or `primary` (a label that reads as body copy, as a
+     *  billing summary's rows). */
+    labelTone?: LeaderRowLabelTone;
+    /** The label may shrink to at most half the row and clips with an ellipsis (a long read key, such as a script
+     *  parameter's name). Default: the label keeps its whole width and the value clips. Same in both forms. */
+    labelShrink?: boolean;
+    /** The value's tone: `primary` (default), `secondary` (a value that is not in effect), `warning`, `success` (a check
+     *  that passed: "Enabled") or `error` (one that failed: "Disabled"). */
+    valueTone?: LeaderRowValueTone;
+    /** The value is still being read: the row keeps its structure, the label real (a bar when empty), the value and the
+     *  status bars. A loading scope does the same for a row whose value is empty. */
+    loading?: boolean;
     className?: string;
+    /** Markers for the page's height gate (`data-loading-item` on a row of a read list): forwarded in both forms. */
+    [marker: `data-${string}`]: unknown;
 }
-export declare function LeaderRow({ label, value, status, as: Row, className }: LeaderRowProps): import("react").JSX.Element;
-/**
- * A row while it is read: the label (drawn as it is when the page states it, else a bar), the hairline drawn for
- * real, a bar for the value, a status box. Every bar is one line of the ROW's type step, so a row sized with
- * `className="text-h6"` keeps its height.
- */
-export declare function LeaderRowSkeleton({ status, label, as: Row, className, }: {
-    status?: boolean;
-    /** The row's label, when the page states it. */
-    label?: ReactNode;
-    as?: 'div' | 'li';
-    className?: string;
-}): import("react").JSX.Element;
+export type LeaderRowLabelTone = 'secondary' | 'primary';
+export type LeaderRowValueTone = 'primary' | 'secondary' | 'warning' | 'success' | 'error';
+export declare function LeaderRow(props: LeaderRowProps): import("react").JSX.Element;
 //# sourceMappingURL=leader-row.d.ts.map

package/dist/components/ui/leader-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leader-row.d.ts","sourceRoot":"","sources":["../../../src/components/ui/leader-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,GAAW,EAAE,SAAS,EAAE,EAAE,cAAc,+BAgB7F;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAc,EACd,KAAK,EACL,EAAE,EAAE,GAAW,EACf,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAiBA"}
+{"version":3,"file":"leader-row.d.ts","sourceRoot":"","sources":["../../../src/components/ui/leader-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB;mCAC+B;IAC/B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;+GAC2G;IAC3G,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;4EACwE;IACxE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;qFACiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iHAAiH;IACjH,CAAC,MAAM,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AA6B3F,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAoC9C"}

package/dist/components/ui/leader-row.js

@@ -2,37 +2,46 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
-import { useLoadingScope } from "./loading-scope.js";
+import { loadingItemProps, useLoadingScope } from "./loading-scope.js";
 const LEADER_ROW_CLASS = "flex min-w-0 items-center gap-[var(--spacing-system-xsf)] text-h4";
-const LEADER_LABEL_CLASS = "shrink-0 whitespace-nowrap text-ods-text-secondary";
+const LEADER_LABEL_CLASS = "shrink-0 whitespace-nowrap";
+const LEADER_LABEL_SHRINK_CLASS = "min-w-0 max-w-[50%] truncate whitespace-nowrap";
+const LABEL_TONE_CLASS = {
+  secondary: "text-ods-text-secondary",
+  primary: "text-ods-text-primary"
+};
+const VALUE_TONE_CLASS = {
+  primary: "text-ods-text-primary",
+  secondary: "text-ods-text-secondary",
+  warning: "text-ods-warning",
+  success: "text-ods-success",
+  error: "text-ods-error"
+};
 const LEADER_LINE_CLASS = "h-px min-w-4 flex-1 bg-ods-border";
 const STATUS_BOX_CLASS = "flex shrink-0 items-center";
 const isGiven = (node) => node !== null && node !== void 0 && node !== false && node !== "";
-function LeaderRow({ label, value, status, as: Row = "div", className }) {
-  if (useLoadingScope() && !isGiven(value)) {
-    return /* @__PURE__ */ jsx(LeaderRowSkeleton, { status: !!status, label: isGiven(label) ? label : void 0, as: Row, className });
-  }
-  return /* @__PURE__ */ jsxs(Row, { className: cn(LEADER_ROW_CLASS, className), children: [
-    /* @__PURE__ */ jsx("span", { className: LEADER_LABEL_CLASS, children: label }),
+function LeaderRow(props) {
+  const {
+    label,
+    value,
+    status,
+    as: Row = "div",
+    labelTone = "secondary",
+    labelShrink = false,
+    valueTone = "primary",
+    loading = false,
+    className
+  } = props;
+  const labelClass = labelShrink ? LEADER_LABEL_SHRINK_CLASS : LEADER_LABEL_CLASS;
+  const inScope = useLoadingScope();
+  const isLoading = loading || inScope && !isGiven(value);
+  return /* @__PURE__ */ jsxs(Row, { className: cn(LEADER_ROW_CLASS, className), "aria-hidden": isLoading || void 0, ...loadingItemProps(props), children: [
+    isLoading && !isGiven(label) ? /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: cn("inline-block w-24", labelClass) }) : /* @__PURE__ */ jsx("span", { className: cn(labelClass, LABEL_TONE_CLASS[labelTone]), children: label }),
     /* @__PURE__ */ jsx("span", { className: LEADER_LINE_CLASS, "aria-hidden": true }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-ods-text-primary", children: value }),
-    status && /* @__PURE__ */ jsx("span", { className: STATUS_BOX_CLASS, children: status })
-  ] });
-}
-function LeaderRowSkeleton({
-  status = false,
-  label,
-  as: Row = "div",
-  className
-}) {
-  return /* @__PURE__ */ jsxs(Row, { className: cn(LEADER_ROW_CLASS, className), "aria-hidden": true, children: [
-    label !== void 0 ? /* @__PURE__ */ jsx("span", { className: LEADER_LABEL_CLASS, children: label }) : /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "inline-block w-24 shrink-0" }),
-    /* @__PURE__ */ jsx("span", { className: LEADER_LINE_CLASS }),
-    /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "inline-block w-16 shrink-0" }),
-    status && /* @__PURE__ */ jsx("span", { className: STATUS_BOX_CLASS, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4" }) })
+    isLoading ? /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: "inline-block w-16 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", VALUE_TONE_CLASS[valueTone]), children: value }),
+    status && /* @__PURE__ */ jsx("span", { className: STATUS_BOX_CLASS, children: isLoading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4" }) : status })
   ] });
 }
 export {
-  LeaderRow,
-  LeaderRowSkeleton
+  LeaderRow
 };

package/dist/components/ui/loading-scope.d.ts

@@ -9,18 +9,97 @@
  * and the same skeleton shows while it fetches on the client. Nothing in a scope fetches, writes, or draws invented
  * words.
  */
-import { type ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 /** Draws its children as their own loading state. Inert and hidden from assistive technology: the page's loading
  *  region announces it once. `bare` draws no element of its own (the scope only): for a component's own `loading`
  *  mode, whose markup must not change and whose container already says it is loading. `active` (default true) turns
  *  the scope on and off without changing the tree, so a component that finishes loading is not remounted; a false
- *  never cancels an outer scope. */
-export declare function LoadingScope({ children, className, bare, active, }: {
+ *  never cancels an outer scope. `as` is the element (default `div`; a `contents` box keeps a flex parent's
+ *  layout). The scope that starts a loading state (no outer one) is also busy (`aria-busy`). */
+export declare function LoadingScope({ children, className, bare, active, as: Tag, }: {
     children: ReactNode;
     className?: string;
     bare?: boolean;
     active?: boolean;
+    as?: ElementType;
 }): import("react").JSX.Element;
 /** Whether the component draws as its own loading state (its `<Name>Skeleton`). */
 export declare function useLoadingScope(): boolean;
+/**
+ * A component whose data a client read has not answered yet, drawn by the component itself: its children in a bare
+ * loading scope (no element of its own, so the markup does not change), where each draws its own skeleton, else as
+ * they are. The scope is always rendered and only switched (`active`), so the children are never remounted when the
+ * read answers, and an outer loading scope still holds. The parent renders the component either way and never picks
+ * its `<Name>Skeleton` (one switch per component):
+ *
+ *   <LoadingWhen loading={!health}><StatusBadge text={label} variant="button" /></LoadingWhen>
+ */
+export declare function LoadingWhen({ loading, label, as, className, children, }: {
+    loading: boolean;
+    /**
+     * The read is announced: with a label the component draws ONE region element (`as`, `className`), always mounted,
+     * and a polite status reads the label while `loading` (silent inside an outer scope, which has said it), the same
+     * region `LoadingFallback` draws. Without one it stays bare: no element of its own.
+     */
+    label?: string;
+    /** The region's element when `label` is given (a `contents` box keeps a flex parent's layout). */
+    as?: ElementType;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * THE announced loading region: a `LoadingScope` element (busy, inert, hidden from assistive technology while on)
+ * with the one polite status beside it, outside the hidden region so it is still read, left out inside an outer scope
+ * and while the scope is off. `LoadingFallback` (always on) and a labelled `LoadingWhen` (switched by its read) draw
+ * it. `status={false}`: no announcement (an inline part).
+ */
+export declare function AnnouncedLoadingScope({ label, status, active, as, className, children, }: {
+    label: string;
+    status?: boolean;
+    active?: boolean;
+    as?: ElementType;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A static control (a button, a menu trigger, a toggle: copy the component owns, never read data) drawn for real while
+ * its subject is read: wrapped inert and hidden from assistive technology, so it cannot act on data that is not there
+ * yet. THE one wrapper for it. The wrapper is always rendered and only switched (`loading`), so the control is never
+ * remounted when the read answers. `className` is the wrapper's box (default `inline-flex shrink-0`, the size of the
+ * control; `contents` keeps a flex parent's layout).
+ *
+ *   <InertWhileLoading loading={loading}><Button onClick={onOpen}>Open</Button></InertWhileLoading>
+ */
+export declare function InertWhileLoading({ loading, className, children, }: {
+    loading?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The handler a control drawn inert while its subject is read is given: it is never called (the control is inert).
+ *  THE one such handler, so a loading form never declares its own no-op. */
+export declare const LOADING_NOOP: () => void;
+/** The one polite status a loading state is read as (visually hidden): the region's, and a fallback's beside its hidden content. */
+export declare function LoadingStatus({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+/**
+ * The `data-*` attributes among a component's props, for its skeleton: a list item's skeleton carries the same
+ * markers the loaded item carries (`data-loading-item` first), so the page's height gate counts both forms alike.
+ * THE one way a component hands its markers to its own skeleton (`<RowSkeleton {...loadingItemProps(props)} />`).
+ */
+export declare function loadingItemProps(props: object): {
+    [key: `data-${string}`]: unknown;
+};
+/**
+ * A list's items while the list is read: `count` of them, each drawn by `children(index)` (keyed here, so the caller
+ * writes no key). THE one way a skeleton draws N items: the count is the list's own page size, limit or declared
+ * typical constant, never a literal typed here, and each item carries the list's markers (`data-loading-item`, through
+ * `loadingItemProps`), like the loaded item.
+ *
+ *   <LoadingItems count={pageSize}>{() => <RowSkeleton data-loading-item />}</LoadingItems>
+ */
+export declare function LoadingItems({ count, children }: {
+    count: number;
+    children: (index: number) => ReactNode;
+}): import("react").JSX.Element;
 //# sourceMappingURL=loading-scope.d.ts.map

package/dist/components/ui/loading-scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-scope.d.ts","sourceRoot":"","sources":["../../../src/components/ui/loading-scope.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE;;;;oCAIoC;AACpC,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAeA;AAED,mFAAmF;AACnF,wBAAgB,eAAe,IAAI,OAAO,CAEzC"}
+{"version":3,"file":"loading-scope.d.ts","sourceRoot":"","sources":["../../../src/components/ui/loading-scope.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9F;;;;;gGAKgG;AAChG,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,MAAM,EACN,EAAE,EAAE,GAAW,GAChB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,+BAgBA;AAED,mFAAmF;AACnF,wBAAgB,eAAe,IAAI,OAAO,CAEzC;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,EAAE,EACF,SAAS,EACT,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAaA;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,MAAa,EACb,MAAa,EACb,EAAE,EACF,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAWA;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAc,EACd,SAAkC,EAClC,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED;4EAC4E;AAC5E,eAAO,MAAM,YAAY,QAAO,IAAiB,CAAC;AAElD,oIAAoI;AACpI,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAMzD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,CAEpF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CAAE,+BAQ1G"}

package/dist/components/ui/loading-scope.js

@@ -1,20 +1,22 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, Fragment as Fragment2, useContext } from "react";
 import { cn } from "../../utils/cn.js";
 const LoadingScopeContext = createContext(false);
 function LoadingScope({
   children,
   className,
   bare = false,
-  active
+  active,
+  as: Tag = "div"
 }) {
   const outer = useContext(LoadingScopeContext);
   const on = outer || (active ?? true);
   if (bare) return /* @__PURE__ */ jsx(LoadingScopeContext.Provider, { value: on, children });
   return /* @__PURE__ */ jsx(LoadingScopeContext.Provider, { value: on, children: /* @__PURE__ */ jsx(
-    "div",
+    Tag,
     {
+      "aria-busy": on && !outer ? "true" : void 0,
       "aria-hidden": on || void 0,
       inert: on || void 0,
       className: cn(on && "pointer-events-none select-none", className),
@@ -25,7 +27,57 @@ function LoadingScope({
 function useLoadingScope() {
   return useContext(LoadingScopeContext);
 }
+function LoadingWhen({
+  loading,
+  label,
+  as,
+  className,
+  children
+}) {
+  if (label === void 0) {
+    return /* @__PURE__ */ jsx(LoadingScope, { bare: true, active: loading, children });
+  }
+  return /* @__PURE__ */ jsx(AnnouncedLoadingScope, { label, active: loading, as, className, children });
+}
+function AnnouncedLoadingScope({
+  label,
+  status = true,
+  active = true,
+  as,
+  className,
+  children
+}) {
+  const outer = useLoadingScope();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LoadingScope, { active, as, className, children }),
+    status && active && !outer && /* @__PURE__ */ jsx(LoadingStatus, { label })
+  ] });
+}
+function InertWhileLoading({
+  loading = true,
+  className = "inline-flex shrink-0",
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { inert: loading || void 0, "aria-hidden": loading || void 0, className, children });
+}
+const LOADING_NOOP = () => void 0;
+function LoadingStatus({ label }) {
+  return /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: label });
+}
+function loadingItemProps(props) {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("data-")));
+}
+function LoadingItems({ count, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Fragment2, { children: children(index) }, index)) });
+}
 export {
+  AnnouncedLoadingScope,
+  InertWhileLoading,
+  LOADING_NOOP,
+  LoadingItems,
   LoadingScope,
+  LoadingStatus,
+  LoadingWhen,
+  loadingItemProps,
   useLoadingScope
 };

package/dist/components/ui/markdown/engine.d.ts

@@ -69,6 +69,11 @@ export interface MarkdownEngineProps {
     skeletonSections?: number;
     /** Lines of the one paragraph a loading body draws when it names no sections. Default 3. */
     skeletonLines?: number;
+    /** A loading body opens with its own `# ` title (a legal document's): its title row is drawn first. */
+    skeletonTitle?: boolean;
+    /** The content is still being read: the body draws its skeleton (the `skeleton*` shape). A loading scope does the
+     *  same while `content` is empty. */
+    loading?: boolean;
 }
 /** Lines a loading body draws when its caller names no shape. */
 export declare const MARKDOWN_SKELETON_LINES = 3;

package/dist/components/ui/markdown/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/engine.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,OAAO,EAAkE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AASpH,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEzE;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAAO,CAAC;AA6ErD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,qEAAqE;IACrE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/G,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAClF,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,kGAAkG;IAClG,kBAAkB,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACzC,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,aAAa,CAAC;IACxC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iEAAiE;AACjE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAUzC,wEAAwE;AACxE,kHAAkH;AAClH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAiNlE;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,iDAezB,CAAC;AA2BH;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,KAA+B,EAC/B,QAAQ,EACR,KAAa,EACb,SAAc,GACf,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,kHAAkH;IAClH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAqCA"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/engine.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,OAAO,EAAkE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AASpH,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEzE;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAAO,CAAC;AA6ErD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,qEAAqE;IACrE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/G,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAClF,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,kGAAkG;IAClG,kBAAkB,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACzC,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,aAAa,CAAC;IACxC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uGAAuG;IACvG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;yCACqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iEAAiE;AACjE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAUzC,wEAAwE;AACxE,kHAAkH;AAClH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAiNlE;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,iDAgBzB,CAAC;AA2BH;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,KAA+B,EAC/B,QAAQ,EACR,KAAa,EACb,SAAc,GACf,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,kHAAkH;IAClH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAwCA"}

package/dist/components/ui/markdown/engine.js

@@ -8,7 +8,7 @@ import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import { cn } from "../../../utils/cn.js";
 import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
-import { useLoadingScope } from "../loading-scope.js";
+import { LoadingItems, useLoadingScope } from "../loading-scope.js";
 import { buildBaseComponents, MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from "./base-components.js";
 import { HeadingIdMapContext, HeadingLineOffsetContext, useHeadingIdMap } from "./heading-ids.js";
 import {
@@ -204,12 +204,13 @@ const MarkdownEngineImpl = ({
 };
 const MarkdownEngine = memo(function MarkdownEngineGate(props) {
   const inScope = useLoadingScope();
-  if (inScope && !props.content) {
+  if (inScope && !props.content || props.loading) {
     return /* @__PURE__ */ jsx(
       MarkdownEngineSkeleton,
       {
         sections: props.skeletonSections,
         lines: props.skeletonLines,
+        title: props.skeletonTitle,
         textSize: props.textSize,
         className: props.className
       }
@@ -241,10 +242,13 @@ function MarkdownEngineSkeleton({
     /* @__PURE__ */ jsx("div", { className: `${RENDERER_CLASS} w-full ${className}`, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: CONTENT_WRAPPER_CLASS, children: /* @__PURE__ */ jsxs("div", { className: ARTICLE_CLASS, children: [
       title && /* @__PURE__ */ jsx("h2", { className: cn(MARKDOWN_H1_CLASS, textSizes.h1), children: /* @__PURE__ */ jsx(LinesByBreakpoint, { lines: SKELETON_TITLE_LINES, as: "span" }) }),
       sections ? /* @__PURE__ */ jsx("div", { className: paragraphClass, children: /* @__PURE__ */ jsx(LinesByBreakpoint, { lines: SKELETON_LEAD_LINES }) }) : null,
-      sections ? Array.from({ length: sections }, (_, section) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: cn(MARKDOWN_H2_CLASS, textSizes.h2), children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) }),
-        SKELETON_SECTION_PARAGRAPHS.map((paragraphLines, index) => /* @__PURE__ */ jsx(ParagraphBar, { lines: paragraphLines, className: paragraphClass }, index))
-      ] }, section)) : /* @__PURE__ */ jsx(ParagraphBar, { lines, className: paragraphClass })
+      sections ? (
+        // loading-standard-ok(ITEM_MARK): a document's sections are its markdown text; the loaded body has no items to mark
+        /* @__PURE__ */ jsx(LoadingItems, { count: sections, children: () => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: cn(MARKDOWN_H2_CLASS, textSizes.h2), children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) }),
+          SKELETON_SECTION_PARAGRAPHS.map((paragraphLines, index) => /* @__PURE__ */ jsx(ParagraphBar, { lines: paragraphLines, className: paragraphClass }, index))
+        ] }) })
+      ) : /* @__PURE__ */ jsx(ParagraphBar, { lines, className: paragraphClass })
     ] }) }) })
   );
 }

package/dist/components/ui/markdown/index.d.ts

@@ -10,7 +10,7 @@ export { MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from '
 export { MarkdownEngine, MarkdownEngineSkeleton, MARKDOWN_SKELETON_LINES, type MarkdownEngineProps } from './engine';
 export { SimpleMarkdownRenderer, type SimpleMarkdownRendererProps } from './simple-markdown-renderer';
 export { type ResolveLinkResult } from '../../../types/doc-source';
-export { RichMarkdownRenderer, RichMarkdownRendererSkeleton, type RichMarkdownRendererProps, } from './rich/rich-markdown-renderer';
+export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich/rich-markdown-renderer';
 export { processShortcodes } from './rich/shortcodes';
 export { SAFE_HTML_TAGS, SVG_TAGS, buildEffectiveTagSet, buildSanitizeSchema, cardAwareUrlTransform, escapeUnknownHtmlTags, rehypeStripUnsafe, } from './sanitize';
 export { TEXT_SIZE_PRESETS, resolveTextSizeConfig, type TextSizeConfig, type TextSizeClassMap, type TextSizeElement, type TextSizePreset, } from './text-size';

package/dist/components/ui/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACrH,OAAO,EAAE,sBAAsB,EAAE,KAAK,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACtG,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAKxH,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACrH,OAAO,EAAE,sBAAsB,EAAE,KAAK,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACtG,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAKxH,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/ui/markdown/index.js

@@ -1,10 +1,7 @@
 import { MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from "./base-components.js";
 import { MarkdownEngine, MarkdownEngineSkeleton, MARKDOWN_SKELETON_LINES } from "./engine.js";
 import { SimpleMarkdownRenderer } from "./simple-markdown-renderer.js";
-import {
-  RichMarkdownRenderer,
-  RichMarkdownRendererSkeleton
-} from "./rich/rich-markdown-renderer.js";
+import { RichMarkdownRenderer } from "./rich/rich-markdown-renderer.js";
 import { processShortcodes } from "./rich/shortcodes.js";
 import {
   SAFE_HTML_TAGS,
@@ -31,7 +28,6 @@ export {
   MarkdownEngineSkeleton,
   MermaidDiagram,
   RichMarkdownRenderer,
-  RichMarkdownRendererSkeleton,
   SAFE_HTML_TAGS,
   SVG_TAGS,
   SimpleMarkdownRenderer,

package/dist/components/ui/markdown/rich/rich-markdown-renderer.d.ts

@@ -36,15 +36,5 @@ export interface RichMarkdownRendererProps extends Partial<RichMarkdownRuntime>,
 }
 /** Memoized — see the engine's memo rationale. */
 export declare const RichMarkdownRenderer: React.NamedExoticComponent<RichMarkdownRendererProps>;
-/**
- * A RichMarkdownRenderer while its content is read: the engine's skeleton at the `article` type, `sections`
- * sections of a real `<h2>` holding a bar and its paragraphs (the renderer's own heading and paragraph classes).
- */
-export declare function RichMarkdownRendererSkeleton({ sections, title, className, }: {
-    sections?: number;
-    /** The body opens with its own `# ` title (`MarkdownEngineSkeleton`'s `title`). */
-    title?: boolean;
-    className?: string;
-}): React.JSX.Element;
 export {};
 //# sourceMappingURL=rich-markdown-renderer.d.ts.map