@vanduo-oss/vd3-cbun 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to `@vanduo-oss/vd3-cbun` are documented here. This file
 tracks the PACKAGE only — never docs-site content. Per-component VERSION
 constants are listed alongside each bundle release.
 
+## 1.4.0 — 2026-08-16
+
+**code-editor** — snippet-safe first-party highlighter so docs snippets can drop
+highlight.js. `highlight(source, lang, { trailingNewline? })` defaults
+`trailingNewline` to `false` (no extra `\n` inside `<pre>`); pass `true` only
+for the textarea overlay line-count. New tokenizer-only subpath
+`@vanduo-oss/vd3-cbun/code-editor/highlight` exports `highlight`, `tokenize`,
+`renderTokensToHtml`, and `LANGUAGES` without evaluating the editor core or Vue
+wrapper. `vue` is a real SFC tokenizer (HTML `<script>` / `<style>` also embed
+JS/TS/CSS). JS/TS emit `${}` interpolations and `regex` tokens; CSS highlights
+selectors, pseudos, and `--vd-*` custom properties and no longer marks `a` in
+`.a:hover` as a property. `jsx` / `tsx` / `jsonc` stay JS / TS / JSON aliases
+(not dedicated grammars). The editor DOM overlay path is unchanged. Takes
+`VD_CODE_EDITOR_VERSION` `1.0.1 → 1.1.0`.
+
+Component versions in this release: **charts 1.1.0, code-editor 1.1.0, draw
+1.1.0, flowchart 1.2.0, hex-grid 1.0.1, music-player 1.0.1**.
+
 ## 1.3.2 — 2026-08-13
 
 **draw** — line shapes accept an optional `smooth` boolean; when true and there

package/README.md

@@ -8,13 +8,12 @@ tree-shakeable subpath exports. It replaces the four per-repo publishes
 (`@vanduo-oss/charts`, `@vanduo-oss/flowchart`, `@vanduo-oss/hex-grid`,
 `@vanduo-oss/music-player`) of the old line.
 
-**Status: 1.3.2.** Six Vue3-only component families — charts, code-editor, draw,
+**Status: 1.4.0.** Six Vue3-only component families — charts, code-editor, draw,
 flowchart, hex-grid, music-player — each on its own tree-shakeable subpath, with
-the esbuild metafile isolation guard in place. (1.3.0 adds chart mark-click
-emits + bounded draw/flowchart deserialization; 1.3.1 dark-aware flowchart
-chrome, icon toolbar, and short-parent sizing; 1.3.2 Catmull-Rom smooth lines
-and Vue shape CRUD on `VdDraw`; see the
-[changelog](./CHANGELOG.md).)
+the esbuild metafile isolation guard in place. (1.4.0 adds a snippet-safe
+`./code-editor/highlight` tokenizer entry, Vue SFC highlighting, and richer
+JS/CSS tokens; 1.3.2 Catmull-Rom smooth lines and Vue shape CRUD on `VdDraw`;
+see the [changelog](./CHANGELOG.md).)
 
 ## Install
 
@@ -36,6 +35,7 @@ import { VdChart } from '@vanduo-oss/vd3-cbun/charts';
 import '@vanduo-oss/vd3-cbun/charts/css';
 
 import { VdCodeEditor } from '@vanduo-oss/vd3-cbun/code-editor';
+import { highlight, tokenize, LANGUAGES } from '@vanduo-oss/vd3-cbun/code-editor/highlight';
 import '@vanduo-oss/vd3-cbun/code-editor/css';
 
 import { VdDraw } from '@vanduo-oss/vd3-cbun/draw';
@@ -51,6 +51,12 @@ import { VdMusicPlayer } from '@vanduo-oss/vd3-cbun/music-player';
 import '@vanduo-oss/vd3-cbun/music-player/css';
 ```
 
+`highlight(source, lang, { trailingNewline? })` defaults `trailingNewline` to
+`false` (snippet-safe inside `<pre>`). `./code-editor/highlight` does not load
+the editor or Vue wrapper. First-party languages include `vue` (SFC);
+`jsx` / `tsx` / `jsonc` are aliases that fall back to the JS / TS / JSON
+tokenizers — they are not dedicated grammars.
+
 The root import exposes only the per-component VERSION-constants map:
 
 ```js
@@ -84,8 +90,8 @@ Notes:
 The bundle's own semver (`package.json` version) is decoupled from the
 components inside it. Each component carries a VERSION constant tracked in
 `component-versions.json` at the repo root and asserted in tests against the
-exported `VD3_CBUN_VERSIONS` map. charts, code-editor, hex-grid, and music-player
-sit at `1.0.1`, draw at `1.1.0`; **flowchart continues its
+exported `VD3_CBUN_VERSIONS` map. code-editor sits at `1.1.0`; charts at
+`1.1.0`; hex-grid and music-player at `1.0.1`; draw at `1.1.0`; **flowchart continues its
 old-line lineage at `1.2.0`** because `VD_FLOWCHART_VERSION` is load-bearing —
 it is serialized into user documents via `toJSON().version`. A new component
 enters the manifest at `1.0.0` (`draw` did, in bundle 1.2.0).
@@ -132,7 +138,8 @@ tokens works — but it is the canonical source.)
 | `@vanduo-oss/vd3-cbun`                    | Root — the `VD3_CBUN_VERSIONS` per-component version map      |
 | `@vanduo-oss/vd3-cbun/charts`             | `VdChart` + typed chart wrappers, factories, scales, `resolveTheme` |
 | `@vanduo-oss/vd3-cbun/charts/css`         | Charts stylesheet (`dist/charts/vd3-charts.css`)             |
-| `@vanduo-oss/vd3-cbun/code-editor`        | `VdCodeEditor` + `VdCodeEditorCore`, `tokenize`, `highlight`, `LANGUAGES` |
+| `@vanduo-oss/vd3-cbun/code-editor`        | `VdCodeEditor` + `VdCodeEditorCore`, `tokenize`, `highlight`, `renderTokensToHtml`, `LANGUAGES` |
+| `@vanduo-oss/vd3-cbun/code-editor/highlight` | Tokenizer-only: `highlight`, `tokenize`, `renderTokensToHtml`, `LANGUAGES` (no editor / Vue) |
 | `@vanduo-oss/vd3-cbun/code-editor/css`    | Code-editor stylesheet (`dist/code-editor/vd3-code-editor.css`) |
 | `@vanduo-oss/vd3-cbun/draw`               | `VdDraw` + `VdDrawCore`, `BRUSH_PRESETS`, `DRAW_TOOLS`, `VD_DRAW_VERSION` |
 | `@vanduo-oss/vd3-cbun/draw/css`           | Draw stylesheet (`dist/draw/vd3-draw.css`)                   |

package/SKILL.md

@@ -49,24 +49,37 @@ CSS ships at `@vanduo-oss/vd3-cbun/charts/css`. `VD_CHARTS_VERSION` is `1.0.1`.
 
 ```js
 import { VdCodeEditor, VdCodeEditorCore } from '@vanduo-oss/vd3-cbun/code-editor';
+import { highlight, tokenize, LANGUAGES } from '@vanduo-oss/vd3-cbun/code-editor/highlight';
 import '@vanduo-oss/vd3-cbun/code-editor/css';
+
+const html = highlight(source, 'vue'); // snippet-safe; no extra trailing newline
+const overlay = highlight(source, 'javascript', { trailingNewline: true });
 ```
 
 `VdCodeEditor` is the Vue 3 wrapper (`v-model` binds the contents); the
 framework-agnostic editor core shares the class name, so it is re-exported as
 `VdCodeEditorCore`. It is a lightweight, first-party **textarea-overlay** editor
 — a native `<textarea>` over a `<pre>` highlight layer painted by homegrown,
-ReDoS-safe tokenizers (JavaScript/TypeScript, HTML, CSS, JSON, Markdown, Shell,
-Python) — with a line-number gutter + active-line highlight, auto-indent and
-bracket/quote auto-close, read-only mode, a copy button, a placeholder, and a
-large-input performance guard. No third-party editor and no runtime dependency
-beyond `vue`; rendering is escaping-safe and `innerHTML`-free, and the wrapper is
-SSR-safe (DOM touched only on mount). The subpath also re-exports the pure
-`tokenize`, `highlight`, and `LANGUAGES` helpers plus `VD_CODE_EDITOR_VERSION`.
-Key props: `language`, `readOnly`, `lineNumbers`, `tabSize`, `wrap`,
-`placeholder`, `maxLength`; events: `update:modelValue`, `change`, `focus`,
-`blur`, `ready`. CSS ships at `@vanduo-oss/vd3-cbun/code-editor/css`.
-`VD_CODE_EDITOR_VERSION` is `1.0.0`.
+ReDoS-safe tokenizers (JavaScript/TypeScript, HTML, Vue SFC, CSS, JSON,
+Markdown, Shell, Python) — with a line-number gutter + active-line highlight,
+auto-indent and bracket/quote auto-close, read-only mode, a copy button, a
+placeholder, and a large-input performance guard. No third-party editor and no
+runtime dependency beyond `vue`; rendering is escaping-safe and `innerHTML`-free,
+and the wrapper is SSR-safe (DOM touched only on mount).
+
+`./code-editor/highlight` is the **tokenizer-only** entry (`highlight`,
+`tokenize`, `renderTokensToHtml`, `LANGUAGES`) — it does not evaluate the editor
+core or Vue wrapper. `highlight(source, lang, { trailingNewline? })` defaults
+`trailingNewline` to `false` (safe inside `<pre>`); pass `true` only for the
+textarea overlay line-count. `jsx` / `tsx` / `jsonc` are aliases that fall back
+to the JS / TS / JSON tokenizers — they are not dedicated grammars. `vue` is a
+real SFC tokenizer (`<script>` / `<style>` embed, `{{ }}`, `v-*` / `@` / `:`).
+
+The main `./code-editor` subpath also re-exports those helpers plus
+`VD_CODE_EDITOR_VERSION`. Key props: `language`, `readOnly`, `lineNumbers`,
+`tabSize`, `wrap`, `placeholder`, `maxLength`; events: `update:modelValue`,
+`change`, `focus`, `blur`, `ready`. CSS ships at
+`@vanduo-oss/vd3-cbun/code-editor/css`. `VD_CODE_EDITOR_VERSION` is `1.1.0`.
 
 ## Draw
 

package/dist/code-editor/core.d.ts

@@ -8,6 +8,7 @@ export type CodeEditorLanguage =
   | 'javascript'
   | 'typescript'
   | 'html'
+  | 'vue'
   | 'css'
   | 'json'
   | 'markdown'
@@ -49,8 +50,24 @@ export interface Token {
  */
 export function tokenize(source: string, language: string): Token[];
 
-/** Tokenize + render to an escaped HTML string (never routed to innerHTML). */
-export function highlight(source: string, language: string): string;
+/**
+ * When `trailingNewline` is true, append an extra `\n` if `source` is empty
+ * or already ends with `\n` (textarea line-count). Default false — snippet-safe
+ * inside `<pre>`.
+ */
+export interface HighlightOptions {
+  trailingNewline?: boolean;
+}
+
+/** Render tokens to an escaped HTML string of `vd-tk-*` spans (no extra newline). */
+export function renderTokensToHtml(tokens: Token[]): string;
+
+/**
+ * Tokenize + render to an escaped HTML string (never routed to innerHTML).
+ * Does not append an extra trailing newline unless `options.trailingNewline`
+ * is true.
+ */
+export function highlight(source: string, language: string, options?: HighlightOptions): string;
 
 export interface CodeEditorSelection {
   start: number;