StreamingMarkdownexperimental

<script lang="ts">
  import { StreamingMarkdown } from '@urbicon-ui/blocks';

  // A settled answer (streaming={false}): GFM tables and task lists render the
  // same whether the text arrived all at once or chunk by chunk.
  const content = `## Release checklist

| Step     | Owner    | Status  |
| -------- | -------- | ------- |
| Freeze   | Platform | Done    |
| Sign-off | QA       | Pending |

Remaining work:

- [x] Bump the version
- [x] Regenerate the docs
- [ ] Publish the tag
`;
</script>

<StreamingMarkdown {content} headingLevelStart={3} />

<script lang="ts">
  import { StreamingMarkdown, type CitationSource } from '@urbicon-ui/blocks';

  // Ids activate the matching `[id]` markers in the text; the markers render as
  // CitationChip (1-based, in array order). `[3]` below has no source, so it
  // stays plain text — prose like "step [3]" is never mangled.
  const sources: CitationSource[] = [
    {
      id: '1',
      title: 'Attention Is All You Need',
      url: 'https://arxiv.org/abs/1706.03762',
      snippet: 'The Transformer, based solely on attention mechanisms.'
    },
    {
      id: '2',
      title: 'Scaling Laws for Neural Language Models',
      url: 'https://arxiv.org/abs/2001.08361',
      snippet: 'Quality improves smoothly with model size, dataset size, and compute.'
    }
  ];

  const content = `Transformers replaced recurrence with self-attention [1], and later
work mapped how quality scales with model and dataset size [2]. A bare marker
like [3] with no matching source stays plain text.`;
</script>

<StreamingMarkdown {content} {sources} headingLevelStart={3} />

<script lang="ts">
  import { StreamingMarkdown } from '@urbicon-ui/blocks';

  // Untrusted model output. The strict-by-default URL policy neutralizes every
  // hostile shape without any extra configuration.
  const content = `A [normal link](https://ui.urbicon.de) renders as a real link.

A [scheme-smuggled link](javascript:alert(1)) becomes inert text with a dotted
underline — the URL never reaches the DOM.

External images are blocked and shown as an alt-text chip:
![remote tracker](https://evil.example/track.gif)

Raw HTML stays literal text, never parsed: <img src=x onerror="alert(1)">`;
</script>

<StreamingMarkdown {content} headingLevelStart={3} />

<script lang="ts">
  import { StreamingMarkdown } from '@urbicon-ui/blocks';

  const content = `Fenced code flows through your own renderer:

\`\`\`ts
export const answer = 42;
\`\`\`
`;
</script>

<!--
  A `renderers` snippet fully replaces the built-in renderer for one node type —
  the hook point for syntax highlighting, lightboxes, or router-aware links,
  without pulling any of those into the core. Here: a custom code presentation.
-->
{#snippet codeBlock({ code, lang }: { code: string; lang?: string; open?: boolean })}
  <div class="border-primary/40 rounded-contain mt-4 overflow-hidden border first:mt-0">
    <div class="bg-primary-subtle flex items-center justify-between px-3 py-1.5">
      <span class="text-primary-text font-mono text-xs">{lang ?? 'code'}</span>
      <span class="text-text-tertiary text-xs">custom renderer</span>
    </div>
    <pre class="text-text-primary overflow-x-auto px-3 py-2.5 font-mono text-sm">{code}</pre>
  </div>
{/snippet}

<StreamingMarkdown {content} renderers={{ codeBlock }} headingLevelStart={3} />