@flamingo-stack/openframe-frontend-core 0.0.747 → 0.0.749

package/src/components/ui/layout-hold.tsx

@@ -1,8 +1,6 @@
-'use client';
-
-import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { cn } from '../../utils/cn';
-import { SkeletonText } from './skeleton';
+import { SKELETON_SURFACE_CLASS } from './skeleton-surface';
 
 /**
  * Holding a layout while its content is read, the two ways that are right at
@@ -13,8 +11,9 @@ import { SkeletonText } from './skeleton';
  *
  * - `TextHold`: an inline stand-in exactly as wide as the words it is given
  *   (same font, same letter spacing, because it IS those words, not shown).
- *   `bar` draws a `SkeletonText` of as many lines as the words take; `blank`
- *   only keeps their space.
+ *   `bar` draws one skeleton bar per line the words take, each as wide as
+ *   its line, in plain CSS (no measuring, so it is in the server's HTML);
+ *   `blank` only keeps their space.
  * - `LayoutHold`: a block as tall as the real layout rendered inside it, kept
  *   invisible and inert: the layout's own height, at any width.
  *
@@ -23,51 +22,44 @@ import { SkeletonText } from './skeleton';
 export interface TextHoldProps {
   /** The words whose width is held (the content's own, or a stand-in of its length). */
   children: ReactNode;
-  /** `bar`: a `SkeletonText` of as many lines as the words take. `blank`: the space only. */
+  /** `bar`: one skeleton bar per line the words take. `blank`: the space only. */
   variant?: 'bar' | 'blank';
   className?: string;
 }
 
+/** A rounded rectangle filling whatever box it is drawn in: the shape of each line's bar. */
+const ROUNDED_BAR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='6'/%3E%3C/svg%3E")`;
+/**
+ * Each line's bar: a text-high band in the middle of the line, so wrapped lines are separate bars with
+ * a gap between them. A line box's background is as tall as the font's whole ascent and descent, which in
+ * DM Sans fills the line, so unmasked the lines of a paragraph touch and read as one block.
+ */
+const BAR_MASK = `${ROUNDED_BAR} center / 100% min(1em, calc(1lh - 6px)) no-repeat`;
+const BAR_STYLE: CSSProperties = { mask: BAR_MASK, WebkitMask: BAR_MASK };
+
 export function TextHold({ children, variant = 'bar', className }: TextHoldProps) {
-  const hold = useRef<HTMLSpanElement>(null);
-  const words = useRef<HTMLSpanElement>(null);
-  const lines = useLineCount(hold, words, variant === 'bar');
+  const bar = variant === 'bar';
   return (
     <span
-      ref={hold}
       aria-hidden
-      className={cn('pointer-events-none select-none', variant === 'bar' && 'relative inline-block', className)}
+      className={cn(
+        // `bar`: the words themselves, unseen, on the skeleton's surface. The span stays INLINE, so the
+        // browser paints one bar per line the words take, each exactly as wide as that line, and
+        // `box-decoration-clone` gives every line its own bar (and its own mask, `BAR_STYLE`). Pure CSS: it
+        // is drawn in the server's HTML, before any script runs (a loading state streamed by the server
+        // is often replaced before it hydrates).
+        bar ? cn(SKELETON_SURFACE_CLASS, 'rounded-md box-decoration-clone text-transparent') : 'invisible',
+        // A hold is never selectable or clickable, whatever it wraps.
+        'pointer-events-none select-none',
+        className,
+      )}
+      style={bar ? BAR_STYLE : undefined}
     >
-      <span ref={words} className="invisible">
-        {children}
-      </span>
-      {lines > 0 ? (
-        // `justify-around`: each `Skeleton` sits in the middle of the line it stands for.
-        <SkeletonText lines={lines} className="absolute inset-0 flex flex-col justify-around space-y-0" />
-      ) : null}
+      {children}
     </span>
   );
 }
 
-/** How many lines the words take (one box per line), kept current as the width changes. */
-function useLineCount(
-  hold: RefObject<HTMLSpanElement | null>,
-  words: RefObject<HTMLSpanElement | null>,
-  enabled: boolean,
-): number {
-  const [lines, setLines] = useState(0);
-  useLayoutEffect(() => {
-    const box = hold.current;
-    if (!enabled || !box) return undefined;
-    const measure = () => setLines(words.current?.getClientRects().length ?? 0);
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(box);
-    return () => observer.disconnect();
-  }, [hold, words, enabled]);
-  return lines;
-}
-
 export interface LayoutHoldProps {
   /** The real layout, rendered with the data at hand. */
   children: ReactNode;

package/src/components/ui/markdown/base-components.tsx

@@ -387,7 +387,7 @@ export function buildBaseComponents({
 
     // --- tables ---
     // The frame and the scroll container are ONE element, matching the sibling
-    // block embed (`mermaid-diagram.tsx`) and `users-grid-skeleton`. It used to
+    // block embed (`mermaid-diagram.tsx`). It used to
     // be two — `overflow-x-auto` outside, `rounded-lg border` on an inner
     // `min-w-full` div — so nothing clipped: the cells' own `border-r`/`border-b`
     // ran straight through the rounded corners and out past the frame's edge.

package/src/components/ui/page-actions.tsx

@@ -3,10 +3,10 @@
 import React from 'react';
 import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from './actions-menu';
 import type { ButtonProps, SplitButtonIconAction } from './button';
 import { Button, SplitButton } from './button';
-import { Skeleton } from './skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 export type PageActionButton = {
@@ -274,7 +274,7 @@ function ActionSkeletons({
         // icon action keeps its square box there too.
         const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === 'icon';
         return (
-          <Skeleton
+          <UnifiedSkeleton
             // Static placeholder list — index IS the identity here.
             key={`action-skeleton-${idx}`}
             className={cn(
@@ -290,9 +290,7 @@ function ActionSkeletons({
 }
 
 /** Mobile placeholder for the variants that collapse to ONE trigger (icon button or "…"). */
-function MobileTriggerSkeleton() {
-  return <Skeleton className={cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS)} />;
-}
+const MOBILE_TRIGGER_SKELETON_CLASS = cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS);
 
 export function PageActions({
   variant = 'icon-buttons',
@@ -372,7 +370,7 @@ function IconButtonsVariant({
       {/* Mobile: single icon button OR all actions merged into one "..." menu */}
       <div className={cn('flex content-md:hidden', className)}>
         {loading ? (
-          <MobileTriggerSkeleton />
+          <UnifiedSkeleton className={MOBILE_TRIGGER_SKELETON_CLASS} />
         ) : useSingleActionMobile && singleAction ? (
           renderActionButton(singleAction, { iconOnly: true })
         ) : hasMobileMenuItems ? (
@@ -426,7 +424,11 @@ function PrimaryButtonsVariant({
       </div>
 
       <div className={cn('hidden items-center md:content-max-md:flex', ACTIONS_GAP, className)}>
-        {loading ? <MobileTriggerSkeleton /> : <CompactPrimaryActions actions={desktopActions} />}
+        {loading ? (
+          <UnifiedSkeleton className={MOBILE_TRIGGER_SKELETON_CLASS} />
+        ) : (
+          <CompactPrimaryActions actions={desktopActions} />
+        )}
       </div>
 
       <MobileBottomActions actions={sortedActions} loading={loading} />
@@ -477,7 +479,7 @@ function MenuPrimaryVariant({
 
       <div className={cn('flex content-md:hidden', className)}>
         {loading ? (
-          <MobileTriggerSkeleton />
+          <UnifiedSkeleton className={MOBILE_TRIGGER_SKELETON_CLASS} />
         ) : 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

package/src/components/ui/photo-wall.tsx

@@ -19,6 +19,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Image, { resizedImageUrl } from '../../embed-shims/next-image';
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { MarqueeWall } from './marquee-wall';
 
 export interface PhotoWallImage {
@@ -292,16 +293,12 @@ export function PhotoWall({ images, columns = 2, speed = 24, fadeColor, classNam
             </MarqueeWall>
           ))
         : Array.from({ length: columns }, (_, index) => (
-            <div
-              key={index}
-              className="flex h-full animate-pulse flex-col overflow-hidden"
-              style={{ gap: COLUMN_GAP_PX }}
-            >
+            <div key={index} className="flex h-full flex-col overflow-hidden" style={{ gap: COLUMN_GAP_PX }}>
               {(index % 2 === 0 ? (['tall', 'wide', 'square'] as const) : (['wide', 'tall', 'wide'] as const)).map(
                 (orientation, i) => (
-                  <div
+                  <UnifiedSkeleton
                     key={i}
-                    className="w-full shrink-0 rounded-lg bg-ods-card"
+                    className="h-auto w-full shrink-0 rounded-lg"
                     style={{ aspectRatio: PHOTO_WALL_FRAME[orientation] }}
                   />
                 ),

package/src/components/ui/query-report-table/query-report-table-skeleton.tsx

@@ -1,9 +1,12 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { QueryReportTableSkeletonProps } from './types';
 
 export function QueryReportTableSkeleton({
+  region = true,
   rows,
   columns,
   columnWidth,
@@ -13,12 +16,16 @@ export function QueryReportTableSkeleton({
   const isCompact = variant === 'compact';
 
   return (
-    <div className={cn('flex flex-col', isCompact ? 'gap-0' : 'gap-[var(--spacing-system-xs)]', className)}>
+    <LoadingRegion
+      label="Loading results"
+      announce={region}
+      className={cn('flex flex-col', isCompact ? 'gap-0' : 'gap-[var(--spacing-system-xs)]', className)}
+    >
       {/* Skeleton header */}
       <div className={cn('flex items-center gap-4 px-4', isCompact ? 'border-b border-ods-border py-2' : '')}>
         {Array.from({ length: columns }).map((_, i) => (
           <div key={`header-${i}`} className="flex shrink-0 items-center" style={{ width: columnWidth, height: 48 }}>
-            <div className="h-4 w-3/4 animate-pulse rounded bg-ods-bg-surface" />
+            <UnifiedSkeleton className="h-4 w-3/4 rounded" />
           </div>
         ))}
       </div>
@@ -28,7 +35,6 @@ export function QueryReportTableSkeleton({
         <div
           key={`row-${rowIndex}`}
           className={cn(
-            'animate-pulse',
             isCompact
               ? 'border-b border-ods-border'
               : 'relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card',
@@ -37,15 +43,15 @@ export function QueryReportTableSkeleton({
           <div className={cn('flex items-center gap-4 px-4', isCompact ? 'h-[56px]' : 'h-[80px]')}>
             {Array.from({ length: columns }).map((_cell, colIndex) => (
               <div key={`cell-${rowIndex}-${colIndex}`} className="shrink-0" style={{ width: columnWidth }}>
-                <div
-                  className={cn('rounded bg-ods-bg-surface', isCompact ? 'h-4' : 'h-5')}
-                  style={{ width: `${55 + ((rowIndex * colIndex * 7) % 35)}%` }}
+                <UnifiedSkeleton
+                  className={cn('rounded', isCompact ? 'h-4' : 'h-5')}
+                  width={`${55 + ((rowIndex * colIndex * 7) % 35)}%`}
                 />
               </div>
             ))}
           </div>
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/ui/query-report-table/query-report-table.tsx

@@ -16,6 +16,7 @@ export function QueryReportTable({
   title,
   data,
   loading = false,
+  loadingRegion = true,
   skeletonRows = 8,
   skeletonColumns = 6,
   emptyMessage,
@@ -84,6 +85,7 @@ export function QueryReportTable({
           columns={skeletonColumns}
           columnWidth={columnWidth}
           variant={variant}
+          region={loadingRegion}
         />
       )}
 

package/src/components/ui/query-report-table/types.ts

@@ -11,6 +11,8 @@ export interface QueryReportTableProps {
   data: QueryResultRow[];
   /** Show skeleton loading state */
   loading?: boolean;
+  /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
   /** Number of skeleton rows to display (default: 8) */
   skeletonRows?: number;
   /** Number of skeleton columns to display (default: 6) */
@@ -56,4 +58,6 @@ export interface QueryReportTableSkeletonProps {
   columnWidth: number;
   variant?: QueryReportTableVariant;
   className?: string;
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
 }

package/src/components/ui/skeleton-surface.ts

@@ -0,0 +1,6 @@
+/**
+ * What a skeleton looks like: the pulsing surface every loading stand-in draws
+ * (`UnifiedSkeleton` and its presets, `TextHold`'s bars). A plain module, with
+ * no client directive, so a server component can read the string itself.
+ */
+export const SKELETON_SURFACE_CLASS = 'animate-pulse motion-reduce:animate-none bg-ods-skeleton';

package/src/components/ui/table/table-skeleton.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { TableCardSkeletonProps } from './types';
 
 // INNER row heights: the bordered row card adds 1px top + bottom, so the
@@ -36,10 +37,7 @@ export function TableCardSkeleton({
       {Array.from({ length: rows }).map((_, index) => (
         <div
           key={index}
-          className={cn(
-            'relative animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card',
-            className,
-          )}
+          className={cn('relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card', className)}
         >
           {/* Desktop Skeleton */}
           {/* Matches the ROW it stands in for: a compact row is content-sized
@@ -54,10 +52,10 @@ export function TableCardSkeleton({
           >
             {columns.map(column => (
               <div key={column.key} className={cn('flex shrink-0 flex-col justify-center', column.width || 'flex-1')}>
-                <div className="mb-1 h-5 w-3/4 rounded bg-ods-bg-surface" />
+                <UnifiedSkeleton className="mb-1 h-5 w-3/4 rounded" />
                 {/* second line simulates multi-line content on the primary column */}
                 {index % 2 === 0 && column.key === primaryKey && (
-                  <div className="h-4 w-1/2 rounded bg-ods-bg-surface opacity-60" />
+                  <UnifiedSkeleton className="h-4 w-1/2 rounded opacity-60" />
                 )}
               </div>
             ))}
@@ -65,15 +63,15 @@ export function TableCardSkeleton({
             {/* Actions skeleton */}
             {hasActions && (
               <div className={cn('flex shrink-0 items-center gap-2', !hasChevron && 'ml-auto')}>
-                <div className="h-12 w-12 rounded bg-ods-bg-surface" />
-                <div className="h-12 w-24 rounded bg-ods-bg-surface" />
+                <UnifiedSkeleton className="h-12 w-12 rounded" />
+                <UnifiedSkeleton className="h-12 w-24 rounded" />
               </div>
             )}
 
             {/* Chevron skeleton */}
             {hasChevron && (
               <div className={cn('flex w-12 shrink-0 items-center justify-end', !hasActions && 'ml-auto')}>
-                <div className="h-8 w-8 rounded bg-ods-bg-surface" />
+                <UnifiedSkeleton className="h-8 w-8 rounded" />
               </div>
             )}
           </div>
@@ -94,11 +92,11 @@ export function TableCardSkeleton({
                 sized by its own `py-2` + floor, so adding `py-3` here made the
                 compact mobile skeleton 78px against a real row's 58. */}
             <div className={cn('flex min-w-0 flex-1 flex-col justify-center', compact ? 'py-0' : 'py-3')}>
-              <div className="mb-2 h-4 w-3/4 rounded bg-ods-bg-surface" />
-              <div className="h-3 w-1/2 rounded bg-ods-bg-surface opacity-60" />
+              <UnifiedSkeleton className="mb-2 h-4 w-3/4 rounded" />
+              <UnifiedSkeleton className="h-3 w-1/2 rounded opacity-60" />
             </div>
-            {hasActions && <div className="h-12 w-12 shrink-0 rounded bg-ods-bg-surface" />}
-            {hasChevron && <div className="h-8 w-8 shrink-0 rounded bg-ods-bg-surface" />}
+            {hasActions && <UnifiedSkeleton className="h-12 w-12 shrink-0 rounded" />}
+            {hasChevron && <UnifiedSkeleton className="h-8 w-8 shrink-0 rounded" />}
           </div>
         </div>
       ))}

package/src/components/ui/test-run.tsx

@@ -6,6 +6,8 @@ import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
 import { cn } from '../../utils/cn';
 import { formatTime } from '../../utils/format-date';
 import { Copy02Icon, SearchIcon } from '../icons-v2-generated';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { DataTable } from './data-table';
 import { useDataTable } from './data-table/use-data-table';
 import { NoData } from './no-data';
@@ -34,35 +36,41 @@ const RESULT_COLUMN_MIN_WIDTH = 176;
 const SKELETON_COLUMNS = 6;
 
 /** Column-bar skeleton (header cells + one card row): fixed 160px columns on
-    every breakpoint, scrolling horizontally when they do not fit. Bars use
-    bg-ods-bg-surface like the table skeletons — the bg-ods-skeleton token is
-    the same color as the card background and would be invisible on the row. */
-export function TestResultsSkeleton() {
+    every breakpoint, scrolling horizontally when they do not fit. Bars are
+    `UnifiedSkeleton`s, like the table skeletons. */
+export function TestResultsSkeleton({
+  region = true,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+} = {}) {
   return (
-    <ScrollShadow axis="horizontal">
-      {/* No gap between the header bars and the row card — the real table's
+    <LoadingRegion label="Loading the test results" announce={region}>
+      <ScrollShadow axis="horizontal">
+        {/* No gap between the header bars and the row card — the real table's
           header and body sit flush. */}
-      <div className="flex w-max min-w-full flex-col">
-        <div className="flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
-          {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
-            <div key={`skeleton-header-${i}`} className="flex h-12 w-[160px] shrink-0 items-center">
-              <div className="h-4 w-3/4 animate-pulse rounded-sm bg-ods-bg-surface" />
-            </div>
-          ))}
-        </div>
-        <div className="animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
-          {/* Same INNER row heights as the DataTable (66/78px + the 1px card
-              border on each side = 68/80px total, per design). */}
-          <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]">
+        <div className="flex w-max min-w-full flex-col">
+          <div className="flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
             {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
-              <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
-                <div className="h-5 w-3/4 rounded-sm bg-ods-bg-surface" />
+              <div key={`skeleton-header-${i}`} className="flex h-12 w-[160px] shrink-0 items-center">
+                <UnifiedSkeleton className="h-4 w-3/4 rounded-sm" />
               </div>
             ))}
           </div>
+          <div className="overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
+            {/* Same INNER row heights as the DataTable (66/78px + the 1px card
+              border on each side = 68/80px total, per design). */}
+            <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]">
+              {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
+                <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
+                  <UnifiedSkeleton className="h-5 w-3/4 rounded-sm" />
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
-      </div>
-    </ScrollShadow>
+      </ScrollShadow>
+    </LoadingRegion>
   );
 }
 

package/src/styles/ods-colors.css

@@ -285,8 +285,8 @@
      was byte-identical to --color-bg-card, so every `bg-ods-skeleton` pulse
      sitting on a card was invisible — it only appeared while the row's hover
      tint lightened the ground beneath it (people-hub score table, 2026-08).
-     `soft-grey` is what `ui/Skeleton` (bg-ods-border) already pulses with, so
-     the two skeleton primitives now read as one, in both themes. */
+     `soft-grey` is the border's grey too, so a skeleton reads the same on
+     every surface, in both themes. */
   --color-bg-skeleton: var(--ods-system-greys-soft-grey);
   --color-bg-surface: var(--ods-system-greys-soft-grey);
   --color-bg-surface-hover: var(--ods-system-greys-soft-grey-hover);

package/src/utils/markdown-to-plain.ts

@@ -3,23 +3,32 @@
  * (article-body echo in JSON-LD) and chat entity-card preview (clamped previews
  * inside chat cards).
  *
- * The text is what a reader of the rendered page reads: the markdown is parsed with the SAME
- * pipeline the renderer uses (remark with GFM and line breaks, then rehype with raw HTML, as in
- * `components/ui/markdown/engine.tsx`), and the result is the `innerText` of that HTML
+ * The text is what a reader of the rendered page reads: the markdown goes through the SAME steps
+ * the renderer's pipeline runs (`components/ui/markdown/engine.tsx`: remark with GFM and line
+ * breaks, then rehype with raw HTML), and the result is the `innerText` of that HTML
  * (`hast-util-to-text`). So link, emphasis and heading syntax, raw HTML tags (`<a rel>`, `<div>`),
  * escapes (`\<`) and entities (`&amp;`) all come out as their text; script and style content and
  * comments do not. Code blocks and images are left out: their content is not prose.
  *
+ * The steps are unified's UTILITY functions, the ones those plugins wrap (`mdast-util-from-markdown`
+ * with the GFM extensions, `mdast-util-newline-to-break`, `mdast-util-to-hast`, `hast-util-raw`),
+ * not a `remark()` processor. This module is in the CommonJS builds, and a unified processor is a
+ * callable object without `Function.prototype`: the bundler compiles a call to an imported
+ * function as `.call(void 0)`, which a processor does not have (0.0.745 crashed on load:
+ * `_remark.remark.call is not a function`). Plain functions have no such limit, and one
+ * synchronous conversion needs no plugin system.
+ *
  * The two consumers differ only in whitespace — `mode: 'article'` keeps paragraph breaks;
  * `mode: 'preview'` collapses everything to a single line.
  */
 import type { Element, Root } from 'hast';
+import { raw } from 'hast-util-raw';
 import { toText } from 'hast-util-to-text';
-import rehypeRaw from 'rehype-raw';
-import { remark } from 'remark';
-import remarkBreaks from 'remark-breaks';
-import remarkGfm from 'remark-gfm';
-import remarkRehype from 'remark-rehype';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { gfmFromMarkdown } from 'mdast-util-gfm';
+import { newlineToBreak } from 'mdast-util-newline-to-break';
+import { toHast } from 'mdast-util-to-hast';
+import { gfm } from 'micromark-extension-gfm';
 import { SKIP, visit } from 'unist-util-visit';
 
 export interface MarkdownToPlainOptions {
@@ -47,20 +56,20 @@ export function stripInlineMarkdown(s: string): string {
     .replace(/`([^`]+)`/g, '$1'); // `inline code` → inline code
 }
 
-// The renderer's own pipeline, up to the HTML tree. Built once; `runSync` has no async plugins.
-const toHtmlTree = remark()
-  .use(remarkGfm)
-  .use(remarkBreaks)
-  .use(remarkRehype, { allowDangerousHtml: true })
-  .use(rehypeRaw);
-
 /** Elements whose content is not prose: code blocks and images. */
 const NOT_PROSE = new Set(['pre', 'img']);
 
 const TABLE_SECTIONS = new Set(['thead', 'tbody', 'tfoot']);
 
+/** The renderer's steps, as functions: markdown (GFM) → line breaks → HTML tree with raw HTML parsed. */
+function htmlTree(markdown: string): Root {
+  const mdast = fromMarkdown(markdown, { extensions: [gfm()], mdastExtensions: [gfmFromMarkdown()] });
+  newlineToBreak(mdast);
+  return raw(toHast(mdast, { allowDangerousHtml: true })) as Root;
+}
+
 function proseTree(markdown: string): Root {
-  const tree: Root = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  const tree = htmlTree(markdown);
   visit(tree, 'element', (node: Element, index, parent) => {
     if (NOT_PROSE.has(node.tagName) && parent && index !== undefined) {
       parent.children.splice(index, 1);

package/dist/chunk-5M5C6UV4.cjs

@@ -1,125 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-
-
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
-
-// src/components/ui/portal-container.tsx
-var _react = require('react');
-var PortalContainerContext = _react.createContext.call(void 0, null);
-function usePortalContainer() {
-  return _react.useContext.call(void 0, PortalContainerContext);
-}
-var CollisionBoundaryContext = _react.createContext.call(void 0, null);
-function useCollisionBoundary() {
-  return _react.useContext.call(void 0, CollisionBoundaryContext);
-}
-var COLLISION_PADDING_PX = 8;
-
-// src/components/ui/skeleton.tsx
-
-var _jsxruntime = require('react/jsx-runtime');
-var Skeleton = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "animate-pulse rounded-md bg-ods-border", className), ...props });
-});
-Skeleton.displayName = "Skeleton";
-var SkeletonText = _react.forwardRef.call(void 0, ({ lines = 1, className, ...props }, ref) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Skeleton,
-    {
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
-        "h-4",
-        i === lines - 1 && lines > 1 && "w-3/4"
-        // Last line shorter for multi-line
-      )
-    },
-    i
-  )) });
-});
-SkeletonText.displayName = "SkeletonText";
-var SkeletonCard = _react.forwardRef.call(void 0, 
-  ({ showImage = false, className, ...props }, ref) => {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "overflow-hidden rounded-lg border border-ods-border", className), ...props, children: [
-      showImage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-48 w-full" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-6", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "mb-4 h-6 w-3/4" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SkeletonText, { lines: 3 })
-      ] })
-    ] });
-  }
-);
-SkeletonCard.displayName = "SkeletonCard";
-var SkeletonGrid = _react.forwardRef.call(void 0, 
-  ({ columns = 3, items = 6, showImages = false, className, ...props }, ref) => {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        ref,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
-          `grid grid-cols-1 gap-6`,
-          columns === 2 && "content-md:grid-cols-2",
-          columns === 3 && "content-md:grid-cols-3",
-          columns === 4 && "content-md:grid-cols-4",
-          className
-        ),
-        ...props,
-        children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SkeletonCard, { showImage: showImages }, i))
-      }
-    );
-  }
-);
-SkeletonGrid.displayName = "SkeletonGrid";
-var SkeletonButton = _react.forwardRef.call(void 0, 
-  ({ size = "default", className, ...props }, ref) => {
-    const sizeClasses = {
-      sm: "h-8 w-20",
-      default: "h-10 w-32",
-      lg: "h-12 w-40"
-    };
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "rounded-lg", sizeClasses[size], className), ...props });
-  }
-);
-SkeletonButton.displayName = "SkeletonButton";
-var SkeletonHeading = _react.forwardRef.call(void 0, ({ level = 1, className, ...props }, ref) => {
-  const heightClasses = {
-    1: "h-12",
-    2: "h-10",
-    3: "h-8",
-    4: "h-7",
-    5: "h-6",
-    6: "h-5"
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, heightClasses[level], "w-3/4", className), ...props });
-});
-SkeletonHeading.displayName = "SkeletonHeading";
-var SkeletonList = _react.forwardRef.call(void 0, ({ items = 5, className, ...props }, ref) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "space-y-3", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-10 w-10 flex-shrink-0 rounded-full" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "mb-1 h-4 w-1/3" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-3 w-1/2" })
-    ] })
-  ] }, i)) });
-});
-SkeletonList.displayName = "SkeletonList";
-var SkeletonNavigation = _react.forwardRef.call(void 0, 
-  ({ items = 6, className, ...props }, ref) => {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "flex items-center gap-6", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-20" }, i)) });
-  }
-);
-SkeletonNavigation.displayName = "SkeletonNavigation";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-exports.PortalContainerContext = PortalContainerContext; exports.usePortalContainer = usePortalContainer; exports.CollisionBoundaryContext = CollisionBoundaryContext; exports.useCollisionBoundary = useCollisionBoundary; exports.COLLISION_PADDING_PX = COLLISION_PADDING_PX; exports.Skeleton = Skeleton; exports.SkeletonText = SkeletonText; exports.SkeletonCard = SkeletonCard; exports.SkeletonGrid = SkeletonGrid; exports.SkeletonButton = SkeletonButton; exports.SkeletonHeading = SkeletonHeading; exports.SkeletonList = SkeletonList; exports.SkeletonNavigation = SkeletonNavigation;