/** LANE-UI — tiny DOM helpers. No framework, no dependencies, no apologies. */

type Attrs = Record<string, string>;

/** Create an element. `cls` is space-separated; children may be nodes or strings. */
export function el<K extends keyof HTMLElementTagNameMap>(
  tag: K,
  cls?: string,
  children?: Array<Node | string>,
): HTMLElementTagNameMap[K] {
  const node = document.createElement(tag);
  if (cls) node.className = cls;
  if (children) for (const c of children) node.append(c);
  return node;
}

export function attrs<T extends HTMLElement>(node: T, a: Attrs): T {
  for (const [k, v] of Object.entries(a)) node.setAttribute(k, v);
  return node;
}

/** Set textContent only when it changed — update() runs every frame. */
export function text(node: HTMLElement, s: string): void {
  if (node.textContent !== s) node.textContent = s;
}

/** Toggle a class only when it changed. */
export function cls(node: HTMLElement, name: string, on: boolean): void {
  if (node.classList.contains(name) !== on) node.classList.toggle(name, on);
}

/** Set an inline style property only when it changed. */
export function style(node: HTMLElement, prop: string, value: string): void {
  if (node.style.getPropertyValue(prop) !== value) node.style.setProperty(prop, value);
}

/** A panel: the standard bordered industrial box everything lives in. */
export function panel(cls?: string): HTMLDivElement {
  return el('div', cls ? `fk-panel ${cls}` : 'fk-panel');
}
