novac 2.0.1 → 2.2.0

package/novac/kits/libterm/ex.js

@@ -0,0 +1,285 @@
+'use strict';
+/**
+ * kitdef-demo.js  —  full showcase of all kitdef subsystems
+ * Run:  node kitdef-demo.js
+ */
+
+const { kitdef } = require('./kitdef');
+const {
+  Terminal, TWidget, TRouter, TShell, TEnv, TLog, TTheme,
+  TView, TVPixel, inputManager, ansi, px,
+} = kitdef;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Boot Terminal (starts input, enters alt-screen, wires resize)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const term = new Terminal({
+  altScreen: true,
+  mouse:     true,
+  theme:     'dark',
+  logLevel:  'debug',
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// TEnv  — define + load config schema
+// ─────────────────────────────────────────────────────────────────────────────
+
+term.env
+  .define('APP_NAME',  { type:'string', default:'kitdef-demo' })
+  .define('LOG_LEVEL', { type:'enum',   values:['trace','debug','info','warn','error'], default:'debug' })
+  .define('PORT',      { type:'int',    default:3000 })
+  .define('VERBOSE',   { type:'bool',   default:false })
+  .load();
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Layout: top bar / [left pane | right pane] / sensor bar / bottom bar
+// ─────────────────────────────────────────────────────────────────────────────
+
+term.on('ready', async () => {
+  const [topBar, middle, bottomBar] = term.screen.cutWeighted([0.07, 0.86, 0.07]);
+  const [leftPane, rightPane]       = middle.cutHorizontal(2);
+
+  // ── TTheme — paint with semantic tokens ──────────────────────────────────
+
+  const T = term.theme;   // active TTheme
+  topBar.fill(0, 0, topBar.rows, topBar.cols, { color: [null, T.get('bgAlt')] });
+  topBar.writeCentered(0,
+    `★  kitdef v1.0  |  ${term.env.get('APP_NAME')}  |  port=${term.env.get('PORT')}  ★`,
+    { color: [T.get('primary'), T.get('bgAlt')], style: 'bold' });
+  if (topBar.rows > 1) {
+    topBar.writeText(1, 1,
+      '[1] Menu  [2] List  [3] Dialog  [4] Shell  [5] Env  [6] Theme  Tab=focus  Ctrl-C=exit',
+      { color: [T.get('fgMuted'), T.get('bgAlt')] });
+  }
+  topBar.render();
+
+  // ── TLog — pipe into rightPane ────────────────────────────────────────────
+
+  term.log.setView(rightPane);
+  rightPane.border      = true;
+  rightPane.borderStyle = 'rounded';
+  rightPane.title       = ' Log ';
+  rightPane.scrollable  = true;
+  rightPane.onScroll('up',   () => rightPane.scrollUp(3));
+  rightPane.onScroll('down', () => rightPane.scrollDown(3));
+  rightPane.onArrow('up',    () => rightPane.scrollUp(1));
+  rightPane.onArrow('down',  () => rightPane.scrollDown(1));
+  rightPane.onFocus(() => { rightPane.borderStyle='heavy';   rightPane.markDirty(); });
+  rightPane.onBlur(()  => { rightPane.borderStyle='rounded'; rightPane.markDirty(); });
+  term.log.info('kitdef ready', { theme: T.name, port: term.env.get('PORT') });
+  term.log.debug('TEnv loaded', term.env.all());
+
+  // ── TRouter — left pane is the "screen" ──────────────────────────────────
+
+  leftPane.border      = true;
+  leftPane.borderStyle = 'rounded';
+  leftPane.title       = ' Screen ';
+  leftPane.onFocus(() => { leftPane.borderStyle='heavy';   leftPane.markDirty(); });
+  leftPane.onBlur(()  => { leftPane.borderStyle='rounded'; leftPane.markDirty(); });
+
+  const router = new TRouter(leftPane, inputManager);
+
+  // ── Screen: home ──────────────────────────────────────────────────────────
+  router.register('home', (view, r) => {
+    view.writeCentered(1, ' HOME ', { color: [T.get('primary'), null], style: 'bold' });
+    view.writeCentered(3, 'Use [1–6] keys or press Enter', { color: [T.get('fg'), null] });
+    view.writeCentered(4, 'to explore subsystems',         { color: [T.get('fgMuted'), null] });
+
+    // Spinner while "loading"
+    const stop = view.spinner(6, Math.floor(view.cols/2)-1, 'dots', 80, { color: [T.get('accent'), null] });
+    view.writeText(6, Math.floor(view.cols/2)+1, ' idle', { color: [T.get('fgMuted'), null] });
+
+    // Status bar at bottom of pane
+    view.statusBar(' kitdef ', ' home ', { color: ['black', T.get('primary')] });
+    term.log.debug('screen:home mounted');
+
+    return () => { stop(); view.clear(); };
+  });
+
+  // ── Screen: menu demo ─────────────────────────────────────────────────────
+  router.register('menu', async (view, r) => {
+    view.writeCentered(1, ' MENU WIDGET ', { color: [T.get('primary'), null], style: 'bold' });
+    view.markDirty();
+    const items  = ['Option Alpha', 'Option Beta', 'Option Gamma', 'Option Delta', '← Back'];
+    const choice = await TWidget.menu(view, items, {
+      selectedColor: T.get('primary'),
+      normalColor:   T.get('fg'),
+    });
+    term.log.info('menu selected', { choice });
+    if (choice === '← Back' || choice === null) r.pop();
+    return () => view.clear();
+  });
+
+  // ── Screen: list demo ─────────────────────────────────────────────────────
+  router.register('list', async (view, r) => {
+    view.writeCentered(1, ' LIST WIDGET ', { color: [T.get('primary'), null], style: 'bold' });
+    view.writeCentered(2, 'Space=toggle  Enter=confirm', { color: [T.get('fgMuted'), null] });
+    view.markDirty();
+    const fruits = ['Apple','Banana','Cherry','Date','Elderberry','Fig','Grape','Honeydew'];
+    const chosen = await TWidget.list(view, fruits, {
+      selectedColor: T.get('primary'), normalColor: T.get('fg'),
+    });
+    term.log.info('list selected', { chosen });
+    r.pop();
+    return () => view.clear();
+  });
+
+  // ── Screen: dialog demo ───────────────────────────────────────────────────
+  router.register('dialog', async (view, r) => {
+    view.writeCentered(2, ' DIALOG / INPUT WIDGETS ', { color: [T.get('primary'), null], style:'bold' });
+    view.writeCentered(4, 'A dialog will appear…', { color: [T.get('fg'), null] });
+    view.markDirty();
+    await new Promise(res => setTimeout(res, 800));
+
+    const answer = await TWidget.dialog(view, ' Confirm ', 'Delete all the things?', ['Yes','No','Cancel']);
+    term.log.info('dialog answer', { answer });
+
+    // After dialog, show a text input
+    view.clear();
+    view.writeCentered(2, 'Type something and press Enter:', { color: [T.get('fg'), null] });
+    view.markDirty();
+    const typed = await TWidget.textInput(view, 4, Math.floor(view.cols/4), Math.floor(view.cols/2), {
+      placeholder: 'type here…',
+    });
+    term.log.info('textInput result', { typed });
+
+    // Password input
+    view.writeCentered(6, 'Now a masked password input:', { color: [T.get('fg'), null] });
+    view.markDirty();
+    const pw = await TWidget.textInput(view, 8, Math.floor(view.cols/4), Math.floor(view.cols/2), {
+      placeholder: '••••••••', mask: '●',
+    });
+    term.log.info('password entered', { length: pw?.length });
+
+    // Notify
+    TWidget.notify(view, `You typed: "${typed}"`, { type:'success', duration:2500 });
+
+    await new Promise(res => setTimeout(res, 2600));
+    r.pop();
+    return () => view.clear();
+  });
+
+  // ── Screen: shell demo ────────────────────────────────────────────────────
+  router.register('shell', async (view, r) => {
+    view.border=true; view.borderStyle='rounded'; view.scrollable=true;
+    view.title=' Shell Output ';
+    view.writeCentered(1, ' TSHELL DEMO ', { color:[T.get('primary'),null], style:'bold' });
+    view.markDirty();
+
+    const sh = new TShell({ view });
+
+    term.log.info('running: echo + date');
+    const r1 = await sh.shell('echo "Hello from TShell!" && date');
+    term.log.debug('exit code', { code: r1.code });
+
+    term.log.info('running: ls -la (truncated)');
+    const r2 = await sh.shell('ls -la | head -8');
+    term.log.debug('ls done', { lines: r2.stdout.split('\n').length });
+
+    view.writeCentered(view.rows - 3, 'Press any key to go back', { color:[T.get('fgMuted'),null] });
+    view.markDirty();
+
+    await new Promise(resolve => {
+      const off = view.on('key', () => { view.removeListener('key',off); resolve(); });
+    });
+    view.scrollable=false; view.border=false;
+    r.pop();
+    return () => { view.clear(); };
+  });
+
+  // ── Screen: env table ─────────────────────────────────────────────────────
+  router.register('envscreen', (view, r) => {
+    view.clear();
+    view.writeCentered(0, ' TENV VARIABLES ', { color:[T.get('primary'),null], style:'bold' });
+    const tableData = term.env.describe();
+    view.table(2, 1, tableData, {
+      headerColor: ['black', T.get('primary')],
+      cellColor:   [T.get('fg'), null],
+    });
+    view.writeCentered(view.rows-2, 'Press any key to go back', { color:[T.get('fgMuted'),null] });
+    view.markDirty();
+
+    const off = view.on('key', () => { view.removeListener('key',off); r.pop(); });
+    return () => { view.clear(); };
+  });
+
+  // ── Screen: theme switcher ────────────────────────────────────────────────
+  router.register('themescreen', (view, r) => {
+    view.clear();
+    view.writeCentered(1, ' TTHEME SWITCHER ', { color:[T.get('primary'),null], style:'bold' });
+    const themeNames = T.names();
+    let sel = themeNames.indexOf(T.name);
+
+    const draw = () => {
+      themeNames.forEach((name, i) => {
+        const active = name === T.name, cursor = i === sel;
+        const pre = cursor ? '▶ ' : '  ';
+        view.writeText(3+i, 2, (pre+name).padEnd(view.cols-4), {
+          color: [active ? T.get('primary') : cursor ? T.get('fg') : T.get('fgMuted'), null],
+          style: active?'bold':null,
+        });
+      });
+      view.writeCentered(view.rows-2, `Active: ${T.name} — ↑↓ move  Enter=apply  Esc=back`, { color:[T.get('fgMuted'),null] });
+      view.markDirty();
+    };
+    draw();
+
+    const offUp   = view.onArrow('up',   () => { sel=(sel-1+themeNames.length)%themeNames.length; draw(); });
+    const offDown = view.onArrow('down', () => { sel=(sel+1)%themeNames.length; draw(); });
+    const offEnter= view.onKey('enter',  () => {
+      T.use(themeNames[sel]);
+      term.log.info('theme changed', { theme: T.name });
+      // Re-paint top bar with new theme
+      topBar.fill(0,0,topBar.rows,topBar.cols,{color:[null,T.get('bgAlt')]});
+      topBar.writeCentered(0,'★  kitdef v1.0  ★',{color:[T.get('primary'),T.get('bgAlt')],style:'bold'});
+      topBar.markDirty();
+      draw();
+    });
+    const offEsc  = view.onKey('escape', () => done());
+
+    function done() { offUp();offDown();offEnter();offEsc(); r.pop(); }
+    return () => { view.clear(); };
+  });
+
+  // ── Global key bindings ───────────────────────────────────────────────────
+  inputManager.on('key', key => {
+    if (leftPane.focused) {
+      if (key.name==='1') router.push('menu');
+      else if (key.name==='2') router.push('list');
+      else if (key.name==='3') router.push('dialog');
+      else if (key.name==='4') router.push('shell');
+      else if (key.name==='5') router.push('envscreen');
+      else if (key.name==='6') router.push('themescreen');
+    }
+  });
+
+  // Tab cycles focus
+  let focusList = [leftPane, rightPane], focusIdx = 0;
+  inputManager.on('key', k => {
+    if (k.name==='tab'&&!k.shift) {
+      focusIdx=(focusIdx+1)%focusList.length;
+      inputManager.focus(focusList[focusIdx]);
+    }
+  });
+
+  // ── Status bar ────────────────────────────────────────────────────────────
+  bottomBar.fill(0,0,bottomBar.rows,bottomBar.cols,{color:[null,T.get('bgAlt')]});
+  const updateStatus = msg => {
+    bottomBar.fill(0,0,1,bottomBar.cols,{color:[null,T.get('bgAlt')]});
+    bottomBar.writeText(0,1,msg.slice(0,bottomBar.cols-2),{color:[T.get('fg'),T.get('bgAlt')]});
+    bottomBar.markDirty();
+  };
+  updateStatus(' kitdef ready — [1-6] navigate  Tab=focus  Ctrl-C=exit');
+  inputManager.on('key',   k => updateStatus(` key: "${k.name}"${k.ctrl?'+ctrl':''}  [1-6] screens  Tab=focus`));
+  inputManager.on('click', e => updateStatus(` click (${e.row},${e.col}) btn=${e.button}`));
+  inputManager.on('resize',e => { updateStatus(` terminal resized → ${e.cols}×${e.rows}`); });
+  bottomBar.render();
+
+  // ── TWidget.Gauge live demo inside leftPane margin ─────────────────────── 
+  // (rendered after router pushes its content, so it's a passive layer)
+
+  // ── Boot router ───────────────────────────────────────────────────────────
+  router.push('home');
+  leftPane.focus();
+});