@zakmandhro/bunti 0.1.5 → 0.2.0

package/dist/demos/engine.ts

@@ -0,0 +1,374 @@
+import {
+  bunti,
+  innerRect,
+  type RGB,
+  type ScreenState,
+  setCell,
+  splitRect,
+  visibleWidth,
+} from '../index.js';
+
+/**
+ * Bunti Render Engine Demo
+ * Direct buffer animation + Rect layout + clipping + mouse hitboxes.
+ */
+
+let frameCount = 0;
+
+const mix = (a: RGB, b: RGB, t: number): RGB => ({
+  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: number) => Math.max(0, Math.min(1, value));
+
+const addGlow = (
+  base: RGB,
+  color: RGB,
+  amount: number,
+  cx: number,
+  cy: number,
+  x: number,
+  y: number,
+  rx: number,
+  ry: number,
+) => {
+  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: number, ny: number): RGB {
+  let color: RGB = 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: ScreenState, width: number, height: number) {
+  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: string,
+  value: string,
+  valueColor: (s: string) => string,
+  labelColor: (s: string) => string,
+) {
+  return `${labelColor(label.padEnd(13))} ${valueColor(value)}`;
+}
+
+function wrapWords(text: string, width: number) {
+  const lines: string[] = [];
+  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: string) => color.fg(textFg, s);
+    const softText = (s: string) => 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 = ' 🍭  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('\n'),
+        );
+      },
+    );
+
+    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('\n');
+    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('\n');
+    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')}\n\n`);
+        text(
+          `${color.fg(textFg, color.bold('WRAPPED'))}\n${wrappedClipping}\n\n`,
+        );
+        text(`${color.fg(textFg, color.bold('TRUNCATED'))}\n`);
+        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')}\n\n`);
+        text(`${softText('Move the mouse over the bars.')}\n\n`);
+      },
+    );
+
+    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('\n'),
+        );
+      },
+    );
+  },
+  {
+    fps: 8,
+    keyboard: true,
+    mouse: true,
+    alternateBuffer: true,
+    hideCursor: true,
+  },
+);

package/dist/demos/interaction.ts

@@ -0,0 +1,91 @@
+import { Box, Button, Input } from '../components/index.js';
+import { demo } from './demo-layout';
+
+/**
+ * Interactive Components Showcase
+ */
+
+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('\n');
+      sub.text(color.dim('Keyboard, mouse, focus, and rerender states.'));
+      sub.text('\n\n');
+
+      Input(sub, {
+        id: 'input-mission',
+        label: 'MISSION:',
+        placeholder: 'Enter mission name...',
+        width: compact ? W - 8 : 48,
+      });
+
+      sub.text('\n');
+      sub.text(color.dim(`Last key: ${ctx.lastKey || 'none'}`));
+      sub.text(color.dim(`    Mouse: ${ctx.mouseX},${ctx.mouseY}`));
+      sub.text('\n\n');
+
+      const abort = Button(sub, {
+        id: 'btn-abort',
+        label: 'Abort',
+        variant: 'ghost',
+        width: ghostW,
+        x: actionRow.x,
+        y: actionY,
+        detach: true,
+      }) as unknown as string;
+
+      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: () => {
+          /* Action handled here */
+        },
+      }) as unknown as string;
+
+      sub.text(
+        `${' '.repeat(actionRow.x)}${abort}${' '.repeat(actionGap)}${deploy}`,
+      );
+    },
+  );
+});

package/dist/demos/login.ts

@@ -0,0 +1,203 @@
+import { Button, Card, Input, Link, Progress } from '../components/index.js';
+import { demo } from './demo-layout';
+
+/**
+ * Sign-In Demo — web-app style auth form rendered in the terminal.
+ */
+
+demo('AUTHENTICATION', (ctx, bounds) => {
+  const { color, icon, useState, lastKey, focus, isFocused, requestStop } = ctx;
+
+  const [email] = useState('input-email', '');
+  const [password] = useState('input-password', '');
+  const [status, setStatus] = useState('login-status', 'idle');
+  const [error, setError] = useState('login-error', '');
+  const [progress, setProgress] = useState('login-progress', 0);
+  const [forgotNotice, setForgotNotice] = useState('forgot-notice', '');
+
+  const subtleTitle = { r: 140, g: 140, b: 140 };
+  const mutedText = { r: 110, g: 110, b: 110 };
+  const linkColor = { r: 37, g: 99, b: 235 }; // bootstrap-ish blue
+
+  const handleLogin = () => {
+    if (!email.includes('@')) {
+      setError('Please enter a valid email address.');
+      return;
+    }
+    if (password.length < 4) {
+      setError('Password must be at least 4 characters.');
+      return;
+    }
+    setError('');
+    setForgotNotice('');
+    setStatus('loading');
+    setProgress(0);
+  };
+
+  if (lastKey === 'q') requestStop();
+
+  if (status === 'loading') {
+    if (progress < 1) {
+      const step = ctx.flicker(0.1) ? 0.05 : 0.01;
+      setProgress(Math.min(1, progress + step));
+    } else {
+      setStatus('success');
+    }
+  }
+
+  // Success screen
+  if (status === 'success') {
+    const W = Math.min(bounds.w - 8, 60);
+    const card = bounds.place({
+      y: 4,
+      width: W,
+      height: 12,
+    });
+
+    Card(
+      ctx,
+      {
+        x: card.x,
+        y: card.y,
+        width: card.width,
+        height: card.height,
+        title: 'Welcome back',
+        variant: 'accent',
+        bgColor: { r: 250, g: 249, b: 246 },
+      },
+      (sub) => {
+        sub.text(`\n ${icon('check')} ${color.bold("You're signed in")}\n\n`);
+        sub.text(
+          ` Hi ${color.bold(email.split('@')[0])}, your session is now active.\n\n`,
+        );
+
+        Button(sub, {
+          id: 'btn-logout',
+          label: 'Sign out',
+          icon: icon('exit'),
+          variant: 'danger',
+          onClick: () => {
+            setStatus('idle');
+            setProgress(0);
+            setError('');
+          },
+        });
+      },
+    );
+    return;
+  }
+
+  // Sign-in form
+  const W = Math.min(bounds.w - 8, 50);
+  const form = bounds.place({
+    width: W,
+    height: 26,
+  });
+
+  Card(
+    ctx,
+    {
+      id: 'auth-card', // hover: border lifts to theme.focus, bg shifts a step
+      x: form.x,
+      y: form.y,
+      width: form.width,
+      height: form.height,
+      border: 'rounded',
+      variant: error ? 'danger' : 'accent',
+      bgColor: { r: 250, g: 249, b: 246 },
+    },
+    (sub) => {
+      // Brand logo — centered, nerd-font glyph + bold "Bunti"
+      const brandVisible = 2 + 1 + 5; // glyph(2) + space + "Bunti"(5)
+      const logo = sub.resolveLocalRect({ width: brandVisible, height: 1 });
+      const logoPad = ' '.repeat(logo.x);
+      const purple = { r: 147, g: 51, b: 234 };
+      const brand = color.fg(purple, color.bold(`${icon('bunti')} Bunti`));
+      sub.text(`${logoPad + brand}\n\n`);
+
+      sub.text(
+        color.fg(mutedText, `Sign in to your Bunti account to continue.\n`),
+      );
+      sub.text(
+        color.fg(
+          mutedText,
+          `Use ${color.bold('Tab')} or your mouse to move between fields.\n\n`,
+        ),
+      );
+
+      // Email — label on its own line, Bootstrap style
+      sub.text(`${color.fg(subtleTitle, color.bold('Email address'))}\n`);
+      Input(sub, {
+        id: 'input-email',
+        placeholder: 'you@bunti.net',
+        width: '100%',
+      });
+
+      sub.text('\n');
+
+      // Password — label on its own line
+      sub.text(`${color.fg(subtleTitle, color.bold('Password'))}\n`);
+      Input(sub, {
+        id: 'input-password',
+        placeholder: 'Enter your password',
+        type: 'password',
+        width: '100%',
+      });
+
+      if (isFocused('input-email') && lastKey === 'enter')
+        focus('input-password');
+      if (isFocused('input-password') && lastKey === 'enter') handleLogin();
+
+      sub.text('\n\n');
+
+      if (status === 'loading') {
+        const barW = W - 26;
+        sub.text(` ${icon('loading')} ${color.dim('Signing in ')} `);
+        Progress(sub, {
+          value: progress,
+          width: barW,
+          fillColor: { r: 37, g: 99, b: 235 },
+          trackColor: { r: 210, g: 208, b: 200 },
+          showPercent: true,
+        });
+      } else {
+        Button(sub, {
+          id: 'btn-login',
+          label: 'Sign in',
+          icon: icon('lock'),
+          variant: 'primary',
+          width: '100%',
+          onClick: handleLogin,
+        });
+      }
+
+      sub.text('\n');
+
+      // "Forgot password?" link — underlined, hover-brightened, clickable
+      const linkText = 'Forgot password?';
+      const link = sub.resolveLocalRect({
+        y: sub.cursorY,
+        width: linkText.length,
+        height: 1,
+      });
+      Link(sub, {
+        id: 'forgot-password',
+        label: linkText,
+        color: linkColor,
+        x: link.x,
+        y: link.y,
+        onClick: () => {
+          setForgotNotice('Password reset link sent to your email.');
+        },
+      });
+
+      if (error) {
+        sub.text(`\n\n ${color.fg('error', `${icon('warning')} ${error}`)}`);
+      } else if (forgotNotice) {
+        sub.text(
+          `\n\n ${color.fg(mutedText, `${icon('check')} ${forgotNotice}`)}`,
+        );
+      }
+    },
+  );
+});