@flamingo-stack/openframe-frontend-core 0.0.468-snapshot.20260723140929 → 0.0.468

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,40 @@
+<!-- source-hash: cb258dc120396ef8c715487b0cdc1022 -->
+Client-side React component that renders LLM-generated markdown safely, combining `react-markdown` with a custom XSS sanitization pipeline and support for GitHub-flavored markdown, syntax highlighting, and embedded media.
+
+## Key Components
+
+### Security Pipeline
+- **`rehypeStripUnsafe()`** — Custom rehype plugin that strips dangerous HAST nodes after `rehype-raw` parsing. Removes `<script>`, `<style>`, `<object>`, event handler attributes (`on*`), `javascript:` / `data:` URIs, and `iframe srcdoc` vectors.
+- **`srcsetHasUnsafeCandidate()`** — Inspects every candidate URL in `srcset` attributes (not just the first), preventing multi-candidate injection attacks.
+- **`escapeUnknownHtmlTags()`** — Pre-processes markdown text to escape HTML tags not in the `SAFE_HTML_TAGS` allowlist, preventing LLM-emitted XML-style tags (e.g., `<ticket>`, `<their>`) from reaching React as unrecognized custom elements. Preserves code blocks and inline code spans.
+- **`cardAwareUrlTransform()`** — Extends `react-markdown`'s default URL sanitizer to allow the internal `card://` scheme for chat-card markers while keeping all other unsafe schemes blocked.
+
+### Constants & Regexes
+| Export | Purpose |
+|--------|---------|
+| `SAFE_HTML_TAGS` | Allowlist of permitted HTML5 tags forwarded to React |
+| `STRIP_ELEMENTS` | Tags removed entirely at the HAST level |
+| `EVENT_HANDLER_ATTR_RE` | Matches `on*` attribute names |
+| `JAVASCRIPT_URL_RE` / `DATA_URL_RE` | Detect unsafe URL schemes |
+| `TAG_LIKE_REGEX` | Parses HTML-like tags in markdown source |
+
+### Mermaid Support
+- `mermaidStyles` — Responsive CSS for Mermaid SVG diagrams using DM Sans font.
+
+## Usage Example
+
+```typescript
+import { SimpleMarkdownRenderer } from './simple-markdown-renderer';
+
+// Basic usage — content is sanitized automatically
+<SimpleMarkdownRenderer
+  content="## Hello\n\nThis is **LLM-generated** markdown with `code`."
+/>
+
+// The sanitizer prevents XSS from LLM output automatically:
+// "<script>alert(1)</script>" → stripped
+// "<their> tag" → escaped to &lt;their&gt;
+// "javascript:alert(1)" href → removed
+```
+
+> **Note:** This renderer is designed specifically for untrusted LLM output. The sanitization pipeline runs in layers: text pre-processing → `rehype-raw` → `rehypeStripUnsafe` → `rehype-highlight`, ensuring no XSS vectors survive even if one layer is bypassed. Community support is available on the [OpenMSP Slack](https://join.slack.com/t/openmsp/shared_invite/zt-36bl7mx0h-3~U2nFH6nqHqoTPXMaHEHA).

package/src/components/ui/index.ts

@@ -174,6 +174,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 {