chat-layout 1.2.0-0 → 1.2.0-1

package/README.md

@@ -7,13 +7,14 @@ The current v2-style APIs are:
 - `Flex`: row/column layout
 - `FlexItem`: explicit `grow` / `shrink` / `alignSelf`
 - `Place`: place a single child at `start` / `center` / `end`
+- `ShrinkWrap`: search the narrowest width that keeps the current height stable
 - `MultilineText`: text layout with logical `align` or physical `physicalAlign`
 - `ChatRenderer` + `ListState`: virtualized chat rendering
 - `memoRenderItem` / `memoRenderItemBy`: item render memoization
 
 ## Quick example
 
-Use `Flex` to build structure, `FlexItem` to control resize behavior, and `Place` to align the final bubble:
+Use `Flex` to build structure, `FlexItem` to control resize behavior, `ShrinkWrap` to keep the bubble as narrow as possible without adding lines, and `Place` to align the final bubble:
 
 ```ts
 const bubble = new RoundedBox(
@@ -26,17 +27,27 @@ const bubble = new RoundedBox(
   { top: 6, bottom: 6, left: 10, right: 10, radii: 8, fill: "#ccc" },
 );
 
+const body = new ShrinkWrap(
+  new Flex(
+    [senderLine, bubble],
+    { direction: "column", gap: 4, alignItems: item.sender === "A" ? "end" : "start" },
+  ),
+);
+
 const row = new Flex(
   [
     avatar,
-    new FlexItem(bubble, { grow: 1, shrink: 1 }),
+    new FlexItem(
+      new Place(body, {
+        align: item.sender === "A" ? "end" : "start",
+      }),
+      { grow: 1, shrink: 1 },
+    ),
   ],
   { direction: "row", gap: 4, reverse: item.sender === "A" },
 );
 
-return new Place(row, {
-  align: item.sender === "A" ? "end" : "start",
-});
+return row;
 ```
 
 See [example/chat.ts](./example/chat.ts) for a full chat example.
@@ -47,6 +58,7 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
 - `maxWidth` / `maxHeight` limit measurement, but do not automatically make children fill the cross axis.
 - Use `alignItems: "stretch"` or `alignSelf: "stretch"` when a child should fill the computed cross size.
 - `Place` is the simplest way to align a single bubble left, center, or right.
+- `ShrinkWrap` is useful when a bubble sits inside a growable slot but should still collapse to the narrowest width that preserves its current line count.
 - `MultilineText.align` uses logical values: `start`, `center`, `end`.
 - `MultilineText.physicalAlign` uses physical values: `left`, `center`, `right`.
 - `Text` and `MultilineText` default to `whiteSpace: "normal"`, using the library's canvas-first collapsible whitespace behavior.
@@ -103,6 +115,7 @@ Notes:
 - Shrink only applies when there is a finite main-axis constraint and total content size overflows it.
 - Overflow is redistributed by `shrink * basis`; today `basis` is internal-only and always `"auto"`.
 - Custom nodes can implement `measureMinContent()` for better shrink results.
+- `ShrinkWrap` complements flex shrink: it keeps probing narrower `maxWidth` values until the child would become taller, then uses the last safe width as the final layout.
 - Known limitation: column shrink with `MultilineText` does not clip drawing by itself.
 
 ## Migration notes

package/example/chat.ts

@@ -7,6 +7,7 @@ import {
   MultilineText,
   PaddingBox,
   Place,
+  ShrinkWrap,
   Text,
   Wrapper,
   memoRenderItem,
@@ -357,7 +358,11 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
     alignItems: item.sender === "A" ? "end" : "start",
   });
 
-  const alignedBody = new Place<C>(body, {
+  const shrinkWrappedBody = new ShrinkWrap<C>(body, {
+    preferredMinWidth: 160,
+  });
+
+  const alignedBody = new Place<C>(shrinkWrappedBody, {
     align: item.sender === "A" ? "end" : "start",
   });
 

package/index.d.mts

@@ -364,6 +364,24 @@ declare class Place<C extends CanvasRenderingContext2D> extends Wrapper<C> {
   hittest(ctx: Context<C>, test: HitTest): boolean;
 }
 //#endregion
+//#region src/nodes/shrinkwrap.d.ts
+interface ShrinkWrapOptions {
+  tolerance?: number;
+  preferredMinWidth?: number;
+}
+/**
+ * Shrinks a single child to the narrowest width that does not increase its reference height.
+ */
+declare class ShrinkWrap<C extends CanvasRenderingContext2D> extends Wrapper<C> {
+  #private;
+  readonly options: ShrinkWrapOptions;
+  constructor(inner: Node<C>, options?: ShrinkWrapOptions);
+  measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
+  draw(ctx: Context<C>, x: number, y: number): boolean;
+  hittest(ctx: Context<C>, test: HitTest): boolean;
+}
+//#endregion
 //#region src/nodes/text.d.ts
 /**
  * Draws wrapped text using the configured line height and alignment.
@@ -658,5 +676,5 @@ declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}>
   hittest(test: HitTest): boolean;
 }
 //#endregion
-export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ReplaceListItemAnimationOptions, Text, TextAlign, TextEllipsisPosition, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ReplaceListItemAnimationOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map

package/index.mjs

@@ -814,6 +814,112 @@ var Place = class extends Wrapper {
 		});
 	}
 };
+//#endregion
+//#region src/nodes/shrinkwrap.ts
+const DEFAULT_TOLERANCE = .5;
+const HEIGHT_EPSILON = 1e-6;
+function withMaxWidth(constraints, maxWidth) {
+	return {
+		...constraints,
+		maxWidth
+	};
+}
+function computeShrinkwrapWidth(measure, lowerBound, upperBound, referenceHeight, tolerance = DEFAULT_TOLERANCE) {
+	const minWidth = Math.min(lowerBound, upperBound);
+	const maxWidth = Math.max(lowerBound, upperBound);
+	const effectiveTolerance = Math.max(tolerance, HEIGHT_EPSILON);
+	const lowerBoundBox = measure(minWidth);
+	if (lowerBoundBox.height <= referenceHeight + HEIGHT_EPSILON) return {
+		maxWidth: minWidth,
+		box: lowerBoundBox
+	};
+	let lo = minWidth;
+	let hi = maxWidth;
+	let hiBox = measure(maxWidth);
+	while (hi - lo > effectiveTolerance) {
+		const probeWidth = (lo + hi) / 2;
+		const probeBox = measure(probeWidth);
+		if (probeBox.height <= referenceHeight + HEIGHT_EPSILON) {
+			hi = probeWidth;
+			hiBox = probeBox;
+			continue;
+		}
+		lo = probeWidth;
+	}
+	return {
+		maxWidth: hi,
+		box: hiBox
+	};
+}
+/**
+* Shrinks a single child to the narrowest width that does not increase its reference height.
+*/
+var ShrinkWrap = class extends Wrapper {
+	constructor(inner, options = {}) {
+		super(inner);
+		this.options = options;
+	}
+	measure(ctx) {
+		const constraints = ctx.constraints;
+		const availableWidth = constraints?.maxWidth;
+		if (availableWidth == null) {
+			const childConstraints = constraints == null ? void 0 : { ...constraints };
+			const childBox = ctx.measureNode(this.inner, childConstraints);
+			this.#writeLayout(ctx, childBox, childConstraints);
+			return childBox;
+		}
+		const boundedConstraints = constraints == null ? { maxWidth: availableWidth } : constraints;
+		const referenceConstraints = { ...boundedConstraints };
+		const referenceBox = ctx.measureNode(this.inner, referenceConstraints);
+		let lowerBound = measureNodeMinContent(ctx, this.inner, boundedConstraints).width;
+		const preferredMinWidth = this.options.preferredMinWidth == null ? void 0 : Math.max(0, this.options.preferredMinWidth);
+		if (preferredMinWidth != null && preferredMinWidth <= availableWidth) lowerBound = Math.max(lowerBound, preferredMinWidth);
+		if (boundedConstraints.minWidth != null) lowerBound = Math.max(lowerBound, boundedConstraints.minWidth);
+		if (lowerBound >= availableWidth) {
+			this.#writeLayout(ctx, referenceBox, referenceConstraints);
+			return referenceBox;
+		}
+		const finalConstraints = withMaxWidth(boundedConstraints, computeShrinkwrapWidth((maxWidth) => ctx.measureNode(this.inner, withMaxWidth(boundedConstraints, maxWidth)), lowerBound, availableWidth, referenceBox.height, this.options.tolerance ?? DEFAULT_TOLERANCE).maxWidth);
+		const finalBox = ctx.measureNode(this.inner, finalConstraints);
+		this.#writeLayout(ctx, finalBox, finalConstraints);
+		return finalBox;
+	}
+	measureMinContent(ctx) {
+		return measureNodeMinContent(ctx, this.inner);
+	}
+	draw(ctx, x, y) {
+		const layoutResult = readLayoutResult(this, ctx);
+		if (!layoutResult) return this.inner.draw(ctx, x, y);
+		const childResult = getSingleChildLayout(layoutResult);
+		if (!childResult) return false;
+		return childResult.node.draw(withConstraints(ctx, childResult.constraints), x + childResult.rect.x, y + childResult.rect.y);
+	}
+	hittest(ctx, test) {
+		const layoutResult = readLayoutResult(this, ctx);
+		if (!layoutResult) return false;
+		const hit = findChildAtPoint(layoutResult.children, test.x, test.y, "rect");
+		if (!hit) return false;
+		return hit.child.node.hittest(withConstraints(ctx, hit.child.constraints), {
+			...test,
+			x: hit.localX,
+			y: hit.localY
+		});
+	}
+	#writeLayout(ctx, childBox, childConstraints) {
+		const childRect = createRect(0, 0, childBox.width, childBox.height);
+		writeLayoutResult(this, ctx, {
+			containerBox: childRect,
+			contentBox: childRect,
+			children: [{
+				node: this.inner,
+				rect: childRect,
+				contentBox: childRect,
+				constraints: childConstraints
+			}],
+			constraints: ctx.constraints
+		});
+	}
+};
 Number.POSITIVE_INFINITY;
 const MIN_CONTENT_WIDTH_EPSILON = .001;
 let sharedGraphemeSegmenter;
@@ -4066,6 +4172,6 @@ var TimelineRenderer = class extends VirtualizedRenderer {
 	}
 };
 //#endregion
-export { BaseRenderer, ChatRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListState, MultilineText, PaddingBox, Place, Text, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { BaseRenderer, ChatRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListState, MultilineText, PaddingBox, Place, ShrinkWrap, Text, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 
 //# sourceMappingURL=index.mjs.map