take4-console 0.15.0

package/src/Screen/types.mts

@@ -0,0 +1,416 @@
+import type { Pos } from './Pos.mjs';
+import type { Size } from './Size.mjs';
+
+/** Text and background color, expressed as ANSI color number (0–255) or hex string (e.g. '#ff0000'). */
+export type Color = number | string;
+
+// ── Built-in style names ──────────────────────────────────────────────────────
+
+/** Name of the default background style used by windows and controls. */
+export const BUILTIN_WINDOW_BG          = 'builtin:window-bg';
+/** Name of the default border color style (foreground = border color). */
+export const BUILTIN_BORDER             = 'builtin:border';
+/** Name of the focused border color style. */
+export const BUILTIN_BORDER_FOCUSED     = 'builtin:border-focused';
+/** Name of the disabled border color style. */
+export const BUILTIN_BORDER_DISABLED    = 'builtin:border-disabled';
+/** Name of the normal text style used by controls. */
+export const BUILTIN_TEXT               = 'builtin:text';
+/** Name of the focused text style used by controls. */
+export const BUILTIN_TEXT_FOCUSED       = 'builtin:text-focused';
+/** Name of the disabled text style used by controls. */
+export const BUILTIN_TEXT_DISABLED      = 'builtin:text-disabled';
+/** Name of the placeholder text style used by text input controls. */
+export const BUILTIN_TEXT_PLACEHOLDER   = 'builtin:text-placeholder';
+/** Name of the checked/selected indicator style used by Checkbox and Radio. */
+export const BUILTIN_TEXT_CHECKED       = 'builtin:text-checked';
+/** Name of the cursor highlight style (inverse) used by text input controls. */
+export const BUILTIN_CURSOR             = 'builtin:cursor';
+
+/** Integer handle returned by StyleRegistry.register(). ID 0 always means no style (empty {}). */
+export type StyleId = number;
+
+/** Visual attributes for a single terminal cell. */
+export interface CellAttributes {
+  foreground?: Color;
+  background?: Color;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  blink?: boolean;
+  inverse?: boolean;
+}
+
+/** A single cell in the terminal grid. */
+export interface Cell {
+  /** Single character stored in this cell, or a space for blank. */
+  char: string;
+  /** Visual attributes applied to this cell. */
+  attributes: CellAttributes;
+}
+
+/** Terminal dimensions expressed as columns × rows. */
+export interface TerminalSize {
+  width: number;
+  height: number;
+}
+
+/** Box-drawing character style for window borders. */
+export type BorderStyle = 'single' | 'double' | 'rounded';
+
+/** Per-side border configuration. */
+export interface WindowBorder {
+  top?:    boolean;
+  right?:  boolean;
+  bottom?: boolean;
+  left?:   boolean;
+  /** Box-drawing style. Default: 'single'. */
+  style?:  BorderStyle;
+  /** Border color. Default: inherits from cell. */
+  color?:  Color;
+}
+
+/** Common properties shared by Window and all controls. Passed as the first constructor parameter. */
+export interface WindowProperties {
+  /** Position of the window within its parent. */
+  pos: Pos;
+  /** Dimensions of the window. Optional for auto-sized controls (Checkbox, Radio, StatusLED, Spinner). */
+  size?: Size;
+  /** Background style ID registered in a StyleRegistry. 0 or undefined = transparent. Default: undefined. */
+  background?: StyleId;
+  /** Border config, or true for all sides with single style. Default: false. */
+  border?: WindowBorder | boolean;
+  /** Default border shape used when the user does not supply border. Set by control subclasses. */
+  defaultBorder?: WindowBorder | boolean;
+  /** Whether the window is active. Affects border/background appearance. Default: true. */
+  active?: boolean;
+  /** Whether the control currently has keyboard focus. Default: false. */
+  focused?: boolean;
+  /** Whether the control is non-interactive and visually dimmed. Default: false. */
+  disabled?: boolean;
+  /** Text label displayed by the control. Default: ''. */
+  label?: string;
+}
+
+/** Internal per-axis position spec used by Pos. */
+export type AxisSpec =
+  | { mode: 'start'; value: number }
+  | { mode: 'end';   value: number }
+  | { mode: 'pct';   value: number }
+  | { mode: 'center' };
+
+/** Internal per-axis size spec used by Size. */
+export type DimSpec =
+  | { mode: 'abs'; value: number }
+  | { mode: 'pct'; value: number };
+
+/** Options for Window.writeText() – position defaults to (0, 0). */
+export interface WriteTextOptions {
+  /** Column to start writing at. Default: 0. */
+  x?: number;
+  /** Row to start writing at. Default: 0. */
+  y?: number;
+  /** Style ID registered in a StyleRegistry. Default: 0 (no style). */
+  style?: StyleId;
+}
+
+/** Control-specific properties for the Button control. */
+export interface ButtonProperties {
+  /** Called when the button is activated (Enter or Space while focused). */
+  onPress?: () => void;
+}
+
+/** Control-specific properties for the TextBox control. */
+export interface TextBoxProperties {
+  /** Initial text value. Default: ''. */
+  value?: string;
+  /** Placeholder shown when value is empty and the control is not focused. Default: ''. */
+  placeholder?: string;
+  /** Initial cursor position (character index). Default: end of value. */
+  cursor?: number;
+}
+
+/** Control-specific properties for the TextArea control. */
+export interface TextAreaProperties {
+  /** Initial text value; may contain newline characters. Default: ''. */
+  value?: string;
+  /** Placeholder shown when value is empty and the control is not focused. Default: ''. */
+  placeholder?: string;
+  /** Initial cursor position. Default: { x: 0, y: 0 }. */
+  cursor?: { x: number; y: number };
+}
+
+/** Control-specific properties for the Checkbox control. */
+export interface CheckboxProperties {
+  /** Whether the checkbox is initially checked. Default: false. */
+  checked?: boolean;
+  /** Called when the checked state changes via handleKey(). */
+  onChange?: (checked: boolean) => void;
+}
+
+/** Control-specific properties for the Radio control. */
+export interface RadioProperties {
+  /** Whether the radio button is initially selected. Default: false. */
+  checked?: boolean;
+  /** Called when the radio button is selected via handleKey(). */
+  onChange?: (checked: boolean) => void;
+}
+
+/** Control-specific properties for the StatusLED control. */
+export interface StatusLEDProperties {
+  /** Visual state of the LED. Default: 'off'. */
+  state?: 'ok' | 'warn' | 'error' | 'off';
+}
+
+/** Control-specific properties for the ProgressBar (horizontal) control. */
+export interface ProgressBarProperties {
+  /** Current value. Default: 0. */
+  value?: number;
+  /** Maximum value. Default: 100. */
+  max?: number;
+  /** Whether to show the percentage label centred over the bar. Default: true. */
+  showLabel?: boolean;
+  /** ANSI color number for the filled portion. Default: 75. */
+  fillColor?: number;
+  /** ANSI color number for the empty portion. Default: 237. */
+  emptyColor?: number;
+}
+
+/** Control-specific properties for the ProgressBarV (vertical) control. */
+export interface ProgressBarVProperties {
+  /** Current value. Default: 0. */
+  value?: number;
+  /** Maximum value. Default: 100. */
+  max?: number;
+  /** ANSI color number for the filled portion. Default: 75. */
+  fillColor?: number;
+  /** ANSI color number for the empty portion. Default: 237. */
+  emptyColor?: number;
+}
+
+/** Control-specific properties for the LineChart control. */
+export interface LineChartProperties {
+  /** Data points to plot. Default: []. */
+  data?: number[];
+  /** Minimum Y value; if omitted, derived from data. */
+  min?: number;
+  /** Maximum Y value; if omitted, derived from data. */
+  max?: number;
+  /** ANSI color number for the line. Default: 75. */
+  color?: number;
+}
+
+/** Control-specific properties for the ListBox control. */
+export interface ListBoxProperties {
+  /** Initial items shown in the list. Default: []. */
+  items?: string[];
+  /** Initial selected index, or -1 for no selection. Default: 0 if items is non-empty, else -1. */
+  selectedIndex?: number;
+  /** Called when the selected index changes via handleKey(). */
+  onChange?: (index: number, item: string) => void;
+}
+
+/** Control-specific properties for the Tabs control. */
+export interface TabsProperties {
+  /** Tab titles shown in the header row. Default: []. */
+  titles?: string[];
+  /** Initially active tab index. Default: 0. */
+  activeIndex?: number;
+  /** Called when the active tab changes via handleKey(). */
+  onChange?: (index: number, title: string) => void;
+}
+
+/** Control-specific properties for the Sparkline control. */
+export interface SparklineProperties {
+  /** Data values to plot as a one-row block-character chart. Default: []. */
+  data?: number[];
+  /** Minimum Y value; if omitted, derived from data. */
+  min?: number;
+  /** Maximum Y value; if omitted, derived from data. */
+  max?: number;
+  /** ANSI color number for the sparkline glyphs. Default: 75. */
+  color?: number;
+}
+
+/** Control-specific properties for the Spinner control. */
+export interface SpinnerProperties {
+  /** Visual style of the spinner animation. Default: 'braille'. */
+  style?: 'braille' | 'dots' | 'line' | 'circle' | 'arrow';
+  /** Initial frame index. Default: 0. */
+  frame?: number;
+  /** Whether the spinner is actively animating. Default: true. */
+  running?: boolean;
+  /** ANSI color number for the spinner glyph. Default: 75. */
+  color?: number;
+}
+
+/** Control-specific properties for the BarChart control. */
+export interface BarChartProperties {
+  /** Data values for each bar. Default: []. */
+  data?: number[];
+  /** Label string for each bar (truncated to barWidth columns). Default: []. */
+  labels?: string[];
+  /** Maximum Y value; if omitted, derived from data. */
+  max?: number;
+  /** ANSI color number for the bars. Default: 75. */
+  barColor?: number;
+  /** Width in columns of each bar. Default: 1. */
+  barWidth?: number;
+}
+
+// ── InterfaceBuilder YAML schema ──────────────────────────────────────────────
+
+/** A single axis value: absolute number, edge-relative negative, or percentage string ("N%"). */
+export type YamlAxisValue = number | string;
+
+/** YAML position specification for a window. */
+export type YamlPosSpec =
+  | 'center' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
+  | { preset: 'top';    offset?: YamlAxisValue }
+  | { preset: 'left';   offset?: YamlAxisValue }
+  | { preset: 'right';  offset?: YamlAxisValue }
+  | { preset: 'bottom'; offset?: YamlAxisValue }
+  | { x: YamlAxisValue; y: YamlAxisValue };
+
+/** YAML size specification for a window. */
+export type YamlSizeSpec =
+  | 'fill'
+  | { fillWidth: YamlAxisValue }
+  | { fillHeight: YamlAxisValue }
+  | { width: YamlAxisValue; height: YamlAxisValue };
+
+/** Control type tags supported by InterfaceBuilder. */
+export type YamlWindowType = 'window' | 'button' | 'textbox' | 'textarea' | 'checkbox' | 'radio'
+  | 'statusled' | 'progressbar' | 'progressbarv' | 'linechart' | 'barchart'
+  | 'listbox' | 'tabs' | 'sparkline' | 'spinner';
+
+/** A named style entry in the YAML layout's `styles:` section. Extends CellAttributes with a required name. */
+export interface YamlStyleDef extends CellAttributes {
+  /** Name used to reference this style. May override built-in names (e.g. 'builtin:window-bg'). */
+  name: string;
+}
+
+/** A single window or control definition in a YAML layout. */
+export interface YamlWindowDef {
+  /** Optional identifier for retrieving the built window from the result map. */
+  id?: string;
+  /** Widget type. Defaults to 'window'. */
+  type?: YamlWindowType;
+  /** Position within the parent. Defaults to { x: 0, y: 0 }. */
+  pos?: YamlPosSpec;
+  /** Dimensions of the window. Required for window/button/textbox/textarea; ignored for checkbox/radio (auto-sized). */
+  size?: YamlSizeSpec;
+  /** Background style: a named style string (e.g. 'builtin:window-bg') or a numeric StyleId. Omit for transparent. */
+  background?: string | number;
+  /** Border configuration. true enables all sides with single style. */
+  border?: WindowBorder | boolean;
+  /** Whether the window is active (affects dim). Default: true. */
+  active?: boolean;
+  /** Text written at the top-left of the content area after construction. */
+  content?: string;
+  /** Nested children added via addChild(). */
+  children?: YamlWindowDef[];
+  /** Label text (Button, Checkbox, Radio). */
+  label?: string;
+  /** Placeholder text shown when value is empty (TextBox, TextArea). */
+  placeholder?: string;
+  /** Initial text value (TextBox, TextArea). */
+  value?: string;
+  /** Initial checked state (Checkbox, Radio). Default: false. */
+  checked?: boolean;
+  /** Whether the control starts focused. Default: false. */
+  focused?: boolean;
+  /** Whether the control is disabled. Default: false. */
+  disabled?: boolean;
+  /** Callback ID registered via InterfaceBuilder.registerCallback() — fired on button press. */
+  onPress?: string;
+  /** Callback ID registered via InterfaceBuilder.registerCallback() — fired on value change. */
+  onChange?: string;
+  /** LED state ('ok' | 'warn' | 'error' | 'off') — used by statusled. */
+  state?: 'ok' | 'warn' | 'error' | 'off';
+  /** Whether to show a percentage label over a progress bar. Default: true. */
+  showLabel?: boolean;
+  /** ANSI color for the filled portion (ProgressBar, ProgressBarV). */
+  fillColor?: number;
+  /** ANSI color for the empty portion (ProgressBar, ProgressBarV). */
+  emptyColor?: number;
+  /** Current numeric value for ProgressBar / ProgressBarV. */
+  barValue?: number;
+  /** Maximum numeric value for ProgressBar, ProgressBarV, LineChart, BarChart. */
+  max?: number;
+  /** Minimum numeric value for LineChart. */
+  min?: number;
+  /** Numeric data array for LineChart / BarChart. */
+  data?: number[];
+  /** String label array for BarChart bars. */
+  barLabels?: string[];
+  /** Line color for LineChart or bar color for BarChart (ANSI number). */
+  chartColor?: number;
+  /** Width of each bar in BarChart columns. Default: 1. */
+  barWidth?: number;
+  /** Items shown in a ListBox. */
+  items?: string[];
+  /** Initial selection index for ListBox. */
+  selectedIndex?: number;
+  /** Tab titles for a Tabs control. */
+  titles?: string[];
+  /** Initially active tab index for a Tabs control. */
+  activeIndex?: number;
+  /** Visual style for Spinner animation. */
+  spinnerStyle?: 'braille' | 'dots' | 'line' | 'circle' | 'arrow';
+  /** Initial frame index for Spinner. */
+  frame?: number;
+  /** Whether Spinner is actively animating. */
+  running?: boolean;
+  /** Tab index this child belongs to when its parent is a Tabs control. */
+  tab?: number;
+}
+
+/** Top-level YAML layout document consumed by InterfaceBuilder. */
+export interface YamlLayout {
+  /** Named style definitions registered before windows are built. */
+  styles?: YamlStyleDef[];
+  /** Top-level windows to add to the Screen. */
+  windows: YamlWindowDef[];
+}
+
+// ── Focusable ─────────────────────────────────────────────────────────────────
+
+/** Interface that interactive controls must satisfy to integrate with WindowManager. */
+export interface Focusable {
+  isFocused(): boolean;
+  setFocused(focused: boolean): void;
+  isDisabled(): boolean;
+  handleKey?(key: string): void;
+}
+
+/** Mouse event emitted by the terminal (SGR or X10 protocol). */
+export interface TerminalMouseEvent {
+  /** Whether this is a button press, release, or cursor move. */
+  type: 'press' | 'release' | 'move';
+  /** Button index: 0 = left, 1 = middle, 2 = right. */
+  button: number;
+  /** 0-based column of the event. */
+  x: number;
+  /** 0-based row of the event. */
+  y: number;
+  shift?: boolean;
+  alt?: boolean;
+  ctrl?: boolean;
+}
+
+/** Constructor options for WindowManager. */
+export interface WindowManagerOptions {
+  /** Key strings that trigger application exit. Default: ['\x03'] (Ctrl+C). */
+  exitKeys?: string[];
+  /** Called after the input loop stops and the terminal state is restored. */
+  onExit?: () => void;
+  /** Called for every raw key string before it is dispatched to a control. */
+  onKey?: (key: string) => void;
+  /** Called for every mouse event when mouse support is enabled. */
+  onMouse?: (event: TerminalMouseEvent) => void;
+  /** Enable mouse click tracking (SGR protocol). Default: false. */
+  mouse?: boolean;
+}

package/src/demo.mts

@@ -0,0 +1,171 @@
+import { fileURLToPath } from 'node:url';
+import { join, dirname } from 'node:path';
+import { Screen } from './Screen/Screen.mjs';
+import { WindowManager } from './Screen/WindowManager.mjs';
+import { InterfaceBuilder } from './Screen/InterfaceBuilder.mjs';
+import { LineChart }    from './Screen/controls/LineChart.mjs';
+import { BarChart }     from './Screen/controls/BarChart.mjs';
+import { StatusLED }    from './Screen/controls/StatusLED.mjs';
+import { ProgressBar }  from './Screen/controls/ProgressBar.mjs';
+import { ProgressBarV } from './Screen/controls/ProgressBarV.mjs';
+import { Spinner }      from './Screen/controls/Spinner.mjs';
+import { Sparkline }    from './Screen/controls/Sparkline.mjs';
+import { ListBox }      from './Screen/controls/ListBox.mjs';
+import { Tabs }         from './Screen/controls/Tabs.mjs';
+
+type LedState = 'ok' | 'warn' | 'error' | 'off';
+
+// ── Entry point ───────────────────────────────────────────────────────────────
+
+/** Renders the controls demo. */
+const main = async (): Promise<void> => {
+	const screen  = new Screen();
+	const { width, height } = screen.getSize();
+
+	screen.fill(' ', screen.registerStyle({ background: 234 }));
+
+	let demoTimer: NodeJS.Timeout | null = null;
+
+	const wm = new WindowManager(screen, {
+		exitKeys: ['q', '\x03'],
+		onExit:   () => {
+			if (demoTimer) clearInterval(demoTimer);
+			process.exit(0);
+		},
+		mouse:    true,
+	});
+
+	const layoutPath = join(dirname(fileURLToPath(import.meta.url)), 'layout.yaml');
+	const result = await new InterfaceBuilder().buildFromFile(layoutPath, screen, wm);
+
+	// ── Header & status bar ───────────────────────────────────────────────────
+	const headerStyle = screen.registerStyle({ background: 24, foreground: 255, bold: true });
+	result.get('header')!.writeText(' take4_console  │  controls demo ', { style: headerStyle });
+
+	const statusStyle = screen.registerStyle({ background: 24, foreground: 250 });
+	result.get('statusBar')!.writeText(
+		` ${width}×${height}  │  `
+		+ 'Button  Checkbox  Radio  TextBox  '
+		+ 'StatusLED  ProgressBar  ProgressBarV  LineChart  BarChart',
+		{ style: statusStyle },
+	);
+
+	// ── Resource labels in monitorPanel ──────────────────────────────────────
+	const labelStyle  = screen.registerStyle({ foreground: 245 });
+	const monitor = result.get('monitorPanel')!;
+	monitor.writeText('CPU', { x: 1, y: 1, style: labelStyle });
+	monitor.writeText('MEM', { x: 1, y: 3, style: labelStyle });
+	monitor.writeText('DSK', { x: 1, y: 5, style: labelStyle });
+	monitor.writeText('SYS', { x: -4, y: 0, style: labelStyle });
+
+	// ── Chart data ────────────────────────────────────────────────────────────
+	const lc = result.get('lineChart') as LineChart;
+	let lineData: number[] = [5, 18, 8, 45, 22, 60, 38, 72, 50, 65];
+	lc.setData(lineData);
+
+	const bc = result.get('barChart') as BarChart;
+	const barLabels: string[] = ['A', 'B', 'C', 'D', 'E'];
+	bc.setData([80, 45, 62, 30, 75]);
+	bc.setLabels(barLabels);
+
+	// ── Sparkline trend buffers (rolling 30-sample history) ──────────────────
+	const sparkCpu = result.get('sparkCpu') as Sparkline;
+	const sparkMem = result.get('sparkMem') as Sparkline;
+	const sparkDsk = result.get('sparkDsk') as Sparkline;
+	let cpuHistory: number[] = Array.from({ length: 30 }, () => Math.floor(Math.random() * 100));
+	let memHistory: number[] = Array.from({ length: 30 }, () => Math.floor(Math.random() * 100));
+	let dskHistory: number[] = Array.from({ length: 30 }, () => Math.floor(Math.random() * 100));
+	sparkCpu.setMin(0); sparkCpu.setMax(100); sparkCpu.setData(cpuHistory);
+	sparkMem.setMin(0); sparkMem.setMax(100); sparkMem.setData(memHistory);
+	sparkDsk.setMin(0); sparkDsk.setMax(100); sparkDsk.setData(dskHistory);
+
+	// ── Sparkline labels (written into the Tabs container's content) ─────────
+	const tabs      = result.get('chartsPanel') as Tabs;
+	const sparkLblStyle = screen.registerStyle({ foreground: 245 });
+	tabs.writeText('CPU', { x: 1, y: 2, style: sparkLblStyle });
+	tabs.writeText('MEM', { x: 1, y: 3, style: sparkLblStyle });
+	tabs.writeText('DSK', { x: 1, y: 4, style: sparkLblStyle });
+
+	// ── Events list (tab 2) ──────────────────────────────────────────────────
+	const events = result.get('eventsList') as ListBox;
+	const EVENT_TEMPLATES = [
+		'user logged in', 'cache warmed', 'metric collected', 'job completed',
+		'config reloaded', 'heartbeat ok', 'worker spawned', 'session expired',
+		'gc finished', 'index rebuilt',
+	];
+
+	// ── Live-updating handles ─────────────────────────────────────────────────
+	const pbCpu   = result.get('pbCpu')   as ProgressBar;
+	const pbMem   = result.get('pbMem')   as ProgressBar;
+	const pbDisk  = result.get('pbDisk')  as ProgressBar;
+	const pbvLoad = result.get('pbvLoad') as ProgressBarV;
+
+	const leds: StatusLED[] = [
+		result.get('ledApi')    as StatusLED,
+		result.get('ledDb')     as StatusLED,
+		result.get('ledCache')  as StatusLED,
+		result.get('ledWorker') as StatusLED,
+	];
+
+	const headerSpinner = result.get('headerSpinner') as Spinner;
+
+	const ledStates: LedState[] = ['ok', 'ok', 'ok', 'warn', 'error', 'off'];
+
+	/** Returns a random integer in [0, max). */
+	const rand = (max: number): number => Math.floor(Math.random() * max);
+
+	/** Formats the current wall-clock time as HH:MM:SS. */
+	const timestamp = (): string => {
+		const d = new Date();
+		const pad = (n: number): string => n.toString().padStart(2, '0');
+		return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+	};
+
+	/** Periodic tick: refresh charts, progress bars, status LEDs, sparklines, and event log. */
+	const tick = (): void => {
+		// scroll line chart left and append a new sample
+		lineData = [...lineData.slice(1), rand(100)];
+		lc.setData(lineData);
+
+		// shuffle bar chart values
+		bc.setData([rand(100), rand(100), rand(100), rand(100), rand(100)]);
+
+		// jitter progress bars
+		const cpu = rand(101);
+		const mem = rand(101);
+		const dsk = rand(101);
+		pbCpu  .setValue(cpu);
+		pbMem  .setValue(mem);
+		pbDisk .setValue(dsk);
+		pbvLoad.setValue(rand(101));
+
+		// shift sparkline history buffers (the same samples as the progress bars)
+		cpuHistory = [...cpuHistory.slice(1), cpu];
+		memHistory = [...memHistory.slice(1), mem];
+		dskHistory = [...dskHistory.slice(1), dsk];
+		sparkCpu.setData(cpuHistory);
+		sparkMem.setData(memHistory);
+		sparkDsk.setData(dskHistory);
+
+		// randomize LED states (weighted toward "ok")
+		for (const led of leds) {
+			led.setState(ledStates[rand(ledStates.length)]!);
+		}
+
+		// advance the header spinner
+		headerSpinner.step();
+
+		// prepend a new event to the log; keep the list bounded
+		const msg   = EVENT_TEMPLATES[rand(EVENT_TEMPLATES.length)]!;
+		const next  = [`[${timestamp()}] ${msg}`, ...events.getItems()];
+		events.setItems(next.slice(0, 20));
+
+		screen.render();
+	};
+
+	demoTimer = setInterval(tick, 1000);
+
+	wm.run();
+};
+
+main();