50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T10f4,"use client"; import * as stylex from "@stylexjs/stylex"; import { createContext, use, useId } from "react"; import type { ComponentProps } from "react"; import { Button } from "@/components/primitives/button"; import type { ButtonProps } from "@/components/primitives/button"; import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle, } from "@/components/primitives/card"; import type { Sx } from "@/lib/constella/styles"; import { colors, lineHeights, space } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; const TitleId = createContext(undefined); const styles = stylex.create({ title: { alignItems: "start", display: "flex", gap: space.row, }, // As tall as the title's line, so the icon centers on it. media: { alignItems: "center", display: "flex", flexShrink: 0, height: lineHeights.textSm, }, fields: { alignItems: "baseline", columnGap: space.lg, display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", marginBlockEnd: 0, marginBlockStart: 0, rowGap: space.xs, }, // The pair is one grid row, not a box of its own. field: { display: "contents", }, label: { color: colors.textSecondary, }, value: { marginInlineStart: 0, overflowWrap: "anywhere", }, footer: { justifyContent: "flex-end", }, // Apart from the action: a slip lands on the button that does nothing. cancel: { marginInlineEnd: "auto", }, }); /** A card asking to allow a tool call, named by its title. */ function Approval( props: Omit, "size" | "variant"> ) { const titleId = useId(); return ( ); } const ApprovalHeader = CardHeader; /** What the tool will do ("Send mail"), after its media. */ function ApprovalTitle({ sx, ...props }: ComponentProps) { const titleId = use(TitleId); return ; } /** The tool's icon, bare, before the title. */ function ApprovalMedia({ sx, ...props }: Styled>) { return ( ); } const ApprovalAction = CardAction; const ApprovalContent = CardContent; /** The call's arguments as label and value rows. */ function ApprovalFields({ sx, ...props }: Styled>) { return (

); } function ApprovalFieldValue({ sx, ...props }: Styled>) { return (: ); } /** The card's answer buttons: `ApprovalCancel` at its start, the action at its end. */ function ApprovalFooter({ sx, ...props }: ComponentProps) { return ; } /** The outline Cancel button, alone at the footer's start. */ function ApprovalCancel({ size = "sm", sx, variant = "outline", ...props }: Omit) { return (