@flamingo-stack/openframe-frontend-core 0.0.481 → 0.0.482

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

@@ -0,0 +1,45 @@
+<!-- source-hash: 7a62ccb3d8f27e5378b7ce733e2d1ece -->
+Renders rich markdown content with support for Mermaid diagrams, syntax-highlighted code blocks, social media embeds, video players, and OG link previews. Acts as the primary markdown rendering surface for the OpenFrame platform, processing both standard markdown and custom shortcodes before passing content to `react-markdown`.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `RichMarkdownRenderer` | Component | Main renderer wrapping content with runtime context |
+| `MermaidDiagram` | Component | Lazy-loads and renders Mermaid diagram SVGs with dark-mode theming |
+| `processShortcodes` | Function | Pre-processes `{{youtube:ID}}`, `{% youtube %}`, thumbnail links, and bare URLs into embed HTML before markdown parsing |
+
+**Plugin stack:**
+- `remark-gfm` — GitHub Flavored Markdown (tables, task lists, strikethrough)
+- `remark-breaks` — Newline-to-`<br>` conversion
+- `rehype-highlight` — Syntax highlighting via highlight.js
+- `rehype-raw` — Allows injected HTML from shortcode processing
+
+**Supported embed types:** YouTube, Mux/MP4 video, Reddit, Twitter/X, LinkedIn, Figma, OG link previews, Mermaid diagrams, responsive images.
+
+## Usage Example
+
+```typescript
+import { RichMarkdownRenderer } from './rich-markdown-renderer';
+
+// Basic usage
+<RichMarkdownRenderer content={markdownString} />
+
+// With runtime overrides
+<RichMarkdownRenderer
+  content={markdownString}
+  runtime={{ disableEmbeds: false }}
+/>
+```
+
+**Supported shortcode formats:**
+
+```text
+{{youtube:dQw4w9WgXcQ}}
+{% youtube id="dQw4w9WgXcQ" /%}
+[![Title](https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+```
+
+Bare URLs on their own line are auto-detected and converted to OG preview cards or video embeds at render time.
+
+> **Source:** [`rich-markdown-renderer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/rich-markdown-renderer.tsx)

package/src/components/ui/.scroll-fade.md

@@ -0,0 +1,56 @@
+<!-- source-hash: 72d38f3f2a026cc157c5d6ce7d23525f -->
+Provides a scroll-state tracking hook and edge-fade overlay component for adding "scroll shadow" indicators to scrollable containers.
+
+## Key Components
+
+### `useScrollFade<T>()`
+
+Hook that observes a scrollable element and reports whether content overflows at the top or bottom edge. Uses `ResizeObserver` to detect container size changes and `MutationObserver` to detect content growth (e.g., appended list items that change `scrollHeight` without resizing the container).
+
+**Returns:**
+
+| Property | Type | Description |
+|---|---|---|
+| `scrollRef` | `RefObject<T>` | Attach to the scrollable element |
+| `fadeTop` | `boolean` | `true` when scrolled away from the top |
+| `fadeBottom` | `boolean` | `true` when content continues below the visible area |
+| `update` | `() => void` | Manual re-measure; wire to `onScroll` |
+
+### `ScrollFadeOverlay`
+
+Absolutely-positioned overlay that renders a gradient fade at a specified edge. Must be placed inside a `relative` wrapper alongside the scrollable element.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `edge` | `'top' \| 'bottom'` | — | Which edge to render the fade on |
+| `visible` | `boolean` | — | Controls opacity via CSS transition |
+| `color` | `string` | `var(--color-bg)` | Surface color the gradient fades into |
+| `className` | `string` | — | Additional Tailwind classes |
+
+## Usage Example
+
+```typescript
+import { useScrollFade, ScrollFadeOverlay } from './scroll-fade'
+
+function ChatList({ messages }: { messages: string[] }) {
+  const { scrollRef, fadeTop, fadeBottom, update } = useScrollFade<HTMLDivElement>()
+
+  return (
+    <div className="relative">
+      <ScrollFadeOverlay edge="top" visible={fadeTop} />
+
+      <div ref={scrollRef} onScroll={update} className="overflow-y-auto h-96">
+        {messages.map((msg, i) => (
+          <div key={i}>{msg}</div>
+        ))}
+      </div>
+
+      <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
+    </div>
+  )
+}
+```
+
+> The `color` prop should match the background surface behind the list — override it when the list sits on a card or modal rather than the page background.

package/src/components/ui/.search-input.md

@@ -1,48 +1,66 @@
-<!-- source-hash: e33f919319929a558fb7204fa5689d69 -->
-A client-side search input component with debounced querying, filter chip management, keyboard navigation, and a popover-based results dropdown.
+<!-- source-hash: 58919dce29eb76ba4f2de97d75e7c643 -->
+A client-side search input component with debounced querying, keyboard navigation, grouped results, filter chips, and auto-limiting tag display.
 
 ## Key Components
 
-### Types
-- **`SearchResult`** — Shape of a single search result (`id`, `title`, `description`, `icon`, `type`, `metadata`)
-- **`FilterChipData`** — Inline filter chip definition with optional variant (`selected`, `category`, `subcategory`, `tag`)
-- **`SearchInputProps`** — Full prop surface for the component (controlled/uncontrolled, debounce, grouping, chip limits, adornments)
-
-### Exported Component
-- **`SearchInput`** — Main component combining:
-  - Debounced input via `useDebounce`
-  - Auto-limiting visible chips via `useAutoLimitTags`
-  - Radix UI `Popover` for the results dropdown
-  - Radix UI `ScrollArea` for scrollable results
-  - Keyboard navigation (`ArrowUp`, `ArrowDown`, `Enter`, `Escape`, `Backspace`)
-  - Grouped results support via `groupBy` prop
-  - Modifier-key-aware result selection (supports cmd/ctrl/middle-click pass-through)
-  - Hidden chips overflow popup via `HiddenTagsPopup`
+### Interfaces
+- **`SearchResult`** — Shape of each result item (`id`, `title`, `description`, `icon`, `type`, `metadata`, etc.)
+- **`FilterChipData`** — Filter chip descriptor with `id`, `label`, and optional `variant`
+- **`SearchInputProps`** — Full props interface for the component; see table below
+
+### Helpers
+- **`chipVariantToTagVariant`** — Maps `FilterChipData.variant` to the `Tag` component's `variant` prop
+
+### Main Export
+- **`SearchInput`** — The primary component
+
+| Prop | Type | Default | Purpose |
+|---|---|---|---|
+| `value` / `defaultValue` | `string` | `""` | Controlled / uncontrolled input value |
+| `debounceMs` | `number` | `300` | Debounce delay before `onChange` fires |
+| `results` | `SearchResult[]` | `[]` | Dropdown result items |
+| `filterChips` | `FilterChipData[]` | `[]` | Inline filter tags before the input |
+| `limitTags` | `number \| "auto"` | `"auto"` | Max visible chips (auto-measures width) |
+| `groupBy` | `(r) => string` | — | Groups results by a derived key |
+| `minQueryLength` | `number` | `2` | Min chars before showing dropdown |
+| `onResultSelect` | `(result, modifiers) => void` | — | Called on row select with modifier-key state |
 
 ## Usage Example
 
 ```typescript
-import { SearchInput, SearchResult } from "./search-input"
+import { SearchInput, SearchResult } from "@openframe/ui"
 
 const results: SearchResult[] = [
-  { id: "1", title: "Ticket #1042", description: "Printer offline", type: "ticket" },
-  { id: "2", title: "Client: Acme Corp", type: "client" },
+  { id: "1", title: "Dashboard", description: "Main view", type: "page" },
+  { id: "2", title: "Devices",   description: "All endpoints",  type: "page" },
 ]
 
-<SearchInput
-  placeholder="Search tickets, clients..."
-  debounceMs={300}
-  results={results}
-  minQueryLength={2}
-  onResultSelect={(result, modifiers) => {
-    if (modifiers?.metaKey) {
-      openInNewTab(result.path)
-    } else {
-      navigate(result.path)
-    }
-  }}
-  filterChips={[{ id: "open", label: "Status: Open", variant: "selected" }]}
-  onFilterRemove={(id) => removeFilter(id)}
-  limitTags="auto"
-/>
-```
+export function GlobalSearch() {
+  const [query, setQuery] = React.useState("")
+
+  return (
+    <SearchInput
+      value={query}
+      onChange={setQuery}
+      results={results}
+      debounceMs={300}
+      minQueryLength={2}
+      onResultSelect={(result, modifiers) => {
+        if (modifiers?.metaKey) {
+          // Open in background tab
+          window.open(`/${result.path}`, "_blank")
+        } else {
+          router.push(`/${result.path}`)
+        }
+      }}
+      filterChips={[
+        { id: "online", label: "Online", variant: "selected" },
+      ]}
+      onFilterRemove={(id) => console.log("Remove filter", id)}
+      groupBy={(r) => r.type ?? "Other"}
+    />
+  )
+}
+```
+
+**Source:** [`search-input.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/search-input.tsx)

package/src/components/ui/.select.md

@@ -1,19 +1,20 @@
-<!-- source-hash: 223f5a1c3c624e5773b99c85b384c3b9 -->
-Accessible, styled select dropdown component built on Radix UI's Select primitive, integrated with the OpenFrame Design System (ODS) token system and `FieldWrapper` for label/error support.
+<!-- source-hash: e68a74e73e3bc8ce916bdb785ba7581e -->
+Accessible, themed Select component built on Radix UI primitives, providing a fully styled dropdown with label, error, and validation state support via `FieldWrapper`.
 
 ## Key Components
 
 | Export | Description |
-|--------|-------------|
-| `Select` | Root select primitive (Radix `SelectPrimitive.Root`) |
-| `SelectTrigger` | Styled trigger button with `invalid`, `label`, and `error` props; wraps in `FieldWrapper` |
-| `SelectContent` | Dropdown panel rendered in a portal with open/close animations |
-| `SelectItem` | Individual option row with checkmark indicator and hover/disabled states |
-| `SelectGroup` | Groups related options (Radix `SelectPrimitive.Group`) |
-| `SelectLabel` | Label for an option group |
-| `SelectValue` | Displays the currently selected value placeholder |
-| `SelectSeparator` | Horizontal divider between options |
-| `SelectScrollUpButton` / `SelectScrollDownButton` | Scroll controls for long option lists |
+|---|---|
+| `Select` | Root component (`SelectPrimitive.Root`) — manages open/value state |
+| `SelectTrigger` | Button that opens the dropdown; accepts `label`, `error`, and `invalid` props for form integration via `FieldWrapper` |
+| `SelectContent` | Portal-rendered dropdown panel with enter/exit animations and scroll buttons |
+| `SelectItem` | Individual option row; renders a `CheckIcon` accent indicator when selected |
+| `SelectGroup` | Groups related items; pairs with `SelectLabel` |
+| `SelectLabel` | Section heading within a group |
+| `SelectValue` | Displays the current selected value inside the trigger |
+| `SelectSeparator` | Horizontal divider between items or groups |
+| `SelectScrollUpButton` | Scroll control rendered at the top of an overflowing list |
+| `SelectScrollDownButton` | Scroll control rendered at the bottom of an overflowing list |
 
 ## Usage Example
 
@@ -28,10 +29,10 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-// Basic usage with label and error validation
+// Basic usage
 <Select>
-  <SelectTrigger label="Region" error={errors.region?.message}>
-    <SelectValue placeholder="Select a region..." />
+  <SelectTrigger label="Region" error={errors.region}>
+    <SelectValue placeholder="Select a region" />
   </SelectTrigger>
   <SelectContent>
     <SelectGroup>
@@ -42,22 +43,20 @@ import {
   </SelectContent>
 </Select>
 
-// Invalid / error state
+// With invalid state
 <Select>
-  <SelectTrigger label="Priority" invalid error="Priority is required">
-    <SelectValue placeholder="Select priority..." />
+  <SelectTrigger
+    label="Priority"
+    error="Priority is required"
+    invalid
+  >
+    <SelectValue placeholder="Select priority" />
   </SelectTrigger>
   <SelectContent>
-    <SelectItem value="low">Low</SelectItem>
-    <SelectItem value="medium">Medium</SelectItem>
     <SelectItem value="high">High</SelectItem>
+    <SelectItem value="low">Low</SelectItem>
   </SelectContent>
 </Select>
 ```
 
-## Notes
-
-- **Validation states**: Pass `error` (string) or `invalid` (boolean) to `SelectTrigger` to apply `ods-error` border and icon tinting.
-- **ODS tokens**: All colors use `ods-*` CSS custom properties (`ods-card`, `ods-accent`, `ods-error`, etc.) for consistent theming.
-- **Content width**: Dropdown matches trigger width via `--radix-select-trigger-width` CSS variable.
-- **Accessibility**: Built on Radix UI — keyboard navigation, ARIA roles, and focus management are handled automatically.
+**Validation states:** The trigger border switches to `ods-error` when `invalid` is truthy or `error` is a non-empty string, and switches to `ods-accent` on open when valid. The dropdown width automatically matches the trigger via the `--radix-select-trigger-width` CSS variable.

package/src/components/ui/.service-card.md

@@ -1,20 +1,27 @@
-<!-- source-hash: fd0b3b382332c759225974101fb17198 -->
-Displays structured service information in a card layout with labeled rows that support copy, reveal (masked secrets), and external link actions.
+<!-- source-hash: 726aed7bdab22617295842e04fb380be -->
+A display card component for presenting service information with labeled rows that support copy-to-clipboard, external link opening, and secret value masking/revealing.
 
 ## Key Components
 
-- **`ServiceCard`** — Main card component rendering a header (icon, title, subtitle, tag) and a list of data rows
-- **`ServiceCardRowItem`** — Internal row component handling per-row interactivity (reveal/copy/open)
-- **`MaskedValue`** — Renders a value as bullet dots (`•`) until revealed
-- **`ServiceCardProps`** — Props interface for the card
-- **`ServiceCardRow`** — Defines a single row with optional label, secret masking, monospace formatting, href, and action overrides
-- **`ServiceCardTag`** — Badge displayed in the card header
-- **`ServiceCardRowAction`** — Flags controlling which actions (`copy`, `open`, `reveal`) appear per row
+| Export | Type | Description |
+|---|---|---|
+| `ServiceCard` | Component | Main card with header (icon, title, subtitle, tag) and a list of data rows |
+| `ServiceCardRowItem` | Component (internal) | Individual row with value display and action buttons |
+| `MaskedValue` | Component (internal) | Renders a value as dots or plaintext based on reveal state |
+| `ServiceCardProps` | Interface | Props for `ServiceCard` |
+| `ServiceCardRow` | Type | Row data: label, value, href, secret flag, monospace flag, and per-row action overrides |
+| `ServiceCardTag` | Type | Badge label displayed in the card header |
+| `ServiceCardRowAction` | Type | Flags controlling which actions (`copy`, `open`, `reveal`) are available per row |
+
+**Default row action behavior:**
+- `copy` — always enabled
+- `open` — enabled when `row.href` is provided
+- `reveal` — enabled when `row.isSecret` is `true`
 
 ## Usage Example
 
 ```typescript
-import { ServiceCard } from '@your-org/ui'
+import { ServiceCard } from '@openframe/ui'
 
 <ServiceCard
   title="PostgreSQL"
@@ -24,27 +31,26 @@ import { ServiceCard } from '@your-org/ui'
     {
       label: 'Host',
       value: 'db.example.com',
-      actions: { copy: true },
+      actions: { copy: true, open: false },
     },
     {
       label: 'Password',
-      value: 's3cr3tpassword',
+      value: 'super-secret-password',
       isSecret: true,
-      copyValue: 's3cr3tpassword',
+      monospace: true,
     },
     {
       label: 'Console',
       value: 'Open dashboard',
       href: 'https://console.example.com',
-      actions: { copy: false, open: true },
     },
   ]}
 />
 ```
 
-## Behavior Notes
+## Notes
 
-- **Secrets** default to masked display; `reveal` action toggles visibility
-- **Copy** action defaults to `true`; uses `copyValue` if provided, otherwise falls back to `value`
-- **Open** action is automatically enabled when a `href` is present
-- Falls back to the **OpenFrameLogo** if no `icon` is supplied
+- Defaults to the `OpenFrameLogo` icon when no `icon` prop is supplied.
+- Secret rows display a bullet mask (`••••••••••••`) until the eye toggle is clicked.
+- Copy feedback uses a `CheckIcon` that reverts after a short delay via the `useCopyToClipboard` hook.
+- External links always open with `noopener,noreferrer` for security.

package/src/components/ui/.sheet.md

@@ -1,51 +1,51 @@
-<!-- source-hash: b12df94d463c0d388bcb0c53bac39207 -->
-A slide-out panel component built on top of Radix UI's Dialog primitive, supporting four directional variants (top, bottom, left, right) with animated open/close transitions.
+<!-- source-hash: 907cdfd44e785932b3ad911c463d284f -->
+A slide-out panel component built on Radix UI Dialog primitives, providing accessible sheet/drawer UI with animated entry and exit from any screen edge.
 
 ## Key Components
 
 | Export | Description |
-|--------|-------------|
-| `Sheet` | Root component wrapping Radix Dialog root |
+|---|---|
+| `Sheet` | Root component wrapping Radix UI Dialog |
 | `SheetTrigger` | Button/element that opens the sheet |
 | `SheetClose` | Element that closes the sheet |
-| `SheetPortal` | Renders sheet outside DOM hierarchy |
-| `SheetOverlay` | Semi-transparent backdrop (`z-[9997]`) |
-| `SheetContent` | Main panel container with side variants (`top`, `bottom`, `left`, `right`), defaults to `right` |
-| `SheetHeader` | Flex column wrapper for title/description |
-| `SheetFooter` | Flex row wrapper for action buttons |
-| `SheetTitle` | Styled heading (`text-lg font-semibold`) |
-| `SheetDescription` | Styled subtitle (`text-sm text-muted-foreground`) |
+| `SheetPortal` | Renders sheet content outside the DOM hierarchy |
+| `SheetOverlay` | Dimmed backdrop rendered behind the sheet |
+| `SheetContent` | Main panel container; accepts `side` variant (`top`, `bottom`, `left`, `right`) |
+| `SheetHeader` | Layout wrapper for title and description at the top |
+| `SheetFooter` | Layout wrapper for action buttons at the bottom |
+| `SheetTitle` | Accessible title styled with `text-h3` |
+| `SheetDescription` | Accessible description styled with `text-h6 text-muted-foreground` |
+
+**Variants (`sheetVariants`):** `side` — `top` | `bottom` | `left` | `right` (default: `right`)
 
 ## Usage Example
 
 ```typescript
 import {
   Sheet,
-  SheetTrigger,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetDescription,
   SheetFooter,
-  SheetClose,
-} from "./sheet"
+  SheetTrigger,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
 
-export function SettingsPanel() {
+export function SettingsSheet() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <button>Open Settings</button>
+        <Button variant="outline">Open Settings</Button>
       </SheetTrigger>
       <SheetContent side="right">
         <SheetHeader>
           <SheetTitle>Settings</SheetTitle>
-          <SheetDescription>Manage your preferences.</SheetDescription>
+          <SheetDescription>Manage your preferences here.</SheetDescription>
         </SheetHeader>
         {/* content */}
         <SheetFooter>
-          <SheetClose asChild>
-            <button>Close</button>
-          </SheetClose>
+          <Button type="submit">Save Changes</Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
@@ -53,4 +53,4 @@ export function SettingsPanel() {
 }
 ```
 
-> The `side` prop on `SheetContent` accepts `"top" | "bottom" | "left" | "right"` and drives both positioning and slide animation direction. The close button (`X` icon) is automatically rendered inside `SheetContent`.
+> **Source:** [`sheet.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/sheet.tsx) — Requires Radix UI (`@radix-ui/react-dialog`), `class-variance-authority`, and `lucide-react`.

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

@@ -1,40 +1,52 @@
-<!-- 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.
+<!-- 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
 
-### 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.
+### Rehype Plugins
 
-### 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 |
+- **`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`.
 
-### Mermaid Support
-- `mermaidStyles` — Responsive CSS for Mermaid SVG diagrams using DM Sans font.
+- **`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 usage — content is sanitized automatically
+// Basic rendering with safe LLM output
+<SimpleMarkdownRenderer content="## Hello\n\nThis is **markdown** with `code`." />
+
+// With authenticated image sources and link resolution
 <SimpleMarkdownRenderer
-  content="## Hello\n\nThis is **LLM-generated** markdown with `code`."
+  content={llmMarkdownOutput}
+  resolveLink={(href) => ({ url: href, label: href })}
 />
+```
+
+## Security Model
+
+The sanitization runs in two layers:
 
-// 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
+```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]
 ```
 
-> **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).
+> **Source:** [`simple-markdown-renderer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/simple-markdown-renderer.tsx)

package/src/components/ui/.slack-channel-chip.md

@@ -0,0 +1,49 @@
+<!-- source-hash: d746a22911a18c216f0712e84500c22e -->
+Inline UI chip that renders a Slack icon alongside a channel name, optionally wrapped in a hyperlink to the channel's web deep link.
+
+## Key Components
+
+### `SlackChannelChip`
+A server-component-safe React functional component with no hooks or state. Composes a `SlackIcon` with a formatted channel label and conditionally wraps the output in an anchor tag.
+
+### `SlackChannelChipProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `name` | `string \| null` | Channel name without `#` prefix. Falls back to `"Slack"` when absent. |
+| `href` | `string \| null` | Web deep link (e.g. `https://app.slack.com/client/T…/C…`). Omit to render unlinked. |
+| `className` | `string` | Extra classes merged onto the chip `<span>`. |
+
+## Usage Example
+
+```typescript
+import { SlackChannelChip } from './slack-channel-chip';
+
+// Linked chip with channel name
+<SlackChannelChip
+  name="general"
+  href="https://app.slack.com/client/T01234/C56789"
+/>
+// Renders: 🔗 [<SlackIcon> #general]
+
+// Unlinked fallback (no href)
+<SlackChannelChip name="alerts" />
+// Renders: <SlackIcon> #alerts
+
+// Minimal fallback (no name, no href)
+<SlackChannelChip />
+// Renders: <SlackIcon> Slack
+
+// With custom styling
+<SlackChannelChip
+  name="incidents"
+  href="https://app.slack.com/client/T01234/C99999"
+  className="text-sm font-medium"
+/>
+```
+
+## Behavior Notes
+
+- **No `href`** → renders a plain `<span>`, no anchor tag.
+- **No `name`** → label falls back to `"Slack"` (no `#` prefix).
+- **Linked** → opens in a new tab with `rel="noopener noreferrer"` and adds `hover:underline`.
+- Safe to use in React Server Components — contains no client-side hooks or state.