@flamingo-stack/openframe-frontend-core 0.0.490-1506.3944.1 → 0.0.490

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -15,7 +15,7 @@
  * renderer with extra plugins.
  */
 
-import { Fragment, type ComponentType, type ReactNode } from 'react'
+import { type ComponentType, type ReactNode } from 'react'
 import { PageLayout } from '../layout/page-layout'
 
 import { useRouter } from '../../embed-shims'
@@ -30,7 +30,7 @@ import { VideoBitesStrip } from '../features/video-bites-strip'
 import { toStripProfile } from '../features/video-bites-shared'
 import { useVideoWarmup } from '../features/use-video-warmup'
 import { getCaptionsUrl } from '../features/captions-url'
-import { RichMarkdownRenderer } from '../ui/markdown'
+import { RichMarkdownRenderer } from '../ui/rich-markdown-renderer'
 import { EntityTagBadges } from '../features/entity-tag-badges'
 import { LoadError } from '../ui/error-state'
 import { ArticleAuthorByline } from '../shared/article-author-byline'
@@ -244,26 +244,8 @@ export function OnboardingGuideDetailView({
           </div>
         )}
 
-        {/*
-         * Host slot — cross-type related-content / FAQ rail.
-         *
-         * KEYED DELIBERATELY. This is one member of PageLayout's static children
-         * array, and the only member whose element may be created in a SERVER
-         * component and crossed over the RSC boundary. Static JSX children are
-         * normally exempt from the key warning because `jsxs` runs
-         * `validateChildKeys` and stamps `_store.validated = 1` on each element —
-         * but a slot arriving over the wire is referenced as a lazy chunk wrapper,
-         * so validation marks the WRAPPER and the fulfilled path never copies the
-         * flag onto the revived element. It reaches the reconciler with
-         * `validated: 0, key: null` and warns, blaming PageLayout (the owner of the
-         * enclosing element) rather than anything actually at fault.
-         *
-         * A keyed Fragment emits no DOM, so rendered output is byte-identical.
-         * Do NOT "fix" this in PageLayout via `React.Children.toArray` — that would
-         * auto-key every consumer's children and change reconciliation identity for
-         * all of them, and that file carries an explicit FROZEN contract.
-         */}
-        <Fragment key="related-content">{relatedContent}</Fragment>
+        {/* Host slot — cross-type related-content / FAQ rail. */}
+        {relatedContent}
       </PageLayout>
   )
 }

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -19,7 +19,7 @@
 
 import type { ComponentType } from 'react';
 import { PageShell, PageLayout } from '../../ui';
-import { RichMarkdownRenderer } from '../../ui/markdown';
+import { RichMarkdownRenderer } from '../../ui/rich-markdown-renderer';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { useLegalDocs, type LegalDocument } from './use-legal-docs';
 import { formatLegalDate } from '../../../utils/format';

package/src/components/shared/product-release/release-detail-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, Fragment, ComponentType, type ReactNode } from 'react';
+import { useState, useEffect, ComponentType, type ReactNode } from 'react';
 import Link from '../../../embed-shims/next-link';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { Card, CardContent } from '../../ui/card';
@@ -11,7 +11,7 @@ import { PageShell } from '../../layout/article-detail-layout';
 import { PageLayout } from '../../layout/page-layout';
 import { FadePreview } from '../../ui/fade-preview';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
-import { RichMarkdownRenderer } from '../../ui/markdown';
+import { RichMarkdownRenderer } from '../../ui/rich-markdown-renderer';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
 import type { EntityAuthor } from '../../../types/entity-author';
@@ -582,23 +582,8 @@ export function ReleaseDetailPage({
         )}
       </div>
 
-      {/*
-       * Host slot — end-of-article byline + related-content / FAQ rail.
-       *
-       * KEYED for the same reason as `onboarding-guide-detail-view.tsx`: this is a
-       * member of PageLayout's static children array, and a slot element built in a
-       * SERVER component crosses the RSC boundary as a lazy chunk wrapper, so
-       * `validateChildKeys` marks the wrapper and the fulfilled path never copies
-       * `_store.validated` onto the revived element — it reaches the reconciler
-       * unvalidated and warns.
-       *
-       * Today the hub's only consumer of this view is a `'use client'` wrapper that
-       * builds the slot locally, so no element actually crosses the boundary and
-       * this is pre-emptive. It is kept because the trap is invisible from here: a
-       * future server-built slot would warn with no clue pointing at this line.
-       * A keyed Fragment emits no DOM, so output is byte-identical either way.
-       */}
-      <Fragment key="related-content">{relatedContent}</Fragment>
+      {/* Host slot — end-of-article byline + related-content / FAQ rail. */}
+      {relatedContent}
       </PageLayout>
   );
 }

package/src/components/ui/.simple-markdown-renderer.md

@@ -0,0 +1,52 @@
+<!-- source-hash: 9a47236bd9fd4f90eece958d3708b946 -->
+A client-side React component that renders Markdown content with GFM support, syntax highlighting, raw HTML passthrough, and a layered XSS sanitization pipeline designed for safe rendering of LLM-generated output.
+
+## Key Components
+
+### Rehype Plugins
+
+- **`rehypeStripUnsafe()`** — Custom HAST sanitizer that runs after `rehype-raw`. Strips dangerous elements (`<script>`, `<style>`, `<object>`, etc.), removes `on*` event handler attributes, and blocks `javascript:` / `data:` URI schemes on all URL-bearing attributes including multi-candidate `srcset`.
+
+- **`srcsetHasUnsafeCandidate(srcset)`** — Helper that splits `srcset` attribute values by comma and validates each URL candidate individually to prevent injection via secondary candidates.
+
+- **`escapeUnknownHtmlT...` (truncated)** — Pre-pass that escapes unrecognized HTML-like tags in raw markdown text before `rehype-raw` processes them, preventing React warnings/errors from LLM-emitted pseudo-XML tags like `<ticket>` or `<their>`.
+
+### URL Transform
+
+- **`cardAwareUrlTransform(url, key)`** — Extends `react-markdown`'s default URL sanitizer to allow `card://` and `mention://` internal schemes on `href` attributes only (used by `remarkCardLinks` and `remarkMentionChips` plugins), while keeping all other dangerous schemes blocked.
+
+### Constants
+
+- **`SAFE_HTML_TAGS`** — Allowlist of permitted HTML tag names forwarded to React. Explicitly excludes `<video>` (handled by a separate pipeline component).
+- **`TAG_LIKE_REGEX`** — ReDoS-safe regex (CodeQL-hardened, bounded quantifiers) for matching HTML-like tags in markdown source.
+
+## Usage Example
+
+```typescript
+import { SimpleMarkdownRenderer } from './simple-markdown-renderer';
+
+// Basic rendering with safe LLM output
+<SimpleMarkdownRenderer content="## Hello\n\nThis is **markdown** with `code`." />
+
+// With authenticated image sources and link resolution
+<SimpleMarkdownRenderer
+  content={llmMarkdownOutput}
+  resolveLink={(href) => ({ url: href, label: href })}
+/>
+```
+
+## Security Model
+
+The sanitization runs in two layers:
+
+```mermaid
+graph TD
+    A[Raw Markdown] --> B[escapeUnknownHtmlTags pre-pass]
+    B --> C[remark-gfm / remark-breaks]
+    C --> D[rehype-raw]
+    D --> E[rehypeStripUnsafe HAST sanitizer]
+    E --> F[rehype-highlight]
+    F --> G[Safe React Output]
+```
+
+> **Source:** [`simple-markdown-renderer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/simple-markdown-renderer.tsx)

package/src/components/ui/index.ts

@@ -176,6 +176,7 @@ export * from './ticket-attachments-list'
 export * from './ticket-note-card'
 export * from './ticket-notes-section'
 export * from './marquee-wall'
-export * from './markdown'
+export * from './simple-markdown-renderer'
+export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
 export * from './filter-pill-row'
 

package/src/components/ui/release-changelog-section.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Badge } from './badge';
 import { ChevronDown } from 'lucide-react';
 import { FadePreview } from './fade-preview';
-import { RichMarkdownRenderer } from './markdown';
+import { RichMarkdownRenderer } from './rich-markdown-renderer';
 import type { ChangelogEntry } from '../../types/product-release';
 
 interface ReleaseChangelogSectionProps {