@zakmandhro/bunti 0.1.4 → 0.1.5

package/dist/dsl.js

@@ -0,0 +1,663 @@
+/**
+ * Bunti High-Level Contextual DSL
+ * Scoped closure API with contextual capabilities via trait-based composition.
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import pc from 'picocolors';
+import { bg, createGradient, darken, fade, fg, lighten, rgb, } from './colors';
+import { resolveRect as resolveGeometryRect, resolvePlacedRect, splitRect as splitGeometryRect, } from './geometry';
+import { icon, init, replaceEmojis } from './icons';
+import { joinHorizontal, joinVertical, blit as layoutBlit, box as layoutBox, gradient as layoutGradient, list as layoutList, table as layoutTable, viewport as layoutViewport, wallpaper as layoutWallpaper, rect, } from './layout';
+import { flush, loop } from './render';
+import { clearBackBuffer, createScreenState, } from './state';
+import { visibleWidth } from './utils';
+// --- Traits (Contextual Capabilities) ---
+export const KEYS = {
+    UP: 'up',
+    DOWN: 'down',
+    RIGHT: 'right',
+    LEFT: 'left',
+    ENTER: 'enter',
+    ESCAPE: 'escape',
+    TAB: 'tab',
+    BACKSPACE: 'backspace',
+    SPACE: ' ',
+};
+function boxBorderInset(options) {
+    return options.border === 'none' || !options.border ? 0 : 1;
+}
+function resolveBoxArea(parent, options, contentWidth, contentHeight) {
+    return resolvePlacedRect(parent, {
+        x: options.x,
+        y: options.y,
+        width: options.anchor === 'top' || options.anchor === 'bottom'
+            ? parent.width
+            : options.width,
+        height: options.height,
+        anchor: options.anchor,
+        contentWidth,
+        contentHeight,
+    });
+}
+function resolveBoxInnerArea(area, options) {
+    const borderInset = boxBorderInset(options);
+    const px = options.padding?.[1] ?? 0;
+    const py = options.padding?.[0] ?? 0;
+    return {
+        x: area.x + borderInset + px,
+        y: area.y + borderInset + py,
+        width: Math.max(0, area.width - borderInset * 2 - px * 2),
+        height: Math.max(0, area.height - borderInset * 2 - py * 2),
+    };
+}
+function createTransparentBuffer(size) {
+    return Array.from({ length: size }, () => ({
+        char: ' ',
+        fg: undefined,
+        bg: undefined,
+        fgCode: undefined,
+        bgCode: undefined,
+        bold: false,
+        skip: true,
+    }));
+}
+function createLayerScreenState(state) {
+    const size = state.width * state.height;
+    return {
+        ...state,
+        frontBuffer: createTransparentBuffer(size),
+        backBuffer: createTransparentBuffer(size),
+    };
+}
+function compositeLayer(state, buffer) {
+    for (let i = 0; i < buffer.length; i++) {
+        const source = buffer[i];
+        if (source.skip)
+            continue;
+        const target = state.backBuffer[i];
+        target.char = source.char;
+        target.fg = source.fg;
+        target.bg = source.bg;
+        target.bold = source.bold;
+        target.fgCode = source.fgCode;
+        target.bgCode = source.bgCode;
+        target.skip = source.skip;
+        target.raw = source.raw;
+    }
+}
+function graphemes(text) {
+    const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+    return Array.from(segmenter.segment(text), ({ segment }) => segment);
+}
+const buntiColor = {
+    ...pc,
+    darken,
+    lighten,
+    rgb,
+    fg,
+    bg,
+    dim: (text) => fg({ r: 96, g: 102, b: 118 }, text),
+};
+/**
+ * Common Context Factory: Provided to every closure.
+ */
+function createDSLContext(state, dslState, availableW, availableH, offsetX = 0, offsetY = 0, isRoot = false) {
+    const ctx = {
+        color: buntiColor,
+        state,
+        width: availableW,
+        height: availableH,
+        area: { x: offsetX, y: offsetY, width: availableW, height: availableH },
+        isRoot,
+        offsetX,
+        offsetY,
+        get cursorX() {
+            const currentFlow = dslState.activeContents.join('');
+            const lines = currentFlow.split('\n');
+            return visibleWidth(lines[lines.length - 1]);
+        },
+        get cursorY() {
+            const currentFlow = dslState.activeContents.join('');
+            return Math.max(0, currentFlow.split('\n').length - 1);
+        },
+        mouseX: state.mouseX,
+        mouseY: state.mouseY,
+        mouseButton: state.mouseButton,
+        isMouseDown: state.isMouseDown,
+        lastKey: state.lastKey,
+        focusedId: state.focusedId,
+        elapsedTime: Date.now() - state.startTime,
+        text(str) {
+            dslState.activeContents.push(replaceEmojis(String(str)));
+            return ctx;
+        },
+        animate(duration, options = {}) {
+            const now = Date.now();
+            const start = options.id
+                ? ctx.useState(`${options.id}_start`, now)[0]
+                : state.startTime;
+            const elapsed = now - start - (options.delay || 0);
+            if (elapsed < 0)
+                return 0;
+            if (options.loop)
+                return (elapsed % duration) / duration;
+            return Math.min(1, elapsed / duration);
+        },
+        fade,
+        typewriter(text, options = {}) {
+            const now = Date.now();
+            const start = options.id
+                ? ctx.useState(`${options.id}_start`, now)[0]
+                : state.startTime;
+            const delay = options.delay ?? 0;
+            const elapsed = Math.max(0, now - start - delay);
+            const cps = options.cps ?? 24;
+            const chars = graphemes(text);
+            const rawIndex = Math.floor((elapsed / 1000) * cps);
+            const index = options.loop && chars.length > 0
+                ? rawIndex % (chars.length + 1)
+                : Math.min(chars.length, rawIndex);
+            const blinkRate = options.blinkRate ?? 450;
+            const showCursor = options.blink === false ||
+                Math.floor(elapsed / blinkRate) % 2 === 0 ||
+                index < chars.length;
+            return {
+                text: chars.slice(0, index).join(''),
+                cursor: showCursor ? (options.cursor ?? '█') : ' ',
+                done: index >= chars.length,
+                index,
+                progress: chars.length === 0 ? 1 : index / chars.length,
+            };
+        },
+        flicker(intensity = 0.5) {
+            return Math.random() > 1 - intensity;
+        },
+        useAsync(keyOrFetcher, fetcherOrOptions, maybeOptions) {
+            let key;
+            let fetcher;
+            let options;
+            if (typeof keyOrFetcher === 'string') {
+                key = keyOrFetcher;
+                fetcher = fetcherOrOptions;
+                options = maybeOptions;
+            }
+            else {
+                if (state.hookCounter === undefined) {
+                    state.hookCounter = 0;
+                }
+                const index = state.hookCounter++;
+                key = `_async_hook_${index}`;
+                fetcher = keyOrFetcher;
+                options = fetcherOrOptions;
+            }
+            const interval = options?.interval ?? 0;
+            const dataKey = `${key}_data`;
+            const loadingKey = `${key}_loading`;
+            const errorKey = `${key}_error`;
+            const lastFetchKey = `${key}_lastFetch`;
+            const fetchingKey = `${key}_fetching`;
+            if (!state.componentState.has(loadingKey)) {
+                state.componentState.set(loadingKey, true);
+            }
+            const lastFetch = state.componentState.get(lastFetchKey);
+            const isFetching = state.componentState.get(fetchingKey);
+            const now = Date.now();
+            const shouldFetch = !isFetching &&
+                (lastFetch === undefined ||
+                    (interval > 0 && now - lastFetch >= interval));
+            if (shouldFetch) {
+                state.componentState.set(fetchingKey, true);
+                state.componentState.set(lastFetchKey, now);
+                fetcher()
+                    .then((result) => {
+                    state.componentState.set(dataKey, result);
+                    state.componentState.set(loadingKey, false);
+                    state.componentState.set(errorKey, undefined);
+                    state.requestTick?.();
+                })
+                    .catch((err) => {
+                    state.componentState.set(errorKey, err);
+                    state.componentState.set(loadingKey, false);
+                    state.requestTick?.();
+                })
+                    .finally(() => {
+                    state.componentState.set(fetchingKey, false);
+                });
+            }
+            return {
+                data: state.componentState.get(dataKey),
+                loading: state.componentState.get(loadingKey),
+                error: state.componentState.get(errorKey),
+            };
+        },
+        useState(keyOrInitial, maybeInitial) {
+            let key;
+            let initial;
+            if (maybeInitial === undefined) {
+                if (state.hookCounter === undefined) {
+                    state.hookCounter = 0;
+                }
+                const index = state.hookCounter++;
+                key = `_state_hook_${index}`;
+                initial = keyOrInitial;
+            }
+            else {
+                key = keyOrInitial;
+                initial = maybeInitial;
+            }
+            if (!state.componentState.has(key)) {
+                state.componentState.set(key, initial);
+            }
+            return [
+                state.componentState.get(key),
+                (val) => {
+                    state.componentState.set(key, val);
+                    state.requestTick?.();
+                },
+            ];
+        },
+        usePersistentState(key, initial) {
+            if (!state.componentState.has(key)) {
+                const storeDir = join(process.cwd(), '.tmp');
+                const storeFile = join(storeDir, 'bunti_store.json');
+                let fileVal;
+                try {
+                    if (existsSync(storeFile)) {
+                        const data = readFileSync(storeFile, 'utf-8');
+                        const parsed = JSON.parse(data);
+                        fileVal = parsed[key];
+                    }
+                }
+                catch {
+                    // Ignore
+                }
+                const finalVal = fileVal !== undefined ? fileVal : initial;
+                state.componentState.set(key, finalVal);
+            }
+            return [
+                state.componentState.get(key),
+                (val) => {
+                    state.componentState.set(key, val);
+                    const storeDir = join(process.cwd(), '.tmp');
+                    const storeFile = join(storeDir, 'bunti_store.json');
+                    try {
+                        if (!existsSync(storeDir)) {
+                            mkdirSync(storeDir, { recursive: true });
+                        }
+                        let currentStore = {};
+                        if (existsSync(storeFile)) {
+                            try {
+                                currentStore = JSON.parse(readFileSync(storeFile, 'utf-8'));
+                            }
+                            catch {
+                                currentStore = {};
+                            }
+                        }
+                        currentStore[key] = val;
+                        writeFileSync(storeFile, JSON.stringify(currentStore, null, 2), 'utf-8');
+                    }
+                    catch {
+                        // Ignore
+                    }
+                    state.requestTick?.();
+                },
+            ];
+        },
+        focusable(id) {
+            if (!state.focusableIds.includes(id)) {
+                state.focusableIds.push(id);
+            }
+            if (!state.focusedId)
+                state.focusedId = id;
+            return state.focusedId === id;
+        },
+        isFocused(id) {
+            return state.focusedId === id;
+        },
+        focus(id) {
+            state.focusedId = id;
+        },
+        focusNext() {
+            if (state.focusableIds.length === 0)
+                return;
+            const idx = state.focusableIds.indexOf(state.focusedId || '');
+            const nextIdx = (idx + 1) % state.focusableIds.length;
+            state.focusedId = state.focusableIds[nextIdx];
+        },
+        hitbox(id, bounds) {
+            const rect = ctx.resolveRect(bounds);
+            const box = { id, ...rect };
+            state.hitboxes.set(id, box);
+            const hovered = state.mouseX >= box.x &&
+                state.mouseX < box.x + box.width &&
+                state.mouseY >= box.y &&
+                state.mouseY < box.y + box.height;
+            const pressed = hovered && state.isMouseDown && state.mouseButton === 0;
+            const clicked = hovered && state.lastKey === 'click';
+            return { box, hovered, pressed, clicked };
+        },
+        resolveRect(bounds) {
+            return resolveGeometryRect({ x: offsetX, y: offsetY, width: availableW, height: availableH }, {
+                ...bounds,
+                y: bounds.y ?? ctx.cursorY,
+            });
+        },
+        resolveLocalRect(bounds, options) {
+            return resolvePlacedRect({ x: 0, y: 0, width: availableW, height: availableH }, bounds, options);
+        },
+        split(options) {
+            return splitGeometryRect({ x: 0, y: 0, width: availableW, height: availableH }, options);
+        },
+        isHovered(id) {
+            const box = state.hitboxes.get(id);
+            if (!box)
+                return false;
+            return (state.mouseX >= box.x &&
+                state.mouseX < box.x + box.width &&
+                state.mouseY >= box.y &&
+                state.mouseY < box.y + box.height);
+        },
+        isPressed(id) {
+            return ctx.isHovered(id) && state.isMouseDown && state.mouseButton === 0;
+        },
+        isClicked(id) {
+            return ctx.isHovered(id) && state.lastKey === 'click';
+        },
+        list(id, items, options = {}) {
+            const [selectedIndex, setSelectedIndex] = ctx.useState(`${id}_index`, 0);
+            const isFocused = ctx.focusable(id);
+            if (isFocused && options.interactive !== false) {
+                if (state.lastKey === KEYS.UP)
+                    setSelectedIndex(Math.max(0, selectedIndex - 1));
+                if (state.lastKey === KEYS.DOWN)
+                    setSelectedIndex(Math.min(items.length - 1, selectedIndex + 1));
+            }
+            const content = layoutList(items, {
+                ...options,
+                focusedIndex: selectedIndex,
+                focusStyle: isFocused ? options.focusStyle : (s) => pc.dim(s),
+                selectedBg: isFocused ? options.selectedBg : undefined,
+            }, availableW);
+            dslState.activeContents.push(content);
+            return ctx;
+        },
+        table(rows, options = {}) {
+            const content = layoutTable(rows, options, availableW);
+            dslState.activeContents.push(content);
+            return ctx;
+        },
+        icon(name) {
+            return icon(name);
+        },
+        blit(x, y, content, style = {}) {
+            layoutBlit(state, x, y, content, style);
+            return ctx;
+        },
+        rect(x, y, w, h, style) {
+            rect(state, x, y, w, h, style);
+            return ctx;
+        },
+        viewport(content, width, height, scrollY = 0) {
+            return layoutViewport(content, width, height, scrollY);
+        },
+        span(options, callback) {
+            const subContents = [];
+            dslState.stack.push(dslState.activeContents);
+            dslState.activeContents = subContents;
+            callback(ctx);
+            dslState.activeContents = dslState.stack.pop();
+            const combined = subContents.join('');
+            let styled = combined;
+            if (typeof options.color === 'function') {
+                styled = options.color(combined);
+            }
+            else if (options.color !== undefined) {
+                styled = fg(options.color, combined);
+            }
+            dslState.activeContents.push(styled);
+            return styled;
+        },
+        box(options, callback) {
+            if (options.zIndex !== undefined) {
+                const { zIndex, ...layeredOptions } = options;
+                ctx.layer(zIndex, (layerCtx) => {
+                    layerCtx.box(layeredOptions, callback);
+                });
+                return '';
+            }
+            const preContentW = options.width === undefined ? availableW : 0;
+            const preContentH = options.height === undefined ? availableH : 0;
+            const preArea = resolveBoxArea(ctx.area, options, preContentW, preContentH);
+            const innerArea = resolveBoxInnerArea(preArea, options);
+            const subContents = [];
+            dslState.stack.push(dslState.activeContents);
+            dslState.activeContents = subContents;
+            const subCtx = createDSLContext(state, dslState, innerArea.width, innerArea.height, innerArea.x, innerArea.y);
+            callback(subCtx);
+            dslState.activeContents = dslState.stack.pop();
+            const innerContent = subContents.join('');
+            const styledBox = layoutBox(innerContent, options, availableW, availableH);
+            if (!options.detach) {
+                dslState.activeContents.push(styledBox);
+            }
+            return styledBox;
+        },
+        layer(zIndexOrOptions, maybeCallback) {
+            const callback = typeof zIndexOrOptions === 'function' ? zIndexOrOptions : maybeCallback;
+            if (!callback)
+                return ctx;
+            const zIndex = typeof zIndexOrOptions === 'number'
+                ? zIndexOrOptions
+                : typeof zIndexOrOptions === 'object'
+                    ? (zIndexOrOptions.zIndex ?? 0)
+                    : 0;
+            const layerState = createLayerScreenState(state);
+            const layerDslState = {
+                activeContents: [],
+                stack: [],
+                layers: dslState.layers,
+                layerOrder: dslState.layerOrder,
+            };
+            const layerCtx = createDSLContext(layerState, layerDslState, availableW, availableH, offsetX, offsetY, isRoot);
+            layerCtx.box = createDirectBoxRenderer(layerState, layerDslState, layerCtx);
+            callback(layerCtx);
+            const flow = layerDslState.activeContents.join('');
+            if (flow)
+                layoutBlit(layerState, offsetX, offsetY, flow);
+            dslState.layerOrder = layerDslState.layerOrder + 1;
+            dslState.layers.push({
+                zIndex,
+                order: layerDslState.layerOrder,
+                buffer: layerState.backBuffer,
+            });
+            return ctx;
+        },
+        joinHorizontal(...blocks) {
+            return joinHorizontal(...blocks);
+        },
+        joinVertical(...blocks) {
+            return joinVertical(...blocks);
+        },
+        wallpaper(input) {
+            if (typeof input === 'object' && 'colors' in input) {
+                layoutGradient(state, input.colors, { direction: input.direction });
+            }
+            else if (Array.isArray(input)) {
+                layoutGradient(state, input);
+            }
+            else if (typeof input === 'object' && 'color' in input) {
+                ctx.wallpaper(input.color);
+            }
+            else {
+                layoutWallpaper(state, { bg: input });
+            }
+        },
+        gradient: (opts) => ({
+            colors: createGradient(opts.colors, opts.steps || 10),
+            direction: opts.direction || 'vertical',
+            steps: opts.steps || 10,
+        }),
+        rgb,
+        requestStop() {
+            state.requestStop?.();
+        },
+        flushFlow() { },
+    };
+    return ctx;
+}
+function createDirectBoxRenderer(state, dslState, base) {
+    return (options, callback) => {
+        if (options.zIndex !== undefined) {
+            const { zIndex, ...layeredOptions } = options;
+            base.layer(zIndex, (layerCtx) => {
+                layerCtx.box(layeredOptions, callback);
+            });
+            return '';
+        }
+        const boxOptions = options.anchor === 'top' || options.anchor === 'bottom'
+            ? { ...options, width: base.width }
+            : options;
+        const hasFixedSize = boxOptions.width !== undefined &&
+            boxOptions.width !== 'auto' &&
+            boxOptions.height !== undefined &&
+            boxOptions.height !== 'auto';
+        if (hasFixedSize) {
+            const preArea = resolveBoxArea(base.area, boxOptions, 0, 0);
+            const innerArea = resolveBoxInnerArea(preArea, boxOptions);
+            if (boxOptions.bgColor || boxOptions.color) {
+                rect(state, preArea.x, preArea.y, preArea.width, preArea.height, {
+                    char: ' ',
+                    bg: boxOptions.bgColor,
+                    fg: boxOptions.color === 'blank' ? undefined : boxOptions.color,
+                });
+            }
+            const styledBox = layoutBox('', boxOptions, base.width, base.height);
+            layoutBlit(state, preArea.x, preArea.y, styledBox);
+            const subContents = [];
+            dslState.stack.push(dslState.activeContents);
+            dslState.activeContents = subContents;
+            const subCtx = createDSLContext(state, dslState, innerArea.width, innerArea.height, innerArea.x, innerArea.y);
+            callback(subCtx);
+            dslState.activeContents = dslState.stack.pop();
+            const contentStr = subContents.join('');
+            if (contentStr) {
+                const styledContent = layoutBox(contentStr, {
+                    width: innerArea.width,
+                    height: innerArea.height,
+                    align: boxOptions.align,
+                    valign: boxOptions.valign,
+                    wrap: boxOptions.wrap,
+                    border: 'none',
+                    padding: [0, 0],
+                }, innerArea.width, innerArea.height);
+                layoutBlit(state, innerArea.x, innerArea.y, styledContent);
+            }
+            return styledBox;
+        }
+        const subContents = [];
+        dslState.stack.push(dslState.activeContents);
+        dslState.activeContents = subContents;
+        const preAreaTemp = resolveBoxArea(base.area, boxOptions, base.width, base.height);
+        const innerAreaTemp = resolveBoxInnerArea(preAreaTemp, boxOptions);
+        const subCtx = createDSLContext(state, dslState, innerAreaTemp.width, innerAreaTemp.height, innerAreaTemp.x, innerAreaTemp.y);
+        callback(subCtx);
+        dslState.activeContents = dslState.stack.pop();
+        const contentStr = subContents.join('');
+        const styledBox = layoutBox(contentStr, boxOptions, base.width, base.height);
+        const lines = styledBox.split('\n');
+        const lineWidths = lines.map(visibleWidth);
+        const boxArea = resolveBoxArea(base.area, boxOptions, lineWidths.length > 0 ? Math.max(...lineWidths) : 0, lines.length);
+        if (boxOptions.bgColor || boxOptions.color) {
+            rect(state, boxArea.x, boxArea.y, boxArea.width, boxArea.height, {
+                char: ' ',
+                bg: boxOptions.bgColor,
+                fg: boxOptions.color === 'blank' ? undefined : boxOptions.color,
+            });
+        }
+        layoutBlit(state, boxArea.x, boxArea.y, styledBox);
+        return styledBox;
+    };
+}
+/**
+ * Top-level Screen Context
+ */
+export function createScreenContext(state) {
+    state.hookCounter = 0;
+    const previousFocusableIds = state.focusableIds;
+    if (state.lastKey === KEYS.TAB && previousFocusableIds.length > 0) {
+        const idx = previousFocusableIds.indexOf(state.focusedId || '');
+        const nextIdx = (idx + 1) % previousFocusableIds.length;
+        state.focusedId = previousFocusableIds[nextIdx];
+    }
+    state.focusableIds = []; // Rebuild from this frame's rendered focusables.
+    state.hitboxes = new Map(); // Rebuild from this frame's interactive geometry.
+    const dslState = {
+        activeContents: [],
+        stack: [],
+        layers: [],
+        layerOrder: 0,
+    };
+    const base = createDSLContext(state, dslState, state.width, state.height, 0, 0, true);
+    const flushFlow = () => {
+        const flow = dslState.activeContents.join('');
+        if (flow)
+            layoutBlit(state, 0, 0, flow);
+        dslState.layers
+            .sort((a, b) => a.zIndex - b.zIndex || a.order - b.order)
+            .forEach((layer) => {
+            compositeLayer(state, layer.buffer);
+        });
+    };
+    const boxOverride = createDirectBoxRenderer(state, dslState, base);
+    return {
+        ...base,
+        box: boxOverride,
+        flushFlow,
+        requestStop: () => {
+            state.requestStop?.();
+        },
+    };
+}
+/**
+ * Primary Entry Point
+ */
+export async function render(callback, options = {}) {
+    // Sync apply forced options first
+    if (options.nerdFont !== undefined) {
+        await init({ nerdFont: options.nerdFont });
+    }
+    else {
+        // Start detection in background, don't await!
+        init();
+    }
+    const state = createScreenState(options);
+    const tick = () => {
+        clearBackBuffer(state);
+        const b = createScreenContext(state);
+        if (typeof callback === 'string') {
+            b.blit(0, 0, callback);
+        }
+        else {
+            callback(b);
+        }
+        if (state.isStopped)
+            return;
+        b.flushFlow();
+        if (state.isStopped)
+            return;
+        flush(state);
+    };
+    if (options.once) {
+        tick();
+        await new Promise((resolve) => {
+            setTimeout(() => {
+                resolve();
+                process.exit(0);
+            }, 50);
+        });
+        return;
+    }
+    await loop(state, (_s) => tick());
+}
+//# sourceMappingURL=dsl.js.map