@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/code/TabbedMarkdownEditor.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import "svelte";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import { cn } from "../../utils.js";
+import CodeEditor from "./CodeEditor.svelte";
+let { code = $bindable(""), value = $bindable("edit"), editLabel = "Edit", previewLabel = "Preview", previewEmpty = "Nothing to preview yet.", previewClass = "prose prose-neutral max-w-none dark:prose-invert", previewWrapperClass = "", editorWrapperClass = "rounded-md border bg-background/80", tabsClass = "", tabsListClass = "", renderers = undefined, markdownOptions = undefined, editorMinHeight: editorMinHeightInput = "100px", editorProps = undefined, editorPlaceholder = "Write your content in Markdown…", editorResizable = false, editorCanCopy = false, editorDeferMount = false, disabled = false, editorMonacoSetup = undefined, toolbar, preview, class: className = "", ...restProps } = $props();
+function isPixelCount(size) {
+	return typeof size === "number";
+}
+const editorMinHeight = $derived.by(() => {
+	const raw = editorMinHeightInput ?? "100px";
+	return isPixelCount(raw) ? `${raw}px` : String(raw);
+});
+const computedEditorProps = $derived.by(() => {
+	const overrides = editorProps ?? {};
+	const minHeight = overrides.minHeight ?? editorMinHeight;
+	return {
+		...overrides,
+		minHeight,
+		language: "markdown",
+		canCopy: editorCanCopy,
+		placeholder: editorPlaceholder,
+		resizable: editorResizable,
+		disabled: disabled || overrides.disabled === true,
+		deferMount: editorDeferMount,
+		monacoSetup: editorMonacoSetup
+	};
+});
+let markdownPreviewComponent;
+function loadMarkdownPreview() {
+	return markdownPreviewComponent ??= import("./TabbedMarkdownPreview.svelte").then((module) => module.default);
+}
+</script>
+
+<Tabs
+	bind:value
+	class={cn('w-full', className, tabsClass)}
+	aria-disabled={disabled ? 'true' : undefined}
+	{...restProps}
+>
+	<TabsList class={cn('grid w-full grid-cols-2', tabsListClass)}>
+		<TabsTrigger value="edit" {disabled}>{editLabel}</TabsTrigger>
+		<TabsTrigger value="preview" {disabled}>{previewLabel}</TabsTrigger>
+	</TabsList>
+	<TabsContent value="edit" class="flex flex-col gap-2">
+		{#if toolbar}
+			<div class="flex items-center justify-end gap-2">
+				{@render toolbar(value)}
+			</div>
+		{/if}
+		<div class={cn('overflow-hidden', editorWrapperClass)}>
+			<CodeEditor bind:code {...computedEditorProps} />
+		</div>
+	</TabsContent>
+	<TabsContent value="preview" class="mt-2">
+		<div class={cn('rounded-md border bg-background/80 p-4', previewWrapperClass)}>
+			{#if preview}
+				{@render preview(code ?? '')}
+			{:else if value === 'preview' && code?.trim()}
+				{#await loadMarkdownPreview()}
+					<p class="text-sm text-muted-foreground" role="status">Loading preview…</p>
+				{:then MarkdownPreview}
+					<MarkdownPreview
+						source={code}
+						{renderers}
+						options={markdownOptions}
+						class={cn(previewClass)}
+					/>
+				{:catch}
+					<p class="text-sm text-destructive" role="alert">Preview could not be loaded.</p>
+				{/await}
+			{:else}
+				<p class="text-sm text-muted-foreground">{previewEmpty}</p>
+			{/if}
+		</div>
+	</TabsContent>
+</Tabs>

package/dist/lib/components/code/TabbedMarkdownEditor.svelte.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type Snippet } from 'svelte';
+import type { SvelteMarkdownProps } from '@humanspeak/svelte-markdown';
+import { Tabs } from '../ui/tabs';
+import CodeEditor from './CodeEditor.svelte';
+import type { MonacoSetupDetail } from './monaco-setup';
+type TabValue = 'edit' | 'preview';
+type SizeInput = string | number | undefined;
+type CodeEditorProps = ComponentProps<typeof CodeEditor>;
+interface Props {
+    code?: string;
+    value?: TabValue;
+    editLabel?: string;
+    previewLabel?: string;
+    previewEmpty?: string;
+    previewClass?: string;
+    previewWrapperClass?: string;
+    editorWrapperClass?: string;
+    tabsClass?: string;
+    tabsListClass?: string;
+    renderers?: SvelteMarkdownProps['renderers'];
+    markdownOptions?: SvelteMarkdownProps['options'];
+    editorMinHeight?: SizeInput;
+    editorProps?: Partial<CodeEditorProps>;
+    editorPlaceholder?: string;
+    editorResizable?: boolean;
+    editorCanCopy?: boolean;
+    editorDeferMount?: boolean;
+    disabled?: boolean;
+    editorMonacoSetup?: ((detail: MonacoSetupDetail) => void) | undefined;
+    toolbar?: Snippet<[TabValue]>;
+    preview?: Snippet<[string]>;
+}
+type $$ComponentProps = Props & Omit<ComponentProps<typeof Tabs>, keyof Props | 'ref'>;
+declare const TabbedMarkdownEditor: import("svelte").Component<$$ComponentProps, {}, "value" | "code">;
+type TabbedMarkdownEditor = ReturnType<typeof TabbedMarkdownEditor>;
+export default TabbedMarkdownEditor;

package/dist/lib/components/code/TabbedMarkdownPreview.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import SvelteMarkdown from "@humanspeak/svelte-markdown";
+import CodeRenderer from "../markdown/CodeRenderer.svelte";
+let { source, renderers = undefined, options = undefined, class: className = "" } = $props();
+</script>
+
+<SvelteMarkdown
+	{source}
+	renderers={{ code: CodeRenderer, ...renderers }}
+	{options}
+	class={className}
+/>

package/dist/lib/components/code/TabbedMarkdownPreview.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type SvelteMarkdownProps } from '@humanspeak/svelte-markdown';
+interface Props {
+    source: string;
+    renderers?: SvelteMarkdownProps['renderers'];
+    options?: SvelteMarkdownProps['options'];
+    class?: string;
+}
+declare const TabbedMarkdownPreview: import("svelte").Component<Props, {}, "">;
+type TabbedMarkdownPreview = ReturnType<typeof TabbedMarkdownPreview>;
+export default TabbedMarkdownPreview;

package/dist/lib/components/code/ai-errors.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Refusal for the AI writing assist boundary.
+ *
+ * This allows UI components to show contextual error messages and actions
+ * (e.g., "AI not configured - Open setup") when AI generation fails.
+ */
+import { CapabilityError } from '@vibesdotdev/kernel';
+export interface WritingAssistAction {
+    label: string;
+    href: string;
+}
+/** The refusal reason: no AI generator was configured for the editor. */
+export declare const WRITING_ASSIST_UNCONFIGURED = "writing-assist-unconfigured";
+export declare class WritingAssistBoundaryError extends CapabilityError {
+    readonly action: WritingAssistAction | null;
+    constructor(message: string, options?: {
+        action?: WritingAssistAction | null;
+        cause?: unknown;
+    });
+}
+/**
+ * Default AI generator that provides a helpful error when no generator is configured.
+ * This allows the UI to show the button, then explain how to wire it up when clicked.
+ */
+export declare function defaultAiGenerator(_opts: {
+    prompt: string;
+    context: string;
+}): AsyncGenerator<string>;

package/dist/lib/components/code/ai-errors.js

@@ -0,0 +1,48 @@
+/**
+ * Refusal for the AI writing assist boundary.
+ *
+ * This allows UI components to show contextual error messages and actions
+ * (e.g., "AI not configured - Open setup") when AI generation fails.
+ */
+import { CapabilityError } from '@vibesdotdev/kernel';
+import { KIT_CATALOG_APP_ORIGINS } from "../../config/kit.config.descriptor.js";
+/** The refusal reason: no AI generator was configured for the editor. */
+export const WRITING_ASSIST_UNCONFIGURED = 'writing-assist-unconfigured';
+/** The documentation path for the writing assist, under the declared docs origin. */
+const WRITING_ASSIST_DOCS_PATH = '/components/code#ai-assist';
+export class WritingAssistBoundaryError extends CapabilityError {
+    action;
+    constructor(message, options) {
+        const causeOpts = {};
+        if (options?.cause !== undefined)
+            causeOpts.cause = options.cause;
+        super(message, 'UNAVAILABLE', {
+            reason: WRITING_ASSIST_UNCONFIGURED,
+            recoveryHint: 'Pass an aiGenerate prop to CodeEditor to configure the writing assist.',
+            ...causeOpts
+        });
+        this.name = 'WritingAssistBoundaryError';
+        this.action = options?.action ?? null;
+    }
+}
+/**
+ * Default AI generator that provides a helpful error when no generator is configured.
+ * This allows the UI to show the button, then explain how to wire it up when clicked.
+ */
+// Fails before producing tokens; the generator shape is the CodeEditor contract.
+export async function* defaultAiGenerator(_opts) {
+    yield* unconfiguredAiTokens();
+}
+/** A token stream whose first read rejects with the not-configured boundary error. */
+function unconfiguredAiTokens() {
+    return {
+        [Symbol.asyncIterator]: () => ({
+            next: () => Promise.reject(new WritingAssistBoundaryError('AI writing assistant is not configured. Pass an aiGenerate prop to CodeEditor.', {
+                action: {
+                    label: 'View documentation',
+                    href: `${KIT_CATALOG_APP_ORIGINS.production.docs}${WRITING_ASSIST_DOCS_PATH}`
+                }
+            }))
+        })
+    };
+}

package/dist/lib/components/code/appearance.d.ts

@@ -0,0 +1,8 @@
+export type CodeAppearance = 'light' | 'dark' | 'system';
+export declare function parseCssColorChannels(value: string | null | undefined): {
+    r: number;
+    g: number;
+    b: number;
+    alpha: number;
+} | null;
+export declare function isCssColorDark(value: string | null | undefined): boolean | null;

package/dist/lib/components/code/appearance.js

@@ -0,0 +1,67 @@
+export function parseCssColorChannels(value) {
+    const color = (value ?? '').trim().toLowerCase();
+    if (!color || color === 'transparent')
+        return null;
+    const parseChannel = (channel) => channel.endsWith('%') ? (Number(channel.slice(0, -1)) / 100) * 255 : Number(channel);
+    const parseUnitInterval = (channel) => channel.endsWith('%') ? Number(channel.slice(0, -1)) / 100 : Number(channel);
+    const parseAlpha = (channel) => channel === undefined ? 1 : parseUnitInterval(channel);
+    const clampChannel = (channel) => Math.max(0, Math.min(255, channel));
+    const rgb = /^rgba?\(\s*([.\d]+%?)(?:\s*,\s*|\s+)([.\d]+%?)(?:\s*,\s*|\s+)([.\d]+%?)(?:\s*(?:,|\/)\s*([.\d]+%?))?\s*\)$/.exec(color);
+    if (rgb) {
+        const alpha = parseAlpha(rgb[4]);
+        if (alpha <= 0)
+            return null;
+        return {
+            r: parseChannel(rgb[1]),
+            g: parseChannel(rgb[2]),
+            b: parseChannel(rgb[3]),
+            alpha
+        };
+    }
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color);
+    if (hex) {
+        const raw = hex[1];
+        const expanded = raw.length === 3
+            ? raw
+                .split('')
+                .map((char) => `${char}${char}`)
+                .join('')
+            : raw;
+        return {
+            r: Number.parseInt(expanded.slice(0, 2), 16),
+            g: Number.parseInt(expanded.slice(2, 4), 16),
+            b: Number.parseInt(expanded.slice(4, 6), 16),
+            alpha: 1
+        };
+    }
+    const srgb = /^color\(\s*srgb\s+([.\d]+)\s+([.\d]+)\s+([.\d]+)(?:\s*\/\s*([.\d]+))?\s*\)$/.exec(color);
+    if (srgb) {
+        const alpha = parseAlpha(srgb[4]);
+        if (alpha <= 0)
+            return null;
+        return {
+            r: Number(srgb[1]) * 255,
+            g: Number(srgb[2]) * 255,
+            b: Number(srgb[3]) * 255,
+            alpha
+        };
+    }
+    const oklch = /^oklch\(\s*([.\d]+%?)\s+[-.\d]+%?\s+[-.\d]+(?:deg|rad|turn)?(?:\s*\/\s*([.\d]+%?))?\s*\)$/.exec(color);
+    if (oklch) {
+        const alpha = parseAlpha(oklch[2]);
+        if (alpha <= 0)
+            return null;
+        const lightness = parseUnitInterval(oklch[1]);
+        const channel = clampChannel(lightness * 255);
+        return { r: channel, g: channel, b: channel, alpha };
+    }
+    return null;
+}
+export function isCssColorDark(value) {
+    const channels = parseCssColorChannels(value);
+    if (!channels)
+        return null;
+    const { r, g, b } = channels;
+    const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    return luminance < 0.5;
+}

package/dist/lib/components/code/code-editor-selection.d.ts

@@ -0,0 +1,4 @@
+export interface CodeEditorSelection {
+    readonly anchorOffset: number;
+    readonly headOffset: number;
+}

package/dist/lib/components/code/code-editor-selection.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/code/code-editor-surface.d.ts

@@ -0,0 +1,15 @@
+import type { editor } from 'monaco-editor';
+export type CodeEditorSurface = 'field' | 'workbench';
+/**
+ * Consumer-facing Monaco construction options, from the owner's type.
+ * `MonacoEditor` and `MonacoEditorCore` keep `model`, `value`, `language`,
+ * `readOnly`, `domReadOnly`, `ariaLabel` and `theme` protected from these
+ * (see `safeViewOptions` in MonacoEditorCore.svelte).
+ */
+export type CodeEditorOptions = editor.IStandaloneEditorConstructionOptions;
+/**
+ * Presentation-only Monaco defaults for a full workspace document plane.
+ * Consumers may override these options; model, authority, language, labeling,
+ * and theme remain protected by MonacoEditor.
+ */
+export declare function codeEditorSurfaceOptions(surface: CodeEditorSurface, fontFamily?: string): editor.IStandaloneEditorConstructionOptions;

package/dist/lib/components/code/code-editor-surface.js

@@ -0,0 +1,42 @@
+/**
+ * Presentation-only Monaco defaults for a full workspace document plane.
+ * Consumers may override these options; model, authority, language, labeling,
+ * and theme remain protected by MonacoEditor.
+ */
+export function codeEditorSurfaceOptions(surface, fontFamily) {
+    if (surface !== 'workbench')
+        return {};
+    return {
+        wordWrap: 'off',
+        fontFamily,
+        fontSize: 13,
+        lineHeight: 20,
+        fontLigatures: true,
+        lineNumbersMinChars: 3,
+        glyphMargin: false,
+        folding: true,
+        showFoldingControls: 'mouseover',
+        stickyScroll: { enabled: true, maxLineCount: 5 },
+        padding: { top: 12, bottom: 12 },
+        renderLineHighlight: 'all',
+        renderWhitespace: 'selection',
+        bracketPairColorization: { enabled: true, independentColorPoolPerBracketType: true },
+        guides: {
+            bracketPairs: true,
+            bracketPairsHorizontal: 'active',
+            highlightActiveBracketPair: true,
+            indentation: true,
+            highlightActiveIndentation: true
+        },
+        minimap: { enabled: false },
+        overviewRulerBorder: false,
+        fixedOverflowWidgets: true,
+        smoothScrolling: false,
+        cursorSmoothCaretAnimation: 'off',
+        scrollbar: {
+            useShadows: false,
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10
+        }
+    };
+}

package/dist/lib/components/code/highlight.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Lightweight static syntax highlighting for READ-ONLY code display.
+ *
+ * Read-only surfaces (markdown code blocks, diff lines, file viewers) must not
+ * pull the Monaco editor runtime — Monaco stays reserved for actual editors
+ * (MonacoEditor / CodeEditor / ObjectEditor / TabbedMarkdownEditor). This module
+ * lazy-loads lezer parsers from the CodeMirror packages the kit's editor path
+ * already ships and emits HTML spans with the stable `tok-*` classes produced
+ * by `classHighlighter`. Token colors live in `CodeTokenTheme.svelte`.
+ *
+ * The language registry is CURATED to the same language set the Monaco
+ * colorize path supported (see the old monaco-loader contribution list) so the
+ * app bundle only grows by a handful of small parser chunks — deliberately NOT
+ * `@codemirror/language-data`, which drags ~150 language chunks into every
+ * consumer build.
+ */
+export declare function escapeHighlightHtml(value: string): string;
+/**
+ * Highlight `code` for the given kit language id, returning one HTML string
+ * per display line (spans carry `tok-*` classes). Returns `null` when no
+ * parser is available so callers fall back to escaped plain text.
+ */
+export declare function highlightCodeToLines(code: string, languageId: string): Promise<string[] | null>;
+/**
+ * Highlight a single display line (diff rows, tokenized inline snippets).
+ * Returns `null` when no parser is available for the language.
+ */
+export declare function highlightLineToHtml(code: string, languageId: string): Promise<string | null>;

package/dist/lib/components/code/highlight.js

@@ -0,0 +1,151 @@
+/**
+ * Lightweight static syntax highlighting for READ-ONLY code display.
+ *
+ * Read-only surfaces (markdown code blocks, diff lines, file viewers) must not
+ * pull the Monaco editor runtime — Monaco stays reserved for actual editors
+ * (MonacoEditor / CodeEditor / ObjectEditor / TabbedMarkdownEditor). This module
+ * lazy-loads lezer parsers from the CodeMirror packages the kit's editor path
+ * already ships and emits HTML spans with the stable `tok-*` classes produced
+ * by `classHighlighter`. Token colors live in `CodeTokenTheme.svelte`.
+ *
+ * The language registry is CURATED to the same language set the Monaco
+ * colorize path supported (see the old monaco-loader contribution list) so the
+ * app bundle only grows by a handful of small parser chunks — deliberately NOT
+ * `@codemirror/language-data`, which drags ~150 language chunks into every
+ * consumer build.
+ */
+import { settle } from '../../attempt';
+import { kitLogger } from '../../kit-logger';
+const logger = kitLogger('code-highlight');
+/** Own keys only: `constructor`, `toString` and friends are not table entries. */
+function isTableKey(table, key) {
+    return Object.hasOwn(table, key);
+}
+const HTML_ESCAPES = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+};
+export function escapeHighlightHtml(value) {
+    return value.replace(/[&<>"']/g, (match) => isTableKey(HTML_ESCAPES, match) ? HTML_ESCAPES[match] : match);
+}
+async function legacy(load) {
+    const [{ StreamLanguage }, mode] = await Promise.all([import('@codemirror/language'), load()]);
+    return StreamLanguage.define(mode.parser);
+}
+/**
+ * Canonical kit language id (the output space of `resolveCodeLanguage`) →
+ * parser loader. Ids without an entry render as escaped plain text — the same
+ * graceful degradation the Monaco path had for unknown languages.
+ */
+const LANGUAGE_LOADERS = {
+    // Mainstream languages use the pure @lezer/* parsers directly — no
+    // @codemirror/language wrapper, which would drag the CodeMirror editor
+    // core (@codemirror/view + state) into the display-only path.
+    javascript: () => import('@lezer/javascript').then((m) => ({ parser: m.parser.configure({ dialect: 'jsx' }) })),
+    typescript: () => import('@lezer/javascript').then((m) => ({
+        parser: m.parser.configure({ dialect: 'jsx ts' })
+    })),
+    json: () => import('@lezer/json').then((m) => ({ parser: m.parser })),
+    css: () => import('@lezer/css').then((m) => ({ parser: m.parser })),
+    html: () => import('@lezer/html').then((m) => ({ parser: m.parser })),
+    markdown: () => import('@lezer/markdown').then((m) => ({ parser: m.parser.configure(m.GFM) })),
+    mdx: () => import('@lezer/markdown').then((m) => ({ parser: m.parser.configure(m.GFM) })),
+    python: () => legacy(() => import('@codemirror/legacy-modes/mode/python').then((m) => ({ parser: m.python }))),
+    ruby: () => legacy(() => import('@codemirror/legacy-modes/mode/ruby').then((m) => ({ parser: m.ruby }))),
+    rust: () => legacy(() => import('@codemirror/legacy-modes/mode/rust').then((m) => ({ parser: m.rust }))),
+    go: () => legacy(() => import('@codemirror/legacy-modes/mode/go').then((m) => ({ parser: m.go }))),
+    sql: () => legacy(() => import('@codemirror/legacy-modes/mode/sql').then((m) => ({ parser: m.standardSQL }))),
+    shell: () => legacy(() => import('@codemirror/legacy-modes/mode/shell').then((m) => ({ parser: m.shell }))),
+    yaml: () => legacy(() => import('@codemirror/legacy-modes/mode/yaml').then((m) => ({ parser: m.yaml }))),
+    xml: () => legacy(() => import('@codemirror/legacy-modes/mode/xml').then((m) => ({ parser: m.xml }))),
+    less: () => legacy(() => import('@codemirror/legacy-modes/mode/css').then((m) => ({ parser: m.less }))),
+    scss: () => legacy(() => import('@codemirror/legacy-modes/mode/css').then((m) => ({ parser: m.sCSS }))),
+    c: () => legacy(() => import('@codemirror/legacy-modes/mode/clike').then((m) => ({ parser: m.c }))),
+    cpp: () => legacy(() => import('@codemirror/legacy-modes/mode/clike').then((m) => ({ parser: m.cpp }))),
+    csharp: () => legacy(() => import('@codemirror/legacy-modes/mode/clike').then((m) => ({ parser: m.csharp }))),
+    java: () => legacy(() => import('@codemirror/legacy-modes/mode/clike').then((m) => ({ parser: m.java }))),
+    ini: () => legacy(() => import('@codemirror/legacy-modes/mode/properties').then((m) => ({ parser: m.properties }))),
+    dockerfile: () => legacy(() => import('@codemirror/legacy-modes/mode/dockerfile').then((m) => ({ parser: m.dockerFile })))
+};
+/**
+ * Common markdown-fence spellings that `resolveCodeLanguage` passes through
+ * verbatim (it only normalizes a small alias set).
+ */
+const LANGUAGE_ID_ALIASES = {
+    py: 'python',
+    rb: 'ruby',
+    rs: 'rust',
+    golang: 'go',
+    yml: 'yaml',
+    'c++': 'cpp',
+    cs: 'csharp',
+    docker: 'dockerfile',
+    zsh: 'shell',
+    svelte: 'html',
+    vue: 'html',
+    sass: 'scss',
+    node: 'javascript'
+};
+const languageCache = new Map();
+async function loadHighlightLanguage(languageId) {
+    const normalized = languageId.trim().toLowerCase();
+    if (!normalized)
+        return null;
+    const canonical = isTableKey(LANGUAGE_ID_ALIASES, normalized)
+        ? LANGUAGE_ID_ALIASES[normalized]
+        : normalized;
+    if (!isTableKey(LANGUAGE_LOADERS, canonical))
+        return null;
+    const loader = LANGUAGE_LOADERS[canonical];
+    let cached = languageCache.get(canonical);
+    if (!cached) {
+        cached = settle(loader).then((loaded) => {
+            if (loaded.ok)
+                return loaded.value;
+            const error = loaded.error;
+            logger.warn('highlighter language failed to load; callers fall back to escaped plain text', {
+                languageId: canonical,
+                error: error instanceof Error ? error.message : String(error)
+            });
+            return null;
+        });
+        languageCache.set(canonical, cached);
+    }
+    return cached;
+}
+/**
+ * Highlight `code` for the given kit language id, returning one HTML string
+ * per display line (spans carry `tok-*` classes). Returns `null` when no
+ * parser is available so callers fall back to escaped plain text.
+ */
+export async function highlightCodeToLines(code, languageId) {
+    const language = await loadHighlightLanguage(languageId);
+    if (!language)
+        return null;
+    const { highlightCode, classHighlighter } = await import('@lezer/highlight');
+    const tree = language.parser.parse(code);
+    const lines = [];
+    let current = '';
+    highlightCode(code, tree, classHighlighter, (text, classes) => {
+        const escaped = escapeHighlightHtml(text);
+        current += classes ? `<span class="${classes}">${escaped}</span>` : escaped;
+    }, () => {
+        lines.push(current);
+        current = '';
+    });
+    lines.push(current);
+    return lines;
+}
+/**
+ * Highlight a single display line (diff rows, tokenized inline snippets).
+ * Returns `null` when no parser is available for the language.
+ */
+export async function highlightLineToHtml(code, languageId) {
+    const lines = await highlightCodeToLines(code, languageId);
+    if (lines === null)
+        return null;
+    return lines.join('\n');
+}

package/dist/lib/components/code/index.d.ts

@@ -0,0 +1,18 @@
+export { default as CodeEditor } from './CodeEditor.svelte';
+export { default as CodeEditorCodemirror } from './CodeEditorCodemirror.svelte';
+export { default as CodeTokenizedLine } from './CodeTokenizedLine.svelte';
+export { default as CodeViewer } from './CodeViewer.svelte';
+export { default as EditorToolbar } from './EditorToolbar.svelte';
+export { default as EditorFullscreenDialog } from './EditorFullscreenDialog.svelte';
+export { default as MonacoEditor } from './MonacoEditor.svelte';
+export { default as MonacoEditorCore } from './MonacoEditorCore.svelte';
+export { default as PlainMonacoEditor } from './PlainMonacoEditor.svelte';
+export { default as ObjectEditor } from './ObjectEditor.svelte';
+export { default as TabbedMarkdownEditor } from './TabbedMarkdownEditor.svelte';
+export type { CodeEditorSelection } from './code-editor-selection.ts';
+export { codeEditorSurfaceOptions, type CodeEditorSurface } from './code-editor-surface.ts';
+export { createVibesMonacoThemeProjection, fallbackVibesMonacoTheme, normalizeVibesMonacoColor, projectVibesMonacoTheme, resolveVibesMonacoThemeScope, VIBES_MONACO_THEME_SCOPE_ATTRIBUTE, type VibesMonacoPalette, type VibesMonacoThemeProjection } from './monaco-theme.ts';
+export { WritingAssistBoundaryError, defaultAiGenerator, type WritingAssistAction } from './ai-errors';
+export { acquireMonacoModel, createEphemeralMonacoModelUri, resolveMonacoModelUri, type MonacoModelIdentity, type MonacoModelLease, type MonacoModelReadyDetail, type OpenMonacoModelOptions } from './monaco-model-registry.ts';
+export { configureBundledMonacoLoader, openMonacoModel } from './monaco-loader.ts';
+export { configureMinimalMonacoLoader } from './monaco-loader-minimal.ts';

package/dist/lib/components/code/index.js

@@ -0,0 +1,17 @@
+export { default as CodeEditor } from './CodeEditor.svelte';
+export { default as CodeEditorCodemirror } from './CodeEditorCodemirror.svelte';
+export { default as CodeTokenizedLine } from './CodeTokenizedLine.svelte';
+export { default as CodeViewer } from './CodeViewer.svelte';
+export { default as EditorToolbar } from './EditorToolbar.svelte';
+export { default as EditorFullscreenDialog } from './EditorFullscreenDialog.svelte';
+export { default as MonacoEditor } from './MonacoEditor.svelte';
+export { default as MonacoEditorCore } from './MonacoEditorCore.svelte';
+export { default as PlainMonacoEditor } from './PlainMonacoEditor.svelte';
+export { default as ObjectEditor } from './ObjectEditor.svelte';
+export { default as TabbedMarkdownEditor } from './TabbedMarkdownEditor.svelte';
+export { codeEditorSurfaceOptions } from "./code-editor-surface.js";
+export { createVibesMonacoThemeProjection, fallbackVibesMonacoTheme, normalizeVibesMonacoColor, projectVibesMonacoTheme, resolveVibesMonacoThemeScope, VIBES_MONACO_THEME_SCOPE_ATTRIBUTE } from "./monaco-theme.js";
+export { WritingAssistBoundaryError, defaultAiGenerator } from './ai-errors';
+export { acquireMonacoModel, createEphemeralMonacoModelUri, resolveMonacoModelUri } from "./monaco-model-registry.js";
+export { configureBundledMonacoLoader, openMonacoModel } from "./monaco-loader.js";
+export { configureMinimalMonacoLoader } from "./monaco-loader-minimal.js";

package/dist/lib/components/code/language.d.ts

@@ -0,0 +1,6 @@
+export type CodeLanguage = string;
+export declare function normalizeCodeLanguage(language?: string | null): string;
+export declare function languageFromFilename(filename?: string | null): string | undefined;
+export declare function inferCodeLanguage(content: string, filename?: string | null): string;
+export declare function resolveCodeLanguage(content: string, filename?: string | null, language?: string | null): string;
+export declare function countCodeDisplayLines(code: string): number;