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

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

@@ -1,14 +1,38 @@
 "use client";
 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";
+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_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 }) {
-  return /* @__PURE__ */ jsxs(Row, { className: cn("flex min-w-0 items-center gap-[var(--spacing-system-xsf)] text-h4", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap text-ods-text-secondary", children: label }),
-    /* @__PURE__ */ jsx("span", { className: "h-px min-w-4 flex-1 bg-ods-border", "aria-hidden": true }),
+  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 }),
+    /* @__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: "flex shrink-0 items-center", children: status })
+    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" }) })
   ] });
 }
 export {
-  LeaderRow
+  LeaderRow,
+  LeaderRowSkeleton
 };

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

@@ -0,0 +1,26 @@
+/**
+ * A page's loading state, drawn by its own components. THE RULE: every component that shows read data has its own
+ * `<Name>Skeleton` (the same layout, sharing the component's class constants, its static copy drawn for real and
+ * every read part a skeleton shape), and decides in ONE place when it is loading:
+ *
+ *   if (useLoadingScope() || <its own data is not here yet>) return <NameSkeleton … />;
+ *
+ * Inside `LoadingScope` (which a page wraps around its loading state) every component is therefore its skeleton,
+ * 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';
+/** 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, }: {
+    children: ReactNode;
+    className?: string;
+    bare?: boolean;
+    active?: boolean;
+}): import("react").JSX.Element;
+/** Whether the component draws as its own loading state (its `<Name>Skeleton`). */
+export declare function useLoadingScope(): boolean;
+//# sourceMappingURL=loading-scope.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cn } from "../../utils/cn.js";
+const LoadingScopeContext = createContext(false);
+function LoadingScope({
+  children,
+  className,
+  bare = false,
+  active
+}) {
+  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",
+    {
+      "aria-hidden": on || void 0,
+      inert: on || void 0,
+      className: cn(on && "pointer-events-none select-none", className),
+      children
+    }
+  ) });
+}
+function useLoadingScope() {
+  return useContext(LoadingScopeContext);
+}
+export {
+  LoadingScope,
+  useLoadingScope
+};

package/dist/components/ui/markdown/base-components.d.ts

@@ -25,6 +25,31 @@ export interface StandardLeafRenderers {
     blockquote: (props: MdRenderProps<'blockquote'>) => React.ReactElement;
     div: (props: MdRenderProps<'div'>) => React.ReactElement;
 }
+/**
+ * True when an image `src` is worth rendering. Shared by the base `img` and
+ * the rich composition's `img` / `video` overrides so the empty-`![]()`
+ * guard has exactly one definition.
+ */
+/**
+ * Inline content image (blog / docs / chat attachments). A standalone
+ * component — NOT inline JSX in the `img` renderer — because it must call
+ * `useAuthedImageSrc`: in bearer-mode native shells (`capacitor://`,
+ * `tauri://`) a gateway-hosted image can't load through a plain `<img>` (no
+ * Authorization header on native asset loads), so the hook swaps in an authed
+ * blob URL; everywhere else it returns `src` untouched. While the blob fetch
+ * is in flight `resolvedSrc` is null and the component renders nothing — same
+ * as the no-src case. Ported from #1548 into the unified engine (the original
+ * lived in the now-deleted `ui/simple-markdown-renderer.tsx`). Sizing matches
+ * the engine's cap: 400x400 intrinsic, `w-auto h-auto max-h-[400px]` drives
+ * the actual rendered box; click-to-expand surfaces provide full resolution.
+ */
+/**
+ * The page title, a section heading and a paragraph of rendered markdown (before the text size): read by the
+ * renderer and by every skeleton that stands in for a markdown body.
+ */
+export declare const MARKDOWN_H1_CLASS = "mb-4 mt-8 font-sans font-bold text-ods-text-primary first:mt-0";
+export declare const MARKDOWN_H2_CLASS = "mb-4 mt-8 border-b border-ods-border pb-2 font-sans font-semibold text-ods-text-primary";
+export declare const MARKDOWN_PARAGRAPH_CLASS = "mb-4 leading-relaxed text-ods-text-primary first:mt-0 last:mb-0";
 export declare function hasRenderableSrc(src: unknown): src is string;
 export interface BuildBaseComponentsOptions {
     textSizes: Record<TextSizeElement, string>;

package/dist/components/ui/markdown/base-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/base-components.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAU7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAOnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,CAAC,GAAG,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,IAAI,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAC5G,UAAU,CAAC;AAEb;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC3D,UAAU,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC1D;AAoCD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,MAAM,CAE5D;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC3C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACnF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,GACV,EAAE;IACD,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;CAC5C,GAAG,qBAAqB,CA4DxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,WAAW,EAAE,eAAe,EAC5B,mBAAmB,EACnB,aAAa,GACd,EAAE,0BAA0B,GAAG,UAAU,CAyOzC"}
+{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/base-components.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAU7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAQnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,CAAC,GAAG,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,IAAI,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAC5G,UAAU,CAAC;AAEb;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC3D,UAAU,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC1D;AAED;;;;GAIG;AACH;;;;;;;;;;;;GAYG;AACH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mEAAmE,CAAC;AAClG,eAAO,MAAM,iBAAiB,4FAC6D,CAAC;AAC5F,eAAO,MAAM,wBAAwB,oEAAoE,CAAC;AAsB1G,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,MAAM,CAE5D;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC3C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACnF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,GACV,EAAE;IACD,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;CAC5C,GAAG,qBAAqB,CA4DxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,WAAW,EAAE,eAAe,EAC5B,mBAAmB,EACnB,aAAa,GACd,EAAE,0BAA0B,GAAG,UAAU,CAoOzC"}

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

@@ -7,10 +7,16 @@ import { cn } from "../../../utils/cn.js";
 import { slugifyHeadingText } from "../../../utils/markdown-heading-id.js";
 import { renderedLinkRel } from "../../../utils/markdown-link.js";
 import { getHashTargetElement, navigateSamePageHash, HUB_HEADER_OFFSET_PX } from "../../../utils/same-page-hash-nav.js";
+import { useLoadingScope } from "../loading-scope.js";
 import { extractText, resolveFallbackHeadingId, useAssignedHeadingIds, useHeadingId } from "./heading-ids.js";
 import { MermaidDiagram } from "./mermaid-diagram.js";
+const MARKDOWN_H1_CLASS = "mb-4 mt-8 font-sans font-bold text-ods-text-primary first:mt-0";
+const MARKDOWN_H2_CLASS = "mb-4 mt-8 border-b border-ods-border pb-2 font-sans font-semibold text-ods-text-primary";
+const MARKDOWN_PARAGRAPH_CLASS = "mb-4 leading-relaxed text-ods-text-primary first:mt-0 last:mb-0";
 const MarkdownContentImage = ({ src, alt }) => {
-  const resolvedSrc = useAuthedImageSrc(src);
+  const inScope = useLoadingScope();
+  const authedSrc = useAuthedImageSrc(inScope ? void 0 : src);
+  const resolvedSrc = inScope ? src : authedSrc;
   if (!resolvedSrc) return null;
   return /* @__PURE__ */ jsx(
     Image,
@@ -94,17 +100,14 @@ function buildBaseComponents({
     // --- code + blockquote + div (shared leaf renderers, see above) ---
     ...buildStandardLeafRenderers({ textSizes }),
     // --- headings ---
-    h1: makeHeading("h1", cn("mb-4 mt-8 font-sans font-bold text-ods-text-primary first:mt-0", textSizes.h1)),
-    h2: makeHeading(
-      "h2",
-      cn("mb-4 mt-8 border-b border-ods-border pb-2 font-sans font-semibold text-ods-text-primary", textSizes.h2)
-    ),
+    h1: makeHeading("h1", cn(MARKDOWN_H1_CLASS, textSizes.h1)),
+    h2: makeHeading("h2", cn(MARKDOWN_H2_CLASS, textSizes.h2)),
     h3: makeHeading("h3", cn("mb-3 mt-6 font-sans font-semibold text-ods-text-primary", textSizes.h3)),
     h4: makeHeading("h4", cn("mb-2 mt-4 font-sans font-semibold text-ods-text-primary", textSizes.h4)),
     h5: makeHeading("h5", cn("mb-2 mt-3 font-sans font-semibold text-ods-text-primary", textSizes.h5)),
     h6: makeHeading("h6", cn("mb-1 mt-3 font-sans font-semibold text-ods-text-primary", textSizes.h6)),
     // --- paragraph ---
-    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: cn("mb-4 leading-relaxed text-ods-text-primary first:mt-0 last:mb-0", textSizes.p), children }),
+    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: cn(MARKDOWN_PARAGRAPH_CLASS, textSizes.p), children }),
     // --- links ---
     a: ({ href, children, className: linkClassName, rel: authoredRel }) => {
       const isBroken = href !== void 0 && brokenLinks.includes(href);
@@ -244,6 +247,9 @@ function buildBaseComponents({
   };
 }
 export {
+  MARKDOWN_H1_CLASS,
+  MARKDOWN_H2_CLASS,
+  MARKDOWN_PARAGRAPH_CLASS,
   buildBaseComponents,
   buildStandardLeafRenderers,
   hasRenderableSrc

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

@@ -4,7 +4,6 @@ import type { PluggableList } from 'unified';
 import type { ResolveLinkResult } from '../../../types/doc-source';
 import { type HeadingSection } from './heading-ids';
 import { type TextSizeConfig } from './text-size';
-export type { ResolveLinkResult };
 /**
  * Module-scope empty default for `brokenLinks`.
  *
@@ -63,7 +62,19 @@ export interface MarkdownEngineProps {
      * streaming can never permanently diverge from the settled output.
      */
     streaming?: boolean;
+    /**
+     * The shape drawn while the content is read (a page's loading state, where `content` is empty): this many
+     * sections, each a heading and its paragraphs. Unset, one paragraph of `skeletonLines` lines.
+     */
+    skeletonSections?: number;
+    /** Lines of the one paragraph a loading body draws when it names no sections. Default 3. */
+    skeletonLines?: number;
 }
+/** Lines a loading body draws when its caller names no shape. */
+export declare const MARKDOWN_SKELETON_LINES = 3;
+/** The renderer's own frame: read by the engine and by its skeleton. */
+/** The renderer's root class, on the rendered document and on every skeleton of one: it names a markdown body. */
+export declare const MARKDOWN_RENDERER_CLASS = "simple-markdown-renderer";
 /**
  * Memoized so a parent re-render with UNCHANGED props (same `content`
  * string, same memoized `componentOverrides`/plugins) does NOT re-parse the
@@ -75,4 +86,18 @@ export interface MarkdownEngineProps {
  * atomic blocks so the in-flight message re-parses only its live tail.
  */
 export declare const MarkdownEngine: React.NamedExoticComponent<MarkdownEngineProps>;
+/**
+ * A markdown body while it is read: the renderer's own frame and type. With `sections`, the body's opening paragraph
+ * (a typical length per breakpoint), then each section a REAL `<h2>` (the renderer's heading classes) holding a bar,
+ * then its paragraphs; without, one paragraph of `lines` lines. Every bar takes the line height of the element it
+ * stands for, at the body's text size.
+ */
+export declare function MarkdownEngineSkeleton({ sections, lines, textSize, title, className, }: {
+    sections?: number;
+    lines?: number;
+    textSize?: TextSizeConfig;
+    /** The body opens with its own `# ` title (a legal document's, demoted to an `h2`): its H1 row is drawn first. */
+    title?: boolean;
+    className?: string;
+}): React.JSX.Element;
 //# sourceMappingURL=engine.d.ts.map

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;AAEnE,OAAO,EAAkE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AASpH,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEzE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC;;;;;;;;;;;;;;;;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;CACrB;AAyMD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,iDAA2B,CAAC"}
+{"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;AA4MlE;;;;;;;;;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"}

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

@@ -1,12 +1,15 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useSyncExternalStore } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
-import { buildBaseComponents } from "./base-components.js";
+import { cn } from "../../../utils/cn.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
+import { 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 {
   buildEffectiveTagSet,
@@ -67,6 +70,14 @@ function rehypeLabelBareFences() {
   };
   return (tree) => visit(tree);
 }
+const MARKDOWN_SKELETON_LINES = 3;
+const SKELETON_SECTION_PARAGRAPHS = [3, 2];
+const SKELETON_TITLE_LINES = { phone: 2, wide: 1 };
+const SKELETON_LEAD_LINES = { phone: 5, wide: 3 };
+const MARKDOWN_RENDERER_CLASS = "simple-markdown-renderer";
+const RENDERER_CLASS = MARKDOWN_RENDERER_CLASS;
+const CONTENT_WRAPPER_CLASS = "content-wrapper max-w-none";
+const ARTICLE_CLASS = "prose prose-lg max-w-none";
 const StreamingBlockRenderer = memo(function StreamingBlockRendererImpl({
   text,
   remarkPlugins,
@@ -189,10 +200,58 @@ const MarkdownEngineImpl = ({
       children: processedContent
     }
   );
-  return /* @__PURE__ */ jsx("div", { className: `simple-markdown-renderer ${className}`, children: /* @__PURE__ */ jsx("div", { className: "content-wrapper max-w-none", children: /* @__PURE__ */ jsx("article", { className: "prose prose-lg max-w-none", children: /* @__PURE__ */ jsx(HeadingIdMapContext.Provider, { value: headingIds, children: body }) }) }) });
+  return /* @__PURE__ */ jsx("div", { className: `${RENDERER_CLASS} ${className}`, children: /* @__PURE__ */ jsx("div", { className: CONTENT_WRAPPER_CLASS, children: /* @__PURE__ */ jsx("article", { className: ARTICLE_CLASS, children: /* @__PURE__ */ jsx(HeadingIdMapContext.Provider, { value: headingIds, children: body }) }) }) });
 };
-const MarkdownEngine = memo(MarkdownEngineImpl);
+const MarkdownEngine = memo(function MarkdownEngineGate(props) {
+  const inScope = useLoadingScope();
+  if (inScope && !props.content) {
+    return /* @__PURE__ */ jsx(
+      MarkdownEngineSkeleton,
+      {
+        sections: props.skeletonSections,
+        lines: props.skeletonLines,
+        textSize: props.textSize,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MarkdownEngineImpl, { ...props });
+});
+function ParagraphBar({ lines, className }) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", lines, className: "w-full" }) });
+}
+function LinesByBreakpoint({ lines, as = "div" }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as, lines: lines.phone, className: "w-full content-md:hidden" }),
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as, lines: lines.wide, className: "hidden w-full content-md:flex" })
+  ] });
+}
+function MarkdownEngineSkeleton({
+  sections,
+  lines = MARKDOWN_SKELETON_LINES,
+  textSize,
+  title = false,
+  className = ""
+}) {
+  const textSizes = resolveTextSizeConfig(textSize);
+  const paragraphClass = cn(MARKDOWN_PARAGRAPH_CLASS, textSizes.p);
+  return (
+    // `w-full`: bars have no width of their own, so in a shrink-to-fit parent (a flex item) the skeleton would be
+    // 0px wide where the loaded text fills its line.
+    /* @__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 })
+    ] }) }) })
+  );
+}
 export {
+  MARKDOWN_RENDERER_CLASS,
+  MARKDOWN_SKELETON_LINES,
   MarkdownEngine,
+  MarkdownEngineSkeleton,
   NO_BROKEN_LINKS
 };

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

@@ -6,9 +6,11 @@
  *   - `RichMarkdownRenderer`   — authored-content surfaces (shortcodes,
  *     social embeds, Video SSOT, OG previews)
  */
-export { MarkdownEngine, type MarkdownEngineProps } from './engine';
-export { SimpleMarkdownRenderer, type SimpleMarkdownRendererProps, type ResolveLinkResult, } from './simple-markdown-renderer';
-export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich/rich-markdown-renderer';
+export { MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from './base-components';
+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 { 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,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,KAAK,iBAAiB,GACvB,MAAM,4BAA4B,CAAC;AACpC,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"}
+{"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"}

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

@@ -1,8 +1,10 @@
-import { MarkdownEngine } from "./engine.js";
+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 {
-  SimpleMarkdownRenderer
-} from "./simple-markdown-renderer.js";
-import { RichMarkdownRenderer } from "./rich/rich-markdown-renderer.js";
+  RichMarkdownRenderer,
+  RichMarkdownRendererSkeleton
+} from "./rich/rich-markdown-renderer.js";
 import { processShortcodes } from "./rich/shortcodes.js";
 import {
   SAFE_HTML_TAGS,
@@ -21,9 +23,15 @@ import { MermaidDiagram } from "./mermaid-diagram.js";
 import { buildHeadingIdMap, useHeadingIdMap, extractText } from "./heading-ids.js";
 import { splitStreamingBlocks, completeStreamingTail } from "./streaming.js";
 export {
+  MARKDOWN_H1_CLASS,
+  MARKDOWN_H2_CLASS,
+  MARKDOWN_PARAGRAPH_CLASS,
+  MARKDOWN_SKELETON_LINES,
   MarkdownEngine,
+  MarkdownEngineSkeleton,
   MermaidDiagram,
   RichMarkdownRenderer,
+  RichMarkdownRendererSkeleton,
   SAFE_HTML_TAGS,
   SVG_TAGS,
   SimpleMarkdownRenderer,

package/dist/components/ui/markdown/mermaid-diagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mermaid-diagram.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/mermaid-diagram.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,wBAAwB;;;;CA6BqC,CAAC;AAE3E;;uCAEuC;AACvC,eAAO,MAAM,yBAAyB,QAAS,CAAC;AAkBhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,ilCAyBzB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AAStC;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAM9C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,YAAY,CAAA;CAAE,CA0WhG,CAAC"}
+{"version":3,"file":"mermaid-diagram.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/mermaid-diagram.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,wBAAwB;;;;CA6BqC,CAAC;AAE3E;;uCAEuC;AACvC,eAAO,MAAM,yBAAyB,QAAS,CAAC;AAkBhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,ilCAyBzB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AAStC;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAM9C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,YAAY,CAAA;CAAE,CA2WhG,CAAC"}

package/dist/components/ui/markdown/mermaid-diagram.js

@@ -4,7 +4,9 @@ import { Maximize2, ZoomIn, ZoomOut } from "lucide-react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useIsHydrated } from "../../../hooks/ui/use-is-hydrated.js";
 import { AlertCircleIcon } from "../../icons-v2-generated/index.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { Button } from "../button/index.js";
+import { useLoadingScope } from "../loading-scope.js";
 const MERMAID_SECURITY_OPTIONS = {
   htmlLabels: false,
   securityLevel: "strict",
@@ -85,10 +87,11 @@ const FRAME_CLASS = {
   fold: "h-[70svh] min-h-[320px]"
 };
 const MermaidDiagram = ({
-  chart,
+  chart: givenChart,
   zoomable = true,
   frame = "content"
 }) => {
+  const chart = useLoadingScope() ? "" : givenChart;
   const [svg, setSvg] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(true);
@@ -266,7 +269,10 @@ const MermaidDiagram = ({
     /* @__PURE__ */ jsx("div", { className: "error-icon mb-4 flex justify-center", children: /* @__PURE__ */ jsx(AlertCircleIcon, { className: "h-12 w-12 text-ods-error" }) }),
     /* @__PURE__ */ jsx("div", { className: "error-title mb-2 text-center font-sans text-lg font-semibold text-ods-error", children: "Diagram Error" }),
     /* @__PURE__ */ jsx("div", { className: "error-description mb-4 max-w-full overflow-hidden break-words text-center font-sans text-sm text-ods-text-secondary", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words text-xs", children: error }) }) })
-  ] }) : empty || isLoading || !svg ? /* @__PURE__ */ jsx("div", { className: "skeleton-code m-auto animate-pulse font-sans text-ods-text-tertiary", children: isLoading ? "Loading diagram renderer..." : "Rendering diagram..." }) : /* @__PURE__ */ jsx(
+  ] }) : empty || isLoading || !svg ? (
+    // The frame's own size, as a skeleton: the frame sets the height the diagram lands in.
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { "aria-label": "Rendering diagram", className: "h-auto w-full self-stretch" })
+  ) : /* @__PURE__ */ jsx(
     "div",
     {
       className: "mermaid-svg-container flex shrink-0 justify-center",

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

@@ -36,5 +36,15 @@ 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

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

@@ -1 +1 @@
-{"version":3,"file":"rich-markdown-renderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/markdown/rich/rich-markdown-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAmC,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAiCtF;;;;;GAKG;AACH,KAAK,oBAAoB,GACrB,sBAAsB,GACtB,mBAAmB,GACnB,oBAAoB,GACpB,UAAU,GACV,eAAe,GACf,yBAAyB,GACzB,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,MAAM,WAAW,yBACf,SAAQ,OAAO,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,oBAAoB,CAAC;IACrF,qGAAqG;IACrG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAqHD,kDAAkD;AAClD,eAAO,MAAM,oBAAoB,uDAAiC,CAAC"}
+{"version":3,"file":"rich-markdown-renderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/markdown/rich/rich-markdown-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAA2D,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAiC9G;;;;;GAKG;AACH,KAAK,oBAAoB,GACrB,sBAAsB,GACtB,mBAAmB,GACnB,oBAAoB,GACpB,UAAU,GACV,eAAe,GACf,yBAAyB,GACzB,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,MAAM,WAAW,yBACf,SAAQ,OAAO,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,oBAAoB,CAAC;IACrF,qGAAqG;IACrG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AA6HD,kDAAkD;AAClD,eAAO,MAAM,oBAAoB,uDAAiC,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAEA"}

package/dist/components/ui/markdown/rich/rich-markdown-renderer.js

@@ -5,7 +5,7 @@ import {
   RichMarkdownRuntimeProvider,
   useRichMarkdownRuntime
 } from "../../../embeds/rich-markdown-runtime.js";
-import { MarkdownEngine, NO_BROKEN_LINKS } from "../engine.js";
+import { MarkdownEngine, MarkdownEngineSkeleton, NO_BROKEN_LINKS } from "../engine.js";
 import { resolveTextSizeConfig } from "../text-size.js";
 import { buildRichEmbedOverrides } from "./embed-overrides.js";
 import { processShortcodes } from "./shortcodes.js";
@@ -34,7 +34,9 @@ const RichMarkdownInner = ({
   currentPath,
   resolveSource,
   resolveLinkEndpointUrl,
-  demoteMarkdownH1ToH2
+  demoteMarkdownH1ToH2,
+  skeletonSections,
+  skeletonLines
 }) => {
   const { ogScraperUrl } = useRichMarkdownRuntime();
   const { ogApiBaseUrl, ogEndpointPath } = useMemo(() => {
@@ -78,7 +80,9 @@ const RichMarkdownInner = ({
       preprocessContent: processShortcodes,
       componentOverrides,
       textSize: "article",
-      extraAllowedHtmlTags: RICH_EXTRA_TAGS
+      extraAllowedHtmlTags: RICH_EXTRA_TAGS,
+      skeletonSections,
+      skeletonLines
     }
   );
 };
@@ -92,6 +96,8 @@ const RichMarkdownRendererImpl = ({
   resolveSource = "openframe-docs",
   resolveLinkEndpointUrl = "/api/docs/resolve-link",
   demoteMarkdownH1ToH2 = false,
+  skeletonSections,
+  skeletonLines,
   // Runtime overrides; provider fills the defaults
   redditProxyUrl,
   twitterProxyUrl,
@@ -116,13 +122,23 @@ const RichMarkdownRendererImpl = ({
           currentPath,
           resolveSource,
           resolveLinkEndpointUrl,
-          demoteMarkdownH1ToH2
+          demoteMarkdownH1ToH2,
+          skeletonSections,
+          skeletonLines
         }
       )
     }
   );
 };
 const RichMarkdownRenderer = memo(RichMarkdownRendererImpl);
+function RichMarkdownRendererSkeleton({
+  sections,
+  title,
+  className
+}) {
+  return /* @__PURE__ */ jsx(MarkdownEngineSkeleton, { sections, title, textSize: "article", className });
+}
 export {
-  RichMarkdownRenderer
+  RichMarkdownRenderer,
+  RichMarkdownRendererSkeleton
 };

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

@@ -7,9 +7,7 @@
  * `componentOverrides` exactly as before.
  */
 import type React from 'react';
-import type { ResolveLinkResult } from '../../../types/doc-source';
 import { type MarkdownEngineProps } from './engine';
-export type { ResolveLinkResult };
 export interface SimpleMarkdownRendererProps extends Omit<MarkdownEngineProps, 'extraAllowedHtmlTags'> {
 }
 /**

package/dist/components/ui/markdown/simple-markdown-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-markdown-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/simple-markdown-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,sBAAsB,CAAC;CAAG;AAEzG;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAqB,KAAK,CAAC,oBAAoB,CAAC,2BAA2B,CAAC,CAAC"}
+{"version":3,"file":"simple-markdown-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/markdown/simple-markdown-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpE,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,sBAAsB,CAAC;CAAG;AAEzG;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAqB,KAAK,CAAC,oBAAoB,CAAC,2BAA2B,CAAC,CAAC"}

package/dist/components/ui/markdown-editor.d.ts

@@ -1,4 +1,14 @@
 import type React from 'react';
+/**
+ * The editor's FIELD while its code loads: one box at the field's own height (the frame the editor draws at
+ * `height`), so the form around it does not move when the editor arrives. It stands for one form field, not a
+ * whole view: the `next/dynamic` `loading:` fallback (and the `Suspense` fallback for a `React.lazy` host) of
+ * the editor package, where the editor cannot draw itself yet.
+ */
+export declare function MarkdownEditorFieldSkeleton({ height, className, }: {
+    height?: number;
+    className?: string;
+}): React.JSX.Element;
 export interface MarkdownEditorProps {
     /** Markdown string content */
     value: string;

package/dist/components/ui/markdown-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../../src/components/ui/markdown-editor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4F/B,MAAM,WAAW,mBAAmB;IAClC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/C,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,WAAgB,EAChB,QAAgB,EAChB,MAAY,EACZ,SAAe,EACf,SAAS,EACT,YAAY,EACZ,cAAc,EACd,aAAa,GACd,EAAE,mBAAmB,qBAyQrB"}
+{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../../src/components/ui/markdown-editor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,MAAuC,EACvC,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAMA;AAiGD,MAAM,WAAW,mBAAmB;IAClC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/C,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,WAAgB,EAChB,QAAgB,EAChB,MAAuC,EACvC,SAAe,EACf,SAAS,EACT,YAAY,EACZ,cAAc,EACd,aAAa,GACd,EAAE,mBAAmB,qBAuQrB"}