@webmcp-auto-ui/ui 2.5.23 → 2.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -50,7 +50,9 @@
     "@types/d3": "^7.4.3",
     "bits-ui": "^2.17.2",
     "clsx": "^2.1.1",
+    "highlight.js": "^11.10.0",
     "html-to-image": "^1.11.13",
+    "marked": "^14.1.3",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2"
   }

package/src/index.ts

@@ -12,6 +12,9 @@ export { default as GridLayout } from './primitives/GridLayout.svelte';
 export { default as List } from './primitives/List.svelte';
 export { default as Panel } from './primitives/Panel.svelte';
 export { default as Window } from './primitives/Window.svelte';
+export { default as MarkdownView } from './primitives/MarkdownView.svelte';
+export { default as CodeView } from './primitives/CodeView.svelte';
+export { renderMarkdown, highlightCode, createMarkdownRenderer } from './primitives/markdown-renderer.js';
 
 // Simple widgets (PJ blocks)
 export { default as StatBlock } from './widgets/simple/StatBlock.svelte';

package/src/primitives/CodeView.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { highlightCode } from './markdown-renderer.js';
+  import 'highlight.js/styles/github-dark.css';
+
+  interface Props {
+    source: string;
+    lang?: string;
+    class?: string;
+  }
+
+  let { source, lang = 'plaintext', class: className = '' }: Props = $props();
+  const highlighted = $derived(highlightCode(source ?? '', lang));
+</script>
+
+<pre class="code-view hljs-pre {className}"><code class="hljs language-{lang}">{@html highlighted}</code></pre>
+
+<style>
+  pre.code-view {
+    background: #0d1117;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.375rem;
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.7rem;
+    line-height: 1.5;
+  }
+  pre.code-view :global(code.hljs) {
+    display: block;
+    padding: 0.7rem;
+    background: transparent;
+  }
+</style>

package/src/primitives/MarkdownView.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { renderMarkdown } from './markdown-renderer.js';
+  import 'highlight.js/styles/github-dark.css';
+
+  interface Props {
+    source: string;
+    class?: string;
+  }
+
+  let { source, class: className = '' }: Props = $props();
+  const html = $derived(renderMarkdown(source ?? ''));
+</script>
+
+<div class="markdown-body {className}">
+  {@html html}
+</div>
+
+<style>
+  .markdown-body :global(h1),
+  .markdown-body :global(h2),
+  .markdown-body :global(h3),
+  .markdown-body :global(h4) {
+    font-weight: 600;
+    margin-top: 0.75rem;
+    margin-bottom: 0.4rem;
+    color: inherit;
+  }
+  .markdown-body :global(h1) { font-size: 1.05rem; }
+  .markdown-body :global(h2) { font-size: 0.95rem; }
+  .markdown-body :global(h3) { font-size: 0.85rem; }
+  .markdown-body :global(h4) { font-size: 0.8rem; }
+  .markdown-body :global(p) {
+    margin: 0.4rem 0;
+    line-height: 1.55;
+    font-size: 0.78rem;
+  }
+  .markdown-body :global(ul),
+  .markdown-body :global(ol) {
+    margin: 0.4rem 0;
+    padding-left: 1.4rem;
+    font-size: 0.78rem;
+    line-height: 1.55;
+  }
+  .markdown-body :global(li) { margin: 0.2rem 0; }
+  .markdown-body :global(code) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.72rem;
+    background: rgba(0, 0, 0, 0.25);
+    padding: 0.08rem 0.3rem;
+    border-radius: 0.2rem;
+  }
+  .markdown-body :global(pre.hljs-pre) {
+    background: #0d1117;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.375rem;
+    padding: 0.7rem;
+    margin: 0.5rem 0;
+    overflow-x: auto;
+  }
+  .markdown-body :global(pre.hljs-pre code) {
+    background: transparent;
+    padding: 0;
+    font-size: 0.7rem;
+    line-height: 1.5;
+  }
+  .markdown-body :global(a) {
+    color: rgb(96, 165, 250);
+    text-decoration: underline;
+  }
+  .markdown-body :global(strong) { font-weight: 600; }
+  .markdown-body :global(em) { font-style: italic; }
+  .markdown-body :global(blockquote) {
+    border-left: 3px solid rgba(255, 255, 255, 0.15);
+    padding-left: 0.7rem;
+    margin: 0.5rem 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .markdown-body :global(table) {
+    border-collapse: collapse;
+    margin: 0.5rem 0;
+    font-size: 0.72rem;
+  }
+  .markdown-body :global(th),
+  .markdown-body :global(td) {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 0.3rem 0.55rem;
+  }
+  .markdown-body :global(th) {
+    background: rgba(255, 255, 255, 0.04);
+    font-weight: 600;
+  }
+  .markdown-body :global(hr) {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 1rem 0;
+  }
+</style>

package/src/primitives/markdown-renderer.ts

@@ -0,0 +1,24 @@
+import { marked, Renderer, type Tokens } from 'marked';
+import hljs from 'highlight.js';
+
+export function createMarkdownRenderer(): Renderer {
+  const renderer = new Renderer();
+  renderer.code = function (this: Renderer, { text, lang }: Tokens.Code): string {
+    const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext';
+    const highlighted = hljs.highlight(text, { language, ignoreIllegals: true }).value;
+    return `<pre class="hljs-pre"><code class="hljs language-${language}">${highlighted}</code></pre>`;
+  };
+  return renderer;
+}
+
+const defaultRenderer = createMarkdownRenderer();
+marked.use({ renderer: defaultRenderer, gfm: true, breaks: false });
+
+export function renderMarkdown(source: string): string {
+  return marked.parse(source ?? '', { async: false }) as string;
+}
+
+export function highlightCode(source: string, lang: string = 'plaintext'): string {
+  const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext';
+  return hljs.highlight(source ?? '', { language, ignoreIllegals: true }).value;
+}