@flamingo-stack/openframe-frontend-core 0.0.498-1506.4000.1 → 0.0.498

package/src/components/navigation/header.tsx

@@ -129,8 +129,9 @@ export function Header({ config, platform }: HeaderProps) {
             leftIcon={item.icon}
             rightIcon={item.badge}
             onClick={() => {
+              // Single-open: opening a dropdown closes any other open one —
+              // only one nav dropdown may be expanded at a time.
               setOpenDropdowns(prev => ({
-                ...prev,
                 [item.id]: !prev[item.id],
               }));
             }}

package/src/components/navigation/mingo-ai-button.tsx

@@ -51,7 +51,10 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
         // Unified ODS top-navigation cell (Figma 2797-6808 desktop /
         // 2797-7275 mobile): full-height cell with a leading divider,
         // transparent at rest so it inherits the bar's background.
-        'group/mingo relative flex h-full shrink-0 items-center border-l border-ods-border bg-transparent px-[var(--spacing-system-m)] transition-colors duration-200 hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        // No hover background on the cell: the animated ring + shimmer are
+        // the ONLY hover treatment (a bg flip on top read as a double
+        // animation).
+        'group/mingo relative flex h-full shrink-0 items-center border-l border-ods-border bg-transparent px-[var(--spacing-system-m)] focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
         className,
       )}
     >

package/src/components/navigation/mobile-nav-panel.tsx

@@ -103,12 +103,12 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
         className={cn(
           "fixed z-[9999] rounded-lg shadow-xl",
           config.className ? "" : "bg-ods-card border border-ods-border",
-          // Responsive positioning and sizing — LEFT-anchored from md, under
-          // the burger cell that sits at the left edge of the unified
-          // top-navigation (it used to be right-anchored when the burger
-          // lived on the right).
+          // Responsive positioning and sizing — LEFT-anchored from md, flush
+          // under the burger cell at the left edge of the unified
+          // top-navigation (a larger inset read as a stray gap between the
+          // burger and its panel).
           "right-2 left-2 md:right-auto",
-          "md:left-6 md:w-[400px] md:max-w-[calc(100vw-3rem)]",
+          "md:left-2 md:w-[400px] md:max-w-[calc(100vw-1rem)]",
           // Small-viewport (svh) sizing anchored below the measured header —
           // 100vh overflowed under mobile browser chrome, leaving the bottom
           // entries and footer unreachable while the body was scroll-locked.

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 {