@svelterm/core 0.1.0

package/dist/src/renderer/index.js

@@ -0,0 +1,116 @@
+import { createRenderer as svelteCreateRenderer } from 'svelte/renderer';
+import { TermNode } from './node.js';
+export function createTermRenderer() {
+    return svelteCreateRenderer({
+        createFragment() {
+            return new TermNode('fragment');
+        },
+        createElement(name) {
+            return new TermNode('element', name);
+        },
+        createTextNode(data) {
+            return new TermNode('text', data);
+        },
+        createComment(data) {
+            return new TermNode('comment', data);
+        },
+        nodeType(node) {
+            return node.nodeType;
+        },
+        getNodeValue(node) {
+            if (node.nodeType === 'text')
+                return node.text ?? null;
+            if (node.nodeType === 'comment')
+                return node.text ?? null;
+            return null;
+        },
+        getAttribute(element, name) {
+            return element.attributes.get(name) ?? null;
+        },
+        setAttribute(element, key, value) {
+            const ctx = element.ctx;
+            if (ctx) {
+                ctx.onSetAttribute(element, key, String(value));
+            }
+            else {
+                element.attributes.set(key, String(value));
+            }
+        },
+        removeAttribute(element, name) {
+            const ctx = element.ctx;
+            if (ctx) {
+                ctx.onRemoveAttribute(element, name);
+            }
+            else {
+                element.attributes.delete(name);
+            }
+        },
+        hasAttribute(element, name) {
+            return element.attributes.has(name);
+        },
+        setText(node, text) {
+            if (node.nodeType === 'text' || node.nodeType === 'comment') {
+                const ctx = node.ctx;
+                if (ctx) {
+                    ctx.onSetText(node, text);
+                }
+                else {
+                    node.text = text;
+                }
+            }
+            else {
+                node.children = [];
+                const textNode = new TermNode('text', text);
+                textNode.parent = node;
+                textNode.ctx = node.ctx;
+                node.children.push(textNode);
+                node.ctx?.onInsert(node, textNode);
+            }
+        },
+        getFirstChild(element) {
+            return element.getFirstChild();
+        },
+        getLastChild(element) {
+            return element.getLastChild();
+        },
+        getNextSibling(node) {
+            return node.getNextSibling();
+        },
+        insert(parent, node, anchor) {
+            parent.insertBefore(node, anchor);
+            parent.ctx?.onInsert(parent, node);
+        },
+        remove(node) {
+            const parent = node.parent;
+            const ctx = parent?.ctx ?? null;
+            node.remove();
+            if (ctx && parent)
+                ctx.onRemove(node, parent);
+        },
+        getParent(node) {
+            return node.parent;
+        },
+        addEventListener(target, type, handler) {
+            let handlers = target.listeners.get(type);
+            if (!handlers) {
+                handlers = new Set();
+                target.listeners.set(type, handlers);
+            }
+            handlers.add(handler);
+        },
+        removeEventListener(target, type, handler) {
+            const handlers = target.listeners.get(type);
+            if (handlers) {
+                handlers.delete(handler);
+            }
+        },
+    });
+}
+/**
+ * Keep the custom renderer active globally so Svelte's effects
+ * use our renderer methods (setText, setAttribute, etc.) instead
+ * of falling back to DOM operations (node.nodeValue, etc.).
+ *
+ * Call this AFTER renderer.render() which pops the renderer.
+ */
+export { TermNode } from './node.js';

package/dist/src/renderer/node.d.ts

@@ -0,0 +1,44 @@
+import type { ResolvedStyle } from '../css/compute.js';
+import type { LayoutBox } from '../layout/engine.js';
+import type { RenderContext } from '../render/context.js';
+import { TextBuffer } from '../components/text-buffer.js';
+export type NodeType = 'element' | 'text' | 'comment' | 'fragment';
+export interface RenderCache {
+    resolvedStyle: ResolvedStyle | null;
+    layoutBox: LayoutBox | null;
+    classAttr: string;
+}
+export declare class TermNode {
+    readonly id: number;
+    readonly nodeType: NodeType;
+    tag: string | undefined;
+    text: string | undefined;
+    ctx: RenderContext | null;
+    parent: TermNode | null;
+    children: TermNode[];
+    attributes: Map<string, string>;
+    listeners: Map<string, Set<(...args: any[]) => void>>;
+    scrollTop: number;
+    scrollLeft: number;
+    textBuffer: TextBuffer | null;
+    cache: RenderCache;
+    /** DOM compatibility — Svelte's effects set nodeValue directly when renderer is not pushed */
+    get nodeValue(): string | null;
+    set nodeValue(value: string | null);
+    /** DOM compatibility — Svelte may also use textContent */
+    get textContent(): string;
+    set textContent(value: string);
+    constructor(nodeType: NodeType, tagOrText?: string);
+    get classes(): Set<string>;
+    getFirstChild(): TermNode | null;
+    getLastChild(): TermNode | null;
+    getNextSibling(): TermNode | null;
+    insertBefore(node: TermNode, anchor: TermNode | null): void;
+    removeChild(node: TermNode): void;
+    remove(): void;
+    collectText(): string;
+    invalidateStyle(): void;
+    invalidateLayout(): void;
+    invalidateAll(): void;
+    cleanup(): void;
+}

package/dist/src/renderer/node.js

@@ -0,0 +1,153 @@
+let nextId = 1;
+export class TermNode {
+    id;
+    nodeType;
+    tag;
+    text;
+    ctx = null;
+    parent = null;
+    children = [];
+    attributes = new Map();
+    listeners = new Map();
+    scrollTop = 0;
+    scrollLeft = 0;
+    textBuffer = null;
+    cache = { resolvedStyle: null, layoutBox: null, classAttr: '' };
+    /** DOM compatibility — Svelte's effects set nodeValue directly when renderer is not pushed */
+    get nodeValue() {
+        if (this.nodeType === 'text' || this.nodeType === 'comment')
+            return this.text ?? null;
+        return null;
+    }
+    set nodeValue(value) {
+        if (this.nodeType === 'text' || this.nodeType === 'comment') {
+            const newText = value ?? '';
+            if (this.ctx) {
+                this.ctx.onSetText(this, newText);
+            }
+            else {
+                this.text = newText;
+            }
+        }
+    }
+    /** DOM compatibility — Svelte may also use textContent */
+    get textContent() {
+        return this.collectText();
+    }
+    set textContent(value) {
+        if (this.nodeType === 'text') {
+            if (this.ctx) {
+                this.ctx.onSetText(this, value);
+            }
+            else {
+                this.text = value;
+            }
+        }
+    }
+    constructor(nodeType, tagOrText) {
+        this.id = nextId++;
+        this.nodeType = nodeType;
+        if (nodeType === 'element') {
+            this.tag = tagOrText;
+        }
+        else if (nodeType === 'text' || nodeType === 'comment') {
+            this.text = tagOrText ?? '';
+        }
+    }
+    get classes() {
+        const raw = this.attributes.get('class') ?? '';
+        if (raw === '')
+            return new Set();
+        return new Set(raw.split(/\s+/).filter(Boolean));
+    }
+    getFirstChild() {
+        return this.children[0] ?? null;
+    }
+    getLastChild() {
+        return this.children[this.children.length - 1] ?? null;
+    }
+    getNextSibling() {
+        if (!this.parent)
+            return null;
+        const siblings = this.parent.children;
+        const idx = siblings.indexOf(this);
+        return siblings[idx + 1] ?? null;
+    }
+    insertBefore(node, anchor) {
+        this.removeChild(node);
+        node.parent = this;
+        if (node.nodeType === 'fragment') {
+            const fragmentChildren = [...node.children];
+            for (const child of fragmentChildren) {
+                this.insertBefore(child, anchor);
+            }
+            return;
+        }
+        if (anchor === null) {
+            this.children.push(node);
+        }
+        else {
+            const idx = this.children.indexOf(anchor);
+            if (idx === -1) {
+                this.children.push(node);
+            }
+            else {
+                this.children.splice(idx, 0, node);
+            }
+        }
+        if (this.ctx)
+            propagateCtx(node, this.ctx);
+    }
+    removeChild(node) {
+        if (node.parent !== this)
+            return;
+        const idx = this.children.indexOf(node);
+        if (idx !== -1) {
+            this.children.splice(idx, 1);
+        }
+        node.parent = null;
+        clearCtx(node);
+    }
+    remove() {
+        if (this.parent) {
+            this.parent.removeChild(this);
+        }
+    }
+    collectText() {
+        if (this.nodeType === 'text')
+            return this.text ?? '';
+        if (this.nodeType === 'comment')
+            return '';
+        return this.children.map(c => c.collectText()).join('');
+    }
+    invalidateStyle() {
+        this.cache.resolvedStyle = null;
+        this.cache.classAttr = '';
+    }
+    invalidateLayout() {
+        this.cache.layoutBox = null;
+    }
+    invalidateAll() {
+        this.invalidateStyle();
+        this.invalidateLayout();
+    }
+    cleanup() {
+        this.listeners.clear();
+        this.ctx = null;
+        for (const child of this.children) {
+            child.cleanup();
+        }
+    }
+}
+function propagateCtx(node, ctx) {
+    node.ctx = ctx;
+    for (const child of node.children) {
+        propagateCtx(child, ctx);
+    }
+}
+function clearCtx(node) {
+    node.ctx = null;
+    for (const child of node.children) {
+        clearCtx(child);
+    }
+}

package/dist/src/terminal/screen.d.ts

@@ -0,0 +1,10 @@
+export interface TerminalSize {
+    width: number;
+    height: number;
+}
+export declare function getTerminalSize(): TerminalSize;
+export declare function enterFullscreen(): void;
+export declare function exitFullscreen(): void;
+export declare function enableRawMode(): void;
+export declare function disableRawMode(): void;
+export declare function writeOutput(data: string): void;

package/dist/src/terminal/screen.js

@@ -0,0 +1,31 @@
+import * as ansi from '../render/ansi.js';
+export function getTerminalSize() {
+    return {
+        width: Math.max(1, process.stdout.columns ?? 80),
+        height: Math.max(1, process.stdout.rows ?? 24),
+    };
+}
+export function enterFullscreen() {
+    process.stdout.write(ansi.enterAltScreen());
+    process.stdout.write(ansi.hideCursor());
+    process.stdout.write(ansi.clearScreen());
+}
+export function exitFullscreen() {
+    process.stdout.write(ansi.showCursor());
+    process.stdout.write(ansi.exitAltScreen());
+}
+export function enableRawMode() {
+    if (process.stdin.isTTY) {
+        process.stdin.setRawMode(true);
+        process.stdin.resume();
+    }
+}
+export function disableRawMode() {
+    if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false);
+        process.stdin.pause();
+    }
+}
+export function writeOutput(data) {
+    process.stdout.write(ansi.beginSyncUpdate() + data + ansi.endSyncUpdate());
+}

package/dist/src/terminal/stdin-router.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Single point of control for process.stdin.
+ *
+ * All stdin data flows through here. Incoming bytes are classified and
+ * routed to the appropriate handler. Query-response interactions (OSC 11,
+ * DA1, etc.) are serialised — only one query is in-flight at a time.
+ */
+export interface StdinHandlers {
+    onKey: (data: Buffer) => void;
+    onMouse: (data: Buffer) => void;
+    onPaste: (text: string) => void;
+}
+export declare class StdinRouter {
+    private handlers;
+    private pendingQuery;
+    private queryQueue;
+    private pasteBuffer;
+    start(handlers: StdinHandlers): void;
+    stop(): void;
+    /**
+     * Send a query and wait for a matching response.
+     * Queries are serialised — queued if one is already in-flight.
+     */
+    query(write: string, match: (data: string) => string | null, timeoutMs?: number): Promise<string | null>;
+    private drainQueryQueue;
+    private onData;
+}
+/** Match an OSC 11 response and extract the RGB values */
+export declare function matchOSC11(data: string): string | null;
+/** Parse an OSC 11 RGB response into a color scheme */
+export declare function parseOSC11Scheme(rgb: string): 'dark' | 'light';

package/dist/src/terminal/stdin-router.js

@@ -0,0 +1,133 @@
+/**
+ * Single point of control for process.stdin.
+ *
+ * All stdin data flows through here. Incoming bytes are classified and
+ * routed to the appropriate handler. Query-response interactions (OSC 11,
+ * DA1, etc.) are serialised — only one query is in-flight at a time.
+ */
+const OSC_RESPONSE_RE = /\x1b\](\d+);([^\x07\x1b]*?)(?:\x07|\x1b\\)/;
+const SGR_MOUSE_RE = /\x1b\[<\d+;\d+;\d+[Mm]/g;
+const PASTE_START = '\x1b[200~';
+const PASTE_END = '\x1b[201~';
+export class StdinRouter {
+    handlers = null;
+    pendingQuery = null;
+    queryQueue = [];
+    pasteBuffer = null;
+    start(handlers) {
+        this.handlers = handlers;
+        process.stdin.on('data', this.onData);
+    }
+    stop() {
+        process.stdin.removeListener('data', this.onData);
+        this.handlers = null;
+        if (this.pendingQuery) {
+            clearTimeout(this.pendingQuery.timer);
+            this.pendingQuery = null;
+        }
+        this.queryQueue = [];
+    }
+    /**
+     * Send a query and wait for a matching response.
+     * Queries are serialised — queued if one is already in-flight.
+     */
+    query(write, match, timeoutMs = 200) {
+        return new Promise((resolve, reject) => {
+            this.queryQueue.push({ write, match, resolve: resolve, reject, timeoutMs });
+            this.drainQueryQueue();
+        });
+    }
+    drainQueryQueue() {
+        if (this.pendingQuery || this.queryQueue.length === 0)
+            return;
+        const { write, match, resolve, timeoutMs } = this.queryQueue.shift();
+        const timer = setTimeout(() => {
+            this.pendingQuery = null;
+            resolve(null);
+            this.drainQueryQueue();
+        }, timeoutMs);
+        this.pendingQuery = {
+            match,
+            resolve: (response) => {
+                clearTimeout(timer);
+                this.pendingQuery = null;
+                resolve(response);
+                this.drainQueryQueue();
+            },
+            timer,
+        };
+        process.stdout.write(write);
+    }
+    onData = (data) => {
+        const str = data.toString();
+        // Check for pending query response first
+        if (this.pendingQuery) {
+            const result = this.pendingQuery.match(str);
+            if (result !== null) {
+                this.pendingQuery.resolve(result);
+                return;
+            }
+        }
+        // Bracketed paste accumulation
+        if (this.pasteBuffer !== null) {
+            const endIdx = str.indexOf(PASTE_END);
+            if (endIdx !== -1) {
+                this.pasteBuffer += str.substring(0, endIdx);
+                this.handlers?.onPaste(this.pasteBuffer);
+                this.pasteBuffer = null;
+            }
+            else {
+                this.pasteBuffer += str;
+            }
+            return;
+        }
+        if (str.startsWith(PASTE_START)) {
+            const endIdx = str.indexOf(PASTE_END);
+            if (endIdx !== -1) {
+                this.handlers?.onPaste(str.substring(PASTE_START.length, endIdx));
+            }
+            else {
+                this.pasteBuffer = str.substring(PASTE_START.length);
+            }
+            return;
+        }
+        // OSC response (not matched by a pending query — discard)
+        if (OSC_RESPONSE_RE.test(str))
+            return;
+        // Mouse events — may be batched in a single chunk
+        SGR_MOUSE_RE.lastIndex = 0;
+        const mouseMatches = [...str.matchAll(SGR_MOUSE_RE)];
+        if (mouseMatches.length > 0) {
+            for (const match of mouseMatches) {
+                this.handlers?.onMouse(Buffer.from(match[0]));
+            }
+            // Check if there's non-mouse data remaining
+            let remaining = str;
+            for (const match of mouseMatches) {
+                remaining = remaining.replace(match[0], '');
+            }
+            if (remaining.length > 0 && remaining.trim().length > 0) {
+                this.handlers?.onKey(Buffer.from(remaining));
+            }
+            return;
+        }
+        // Everything else is keyboard input
+        this.handlers?.onKey(data);
+    };
+}
+/** Match an OSC 11 response and extract the RGB values */
+export function matchOSC11(data) {
+    const match = data.match(/\x1b\]11;rgb:([0-9a-f]+)\/([0-9a-f]+)\/([0-9a-f]+)/i);
+    if (!match)
+        return null;
+    return `${match[1]}/${match[2]}/${match[3]}`;
+}
+/** Parse an OSC 11 RGB response into a color scheme */
+export function parseOSC11Scheme(rgb) {
+    const parts = rgb.split('/');
+    const r = parseInt(parts[0].substring(0, 2), 16);
+    const g = parseInt(parts[1].substring(0, 2), 16);
+    const b = parseInt(parts[2].substring(0, 2), 16);
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luminance > 128 ? 'light' : 'dark';
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@svelterm/core",
+  "version": "0.1.0",
+  "description": "Svelte 5 components rendered to the terminal with real CSS",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/src/renderer/default.d.ts",
+      "default": "./dist/src/renderer/default.js"
+    },
+    "./app": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./headless": {
+      "types": "./dist/src/headless.d.ts",
+      "default": "./dist/src/headless.js"
+    }
+  },
+  "main": "./dist/src/renderer/default.js",
+  "types": "./dist/src/renderer/default.d.ts",
+  "files": [
+    "dist/src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "node --test dist/**/*.test.js",
+    "dev": "tsc --watch",
+    "demo": "DEMO=${DEMO:-counter} npx vite build && node dist-demo/${DEMO:-counter}/main.js",
+    "demo:counter": "DEMO=counter npx vite build && node dist-demo/counter/main.js",
+    "demo:dashboard": "DEMO=dashboard npx vite build && node dist-demo/dashboard/main.js",
+    "demo:todo": "DEMO=todo npx vite build && node dist-demo/todo/main.js",
+    "demo:showcase": "DEMO=showcase npx vite build && node dist-demo/showcase/main.js",
+    "demo:keyboard-hero": "DEMO=keyboard-hero npx vite build && node dist-demo/keyboard-hero/main.js",
+    "demo:snake": "DEMO=snake npx vite build && node dist-demo/snake/main.js",
+    "demo:themes": "DEMO=themes npx vite build && node dist-demo/themes/main.js"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/node": "^25.5.0",
+    "@types/ws": "^8.18.1",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
+  },
+  "dependencies": {
+    "ws": "^8.20.0"
+  },
+  "keywords": [
+    "svelte",
+    "terminal",
+    "tui",
+    "css",
+    "cli",
+    "ansi",
+    "renderer"
+  ],
+  "author": "Tom Yandell",
+  "license": "MIT"
+}