create-pmos 0.15.0 → 0.16.0

package/workspace/public/pm/dom.js

@@ -0,0 +1,116 @@
+/* pm/dom.js — the whole DOM layer for the four-panel workspace.
+ *
+ * The design prototype is a React tree whose every element carries a hand-written inline `style`
+ * string plus an optional `style-hover`. This surface is a PORT of that tree, so the helper is
+ * built to make a port a copy-paste: `attrs.style` takes the prototype's style string verbatim and
+ * `attrs.hover` takes its style-hover string verbatim. Nothing is parsed, normalised or
+ * re-formatted — a value that survives the copy unchanged cannot drift from the design.
+ *
+ *   el('button', { style: 'display:flex;gap:8px', hover: 'background:var(--accent)',
+ *                  onClick: fn, title: 'x' }, span, 'text')
+ */
+
+/** Append `kids` (nodes, strings, numbers, arrays, null/false) to `node`. */
+function append(node, kids) {
+  for (const k of kids) {
+    if (k === null || k === undefined || k === false || k === true) continue;
+    if (Array.isArray(k)) { append(node, k); continue; }
+    node.appendChild(k instanceof Node ? k : document.createTextNode(String(k)));
+  }
+}
+
+/**
+ * Reproduce the prototype's `style-hover`: on mouseenter the declarations are appended to the
+ * element's own inline style (so, being last, they win for any property they repeat); on
+ * mouseleave the original attribute is restored exactly.
+ */
+export function hover(node, decls) {
+  if (!decls) return node;
+  let saved = null;
+  node.addEventListener('mouseenter', () => {
+    if (saved !== null) return;
+    saved = node.getAttribute('style') || '';
+    const sep = saved && !saved.trimEnd().endsWith(';') ? ';' : '';
+    node.setAttribute('style', saved + sep + decls);
+  });
+  node.addEventListener('mouseleave', () => {
+    if (saved === null) return;
+    if (saved) node.setAttribute('style', saved); else node.removeAttribute('style');
+    saved = null;
+  });
+  return node;
+}
+
+/** Create an element. See the module header for the attribute contract. */
+export function el(tag, attrs, ...children) {
+  const node = document.createElement(tag);
+  if (attrs) {
+    for (const k in attrs) {
+      const v = attrs[k];
+      if (v === null || v === undefined || v === false) continue;
+      if (k === 'style') node.setAttribute('style', typeof v === 'string' ? v : style(v));
+      else if (k === 'hover' || k === 'styleHover') hover(node, v);
+      else if (k === 'ref') { if (typeof v === 'function') v(node); }
+      else if (k === 'value' || k === 'checked' || k === 'disabled' || k === 'selected') node[k] = v;
+      else if (k === 'html') node.innerHTML = String(v);
+      else if (k.length > 2 && k[0] === 'o' && k[1] === 'n' && typeof v === 'function') {
+        node.addEventListener(k.slice(2).toLowerCase(), v);
+      } else if (v === true) node.setAttribute(k, '');
+      else node.setAttribute(k, String(v));
+    }
+  }
+  append(node, children);
+  return node;
+}
+
+/** {backgroundColor:'red', minHeight:'30px'} -> 'background-color:red;min-height:30px'. */
+export function style(obj) {
+  if (typeof obj === 'string') return obj;
+  const out = [];
+  for (const k in obj) {
+    const v = obj[k];
+    if (v === null || v === undefined || v === false) continue;
+    out.push(k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase()) + ':' + v);
+  }
+  return out.join(';');
+}
+
+/** Remove every child of `node`, returning it so it can be filled in the same expression. */
+export function clear(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+  return node;
+}
+
+/** A document fragment holding `kids` — for returning several siblings from one function. */
+export function frag(...kids) {
+  const f = document.createDocumentFragment();
+  append(f, kids);
+  return f;
+}
+
+/** A text node. Named so a port reads `text(p.name)` where the prototype read `{{ p.name }}`. */
+export function text(s) {
+  return document.createTextNode(s === null || s === undefined ? '' : String(s));
+}
+
+/** addEventListener that returns its own undo — used where a listener outlives one render. */
+export function on(node, ev, fn, opts) {
+  node.addEventListener(ev, fn, opts);
+  return () => node.removeEventListener(ev, fn, opts);
+}
+
+/**
+ * Reconcile `parent`'s children to exactly `kids`, in order, WITHOUT recreating nodes that are
+ * already there. The shell relies on this: panel 4 hosts a live xterm, and a terminal that is
+ * detached and re-attached on every unrelated state change loses its grid — the quiet PTY
+ * regression the PRD names. Nodes carried over keep their identity, listeners and scroll.
+ */
+export function setChildren(parent, kids) {
+  const want = kids.filter((k) => k);
+  const keep = new Set(want);
+  for (const n of [...parent.childNodes]) if (!keep.has(n)) parent.removeChild(n);
+  want.forEach((k, i) => {
+    if (parent.childNodes[i] !== k) parent.insertBefore(k, parent.childNodes[i] || null);
+  });
+  return parent;
+}