@andrew_l/vue-stdout 0.0.2

package/dist/index.mjs

@@ -0,0 +1,1584 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/components/Box.tsx
+import { resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";
+var Box = (props, {
+  slots
+}) => {
+  return _createVNode(_resolveComponent("box"), props, {
+    default: () => slots.default?.()
+  });
+};
+Box.displayName = "Box";
+
+// src/components/NewLine.tsx
+import { resolveComponent as _resolveComponent2, isVNode as _isVNode, createVNode as _createVNode2 } from "vue";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+var NewLine = ({
+  count = 1
+}) => {
+  let _slot;
+  return _createVNode2(_resolveComponent2("stdout-text"), null, _isSlot(_slot = "\n".repeat(count)) ? _slot : {
+    default: () => [_slot]
+  });
+};
+NewLine.displayName = "NewLine";
+
+// src/components/ProgressBar.tsx
+import { computed, defineComponent, shallowRef as shallowRef2, createVNode as _createVNode3 } from "vue";
+
+// src/hooks/useContainerSize.ts
+import { ref, toValue as toValue2, watch as watch2 } from "vue";
+
+// src/hooks/useEventListener.ts
+import { onScopeDispose, toValue, watch } from "vue";
+function useEventListener(target, eventName, listener) {
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener2) => {
+    el.on(event, listener2);
+    return () => {
+      el.off(event, listener2);
+    };
+  };
+  const stopWatch = watch(() => toValue(target), (el) => {
+    cleanup();
+    if (!el) return;
+    cleanups.push(register(el, eventName, listener));
+  }, {
+    immediate: true,
+    flush: "post"
+  });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  onScopeDispose(stop);
+  return stop;
+}
+
+// src/hooks/useContainerSize.ts
+function useContainerSize(target) {
+  const width = ref(0);
+  const height = ref(0);
+  const computeSize = (node) => {
+    const box = node.getBoundingClientRect();
+    width.value = box.width;
+    height.value = box.height;
+  };
+  useEventListener(target, "resize", () => {
+    computeSize(toValue2(target));
+  });
+  watch2(() => toValue2(target), (newNode) => {
+    if (newNode) computeSize(newNode);
+  }, {
+    immediate: true
+  });
+  return {
+    width,
+    height
+  };
+}
+
+// src/hooks/useDOMElement.ts
+import { getCurrentInstance, onMounted, shallowRef } from "vue";
+function useDOMElement() {
+  const instance = getCurrentInstance();
+  const node = shallowRef(null);
+  onMounted(() => {
+    node.value = instance.vnode?.el ?? null;
+  });
+  return node;
+}
+
+// src/components/ProgressBar.tsx
+var remainingCharacter = "\u2591";
+var completedCharacter = "\u2588";
+var ProgressBar = defineComponent((props) => {
+  const progressElement = shallowRef2(null);
+  const {
+    width
+  } = useContainerSize(progressElement);
+  const percent = computed(() => {
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    return Math.min((props.value - min) / max, 1);
+  });
+  const percentText = computed(() => {
+    return Math.floor(percent.value * 100) + "%";
+  });
+  const chars = computed(() => {
+    let availableSpace = Math.max(width.value - percentText.value.length - 1, 0);
+    if (!availableSpace) return "";
+    const completeChars = Math.floor(availableSpace * percent.value);
+    const renamingChars = availableSpace - completeChars;
+    return completedCharacter.repeat(completeChars) + remainingCharacter.repeat(renamingChars);
+  });
+  return () => {
+    const borderStyle = props.variant ?? "round";
+    return _createVNode3(Box, {
+      "borderStyle": borderStyle,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "gap": 1,
+      "ref": progressElement
+    }, {
+      default: () => [_createVNode3(Box, {
+        "flexGrow": 1
+      }, {
+        default: () => [_createVNode3("span", {
+          "color": props.color
+        }, [chars.value])]
+      }), _createVNode3(Box, {
+        "width": 4
+      }, {
+        default: () => [props.showPercent && _createVNode3("span", {
+          "color": props.color
+        }, [percentText.value])]
+      })]
+    });
+  };
+}, {
+  name: "ProgressBar",
+  props: ["min", "max", "value", "color", "backgroundColor", "showPercent", "variant"]
+});
+
+// src/components/Text.tsx
+import { createVNode as _createVNode4 } from "vue";
+var Text = (props, {
+  slots
+}) => {
+  return _createVNode4("span", props, [slots.default?.()]);
+};
+Text.displayName = "Text";
+
+// src/Container.ts
+import ansiEscapes from "ansi-escapes";
+
+// src/stdout.ts
+import { isString } from "@andrew_l/toolkit";
+function cleanLines(fromNumber, toNumber) {
+  for (let line = fromNumber; line < toNumber; line++) {
+    process.stdout.cursorTo(0, line);
+    process.stdout.clearLine(1);
+  }
+}
+function writeCleaner(stdout, y) {
+  let prevHeight = 0;
+  return (...args) => {
+    const text = args.map((v) => isString(v) ? v : JSON.stringify(v, null, 2)).join("\n\n");
+    stdout.cursorTo(0, y);
+    stdout.write(text);
+    const lineHeight = stdout.columns;
+    const newLength = text.split("\n").map((v) => Math.max(v.length / lineHeight, 1)).reduce((a, b) => a + b, 0);
+    cleanLines(y + prevHeight, y + newLength);
+    prevHeight = newLength;
+  };
+}
+
+// src/tree/NodeTree.ts
+import { EventEmitter } from "node:events";
+var NodeTree = class extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "nodeName", "NodeTree");
+    __publicField(this, "parentNode", null);
+    __publicField(this, "childNodes", []);
+  }
+  getDisplayName() {
+    return this.nodeName;
+  }
+  getDisplayData() {
+    return {};
+  }
+  toJSON() {
+    return {
+      ...this.getDisplayData(),
+      childNodes: this.childNodes.map((v) => v.toJSON())
+    };
+  }
+  get lastChild() {
+    return this.childNodes.at(-1) ?? null;
+  }
+  get firstChild() {
+    return this.childNodes.at(0) ?? null;
+  }
+  get nextSibling() {
+    const parent = this.parentNode;
+    if (!parent) {
+      return null;
+    }
+    const i = parent.childNodes.indexOf(this);
+    return parent.childNodes[i + 1] || null;
+  }
+  get previousSibling() {
+    const parent = this.parentNode;
+    if (!parent) {
+      return null;
+    }
+    const i = parent.childNodes.indexOf(this);
+    return parent.childNodes[i - 1] || null;
+  }
+  appendChild(node) {
+    this.insertBefore(node);
+  }
+  removeChild(node) {
+    const i = this.childNodes.indexOf(node);
+    if (i > -1) {
+      node.remove();
+    }
+  }
+  insertBefore(child, ref2) {
+    const parent = this;
+    let refIndex;
+    if (ref2) {
+      refIndex = this.childNodes.indexOf(ref2);
+      if (refIndex === -1) {
+        throw new Error("ref is not a child of parent");
+      }
+    }
+    child.remove();
+    child.parentNode = parent;
+    refIndex = ref2 ? parent.childNodes.indexOf(ref2) : -1;
+    if (refIndex === -1) {
+      parent.childNodes.push(child);
+    } else {
+      parent.childNodes.splice(refIndex, 0, child);
+    }
+  }
+  remove() {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const i = parent.childNodes.indexOf(this);
+    if (i > -1) {
+      parent.childNodes.splice(i, 1);
+    } else {
+      throw Error("target is not a childNode of parent");
+    }
+    this.parentNode = null;
+  }
+  /** @internal */
+  destroy() {
+    this.remove();
+    this.childNodes.forEach((c) => c.destroy());
+    this.childNodes = [];
+  }
+};
+
+// src/tree/DOMTree/DOMNode.ts
+var nodeId = 0;
+var DOMNodeType = /* @__PURE__ */ ((DOMNodeType2) => {
+  DOMNodeType2[DOMNodeType2["DOCUMENT"] = 0] = "DOCUMENT";
+  DOMNodeType2[DOMNodeType2["ELEMENT_NODE"] = 1] = "ELEMENT_NODE";
+  DOMNodeType2[DOMNodeType2["TEXT_NODE"] = 3] = "TEXT_NODE";
+  DOMNodeType2[DOMNodeType2["COMMENT_NODE"] = 8] = "COMMENT_NODE";
+  return DOMNodeType2;
+})(DOMNodeType || {});
+var DOMNode = class extends NodeTree {
+  constructor() {
+    super();
+    __publicField(this, "id");
+    __publicField(this, "nodeType", 1 /* ELEMENT_NODE */);
+    __publicField(this, "nodeName", "DOMNode");
+    /** @internal */
+    __publicField(this, "computedBoundingClientRect", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    /** @internal */
+    __publicField(this, "root");
+    this.root = null;
+    this.id = nodeId++;
+  }
+  insertBefore(child, ref2) {
+    super.insertBefore(child, ref2);
+    child.setRootDocument(this.root);
+    this.emitRoot("DOMChanged");
+  }
+  remove() {
+    super.remove();
+    this.setRootDocument(null);
+  }
+  setRootDocument(document) {
+    this.root = document;
+    for (const child of this.childNodes) {
+      child.setRootDocument(document);
+    }
+  }
+  getBoundingClientRect() {
+    return {
+      ...this.computedBoundingClientRect
+    };
+  }
+  getDisplayData() {
+    return {
+      id: this.id,
+      nodeType: DOMNodeType[this.nodeType],
+      ...super.getDisplayData()
+    };
+  }
+  emitRoot(eventName, ...args) {
+    if (this.root) {
+      this.root.emit(eventName, ...args);
+    }
+  }
+  get textContent() {
+    return null;
+  }
+  set textContent(value) {
+    return;
+  }
+};
+
+// src/tree/DOMTree/DOMComment.ts
+var DOMComment = class extends DOMNode {
+  constructor(data = null) {
+    super();
+    __publicField(this, "nodeType", 8 /* COMMENT_NODE */);
+    __publicField(this, "nodeName", "DOMComment");
+    /** @internal */
+    __publicField(this, "textValue");
+    this.textValue = data;
+  }
+  get textContent() {
+    return this.textValue;
+  }
+  set textContent(value) {
+    this.textValue = value;
+  }
+  getDisplayData() {
+    return {
+      ...super.getDisplayData(),
+      textContent: this.textContent
+    };
+  }
+};
+
+// src/tree/utils/treeToText.ts
+var treeToText = (root, tab = "") => {
+  let str = root.getDisplayName();
+  let last = root.childNodes.length - 1;
+  for (; last >= 0; last--) if (root.childNodes[last]) break;
+  for (let i = 0; i <= last; i++) {
+    const childNode = root.childNodes[i];
+    if (!childNode) continue;
+    const isLast = i === last;
+    const child = treeToText(childNode, tab + (isLast ? " " : "\u2502") + "  ");
+    const branch = child ? isLast ? "\u2514\u2500" : "\u251C\u2500" : "\u2502";
+    str += "\n" + tab + branch + (child ? " " + child : "");
+  }
+  return str;
+};
+
+// src/tree/DOMTree/DOMText.ts
+var DOMText = class extends DOMNode {
+  constructor(data = "") {
+    super();
+    __publicField(this, "nodeType", 3 /* TEXT_NODE */);
+    __publicField(this, "nodeName", "DOMText");
+    /** @internal */
+    __publicField(this, "textValue");
+    this.textValue = data;
+  }
+  get textContent() {
+    return this.textValue;
+  }
+  set textContent(value) {
+    this.textValue = value;
+  }
+  getDisplayData() {
+    return {
+      ...super.getDisplayData(),
+      textContent: this.textContent
+    };
+  }
+  getDisplayName() {
+    return `${this.nodeName}(${this.textValue?.length})`;
+  }
+};
+
+// src/tree/DOMTree/DOMElement.ts
+var DOMElement = class extends DOMNode {
+  constructor(tagName) {
+    super();
+    __publicField(this, "nodeType", 1 /* ELEMENT_NODE */);
+    __publicField(this, "nodeName", "DOMElement");
+    __publicField(this, "tagName");
+    __publicField(this, "attributes", {});
+    this.tagName = tagName;
+  }
+  getDisplayName() {
+    return `${this.nodeName}(${this.tagName})`;
+  }
+  getDisplayData() {
+    return {
+      ...super.getDisplayData(),
+      tagName: this.tagName,
+      attributes: this.attributes
+    };
+  }
+  getAttribute(name) {
+    return this.attributes[name];
+  }
+  setAttribute(name, value) {
+    this.attributes[name] = value;
+    this.emitRoot("DOMChanged");
+  }
+  removeAttribute(name) {
+    delete this.attributes[name];
+  }
+  set textContent(value) {
+    this.childNodes.forEach((c) => c.destroy());
+    if (!value) return;
+    const textNode = new DOMText(value);
+    this.appendChild(textNode);
+  }
+  get textContent() {
+    let text = "";
+    for (let index = 0; index < this.childNodes.length; index++) {
+      const childNode = this.childNodes[index];
+      let nodeText = "";
+      if (childNode.nodeType === 8 /* COMMENT_NODE */) continue;
+      nodeText = childNode.textContent ?? "";
+      text += nodeText;
+    }
+    return text;
+  }
+};
+
+// src/tree/DOMTree/DOMDocument.ts
+var DOMDocument = class _DOMDocument extends DOMNode {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "nodeType", 0 /* DOCUMENT */);
+    __publicField(this, "nodeName", "DOMDocument");
+  }
+  static createDocument() {
+    return new _DOMDocument();
+  }
+  static createTextNode(data) {
+    return new DOMText(data);
+  }
+  static createComment(data) {
+    return new DOMComment(data);
+  }
+  static createElement(tagName) {
+    return new DOMElement(tagName);
+  }
+  insertBefore(child, ref2) {
+    super.insertBefore(child, ref2);
+    child.setRootDocument(this);
+  }
+  get treeText() {
+    return treeToText(this);
+  }
+};
+
+// src/tree/DOMTree/index.ts
+var DOM = Object.freeze({
+  Document: DOMDocument,
+  Text: DOMText,
+  Comment: DOMComment,
+  Element: DOMElement,
+  Node: DOMNode,
+  Type: DOMNodeType,
+  createDocument: DOMDocument.createDocument.bind(DOMDocument),
+  createComment: DOMDocument.createComment.bind(DOMDocument),
+  createTextNode: DOMDocument.createTextNode.bind(DOMDocument),
+  createElement: DOMDocument.createElement.bind(DOMDocument)
+});
+
+// src/tree/RenderTree/RenderBlock.ts
+import chalk2 from "chalk";
+import cliBoxes from "cli-boxes";
+import Yoga3 from "yoga-wasm-web/auto";
+
+// src/tree/RenderTree/RenderNode.ts
+import Yoga2 from "yoga-wasm-web/auto";
+
+// src/tree/RenderTree/utils/applyStyles.ts
+import Yoga from "yoga-wasm-web/auto";
+var applyPositionStyles = (node, style) => {
+  if ("position" in style) {
+    node.setPositionType(style.position === "absolute" ? Yoga.POSITION_TYPE_ABSOLUTE : Yoga.POSITION_TYPE_RELATIVE);
+  }
+};
+var applyMarginStyles = (node, style) => {
+  if ("margin" in style) {
+    node.setMargin(Yoga.EDGE_ALL, style.margin ?? 0);
+  }
+  if ("marginX" in style) {
+    node.setMargin(Yoga.EDGE_HORIZONTAL, style.marginX ?? 0);
+  }
+  if ("marginY" in style) {
+    node.setMargin(Yoga.EDGE_VERTICAL, style.marginY ?? 0);
+  }
+  if ("marginLeft" in style) {
+    node.setMargin(Yoga.EDGE_START, style.marginLeft || 0);
+  }
+  if ("marginRight" in style) {
+    node.setMargin(Yoga.EDGE_END, style.marginRight || 0);
+  }
+  if ("marginTop" in style) {
+    node.setMargin(Yoga.EDGE_TOP, style.marginTop || 0);
+  }
+  if ("marginBottom" in style) {
+    node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom || 0);
+  }
+};
+var applyPaddingStyles = (node, style) => {
+  if ("padding" in style) {
+    node.setPadding(Yoga.EDGE_ALL, style.padding ?? 0);
+  }
+  if ("paddingX" in style) {
+    node.setPadding(Yoga.EDGE_HORIZONTAL, style.paddingX ?? 0);
+  }
+  if ("paddingY" in style) {
+    node.setPadding(Yoga.EDGE_VERTICAL, style.paddingY ?? 0);
+  }
+  if ("paddingLeft" in style) {
+    node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0);
+  }
+  if ("paddingRight" in style) {
+    node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight || 0);
+  }
+  if ("paddingTop" in style) {
+    node.setPadding(Yoga.EDGE_TOP, style.paddingTop || 0);
+  }
+  if ("paddingBottom" in style) {
+    node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom || 0);
+  }
+};
+var applyFlexStyles = (node, style) => {
+  if ("flexGrow" in style) {
+    node.setFlexGrow(style.flexGrow ?? 0);
+  }
+  if ("flexShrink" in style) {
+    node.setFlexShrink(typeof style.flexShrink === "number" ? style.flexShrink : 1);
+  }
+  if ("flexWrap" in style) {
+    if (style.flexWrap === "nowrap") {
+      node.setFlexWrap(Yoga.WRAP_NO_WRAP);
+    }
+    if (style.flexWrap === "wrap") {
+      node.setFlexWrap(Yoga.WRAP_WRAP);
+    }
+    if (style.flexWrap === "wrap-reverse") {
+      node.setFlexWrap(Yoga.WRAP_WRAP_REVERSE);
+    }
+  }
+  if ("flexDirection" in style) {
+    if (style.flexDirection === "row") {
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
+    }
+    if (style.flexDirection === "row-reverse") {
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW_REVERSE);
+    }
+    if (style.flexDirection === "column") {
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
+    }
+    if (style.flexDirection === "column-reverse") {
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN_REVERSE);
+    }
+  }
+  if ("flexBasis" in style) {
+    if (typeof style.flexBasis === "number") {
+      node.setFlexBasis(style.flexBasis);
+    } else if (typeof style.flexBasis === "string") {
+      node.setFlexBasisPercent(Number.parseInt(style.flexBasis, 10));
+    } else {
+      node.setFlexBasisAuto();
+    }
+  }
+  if ("alignItems" in style) {
+    if (style.alignItems === "stretch" || !style.alignItems) {
+      node.setAlignItems(Yoga.ALIGN_STRETCH);
+    }
+    if (style.alignItems === "flex-start") {
+      node.setAlignItems(Yoga.ALIGN_FLEX_START);
+    }
+    if (style.alignItems === "center") {
+      node.setAlignItems(Yoga.ALIGN_CENTER);
+    }
+    if (style.alignItems === "flex-end") {
+      node.setAlignItems(Yoga.ALIGN_FLEX_END);
+    }
+  }
+  if ("alignSelf" in style) {
+    if (style.alignSelf === "auto" || !style.alignSelf) {
+      node.setAlignSelf(Yoga.ALIGN_AUTO);
+    }
+    if (style.alignSelf === "flex-start") {
+      node.setAlignSelf(Yoga.ALIGN_FLEX_START);
+    }
+    if (style.alignSelf === "center") {
+      node.setAlignSelf(Yoga.ALIGN_CENTER);
+    }
+    if (style.alignSelf === "flex-end") {
+      node.setAlignSelf(Yoga.ALIGN_FLEX_END);
+    }
+  }
+  if ("justifyContent" in style) {
+    if (style.justifyContent === "flex-start" || !style.justifyContent) {
+      node.setJustifyContent(Yoga.JUSTIFY_FLEX_START);
+    }
+    if (style.justifyContent === "center") {
+      node.setJustifyContent(Yoga.JUSTIFY_CENTER);
+    }
+    if (style.justifyContent === "flex-end") {
+      node.setJustifyContent(Yoga.JUSTIFY_FLEX_END);
+    }
+    if (style.justifyContent === "space-between") {
+      node.setJustifyContent(Yoga.JUSTIFY_SPACE_BETWEEN);
+    }
+    if (style.justifyContent === "space-around") {
+      node.setJustifyContent(Yoga.JUSTIFY_SPACE_AROUND);
+    }
+    if (style.justifyContent === "space-evenly") {
+      node.setJustifyContent(Yoga.JUSTIFY_SPACE_EVENLY);
+    }
+  }
+};
+var applyDimensionStyles = (node, style) => {
+  if ("width" in style) {
+    if (typeof style.width === "number") {
+      node.setWidth(style.width);
+    } else if (typeof style.width === "string") {
+      node.setWidthPercent(Number.parseInt(style.width, 10));
+    } else {
+      node.setWidthAuto();
+    }
+  }
+  if ("height" in style) {
+    if (typeof style.height === "number") {
+      node.setHeight(style.height);
+    } else if (typeof style.height === "string") {
+      node.setHeightPercent(Number.parseInt(style.height, 10));
+    } else {
+      node.setHeightAuto();
+    }
+  }
+  if ("minWidth" in style) {
+    if (typeof style.minWidth === "string") {
+      node.setMinWidthPercent(Number.parseInt(style.minWidth, 10));
+    } else {
+      node.setMinWidth(style.minWidth ?? 0);
+    }
+  }
+  if ("minHeight" in style) {
+    if (typeof style.minHeight === "string") {
+      node.setMinHeightPercent(Number.parseInt(style.minHeight, 10));
+    } else {
+      node.setMinHeight(style.minHeight ?? 0);
+    }
+  }
+};
+var applyDisplayStyles = (node, style) => {
+  if ("display" in style) {
+    node.setDisplay(style.display === "flex" ? Yoga.DISPLAY_FLEX : Yoga.DISPLAY_NONE);
+  }
+};
+var applyBorderStyles = (node, style) => {
+  if ("borderStyle" in style) {
+    const borderWidth = style.borderStyle ? 1 : 0;
+    if (style.borderTop !== false) {
+      node.setBorder(Yoga.EDGE_TOP, borderWidth);
+    }
+    if (style.borderBottom !== false) {
+      node.setBorder(Yoga.EDGE_BOTTOM, borderWidth);
+    }
+    if (style.borderLeft !== false) {
+      node.setBorder(Yoga.EDGE_LEFT, borderWidth);
+    }
+    if (style.borderRight !== false) {
+      node.setBorder(Yoga.EDGE_RIGHT, borderWidth);
+    }
+  }
+};
+var applyGapStyles = (node, style) => {
+  if ("gap" in style) {
+    node.setGap(Yoga.GUTTER_ALL, style.gap ?? 0);
+  }
+  if ("columnGap" in style) {
+    node.setGap(Yoga.GUTTER_COLUMN, style.columnGap ?? 0);
+  }
+  if ("rowGap" in style) {
+    node.setGap(Yoga.GUTTER_ROW, style.rowGap ?? 0);
+  }
+};
+var applyStyles = (node, style = {}) => {
+  applyPositionStyles(node, style);
+  applyMarginStyles(node, style);
+  applyPaddingStyles(node, style);
+  applyFlexStyles(node, style);
+  applyDimensionStyles(node, style);
+  applyDisplayStyles(node, style);
+  applyBorderStyles(node, style);
+  applyGapStyles(node, style);
+};
+
+// src/tree/RenderTree/RenderNode.ts
+var RenderNodeType = /* @__PURE__ */ ((RenderNodeType2) => {
+  RenderNodeType2[RenderNodeType2["NODE"] = 1] = "NODE";
+  RenderNodeType2[RenderNodeType2["BLOCK"] = 2] = "BLOCK";
+  RenderNodeType2[RenderNodeType2["INLINE"] = 3] = "INLINE";
+  RenderNodeType2[RenderNodeType2["TEXT"] = 4] = "TEXT";
+  return RenderNodeType2;
+})(RenderNodeType || {});
+var nodeId2 = 0;
+var RenderNode = class extends NodeTree {
+  constructor() {
+    super();
+    __publicField(this, "id");
+    __publicField(this, "nodeType", 1 /* NODE */);
+    __publicField(this, "nodeName", "RenderNode");
+    __publicField(this, "transformers", []);
+    /** @internal */
+    __publicField(this, "domNode");
+    /** @internal */
+    __publicField(this, "yogaNode");
+    __publicField(this, "realX");
+    __publicField(this, "realY");
+    this.id = nodeId2++;
+    this.yogaNode = Yoga2.Node.create();
+    this.domNode = null;
+    this.realX = 0;
+    this.realY = 0;
+  }
+  getDisplayName() {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.getComputedRect();
+    const rectText = `x=${this.realX},y=${y}/${this.realY}, w=${width},h=${height},t=${this.transformers.length}`;
+    return `${this.nodeName}` + (this.domNode ? `(${this.domNode.getDisplayName()})` : "") + " " + rectText;
+  }
+  getDisplayData() {
+    return {
+      id: this.id,
+      nodeType: RenderNodeType[this.nodeType],
+      ...super.getDisplayData()
+    };
+  }
+  remove() {
+    super.remove();
+    this.parentNode?.yogaNode.removeChild(this.yogaNode);
+  }
+  destroy() {
+    super.destroy();
+    this.yogaNode.free();
+  }
+  insertBefore(child, ref2) {
+    super.insertBefore(child, ref2);
+    const parent = this;
+    if (!ref2) {
+      parent.yogaNode.insertChild(child.yogaNode, parent.yogaNode.getChildCount());
+    } else {
+      const refIndex = parent.childNodes.indexOf(child);
+      parent.yogaNode.insertChild(child.yogaNode, refIndex);
+    }
+  }
+  getComputedRect() {
+    const {
+      yogaNode
+    } = this;
+    return {
+      x: yogaNode.getComputedLeft(),
+      y: yogaNode.getComputedTop(),
+      width: yogaNode.getComputedWidth(),
+      height: yogaNode.getComputedHeight()
+    };
+  }
+  getContentRect() {
+    const {
+      yogaNode
+    } = this;
+    const rect = this.getComputedRect();
+    const borderLeft = yogaNode.getComputedBorder(Yoga2.EDGE_LEFT);
+    const borderRight = yogaNode.getComputedBorder(Yoga2.EDGE_RIGHT);
+    const borderTop = yogaNode.getComputedBorder(Yoga2.EDGE_TOP);
+    const borderBottom = yogaNode.getComputedBorder(Yoga2.EDGE_BOTTOM);
+    const paddingLeft = yogaNode.getComputedPadding(Yoga2.EDGE_LEFT);
+    const paddingRight = yogaNode.getComputedPadding(Yoga2.EDGE_RIGHT);
+    const paddingTop = yogaNode.getComputedPadding(Yoga2.EDGE_TOP);
+    const paddingBottom = yogaNode.getComputedPadding(Yoga2.EDGE_BOTTOM);
+    return {
+      x: rect.x + borderLeft + paddingLeft,
+      y: rect.y + borderTop + paddingTop,
+      width: rect.width - borderLeft - borderRight - paddingLeft - paddingRight,
+      height: rect.height - borderTop - borderBottom - paddingBottom - paddingTop
+    };
+  }
+  renderToLayer(layer) {
+  }
+  computeStyles() {
+    this.transformers = [];
+    if (this.domNode) {
+      const attributes = this.domNode.attributes ?? {};
+      applyStyles(this.yogaNode, attributes);
+    }
+  }
+};
+
+// src/tree/RenderTree/utils/colorize.ts
+import chalk from "chalk";
+var rgbRegex = /^rgb\(\s?(\d+),\s?(\d+),\s?(\d+)\s?\)$/;
+var ansiRegex = /^ansi256\(\s?(\d+)\s?\)$/;
+var isNamedColor = (color) => {
+  return color in chalk;
+};
+var colorize = (str, color, type) => {
+  if (!color) {
+    return str;
+  }
+  if (isNamedColor(color)) {
+    if (type === "foreground") {
+      return chalk[color](str);
+    }
+    const methodName = `bg${color[0].toUpperCase() + color.slice(1)}`;
+    return chalk[methodName](str);
+  }
+  if (color.startsWith("#")) {
+    return type === "foreground" ? chalk.hex(color)(str) : chalk.bgHex(color)(str);
+  }
+  if (color.startsWith("ansi256")) {
+    const matches = ansiRegex.exec(color);
+    if (!matches) {
+      return str;
+    }
+    const value = Number(matches[1]);
+    return type === "foreground" ? chalk.ansi256(value)(str) : chalk.bgAnsi256(value)(str);
+  }
+  if (color.startsWith("rgb")) {
+    const matches = rgbRegex.exec(color);
+    if (!matches) {
+      return str;
+    }
+    const firstValue = Number(matches[1]);
+    const secondValue = Number(matches[2]);
+    const thirdValue = Number(matches[3]);
+    return type === "foreground" ? chalk.rgb(firstValue, secondValue, thirdValue)(str) : chalk.bgRgb(firstValue, secondValue, thirdValue)(str);
+  }
+  return str;
+};
+
+// src/tree/RenderTree/RenderBlock.ts
+var RenderBlock = class extends RenderNode {
+  constructor() {
+    super();
+    __publicField(this, "nodeType", 2 /* BLOCK */);
+    __publicField(this, "nodeName", "RenderBlock");
+  }
+  renderToLayer(layer) {
+    const {
+      yogaNode,
+      domNode
+    } = this;
+    const props = domNode?.attributes ?? {};
+    const {
+      width,
+      height
+    } = this.getComputedRect();
+    const x = this.realX;
+    const y = this.realY;
+    let clipped = false;
+    if (props.borderStyle) {
+      const box = typeof props.borderStyle === "string" ? cliBoxes[props.borderStyle] : props.borderStyle;
+      const topBorderColor = props.borderTopColor ?? props.borderColor;
+      const bottomBorderColor = props.borderBottomColor ?? props.borderColor;
+      const leftBorderColor = props.borderLeftColor ?? props.borderColor;
+      const rightBorderColor = props.borderRightColor ?? props.borderColor;
+      const dimTopBorderColor = props.borderTopDimColor ?? props.borderDimColor;
+      const dimBottomBorderColor = props.borderBottomDimColor ?? props.borderDimColor;
+      const dimLeftBorderColor = props.borderLeftDimColor ?? props.borderDimColor;
+      const dimRightBorderColor = props.borderRightDimColor ?? props.borderDimColor;
+      const showTopBorder = props.borderTop !== false;
+      const showBottomBorder = props.borderBottom !== false;
+      const showLeftBorder = props.borderLeft !== false;
+      const showRightBorder = props.borderRight !== false;
+      const contentWidth = width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
+      let topBorder = showTopBorder ? colorize((showLeftBorder ? box.topLeft : "") + box.top.repeat(contentWidth) + (showRightBorder ? box.topRight : ""), topBorderColor, "foreground") : void 0;
+      if (showTopBorder && dimTopBorderColor) {
+        topBorder = chalk2.dim(topBorder);
+      }
+      let verticalBorderHeight = height;
+      if (showTopBorder) {
+        verticalBorderHeight -= 1;
+      }
+      if (showBottomBorder) {
+        verticalBorderHeight -= 1;
+      }
+      let leftBorder = (colorize(box.left, leftBorderColor, "foreground") + "\n").repeat(verticalBorderHeight);
+      if (dimLeftBorderColor) {
+        leftBorder = chalk2.dim(leftBorder);
+      }
+      let rightBorder = (colorize(box.right, rightBorderColor, "foreground") + "\n").repeat(verticalBorderHeight);
+      if (dimRightBorderColor) {
+        rightBorder = chalk2.dim(rightBorder);
+      }
+      let bottomBorder = showBottomBorder ? colorize((showLeftBorder ? box.bottomLeft : "") + box.bottom.repeat(contentWidth) + (showRightBorder ? box.bottomRight : ""), bottomBorderColor, "foreground") : void 0;
+      if (showBottomBorder && dimBottomBorderColor) {
+        bottomBorder = chalk2.dim(bottomBorder);
+      }
+      const offsetY = showTopBorder ? 1 : 0;
+      if (topBorder) {
+        layer.write(x, y, topBorder, {
+          transformers: []
+        });
+      }
+      if (showLeftBorder) {
+        layer.write(x, y + offsetY, leftBorder, {
+          transformers: []
+        });
+      }
+      if (showRightBorder) {
+        layer.write(x + width - 1, y + offsetY, rightBorder, {
+          transformers: []
+        });
+      }
+      if (bottomBorder) {
+        layer.write(x, y + height - 1, bottomBorder, {
+          transformers: []
+        });
+      }
+    }
+    const clipHorizontally = props.overflowX === "hidden" || props.overflow === "hidden";
+    const clipVertically = props.overflowY === "hidden" || props.overflow === "hidden";
+    if (clipHorizontally || clipVertically) {
+      const x1 = clipHorizontally ? x + yogaNode.getComputedBorder(Yoga3.EDGE_LEFT) : void 0;
+      const x2 = clipHorizontally ? x + yogaNode.getComputedWidth() - yogaNode.getComputedBorder(Yoga3.EDGE_RIGHT) : void 0;
+      const y1 = clipVertically ? y + yogaNode.getComputedBorder(Yoga3.EDGE_TOP) : void 0;
+      const y2 = clipVertically ? y + yogaNode.getComputedHeight() - yogaNode.getComputedBorder(Yoga3.EDGE_BOTTOM) : void 0;
+      layer.clip({
+        x1,
+        x2,
+        y1,
+        y2
+      });
+      clipped = true;
+    }
+  }
+};
+
+// src/tree/RenderTree/RenderFlow.ts
+import Yoga5 from "yoga-wasm-web/auto";
+
+// src/tree/RenderTree/Layer.ts
+import { styledCharsFromTokens, styledCharsToString, tokenize } from "@alcalzone/ansi-tokenize";
+import sliceAnsi from "slice-ansi";
+import stringWidth from "string-width";
+import widestLine from "widest-line";
+var Layer = class {
+  constructor(options) {
+    __publicField(this, "width");
+    __publicField(this, "height");
+    __publicField(this, "frame");
+    __publicField(this, "frameHeight");
+    __publicField(this, "operations", []);
+    const {
+      width,
+      height
+    } = options;
+    this.width = width;
+    this.height = height;
+    this.frame = "";
+    this.frameHeight = 0;
+  }
+  write(x, y, text, options) {
+    const {
+      transformers
+    } = options;
+    if (!text) {
+      return;
+    }
+    this.operations.push({
+      type: "write",
+      x,
+      y,
+      text,
+      transformers
+    });
+  }
+  clip(clip) {
+    this.operations.push({
+      type: "clip",
+      clip
+    });
+  }
+  unclip() {
+    this.operations.push({
+      type: "unclip"
+    });
+  }
+  compute() {
+    const output = [];
+    for (let y = 0; y < this.height; y++) {
+      const row = [];
+      for (let x = 0; x < this.width; x++) {
+        row.push({
+          type: "char",
+          value: " ",
+          fullWidth: false,
+          styles: []
+        });
+      }
+      output.push(row);
+    }
+    const clips = [];
+    for (const operation of this.operations) {
+      if (operation.type === "clip") {
+        clips.push(operation.clip);
+      }
+      if (operation.type === "unclip") {
+        clips.pop();
+      }
+      if (operation.type === "write") {
+        const {
+          text,
+          transformers
+        } = operation;
+        let {
+          x,
+          y
+        } = operation;
+        let lines = text.split("\n");
+        const clip = clips.at(-1);
+        if (clip) {
+          const clipHorizontally = typeof clip?.x1 === "number" && typeof clip?.x2 === "number";
+          const clipVertically = typeof clip?.y1 === "number" && typeof clip?.y2 === "number";
+          if (clipHorizontally) {
+            const width = widestLine(text);
+            if (x + width < clip.x1 || x > clip.x2) {
+              continue;
+            }
+          }
+          if (clipVertically) {
+            const height = lines.length;
+            if (y + height < clip.y1 || y > clip.y2) {
+              continue;
+            }
+          }
+          if (clipHorizontally) {
+            lines = lines.map((line) => {
+              const from = x < clip.x1 ? clip.x1 - x : 0;
+              const width = stringWidth(line);
+              const to = x + width > clip.x2 ? clip.x2 - x : width;
+              return sliceAnsi(line, from, to);
+            });
+            if (x < clip.x1) {
+              x = clip.x1;
+            }
+          }
+          if (clipVertically) {
+            const from = y < clip.y1 ? clip.y1 - y : 0;
+            const height = lines.length;
+            const to = y + height > clip.y2 ? clip.y2 - y : height;
+            lines = lines.slice(from, to);
+            if (y < clip.y1) {
+              y = clip.y1;
+            }
+          }
+        }
+        let offsetY = 0;
+        for (let [index, line] of lines.entries()) {
+          const currentLine = output[y + offsetY];
+          if (!currentLine) {
+            continue;
+          }
+          for (const transformer of transformers) {
+            line = transformer(line, index);
+          }
+          const characters = styledCharsFromTokens(tokenize(line));
+          let offsetX = x;
+          for (const character of characters) {
+            currentLine[offsetX] = character;
+            const isWideCharacter = character.fullWidth || character.value.length > 1;
+            if (isWideCharacter) {
+              currentLine[offsetX + 1] = {
+                type: "char",
+                value: "",
+                fullWidth: false,
+                styles: character.styles
+              };
+            }
+            offsetX += isWideCharacter ? 2 : 1;
+          }
+          offsetY++;
+        }
+      }
+    }
+    const generatedOutput = output.map((line) => {
+      const lineWithoutEmptyItems = line.filter((item) => item !== void 0);
+      return styledCharsToString(lineWithoutEmptyItems).trimEnd();
+    }).join("\n");
+    this.frame = generatedOutput;
+    this.frameHeight = generatedOutput.length;
+    this.operations.length = 0;
+  }
+};
+
+// src/tree/RenderTree/RenderInline.ts
+import Yoga4 from "yoga-wasm-web/auto";
+var RenderInline = class extends RenderNode {
+  constructor() {
+    super();
+    __publicField(this, "nodeType", 3 /* INLINE */);
+    __publicField(this, "nodeName", "RenderInline");
+    this.yogaNode.setDisplay(Yoga4.DISPLAY_FLEX);
+    this.yogaNode.setGap(Yoga4.GUTTER_ALL, 0);
+    this.yogaNode.setFlexDirection(Yoga4.FLEX_DIRECTION_ROW);
+    this.yogaNode.setFlexWrap(Yoga4.WRAP_WRAP);
+  }
+};
+
+// src/tree/RenderTree/RenderText.ts
+import { withCache as withCache2 } from "@andrew_l/toolkit";
+import chalk3 from "chalk";
+import widestLine2 from "widest-line";
+
+// src/tree/RenderTree/utils/wrapText.ts
+import { withCache } from "@andrew_l/toolkit";
+import cliTruncate from "cli-truncate";
+import wrapAnsi from "wrap-ansi";
+var wrapText = withCache((text, maxWidth, wrapType) => {
+  let wrappedText = text;
+  if (wrapType === "wrap") {
+    wrappedText = wrapAnsi(text, maxWidth, {
+      trim: false,
+      hard: true
+    });
+  }
+  if (wrapType.startsWith("truncate")) {
+    let position = "end";
+    if (wrapType === "truncate-middle") {
+      position = "middle";
+    }
+    if (wrapType === "truncate-start") {
+      position = "start";
+    }
+    wrappedText = cliTruncate(text, maxWidth, {
+      position
+    });
+  }
+  return wrappedText;
+});
+
+// src/tree/RenderTree/RenderText.ts
+var _RenderText = class _RenderText extends RenderNode {
+  constructor() {
+    super();
+    __publicField(this, "nodeType", 4 /* TEXT */);
+    __publicField(this, "nodeName", "RenderText");
+    this.yogaNode.setMeasureFunc(this.measure.bind(this));
+  }
+  getDisplayName() {
+    return super.getDisplayName() + "/" + this.getTextWrapStyle();
+  }
+  /**
+   * Measure the dimensions of the text associated
+   * callback for css-layout
+   * @param: width - input width extents
+   * @param: widthMeasureMode - mode to constrain width CSS_MEASURE_MODE_EXACTLY, CSS_MEASURE_MODE_UNDEFINED
+   * @param: height - input height extents
+   * @param: heightMeasureMode - mode to constrain height CSS_MEASURE_MODE_EXACTLY, CSS_MEASURE_MODE_UNDEFINED
+   * @return: object containing measured width and height
+   */
+  measure(width, widthMeasureMode, height, heightMeasureMode) {
+    const text = this.domNode?.textContent;
+    if (!text) return {
+      width: 0,
+      height: 0
+    };
+    const dimensions = _RenderText.measureText(text);
+    if (dimensions.width <= width) {
+      return dimensions;
+    }
+    if (dimensions.width >= 1 && width > 0 && width < 1) {
+      return dimensions;
+    }
+    const wrappedText = wrapText(text, width, this.getTextWrapStyle());
+    return _RenderText.measureText(wrappedText);
+  }
+  getTextWrapStyle() {
+    return this.domNode?.parentNode?.attributes?.textWrap ?? "wrap";
+  }
+  renderToLayer(layer) {
+    const {
+      domNode
+    } = this;
+    const {
+      width: maxWidth
+    } = this.getContentRect();
+    const x = this.realX;
+    const y = this.realY;
+    if (!domNode) return;
+    let text = domNode.textContent;
+    if (text && text.length > 0) {
+      const currentWidth = widestLine2(text);
+      if (currentWidth > maxWidth) {
+        text = wrapText(text, maxWidth, this.getTextWrapStyle());
+      }
+      layer.write(x, y, text, {
+        transformers: this.transformers
+      });
+    }
+  }
+  computeStyles() {
+    this.transformers = [];
+    const attributes = (this.domNode?.parentNode).attributes ?? {};
+    if (attributes.dimColor) {
+      this.transformers.push((v) => chalk3.dim(v));
+    }
+    if (attributes.color) {
+      this.transformers.push((v) => colorize(v, attributes.color, "foreground"));
+    }
+    if (attributes.backgroundColor) {
+      this.transformers.push((v) => colorize(v, attributes.backgroundColor, "background"));
+    }
+    if (attributes.bold) {
+      this.transformers.push((v) => chalk3.bold(v));
+    }
+    if (attributes.italic) {
+      this.transformers.push((v) => chalk3.italic(v));
+    }
+    if (attributes.underline) {
+      this.transformers.push((v) => chalk3.underline(v));
+    }
+    if (attributes.strikethrough) {
+      this.transformers.push((v) => chalk3.strikethrough(v));
+    }
+    if (attributes.inverse) {
+      this.transformers.push((v) => chalk3.inverse(v));
+    }
+  }
+};
+__publicField(_RenderText, "measureText", withCache2((text) => {
+  if (text.length === 0) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  const width = widestLine2(text);
+  const height = text.split("\n").length;
+  return {
+    width,
+    height
+  };
+}));
+var RenderText = _RenderText;
+
+// src/tree/RenderTree/RenderFlow.ts
+var INLINE_ELEMENT_TAGS = /* @__PURE__ */ new Set(["span", "b", "a"]);
+var RenderFlow = class extends RenderNode {
+  constructor({
+    document,
+    width,
+    height
+  }) {
+    super();
+    /** @internal */
+    __publicField(this, "document");
+    __publicField(this, "nodeType", 1 /* NODE */);
+    __publicField(this, "nodeName", "RenderFlow");
+    __publicField(this, "height");
+    __publicField(this, "width");
+    __publicField(this, "layer");
+    __publicField(this, "reflowScheduled", false);
+    this.document = document;
+    this.width = width;
+    this.height = height;
+    this.layer = new Layer({
+      width,
+      height
+    });
+    document.on("DOMChanged", this.onDOMChanged.bind(this));
+  }
+  get treeText() {
+    return treeToText(this);
+  }
+  /** @internal */
+  onDOMChanged() {
+    this.reflowSchedule();
+  }
+  render() {
+    this.realX = 0;
+    this.realY = 0;
+    this.layer.width = this.width;
+    this.layer.height = this.yogaNode.getComputedHeight();
+    this.renderNode(this);
+    this.layer.compute();
+    return this.layer.frame;
+  }
+  /** @internal */
+  renderNode(node) {
+    for (const childNode of node.childNodes) {
+      const {
+        domNode
+      } = childNode;
+      const {
+        x,
+        y
+      } = childNode.getComputedRect();
+      if (domNode) {
+        const clientRect = childNode.getContentRect();
+        if (domNode.computedBoundingClientRect.width !== clientRect.width || domNode.computedBoundingClientRect.height !== this.height) {
+          domNode.computedBoundingClientRect = clientRect;
+          domNode.emit("resize");
+        }
+      }
+      childNode.realX = x + node.realX;
+      childNode.realY = y + node.realY;
+      childNode.renderToLayer(this.layer);
+      this.renderNode(childNode);
+    }
+  }
+  reflow() {
+    for (const childNode of this.childNodes) {
+      childNode.destroy();
+    }
+    this.childNodes = [];
+    for (const domNode of this.document.childNodes) {
+      this.reflowNode(domNode, this);
+    }
+    this.yogaNode.setWidth(this.width);
+    this.yogaNode.calculateLayout(void 0, void 0, Yoga5.DIRECTION_LTR);
+  }
+  reflowSchedule() {
+    if (this.reflowScheduled) return;
+    this.reflowScheduled = true;
+    process.nextTick(() => {
+      this.reflow();
+      const output = this.render();
+      this.reflowScheduled = false;
+      this.emit("frame", output);
+    });
+  }
+  /** @internal */
+  reflowNode(domNode, renderNode) {
+    switch (domNode.nodeType) {
+      case 8 /* COMMENT_NODE */: {
+        break;
+      }
+      case 1 /* ELEMENT_NODE */: {
+        if (INLINE_ELEMENT_TAGS.has(domNode.tagName)) {
+          this.reflowAsInline(domNode, renderNode);
+          break;
+        }
+        this.reflowAsBlock(domNode, renderNode);
+        break;
+      }
+      case 0 /* DOCUMENT */: {
+        this.reflowAsBlock(domNode, renderNode);
+        break;
+      }
+      case 3 /* TEXT_NODE */: {
+        this.reflowAsInline(domNode, renderNode);
+        break;
+      }
+    }
+  }
+  /** @internal */
+  reflowAsBlock(domNode, renderNode) {
+    const block = new RenderBlock();
+    block.domNode = domNode;
+    block.computeStyles();
+    renderNode.insertBefore(block);
+    for (const childDom of domNode.childNodes) {
+      this.reflowNode(childDom, block);
+    }
+  }
+  /** @internal */
+  reflowAsInline(domNode, renderNode) {
+    let newRenderNode = renderNode;
+    let nodeReplaced = false;
+    if (renderNode.nodeType !== 3 /* INLINE */) {
+      const lastChild = renderNode.lastChild;
+      if (lastChild?.nodeType === 3 /* INLINE */) {
+        newRenderNode = lastChild;
+      } else {
+        newRenderNode = new RenderInline();
+        nodeReplaced = true;
+      }
+    }
+    if (domNode.nodeType === 3 /* TEXT_NODE */) {
+      if (!domNode.textContent) return;
+      const text = new RenderText();
+      text.domNode = domNode;
+      text.computeStyles();
+      if (nodeReplaced) {
+        renderNode.insertBefore(newRenderNode);
+      }
+      newRenderNode.insertBefore(text);
+      return;
+    }
+    for (const childDom of domNode.childNodes) {
+      this.reflowNode(childDom, newRenderNode);
+    }
+    if (nodeReplaced && newRenderNode.childNodes.length) {
+      renderNode.insertBefore(newRenderNode);
+    }
+  }
+};
+
+// src/tree/RenderTree/index.ts
+var Render = Object.freeze({
+  Flow: RenderFlow,
+  Block: RenderBlock,
+  Inline: RenderInline,
+  RenderText,
+  Type: RenderNodeType
+});
+
+// src/Container.ts
+var Container = class extends DOMDocument {
+  constructor({
+    debug,
+    exitOnCtrlC,
+    stderr,
+    stdin,
+    stdout
+  }) {
+    super();
+    __publicField(this, "tagName", "#container");
+    __publicField(this, "stdout");
+    __publicField(this, "stdin");
+    __publicField(this, "stderr");
+    __publicField(this, "exitOnCtrlC");
+    __publicField(this, "flow");
+    __publicField(this, "write");
+    this.write = writeCleaner(stdout, 0);
+    this.stdout = stdout;
+    this.stdin = stdin;
+    this.stderr = stderr;
+    this.exitOnCtrlC = exitOnCtrlC;
+    this.flow = new Render.Flow({
+      document: this,
+      height: 0,
+      width: 0
+    });
+    this.stdout.on("resize", this.onResize.bind(this));
+    this.flow.on("frame", this.onFrame.bind(this));
+    this.onResize();
+  }
+  onResize() {
+    this.stdout.write(ansiEscapes.clearTerminal);
+    this.flow.width = this.stdout.columns || 80;
+    this.flow.height = this.stdout.rows || 20;
+    this.flow.reflowSchedule();
+  }
+  onFrame() {
+    if (this.flow.reflowScheduled) return;
+    this.write(this.flow.layer.frame);
+  }
+};
+function createContainer(options) {
+  const instance = new Container({
+    debug: false,
+    exitOnCtrlC: true,
+    stdin: process.stdin,
+    stdout: process.stdout,
+    stderr: process.stderr,
+    ...options ?? {}
+  });
+  return instance;
+}
+
+// src/createApp.ts
+import { createRenderer } from "@vue/runtime-core";
+
+// src/nodeOps.ts
+var nodeOps_exports = {};
+__export(nodeOps_exports, {
+  createComment: () => createComment,
+  createElement: () => createElement,
+  createText: () => createText,
+  insert: () => insert,
+  nextSibling: () => nextSibling,
+  parentNode: () => parentNode,
+  patchProp: () => patchProp,
+  querySelector: () => querySelector,
+  remove: () => remove,
+  setElementText: () => setElementText,
+  setScopeId: () => setScopeId,
+  setText: () => setText
+});
+function patchProp(el, key, prevValue, nextValue) {
+  if (nextValue === void 0) {
+    el.removeAttribute(key);
+  } else {
+    el.setAttribute(key, nextValue);
+  }
+}
+function insert(child, parent, ref2) {
+  parent.insertBefore(child, ref2);
+}
+function remove(child) {
+  child.remove();
+}
+function setText(node, text) {
+  node.textContent = text;
+}
+function createElement(tagName) {
+  return DOM.Document.createElement(tagName);
+}
+function createComment(text) {
+  return DOM.Document.createComment(text);
+}
+function createText(text) {
+  return DOM.Document.createTextNode(text);
+}
+function setElementText(el, text) {
+  el.textContent = text;
+}
+function parentNode(node) {
+  return node.parentNode;
+}
+function nextSibling(node) {
+  return node.nextSibling;
+}
+function setScopeId(el, id) {
+  el.setAttribute(id, "");
+}
+function querySelector() {
+  throw new Error("querySelector not supported in stdout renderer.");
+}
+
+// src/createApp.ts
+var {
+  createApp
+} = createRenderer(nodeOps_exports);
+export {
+  Box,
+  DOM,
+  DOMComment,
+  DOMDocument,
+  DOMElement,
+  DOMNode,
+  DOMNodeType,
+  DOMText,
+  NewLine,
+  ProgressBar,
+  Render,
+  Text,
+  createApp,
+  createContainer,
+  useContainerSize,
+  useDOMElement,
+  useEventListener
+};