@c2-markdown-ui/svelte 0.0.0-stage → 0.4.3

package/README.md

@@ -1,3 +1,92 @@
-# Temporary Holding Version
+# @c2-markdown-ui/svelte
+**Transform Markdown into interactive Svelte components—instantly.**
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Turn static docs into live experiences users can click, select, and submit.
+
+✨ [Try the live demo](https://markdown-ui.com/) ✨
+
+## Get started in 30 seconds
+
+```bash
+npm install @c2-markdown-ui/svelte @c2-markdown-ui/marked-ext marked
+```
+
+```svelte
+<script>
+  import { MarkdownUI } from '@c2-markdown-ui/svelte';
+  import '@c2-markdown-ui/svelte/widgets.css';
+  import { Marked } from 'marked';
+  import { markedUiExtension } from '@c2-markdown-ui/marked-ext';
+
+  const marked = new Marked();
+  marked.use(markedUiExtension);
+
+  const markdown = `
+\`\`\`markdown-ui-widget
+select env [dev staging prod]
+\`\`\`
+  `;
+
+  function handleWidgetEvent(event) {
+    console.log('User selected:', event.detail);
+  }
+</script>
+
+<MarkdownUI 
+  html={marked.parse(markdown)} 
+  onwidgetevent={handleWidgetEvent} 
+/>
+```
+
+## What you can build
+
+**Quick inputs**
+```svelte
+text-input username "Username" "Enter name"
+button-group env [dev staging prod] dev
+select region [us-east us-west] us-east
+```
+
+**Complex forms**
+```svelte
+form deploy "Launch"
+  text-input name "App Name"
+  slider replicas 1 10 1 3
+  select env [dev prod] dev
+```
+
+**Interactive charts**
+```svelte
+chart-line
+title: Monthly Revenue
+height: 300
+Month,Sales,Target
+Jan,45000,50000
+Feb,52000,50000
+Mar,48000,55000
+```
+
+**Events made simple**
+```svelte
+function handleWidgetEvent(event) {
+  const { id, value } = event.detail;
+  // That's it - perfect event data
+}
+```
+
+## TypeScript ready
+
+Full type safety out of the box. All components and events are properly typed for the best developer experience.
+
+## Works everywhere
+
+**SSR-safe by design.** No special setup needed for SvelteKit or any Svelte framework.
+
+```svelte
+// Just import and use - SSR handled automatically
+import { MarkdownUI } from '@c2-markdown-ui/svelte';
+```
+
+**Compatibility:** Svelte 5+, SvelteKit, Vite, and all modern Svelte tooling.
+
+MIT © 2025

package/package.json

@@ -1,6 +1,38 @@
 {
+  "version": "0.4.3",
+  "description": "svelte renderer for markdown-ui",
   "name": "@c2-markdown-ui/svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "type": "module",
+  "main": "./src/lib/index.ts",
+  "exports": {
+    ".": "./src/lib/index.ts",
+    "./widgets.css": "./src/lib/widgets.css"
+  },
+  "files": [
+    "src/lib",
+    "README.md",
+    "!src/lib/assets"
+  ],
+  "svelte": "./src/lib/index.ts",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.36.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
+    "svelte": "^5.38.3",
+    "svelte-check": "^4.3.1"
+  },
+  "dependencies": {
+    "morphdom": "^2.7.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/lib/MarkdownUI.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import morphdom from 'morphdom';
+
+    // Import Widget to register the custom element
+    import './widgets/Widget.svelte';
+
+    let { onwidgetevent, html } = $props();
+    let container: HTMLElement | undefined = $state();
+
+    onMount(() => {
+        container?.addEventListener('widget-event', handleChange as EventListener);
+
+        return () => {
+            container?.removeEventListener('widget-event', handleChange as EventListener);
+        };
+    });
+
+    function handleChange(e: CustomEvent<{id: string, value: unknown}>) {
+        // 未传入 onwidgetevent 时静默忽略（表单等交互组件仍会触发 widget-event）
+        if (typeof onwidgetevent !== 'function') return;
+        onwidgetevent(e);
+    }
+
+    // 增量更新：用 morphdom 对比新旧 DOM，替换原先的 {@html html}——它在 html 变化时
+    // 销毁重建整个容器，导致所有 widget 的内部状态（用户已输入的值）被清空。
+    // 匹配规则：morphdom 默认按元素 id 匹配，markdown-ui-widget 均有唯一 id，
+    // 因此编辑属性/插入新组件时未变化的 widget 元素实例原样保留，输入状态不丢失。
+    let isFirstRender = true;
+    $effect(() => {
+        if (!container) return;
+        if (isFirstRender) {
+            container.innerHTML = html;
+            isFirstRender = false;
+            return;
+        }
+        // 注意：morphdom 会把 DocumentFragment 替换成 firstElementChild——空片段时得到
+        // null 直接崩溃（Cannot read properties of null (reading 'nodeType')），且会丢失
+        // 其余顶层节点。因此这里必须用普通元素包裹，配合 childrenOnly 对比子节点。
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = html;
+        morphdom(container, wrapper, {
+            childrenOnly: true,
+            onBeforeElUpdated(fromEl, toEl) {
+                // 正在聚焦的元素跳过更新（防止外部重渲染打断输入）
+                if (fromEl === document.activeElement) return false;
+                return true;
+            },
+            onBeforeElChildrenUpdated(fromEl) {
+                // 自定义元素的子内容由其内部 Svelte 实例渲染，新模板中的 widget 是空壳，
+                // 必须跳过子节点 diff——否则已渲染内容会被清空。
+                // 属性（content/id）仍正常更新，属性变化会驱动内部组件按新 props 重渲染
+                if (fromEl.tagName === 'MARKDOWN-UI-WIDGET') return false;
+                return true;
+            }
+        });
+    });
+</script>
+
+<div bind:this={container} class="widget-container"></div>

package/src/lib/Navbar.svelte

@@ -0,0 +1,144 @@
+<script>
+  import { page } from '$app/stores';
+  
+  const navItems = [
+    { href: '/', label: 'Home' },
+    { href: 'https://markdown-ui-chat.blueprintlab.io', label: 'Chat Demo' },
+    { href: '/streaming', label: 'Streaming Demo' },
+    { href: '/editor', label: 'Editor Demo' },
+    { href: '/spec', label: 'Specification' },
+    { href: 'https://github.com/BlueprintDesignLab/markdown-ui', label: 'github' }
+  ];
+</script>
+
+<nav class="navbar">
+  <div class="nav-container">
+    <h1 class="nav-title">C2 Markdown UI</h1>
+    <ul class="nav-links">
+      {#each navItems as item}
+        <li>
+          <a 
+            href={item.href} 
+            class:active={$page.url.pathname === item.href}
+            target={item.href.startsWith("https") ? '_blank' : undefined}
+            rel={item.href.startsWith("https") ? 'noopener noreferrer' : undefined}
+          >
+            {item.label}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</nav>
+
+<style>
+  .navbar {
+    background: #ffffff;
+    border-bottom: 1px solid #f0f0f0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  
+  .nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 4rem;
+  }
+  
+  .nav-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+    margin: 0;
+  }
+  
+  .nav-links {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 2rem;
+  }
+  
+  .nav-links a {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    transition: all 0.2s;
+  }
+  
+  .nav-links a:hover {
+    color: rgba(0, 0, 0, 0.88);
+    background: #fafafa;
+  }
+  
+  .nav-links a.active {
+    color: #1677ff;
+    background: #e6f4ff;
+  }
+  
+  @media (max-width: 768px) {
+    .nav-container {
+      padding: 0 1rem;
+      flex-direction: column;
+      height: auto;
+      gap: 1rem;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+    }
+    
+    .nav-title {
+      font-size: 1.25rem;
+    }
+    
+    .nav-links {
+      gap: 0.75rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    
+    .nav-links a {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.875rem;
+      min-width: 80px;
+      text-align: center;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .nav-container {
+      padding: 0 0.75rem;
+      gap: 0.75rem;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+    
+    .nav-title {
+      font-size: 1.1rem;
+    }
+    
+    .nav-links {
+      gap: 0.5rem;
+      width: 100%;
+    }
+    
+    .nav-links li {
+      flex: 1;
+    }
+    
+    .nav-links a {
+      padding: 0.625rem 0.5rem;
+      font-size: 0.8rem;
+      width: 100%;
+      display: block;
+    }
+  }
+  
+</style>

package/src/lib/WidgetEvents.svelte

@@ -0,0 +1,139 @@
+<script>
+  let { events = [], onClear = null, showClearButton = false } = $props();
+</script>
+
+<div class="events-panel">
+  <div class="panel-header">
+    <h3>Widget Events</h3>
+    <div class="header-controls">
+      <div class="events-count">
+        {events.length} events
+      </div>
+      {#if showClearButton && onClear}
+        <button class="clear-btn" onclick={onClear}>
+          Clear Events
+        </button>
+      {/if}
+    </div>
+  </div>
+  <div class="events-list">
+    {#if events.length === 0}
+      <p class="no-events">No events yet. Interact with widgets in the preview!</p>
+    {/if}
+    
+    {#each events as event}
+      <div class="event-item">
+        <div class="event-header">
+          <span class="event-id">ID: {event.id}</span>
+          <span class="event-time">{event.timestamp}</span>
+        </div>
+        <div class="event-value">
+          {JSON.stringify(event.value, null, 2)}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .events-panel {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #f0f0f0;
+    min-height: 0;
+    border-right: none;
+  }
+  
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: #ffffff;
+    border-bottom: 1px solid #f0f0f0;
+    flex-shrink: 0;
+  }
+  
+  .header-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  
+  .panel-header h3 {
+    margin: 0;
+    font-size: 1rem;
+    color: rgba(0, 0, 0, 0.88);
+  }
+  
+  .events-count {
+    font-size: 0.75rem;
+    color: rgba(0, 0, 0, 0.65);
+  }
+  
+  .events-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+  }
+  
+  .no-events {
+    color: rgba(0, 0, 0, 0.65);
+    font-style: italic;
+    text-align: center;
+    margin: 2rem 0;
+    font-size: 0.875rem;
+  }
+  
+  .event-item {
+    margin-bottom: 0.75rem;
+    padding: 0.75rem;
+    background: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 0.75rem;
+  }
+  
+  .event-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .event-id {
+    font-weight: 600;
+    color: #1677ff;
+  }
+  
+  .event-time {
+    font-size: 0.7rem;
+    color: rgba(0, 0, 0, 0.65);
+  }
+  
+  .event-value {
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+    background: #f5f5f5;
+    padding: 0.5rem;
+    border-radius: 4px;
+    color: rgba(0, 0, 0, 0.65);
+    word-break: break-all;
+    font-size: 0.7rem;
+    line-height: 1.4;
+  }
+  
+  .clear-btn {
+    padding: 0.25rem 0.75rem;
+    background: #ff4d4f;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  .clear-btn:hover {
+    background: #cf1322;
+  }
+</style>

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+// Reexport your entry components here
+export { default as MarkdownUI } from './MarkdownUI.svelte';

package/src/lib/widgets/Button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  interface Props {
+    label?: string;
+    /** 背景色（十六进制或 CSS 颜色名） */
+    color?: string;
+    /** 字体颜色（十六进制或 CSS 颜色名） */
+    textColor?: string;
+    /** 尺寸：small / medium / large，默认 medium */
+    size?: 'small' | 'medium' | 'large';
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: string) => void;
+  }
+  let { label = '按钮', color, textColor, size = 'medium', disabled = false, onchange }: Props = $props();
+
+  // 组合内联样式：背景色 + 字体颜色
+  const style = $derived(
+    [color ? `background-color: ${color};` : '', textColor ? `color: ${textColor};` : ''].join('') || undefined
+  );
+</script>
+
+<button
+  type="button"
+  class="widget-button size-{size}"
+  {style}
+  {disabled}
+  onclick={() => onchange(label)}
+>
+  {label}
+</button>

package/src/lib/widgets/ButtonGroup.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { parseChoices, type RemoteChoice } from './remoteChoices';
+  interface Props {
+    choices: string[];
+    label?: string;
+    default?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: string) => void;
+  }
+  let { choices, label = '', default: initial, disabled = false, onchange }: Props = $props();
+
+  const items = $derived(parseChoices(choices));
+  let selected = $state(initial ?? items[0]?.value ?? '');
+
+  function pick(item: RemoteChoice) {
+    if (disabled) return;
+    selected = item.value;
+    onchange(item.value);
+  }
+</script>
+
+<div class="widget-button-group">
+  {#if label}<label>{label}</label>{/if}
+  <div role="group" aria-label={label}>
+    {#each items as item (item.value)}
+      <button
+        type="button"
+        aria-pressed={selected === item.value}
+        {disabled}
+        onclick={() => pick(item)}
+      >
+        {item.label}
+      </button>
+    {/each}
+  </div>
+</div>