@zakmandhro/bunti 0.1.5 → 0.2.0

package/dist/dsl.js

@@ -1,663 +1,17 @@
 /**
  * Bunti High-Level Contextual DSL
  * Scoped closure API with contextual capabilities via trait-based composition.
+ *
+ * Implementation lives in src/dsl/ — this barrel preserves the public surface:
+ * - context: createDSLContext + box rendering + createScreenContext
+ * - render: the render() entry point
+ * - hooks: useState / useAsync / usePersistentState
+ * - interaction: hitbox / hover / press / click + focus management
+ * - layers: transparent buffers + compositing
+ * - motion: animate / typewriter / flicker / fade
+ * - types: shared interfaces + KEYS
  */
-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());
-}
+export { createScreenContext } from './dsl/context';
+export { render } from './dsl/render';
+export { KEYS } from './dsl/types';
 //# sourceMappingURL=dsl.js.map