@zakmandhro/bunti 0.2.0 → 0.3.0

package/dist/demos/animation.js

@@ -0,0 +1,177 @@
+import { Box } from "../components/index.js";
+import { easeOutBack, easeOutCubic, lerp } from "../index.js";
+import { demo } from "./demo-layout.js";
+const LOGO = [
+  " ┏┓  ┳ ┳ ┏┓┓ ┏┳┓ ┳ ",
+  " ┣┻┓ ┃ ┃ ┃┃┃  ┃  ┃ ",
+  " ┗━┛ ┗━┛ ┛┗┛  ┻  ┻ "
+];
+const TIMELINE_IDS = [
+  "container",
+  "progress",
+  "bunti-logo",
+  "boot-copy",
+  "restart-hint"
+];
+function gradientLogoLine(ctx, line, progress, muted) {
+  return Array.from(line).map((char, index) => {
+    if (char === " ")
+      return char;
+    const phase = index / Math.max(1, line.length - 1);
+    const target = phase < 0.5 ? ctx.fade("#39d7ff", "#bd5cff", phase * 2) : ctx.fade("#bd5cff", "#ffe66d", (phase - 0.5) * 2);
+    return ctx.color.fg(ctx.fade(muted, target, progress), char);
+  }).join("");
+}
+demo("Animation Sequence", (ctx, bounds) => {
+  const { color, elapsedTime, lastKey, requestStop } = ctx;
+  if (lastKey === "q")
+    requestStop();
+  if (lastKey === "enter") {
+    for (const id of TIMELINE_IDS)
+      ctx.restartAnimation(id);
+  }
+  const [showStatus, setShowStatus] = ctx.useState("show-status", false);
+  if (lastKey === " ")
+    setShowStatus(!showStatus);
+  const panelWidth = Math.min(Math.max(bounds.w - 4, 28), 76);
+  const panel = bounds.place({
+    y: Math.max(1, Math.floor(bounds.h / 2) - 7),
+    width: panelWidth,
+    height: Math.min(Math.max(bounds.h - 2, 12), 15)
+  });
+  const innerX = panel.x + 2;
+  const innerY = panel.y + 1;
+  const innerW = Math.max(1, panel.width - 4);
+  const innerH = Math.max(1, panel.height - 2);
+  const containerProgress = ctx.animate(650, {
+    id: "container",
+    easing: easeOutCubic
+  });
+  const progress = ctx.animate(1800, {
+    id: "progress",
+    loop: true,
+    delay: 650
+  });
+  const logoProgress = ctx.animate(900, { id: "bunti-logo", delay: 650 });
+  const hintProgress = ctx.animate(650, {
+    id: "restart-hint",
+    delay: 2850,
+    easing: easeOutCubic
+  });
+  const logoReady = logoProgress >= 1;
+  const showLogo = logoReady || ctx.flicker(0.72, { id: "logo-boot" });
+  const pulse = ctx.animate(440, { loop: "yoyo" });
+  const amber = ctx.rgb(255, Math.floor(170 + pulse * 70), 40);
+  const muted = { r: 92, g: 98, b: 112 };
+  const panelBg = ctx.fade("#0a0a0b", "#101118", containerProgress);
+  const innerBg = ctx.fade("#0a0a0b", "#151724", containerProgress);
+  const trackBg = ctx.fade("#0a0a0b", "#202338", containerProgress);
+  const borderColor = ctx.fade("#0a0a0b", logoReady ? "mint" : "gray", containerProgress);
+  const typed = ctx.typewriter("Bunti features terminal animations", {
+    id: "boot-copy",
+    cps: 28,
+    delay: 1550,
+    cursor: "█"
+  });
+  ctx.rect(panel.x, panel.y, panel.width, panel.height, {
+    char: " ",
+    bg: panelBg
+  });
+  ctx.rect(innerX, innerY, innerW, innerH, {
+    char: " ",
+    bg: innerBg
+  });
+  ctx.rect(innerX, panel.y + panel.height - 3, innerW, 1, {
+    char: " ",
+    bg: trackBg
+  });
+  for (let x = 0;x < innerW; x++) {
+    const phase = (x / innerW + progress) % 1;
+    const bg = phase < 0.33 ? ctx.fade("#39d7ff", "#bd5cff", phase / 0.33) : phase < 0.66 ? ctx.fade("#bd5cff", "#ffe66d", (phase - 0.33) / 0.33) : ctx.fade("#ffe66d", "#39d7ff", (phase - 0.66) / 0.34);
+    ctx.rect(innerX + x, panel.y + panel.height - 3, 1, 1, {
+      char: " ",
+      bg
+    });
+  }
+  Box(ctx, {
+    x: panel.x,
+    y: panel.y,
+    width: panel.width,
+    height: panel.height,
+    border: "rounded",
+    borderColor,
+    padding: [1, 2],
+    align: "center",
+    valign: "middle"
+  }, (sub) => {
+    sub.text(color.cyan(color.bold("BOOT SEQUENCE")));
+    sub.text(`
+
+`);
+    LOGO.forEach((line, index) => {
+      const lineProgress = ctx.stagger(index + 4, {
+        id: "bunti-logo",
+        delay: 160,
+        duration: 520,
+        easing: easeOutCubic
+      });
+      sub.text(showLogo ? gradientLogoLine(ctx, line, lineProgress, muted) : " ".repeat(line.length));
+      sub.text(`
+`);
+    });
+    sub.text(`
+`);
+    sub.text(logoReady ? color.fg(amber, ">>> SYSTEMS READY <<<") : color.fg(muted, "Booting systems..."));
+    sub.text(`
+`);
+    sub.text(color.fg(typed.done ? "mint" : "silver", typed.text));
+    sub.text(color.fg(amber, typed.cursor));
+  });
+  const status = ctx.transition("status-overlay", showStatus, {
+    duration: 320,
+    exitDuration: 220,
+    easing: easeOutBack
+  });
+  if (status.mounted) {
+    const overlayW = Math.min(34, Math.max(24, panel.width - 12));
+    const overlayX = panel.x + Math.floor((panel.width - overlayW) / 2);
+    const overlayY = Math.round(lerp(panel.y + panel.height + 2, panel.y + 3, status.progress));
+    const overlayBorder = ctx.fade("#0a0a0b", "#39d7ff", status.progress);
+    const overlayText = ctx.fade("#0a0a0b", "#e8ecf4", status.progress);
+    ctx.layer(10, (layer) => {
+      layer.box({
+        x: overlayX,
+        y: overlayY,
+        width: overlayW,
+        height: 6,
+        border: "rounded",
+        borderColor: overlayBorder,
+        bgColor: "#101426",
+        padding: [0, 2],
+        align: "left",
+        title: "STATUS"
+      }, (sub) => {
+        sub.text(color.fg(overlayText, `frame     ${ctx.frame}`));
+        sub.text(`
+`);
+        sub.text(color.fg(overlayText, `dt        ${ctx.dt}ms`));
+        sub.text(`
+`);
+        sub.text(color.fg(overlayText, `elapsed   ${Math.round(elapsedTime)}ms`));
+        sub.text(`
+`);
+        sub.text(color.fg(overlayText, "SPACE to dismiss"));
+      });
+    });
+  }
+  const hint = "ENTER restart  |  SPACE status  |  q quit";
+  ctx.blit(panel.x + Math.max(0, Math.floor((panel.width - hint.length) / 2)), panel.y + panel.height + 1, color.fg(ctx.fade("#0a0a0b", { r: 96, g: 102, b: 118 }, hintProgress), hint));
+}, {
+  fps: 20,
+  alternateBuffer: true,
+  hideCursor: true,
+  nerdFont: true,
+  keyboard: true,
+  mouse: true,
+  footer: false
+});

package/dist/demos/animation.ts

@@ -10,7 +10,7 @@
 import { Box } from '../components/index.js';
 import type { BuntiContext } from '../dsl/index.js';
 import { easeOutBack, easeOutCubic, lerp } from '../index.js';
-import { demo } from './demo-layout';
+import { demo } from './demo-layout.js';
 
 const LOGO = [
   ' ┏┓  ┳ ┳ ┏┓┓ ┏┳┓ ┳ ',

package/dist/demos/demo-layout.js

@@ -0,0 +1,85 @@
+import { Box, Header } from "../components/index.js";
+import {
+  bunti,
+  resolvePlacedRect,
+  splitRect
+} from "../index.js";
+const DEFAULT_DEMO_OPTIONS = {
+  fps: 10,
+  alternateBuffer: true,
+  hideCursor: true,
+  nerdFont: true,
+  mouse: true,
+  keyboard: true,
+  defaultFg: "silver",
+  header: true,
+  footer: "telemetry",
+  wallpaper: "#0a0a0b",
+  exitHint: "q",
+  padding: 0
+};
+function viewportPadding(padding) {
+  if (Array.isArray(padding))
+    return { x: padding[0], y: padding[1] };
+  return { x: padding ?? 0, y: padding ?? 0 };
+}
+export async function demo(title, contentRender, options = {}) {
+  await bunti.init({ nerdFont: true });
+  const once = process.argv.includes("--once");
+  const config = {
+    ...DEFAULT_DEMO_OPTIONS,
+    ...options,
+    ...once ? { once: true } : {}
+  };
+  const {
+    header,
+    footer,
+    wallpaper: wallpaperColor,
+    exitHint,
+    padding,
+    ...screenOptions
+  } = config;
+  bunti.render((ctx) => {
+    const { color, width, height, wallpaper, icon } = ctx;
+    if (ctx.lastKey === "q")
+      ctx.requestStop();
+    wallpaper(wallpaperColor);
+    if (header) {
+      Header(ctx, {
+        title: title.toUpperCase(),
+        leftIcon: icon("bunti"),
+        rightLabel: exitHint
+      });
+    }
+    if (footer) {
+      Box(ctx, {
+        anchor: "bottom",
+        width: "100%",
+        align: "center",
+        border: "none",
+        padding: [0, 0]
+      }, ({ text }) => {
+        text(color.dim(` \uDB80\uDDC4 Screen: ${width}x${height} | Mouse: ${ctx.mouseX},${ctx.mouseY} | Logic: Stateless `));
+      });
+    }
+    const chromeTop = header ? 2 : 0;
+    const chromeBottom = footer ? 2 : 0;
+    const pad = viewportPadding(padding);
+    const rect = {
+      x: pad.x,
+      y: chromeTop + pad.y,
+      width: Math.max(0, width - pad.x * 2),
+      height: Math.max(0, height - chromeTop - chromeBottom - pad.y * 2)
+    };
+    const bounds = {
+      x: rect.x,
+      y: rect.y,
+      w: rect.width,
+      h: rect.height,
+      rect,
+      place: (input) => resolvePlacedRect(rect, input),
+      split: (options) => splitRect(rect, options)
+    };
+    contentRender(ctx, bounds);
+  }, screenOptions);
+}

package/dist/demos/demo-layout.ts

@@ -56,7 +56,12 @@ export async function demo(
   options: DemoOptions = {},
 ) {
   await bunti.init({ nerdFont: true });
-  const config = { ...DEFAULT_DEMO_OPTIONS, ...options };
+  const once = process.argv.includes('--once');
+  const config = {
+    ...DEFAULT_DEMO_OPTIONS,
+    ...options,
+    ...(once ? { once: true } : {}),
+  };
   const {
     header,
     footer,

package/dist/demos/engine.js

@@ -0,0 +1,244 @@
+import {
+  bunti,
+  innerRect,
+  setCell,
+  splitRect,
+  visibleWidth
+} from "../index.js";
+let frameCount = 0;
+const mix = (a, b, t) => ({
+  r: Math.round(a.r + (b.r - a.r) * Math.max(0, Math.min(1, t))),
+  g: Math.round(a.g + (b.g - a.g) * Math.max(0, Math.min(1, t))),
+  b: Math.round(a.b + (b.b - a.b) * Math.max(0, Math.min(1, t)))
+});
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+const addGlow = (base, color, amount, cx, cy, x, y, rx, ry) => {
+  const dx = (x - cx) / rx;
+  const dy = (y - cy) / ry;
+  const strength = clamp01(1 - dx * dx - dy * dy) * amount;
+  return mix(base, color, strength);
+};
+function vividTextureColor(nx, ny) {
+  let color = mix({ r: 207, g: 74, b: 236 }, { r: 255, g: 184, b: 72 }, clamp01((nx + ny * 0.78) / 1.55));
+  color = addGlow(color, { r: 113, g: 230, b: 248 }, 0.74, 0.5, 0.12, nx, ny, 0.48, 0.36);
+  color = addGlow(color, { r: 245, g: 72, b: 218 }, 0.44, 0.1, 0.28, nx, ny, 0.34, 0.54);
+  color = addGlow(color, { r: 255, g: 236, b: 98 }, 0.58, 0.82, 0.78, nx, ny, 0.32, 0.36);
+  color = addGlow(color, { r: 255, g: 246, b: 222 }, 0.22, 0.56, 0.42, nx, ny, 0.62, 0.42);
+  return {
+    r: Math.round(color.r),
+    g: Math.round(color.g),
+    b: Math.round(color.b)
+  };
+}
+function drawEngineField(state, width, height) {
+  for (let y = 0;y < height; y++) {
+    for (let x = 0;x < width; x++) {
+      const nx = x / Math.max(1, width - 1);
+      const ny = y / Math.max(1, height - 1);
+      const gradientColor = vividTextureColor(nx, ny);
+      setCell(state, x, y, {
+        char: "█",
+        fg: gradientColor,
+        bg: gradientColor
+      });
+    }
+  }
+}
+function metric(label, value, valueColor, labelColor) {
+  return `${labelColor(label.padEnd(13))} ${valueColor(value)}`;
+}
+function wrapWords(text, width) {
+  const lines = [];
+  let line = "";
+  for (const word of text.split(/\s+/)) {
+    const next = line ? `${line} ${word}` : word;
+    if (visibleWidth(next) > width && line) {
+      lines.push(line);
+      line = word;
+    } else {
+      line = next;
+    }
+  }
+  if (line)
+    lines.push(line);
+  return lines;
+}
+bunti.render((ctx) => {
+  const {
+    state,
+    box,
+    color,
+    width,
+    height,
+    mouseX,
+    mouseY,
+    lastKey,
+    requestStop,
+    resolveLocalRect,
+    hitbox,
+    blit
+  } = ctx;
+  if (lastKey === "q")
+    requestStop();
+  drawEngineField(state, width, height);
+  const frame = frameCount++;
+  const textFg = { r: 205, g: 212, b: 224 };
+  const softTextFg = { r: 145, g: 152, b: 166 };
+  const panelText = (s) => color.fg(textFg, s);
+  const softText = (s) => color.fg(softTextFg, s);
+  const shell = innerRect({ x: 0, y: 0, width, height }, 2);
+  const compact = width < 92;
+  const stageTop = Math.min(6, Math.max(3, Math.floor(height * 0.12)));
+  const title = " \uD83C\uDF6D  BUNTI RENDER ENGINE ";
+  const titleArea = resolveLocalRect({
+    x: 2,
+    y: Math.max(1, Math.floor((shell.y + stageTop) / 2)),
+    width: Math.max(0, width - 4),
+    height: 1
+  }, { defaultX: "left", defaultY: "top" });
+  box({
+    x: titleArea.x,
+    y: titleArea.y,
+    width: titleArea.width,
+    height: titleArea.height,
+    border: "none",
+    align: "center"
+  }, ({ text }) => text(color.bold(color.fg({ r: 255, g: 255, b: 255 }, title))));
+  const stage = innerRect(shell, {
+    top: stageTop,
+    left: compact ? 1 : 4,
+    right: compact ? 1 : 4,
+    bottom: 2
+  });
+  const [top, bottom] = splitRect(stage, {
+    direction: "vertical",
+    constraints: [compact ? "52%" : "50%", "1fr"],
+    gap: 1
+  });
+  const [telemetry, clipping] = splitRect(top, {
+    direction: compact ? "vertical" : "horizontal",
+    constraints: ["1fr", "1fr"],
+    gap: 2
+  });
+  const [hitTargets, colorStack] = splitRect(bottom, {
+    direction: compact ? "vertical" : "horizontal",
+    constraints: ["1fr", compact ? 7 : "1fr"],
+    gap: 2
+  });
+  box({
+    x: telemetry.x,
+    y: telemetry.y,
+    width: telemetry.width,
+    height: telemetry.height,
+    border: "none",
+    bgColor: { r: 8, g: 10, b: 14 },
+    padding: [1, 2]
+  }, ({ text }) => {
+    text([
+      color.cyan("CORE TELEMETRY"),
+      "",
+      metric("TICK", frame.toString().padStart(6, "0"), color.yellow, panelText),
+      metric("RESOLUTION", `${width}x${height}`, color.green, panelText),
+      metric("MOUSE", `${mouseX},${mouseY}`, color.magenta, panelText),
+      metric("MODE", compact ? "STACKED RECTS" : "SPLIT RECTS", color.cyan, panelText),
+      "",
+      `${color.gray("q")} ${softText("quits")}  ${color.gray("resize")} ${softText("reflows")}  ${color.gray("mouse")} ${softText("lights hitboxes")}`
+    ].join(`
+`));
+  });
+  const clippingText = "This panel proves ANSI-aware clipping and wrapping. The same sentence can fold inside one Rect while the neighbor truncates sharply at its boundary without escape-sequence damage.";
+  const clippingTextWidth = Math.max(12, clipping.width - 4);
+  const wrappedClipping = wrapWords(clippingText, clippingTextWidth).map(panelText).join(`
+`);
+  const truncatedClipping = wrapWords(clippingText.repeat(2), clippingTextWidth).slice(0, Math.max(1, clipping.height - 10)).map((line) => color.fg({ r: 160, g: 160, b: 170 }, line)).join(`
+`);
+  box({
+    x: clipping.x,
+    y: clipping.y,
+    width: clipping.width,
+    height: clipping.height,
+    border: "none",
+    bgColor: { r: 8, g: 8, b: 12 },
+    padding: [1, 2]
+  }, ({ text }) => {
+    text(`${color.yellow("CLIPPING + WRAP")}
+
+`);
+    text(`${color.fg(textFg, color.bold("WRAPPED"))}
+${wrappedClipping}
+
+`);
+    text(`${color.fg(textFg, color.bold("TRUNCATED"))}
+`);
+    text(truncatedClipping);
+  });
+  box({
+    x: hitTargets.x,
+    y: hitTargets.y,
+    width: hitTargets.width,
+    height: hitTargets.height,
+    border: "none",
+    bgColor: { r: 7, g: 11, b: 9 },
+    padding: [1, 2]
+  }, ({ text }) => {
+    text(`${color.green("HITBOX MAP")}
+
+`);
+    text(`${softText("Move the mouse over the bars.")}
+
+`);
+  });
+  const targetInner = innerRect(hitTargets, {
+    top: 5,
+    right: 3,
+    bottom: 2,
+    left: 3
+  });
+  const targetRows = splitRect(targetInner, {
+    direction: "vertical",
+    constraints: [1, 1, 1],
+    gap: 1
+  });
+  const labels = ["layout rect", "input zone", "paint layer"];
+  const fills = [
+    { r: 70, g: 190, b: 255 },
+    { r: 255, g: 190, b: 75 },
+    { r: 195, g: 110, b: 255 }
+  ];
+  for (const [index, row] of targetRows.entries()) {
+    const id = `engine-demo-target-${index}`;
+    const target = hitbox(id, row);
+    const fg = target.hovered ? { r: 255, g: 255, b: 255 } : { r: 20, g: 24, b: 28 };
+    const bg = target.hovered ? fills[index] : mix(fills[index], { r: 0, g: 0, b: 0 }, 0.45);
+    ctx.rect(row.x, row.y, row.width, row.height, {
+      char: " ",
+      bg
+    });
+    blit(row.x + 2, row.y, `${target.hovered ? ">" : " "} ${labels[index].padEnd(14)} ${target.box.x},${target.box.y},${target.box.width},${target.box.height}`, { fg, bg });
+  }
+  box({
+    x: colorStack.x,
+    y: colorStack.y,
+    width: colorStack.width,
+    height: colorStack.height,
+    border: "none",
+    bgColor: { r: 11, g: 8, b: 16 },
+    padding: [1, 2]
+  }, ({ text }) => {
+    text([
+      color.magenta("COLOR ISOLATION"),
+      "",
+      `${color.bgBlue(color.white(" nested bg "))} ${color.red("red")} ${color.green("green")} ${color.yellow("yellow")}`,
+      panelText("ANSI resets stay contained inside composed rows."),
+      "",
+      `${color.magenta("████")}${color.cyan("████")}${color.magenta("████")}`
+    ].join(`
+`));
+  });
+}, {
+  fps: 8,
+  keyboard: true,
+  mouse: true,
+  alternateBuffer: true,
+  hideCursor: true
+});

package/dist/demos/interaction.js

@@ -0,0 +1,74 @@
+import { Box, Button, Input } from "../components/index.js";
+import { demo } from "./demo-layout.js";
+demo("INTERACTIVE COMPONENTS", (ctx, bounds) => {
+  const { color, icon } = ctx;
+  const W = Math.min(bounds.w - 8, 72);
+  const panel = bounds.place({
+    y: 1,
+    width: W,
+    height: Math.min(bounds.h - 1, 13)
+  });
+  const compact = W < 60;
+  Box(ctx, {
+    x: panel.x,
+    y: panel.y,
+    width: panel.width,
+    height: panel.height,
+    border: "rounded",
+    borderColor: "bunti-blue",
+    padding: [1, compact ? 1 : 3],
+    align: "left"
+  }, (sub) => {
+    const ghostW = 5;
+    const primaryW = compact ? 14 : 15;
+    const actionGap = 2;
+    const actionRowW = ghostW + actionGap + primaryW;
+    const actionRow = sub.resolveLocalRect({
+      y: 8,
+      width: actionRowW,
+      height: 1
+    }, { defaultX: "right", defaultY: "top" });
+    const actionY = 8;
+    sub.text(color.cyan(color.bold("TACTICAL CONTROLS")));
+    sub.text(`
+`);
+    sub.text(color.dim("Keyboard, mouse, focus, and rerender states."));
+    sub.text(`
+
+`);
+    Input(sub, {
+      id: "input-mission",
+      label: "MISSION:",
+      placeholder: "Enter mission name...",
+      width: compact ? W - 8 : 48
+    });
+    sub.text(`
+`);
+    sub.text(color.dim(`Last key: ${ctx.lastKey || "none"}`));
+    sub.text(color.dim(`    Mouse: ${ctx.mouseX},${ctx.mouseY}`));
+    sub.text(`
+
+`);
+    const abort = Button(sub, {
+      id: "btn-abort",
+      label: "Abort",
+      variant: "ghost",
+      width: ghostW,
+      x: actionRow.x,
+      y: actionY,
+      detach: true
+    });
+    const deploy = Button(sub, {
+      id: "btn-deploy",
+      label: "Deploy",
+      icon: icon("rocket"),
+      variant: "primary",
+      width: primaryW,
+      x: actionRow.x + ghostW + actionGap,
+      y: actionY,
+      detach: true,
+      onClick: () => {}
+    });
+    sub.text(`${" ".repeat(actionRow.x)}${abort}${" ".repeat(actionGap)}${deploy}`);
+  });
+});

package/dist/demos/interaction.ts

@@ -1,5 +1,5 @@
 import { Box, Button, Input } from '../components/index.js';
-import { demo } from './demo-layout';
+import { demo } from './demo-layout.js';
 
 /**
  * Interactive Components Showcase