@vortexlabs/kirari-react 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vortexlabs/kirari-react
 
+## 1.2.0
+
+### Minor Changes
+
+- ef4462a: Publish under unscoped names: `kirari`, `kirari-react`, and `kirari-rehype`. The `@vortexlabs/kirari`, `@vortexlabs/kirari-react`, and `@vortexlabs/kirari-rehype` packages now re-export them, so existing imports keep working.
+
+### Patch Changes
+
+- Updated dependencies [ef4462a]
+  - kirari@1.2.0
+  - kirari-react@1.2.0
+
+## 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

@@ -1,95 +1,13 @@
 # @vortexlabs/kirari-react
 
-Syntax highlighting for React 19, built on
-[`@vortexlabs/kirari`](https://github.com/vortexkit/kirari/blob/main/packages/kirari/README.md).
-`<Code>` renders code as React elements and works in Server Components. Use the
-optional streaming hook for code that arrives in chunks.
+This package has been renamed to [`kirari-react`](https://www.npmjs.com/package/kirari-react).
 
-[Documentation](https://kirari.sh/docs/) · [Playground](https://kirari.sh/playground/)
-
-## Install
+`@vortexlabs/kirari-react` re-exports `kirari-react` on every entry point, so existing imports keep working and keep receiving updates. New projects should install `kirari-react` directly:
 
 ```sh
-npm install @vortexlabs/kirari @vortexlabs/kirari-react
-```
-
-Requires React 19. Kirari is a peer dependency.
-
-## Usage
-
-```tsx
-import { Code } from '@vortexlabs/kirari-react'
-import { typescript } from '@vortexlabs/kirari/languages/typescript'
-import '@vortexlabs/kirari/theme.css'
-
-export const CodeExample = () => (
-  <Code language={typescript}>
-    {'const greeting: string = "Hello"'}
-  </Code>
-)
+npm install kirari-react
 ```
 
-Output is `<pre class="kirari"><code>…</code></pre>` with the standard
-`kirari-*` classes, so every Kirari theme works. Code text is escaped by React;
-the component does not use `dangerouslySetInnerHTML`. Text children are joined
-as React joins text, so `{value}` interpolation works; elements throw. `language`
-defaults to JavaScript. Other props go to the `<pre>`.
-
-## Lines and customization
-
-Use `highlightLines={[1, [3, 4]]}` to mark line 1 and lines 3–4. Style
-`.kirari-line-highlighted` to choose the highlight's appearance.
-
-| Prop | Effect |
-| --- | --- |
-| `lines` | Wrap each line in `<span class="kirari-line" data-line="n">`. |
-| `highlightLines` | Lines or `[first, last]` ranges get `kirari-line-highlighted`. Implies `lines`. |
-| `lineClassName` | `(line) => class` for a line wrapper. `line` is `{ number, start, end }`. |
-| `decorations` | `{ start, end, className }` source ranges, as in [decorations](https://github.com/vortexkit/kirari/blob/main/docs/decorations.md). |
-| `classes` | Extra classes per token type, e.g. `{ keyword: 'kw' }`. |
-| `tokenClassName` | `(token) => class` per token. |
-| `tokens` | Pre-scanned tokens instead of `children`. |
-
-Line numbers are CSS:
-
-```css
-.kirari-line::before { content: attr(data-line); display: inline-block; width: 3ch; margin-right: 2ch; opacity: 0.5; }
-```
-
-## Streaming
-
-```tsx
-'use client'
-
-import { Code } from '@vortexlabs/kirari-react'
-import { useTokenStream } from '@vortexlabs/kirari-react/stream'
-import { javascript } from '@vortexlabs/kirari/languages/javascript'
-import '@vortexlabs/kirari/theme.css'
-
-export const StreamExample = () => {
-  const { tokens, write, reset } = useTokenStream(javascript)
-
-  return (
-    <>
-      <button type="button" onClick={() => write('const count = 42\n')}>
-        Append a line
-      </button>
-      <button type="button" onClick={reset}>Reset</button>
-      <Code tokens={tokens} />
-    </>
-  )
-}
-```
-
-This example adds one chunk per click. In your app, call `write(chunk)` as text
-arrives. The hook also returns `end()`, which closes the stream when it is complete.
-
-- Built-in JavaScript, TypeScript, JSX, TSX, JSON, JSONC, and Python reuse completed scanning work. Other languages rescan the full source. Long unfinished tokens can still be expensive; see [token streaming](https://github.com/vortexkit/kirari/blob/main/docs/streaming.md).
-- Changing `language` starts a new, empty stream.
-- After `end()`, call `reset()` before writing again.
-- `/stream` is a client module; `<Code>` is not.
-- Managing tokens yourself? Use `createTokenStream` from `@vortexlabs/kirari/stream` with `applyPatch(tokens, patch)`.
-
-## License
+To switch an existing project, replace `@vortexlabs/kirari-react` with `kirari-react` in `package.json` and in import paths. Nothing else changes.
 
-[MIT](https://github.com/vortexkit/kirari/blob/main/packages/react/LICENSE) © 2026 [Ugi](https://ugi.dev)
+Documentation: [kirari.sh](https://kirari.sh)

package/index.d.ts

@@ -0,0 +1 @@
+export * from 'kirari-react'

package/index.js

@@ -0,0 +1 @@
+export * from 'kirari-react'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vortexlabs/kirari-react",
-  "version": "1.1.0",
-  "description": "Kirari syntax highlighting as React elements.",
+  "version": "1.2.0",
+  "description": "Renamed to kirari-react. This package re-exports kirari-react so existing imports keep working.",
   "keywords": [
     "react",
     "react-component",
@@ -14,36 +14,40 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vortexkit/kirari.git",
-    "directory": "packages/react"
+    "directory": "packages/compat-react"
   },
   "type": "module",
   "sideEffects": false,
   "files": [
-    "dist",
+    "index.js",
+    "index.d.ts",
+    "stream.js",
+    "stream.d.ts",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./index.d.ts",
+      "import": "./index.js"
     },
     "./stream": {
-      "types": "./dist/stream.d.ts",
-      "import": "./dist/stream.js"
+      "types": "./stream.d.ts",
+      "import": "./stream.js"
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
     "test": "bun test ./test",
     "typecheck": "tsc --noEmit",
-    "check": "bun run typecheck && bun run test && bun run build && bun test ./checks",
-    "prepublishOnly": "bun run build"
+    "check": "bun run typecheck && bun test ./test"
+  },
+  "dependencies": {
+    "kirari": "^1.2.0",
+    "kirari-react": "^1.2.0"
   },
   "peerDependencies": {
     "@types/react": "^19",
-    "@vortexlabs/kirari": "^1.0.0",
     "react": "^19"
   },
   "peerDependenciesMeta": {
@@ -52,12 +56,8 @@
     }
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.14.6",
     "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
-    "@vortexlabs/kirari": "1.0.5",
-    "react": "^19.3.1",
-    "react-dom": "^19.3.1"
+    "react": "^19.3.1"
   },
   "publishConfig": {
     "access": "public"

package/stream.d.ts

@@ -0,0 +1 @@
+export * from 'kirari-react/stream'

package/stream.js

@@ -0,0 +1 @@
+export * from 'kirari-react/stream'

package/dist/index.d.ts

@@ -1,30 +0,0 @@
-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[];
-}
-/** 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 type { Decoration } from '@vortexlabs/kirari/decorations';
-export type { Language, Token } from '@vortexlabs/kirari/core';

package/dist/index.js

@@ -1,121 +0,0 @@
-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(' ');
-};
-const sourceText = (children) => {
-    if (children == null || typeof children === 'boolean')
-        return '';
-    if (typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint')
-        return String(children);
-    if (Array.isArray(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 }) });
-};

package/dist/stream.d.ts

@@ -1,11 +0,0 @@
-import type { Language, Token } from '@vortexlabs/kirari/core';
-import type { TokenPatch } from '@vortexlabs/kirari/stream';
-export interface 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/stream.js

@@ -1,24 +0,0 @@
-'use client';
-import { useCallback, useMemo, useState } from 'react';
-import { createTokenStream } from '@vortexlabs/kirari/stream';
-export const applyPatch = (tokens, patch) => {
-    return [...tokens.filter(token => token.end <= patch.from), ...patch.tokens];
-};
-/** Tokens for source that arrives in chunks. Pass the result's `tokens` to `<Code tokens>`. */
-export const useTokenStream = (language) => {
-    const stream = useMemo(() => createTokenStream(language), [language]);
-    const [snapshot, setSnapshot] = useState({ stream, tokens: [] });
-    // A new language starts a new stream; tokens from the previous one no longer apply.
-    if (snapshot.stream !== stream)
-        setSnapshot({ stream, tokens: [] });
-    const apply = useCallback((patch) => {
-        setSnapshot(previous => previous.stream === stream ? { stream, tokens: applyPatch(previous.tokens, patch) } : previous);
-    }, [stream]);
-    const write = useCallback((chunk) => apply(stream.write(chunk)), [stream, apply]);
-    const end = useCallback((chunk) => apply(stream.end(chunk)), [stream, apply]);
-    const reset = useCallback(() => {
-        stream.reset();
-        setSnapshot({ stream, tokens: [] });
-    }, [stream]);
-    return { tokens: snapshot.stream === stream ? snapshot.tokens : [], write, end, reset };
-};