chat-layout 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 CodeHz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# chat-layout
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.37. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/index.d.ts

@@ -0,0 +1,201 @@
+declare module '.' {
+	export abstract class Group implements Node {
+		readonly children: Node[];
+		constructor(children: Node[]);
+		abstract measure(ctx: Context): Box;
+		abstract draw(ctx: Context, x: number, y: number): boolean;
+		abstract hittest(ctx: Context, test: HitTest): boolean;
+		get flex(): boolean;
+		invalidate(ctx: Context): void;
+	}
+	export class VStack extends Group {
+		readonly options: {
+			gap?: number;
+		};
+		constructor(children: Node[], options?: {
+			gap?: number;
+		});
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class HStack extends Group {
+		readonly children: Node[];
+		readonly options: {
+			reverse?: boolean;
+			gap?: number;
+		};
+		constructor(children: Node[], options?: {
+			reverse?: boolean;
+			gap?: number;
+		});
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class Wrapper implements Node {
+		readonly inner: Node;
+		constructor(inner: Node);
+		get flex(): boolean;
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+		invalidate(ctx: Context): void;
+	}
+	export class PaddingBox extends Wrapper {
+		#private;
+		readonly padding: {
+			top?: number;
+			bottom?: number;
+			left?: number;
+			right?: number;
+		};
+		constructor(inner: Node, padding?: {
+			top?: number;
+			bottom?: number;
+			left?: number;
+			right?: number;
+		});
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class AlignBox extends Wrapper {
+		#private;
+		readonly options: {
+			alignment: "left" | "center" | "right";
+		};
+		constructor(inner: Node, options: {
+			alignment: "left" | "center" | "right";
+		});
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class MultilineText implements Node {
+		#private;
+		readonly text: string;
+		readonly options: {
+			lineHeight: number;
+			font: string;
+			alignment: "left" | "center" | "right";
+			style: DynValue<string>;
+		};
+		constructor(text: string, options: {
+			lineHeight: number;
+			font: string;
+			alignment: "left" | "center" | "right";
+			style: DynValue<string>;
+		});
+		get flex(): boolean;
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class Text implements Node {
+		#private;
+		readonly text: string;
+		readonly options: {
+			lineHeight: number;
+			font: string;
+			style: DynValue<string>;
+		};
+		constructor(text: string, options: {
+			lineHeight: number;
+			font: string;
+			style: DynValue<string>;
+		});
+		get flex(): boolean;
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class Fixed implements Node {
+		readonly width: number;
+		readonly height: number;
+		constructor(width: number, height: number);
+		get flex(): boolean;
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+	}
+	export class BaseRenderer<O = {}> {
+		#private;
+		readonly options: RendererOptions & O;
+		graphics: CanvasRenderingContext2D;
+		protected get context(): Context;
+		constructor(graphics1: CanvasRenderingContext2D, options: RendererOptions & O);
+		invalidateNode(node: Node): void;
+		measureNode(node: Node, ctx?: Context): Box;
+	}
+	export class DebugRenderer extends BaseRenderer {
+		draw(node: Node): boolean;
+		hittest(node: Node, test: HitTest): boolean;
+	}
+	export function memoRenderItem<T extends {}>(renderItem: (item: T) => Node): ((item: T) => Node) & {
+		reset: (key: T) => boolean;
+	};
+	export abstract class VirtualizedRenderer<T extends {}> extends BaseRenderer<{
+		renderItem: (item: T) => Node;
+	}> {
+		protected offset: number;
+		protected position: number;
+		protected items: T[];
+		unshift(...items: T[]): T[];
+		unshiftAll(items: T[]): T[];
+		push(...items: T[]): T[];
+		pushAll(items: T[]): T[];
+		reset(): void;
+		applyScroll(delta: number): number;
+		get pos(): number;
+		get length(): number;
+		abstract render(): boolean;
+		abstract hittest(test: HitTest): boolean;
+	}
+	export class TimelineRenderer<T extends {}> extends VirtualizedRenderer<T> {
+		#private;
+		render(): boolean;
+		hittest(test: HitTest): boolean;
+		scrollToTop(): void;
+	}
+	export class ChatRenderer<T extends {}> extends VirtualizedRenderer<T> {
+		#private;
+		render(): boolean;
+		hittest(test: HitTest): boolean;
+		scrollToBottom(): void;
+	}
+	export type RendererOptions = {
+		splitText(text: string): string[];
+	};
+	export interface ContextHelper {
+	}
+	export interface Context extends RendererOptions, ContextHelper {
+		graphics: CanvasRenderingContext2D;
+		remainingWidth: number;
+		measureNode(node: Node): Box;
+		invalidateNode(node: Node): void;
+		with<T>(this: Context, cb: (g: CanvasRenderingContext2D) => T): T;
+	}
+	export type Box = {
+		width: number;
+		height: number;
+	};
+	export type HitTest = {
+		x: number;
+		y: number;
+		type: "click" | "auxclick" | "hover";
+	};
+	export interface Node {
+		measure(ctx: Context): Box;
+		draw(ctx: Context, x: number, y: number): boolean;
+		hittest(ctx: Context, test: HitTest): boolean;
+		invalidate?(ctx: Context): void;
+		readonly flex: boolean;
+	}
+	export type DynValue<T> = (T extends Function ? never : T | (() => T));
+	export function resolveDynValue<T>(value: DynValue<T>): T;
+
+	export {};
+}
+
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1,43 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [
+		"Group",
+		"VStack",
+		"HStack",
+		"Wrapper",
+		"PaddingBox",
+		"AlignBox",
+		"MultilineText",
+		"Text",
+		"Fixed",
+		"BaseRenderer",
+		"DebugRenderer",
+		"memoRenderItem",
+		"VirtualizedRenderer",
+		"TimelineRenderer",
+		"ChatRenderer",
+		"RendererOptions",
+		"ContextHelper",
+		"Context",
+		"Box",
+		"HitTest",
+		"Node",
+		"DynValue",
+		"resolveDynValue"
+	],
+	"sources": [
+		"../nodes.civet.d.ts",
+		"../renderer.civet.d.ts",
+		"../types.civet.d.ts",
+		"../utils.civet.d.ts"
+	],
+	"sourcesContent": [
+		null,
+		null,
+		null,
+		null
+	],
+	"mappings": ";uBAE8BA,KAAKA;;;;;;;;;cASdC,MAAMA;;;;;;;;;;;cAWNC,MAAMA;;;;;;;;;;;;;;cAcNC,OAAOA;;;;;;;;;cASPC,UAAUA;;;;;;;;;;;;;;;;;;cAkBVC,QAAQA;;;;;;;;;;;;cAYRC,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBbC,IAAIA;;;;;;;;;;;;;;;;;;cAkBJC,KAAKA;;;;;;;;;cChHLC,YAAYA;;;;;;;;;cASZC,aAAaA;;;;iBAIVC,cAAcA;;;uBAGRC,mBAAmBA;;;;;;;;;;;;;;;;;cAiB5BC,gBAAgBA;;;;;;cAMhBC,YAAYA;;;;;;aCxCrBC,eAAeA;;;kBAGVC,aAAaA;;kBAEbC,OAAOA;;;;;;;aAOZC,GAAGA;;;;aAIHC,OAAOA;;;;;kBAKFC,IAAIA;;;;;;;aCnBTC,QAAQA;iBACIC,eAAeA",
+	"ignoreList": []
+}

package/index.js

@@ -0,0 +1,884 @@
+// @bun
+// text.civet
+function layoutFirstLine(ctx, text, maxWidth) {
+  const line = text.replaceAll(/[^\S\n]+/g, " ").split(`
+`, 1)[0].trim();
+  const { width: textWidth, actualBoundingBoxAscent: shift, actualBoundingBoxDescent: lineHeight } = ctx.graphics.measureText(line);
+  if (textWidth <= maxWidth) {
+    return { width: textWidth, text: line, shift, lineHeight };
+  } else {
+    const { width, text: text2 } = splitToFitText(ctx, line, maxWidth, textWidth);
+    return { width, text: text2, shift, lineHeight };
+  }
+}
+function layoutText(ctx, text, maxWidth) {
+  const results = [];
+  for (let ref = text.replaceAll(/[^\S\n]+/g, " ").split(`
+`), i = 0, len = ref.length;i < len; i++) {
+    const line = ref[i];
+    const trimed = line.trim();
+    if (!trimed) {
+      continue;
+    }
+    results.push(trimed);
+  }
+  const inputLines = results;
+  if (inputLines.length === 0) {
+    return { width: 0, lines: [] };
+  }
+  let width = 0;
+  const lines = [];
+  for (let i1 = 0, len1 = inputLines.length;i1 < len1; i1++) {
+    let line = inputLines[i1];
+    let { width: textWidth, actualBoundingBoxAscent: shift, actualBoundingBoxDescent: lineHeight } = ctx.graphics.measureText(line);
+    if (textWidth <= maxWidth) {
+      width = Math.max(width, textWidth);
+      lines.push({ width: textWidth, text: line, shift, lineHeight });
+    } else {
+      while (textWidth > maxWidth) {
+        const splited = splitToFitText(ctx, line, maxWidth, textWidth);
+        width = Math.max(width, splited.width);
+        lines.push({ text: splited.text, width: splited.width, shift, lineHeight });
+        line = splited.rest;
+        ({ width: textWidth } = ctx.graphics.measureText(line));
+      }
+      if (textWidth > 0) {
+        width = Math.max(width, textWidth);
+        lines.push({ width: textWidth, text: line, shift, lineHeight });
+      }
+    }
+  }
+  return { width, lines };
+}
+function splitToFitText(ctx, text, width, totalWidth) {
+  const arr = ctx.splitText(text);
+  let guess = Math.floor(width / totalWidth * arr.length);
+  let guessText;
+  let { width: guessWidth } = ctx.graphics.measureText(guessText = arr.slice(0, guess).join(""));
+  while (!(guessWidth >= width)) {
+    guess++;
+    ({ width: guessWidth } = ctx.graphics.measureText(guessText = arr.slice(0, guess).join("")));
+  }
+  while (guessWidth > width) {
+    const lastSpace = arr.lastIndexOf(" ", guess - 1);
+    if (lastSpace > 0) {
+      guess = lastSpace;
+    } else {
+      guess--;
+    }
+    ({ width: guessWidth } = ctx.graphics.measureText(guessText = arr.slice(0, guess).join("")));
+  }
+  return {
+    text: guessText,
+    width: guessWidth,
+    rest: arr.slice(guess).join("").trimStart()
+  };
+}
+
+// utils.civet
+function shallow(object) {
+  return Object.create(object);
+}
+function shallowMerge(object, other) {
+  return { __proto__: object, ...other };
+}
+function resolveDynValue(value) {
+  if (typeof value === "function") {
+    return value();
+  }
+  return value;
+}
+
+// nodes.civet
+class Group {
+  children;
+  constructor(children) {
+    this.children = children;
+  }
+  get flex() {
+    let results = false;
+    for (let ref = this.children, i = 0, len = ref.length;i < len; i++) {
+      const item = ref[i];
+      if (item.flex) {
+        results = true;
+        break;
+      }
+    }
+    return results;
+  }
+  invalidate(ctx) {
+    for (let ref1 = this.children, i1 = 0, len1 = ref1.length;i1 < len1; i1++) {
+      const child = ref1[i1];
+      ctx.invalidateNode(child);
+    }
+  }
+}
+
+class VStack extends Group {
+  options;
+  constructor(children, options = {}) {
+    super(children);
+    this.options = options;
+  }
+  measure(ctx) {
+    let width = 0;
+    let height = 0;
+    for (let ref2 = this.children, i2 = 0, len2 = ref2.length;i2 < len2; i2++) {
+      const index = i2;
+      const child = ref2[i2];
+      if (this.options.gap != null && index !== 0) {
+        height += this.options.gap;
+      }
+      let result = shallow(ctx).measureNode(child);
+      height += result.height;
+      width = Math.max(width, result.width);
+    }
+    ctx.remainingWidth -= width;
+    return { width, height };
+  }
+  draw(ctx, x, y) {
+    let result = false;
+    for (let ref3 = this.children, i3 = 0, len3 = ref3.length;i3 < len3; i3++) {
+      const index = i3;
+      const child = ref3[i3];
+      if (this.options.gap != null && index !== 0) {
+        y += this.options.gap;
+      }
+      const request_redraw = child.draw(ctx, x, y);
+      result ||= request_redraw;
+      let { height } = shallow(ctx).measureNode(child);
+      y += height;
+    }
+    return result;
+  }
+  hittest(ctx, test) {
+    let y = 0;
+    for (let ref4 = this.children, i4 = 0, len4 = ref4.length;i4 < len4; i4++) {
+      const index = i4;
+      const child = ref4[i4];
+      if (this.options.gap != null && index !== 0) {
+        y += this.options.gap;
+      }
+      const curctx = shallow(ctx);
+      let { height } = curctx.measureNode(child);
+      if (test.y >= y && test.y < y + height) {
+        return child.hittest(curctx, shallowMerge(test, {
+          y: test.y - y
+        }));
+      }
+      y += height;
+    }
+    return false;
+  }
+}
+
+class HStack extends Group {
+  children;
+  options;
+  constructor(children, options = {}) {
+    super(children);
+    this.children = children;
+    this.options = options;
+  }
+  measure(ctx) {
+    let width = 0;
+    let height = 0;
+    let firstflex;
+    for (let ref5 = this.children, i5 = 0, len5 = ref5.length;i5 < len5; i5++) {
+      const index = i5;
+      const child = ref5[i5];
+      if (this.options.gap != null && index !== 0) {
+        width += this.options.gap;
+      }
+      if (firstflex == null && child.flex) {
+        firstflex = child;
+        continue;
+      }
+      const curctx = shallow(ctx);
+      curctx.remainingWidth = ctx.remainingWidth - width;
+      const result = curctx.measureNode(child);
+      width += result.width;
+      height = Math.max(height, result.height);
+    }
+    if (firstflex != null) {
+      const curctx = shallow(ctx);
+      curctx.remainingWidth = ctx.remainingWidth - width;
+      const result = curctx.measureNode(firstflex);
+      width += result.width;
+      height = Math.max(height, result.height);
+    }
+    return { width, height };
+  }
+  draw(ctx, x, y) {
+    let result = false;
+    if (this.options.reverse) {
+      x += ctx.measureNode(this).width;
+      for (let ref6 = this.children, i6 = 0, len6 = ref6.length;i6 < len6; i6++) {
+        const index = i6;
+        const child = ref6[i6];
+        if (this.options.gap != null && index !== 0) {
+          x -= this.options.gap;
+        }
+        const { width } = shallow(ctx).measureNode(child);
+        x -= width;
+        const request_redraw = child.draw(ctx, x, y);
+        result ||= request_redraw;
+      }
+    } else {
+      for (let ref7 = this.children, i7 = 0, len7 = ref7.length;i7 < len7; i7++) {
+        const index = i7;
+        const child = ref7[i7];
+        if (this.options.gap != null && index !== 0) {
+          x += this.options.gap;
+        }
+        const request_redraw = child.draw(ctx, x, y);
+        result ||= request_redraw;
+        const { width } = shallow(ctx).measureNode(child);
+        x += width;
+      }
+    }
+    return result;
+  }
+  hittest(ctx, test) {
+    if (this.options.reverse) {
+      let x = ctx.measureNode(this).width;
+      for (let ref8 = this.children, i8 = 0, len8 = ref8.length;i8 < len8; i8++) {
+        const index = i8;
+        const child = ref8[i8];
+        if (this.options.gap != null && index !== 0) {
+          x -= this.options.gap;
+        }
+        const curctx = shallow(ctx);
+        const { width } = curctx.measureNode(child);
+        x -= width;
+        let ref9;
+        if (x <= (ref9 = test.x) && ref9 <= x + width) {
+          return child.hittest(curctx, shallowMerge(test, {
+            x: test.x - x
+          }));
+        }
+      }
+    } else {
+      let x = 0;
+      for (let ref10 = this.children, i9 = 0, len9 = ref10.length;i9 < len9; i9++) {
+        const index = i9;
+        const child = ref10[i9];
+        if (this.options.gap != null && index !== 0) {
+          x += this.options.gap;
+        }
+        const curctx = shallow(ctx);
+        const { width } = curctx.measureNode(child);
+        let ref11;
+        if (x <= (ref11 = test.x) && ref11 <= x + width) {
+          return child.hittest(curctx, shallowMerge(test, {
+            x: test.x - x
+          }));
+        }
+        x += width;
+      }
+    }
+    return false;
+  }
+}
+
+class Wrapper {
+  inner;
+  constructor(inner) {
+    this.inner = inner;
+  }
+  get flex() {
+    return this.inner.flex;
+  }
+  measure(ctx) {
+    return this.inner.measure(ctx);
+  }
+  draw(ctx, x, y) {
+    return this.inner.draw(ctx, x, y);
+  }
+  hittest(ctx, test) {
+    return this.inner.hittest(ctx, test);
+  }
+  invalidate(ctx) {
+    ctx.invalidateNode(this.inner);
+  }
+}
+
+class PaddingBox extends Wrapper {
+  padding;
+  constructor(inner, padding = {}) {
+    super(inner);
+    this.padding = padding;
+  }
+  get #top() {
+    return this.padding.top ?? 0;
+  }
+  get #bottom() {
+    return this.padding.bottom ?? 0;
+  }
+  get #left() {
+    return this.padding.left ?? 0;
+  }
+  get #right() {
+    return this.padding.right ?? 0;
+  }
+  measure(ctx) {
+    ctx = shallow(ctx);
+    ctx.remainingWidth -= this.#left + this.#right;
+    const { width, height } = ctx.measureNode(this.inner);
+    return {
+      width: width + this.#left + this.#right,
+      height: height + this.#top + this.#bottom
+    };
+  }
+  draw(ctx, x, y) {
+    return this.inner.draw(ctx, x + this.#left, y + this.#top);
+  }
+  hittest(ctx, test) {
+    const { width, height } = ctx.measureNode(this.inner);
+    let ref12;
+    let ref13;
+    if (0 <= (ref12 = test.x - this.#left) && ref12 < width && (0 <= (ref13 = test.y - this.#top) && ref13 < height)) {
+      return this.inner.hittest(ctx, shallowMerge(test, {
+        x: test.x - this.#left,
+        y: test.y - this.#top
+      }));
+    }
+    return false;
+  }
+}
+
+class AlignBox extends Wrapper {
+  options;
+  #shift = 0;
+  constructor(inner, options) {
+    super(inner);
+    this.options = options;
+  }
+  measure(ctx) {
+    const { width, height } = ctx.measureNode(this.inner);
+    let ref14;
+    switch (this.options.alignment) {
+      case "center": {
+        ref14 = (ctx.remainingWidth - width) / 2;
+        break;
+      }
+      case "right": {
+        ref14 = ctx.remainingWidth - width;
+        break;
+      }
+      default: {
+        ref14 = 0;
+      }
+    }
+    this.#shift = ref14;
+    return {
+      width: ctx.remainingWidth,
+      height
+    };
+  }
+  draw(ctx, x, y) {
+    return this.inner.draw(ctx, x + this.#shift, y);
+  }
+  hittest(ctx, test) {
+    const { width } = ctx.measureNode(this.inner);
+    let ref15;
+    if (0 <= (ref15 = test.x - this.#shift) && ref15 < width) {
+      return this.inner.hittest(ctx, shallowMerge(test, {
+        x: test.x - this.#shift
+      }));
+    }
+    return false;
+  }
+}
+
+class MultilineText {
+  text;
+  options;
+  #width = 0;
+  #lines = [];
+  constructor(text, options) {
+    this.text = text;
+    this.options = options;
+  }
+  get flex() {
+    return true;
+  }
+  measure(ctx) {
+    return ctx.with((g) => {
+      g.font = this.options.font;
+      const { width: width1, lines } = layoutText(ctx, this.text, ctx.remainingWidth);
+      this.#width = width1;
+      this.#lines = lines;
+      return { width: this.#width, height: this.#lines.length * this.options.lineHeight };
+    });
+  }
+  draw(ctx, x, y) {
+    return ctx.with((g) => {
+      g.font = this.options.font;
+      g.fillStyle = resolveDynValue(this.options.style);
+      switch (this.options.alignment) {
+        case "left": {
+          for (let ref16 = this.#lines, i10 = 0, len10 = ref16.length;i10 < len10; i10++) {
+            const { text, shift, lineHeight } = ref16[i10];
+            g.fillText(text, x, y + shift + (this.options.lineHeight - lineHeight) / 2);
+            y += this.options.lineHeight;
+          }
+          break;
+        }
+        case "right": {
+          x += this.#width;
+          g.textAlign = "right";
+          for (let ref17 = this.#lines, i11 = 0, len11 = ref17.length;i11 < len11; i11++) {
+            const { text, shift, lineHeight } = ref17[i11];
+            g.fillText(text, x, y + shift + (this.options.lineHeight - lineHeight) / 2);
+            y += this.options.lineHeight;
+          }
+          break;
+        }
+        case "center": {
+          x += this.#width / 2;
+          g.textAlign = "center";
+          for (let ref18 = this.#lines, i12 = 0, len12 = ref18.length;i12 < len12; i12++) {
+            const { text, shift, lineHeight } = ref18[i12];
+            g.fillText(text, x, y + shift + (this.options.lineHeight - lineHeight) / 2);
+            y += this.options.lineHeight;
+          }
+          break;
+        }
+      }
+      return false;
+    });
+  }
+  hittest(ctx, test) {
+    return false;
+  }
+}
+
+class Text {
+  text;
+  options;
+  constructor(text, options) {
+    this.text = text;
+    this.options = options;
+  }
+  #width = 0;
+  #text = "";
+  #shift = 0;
+  #lineHeight = 0;
+  get flex() {
+    return false;
+  }
+  measure(ctx) {
+    return ctx.with((g) => {
+      g.font = this.options.font;
+      const { width: width2, text: text1, shift: shift1, lineHeight: lineHeight1 } = layoutFirstLine(ctx, this.text, ctx.remainingWidth);
+      this.#width = width2;
+      this.#text = text1;
+      this.#shift = shift1;
+      this.#lineHeight = lineHeight1;
+      return { width: this.#width, height: this.options.lineHeight };
+    });
+  }
+  draw(ctx, x, y) {
+    return ctx.with((g) => {
+      g.font = this.options.font;
+      g.fillStyle = resolveDynValue(this.options.style);
+      g.fillText(this.#text, x, y + this.#shift + (this.options.lineHeight - this.#lineHeight) / 2);
+      return false;
+    });
+  }
+  hittest(ctx, test) {
+    return false;
+  }
+}
+
+class Fixed {
+  width;
+  height;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  get flex() {
+    return false;
+  }
+  measure(ctx) {
+    return { width: this.width, height: this.height };
+  }
+  draw(ctx, x, y) {
+    return false;
+  }
+  hittest(ctx, test) {
+    return false;
+  }
+}
+// renderer.civet
+var concatAssign = (lhs, rhs) => (rhs?.[Symbol.isConcatSpreadable] ?? Array.isArray(rhs) ? lhs.push.apply(lhs, rhs) : lhs.push(rhs), lhs);
+
+class BaseRenderer {
+  options;
+  graphics;
+  #ctx;
+  #lastWidth;
+  #cache = new WeakMap;
+  get context() {
+    return shallow(this.#ctx);
+  }
+  constructor(graphics1, options) {
+    this.options = options;
+    this.graphics = graphics1;
+    this.graphics.textBaseline = "top";
+    this.graphics.textRendering = "optimizeLegibility";
+    const self = this;
+    this.#ctx = {
+      graphics: this.graphics,
+      get remainingWidth() {
+        return this.graphics.canvas.clientWidth;
+      },
+      set remainingWidth(value) {
+        Object.defineProperty(this, "remainingWidth", { value, writable: true });
+      },
+      measureNode(node) {
+        return self.measureNode(node, this);
+      },
+      invalidateNode: this.invalidateNode.bind(this),
+      with(cb) {
+        this.graphics.save();
+        try {
+          return cb(this.graphics);
+        } finally {
+          this.graphics.restore();
+        }
+      },
+      splitText(text) {
+        return options.splitText(text);
+      }
+    };
+    this.#lastWidth = this.graphics.canvas.clientWidth;
+  }
+  invalidateNode(node) {
+    this.#cache.delete(node);
+    node.invalidate?.(this.context);
+  }
+  measureNode(node, ctx) {
+    let ref;
+    if (this.#lastWidth != this.graphics.canvas.clientWidth) {
+      this.#cache = new WeakMap;
+    } else if ((ref = this.#cache.get(node)) != null) {
+      const result2 = ref;
+      return result2;
+    }
+    const result = node.measure(ctx ?? this.context);
+    this.#cache.set(node, result);
+    return result;
+  }
+}
+
+class DebugRenderer extends BaseRenderer {
+  draw(node) {
+    const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
+    this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
+    return node.draw(this.context, 0, 0);
+  }
+  hittest(node, test) {
+    return node.hittest(this.context, test);
+  }
+}
+function memoRenderItem(renderItem) {
+  const cache = new WeakMap;
+  function fn(item) {
+    let ref1;
+    if ((ref1 = cache.get(item)) != null) {
+      const result2 = ref1;
+      return result2;
+    }
+    const result = renderItem(item);
+    cache.set(item, result);
+    return result;
+  }
+  return Object.assign(fn, { reset: cache.delete.bind(cache) });
+}
+
+class VirtualizedRenderer extends BaseRenderer {
+  offset = 0;
+  position = NaN;
+  items = [];
+  unshift(...items) {
+    return this.unshiftAll(items);
+  }
+  unshiftAll(items) {
+    this.position += items.length;
+    return this.items = items.concat(this.items);
+  }
+  push(...items) {
+    return this.pushAll(items);
+  }
+  pushAll(items) {
+    return concatAssign(this.items, items);
+  }
+  reset() {
+    this.items = [];
+    this.offset = 0;
+    this.position = -1;
+  }
+  applyScroll(delta) {
+    return this.offset += delta;
+  }
+  get pos() {
+    return this.position;
+  }
+  get length() {
+    return this.items.length;
+  }
+}
+
+class TimelineRenderer extends VirtualizedRenderer {
+  #action = "idle";
+  render() {
+    const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
+    this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
+    let drawlength = 0;
+    if (isNaN(this.position)) {
+      this.position = 0;
+    }
+    if (this.offset > 0) {
+      if (this.position == 0) {
+        this.offset = 0;
+      } else {
+        for (let i1 = this.position - 1;i1 >= 0; --i1) {
+          const i = i1;
+          const item = this.items[i];
+          const node = this.options.renderItem(item);
+          const { height } = this.measureNode(node);
+          this.position = i;
+          this.offset -= height;
+          if (this.offset <= 0) {
+            break;
+          }
+        }
+        if (this.position == 0 && this.offset > 0) {
+          this.offset = 0;
+        }
+      }
+    }
+    let y = this.offset;
+    const drawlist = [];
+    for (let end = this.items.length, i2 = this.position;i2 < end; ++i2) {
+      const i = i2;
+      const item = this.items[i];
+      const node = this.options.renderItem(item);
+      const { height } = this.measureNode(node);
+      if (y + height > 0) {
+        drawlist.push([node, y]);
+        drawlength += height;
+      } else {
+        this.offset += height;
+        this.position = i + 1;
+      }
+      y += height;
+      if (y >= viewportHeight) {
+        break;
+      }
+    }
+    let shift = 0;
+    if (y < viewportHeight) {
+      if (this.position == 0 && drawlength < viewportHeight) {
+        shift = -this.offset;
+        this.offset = 0;
+      } else {
+        shift = viewportHeight - y;
+        y = this.offset += shift;
+        let lastidx = -1;
+        for (let i3 = this.position - 1;i3 >= 0; --i3) {
+          const i = i3;
+          const item = this.items[lastidx = i];
+          const node = this.options.renderItem(item);
+          const { height } = this.measureNode(node);
+          drawlength += height;
+          y -= height;
+          drawlist.push([node, y - shift]);
+          if (y < 0) {
+            break;
+          }
+        }
+        if (lastidx == 0 && drawlength < viewportHeight) {
+          shift = -drawlist[drawlist.length - 1][1];
+          this.position = 0;
+          this.offset = 0;
+        }
+      }
+    }
+    let result = false;
+    for (let i4 = 0, len = drawlist.length;i4 < len; i4++) {
+      const [node, y2] = drawlist[i4];
+      const request_redraw = node.draw(this.context, 0, y2 + shift);
+      result ||= request_redraw;
+    }
+    if (this.#action === "scrollToTop") {
+      if (this.position === 0 && this.offset === 0) {
+        this.#action = "idle";
+      } else {
+        this.applyScroll(5 * (this.position + 1));
+        return true;
+      }
+    }
+    return result;
+  }
+  hittest(test) {
+    const viewportHeight = this.graphics.canvas.clientHeight;
+    let y = this.offset;
+    for (let end1 = this.items.length, i5 = this.position;i5 < end1; ++i5) {
+      const i = i5;
+      const item = this.items[i];
+      const node = this.options.renderItem(item);
+      const { height } = this.measureNode(node);
+      if (test.y < y + height) {
+        return node.hittest(this.context, shallowMerge(test, { y: test.y - y }));
+      }
+      y += height;
+      if (y >= viewportHeight) {
+        break;
+      }
+    }
+    return false;
+  }
+  scrollToTop() {
+    this.#action = "scrollToTop";
+  }
+}
+
+class ChatRenderer extends VirtualizedRenderer {
+  #action = "idle";
+  render() {
+    const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
+    this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
+    let drawlength = 0;
+    if (isNaN(this.position)) {
+      this.position = this.items.length - 1;
+    }
+    if (this.offset < 0) {
+      if (this.position == this.items.length - 1) {
+        this.offset = 0;
+      } else {
+        for (let end2 = this.items.length, i6 = this.position + 1;i6 < end2; ++i6) {
+          const i = i6;
+          const item = this.items[i];
+          const node = this.options.renderItem(item);
+          const { height } = this.measureNode(node);
+          this.position = i;
+          this.offset += height;
+          if (this.offset > 0) {
+            break;
+          }
+        }
+      }
+    }
+    let y = viewportHeight + this.offset;
+    const drawlist = [];
+    for (let i7 = this.position;i7 >= 0; --i7) {
+      const i = i7;
+      const item = this.items[i];
+      const node = this.options.renderItem(item);
+      const { height } = this.measureNode(node);
+      y -= height;
+      if (y <= viewportHeight) {
+        drawlist.push([node, y]);
+        drawlength += height;
+      } else {
+        this.offset -= height;
+        this.position = i - 1;
+      }
+      if (y < 0) {
+        break;
+      }
+    }
+    let shift = 0;
+    if (y > 0) {
+      shift = -y;
+      if (drawlength < viewportHeight) {
+        y = drawlength;
+        for (let end3 = this.items.length, i8 = this.position + 1;i8 < end3; ++i8) {
+          const i = i8;
+          const item = this.items[i];
+          const node = this.options.renderItem(item);
+          const { height } = this.measureNode(node);
+          drawlist.push([node, y - shift]);
+          y = drawlength += height;
+          this.position = i;
+          if (y >= viewportHeight) {
+            break;
+          }
+        }
+        if (drawlength < viewportHeight) {
+          this.offset = 0;
+        } else {
+          this.offset = drawlength - viewportHeight;
+        }
+      } else {
+        this.offset = drawlength - viewportHeight;
+      }
+    }
+    let result = false;
+    for (let i9 = 0, len1 = drawlist.length;i9 < len1; i9++) {
+      const [node, y2] = drawlist[i9];
+      const request_redraw = node.draw(this.context, 0, y2 + shift);
+      result ||= request_redraw;
+    }
+    if (this.#action === "scrollToBottom") {
+      if (this.position === this.items.length - 1 && this.offset === 0) {
+        this.#action = "idle";
+      } else {
+        this.applyScroll(-5 * (this.items.length - this.position));
+        return true;
+      }
+    }
+    return result;
+  }
+  hittest(test) {
+    const viewportHeight = this.graphics.canvas.clientHeight;
+    let drawlength = 0;
+    const results = [];
+    for (let i10 = this.position;i10 >= 0; --i10) {
+      const i = i10;
+      const item = this.items[i];
+      const node = this.options.renderItem(item);
+      const { height } = this.measureNode(node);
+      drawlength += height;
+      results.push([node, height]);
+    }
+    const heights = results;
+    let y = drawlength < viewportHeight ? drawlength : viewportHeight + this.offset;
+    if (test.y > y) {
+      return false;
+    }
+    for (let i11 = 0, len2 = heights.length;i11 < len2; i11++) {
+      const [node, height] = heights[i11];
+      y -= height;
+      if (test.y > y) {
+        return node.hittest(this.context, shallowMerge(test, { y: test.y - y }));
+      }
+    }
+    return false;
+  }
+  scrollToBottom() {
+    this.#action = "scrollToBottom";
+  }
+}
+export {
+  resolveDynValue,
+  memoRenderItem,
+  Wrapper,
+  VirtualizedRenderer,
+  VStack,
+  TimelineRenderer,
+  Text,
+  PaddingBox,
+  MultilineText,
+  HStack,
+  Group,
+  Fixed,
+  DebugRenderer,
+  ChatRenderer,
+  BaseRenderer,
+  AlignBox
+};

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "chat-layout",
+  "module": "index.js",
+  "type": "module",
+  "devDependencies": {},
+  "dependencies": {},
+  "version": "0.0.1"
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+  "include": ["*.d.ts", "*.civet"]
+}