Commit d330759f58bad677b9296d4dd9134ccc902821ce | the-knife

3 files changed, 43 insertions(+), 3 deletions(-)

apps/web/src/components/chat/ComposerBannerStack.test.tsx+4

...	...	@@ -33,6 +33,10 @@ describe("ComposerBannerStack", () => {
33	33	const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />);
34	34
35	35	expect(markup).not.toContain("data-composer-banner-stack-expanded-items");
	36	expect(markup).toContain("alert-glass");
	37	expect(markup).toContain('data-variant="warning"');
	38	expect(markup).toContain("transform:none");
	39	expect(markup).not.toContain("will-change:transform");
36	40	});
37	41
38	42	it("applies item-specific surface and action layout classes", () => {

apps/web/src/components/chat/ComposerBannerStack.tsx+6-3

...	...	@@ -16,11 +16,10 @@ const stackedExitStyle = {
16	16	} satisfies CSSProperties;
17	17	const restingStyle = {
18	18	opacity: 1,
19		transform: "translate3d(0, 0, 0)",
	19	transform: "none",
20	20	} satisfies CSSProperties;
21	21	const exitTransitionStyle = {
22	22	transition: `transform ${DISMISS_TRANSITION_MS}ms ease-in, opacity ${DISMISS_TRANSITION_MS}ms ease-in`,
23		willChange: "transform, opacity",
24	23	} satisfies CSSProperties;
25	24
26	25	export interface ComposerBannerStackItem {
...	...	@@ -173,7 +172,11 @@ function ComposerBannerStackAlert({
173	172	const dismissOnly = item.onDismiss && !item.actions;
174	173
175	174	return (
176		<Alert variant={item.variant} className={item.className}>
	175	<Alert
	176	variant={item.variant}
	177	className={cn("alert-glass", item.className)}
	178	data-variant={item.variant}
	179	>
177	180	{item.icon}
178	181	<AlertTitle>{item.title}</AlertTitle>
179	182	{item.description ? <AlertDescription>{item.description}</AlertDescription> : null}

apps/web/src/index.css+33

...	...	@@ -375,6 +375,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
375	375	backdrop-filter: blur(16px);
376	376	}
377	377
	378	.alert-glass {
	379	--alert-glass-tint: transparent;
	380
	381	background:
	382	linear-gradient(
	383	color-mix(in srgb, var(--alert-glass-tint) 4%, transparent),
	384	color-mix(in srgb, var(--alert-glass-tint) 4%, transparent)
	385	),
	386	color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important;
	387	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	388	backdrop-filter: blur(16px) saturate(1.1);
	389	}
	390
	391	.alert-glass[data-variant="error"] {
	392	--alert-glass-tint: var(--destructive);
	393	}
	394
	395	.alert-glass[data-variant="info"] {
	396	--alert-glass-tint: var(--info);
	397	}
	398
	399	.alert-glass[data-variant="success"] {
	400	--alert-glass-tint: var(--success);
	401	}
	402
	403	.alert-glass[data-variant="warning"] {
	404	--alert-glass-tint: var(--warning);
	405	}
	406
378	407	.dropdown-glass,
379	408	.dialog-glass,
380	409	.workflow-dialog-surface,
...	...	@@ -566,6 +595,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
566	595
567	596	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
568	597	.chat-composer-glass,
	598	.alert-glass {
	599	background: var(--background) !important;
	600	}
	601
569	602	.chat-composer-glass-host {
570	603	background: var(--background);
571	604	}