comark 0.3.0 → 0.3.2

package/dist/utils/index.js

@@ -38,10 +38,12 @@ visitor) {
             const res = visitor(node);
             if (res === false) {
                 // remove the node from the parent
+                ;
                 parent.splice(index, 1);
                 return true; // signal that node was removed
             }
             if (res !== undefined) {
+                ;
                 parent[index] = res;
                 currentNode = res;
             }
@@ -72,13 +74,29 @@ visitor) {
     }
 }
 // #region String Utils
+export function indent(text, { ignoreFirstLine = false, level = 1, width } = {}) {
+    const pad = width ? ' '.repeat(width) : '  '.repeat(level);
+    return text
+        .split('\n')
+        .map((line, index) => {
+        if (ignoreFirstLine && index === 0) {
+            return line;
+        }
+        return line ? pad + line : line;
+    })
+        .join('\n');
+}
 /**
  * Convert a string to pascal case
  * @param str - The string to convert
  * @returns The pascal case string
  */
 export function pascalCase(str) {
-    return str ? splitByCase(str).map(p => p[0].toUpperCase() + p.slice(1)).join('') : '';
+    return str
+        ? splitByCase(str)
+            .map((p) => (p ? p[0].toUpperCase() + p.slice(1) : ''))
+            .join('')
+        : '';
 }
 /**
  * Convert a string to kebab case
@@ -86,7 +104,11 @@ export function pascalCase(str) {
  * @returns The kebab case string
  */
 export function kebabCase(str) {
-    return str ? splitByCase(str).map(p => p.toLowerCase()).join('-') : '';
+    return str
+        ? splitByCase(str)
+            .map((p) => p.toLowerCase())
+            .join('-')
+        : '';
 }
 /**
  * Convert a string to camel case
@@ -123,7 +145,7 @@ function splitByCase(str) {
         const charCode = char.charCodeAt(0);
         const isNumber = charCode >= 48 && charCode <= 57; // '0' to '9'
         // Fast uppercase check using character codes
-        const isUpper = isNumber ? void 0 : (charCode >= 65 && charCode <= 90); // 'A' to 'Z'
+        const isUpper = isNumber ? void 0 : charCode >= 65 && charCode <= 90; // 'A' to 'Z'
         if (previousSplitter === false) {
             if (previousUpper === false && isUpper === true) {
                 parts.push(buff);

package/package.json

@@ -1,26 +1,33 @@
 {
   "name": "comark",
-  "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte and HTML",
-  "author": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/comarkdown/comark.git"
-  },
-  "bugs": {
-    "url": "https://github.com/comarkdown/comark/issues"
-  },
-  "homepage": "https://comark.dev",
   "keywords": [
     "markdown",
     "mdc",
     "parser",
+    "react",
     "streaming",
-    "vue",
-    "react"
+    "vue"
+  ],
+  "homepage": "https://comark.dev",
+  "bugs": {
+    "url": "https://github.com/comarkdown/comark/issues"
+  },
+  "license": "MIT",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/comarkdown/comark.git"
+  },
+  "files": [
+    "dist",
+    "skills"
   ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./plugins/*": "./dist/plugins/*.js",
@@ -28,29 +35,31 @@
     "./parse": "./dist/parse.js",
     "./render": "./dist/render.js"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "skills"
-  ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "stub": "node ../../scripts/stub.mjs",
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest run",
-    "prepack": "tsc",
-    "release": "release-it",
-    "release:dry": "release-it --dry-run"
+  "dependencies": {
+    "entities": "^8.0.0",
+    "htmlparser2": "^12.0.0",
+    "js-yaml": "^4.1.1",
+    "markdown-exit": "1.0.0-beta.9"
+  },
+  "devDependencies": {
+    "@json-render/core": "^0.16.0",
+    "@shikijs/twoslash": "^4.0.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/markdown-it": "^14.1.2",
+    "github-slugger": "^2.0.0",
+    "hast-util-to-string": "^3.0.1",
+    "minimark": "0.2.0",
+    "tsx": "^4.21.0",
+    "twoslash": "^0.3.6",
+    "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "beautiful-mermaid": "catalog:",
-    "katex": "catalog:",
-    "shiki": "catalog:"
+    "beautiful-mermaid": "^1.1.3",
+    "katex": "^0.16.45",
+    "shiki": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "shiki": {
@@ -63,23 +72,12 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@json-render/core": "catalog:",
-    "@shikijs/twoslash": "catalog:",
-    "@types/js-yaml": "catalog:",
-    "@types/markdown-it": "catalog:",
-    "github-slugger": "catalog:",
-    "hast-util-to-string": "catalog:",
-    "minimark": "catalog:",
-    "tsx": "catalog:",
-    "twoslash": "catalog:",
-    "vitest": "catalog:"
-  },
-  "dependencies": {
-    "@comark/markdown-it": "catalog:",
-    "entities": "catalog:",
-    "htmlparser2": "catalog:",
-    "js-yaml": "catalog:",
-    "markdown-exit": "catalog:"
+  "scripts": {
+    "stub": "node ../../scripts/stub.mjs",
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "release": "release-it",
+    "release:dry": "release-it --dry-run"
   }
-}
+}

package/skills/skills/comark/AGENTS.md

@@ -1,261 +0,0 @@
-# Comark — AI Agents & LLM Streaming
-
-A guide for using Comark in AI agent and LLM-powered applications where markdown is generated incrementally by a language model.
-
-## Why Comark for AI?
-
-LLMs stream markdown token-by-token. Standard markdown parsers expect complete input — they fail or produce broken output on partial streams. Comark was built to handle exactly this:
-
-- **`autoClose`** (default: `true`) — incomplete syntax like `**bold text` is automatically closed on every parse, so partial tokens always render correctly
-- **Streaming mode** — re-renders efficiently as content arrives
-- **Caret indicator** — shows a live cursor during generation
-- **ANSI rendering** — styled terminal output for CLI agents
-
----
-
-## Vue
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Comark } from '@comark/vue'
-
-const content = ref('')
-const streaming = ref(false)
-
-async function generate(prompt: string) {
-  content.value = ''
-  streaming.value = true
-
-  const res = await fetch('/api/chat', {
-    method: 'POST',
-    body: JSON.stringify({ prompt }),
-  })
-
-  const reader = res.body!.getReader()
-  const decoder = new TextDecoder()
-
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) break
-    content.value += decoder.decode(value, { stream: true })
-  }
-
-  streaming.value = false
-}
-</script>
-
-<template>
-  <Comark :streaming="streaming" caret>{{ content }}</Comark>
-</template>
-```
-
----
-
-## React
-
-```tsx
-import { useState } from 'react'
-import { Comark } from '@comark/react'
-
-export default function Chat() {
-  const [content, setContent] = useState('')
-  const [streaming, setStreaming] = useState(false)
-
-  async function generate(prompt: string) {
-    setContent('')
-    setStreaming(true)
-
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      body: JSON.stringify({ prompt }),
-    })
-
-    const reader = res.body!.getReader()
-    const decoder = new TextDecoder()
-
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      setContent(prev => prev + decoder.decode(value, { stream: true }))
-    }
-
-    setStreaming(false)
-  }
-
-  return <Comark streaming={streaming} caret>{content}</Comark>
-}
-```
-
----
-
-## Svelte
-
-```svelte
-<script lang="ts">
-  import { Comark } from '@comark/svelte'
-
-  let content = $state('')
-  let streaming = $state(false)
-
-  async function generate(prompt: string) {
-    content = ''
-    streaming = true
-
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      body: JSON.stringify({ prompt }),
-    })
-
-    const reader = res.body!.getReader()
-    const decoder = new TextDecoder()
-
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      content += decoder.decode(value, { stream: true })
-    }
-
-    streaming = false
-  }
-</script>
-
-<Comark markdown={content} {streaming} caret />
-```
-
----
-
-## Terminal / CLI Agents
-
-Use `@comark/ansi` to render LLM markdown output in terminal-based agents:
-
-```typescript
-import { log } from '@comark/ansi'
-
-// Print a complete LLM response to stdout with ANSI styling
-await log(llmResponse)
-```
-
-For streaming terminal output, use `createLog` with a custom `write` function:
-
-```typescript
-import { createLog } from '@comark/ansi'
-
-const logStream = createLog({
-  write: (s) => process.stdout.write(s),
-})
-
-// Call after each chunk to show partial output
-await logStream(partialMarkdown)
-```
-
----
-
-## Caret Customization
-
-The `caret` prop appends a blinking cursor to the last text node while `streaming` is `true`. Customize it with a CSS class:
-
-```vue
-<Comark :streaming="streaming" :caret="{ class: 'animate-blink' }">{{ content }}</Comark>
-```
-
-```tsx
-<Comark streaming={streaming} caret={{ class: 'animate-blink' }}>{content}</Comark>
-```
-
-```svelte
-<Comark markdown={content} {streaming} caret={{ class: 'animate-blink' }} />
-```
-
----
-
-## With Custom Components
-
-If your LLM produces Comark component syntax (e.g., `::alert`), register components before streaming begins:
-
-```vue
-<script setup lang="ts">
-import { Comark } from '@comark/vue'
-import Alert from './Alert.vue'
-import CodeBlock from './CodeBlock.vue'
-</script>
-
-<template>
-  <Comark :components="{ alert: Alert, pre: CodeBlock }" :streaming="streaming" caret>
-    {{ content }}
-  </Comark>
-</template>
-```
-
----
-
-## With Syntax Highlighting
-
-Syntax highlighting works during streaming — each re-parse will highlight newly completed code blocks:
-
-```vue
-<script setup lang="ts">
-import { Comark } from '@comark/vue'
-import highlight from '@comark/vue/plugins/highlight'
-import githubDark from '@shikijs/themes/github-dark'
-
-const plugins = [highlight({ themes: { light: githubDark, dark: githubDark } })]
-</script>
-
-<template>
-  <Suspense>
-    <Comark :plugins="plugins" :streaming="streaming" caret>{{ content }}</Comark>
-  </Suspense>
-</template>
-```
-
-```tsx
-import { Comark } from '@comark/react'
-import highlight from '@comark/react/plugins/highlight'
-import githubDark from '@shikijs/themes/github-dark'
-
-const plugins = [highlight({ themes: { light: githubDark, dark: githubDark } })]
-
-export default function Chat({ content, streaming }) {
-  return (
-    <Comark plugins={plugins} streaming={streaming} caret>
-      {content}
-    </Comark>
-  )
-}
-```
-
----
-
-## defineComarkComponent for AI Chat
-
-Pre-configure a Comark component for your AI chat UI once, then reuse it everywhere:
-
-```typescript
-// comark.ts
-import { defineComarkComponent } from '@comark/vue'
-import highlight from '@comark/vue/plugins/highlight'
-import math, { Math } from '@comark/vue/plugins/math'
-import githubDark from '@shikijs/themes/github-dark'
-import Alert from './components/Alert.vue'
-
-export const ChatComark = defineComarkComponent({
-  name: 'ChatComark',
-  plugins: [
-    math(),
-    highlight({ themes: { light: githubDark, dark: githubDark } }),
-  ],
-  components: { Math, alert: Alert },
-  autoClose: true,
-})
-```
-
-```vue
-<template>
-  <ChatComark :streaming="streaming" caret>{{ content }}</ChatComark>
-</template>
-```
-
----
-
-[← Back to Skills Guide](./SKILL.md)