Harden Facehash SVG against ancestor sizing rules

Author: Rieranthony

apps/web/src/components/ui/avatar-input.test.tsx

@@ -13,7 +13,7 @@ describe("AvatarInput", () => {
 		expect(html).toContain("Preview");
 	});
 
-	it("renders image preview (and fallback container) when value exists", () => {
+	it("renders the fallback container while delegating image loading to the client", () => {
 		const html = renderToStaticMarkup(
 			<AvatarInput
 				onChange={() => {}}
@@ -26,7 +26,7 @@ describe("AvatarInput", () => {
 			/>
 		);
 
-		expect(html).toContain("https://cdn.example.com/logo.png");
 		expect(html).toContain('data-slot="avatar-fallback"');
+		expect(html).not.toContain('data-slot="avatar-image"');
 	});
 });

apps/web/src/components/ui/avatar.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it, mock } from "bun:test";
 import type React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
+import { Button } from "./button";
 
 mock.module("./tooltip", () => ({
 	TooltipOnHover: ({
@@ -19,16 +20,42 @@ mock.module("./tooltip", () => ({
 const modulePromise = import("./avatar");
 
 describe("Avatar facehash wrapper", () => {
-	it("pins the fallback foreground to black", async () => {
+	it("keeps standalone facehash interactive and pins the foreground to black", async () => {
 		const { Facehash } = await modulePromise;
 		const html = renderToStaticMarkup(
 			<Facehash className="text-white dark:text-white" name="agent-47" />
 		);
 
 		expect(html).toContain("color:#000000");
+		expect(html).toContain("transform-box:view-box");
 		expect(html).toContain("display:block;overflow:visible;color:inherit");
 	});
 
+	it("renders avatar fallbacks as non-interactive facehashes", async () => {
+		const { Avatar } = await modulePromise;
+		const html = renderToStaticMarkup(
+			<Avatar fallbackName="Quick Tornado" tooltipContent={null} url={null} />
+		);
+
+		expect(html).toContain('data-slot="avatar-fallback"');
+		expect(html).not.toContain("transform-box:view-box");
+		expect(html).toContain("color:#000000");
+	});
+
+	it("keeps the facehash scene full-size inside shared buttons", async () => {
+		const { Avatar } = await modulePromise;
+		const html = renderToStaticMarkup(
+			<Button size="icon-small" variant="ghost">
+				<Avatar fallbackName="Quick Tornado" tooltipContent={null} url={null} />
+			</Button>
+		);
+
+		expect(html).toContain('data-slot="button"');
+		expect(html).toContain(
+			"display:block;overflow:visible;color:inherit;width:100%;height:100%"
+		);
+	});
+
 	it("uses a fit-content wrapper and supports overriding tooltip content", async () => {
 		const { Avatar } = await modulePromise;
 		const html = renderToStaticMarkup(

apps/web/src/components/ui/avatar.tsx

@@ -4,8 +4,12 @@ import {
 	PRESENCE_AWAY_WINDOW_MS,
 	PRESENCE_ONLINE_WINDOW_MS,
 } from "@cossistant/types";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { Facehash as FacehashComponent } from "facehash";
+import {
+	AvatarFallback as FacehashAvatarFallbackPrimitive,
+	AvatarImage as FacehashAvatarImagePrimitive,
+	Avatar as FacehashAvatarPrimitive,
+	Facehash as FacehashComponent,
+} from "facehash";
 import type * as React from "react";
 import { useEffect, useState } from "react";
 import { formatTimeAgo } from "@/lib/date";
@@ -16,9 +20,9 @@ import { TooltipOnHover } from "./tooltip";
 function AvatarContainer({
 	className,
 	...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: React.ComponentProps<typeof FacehashAvatarPrimitive>) {
 	return (
-		<AvatarPrimitive.Root
+		<FacehashAvatarPrimitive
 			className={cn(
 				"relative flex size-8 shrink-0 overflow-hidden rounded",
 				className
@@ -32,9 +36,9 @@ function AvatarContainer({
 function AvatarImage({
 	className,
 	...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+}: React.ComponentProps<typeof FacehashAvatarImagePrimitive>) {
 	return (
-		<AvatarPrimitive.Image
+		<FacehashAvatarImagePrimitive
 			className={cn("aspect-square size-full", className)}
 			data-slot="avatar-image"
 			{...props}
@@ -43,7 +47,10 @@ function AvatarImage({
 }
 
 interface AvatarFallbackProps
-	extends React.ComponentProps<typeof AvatarPrimitive.Fallback> {
+	extends Omit<
+		React.ComponentProps<typeof FacehashAvatarFallbackPrimitive>,
+		"children" | "facehashProps" | "name"
+	> {
 	value?: string | null;
 	children?: string;
 }
@@ -87,6 +94,7 @@ function Facehash({
 
 function AvatarFallback({
 	className,
+	style,
 	value,
 	children,
 	...props
@@ -95,16 +103,25 @@ function AvatarFallback({
 		getNonEmptyString(value) ?? getNonEmptyString(children) ?? "avatar";
 
 	return (
-		<AvatarPrimitive.Fallback
+		<FacehashAvatarFallbackPrimitive
 			className={cn(
 				"flex size-full items-center justify-center text-black dark:text-black",
 				className
 			)}
 			data-slot="avatar-fallback"
+			facehashProps={{
+				colorClasses: COSSISTANT_FACEHASH_COLOR_CLASSES,
+				enableBlink: true,
+				intensity3d: "dramatic",
+				interactive: false,
+			}}
+			name={facehashName}
+			style={{
+				color: "#000000",
+				...style,
+			}}
 			{...props}
-		>
-			<Facehash name={facehashName} />
-		</AvatarPrimitive.Fallback>
+		/>
 	);
 }
 

packages/facehash/src/__snapshots__/facehash-scene-svg.test.tsx.snap

@@ -62,4 +62,25 @@ describe("createFacehashScene", () => {
 		expect(Math.abs(scene.projection.skewX)).toBe(0);
 		expect(Math.abs(scene.projection.skewY)).toBe(0);
 	});
+
+	it("normalizes short eye geometries without changing taller variants", () => {
+		const roundScene = createFacehashScene({
+			name: findNameForFaceType("round"),
+		});
+		const crossScene = createFacehashScene({
+			name: findNameForFaceType("cross"),
+		});
+		const lineScene = createFacehashScene({
+			name: "Support team",
+		});
+
+		expect(roundScene.data.faceType).toBe("round");
+		expect(crossScene.data.faceType).toBe("cross");
+		expect(lineScene.data.faceType).toBe("line");
+
+		expect(roundScene.faceBox.height).toBeCloseTo(60 * (15 / 63), 3);
+		expect(crossScene.faceBox.height).toBeCloseTo(60 * (23 / 71), 3);
+		expect(lineScene.faceBox.height).toBeCloseTo(60 * (15 / 82), 3);
+		expect(lineScene.faceBox.height).toBeGreaterThan(10);
+	});
 });

packages/facehash/src/core/scene.test.ts

@@ -89,6 +89,7 @@ const FACE_WIDTH = 60;
 const FACE_CENTER_Y = 37;
 const INITIAL_Y = 70;
 const INITIAL_FONT_SIZE = 26;
+const MIN_VISUAL_FACE_HEIGHT = 15;
 
 function toFixedNumber(value: number): number {
 	return Number(value.toFixed(3));
@@ -158,8 +159,13 @@ export function createFacehashScene(
 	const data = computeFacehash({ name, colorsLength });
 	const rotation = pose === "front" ? { x: 0, y: 0 } : data.rotation;
 	const faceGeometry = FACE_GEOMETRIES[data.faceType];
+	// Keep short eye geometries visually comparable to the other face variants.
+	const visualFaceHeight = Math.max(
+		faceGeometry.viewBox.height,
+		MIN_VISUAL_FACE_HEIGHT
+	);
 	const aspectRatio =
-		faceGeometry.viewBox.width / Math.max(faceGeometry.viewBox.height, 1);
+		faceGeometry.viewBox.width / Math.max(visualFaceHeight, 1);
 	const faceHeight = FACE_WIDTH / aspectRatio;
 	const projection = createProjection(rotation, intensity3d);
 	const preset = PROJECTION_PRESETS[intensity3d];

packages/facehash/src/core/scene.ts

@@ -57,6 +57,8 @@ export function FacehashSceneSvg({
 				display: "block",
 				overflow: "visible",
 				...style,
+				width,
+				height,
 			}}
 			viewBox="0 0 100 100"
 			width={width}

packages/facehash/src/facehash-scene-svg.tsx

@@ -9,7 +9,9 @@ describe("Facehash", () => {
 		);
 
 		expect(html).toContain('class="facehash text-[#123456]"');
-		expect(html).toContain("display:block;overflow:visible;color:inherit");
+		expect(html).toContain(
+			"display:block;overflow:visible;color:inherit;width:100%;height:100%"
+		);
 		expect(html).not.toContain("color:black");
 	});
 });

packages/facehash/src/facehash.test.tsx

@@ -1,5 +1,6 @@
 import { afterAll, beforeEach, describe, expect, it, mock } from "bun:test";
 import { type Conversation, ConversationStatus } from "@cossistant/types";
+import { Facehash } from "facehash";
 import React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import type { SupportTextResolvedFormatter } from "../text/locales/keys";
@@ -45,10 +46,19 @@ mock.module("../text", () => ({
 
 mock.module("./avatar", () => ({
 	Avatar: ({ name, facehashName }: { name: string; facehashName?: string }) =>
-		React.createElement("div", {
-			"data-avatar": name,
-			"data-facehash-name": facehashName ?? "",
-		}),
+		React.createElement(
+			"div",
+			{
+				"data-avatar": name,
+				"data-facehash-name": facehashName ?? "",
+			},
+			React.createElement(Facehash, {
+				className: "size-full text-black",
+				interactive: false,
+				name: facehashName ?? name,
+				size: "100%",
+			})
+		),
 }));
 
 mock.module("./icons", () => ({
@@ -277,4 +287,13 @@ describe("ConversationButtonLink", () => {
 		expect(html).toContain('data-avatar="Support Team"');
 		expect(html).toContain('data-facehash-name="support@example.com"');
 	});
+
+	it("keeps the nested facehash scene full-size inside the conversation button", async () => {
+		const html = await renderConversationButtonLink();
+
+		expect(html).toContain("group/btn");
+		expect(html).toContain(
+			"display:block;overflow:visible;color:inherit;width:100%;height:100%"
+		);
+	});
 });