@vortexlabs/kirari-react 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vortexlabs/kirari-react
 
+## 1.1.1
+
+### Patch Changes
+
+- e0cd534: Public object types such as `Token`, `Rule`, `Language`, `RenderOptions`, `Decoration`, `TokenPatch`, `TokenStream`, and `StreamedTokens` are now type aliases instead of interfaces. Their members are unchanged, but they can no longer be extended through declaration merging (module augmentation). Types that extend another type, such as `HighlightOptions` and `CodeProps`, remain interfaces.
+
 ## 1.1.0
 
 ### Minor Changes

package/README.md

@@ -19,7 +19,7 @@ Requires React 19. Kirari is a peer dependency.
 
 ```tsx
 import { Code } from '@vortexlabs/kirari-react'
-import { typescript } from '@vortexlabs/kirari/languages/typescript'
+import { typescript } from '@vortexlabs/kirari/languages'
 import '@vortexlabs/kirari/theme.css'
 
 export const CodeExample = () => (
@@ -63,7 +63,7 @@ Line numbers are CSS:
 
 import { Code } from '@vortexlabs/kirari-react'
 import { useTokenStream } from '@vortexlabs/kirari-react/stream'
-import { javascript } from '@vortexlabs/kirari/languages/javascript'
+import { javascript } from '@vortexlabs/kirari/languages'
 import '@vortexlabs/kirari/theme.css'
 
 export const StreamExample = () => {

package/dist/index.d.ts

@@ -1,30 +1,7 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import type { Language, Token } from '@vortexlabs/kirari/core';
-import type { Decoration } from '@vortexlabs/kirari/decorations';
-export type LineRange = number | readonly [first: number, last: number];
-export interface Line {
-    readonly number: number;
-    readonly start: number;
-    readonly end: number;
-}
-/** Text children, joined like React text: `null`, `undefined`, and booleans render nothing. */
-export type CodeText = string | number | bigint | boolean | null | undefined | readonly CodeText[];
-export interface CodeProps extends Omit<ComponentPropsWithoutRef<'pre'>, 'children'> {
-    /** Source to highlight. Ignored when `tokens` is set. */
-    readonly children?: CodeText;
-    /** Pre-scanned tokens, such as the output of `useTokenStream`. */
-    readonly tokens?: readonly Token[];
-    readonly language?: Language;
-    readonly classes?: Readonly<Record<string, string>>;
-    readonly tokenClassName?: (token: Token) => string | undefined;
-    readonly decorations?: readonly Decoration[];
-    /** Wrap each line in `<span class="kirari-line" data-line="n">`. */
-    readonly lines?: boolean;
-    readonly lineClassName?: (line: Line) => string | undefined;
-    /** One-based lines or inclusive ranges that receive `kirari-line-highlighted`. Implies `lines`. */
-    readonly highlightLines?: readonly LineRange[];
-}
+import type { ReactNode } from 'react';
+import type { CodeProps } from './types.js';
+export type { CodeProps, CodeText, Line, LineRange } from './types.js';
 /** Highlighted code as React elements. Uses no hooks, so it also renders as a Server Component. */
-export declare const Code: ({ children, tokens, language, classes, tokenClassName, decorations, lines, lineClassName, highlightLines, className, ...props }: CodeProps) => ReactNode;
+export declare const Code: ({ children, tokens, language, ...props }: CodeProps) => ReactNode;
 export type { Decoration } from '@vortexlabs/kirari/decorations';
 export type { Language, Token } from '@vortexlabs/kirari/core';

package/dist/index.js

@@ -1,9 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { tokenize } from '@vortexlabs/kirari/core';
 import { javascript } from '@vortexlabs/kirari/languages/javascript';
-const join = (...names) => {
-    return names.filter(Boolean).join(' ');
-};
+import { renderCode } from './render.js';
 const sourceText = (children) => {
     if (children == null || typeof children === 'boolean')
         return '';
@@ -13,109 +10,7 @@ const sourceText = (children) => {
         return children.map(sourceText).join('');
     throw new TypeError('Kirari: <Code> children must be text');
 };
-const splitsSurrogate = (source, offset) => {
-    const before = source.charCodeAt(offset - 1);
-    const after = source.charCodeAt(offset);
-    return before >= 0xd800 && before <= 0xdbff && after >= 0xdc00 && after <= 0xdfff;
-};
-const highlighted = (ranges) => {
-    const pairs = ranges.map(range => typeof range === 'number' ? [range, range] : range);
-    return line => pairs.some(([first, last]) => first <= line && line <= last);
-};
-const assertContiguous = (tokens) => {
-    let offset = 0;
-    for (const token of tokens) {
-        if (token.start !== offset || token.end !== offset + token.value.length) {
-            throw new RangeError('Kirari: tokens must cover contiguous source offsets starting at zero');
-        }
-        offset = token.end;
-    }
-};
-/** Validated enter/leave points for each decoration, in source order. */
-const decorationEvents = (decorations, source) => {
-    const events = [];
-    for (const [index, decoration] of decorations.entries()) {
-        if (!Number.isInteger(decoration.start) || !Number.isInteger(decoration.end)
-            || decoration.start < 0 || decoration.start >= decoration.end || decoration.end > source.length) {
-            throw new RangeError('Kirari: decoration offsets must be integers with 0 <= start < end <= source length');
-        }
-        if (splitsSurrogate(source, decoration.start) || splitsSurrogate(source, decoration.end)) {
-            throw new RangeError('Kirari: decoration offsets must not split a UTF-16 surrogate pair');
-        }
-        events.push({ offset: decoration.start, index, entering: true }, { offset: decoration.end, index, entering: false });
-    }
-    return events.sort((a, b) => a.offset - b.offset);
-};
-const codeNodes = (tokens, options = {}) => {
-    assertContiguous(tokens);
-    const source = tokens.map(token => token.value).join('');
-    const decorations = options.decorations ?? [];
-    const events = decorationEvents(decorations, source);
-    // Resolve callbacks once so tokens split by lines or decorations see them a single time.
-    const tokenClasses = tokens.map(token => join(options.classes && Object.hasOwn(options.classes, token.type) ? options.classes[token.type] : undefined, options.tokenClassName?.(token)));
-    const active = new Set();
-    let activeClasses = '';
-    let eventIndex = 0;
-    let tokenIndex = 0;
-    const rangeNodes = (start, end) => {
-        const nodes = [];
-        while (start < end) {
-            while (tokens[tokenIndex].end <= start)
-                tokenIndex++;
-            let changed = false;
-            while (eventIndex < events.length && events[eventIndex].offset <= start) {
-                const event = events[eventIndex++];
-                if (event.entering)
-                    active.add(event.index);
-                else
-                    active.delete(event.index);
-                changed = true;
-            }
-            if (changed)
-                activeClasses = [...active].sort((a, b) => a - b).map(index => decorations[index].className).join(' ');
-            const token = tokens[tokenIndex];
-            const stop = Math.min(end, token.end, events[eventIndex]?.offset ?? end);
-            const value = source.slice(start, stop);
-            const extra = join(tokenClasses[tokenIndex], activeClasses);
-            nodes.push(token.type === 'text' && !extra
-                ? value
-                : _jsx("span", { className: join(`kirari-${token.type}`, extra), children: value }, start));
-            start = stop;
-        }
-        return nodes;
-    };
-    const ranges = options.highlightLines ?? [];
-    if (!options.lines && ranges.length === 0)
-        return rangeNodes(0, source.length);
-    const isHighlighted = highlighted(ranges);
-    const nodes = [];
-    const newline = /\r\n|\r|\n/g;
-    let start = 0;
-    let number = 1;
-    do {
-        const match = newline.exec(source);
-        const end = match?.index ?? source.length;
-        const className = join('kirari-line', options.lineClassName?.({ number, start, end }), isHighlighted(number) ? 'kirari-line-highlighted' : undefined);
-        nodes.push(_jsx("span", { className: className, "data-line": number, children: rangeNodes(start, end) }, `line-${number}`));
-        if (!match)
-            break;
-        nodes.push(match[0]);
-        start = end + match[0].length;
-        if (start === source.length)
-            break;
-        number++;
-    } while (true);
-    return nodes;
-};
 /** Highlighted code as React elements. Uses no hooks, so it also renders as a Server Component. */
-export const Code = ({ children, tokens, language = javascript, classes, tokenClassName, decorations, lines, lineClassName, highlightLines, className, ...props }) => {
-    const nodes = codeNodes(tokens ?? tokenize(sourceText(children), language), {
-        ...(classes && { classes }),
-        ...(tokenClassName && { tokenClassName }),
-        ...(decorations && { decorations }),
-        ...(lines && { lines }),
-        ...(lineClassName && { lineClassName }),
-        ...(highlightLines && { highlightLines }),
-    });
-    return _jsx("pre", { ...props, className: join('kirari', className), children: _jsx("code", { children: nodes }) });
+export const Code = ({ children, tokens, language = javascript, ...props }) => {
+    return renderCode(tokens ?? tokenize(sourceText(children), language), props);
 };

package/dist/render.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { Token } from '@vortexlabs/kirari/core';
+import type { CodeProps } from './types.js';
+/** Renders highlighted tokens and forwards the remaining props to the pre element. */
+export declare const renderCode: (tokens: readonly Token[], options: Omit<CodeProps, 'children' | 'tokens' | 'language'>) => ReactNode;

package/dist/render.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const join = (...names) => {
+    return names.filter(Boolean).join(' ');
+};
+const splitsSurrogate = (source, offset) => {
+    const before = source.charCodeAt(offset - 1);
+    const after = source.charCodeAt(offset);
+    return before >= 0xd800 && before <= 0xdbff && after >= 0xdc00 && after <= 0xdfff;
+};
+const highlighted = (ranges) => {
+    const pairs = ranges.map(range => typeof range === 'number' ? [range, range] : range);
+    return line => pairs.some(([first, last]) => first <= line && line <= last);
+};
+const assertContiguous = (tokens) => {
+    let offset = 0;
+    for (const token of tokens) {
+        if (token.start !== offset || token.end !== offset + token.value.length) {
+            throw new RangeError('Kirari: tokens must cover contiguous source offsets starting at zero');
+        }
+        offset = token.end;
+    }
+};
+/** Validated enter/leave points for each decoration, in source order. */
+const decorationEvents = (decorations, source) => {
+    const events = [];
+    for (const [index, decoration] of decorations.entries()) {
+        if (!Number.isInteger(decoration.start) || !Number.isInteger(decoration.end)
+            || decoration.start < 0 || decoration.start >= decoration.end || decoration.end > source.length) {
+            throw new RangeError('Kirari: decoration offsets must be integers with 0 <= start < end <= source length');
+        }
+        if (splitsSurrogate(source, decoration.start) || splitsSurrogate(source, decoration.end)) {
+            throw new RangeError('Kirari: decoration offsets must not split a UTF-16 surrogate pair');
+        }
+        events.push({ offset: decoration.start, index, entering: true }, { offset: decoration.end, index, entering: false });
+    }
+    return events.sort((a, b) => a.offset - b.offset);
+};
+const codeNodes = (tokens, options = {}) => {
+    assertContiguous(tokens);
+    const source = tokens.map(token => token.value).join('');
+    const decorations = options.decorations ?? [];
+    const events = decorationEvents(decorations, source);
+    // Resolve callbacks once so tokens split by lines or decorations see them a single time.
+    const tokenClasses = tokens.map(token => join(options.classes && Object.hasOwn(options.classes, token.type) ? options.classes[token.type] : undefined, options.tokenClassName?.(token)));
+    const active = new Set();
+    let activeClasses = '';
+    let eventIndex = 0;
+    let tokenIndex = 0;
+    const rangeNodes = (start, end) => {
+        const nodes = [];
+        while (start < end) {
+            while (tokens[tokenIndex].end <= start)
+                tokenIndex++;
+            let changed = false;
+            while (eventIndex < events.length && events[eventIndex].offset <= start) {
+                const event = events[eventIndex++];
+                if (event.entering)
+                    active.add(event.index);
+                else
+                    active.delete(event.index);
+                changed = true;
+            }
+            if (changed)
+                activeClasses = [...active].sort((a, b) => a - b).map(index => decorations[index].className).join(' ');
+            const token = tokens[tokenIndex];
+            const stop = Math.min(end, token.end, events[eventIndex]?.offset ?? end);
+            const value = source.slice(start, stop);
+            const extra = join(tokenClasses[tokenIndex], activeClasses);
+            nodes.push(token.type === 'text' && !extra
+                ? value
+                : _jsx("span", { className: join(`kirari-${token.type}`, extra), children: value }, start));
+            start = stop;
+        }
+        return nodes;
+    };
+    const ranges = options.highlightLines ?? [];
+    if (!options.lines && ranges.length === 0)
+        return rangeNodes(0, source.length);
+    const isHighlighted = highlighted(ranges);
+    const nodes = [];
+    const newline = /\r\n|\r|\n/g;
+    let start = 0;
+    let number = 1;
+    do {
+        const match = newline.exec(source);
+        const end = match?.index ?? source.length;
+        const className = join('kirari-line', options.lineClassName?.({ number, start, end }), isHighlighted(number) ? 'kirari-line-highlighted' : undefined);
+        nodes.push(_jsx("span", { className: className, "data-line": number, children: rangeNodes(start, end) }, `line-${number}`));
+        if (!match)
+            break;
+        nodes.push(match[0]);
+        start = end + match[0].length;
+        if (start === source.length)
+            break;
+        number++;
+    } while (true);
+    return nodes;
+};
+/** Renders highlighted tokens and forwards the remaining props to the pre element. */
+export const renderCode = (tokens, options) => {
+    const { classes, tokenClassName, decorations, lines, lineClassName, highlightLines, className, ...props } = options;
+    const nodes = codeNodes(tokens, options);
+    return _jsx("pre", { ...props, className: join('kirari', className), children: _jsx("code", { children: nodes }) });
+};

package/dist/stream.d.ts

@@ -1,11 +1,11 @@
 import type { Language, Token } from '@vortexlabs/kirari/core';
 import type { TokenPatch } from '@vortexlabs/kirari/stream';
-export interface StreamedTokens {
+export type StreamedTokens = {
     readonly tokens: readonly Token[];
     write(chunk: string): void;
     end(chunk?: string): void;
     reset(): void;
-}
+};
 export declare const applyPatch: (tokens: readonly Token[], patch: TokenPatch) => readonly Token[];
 /** Tokens for source that arrives in chunks. Pass the result's `tokens` to `<Code tokens>`. */
 export declare const useTokenStream: (language: Language) => StreamedTokens;

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import type { Language, Token } from '@vortexlabs/kirari/core';
+import type { Decoration } from '@vortexlabs/kirari/decorations';
+/** A one-based line number or an inclusive pair of line numbers. */
+export type LineRange = number | readonly [first: number, last: number];
+/** A rendered source line; CRLF, CR, and LF separators sit outside its wrapper. */
+export type Line = {
+    /** One-based line number. */
+    readonly number: number;
+    /** Inclusive UTF-16 offset into the complete source. */
+    readonly start: number;
+    /** Exclusive UTF-16 offset; excludes any line separator. */
+    readonly end: number;
+};
+/** Text children, joined like React text: `null`, `undefined`, and booleans render nothing. */
+export type CodeText = string | number | bigint | boolean | null | undefined | readonly CodeText[];
+/** Highlighted code options; remaining native props are forwarded to the `<pre>` element. */
+export interface CodeProps extends Omit<ComponentPropsWithoutRef<'pre'>, 'children'> {
+    /** Source to highlight. Ignored when `tokens` is set. */
+    readonly children?: CodeText;
+    /** Pre-scanned tokens covering contiguous source offsets from zero; overrides `children` and `language`. */
+    readonly tokens?: readonly Token[];
+    /** Language used to tokenize `children`. Defaults to JavaScript. */
+    readonly language?: Language;
+    /** Additional classes by token category, combined with the standard `kirari-*` classes. */
+    readonly classes?: Readonly<Record<string, string>>;
+    /** Additional classes, resolved once per original token before line or decoration splits. */
+    readonly tokenClassName?: (token: Token) => string | undefined;
+    /** Source ranges receiving extra classes; offsets must be valid UTF-16 boundaries. */
+    readonly decorations?: readonly Decoration[];
+    /** Wrap each line in `<span class="kirari-line" data-line="n">`. Defaults to `false`. */
+    readonly lines?: boolean;
+    /** Additional classes per rendered line; used when `lines` or nonempty `highlightLines` enables wrappers. */
+    readonly lineClassName?: (line: Line) => string | undefined;
+    /** One-based lines or inclusive ranges that receive `kirari-line-highlighted`. Implies `lines`. */
+    readonly highlightLines?: readonly LineRange[];
+}

package/dist/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexlabs/kirari-react",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Kirari syntax highlighting as React elements.",
   "keywords": [
     "react",
@@ -55,7 +55,7 @@
     "@happy-dom/global-registrator": "^20.14.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@vortexlabs/kirari": "1.0.5",
+    "@vortexlabs/kirari": "1.1.3",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },