{"context":{"domain":"veste-app"},"layers":{"ApplicationLayer":{"reference":"ApplicationLayer","availableInstances":[{"reference":"ComponentsDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"component":"data2-core@DataSet","reference":"SystemsDataSet","params":{"filter":{"domain":"data2"},"pagination":{"size":1},"datasource":{"component":"data2-core-types@ProcessReference","params":{"reference":"SystemsDataSource"}}}},{"reference":"ExternalComponentInstancesDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"reference":"SystemsDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[{"_id":"5e3b796d6228227ca637d0f4","name":"data2","domain":"data2","organization":"62292184611f480b3191c37c","visibility":"public","updatedAt":"2026-07-27T14:19:36.810Z"}]}},{"reference":"OrganizationsDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"reference":"DataComponentInstancesDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"component":"data2-core@DataSet","reference":"OneFileComponentInstancesDataSet","params":{"pagination":{"size":1},"master":{"dataset":{"component":"data2-core-types@ProcessReference","params":{"reference":"SystemsDataSet"}},"localField":"system","masterField":"_id"},"datasource":{"component":"data2-core-types@ProcessReference","params":{"reference":"FileComponentInstancesDataSource"}}}},{"reference":"ApplicationsDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"reference":"ComponentInstancesDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"reference":"ServiceComponentInstancesDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[]}},{"component":"data2-core@Data2TableDataSource","reference":"FileComponentInstancesDataSource","params":{"table":"fileComponentInstances","schema":[{"component":"data2-core-types@Field","params":{"key":"component","title":"Component","component":"data2-core-primitives@String"}},{"component":"data2-core-types@Field","params":{"key":"system","title":"System","component":"data2-core-primitives@ObjectId"}},{"component":"data2-core-types@Field","params":{"key":"displayName","title":"Display Name","component":"data2-core-primitives@String"}},{"component":"data2-core-types@Field","params":{"key":"params","title":"Params","component":"data2-core-primitives@Object"}},{"component":"data2-core-types@Field","params":{"key":"reference","title":"Reference","component":"data2-core-primitives@String"}}]}},{"component":"data2-core@MemoryDataSource","reference":"EmptyDataSource","params":{"initialData":[]}},{"reference":"ComponentsDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}},{"reference":"UserComponentsDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}},{"reference":"DataComponentInstancesDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}},{"reference":"ServiceComponentInstancesDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}},{"reference":"ComponentInstancesDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}},{"reference":"ExternalComponentInstancesDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}},{"reference":"ApplicationsDataSet","component":"data2-core@DataSet","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"EmptyDataSource"}}}}],"processesParams":{}},"HostApplicationLayer":{"reference":"HostApplicationLayer","availableInstances":[{"_id":"5f15ff190528b92601890f71","component":"data2-core@DataSet","system":"5e3b796d6228227ca637d0f4","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"SystemsTableDataSource"}},"filter":{"domain":{"component":"data2-core-types@Reference","params":{"reference":"domain"}}},"pk":"_id","fields":[{"component":"data2-core-types@FieldReference","params":{"key":"_id"}},{"component":"data2-core-types@FieldReference","params":{"key":"name"}},{"component":"data2-core-types@FieldReference","params":{"key":"domain"}},{"component":"data2-core-types@FieldReference","params":{"key":"visibility"}},{"component":"data2-core-types@FieldReference","params":{"key":{"component":"data2-core-primitives@String","params":{"content":"customDomains"}}},"break":true},{"component":"data2-core-types@FieldReference","params":{"key":{"component":"data2-core-primitives@String","params":{"content":"organization._id"}}},"break":true},{"component":"data2-core-types@FieldReference","params":{"key":{"component":"data2-core-primitives@String","params":{"content":"organization.name"}}},"break":true},{"component":"data2-core-types@FieldReference","params":{"key":{"component":"data2-core-primitives@String","params":{"content":"organization.billingStatus"}}},"break":true},{"component":"data2-core-types@FieldReference","params":{"key":{"component":"data2-core-primitives@String","params":{"content":"organization.publicTrial.active"}}},"break":true},{"component":"data2-core-types@FieldReference","params":{"key":{"component":"data2-core-primitives@String","params":{"content":"settings.defaultAccessPolicy"}}},"break":true}],"pagination":{"size":{"component":"data2-core-primitives@Number","params":{"content":1}}},"staticPagination":{"size":{"component":"data2-core-primitives@Number","params":{"content":1}}},"policies":[{"component":"data2-core-auth@Policy","params":{"allow":{"params":{"actions":[{"params":{"components":[{"params":{"query":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"$params.query"}}}},"field":{"component":"data2-core-primitives@String","params":{"content":"_id"}},"fieldType":"string"},"component":"data2@7KkQq0vK4a7D2gg6IVJT7"},{"params":{"query":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"$params.query"}}}},"field":{"component":"data2-core-primitives@String","params":{"content":"domain"}},"fieldType":"string"},"component":"data2@7KkQq0vK4a7D2gg6IVJT7"},{"params":{"query":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"$params.query"}}}},"field":{"component":"data2-core-primitives@String","params":{"content":"customDomains"}},"fieldType":"string"},"component":"data2@7KkQq0vK4a7D2gg6IVJT7"}]},"component":"data2-core-logical-operators@Or"}]},"component":"data2-core-flow@Series"}}}]},"reference":"SystemsDataSet","updatedAt":"2026-08-07T21:51:24.037Z","createdAt":"2020-07-20T20:31:21.838Z"},{"_id":"5f1601ce0528b92601890f7c","component":"data2-core@DataSet","system":"5e3b796d6228227ca637d0f4","params":{"pagination":{"size":1000},"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"ComponentsTableDataSource"}},"sort":{"params.package":1,"params.component":1},"pk":"_id","autoSelect":{"component":"data2-core-primitives@Boolean","params":{"content":false}},"staticFilter":{"system":{"exists":{"params":{"content":false},"component":"data2-core-primitives@Boolean"}}},"filter":{"system":{"exists":{"params":{"content":false},"component":"data2-core-primitives@Boolean"}}}},"reference":"ComponentsDataSet","updatedAt":"2025-11-05T19:37:01.935Z","createdAt":"2020-07-20T20:42:54.898Z"},{"_id":"5f9041dbc8da12be8b94aea4","component":"data2-core@DataSet","system":"5e3b796d6228227ca637d0f4","params":{"pagination":{"size":2000},"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"ComponentsTableDataSource"}},"pk":"_id","autoEdit":true,"master":{"dataset":{"component":"data2-core-types@DataSetReference","params":{"reference":"SystemsDataSet"}},"localField":{"component":"data2-core-types@DataSetColumnReference","params":{"column":"system"}},"masterField":{"component":"data2-core-types@DataSetColumnReference","params":{"column":"_id"}}},"autoSelect":{"component":"data2-core-primitives@Boolean","params":{"content":false}},"policies":{"params":{"allowGet":{"component":"data2-core-primitives@Boolean","params":{"content":true}}},"component":"data2@hkXy-UhMjhyfptdE6_fpW"}},"reference":"UserComponentsDataSet","updatedAt":"2025-11-06T21:06:58.095Z","createdAt":"2020-07-20T20:44:09.350Z"},{"_id":"65d8c4fabc9dbb8f94de8d53","component":"data2-core@DataSet","system":"5e3b796d6228227ca637d0f4","params":{"datasource":{"component":"data2-core-types@DataSourceReference","params":{"reference":"ExternalComponentInstancesTableDataSource"}},"pk":"_id","autoEdit":true,"master":{"params":{"dataset":{"component":"data2-core-types@DataSetReference","params":{"reference":"SystemsDataSet"}},"localField":{"component":"data2-core-types@DataSetColumnReference","params":{"column":"system"}},"masterField":{"component":"data2-core-types@DataSetColumnReference","params":{"column":"_id"}}},"component":"data2-core-types@DataSetMaster"},"autoSelect":{"component":"data2-core-primitives@Boolean","params":{"content":false}},"policies":{"params":{"allowGet":{"component":"data2-core-primitives@Boolean","params":{"content":true}}},"component":"data2@hkXy-UhMjhyfptdE6_fpW"}},"reference":"ExternalComponentInstancesDataSet","updatedAt":"2025-11-06T21:07:23.742Z","createdAt":"2024-02-23T16:17:01.816Z"},{"reference":"SystemsTableDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[{"_id":"698a0c028a310c894be98bc8","name":"app","domain":"veste-app","visibility":"public","settings":{"defaultAccessPolicy":"private"},"updatedAt":"2026-08-14T20:00:20.536Z","createdAt":"2026-02-09T16:32:02.402Z"}]}},{"reference":"ComponentsTableDataSource","component":"data2-core@MemoryDataSource","params":{"initialData":[{"_id":"5f52a278a575399a45d239b4","component":"data2-core-types@Component","params":{"package":"data2-core-primitives","component":"Router","interactions":{"component":"data2-core-types@FieldSet","params":{"fields":{"goBack":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-types@Function"}},"definition":{"component":"data2-core-functions@Function","params":{"body":{"preventEvaluation":true,"component":"data2-core-types@Getter","params":{"module":{"component":"data2-core-types@This","params":{}},"prop":"history.goBack","args":[]}}}},"icon":{"component":"data2-core-primitives@String","params":{"content":"arrow-left"}},"visibility":"public"}},"goTo":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"definition":{"component":"data2-core-functions@Function","params":{"body":{"preventEvaluation":true,"component":"data2-core-types@Getter","params":{"module":{"component":"data2-core-types@This","params":{}},"prop":"history.push","args":[{"component":"data2-core-types@Reference","params":{"reference":"url"}},{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"preserveQuery"}}}}]}},"parameters":[{"component":"data2-core-primitives@String","params":{"content":"url"}},{"component":"data2-core-primitives@String","params":{"content":"preserveQuery"}}]},"break":true},"icon":{"component":"data2-core-primitives@String","params":{"content":"share"}},"visibility":"public","arguments":[{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Path to route"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Path to redirect user"}},"visibility":"public","required":{"component":"data2-core-primitives@Boolean","params":{"content":true}}},"component":"data2-core-types@ComponentParameter"},{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Boolean"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Preserve Query"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Preserve query string parameters preserve query parameters on navigating."}},"visibility":"public","required":{"component":"data2-core-primitives@Boolean","params":{"content":true}}},"component":"data2-core-types@ComponentParameter"}]}},"open":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-types@Function"}},"definition":{"component":"data2-core-functions@Function","params":{"body":{"preventEvaluation":true,"component":"data2-core-types@Getter","params":{"module":{"component":"data2-core-types@This","params":{}},"prop":"history.push","args":[{"pathname":{"component":"data2-core-types@Reference","params":{"reference":"value"}}}]}},"parameters":["value"]}},"icon":{"component":"data2-core-primitives@String","params":{"content":"share"}},"visibility":"public","arguments":[{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Link to open"}},"description":{"component":"data2-core-primitives@String","params":{"content":""}},"visibility":"public","required":{"component":"data2-core-primitives@Boolean","params":{"content":true}}},"component":"data2-core-types@ComponentParameter"},{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Target"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Where to open the link"}},"visibility":"public","required":{"component":"data2-core-primitives@Boolean","params":{"content":false}},"oneOf":[{"params":{"content":"_blank"},"component":"data2-core-primitives@String"},{"params":{"content":"_self"},"component":"data2-core-primitives@String"},{"params":{"content":"_parent"},"component":"data2-core-primitives@String"},{"params":{"content":"_top"},"component":"data2-core-primitives@String"}]},"component":"data2-core-types@ComponentParameter"}]}},"close":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-types@Function"}},"definition":{"component":"data2-core-functions@Function","params":{"body":{"preventEvaluation":true,"component":"data2-core-types@Getter","params":{"module":{"params":{},"component":"data2-core-web@Window"},"prop":"close"}},"parameters":["value"]}},"icon":{"component":"data2-core-primitives@String","params":{"content":"times"}},"visibility":"public","arguments":[{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Link to open"}},"description":{"component":"data2-core-primitives@String","params":{"content":""}},"visibility":"public","required":{"component":"data2-core-primitives@Boolean","params":{"content":true}}},"component":"data2-core-types@ComponentParameter"},{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Target"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Where to open the link"}},"visibility":"public","required":{"component":"data2-core-primitives@Boolean","params":{"content":false}},"oneOf":[{"params":{"content":"_blank"},"component":"data2-core-primitives@String"},{"params":{"content":"_self"},"component":"data2-core-primitives@String"},{"params":{"content":"_parent"},"component":"data2-core-primitives@String"},{"params":{"content":"_top"},"component":"data2-core-primitives@String"}]},"component":"data2-core-types@ComponentParameter"}],"description":{"component":"data2-core-primitives@String","params":{"content":"Closes a window that was opened via router.open."}}}}}}}}},{"_id":"620d28658271aa4129919d89","component":"data2-core-types@Component","params":{"package":"data2-interface-services","component":"DeviceController","interactions":{"params":{"fields":{"postMessage":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":"data2-core-primitives@String","title":{"component":"data2-core-primitives@String","params":{"content":"data"}}}}]},"component":"data2-core-types@ComponentParameter"},"print":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"arguments":[{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Object"}},"flat":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"zoom":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Number"}},"title":{"component":"data2-core-primitives@String","params":{"content":"zoom"}},"visibility":"public"}}},"visibility":"public"},"component":"data2-core-types@ComponentParameter"}],"visibility":"public"},"component":"data2-core-types@ComponentParameter"},"share":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}}},"component":"data2-core-types@ComponentParameter"},"clipboard.copy":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}}}}]},"component":"data2-core-types@ComponentParameter"},"clipboard.paste":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}}}}]},"component":"data2-core-types@ComponentParameter"},"download":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"visibility":"public","arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Filename"}}}},{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Content"}}}},{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Object"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Options"}},"parameters":{"params":{"fields":{"type":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Mimetype"}}}}}},"component":"data2-core-types@FieldSet"}}}]},"component":"data2-core-types@ComponentParameter"},"downloadUrl":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"visibility":"public","arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Filename"}}}},{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Url"}}}}]},"component":"data2-core-types@ComponentParameter"},"promptFiles":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":"data2-core-primitives@Object","flat":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"params":{"fields":{"multiple":{"component":"data2-core-types@ComponentParameter","params":{"title":{"component":"data2-core-primitives@String","params":{"content":"Multiple"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Whether or not to allow selecting multiple files"}},"component":"data2-core-primitives@Boolean"}},"acceptedFormats":{"component":"data2-core-types@ComponentParameter","params":{"title":{"component":"data2-core-primitives@String","params":{"content":"Accepted Formats"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Accepted file formats"}},"component":"data2-core-primitives@String","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}}}},"timeout":{"component":"data2-core-types@ComponentParameter","params":{"title":{"component":"data2-core-primitives@String","params":{"content":"Timeout"}},"description":{"component":"data2-core-primitives@String","params":{"content":"Max milliseconds to wait for file upload"}},"component":"data2-core-primitives@Number"}}}},"component":"data2-core-types@FieldSet"}}}],"visibility":"public"},"component":"data2-core-types@ComponentParameter"},"meetingRecord":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"visibility":"public","definition":{"params":{"actions":[{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"meeting"}},"script":{"component":"data2-core-primitives@String","params":{"content":"(function() {\n let mediaRecorder;\n let audioChunks = [];\n let combinedStream;\n let audioContext;\n \n window.meetingCapture = async function() {\n try {\n // Solicitar acesso ao áudio da guia (e vídeo, que será ignorado depois)\n const tabStream = await navigator.mediaDevices.getDisplayMedia({ \n video: true, // Necessário para alguns navegadores\n audio: true\n });\n \n // Remover a trilha de vídeo\n const tabAudioTrack = tabStream.getAudioTracks()[0];\n \n // Solicitar acesso ao microfone\n const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n const micAudioTrack = micStream.getAudioTracks()[0];\n \n // Criar um novo MediaStream com ambas as trilhas de áudio\n combinedStream = new MediaStream([tabAudioTrack, micAudioTrack]);\n \n // Criar um contexto de áudio para misturar os streams\n audioContext = new AudioContext();\n const destination = audioContext.createMediaStreamDestination();\n \n // Conectar a trilha de áudio da guia\n const tabSource = audioContext.createMediaStreamSource(new MediaStream([tabAudioTrack]));\n tabSource.connect(destination);\n \n // Conectar a trilha de áudio do microfone\n const micSource = audioContext.createMediaStreamSource(new MediaStream([micAudioTrack]));\n micSource.connect(destination);\n \n // Iniciar gravação com o stream misturado\n mediaRecorder = new MediaRecorder(destination.stream);\n audioChunks = [];\n mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);\n mediaRecorder.start();\n \n console.log('Gravação iniciada. Chame meetingCaptureStop() para finalizar.');\n } catch (error) {\n console.error('Erro ao iniciar a captura:', error);\n }\n };\n \n window.meetingCaptureStop = function() {\n return new Promise((resolve, reject) => {\n if (!mediaRecorder) {\n reject('Nenhuma gravação em andamento.');\n return;\n }\n \n mediaRecorder.onstop = () => {\n const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });\n combinedStream.getTracks().forEach(track => track.stop());\n audioContext.close();\n \n resolve(audioBlob);\n console.log('Gravação finalizada. O arquivo de áudio está pronto para upload.');\n };\n \n mediaRecorder.stop();\n });\n };\n})();"}}},"component":"data2-core-web@Script"},{"component":"data2-core-types@Getter","params":{"module":{"params":{},"component":"data2-core-web@Window"},"prop":{"component":"data2-core-primitives@String","params":{"content":"meetingCapture"}}}}]},"component":"data2-core-flow@Series"}},"component":"data2-core-types@ComponentParameter"},"meetingRecordStop":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"visibility":"public","arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Filename"}}}},{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Content"}}}},{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Object"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Options"}},"parameters":{"params":{"fields":{"type":{"component":"data2-core-types@ComponentParameter","params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@String"}},"title":{"component":"data2-core-primitives@String","params":{"content":"Mimetype"}}}}}},"component":"data2-core-types@FieldSet"}}}],"definition":{"params":{"actions":[{"component":"data2-core-types@Getter","params":{"module":{"params":{},"component":"data2-core-web@Window"},"prop":{"component":"data2-core-primitives@String","params":{"content":"meetingCaptureStop"}}}}]},"component":"data2-core-flow@Series"}},"component":"data2-core-types@ComponentParameter"},"notify":{"params":{"component":{"component":"data2-core-primitives@String","params":{"content":"data2-core-primitives@Function"}},"visibility":"private","arguments":[{"component":"data2-core-types@ComponentParameter","params":{"component":"data2-core-primitives@Object","parameters":{"title":{"params":{"component":"data2-core-primitives@String","index":{"component":"data2-core-primitives@Number","params":{"content":0}},"title":{"component":"data2-core-primitives@String","params":{"content":"title"}}},"component":"data2-core-types@ComponentParameter"},"sound":{"params":{"component":"data2-core-types@FileComponentUrlReference","index":{"component":"data2-core-primitives@Number","params":{"content":1}},"title":{"component":"data2-core-primitives@String","params":{"content":"sound"}}},"component":"data2-core-types@ComponentParameter"}},"flat":{"component":"data2-core-primitives@Boolean","params":{"content":true}}}}]},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@FieldSet"}}},{"_id":"6a99849b7848d0950257e0a0","component":"data2-core-types@Component","system":"698a0c028a310c894be98bc8","params":{"extends":"data2-core-primitives@Block","component":"johnjohn-deck-proposta","package":"veste-app","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"/* ───────────────────────────────────────────────────────────────────────────\n Deck — Proposta de formalização · Veste S/A · John John\n Provador virtual: POC e teste de 30 dias\n Kit: apresentacao-data2 · arco de formalização · 11 slides\n ─────────────────────────────────────────────────────────────────────────── */\n\n/* Assets no Drive do system veste-app */\nconst SYS = 'veste-app'\nconst F_EXT = `https://${SYS}.data2.media/file/iNSYotTKA1cv_fJAa1K4E`\nconst F_LT = `https://${SYS}.data2.media/file/6bERTVll1aRDU3Xo9NghW`\nconst LD2 = `https://${SYS}.data2.media/file/WLXAyS4HOHvTFytXu7S4P`\nconst RING = `https://${SYS}.data2.media/file/TA2eFNVhnB7dlI9EPAEWb`\n\n/* Link da POC do John John — entra quando a demo do Gui estiver no ar */\nconst DEMO_URL = ''\n\nconst FONT_CSS = `@font-face{font-family:'AkzExt';src:url(${F_EXT}) format('opentype');font-weight:400;font-display:block}@font-face{font-family:'AkzExtLight';src:url(${F_LT}) format('opentype');font-weight:300;font-display:block}`\n\nconst PASS = 'johnjohn2026'\nconst OPEN = false\n\n/* Wordmark oficial John John — SVG do site, com currentColor para servir\n claro sobre o --paper e branco sobre o fundo escuro */\nconst JJ_PATHS = ``\n\nconst JJ = (cls) => `${JJ_PATHS}`\n\nconst FUNDO = `
${JJ('mark')}
`\n\nconst CHIP = DEMO_URL\n ? `Ver o provador funcionando`\n : ``\n\nconst GATE = `
${FUNDO}\n
\n
\"Data²\"+${JJ('gcb')}
\n
Proposta · Veste S/A · John John
\n \n \n
Senha incorreta — tente novamente.
\n
`\n\nconst DECK = `
\n
\"Data²\"${JJ('cb')}
\n
01 — 11
\n
↓ navegue
\n\n
\n\n \n
\n
${FUNDO}\n
\n
\n \"Data²\"+${JJ('cbm')}\n
\n
Provador virtual · POC e teste de 30 dias
\n
\n
\n
\n
We build Data² while imagining a world where things just … work.
\n
Proposta · Setembro 2026
\n
\n
\n\n \n
\n
Índice
\n
\n 01A proposta\n 02O provador\n 03Na prática\n 04Arquitetura\n 05O teste de 30 dias\n 06O que vamos medir\n 07Condições comerciais\n 08Responsabilidades\n
\n
\n\n \n
\n
A proposta · Veste S/A · John John
\n
\n

O provador entra no site por 30 dias.

\n

Sem custo de sprint, com 30 dias de geração de imagem\n liberada e sem mexer no que já funciona. Esta proposta formaliza o que a POC entrega,\n qual número ela precisa mover e como a continuidade vira um acordo pago.

\n
\n
\n\n \n
\n
O provador
\n
\n

\n Prova, combina e compra na mesma sessão.

\n

A peça do catálogo é aplicada na foto do próprio\n cliente, em segundos. Cada prova fica salva no nome dele, com o preço e o caminho de\n volta para a página do produto.

\n
\n
\n
01 · Provador\n
A peça no corpo do cliente
\n

Ele manda uma foto, escolhe a peça e vê o resultado. A roupa atual é removida antes\n da troca, e o enquadramento da foto original é preservado.

\n
02 · Meu Look\n
Várias peças, uma foto
\n

Camisa, calça e jaqueta provadas em sequência, sobre o resultado anterior. É como o\n cliente compra de verdade: por look, não por item.

\n
03 · Minhas Provas\n
A prova vira vitrine
\n

Cada prova fica salva com preço e link para a PDP. O cliente volta para a galeria\n dele e compra de lá, dias depois.

\n
\n
${CHIP}
\n
\n\n \n
\n
Na prática
\n
\n

\n Duas dúvidas que hoje terminam em devolução.

\n

Se a peça combina com quem vai usar, e se ela\n combina com o resto do look. Nenhuma das duas a foto da modelo responde, e as duas\n acontecem no site do John John toda semana.

\n
\n
\n
\n
Decidir se a peça combina com você
\n
\n
Hoje · a foto da modelo
\n
    \n
  • O cliente vê a peça num corpo que não é o dele
    • \n
  • Tenta imaginar a cor e o comprimento em si mesmo
    • \n
  • Compra na dúvida — e devolve quando não gosta do que vê
    • \n
\n
\n
\n
Com o provador · segundos
\n
    \n
  • Manda uma foto de corpo inteiro, uma vez
    • \n
  • Escolhe a peça no catálogo e vê ela em si mesmo
    • \n
  • Só leva o que já viu vestido
    • \n
\n
\n
\n
\n
Montar um look
\n
\n
Hoje · quatro abas abertas
\n
    \n
  • Abre uma aba por produto e compara fotos de modelos diferentes
    • \n
  • Imagina a camisa com a calça sem nunca ver as duas juntas
    • \n
  • Leva uma peça e deixa o resto
    • \n
\n
\n
\n
Com o Meu Look · uma foto
\n
    \n
  • Marca as peças que quer provar juntas
    • \n
  • Prova as quatro na mesma foto, em sequência
    • \n
  • Compra o look inteiro pela galeria de provas
    • \n
\n
\n
\n
\n
\n\n \n
\n
Arquitetura e integração
\n
\n

\n Integramos por leitura. Nada do que funciona muda.

\n

O provador consulta a API pública de catálogo do\n johnjohndenim.com.br no momento da prova. Não há réplica de base, carga noturna nem\n alteração no tema da loja.

\n
\n
\n
\n
Sistemas do John John · intocados
\n
VTEX
\n
Catálogo, PDP, carrinho e checkout seguem como estão
\n
johnjohndenim.com.br
\n
O provador entra como um bloco no tema, sem reescrever a loja
\n
\n
leitura · API
\n
\n
Data² · engine de provador
\n
Leitura de catálogo
\n
Consulta as categorias reais — Camisas, Camisetas, Calças, Jaquetas,\n Vestidos — na hora da prova
\n
Provador de IA
\n
Checa a foto, decide o que remover e aplica a peça mantendo o\n enquadramento
\n
Painel de resultados
\n
Registra cada prova, cada clique em Comprar e os produtos mais\n provados
\n
\n
embed
\n
\n
Cliente final
\n
Navegador
\n
Dentro do site, na mesma sessão de compra
\n
Minhas Provas
\n
Galeria por e-mail, com preço e Comprar apontando para a PDP
\n
\n
\n
\n\n \n
\n
O teste
\n
\n

\n Trinta dias no ar, com três marcos.

\n

A janela começa no dia em que o provador entra no\n site. As datas de calendário são fixadas na confirmação desta proposta.

\n
\n
\n
Dia 1
No ar
\n
    \n
  • Provador publicado como embed no site do John John
    • \n
  • Geração de imagem liberada, até 2.000 provas
    • \n
  • Linha de base de conversão registrada
    • \n
  • Datapoints do funil chegando ao time do John John
    • \n
\n
Dia 15
Primeira leitura
\n
    \n
  • Volume de provas e taxa de conclusão
    • \n
  • Ajuste de prompt e de catálogo, se preciso
    • \n
  • Geração de imagem segue liberada até o dia 30
    • \n
\n
Dia 30
Análise e acordo
\n
    \n
  • Conversão de quem provou contra a média do site
    • \n
  • Cliques em Comprar depois da prova
    • \n
  • Resultados analisados e continuidade em acordo pago
    • \n
\n
\n
\n\n \n
\n
O que vamos medir
\n
\n

\n Dois números decidem a continuidade.

\n

Não medimos engajamento nem tempo de página. O\n teste responde se quem prova compra mais — e se a prova leva ao carrinho. O provador\n entra como embed no site, e a engine envia os datapoints do funil ao time do John John.

\n
\n
\n
Conversão de quem provou
\n

Taxa de conversão das sessões que geraram prova, contra a média do site no mesmo\n período.

\n
Linha de base: a conversão do site hoje, informada no dia 1
\n
Clique em Comprar após a prova
\n

Quantas provas terminam em clique para a página do produto. Mede intenção direta,\n não curiosidade.

\n
Registrado pela engine desde a primeira prova
\n
Como medimos
\n

Cada prova, cadastro e clique sai da engine como datapoint, com produto, horário e\n sessão. O funil é montado na ferramenta que o John John já usa, e o painel da Data²\n fica aberto durante os 30 dias para os dois lados conferirem o mesmo número.

\n
Formato combinado com o time: dataLayer, webhook ou export
\n
\n
\n\n \n
\n
Condições comerciais
\n
\n

\n Trinta dias liberados. Depois, um acordo pago.

\n

A construção e o teste correm por conta\n da Data², com a geração de imagem liberada por 30 dias, até 2.000 provas. No fim da\n janela os resultados são analisados e a continuidade vira um acordo pago.

\n
\n
\n
\n
Construção da POC
\n
Engine de provador com o catálogo John John ao vivo, Meu Look, Minhas\n Provas, painel de resultados e o bloco de embed para o site.
\n
R$ 0
\n
\n
Teste de 30 dias
\n
Acompanhamento durante a janela: ajuste de prompt, ajuste de catálogo e\n leitura dos números com o time do John John.
\n
R$ 0
\n
\n
Geração de imagem · 30 dias
\n
Até 2.000 provas na janela. Catálogo, storage e acessos incluídos.
\n
Liberada
\n
\n
Depois dos 30 dias
\n
Continuidade dimensionada pelo volume que a POC mostrou.
\n
Acordo pago
\n
\n

Ao se aproximar das 2.000 provas, a Data² avisa antes de qualquer\n cobrança. Evolução de escopo é orçada em separado.

\n
\n\n \n
\n
Responsabilidades
\n
\n

\n O que cada lado põe na mesa.

\n

A POC não depende de projeto de TI. Depende de\n cinco liberações pequenas — e cada uma tem dono. A única que precisa de agenda é a\n presença do time nas sessões de decisão.

\n
\n
\n
A Data² entrega\n
    \n
  • Engine no ar — provador, Meu Look e Minhas Provas publicados e monitorados
    • \n
  • Bloco de embed — um trecho para o time de front colar, sem alterar o tema
    • \n
  • Datapoints do funil — cada prova, cadastro e clique no formato combinado
    • \n
  • Painel de resultados — aberto ao John John durante os 30 dias
    • \n
  • Acompanhamento — ajuste de prompt e de catálogo dentro da janela
    • \n
\n
O John John libera\n
    \n
  • Time nas sessões de decisão — Tech, UI/UX e stakeholders presentes nos pontos de decisão da janela
    • \n
  • Publicação do embed — um contato de plataforma que coloca o bloco no ar
    • \n
  • Onde o provador entra — página de produto, home ou landing de campanha
    • \n
  • Linha de base de conversão — o número do site hoje, para a comparação
    • \n
  • Uso de imagem — aprovação para o cliente gerar e guardar a própria prova
    • \n
\n
\n
\n\n \n
${FUNDO}\n
\n \"\"\n

We build Data² while imagining a world where things just … work.

\n
\n \"Data²\"\n +${JJ('cbm-s')}\n
\n
gabi.carmo@data2.app · data2.app
\n
\n
\n\n
`\n\nfunction injectFonts(){\n try{\n if(!document.getElementById('akz-deck-fonts')){\n const st=document.createElement('style')\n st.id='akz-deck-fonts'\n st.textContent=FONT_CSS\n document.head.appendChild(st)\n }\n }catch(e){}\n}\n\nfunction initDeck(host){\n const wrap=host&&host.querySelector('.deckwrap'); if(!wrap) return\n if(wrap.dataset.init==='1') return\n wrap.dataset.init='1'\n const rootEl=wrap.querySelector('.deckroot')\n const slides=[].slice.call(rootEl.querySelectorAll('section'))\n const dots=wrap.querySelector('.dots'), counter=wrap.querySelector('.counter')\n dots.innerHTML=''\n const pad=n=>(n<10?'0':'')+n\n let cur=0\n counter.textContent=pad(1)+' — '+pad(slides.length)\n slides.forEach((s,i)=>{\n const a=document.createElement('a')\n a.href='#'+s.id; a.setAttribute('aria-label','Slide '+(i+1))\n dots.appendChild(a)\n })\n const links=[].slice.call(dots.children)\n if(links[0])links[0].classList.add('on')\n\n const setActive=i=>{\n if(i===cur)return\n cur=i\n counter.textContent=pad(cur+1)+' — '+pad(slides.length)\n links.forEach((l,k)=>l.classList.toggle('on',k===cur))\n wrap.classList.toggle('on-dark',slides[cur].hasAttribute('data-dark'))\n wrap.classList.toggle('last',cur===slides.length-1)\n }\n\n const revIO=new IntersectionObserver(es=>{\n es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');revIO.unobserve(e.target)}})\n },{root:rootEl,rootMargin:'0px 0px 12% 0px',threshold:.01})\n slides.forEach(s=>revIO.observe(s))\n\n const ratios=new Array(slides.length).fill(0)\n const actIO=new IntersectionObserver(es=>{\n es.forEach(e=>{const i=slides.indexOf(e.target);if(i>-1)ratios[i]=e.isIntersecting?e.intersectionRatio:0})\n let bi=cur,bv=-1\n ratios.forEach((r,i)=>{if(r>bv){bv=r;bi=i}})\n if(bv>0)setActive(bi)\n },{root:rootEl,threshold:[0,.15,.35,.55,.75,1]})\n slides.forEach(s=>actIO.observe(s))\n\n setTimeout(()=>{\n if(!rootEl.querySelector('section.in'))slides.forEach(s=>s.classList.add('in'))\n },500)\n\n const rm=(typeof matchMedia==='function')&&matchMedia('(prefers-reduced-motion: reduce)').matches\n const go=i=>{\n i=Math.max(0,Math.min(slides.length-1,i))\n slides[i].scrollIntoView({behavior:rm?'auto':'smooth'})\n }\n\n wrap.addEventListener('click',ev=>{\n const a=ev.target.closest&&ev.target.closest('a[href^=\"#\"]'); if(!a)return\n ev.preventDefault()\n const t=slides.find(s=>s.id===a.getAttribute('href').slice(1))\n if(t)t.scrollIntoView({behavior:rm?'auto':'smooth'})\n })\n\n window.addEventListener('keydown',e=>{\n if(!wrap.isConnected)return\n if(e.target&&/^(INPUT|TEXTAREA)$/.test(e.target.tagName))return\n if(e.key==='ArrowDown'||e.key==='ArrowRight'||e.key==='PageDown'||e.key===' '){e.preventDefault();go(cur+1)}\n if(e.key==='ArrowUp'||e.key==='ArrowLeft'||e.key==='PageUp'){e.preventDefault();go(cur-1)}\n if(e.key==='Home'){e.preventDefault();go(0)}\n if(e.key==='End'){e.preventDefault();go(slides.length-1)}\n })\n}\n\n/* Este player não re-renderiza de forma confiável quando d2.state muda: a senha\n gravava a sessão e o gate continuava na tela. Então a fase vive numa variável de\n módulo e a troca de tela é feita na mão, com innerHTML. */\nlet phase = 'gate'\n\nfunction mountGate(host){\n const card=host.querySelector('.gcard'); if(!card||card.dataset.wired==='1') return\n card.dataset.wired='1'\n const inp=host.querySelector('.ginput'), btn=host.querySelector('.gbtn')\n const check=()=>{\n if(!inp) return\n if(inp.value===PASS){\n try{sessionStorage.setItem('deckJohnJohnUnlocked','1')}catch(e){}\n showDeck(host)\n } else {\n const er=host.querySelector('.gerr')\n if(er)er.style.display='block'\n card.classList.remove('shake');void card.offsetWidth;card.classList.add('shake')\n if(inp.select)inp.select()\n }\n }\n if(btn)btn.addEventListener('click',check)\n if(inp)inp.addEventListener('keydown',e=>{if(e.key==='Enter')check()})\n}\n\nfunction showDeck(host){\n phase='deck'\n host.innerHTML=DECK\n initDeck(host)\n}\n\nfunction sync(d2,root){\n const host=(d2&&d2.$&&d2.$('.deckhost'))||((root||document).querySelector('.deckhost'))\n if(!host) return\n if(phase==='deck'){\n if(!host.querySelector('.deckwrap')) host.innerHTML=DECK\n initDeck(host)\n return\n }\n if(!host.querySelector('.gwrap')) host.innerHTML=GATE\n mountGate(host)\n}\n\nexport default {\n css:`\n:host,.deckwrap,.gwrap{\n --paper:#F5F4F0;\n --ink:#15161A;\n --muted:#6A6E77;\n --accent:#96570F;\n --accent-soft:#C89A4A;\n --ok:#2C6B4A;\n --bad:#A33427;\n --dark:#17253F;\n --dark-2:#22314F;\n --linha:rgba(21,22,26,.13);\n --mx:clamp(20px,4vw,56px);\n --ext:'AkzExt','Helvetica Neue',Helvetica,Arial,sans-serif;\n --lt:'AkzExtLight','Helvetica Neue',Helvetica,Arial,sans-serif;\n --sf:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;\n}\n*{box-sizing:border-box;margin:0;padding:0}\n.deckhost{display:block;width:100%;height:100%}\n\n/* ---------- arquitetura de scroll ---------- */\n.deckwrap{position:relative;height:100vh;height:100svh;overflow:hidden;\n background:var(--paper);color:var(--ink);font-family:var(--lt);\n -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}\n.deckroot{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;\n scroll-snap-type:y proximity;scroll-behavior:smooth;\n -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}\n\n/* ---------- chrome ---------- */\nheader{position:absolute;inset:0 0 auto 0;z-index:40;display:flex;\n justify-content:space-between;align-items:center;padding:22px var(--mx) 34px;\n pointer-events:none;background:linear-gradient(to bottom,var(--paper) 52%,rgba(245,244,240,0))}\n.deckwrap.on-dark header{background:none}\nheader img{height:16px;display:block;filter:brightness(0);opacity:.92}\nheader svg.cb{height:15px;width:auto;display:block;color:var(--ink)}\n.deckwrap.on-dark header img{filter:none;opacity:1}\n.deckwrap.on-dark header svg.cb{color:#fff}\n.counter{position:absolute;z-index:40;left:var(--mx);bottom:38px;font-family:var(--lt);\n font-size:11px;letter-spacing:.22em;color:var(--muted)}\n.deckwrap.on-dark .counter{color:rgba(255,255,255,.75)}\nnav.dots{position:absolute;z-index:40;right:clamp(14px,2.4vw,32px);top:50%;\n transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}\nnav.dots a{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.35;\n transition:opacity .3s,transform .3s}\nnav.dots a.on{opacity:1;transform:scale(1.5);background:var(--ink)}\n.deckwrap.on-dark nav.dots a,.deckwrap.on-dark nav.dots a.on{background:#fff}\n.hint{position:absolute;z-index:40;right:var(--mx);bottom:38px;font-size:11px;\n letter-spacing:.22em;color:var(--muted);text-transform:uppercase;transition:opacity .4s}\n.deckwrap.last .hint{opacity:0}\n.deckwrap.on-dark .hint{color:rgba(255,255,255,.6)}\n\n/* ---------- slide ---------- */\nsection{min-height:100vh;min-height:100svh;scroll-snap-align:start;position:relative;\n display:flex;flex-direction:column;justify-content:center;\n padding:clamp(84px,12vh,140px) clamp(20px,7vw,120px);overflow:hidden}\n.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);\n margin-bottom:clamp(20px,4vh,44px)}\n.eyebrow b{font-weight:400;color:var(--accent)}\n\n/* ---------- reveals ---------- */\n.rv{opacity:0;transform:translateY(26px);\n transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}\nsection.in .rv{opacity:1;transform:none}\nsection.in .rv:nth-child(2),section.in .d2{transition-delay:.12s}\nsection.in .rv:nth-child(3),section.in .d3{transition-delay:.24s}\nsection.in .rv:nth-child(4),section.in .d4{transition-delay:.36s}\nsection.in .rv:nth-child(5),section.in .d5{transition-delay:.48s}\nsection.in .rv:nth-child(6),section.in .d6{transition-delay:.6s}\n\n/* ---------- tipografia ---------- */\nh1,h2{font-family:var(--ext);font-weight:400;text-wrap:balance}\n.apoio{max-width:44ch;font-size:clamp(15px,1.5vw,19px);line-height:1.65;color:var(--muted)}\n.apoio::before{content:'';display:block;width:36px;height:2px;background:var(--accent);\n margin-bottom:18px}\n.apoio.destaque{color:var(--ink);font-size:clamp(16px,1.7vw,21px);line-height:1.6}\n.split{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(28px,6vw,90px);align-items:end}\n.split>*{min-width:0}\n@media(max-width:820px){.split{grid-template-columns:1fr}}\n\n.apoio,.lead,.pilar p,.onda li,.custos .row .d,.cond,.arq .box .bd,\n.kpis .k p,.klist li,.steps li{font-family:var(--sf)}\n\n:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n@media (prefers-reduced-motion:reduce){\n .deckroot{scroll-behavior:auto}\n .rv{opacity:1;transform:none;transition:none}\n}\n\n/* ---------- fundo gráfico ---------- */\n.bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:\n radial-gradient(ellipse 70% 60% at 18% 85%,rgba(35,71,127,.66),transparent 62%),\n radial-gradient(ellipse 50% 45% at 88% 12%,rgba(200,154,74,.24),transparent 60%),\n linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 55%,#0E1729 100%)}\n.bg .grid{position:absolute;inset:0;\n background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),\n linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);\n background-size:64px 64px;\n mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 30%,transparent 100%);\n -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 30%,transparent 100%)}\n.bg .mark{position:absolute;left:50%;transform:translateX(-50%);bottom:-7%;width:76%;height:auto;color:#fff;opacity:.05}\n@media(max-width:820px){.bg .mark{width:150%;bottom:4%}}\n\n/* ---------- capa ---------- */\n.capa{padding:clamp(72px,10vh,104px) var(--mx) clamp(62px,9vh,88px);background:var(--paper)}\n.capa .frame{position:relative;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;flex:1;\n min-height:min(58vh,640px);display:flex;align-items:center;justify-content:center;color:#fff}\n.capa .frame .mid{position:relative;z-index:1;display:flex;flex-direction:column;\n align-items:center;text-align:center;gap:30px}\n.capa .frame .sub{font-family:var(--lt);font-size:clamp(12px,1.3vw,16px);letter-spacing:.16em;\n text-transform:uppercase;opacity:.92}\n.capa .caption{display:flex;justify-content:space-between;align-items:baseline;gap:24px;\n padding:clamp(16px,2.6vh,26px) 0 0;flex-wrap:wrap}\n.capa .caption .frase-cap{font-family:var(--lt);font-size:clamp(14px,1.55vw,19px);\n color:var(--ink);letter-spacing:.01em}\n.capa .caption .meta{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}\n\n.lockup{display:flex;align-items:center;gap:clamp(18px,3vw,34px)}\n.lockup img{display:block}\n.lockup .d2m{height:clamp(30px,4.6vw,54px)}\n.lockup svg.cbm{height:clamp(26px,3.6vw,42px);width:auto;display:block;color:#fff}\n.lockup svg.cbm-s{height:21px;width:auto;display:block;color:#fff}\n.lockup .plus{font-family:var(--lt);font-size:clamp(22px,3vw,36px);line-height:1;opacity:.9}\n\n/* ---------- índice ---------- */\n.indice{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,90px);\n border-top:1px solid var(--linha)}\n.indice a{display:flex;align-items:baseline;gap:18px;padding:clamp(13px,2.2vh,22px) 0;\n border-bottom:1px solid var(--linha);text-decoration:none;color:var(--ink)}\n.indice a .n{font-family:var(--lt);font-size:11px;letter-spacing:.18em;color:var(--muted);\n min-width:28px;transition:color .25s}\n.indice a .t{font-family:var(--ext);font-size:clamp(16px,1.9vw,26px);line-height:1.25;\n transition:transform .3s cubic-bezier(.2,.6,.2,1)}\n.indice a:hover .n,.indice a:focus-visible .n{color:var(--accent)}\n.indice a:hover .t,.indice a:focus-visible .t{transform:translateX(6px)}\n@media(max-width:820px){.indice{grid-template-columns:1fr}}\n\n/* ---------- statement ---------- */\n.statement h1{font-size:clamp(34px,5.6vw,86px);line-height:1.08;letter-spacing:-.01em;max-width:16ch}\n\n/* ---------- pilares ---------- */\n.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,56px);\n border-top:1px solid var(--linha);padding-top:clamp(26px,5vh,52px)}\n.pilares.dois{grid-template-columns:1fr 1fr}\n.pilar .k{display:block;font-size:11px;letter-spacing:.26em;color:var(--accent);\n text-transform:uppercase;margin-bottom:18px}\n.pilar .t{font-family:var(--ext);font-size:clamp(17px,1.7vw,23px);line-height:1.3;margin-bottom:16px}\n.pilar p{font-size:14.5px;line-height:1.7;color:var(--muted)}\n@media(max-width:820px){.pilares,.pilares.dois{grid-template-columns:1fr}}\n\n/* ---------- chip de link ---------- */\n.chip{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(22px,3.6vh,34px);\n padding:11px 20px;border:1px solid var(--linha);border-radius:999px;font-family:var(--lt);\n font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);\n text-decoration:none;transition:border-color .25s}\n.chip:hover{border-color:var(--accent)}\n.chip.pend{color:var(--muted);border-style:dashed}\n\n/* ---------- hoje × depois ---------- */\n.comps{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px)}\n.comp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,48px);\n border-top:1px solid var(--linha);padding-top:clamp(14px,2.2vh,22px)}\n.comp .ctit{grid-column:1/-1;font-family:var(--ext);font-size:clamp(15px,1.6vw,20px)}\n.comp .lk{font-family:var(--lt);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;\n margin-bottom:12px}\n.comp .hj .lk{color:var(--bad)}\n.comp .cn .lk{color:var(--ok)}\n.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:9px}\n.steps li{font-size:12.5px;line-height:1.55;color:var(--muted);display:flex;gap:10px;align-items:baseline}\n.steps li::before{counter-increment:s;content:counter(s);font-family:var(--lt);font-size:10px;\n color:var(--bad);border:1px solid currentColor;border-radius:50%;width:17px;height:17px;\n display:flex;align-items:center;justify-content:center;flex:none;position:relative;top:2px}\n.comp .cn .steps li::before{color:var(--ok)}\n@media(max-width:820px){.comp{grid-template-columns:1fr}}\n\n/* ---------- arquitetura ---------- */\n.arq{display:grid;grid-template-columns:1fr 44px 1.15fr 44px 1fr;gap:clamp(10px,1.2vw,18px);\n align-items:stretch;border-top:1px solid var(--linha);padding-top:clamp(24px,4vh,44px)}\n.arq .col{display:flex;flex-direction:column;gap:10px}\n.arq .col-h{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);\n margin-bottom:8px;line-height:1.5}\n.arq .box{border:1px solid var(--linha);border-radius:14px;padding:13px 15px}\n.arq .box .bn{font-family:var(--ext);font-size:12.5px;line-height:1.4}\n.arq .box .bd{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}\n.arq .core{background:var(--dark);color:#fff;border-radius:18px;padding:clamp(16px,2.4vh,26px);\n display:flex;flex-direction:column;gap:12px;height:100%}\n.arq .core .ch{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft)}\n.arq .core .box{border-color:rgba(255,255,255,.25)}\n.arq .core .box .bd{color:rgba(255,255,255,.72)}\n.arq .link{position:relative;display:flex;align-items:center;justify-content:center}\n.arq .link::before{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:1px;\n background:var(--muted);opacity:.5}\n.arq .link span{position:relative;background:var(--paper);font-size:9px;letter-spacing:.2em;\n text-transform:uppercase;color:var(--muted);transform:rotate(-90deg);white-space:nowrap;padding:0 6px}\n@media(max-width:900px){\n .arq{grid-template-columns:1fr}\n .arq .link{min-height:34px}\n .arq .link::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}\n .arq .link span{transform:none}\n}\n\n/* ---------- frentes de escopo ---------- */\n.leg{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:clamp(18px,3vh,30px);\n font-family:var(--sf);font-size:12.5px;color:var(--muted)}\n.leg span{display:flex;align-items:center;gap:8px}\n.leg i{width:9px;height:9px;border-radius:50%;display:inline-block}\n.leg .ok{background:var(--ok)}\n.leg .nv{background:var(--accent)}\n.frentes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha);\n column-gap:clamp(24px,4vw,64px)}\n.frentes .f{border-bottom:1px solid var(--linha);padding:clamp(12px,1.8vh,18px) 0}\n.frentes .fn{font-family:var(--ext);font-size:clamp(13px,1.2vw,15.5px);margin-bottom:8px;\n display:flex;justify-content:space-between;gap:12px;align-items:baseline}\n.frentes .fn .ct{font-family:var(--sf);font-size:10.5px;color:var(--muted);white-space:nowrap;\n letter-spacing:.04em}\n.frentes .fi{display:flex;gap:8px;align-items:baseline;font-family:var(--sf);font-size:12px;\n line-height:1.5;color:var(--ink);padding:2.5px 0}\n.frentes .fi::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;\n position:relative;top:-1px}\n.frentes .fi.ok::before{background:var(--ok)}\n.frentes .fi.nv::before{background:var(--accent)}\n@media(max-width:900px){.frentes{grid-template-columns:1fr}}\n\n/* ---------- kpis ---------- */\n.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linha)}\n.kpis.seis{grid-template-columns:repeat(3,1fr)}\n.kpis .k{padding:clamp(16px,2.6vh,26px) 22px clamp(16px,2.6vh,26px) 0;border-bottom:1px solid var(--linha)}\n.kpis .k .kt{font-family:var(--ext);font-size:clamp(13.5px,1.25vw,16px);line-height:1.35}\n.kpis .k p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:8px}\n.kpis .k .kb{font-family:var(--sf);font-size:11.5px;color:var(--accent);margin-top:8px;line-height:1.5}\n@media(max-width:900px){.kpis,.kpis.seis{grid-template-columns:1fr 1fr}}\n@media(max-width:600px){.kpis,.kpis.seis{grid-template-columns:1fr}}\n\n/* ---------- cronograma ---------- */\n.ondas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);\n position:relative;padding-top:clamp(30px,5vh,52px)}\n.ondas::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--linha)}\n.onda{position:relative}\n.onda::before{content:'';position:absolute;top:calc(-1 * clamp(30px,5vh,52px));left:0;\n width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateY(-4px)}\n.onda .fase{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);\n margin-bottom:10px}\n.onda .t{font-family:var(--ext);font-size:clamp(17px,1.8vw,24px);margin-bottom:18px}\n.onda ul{list-style:none}\n.onda li{font-size:14px;line-height:1.6;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--linha)}\n@media(max-width:820px){.ondas{grid-template-columns:1fr}.onda::before{display:none}}\n\n/* ---------- investimento ---------- */\n.custos{border-top:1px solid var(--linha);max-width:880px}\n.custos .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;\n padding:clamp(10px,1.8vh,18px) 0;border-bottom:1px solid var(--linha)}\n.custos .row .t{font-family:var(--ext);font-size:clamp(15px,1.5vw,20px)}\n.custos .row .d{font-size:13px;color:var(--muted);margin-top:5px;max-width:56ch;line-height:1.6}\n.custos .row .v{font-family:var(--ext);font-size:clamp(19px,2.1vw,30px);\n font-variant-numeric:tabular-nums;white-space:nowrap}\n.custos .row .v em{font-style:normal;color:var(--muted);font-family:var(--lt);font-size:.55em;\n letter-spacing:.1em}\n.custos .total .v{color:var(--accent)}\n.cond{margin-top:clamp(14px,2.2vh,22px);font-size:13px;line-height:1.7;color:var(--muted);max-width:64ch}\n\n/* ---------- listas de compromisso ---------- */\n.klist{list-style:none;margin-top:6px}\n.klist li{font-size:13.5px;line-height:1.6;color:var(--ink);padding:10px 0;\n border-bottom:1px solid var(--linha)}\n.klist li b{font-weight:600}\n\n/* ---------- fechamento ---------- */\n.dark{color:#fff}\n.dark .mid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;\n text-align:center;gap:34px}\n.dark .sub{font-family:var(--lt);font-size:clamp(13px,1.4vw,17px);letter-spacing:.14em;\n text-transform:uppercase;opacity:.92}\n.fecho .mid{gap:44px}\n.fecho .frase{font-family:var(--lt);font-size:clamp(16px,1.8vw,25px);line-height:1.65;\n letter-spacing:.025em;max-width:44ch;text-wrap:balance}\n.fecho .frase i{font-style:normal;opacity:.65}\n.ring{width:clamp(54px,5.4vw,80px);height:auto;display:block}\n.ring.branco{filter:brightness(0) invert(1)}\n@media(max-width:820px){.fecho .frase{font-size:15px}}\n\n/* ---------- mobile ---------- */\n@media(max-width:820px){\n .deckroot{scroll-snap-type:y proximity}\n /* véu de papel sob o contador, como o do header: em slide mais alto que a tela\n o texto passaria por baixo do chrome */\n .deckwrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;z-index:35;\n pointer-events:none;background:linear-gradient(to top,var(--paper) 42%,rgba(245,244,240,0));\n height:78px}\n .deckwrap.on-dark::after{display:none}\n nav.dots{display:none}\n section{padding:72px 20px 82px}\n .counter,.hint{bottom:34px}\n .eyebrow{margin-bottom:18px}\n .capa{padding:60px var(--mx) 96px}\n .capa .frame{min-height:42svh}\n .capa .frame .mid{gap:18px;padding:0 20px}\n .capa .frame .sub{font-size:10.5px;letter-spacing:.12em;text-wrap:balance;line-height:1.7}\n .capa .lockup{gap:14px}\n .capa .lockup .d2m{height:25px}\n .capa .lockup svg.cbm{height:20px}\n .capa .lockup .plus{font-size:17px}\n .capa .caption{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 2px 0}\n .capa .caption .frase-cap{font-size:15px;line-height:1.5;max-width:34ch}\n}\n\n/* ---------- gate ---------- */\n.gwrap{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;\n align-items:center;justify-content:center;background:var(--dark);font-family:var(--lt)}\n.gcard{position:relative;z-index:1;background:var(--paper);border-radius:20px;\n padding:40px 36px 32px;width:min(380px,88vw);text-align:center;\n box-shadow:0 30px 80px rgba(0,0,0,.45)}\n.glock{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}\n.glock img{filter:brightness(0);display:block}\n.glock svg.gcb{height:17px;width:auto;display:block;color:var(--ink)}\n.glock span{font-family:var(--lt);font-size:15px;color:var(--ink)}\n.gsub{font-family:var(--lt);font-size:10px;letter-spacing:.24em;text-transform:uppercase;\n color:var(--muted);margin-bottom:26px}\n.ginput{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid var(--linha);\n border-radius:10px;background:#fff;font-size:15px;text-align:center;outline:none;\n font-family:var(--sf);color:var(--ink)}\n.ginput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,87,15,.16)}\n.gbtn{width:100%;margin-top:12px;padding:13px;border:none;border-radius:10px;\n background:var(--accent);color:#fff;font-size:12px;letter-spacing:.24em;\n text-transform:uppercase;cursor:pointer;font-family:var(--lt)}\n.gbtn:hover{filter:brightness(.9)}\n.gerr{display:none;color:var(--bad);font-size:13px;margin-top:12px;font-family:var(--sf)}\n.shake{animation:gsh .4s}\n@keyframes gsh{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}\n 40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}\n `,\n render(){ return `
` },\n mounted(d2,root){\n injectFonts()\n let ok=OPEN\n try{ if(sessionStorage.getItem('deckJohnJohnUnlocked')==='1') ok=true }catch(e){}\n try{ if((location.search||'').indexOf('k='+PASS)>-1) ok=true }catch(e){}\n if(ok) phase='deck'\n sync(d2,root)\n },\n updated(d2,root){ sync(d2,root) }\n}"}}}}}}}},{"_id":"6a9acde99e4fa8f6878f53b4","component":"data2-core-types@Component","system":"698a0c028a310c894be98bc8","params":{"extends":"data2-core-primitives@Block","component":"veste-deck-proposta","package":"veste-app","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"/* ───────────────────────────────────────────────────────────────────────────\n Deck — Proposta comercial · Veste S/A (grupo)\n Provador virtual com IA para Le Lis, John John, Bo.Bô, Individual e Dudalina\n Kit: apresentacao-data2 (Akzidenz Ext + logo oficial Data²) · 18 slides\n Recriado a partir de proposta-veste.people-gabi-carmo, com o discurso\n corrigido: a prova NÃO promete tamanho/caimento; o número da POC é\n conversão de visitantes; troca/devolução é a leitura pós-janela.\n ─────────────────────────────────────────────────────────────────────────── */\n\nconst SYS = 'veste-app'\nconst F_EXT = `https://${SYS}.data2.media/file/iNSYotTKA1cv_fJAa1K4E`\nconst F_LT = `https://${SYS}.data2.media/file/6bERTVll1aRDU3Xo9NghW`\nconst LD2 = `https://${SYS}.data2.media/file/WLXAyS4HOHvTFytXu7S4P`\nconst RING = `https://${SYS}.data2.media/file/TA2eFNVhnB7dlI9EPAEWb`\nconst VESTE = `https://${SYS}.data2.media/file/F5sYItInqXvAlz2_oR4AO`\nconst RUSH = `https://${SYS}.data2apis.com/rush`\n\nconst POC_URL = 'https://veste.people-gabi-carmo.next.data2.app/'\nconst PASS = 'veste2026'\nconst OPEN = false\n\nconst FONT_CSS = `@font-face{font-family:'AkzExt';src:url(${F_EXT}) format('opentype');font-weight:400;font-display:block}@font-face{font-family:'AkzExtLight';src:url(${F_LT}) format('opentype');font-weight:300;font-display:block}`\n\nconst VS = (cls) => `\"Veste\"`\nconst FUNDO = `
\"\"
`\n\nconst esc = (s) => String(s == null ? '' : s).replace(/&/g, '&').replace(//g, '>')\nconst fmtDT = (iso) => { try { return new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) } catch (e) { return '—' } }\nconst shortDev = (ua) => {\n ua = String(ua || '')\n const os = /iphone|ipad/i.test(ua) ? 'iOS' : /android/i.test(ua) ? 'Android' : /windows/i.test(ua) ? 'Windows' : /macintosh|mac os x/i.test(ua) ? 'Mac' : /linux/i.test(ua) ? 'Linux' : '—'\n const br = /edg/i.test(ua) ? 'Edge' : /opr|opera/i.test(ua) ? 'Opera' : /chrome/i.test(ua) ? 'Chrome' : /firefox/i.test(ua) ? 'Firefox' : /safari/i.test(ua) ? 'Safari' : ''\n return os + (br ? ' · ' + br : '')\n}\n\nconst GATE = `
${FUNDO}\n
\n
\"Data²\"+${VS('gvs')}
\n
Proposta · Veste S/A
\n \n \n
Senha incorreta — tente novamente.
\n
`\n\nconst DECK = `
\n
\"Data²\"${VS('hvs')}
\n
01 — 17
\n
↓ navegue
\n\n
\n\n \n
\n
${FUNDO}\n
\n
\n \"Data²\"+${VS('vsm')}\n
\n
Provador virtual com IA · Proposta comercial
\n
Le Lis · John John · Bo.Bô · Individual · Dudalina
\n
\n
\n
\n
We build Data² while imagining a world where things just … work.
\n
Proposta · Setembro 2026
\n
\n
\n\n \n
\n
Índice
\n
\n 01A proposta\n 02O que a marca perde hoje\n 03O provador\n 04O que a prova responde\n 05Arquitetura e integração\n 06Escopo da entrega\n 07A POC no período\n 08O que vamos medir\n 09Condições comerciais\n 10Depois do período · imagem\n 11Depois do período · plataforma\n 12Custo de operação por tier\n 13Responsabilidades\n 14Fora do escopo\n
\n
\n\n \n
\n
A proposta · Veste S/A
\n
\n

Um provador virtual para as cinco marcas do grupo.

\n

Le Lis, John John, Bo.Bô, Individual e Dudalina em uma engine\n só. Sem custo de sprint e com 30 dias de geração de imagem liberada. Esta proposta define\n o que a Data² entrega, qual número a POC precisa mover e o que passa a valer depois.

\n
\n
\n\n \n
\n
O problema
\n
\n

\n A peça só é experimentada depois de comprada.

\n

Quem compra online decide pela foto da modelo. A\n primeira vez que vê a peça em si mesmo é quando o pedido chega em casa. Três coisas\n nascem daí.

\n
\n
\n
01 · Troca e devolução\n
O que volta para o CD
\n

Logística reversa, peça que retorna ao estoque fora de estação e crédito que o\n cliente gasta onde quiser. A devolução cobra duas vezes: o frete e a margem da peça\n parada.

\n
02 · A peça que não é usada\n
Comprou e não veste
\n

Nem toda compra frustrada volta. Parte fica no armário com a etiqueta inteira, e a\n marca fica registrada como a que não deu certo. Não aparece no índice de devolução —\n aparece na recompra que não acontece.

\n
03 · O visitante que sai sem comprar\n
A maior parte do tráfego
\n

A maioria de quem entra no site sai sem levar nada. Uma parte dessa saída é a dúvida\n sobre como a peça fica nele — e a foto da modelo não responde isso.

\n
\n
\n\n \n
\n
O provador
\n
\n

\n A peça na foto do próprio cliente, em segundos.

\n

Ele manda uma foto, escolhe a peça no catálogo da\n marca e vê o resultado. Cada prova fica salva no nome dele, com o preço e o caminho de\n volta para a página do produto.

\n
\n
\n
01 · Provador\n
A peça no lugar da que ele está usando
\n

A roupa atual é removida antes da troca, e o enquadramento da foto original é\n preservado — sem cortar cabeça nem pés.

\n
02 · Meu Look\n
Várias peças, uma foto
\n

Camisa, calça e alfaiataria provadas em sequência, sobre o resultado anterior. É como\n o cliente compra de verdade: por look, não por item.

\n
03 · Minhas Provas\n
A prova vira vitrine
\n

Cada prova fica salva com preço e link para a página do produto. O cliente volta para\n a galeria dele e compra de lá, dias depois.

\n
\n
Ver o provador funcionando
\n
\n\n \n
\n
Limites da prova
\n
\n

\n O provador mostra a peça em você. Ele não mede o seu corpo.

\n

A prova responde se a peça combina com\n quem está na foto. Ela não diz qual é o seu tamanho, e esta proposta não vende isso. A\n distinção é o que faz o resultado do período ser discutível com número na mesa.

\n
\n
\n
A prova responde\n
    \n
  • Como fica em mim — a peça no corpo do cliente, e não no da modelo
    • \n
  • Cor, comprimento e proporção — o que a foto de catálogo achata
    • \n
  • A peça dentro de um look — a camisa junto da calça que ele já escolheu
    • \n
  • Se ele quer levar — a decisão sai da imaginação e vai para a tela
    • \n
\n
A prova não responde\n
    \n
  • Qual é o tamanho — P, M ou G continua sendo tabela de medidas
    • \n
  • Se vai apertar ou sobrar — cintura, manga, comprimento de perna
    • \n
  • Como o tecido cai em movimento — peso e caimento real da peça
    • \n
  • Nada disso entra na leitura — o número do período é conversão, não caimento
    • \n
\n
\n
\n\n \n
\n
Arquitetura e integração
\n
\n

\n Integramos por leitura. Nada do que funciona muda.

\n

O provador consulta a API de catálogo de cada\n marca no momento da prova. Não há réplica de base, carga noturna nem alteração no tema\n das lojas.

\n
\n
\n
\n
Sistemas da Veste · intocados
\n
VTEX
\n
Catálogo, PDP, carrinho e checkout seguem como estão
\n
Sites das cinco marcas
\n
O provador entra como um bloco no tema, sem reescrever a loja
\n
\n
leitura · API
\n
\n
Data² · engine de provador
\n
Leitura de catálogo
\n
Consulta as categorias reais de cada marca na hora da prova
\n
Provador de IA
\n
Checa a foto, decide o que remover e aplica a peça mantendo o\n enquadramento
\n
Painel de resultados
\n
Registra cada prova, cada clique em Comprar e os produtos mais\n provados
\n
\n
embed
\n
\n
Cliente final
\n
Navegador
\n
Dentro do site, na mesma sessão de compra
\n
Minhas Provas
\n
Galeria por e-mail, com preço e Comprar apontando para a PDP
\n
\n
\n
\n\n \n
\n
Escopo da entrega
\n
\n

\n Uma engine, cinco camadas de marca.

\n

A engine de provador está publicada e testada com\n catálogo real. A sprint acrescenta a camada de cada marca — catálogo, prompt calibrado e\n o bloco de embed.

\n
\n
\n Validado — já roda na engine\n Novo — específico das marcas da Veste\n
\n
\n
\n
Provador 3 validados · 1 novo
\n
Checagem da foto antes de gerar
\n
Remove a peça atual em vez de sobrepor
\n
Preserva o enquadramento — não corta cabeça nem pés
\n
Prompt calibrado por marca, do jeans à alfaiataria
\n
\n
\n
Catálogo 1 validado · 2 novos
\n
Leitura ao vivo, sem réplica de base
\n
Categorias das cinco marcas, masculino e feminino
\n
Filtro que deixa fora calçados, acessórios e cartões
\n
\n
\n
Meu Look e Minhas Provas 3 validados
\n
Provar várias peças em sequência na mesma foto
\n
Galeria por e-mail, com preço e Comprar
\n
Cliente remove a prova que não quiser guardar
\n
\n
\n
Painel de resultados 2 validados · 2 novos
\n
Provas geradas, conclusão e tempo de geração
\n
Cliques em Comprar e produtos mais provados
\n
Comparação contra a linha de base de cada site
\n
Visão consolidada do grupo, marca por marca
\n
\n
\n
\n\n \n
\n
O período de prova
\n
\n

\n Trinta dias no ar, com três marcos de leitura.

\n

A janela começa no dia em que o provador entra no\n primeiro site. As datas de calendário são fixadas na confirmação desta proposta.

\n
\n
\n
Dia 1
No ar
\n
    \n
  • Provador publicado no site da primeira marca
    • \n
  • Geração de imagem liberada, até 2.000 provas
    • \n
  • Linha de base de conversão registrada com o time da Veste
    • \n
  • Painel medindo desde a primeira prova
    • \n
\n
Dia 15
Primeira leitura
\n
    \n
  • Volume de provas e taxa de conclusão
    • \n
  • Ajuste de prompt e de catálogo, se preciso
    • \n
  • Extensão para as marcas seguintes
    • \n
\n
Dia 30
Análise e acordo
\n
    \n
  • Conversão de quem provou contra a média do site
    • \n
  • Cliques em Comprar depois da prova
    • \n
  • Resultados analisados e continuidade em acordo pago
    • \n
\n
\n
\n\n \n
\n
O que vamos medir
\n
\n

\n A conversão de visitantes é o número que a POC prova.

\n

Tempo de página e engajamento ficam de fora. O\n período responde se quem prova compra mais. A troca é a segunda leitura, e ela só fecha\n depois da janela de devolução da Veste.

\n
\n
\n
Conversão de visitantes
\n

Taxa de conversão das sessões que geraram prova, contra a média do site no mesmo\n período. É o que fica provado dentro dos 30 dias.

\n
Linha de base: a conversão do site hoje, informada no dia 1
\n
Clique em Comprar após a prova
\n

Quantas provas terminam em clique para a página do produto. Mede intenção direta, não\n curiosidade.

\n
Registrado pela engine desde a primeira prova
\n
Troca e devolução
\n

Cada pedido que veio de uma prova fica marcado. Quando a janela de devolução fecha, o\n índice de troca desses pedidos é comparado com o do resto da base.

\n
Não fecha em 30 dias — a marcação sai pronta da POC
\n
Como medimos
\n

Cada prova, cadastro e clique é gravado com produto e horário. O painel fica aberto\n durante o período, para os dois lados olharem o mesmo número.

\n
\n
\n\n \n
\n
Condições comerciais
\n
\n

\n Trinta dias liberados. Depois, um acordo pago.

\n

A construção e o teste correm por conta\n da Data², com a geração de imagem liberada por 30 dias, até 2.000 provas. No fim da\n janela os resultados são analisados e a continuidade vira um acordo pago.

\n
\n
\n
\n
Construção da POC
\n
Engine de provador com o catálogo das cinco marcas ao vivo, Meu Look,\n Minhas Provas, painel de resultados e o bloco de embed para os sites.
\n
R$ 0
\n
\n
Teste no período
\n
Acompanhamento durante a janela: ajuste de prompt, ajuste de catálogo e\n leitura dos números com o time da Veste.
\n
R$ 0
\n
\n
Geração de imagem · 30 dias
\n
Até 2.000 provas na janela. Catálogo, storage e acessos incluídos.
\n
Liberada
\n
\n
Depois dos 30 dias
\n
Continuidade dimensionada pelo volume que a POC mostrou.
\n
Acordo pago
\n
\n

Ao se aproximar das 2.000 provas, a Data² avisa antes de qualquer\n cobrança. Evolução de escopo é orçada em separado.

\n
\n\n \n
\n
Depois do período · 01
\n
\n

\n Cada prova gera uma imagem.

\n

Quando a janela fecha, a imagem passa a ser\n cobrada. Quanto maior o volume mensal contratado, menor o preço por imagem. Valores em\n US$.

\n
\n
\n \n \n \n \n \n \n
FaixaMínimo mensalDescontoPreço/imagemSpend mínimo/mêsPreço cheio equivalente
Sem compromisso—0%$0,090——
Tier 15.000 img50%$0,045$225/mês$450
Tier 215.000 img60%$0,036$540/mês$1.350
Tier 350.000 img70%$0,027$1.350/mês$4.500
\n

O tier é escolhido pelo volume mensal que a Veste se compromete a\n consumir. Abaixo do mínimo, vale o preço cheio da faixa sem compromisso.

\n
\n\n \n
\n
Depois do período · 02
\n
\n

\n O que o provador consome da plataforma.

\n

Custos de uso da plataforma Data² para operar o\n provador depois do período, conforme a tabela pública. Valores em US$.

\n
\n
\n \n \n \n \n \n \n \n
ItemPreço
Tokens de IA · análise da fotoUS$ 0,0001 / token
Escrita de dadosUS$ 0,0005 / registro
Leitura de dadosUS$ 0,00001 / registro
Rush · listener (backend)US$ 0,0001 / invocação
Connect · request (catálogo)US$ 0,0001 / request
Media · armazenamento das provasUS$ 1,00 / GB
\n Ver a tabela completa em data2.app/pricing\n
\n\n \n
\n
Depois do período · 03
\n
\n

\n Custo de operação estimado, mês a mês.

\n

Imagem e plataforma somadas, por tier. A conta é\n estimada — o que vale na fatura é o volume medido.

\n
\n
\n \n \n \n \n
TierProvas/mêsImagemPlataforma Data²Total/mês
Tier 15.000$225~$549~$774
Tier 215.000$540~$1.648~$2.188
Tier 350.000$1.350~$5.493~$6.843
\n

Plataforma estimada com base em cerca de 1.000 tokens de IA por prova, na\n análise da foto — perto de 90% do custo de plataforma e a principal alavanca. Enviando a\n foto de análise reduzida (~500 tokens por prova), essa parcela cai aproximadamente pela\n metade. Valores em US$, conforme data2.app/pricing.

\n
\n\n \n
\n
Responsabilidades
\n
\n

\n O que cada lado põe na mesa.

\n

A entrega não depende de projeto de TI. Depende de\n quatro liberações pequenas — e cada uma tem dono.

\n
\n
\n
A Data² entrega\n
    \n
  • Engine no ar — provador, Meu Look e Minhas Provas publicados e monitorados
    • \n
  • Bloco de embed — um trecho para o time de front colar, sem alterar o tema
    • \n
  • Painel de resultados — aberto à Veste durante o período
    • \n
  • Acompanhamento — ajuste de prompt e de catálogo dentro da janela
    • \n
\n
A Veste libera\n
    \n
  • Publicação do embed — um contato de plataforma por marca que coloca o bloco no ar
    • \n
  • Onde o provador entra — página de produto, home ou landing de campanha
    • \n
  • Linha de base de conversão — o número de cada site hoje, para a comparação
    • \n
  • Uso de imagem — aprovação para o cliente gerar e guardar a própria prova
    • \n
\n
\n
\n\n \n
\n
Limites
\n
\n

\n O que esta proposta não faz.

\n

Dizer o limite agora é o que faz o período\n terminar sem discussão. Nada da coluna da direita está contratado aqui, e evolução de\n escopo é orçada em separado.

\n
\n
\n
Fora do escopo\n
    \n
  • Recomendação de tamanho — a prova não mede o corpo do cliente
    • \n
  • Integração com ERP, OMS ou estoque — o provador lê catálogo, e só
    • \n
  • App nativo — o provador roda no navegador
    • \n
  • Fechar o ciclo de troca em 30 dias — a janela de devolução é mais longa
    • \n
\n
Fica para depois do período\n
    \n
  • Provador na página de produto de toda a base
    • \n
  • Leitura de troca com a janela de devolução fechada
    • \n
  • Campanha com a prova que o próprio cliente gerou
    • \n
  • Provador na loja física
    • \n
\n
\n
\n\n \n
${FUNDO}\n
\n \"\"\n

We build Data² while imagining a world where things just … work.

\n
\n \"Data²\"\n +${VS('vsm-s')}\n
\n
gabi.carmo@data2.app · +55 (11) 98962-6170 · data2.app
\n
\n
\n\n
`\n\nconst acessosHTML = (st) => {\n const status = st.status || 'locked'\n let inner\n if (status === 'loading') {\n inner = `
Carregando…
`\n } else if (status !== 'done') {\n inner = `
\n \n \n ${st.error ? '
' + esc(st.error) + '
' : ''}\n
`\n } else {\n const ac = st.ac || {}\n const recent = ac.recent || []\n const seen = {}\n recent.forEach(r => { if (r && r.clientId) seen[r.clientId] = 1 })\n const rows = recent.slice(0, 60).map(r => `${fmtDT(r.createdAt)}${r.event === 'login' ? 'Entrou com a senha' : 'Abriu'}${esc(shortDev(r.device))}${esc(String(r.clientId || '').slice(0, 10))}`).join('')\n inner = `
\n
Aberturas
${ac.opens || 0}
\n
Entradas com a senha
${ac.logins || 0}
\n
Dispositivos distintos
${Object.keys(seen).length}
\n
\n
Acessos recentes
\n
${rows || ''}
QuandoEventoDispositivoID do navegador
Sem acessos ainda.———
\n `\n }\n return `
\n
\"Data²\"${VS('hvs')}
\n
\n
Monitoramento · Proposta Veste S/A
\n

Quem acessou

\n ${inner}\n
\n
`\n}\n\nfunction injectFonts() {\n try {\n if (!document.getElementById('akz-deck-fonts')) {\n const st = document.createElement('style')\n st.id = 'akz-deck-fonts'\n st.textContent = FONT_CSS\n document.head.appendChild(st)\n }\n } catch (e) {}\n}\n\nfunction initDeck(host) {\n const wrap = host && host.querySelector('.deckwrap'); if (!wrap) return\n if (wrap.dataset.init === '1') return\n wrap.dataset.init = '1'\n const rootEl = wrap.querySelector('.deckroot')\n const slides = [].slice.call(rootEl.querySelectorAll('section'))\n const dots = wrap.querySelector('.dots'), counter = wrap.querySelector('.counter')\n dots.innerHTML = ''\n const pad = n => (n < 10 ? '0' : '') + n\n let cur = 0\n counter.textContent = pad(1) + ' — ' + pad(slides.length)\n slides.forEach((s, i) => {\n const a = document.createElement('a')\n a.href = '#' + s.id; a.setAttribute('aria-label', 'Slide ' + (i + 1))\n dots.appendChild(a)\n })\n const links = [].slice.call(dots.children)\n if (links[0]) links[0].classList.add('on')\n\n const setActive = i => {\n if (i === cur) return\n cur = i\n counter.textContent = pad(cur + 1) + ' — ' + pad(slides.length)\n links.forEach((l, k) => l.classList.toggle('on', k === cur))\n wrap.classList.toggle('on-dark', slides[cur].hasAttribute('data-dark'))\n wrap.classList.toggle('last', cur === slides.length - 1)\n }\n\n const revIO = new IntersectionObserver(es => {\n es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); revIO.unobserve(e.target) } })\n }, { root: rootEl, rootMargin: '0px 0px 12% 0px', threshold: .01 })\n slides.forEach(s => revIO.observe(s))\n\n const ratios = new Array(slides.length).fill(0)\n const actIO = new IntersectionObserver(es => {\n es.forEach(e => { const i = slides.indexOf(e.target); if (i > -1) ratios[i] = e.isIntersecting ? e.intersectionRatio : 0 })\n let bi = cur, bv = -1\n ratios.forEach((r, i) => { if (r > bv) { bv = r; bi = i } })\n if (bv > 0) setActive(bi)\n }, { root: rootEl, threshold: [0, .15, .35, .55, .75, 1] })\n slides.forEach(s => actIO.observe(s))\n\n setTimeout(() => {\n if (!rootEl.querySelector('section.in')) slides.forEach(s => s.classList.add('in'))\n }, 500)\n\n const rm = (typeof matchMedia === 'function') && matchMedia('(prefers-reduced-motion: reduce)').matches\n const go = i => {\n i = Math.max(0, Math.min(slides.length - 1, i))\n slides[i].scrollIntoView({ behavior: rm ? 'auto' : 'smooth' })\n }\n\n wrap.addEventListener('click', ev => {\n const a = ev.target.closest && ev.target.closest('a[href^=\"#\"]'); if (!a) return\n ev.preventDefault()\n const t = slides.find(s => s.id === a.getAttribute('href').slice(1))\n if (t) t.scrollIntoView({ behavior: rm ? 'auto' : 'smooth' })\n })\n\n window.addEventListener('keydown', e => {\n if (!wrap.isConnected) return\n if (e.target && /^(INPUT|TEXTAREA)$/.test(e.target.tagName)) return\n if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); go(cur + 1) }\n if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(cur - 1) }\n if (e.key === 'Home') { e.preventDefault(); go(0) }\n if (e.key === 'End') { e.preventDefault(); go(slides.length - 1) }\n })\n}\n\n/* Este player não re-renderiza de forma confiável quando d2.state muda: a senha\n gravava a sessão e o gate continuava na tela. Então a fase vive numa variável\n de módulo e a troca de tela é feita na mão, com innerHTML. */\nlet phase = 'gate'\nlet acState = { status: 'locked' }\nlet clientId = ''\n\nfunction cid() {\n if (clientId) return clientId\n try {\n clientId = window.localStorage.getItem('veste_prop_cid') || ''\n if (!clientId) {\n clientId = 'c' + Date.now().toString(36) + Math.floor(Math.random() * 1e6).toString(36)\n window.localStorage.setItem('veste_prop_cid', clientId)\n }\n } catch (e) { clientId = 'c-anon' }\n return clientId\n}\n\nfunction track(event) {\n try {\n /* probe automatizado (inspect_code_component, crawler headless) não é\n abertura de proposta — não suja o painel de acessos */\n if (navigator.webdriver === true) return\n fetch(RUSH + '/veste-prop-track', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n event: event,\n clientId: cid(),\n device: String(navigator.userAgent || '').slice(0, 180),\n ref: String(document.referrer || '')\n })\n }).catch(() => {})\n } catch (e) {}\n}\n\nfunction paintAcessos(host) {\n host.innerHTML = acessosHTML(acState)\n const wire = (sel, evt, fn) => { const el = host.querySelector(sel); if (el) el.addEventListener(evt, fn) }\n wire('.acbtn', 'click', () => {\n const el = host.querySelector('.acpass')\n const pw = (el && el.value) || ''\n if (!pw) { acState = { status: 'locked', error: 'Digite a senha.' }; paintAcessos(host); return }\n loadAcessos(host, pw)\n })\n wire('.acpass', 'keydown', (e) => { if (e.key === 'Enter') { const b = host.querySelector('.acbtn'); if (b) b.click() } })\n wire('.acrefresh', 'click', () => {\n let pw = ''\n try { pw = window.localStorage.getItem('veste_prop_admin') || '' } catch (e) {}\n loadAcessos(host, pw)\n })\n}\n\nfunction loadAcessos(host, pw) {\n acState = { status: 'loading' }\n paintAcessos(host)\n fetch(RUSH + '/veste-prop-acessos', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ password: pw })\n })\n .then(r => r.json())\n .then(r => {\n const s = (r && r.data) ? r.data : r\n if (!s || s.ok !== true) {\n try { window.localStorage.removeItem('veste_prop_admin') } catch (e) {}\n acState = { status: 'locked', error: pw ? 'Senha incorreta.' : null }\n } else {\n try { window.localStorage.setItem('veste_prop_admin', pw) } catch (e) {}\n acState = { status: 'done', ac: s }\n }\n paintAcessos(host)\n })\n .catch(err => {\n acState = { status: 'locked', error: 'Falha ao carregar: ' + String((err && err.message) || err) }\n paintAcessos(host)\n })\n}\n\nfunction mountGate(host) {\n const card = host.querySelector('.gcard'); if (!card || card.dataset.wired === '1') return\n card.dataset.wired = '1'\n const inp = host.querySelector('.ginput'), btn = host.querySelector('.gbtn')\n const check = () => {\n if (!inp) return\n if (inp.value === PASS) {\n try { sessionStorage.setItem('deckVesteUnlocked', '1') } catch (e) {}\n track('login')\n showDeck(host)\n } else {\n const er = host.querySelector('.gerr')\n if (er) er.style.display = 'block'\n card.classList.remove('shake'); void card.offsetWidth; card.classList.add('shake')\n if (inp.select) inp.select()\n }\n }\n if (btn) btn.addEventListener('click', check)\n if (inp) inp.addEventListener('keydown', e => { if (e.key === 'Enter') check() })\n}\n\nfunction showDeck(host) {\n phase = 'deck'\n host.innerHTML = DECK\n initDeck(host)\n}\n\nfunction sync(d2, root) {\n const host = (d2 && d2.$ && d2.$('.deckhost')) || ((root || document).querySelector('.deckhost'))\n if (!host) return\n if (phase === 'acessos') {\n if (!host.querySelector('.acwrap')) paintAcessos(host)\n return\n }\n if (phase === 'deck') {\n if (!host.querySelector('.deckwrap')) host.innerHTML = DECK\n initDeck(host)\n return\n }\n if (!host.querySelector('.gwrap')) host.innerHTML = GATE\n mountGate(host)\n}\n\nexport default {\n css: `\n:host,.deckwrap,.gwrap,.acwrap{\n --paper:#F5F4F0;\n --ink:#15161A;\n --muted:#6A6E77;\n --accent:#96570F;\n --accent-soft:#C89A4A;\n --ok:#2C6B4A;\n --bad:#A33427;\n --dark:#17253F;\n --dark-2:#22314F;\n --linha:rgba(21,22,26,.13);\n --mx:clamp(20px,4vw,56px);\n --ext:'AkzExt','Helvetica Neue',Helvetica,Arial,sans-serif;\n --lt:'AkzExtLight','Helvetica Neue',Helvetica,Arial,sans-serif;\n --sf:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;\n}\n*{box-sizing:border-box;margin:0;padding:0}\n.deckhost{display:block;width:100%;height:100%}\n\n/* ---------- arquitetura de scroll ---------- */\n.deckwrap{position:relative;height:100vh;height:100svh;overflow:hidden;\n background:var(--paper);color:var(--ink);font-family:var(--lt);\n -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}\n.deckroot{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;\n scroll-snap-type:y proximity;scroll-behavior:smooth;\n -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}\n\n/* ---------- chrome ---------- */\nheader{position:absolute;inset:0 0 auto 0;z-index:40;display:flex;\n justify-content:space-between;align-items:center;padding:22px var(--mx) 34px;\n pointer-events:none;background:linear-gradient(to bottom,var(--paper) 52%,rgba(245,244,240,0))}\n.deckwrap.on-dark header{background:none}\nheader img.d2{height:16px;display:block;filter:brightness(0);opacity:.92}\nheader img.hvs{height:13px;width:auto;display:block;opacity:.92}\n.deckwrap.on-dark header img.d2{filter:none;opacity:1}\n.deckwrap.on-dark header img.hvs{filter:brightness(0) invert(1);opacity:1}\n.counter{position:absolute;z-index:40;left:var(--mx);bottom:38px;font-family:var(--lt);\n font-size:11px;letter-spacing:.22em;color:var(--muted)}\n.deckwrap.on-dark .counter{color:rgba(255,255,255,.75)}\nnav.dots{position:absolute;z-index:40;right:clamp(14px,2.4vw,32px);top:50%;\n transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}\nnav.dots a{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.35;\n transition:opacity .3s,transform .3s}\nnav.dots a.on{opacity:1;transform:scale(1.5);background:var(--ink)}\n.deckwrap.on-dark nav.dots a,.deckwrap.on-dark nav.dots a.on{background:#fff}\n.hint{position:absolute;z-index:40;right:var(--mx);bottom:38px;font-size:11px;\n letter-spacing:.22em;color:var(--muted);text-transform:uppercase;transition:opacity .4s}\n.deckwrap.last .hint{opacity:0}\n.deckwrap.on-dark .hint{color:rgba(255,255,255,.6)}\n\n/* ---------- slide ---------- */\nsection{min-height:100vh;min-height:100svh;scroll-snap-align:start;position:relative;\n display:flex;flex-direction:column;justify-content:center;\n padding:clamp(84px,12vh,140px) clamp(20px,7vw,120px)}\n.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);\n margin-bottom:clamp(20px,4vh,44px)}\n.eyebrow b{font-weight:400;color:var(--accent)}\n\n/* ---------- reveals ---------- */\n.rv{opacity:0;transform:translateY(26px);\n transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}\nsection.in .rv{opacity:1;transform:none}\nsection.in .rv:nth-child(2),section.in .d2{transition-delay:.12s}\nsection.in .rv:nth-child(3),section.in .d3{transition-delay:.24s}\nsection.in .rv:nth-child(4),section.in .d4{transition-delay:.36s}\nsection.in .rv:nth-child(5),section.in .d5{transition-delay:.48s}\nsection.in .rv:nth-child(6),section.in .d6{transition-delay:.6s}\n\n/* ---------- tipografia ---------- */\nh1,h2{font-family:var(--ext);font-weight:400;text-wrap:balance}\n.apoio{max-width:44ch;font-size:clamp(15px,1.5vw,19px);line-height:1.65;color:var(--muted)}\n.apoio::before{content:'';display:block;width:36px;height:2px;background:var(--accent);\n margin-bottom:18px}\n.apoio.destaque{color:var(--ink);font-size:clamp(16px,1.7vw,21px);line-height:1.6}\n.split{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(28px,6vw,90px);align-items:end}\n.split>*{min-width:0}\n@media(max-width:820px){.split{grid-template-columns:1fr}}\n\n.apoio,.lead,.pilar p,.onda li,.custos .row .d,.cond,.arq .box .bd,\n.kpis .k p,.klist li,.tb{font-family:var(--sf)}\n\n:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n@media (prefers-reduced-motion:reduce){\n .deckroot{scroll-behavior:auto}\n .rv{opacity:1;transform:none;transition:none}\n}\n\n/* ---------- fundo gráfico ---------- */\n.bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:\n radial-gradient(ellipse 70% 60% at 18% 85%,rgba(35,71,127,.66),transparent 62%),\n radial-gradient(ellipse 50% 45% at 88% 12%,rgba(200,154,74,.24),transparent 60%),\n linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 55%,#0E1729 100%)}\n.bg .grid{position:absolute;inset:0;\n background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),\n linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);\n background-size:64px 64px;\n mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 30%,transparent 100%);\n -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 30%,transparent 100%)}\n.bg .mark{position:absolute;left:50%;transform:translateX(-50%);bottom:6%;width:74%;height:auto;\n filter:brightness(0) invert(1);opacity:.055}\n@media(max-width:820px){.bg .mark{width:150%;bottom:12%}}\n\n/* ---------- capa ---------- */\n.capa{padding:clamp(72px,10vh,104px) var(--mx) clamp(62px,9vh,88px);background:var(--paper)}\n.capa .frame{position:relative;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;flex:1;\n min-height:min(58vh,640px);display:flex;align-items:center;justify-content:center;color:#fff}\n.capa .frame .mid{position:relative;z-index:1;display:flex;flex-direction:column;\n align-items:center;text-align:center;gap:28px}\n.capa .frame .sub{font-family:var(--lt);font-size:clamp(12px,1.3vw,16px);letter-spacing:.16em;\n text-transform:uppercase;opacity:.92}\n.capa .frame .brands{font-family:var(--lt);font-size:clamp(10px,1.05vw,12.5px);\n letter-spacing:.24em;text-transform:uppercase;opacity:.6}\n.capa .caption{display:flex;justify-content:space-between;align-items:baseline;gap:24px;\n padding:clamp(16px,2.6vh,26px) 0 0;flex-wrap:wrap}\n.capa .caption .frase-cap{font-family:var(--lt);font-size:clamp(14px,1.55vw,19px);\n color:var(--ink);letter-spacing:.01em}\n.capa .caption .meta{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}\n\n.lockup{display:flex;align-items:center;gap:clamp(18px,3vw,34px)}\n.lockup img{display:block}\n.lockup .d2m{height:clamp(30px,4.6vw,54px)}\n.lockup img.vsm{height:clamp(20px,2.9vw,34px);width:auto;filter:brightness(0) invert(1)}\n.lockup img.vsm-s{height:17px;width:auto;filter:brightness(0) invert(1)}\n.lockup .plus{font-family:var(--lt);font-size:clamp(22px,3vw,36px);line-height:1;opacity:.9}\n\n/* ---------- índice ---------- */\n.indice{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,90px);\n border-top:1px solid var(--linha)}\n.indice a{display:flex;align-items:baseline;gap:18px;padding:clamp(10px,1.7vh,17px) 0;\n border-bottom:1px solid var(--linha);text-decoration:none;color:var(--ink)}\n.indice a .n{font-family:var(--lt);font-size:11px;letter-spacing:.18em;color:var(--muted);\n min-width:28px;transition:color .25s}\n.indice a .t{font-family:var(--ext);font-size:clamp(15px,1.7vw,23px);line-height:1.25;\n transition:transform .3s cubic-bezier(.2,.6,.2,1)}\n.indice a:hover .n,.indice a:focus-visible .n{color:var(--accent)}\n.indice a:hover .t,.indice a:focus-visible .t{transform:translateX(6px)}\n@media(max-width:820px){.indice{grid-template-columns:1fr}}\n\n/* ---------- statement ---------- */\n.statement h1{font-size:clamp(34px,5.6vw,86px);line-height:1.08;letter-spacing:-.01em;max-width:16ch}\n\n/* ---------- pilares ---------- */\n.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,56px);\n border-top:1px solid var(--linha);padding-top:clamp(26px,5vh,52px)}\n.pilares.dois{grid-template-columns:1fr 1fr}\n.pilar .k{display:block;font-size:11px;letter-spacing:.26em;color:var(--accent);\n text-transform:uppercase;margin-bottom:18px}\n.pilar .t{font-family:var(--ext);font-size:clamp(17px,1.7vw,23px);line-height:1.3;margin-bottom:16px}\n.pilar p{font-size:14.5px;line-height:1.7;color:var(--muted)}\n@media(max-width:820px){.pilares,.pilares.dois{grid-template-columns:1fr}}\n\n/* ---------- chip de link ---------- */\n.chip{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(22px,3.6vh,34px);\n padding:11px 20px;border:1px solid var(--linha);border-radius:999px;font-family:var(--lt);\n font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);\n text-decoration:none;transition:border-color .25s}\n.chip:hover{border-color:var(--accent)}\n\n/* ---------- arquitetura ---------- */\n.arq{display:grid;grid-template-columns:1fr 44px 1.15fr 44px 1fr;gap:clamp(10px,1.2vw,18px);\n align-items:stretch;border-top:1px solid var(--linha);padding-top:clamp(24px,4vh,44px)}\n.arq .col{display:flex;flex-direction:column;gap:10px}\n.arq .col-h{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);\n margin-bottom:8px;line-height:1.5}\n.arq .box{border:1px solid var(--linha);border-radius:14px;padding:13px 15px}\n.arq .box .bn{font-family:var(--ext);font-size:12.5px;line-height:1.4}\n.arq .box .bd{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}\n.arq .core{background:var(--dark);color:#fff;border-radius:18px;padding:clamp(16px,2.4vh,26px);\n display:flex;flex-direction:column;gap:12px;height:100%}\n.arq .core .ch{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft)}\n.arq .core .box{border-color:rgba(255,255,255,.25)}\n.arq .core .box .bd{color:rgba(255,255,255,.72)}\n.arq .link{position:relative;display:flex;align-items:center;justify-content:center}\n.arq .link::before{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:1px;\n background:var(--muted);opacity:.5}\n.arq .link span{position:relative;background:var(--paper);font-size:9px;letter-spacing:.2em;\n text-transform:uppercase;color:var(--muted);transform:rotate(-90deg);white-space:nowrap;padding:0 6px}\n@media(max-width:900px){\n .arq{grid-template-columns:1fr}\n .arq .link{min-height:34px}\n .arq .link::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}\n .arq .link span{transform:none}\n}\n\n/* ---------- frentes de escopo ---------- */\n.leg{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:clamp(18px,3vh,30px);\n font-family:var(--sf);font-size:12.5px;color:var(--muted)}\n.leg span{display:flex;align-items:center;gap:8px}\n.leg i{width:9px;height:9px;border-radius:50%;display:inline-block}\n.leg .ok{background:var(--ok)}\n.leg .nv{background:var(--accent)}\n.frentes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha);\n column-gap:clamp(24px,4vw,64px)}\n.frentes .f{border-bottom:1px solid var(--linha);padding:clamp(12px,1.8vh,18px) 0}\n.frentes .fn{font-family:var(--ext);font-size:clamp(13px,1.2vw,15.5px);margin-bottom:8px;\n display:flex;justify-content:space-between;gap:12px;align-items:baseline}\n.frentes .fn .ct{font-family:var(--sf);font-size:10.5px;color:var(--muted);white-space:nowrap;\n letter-spacing:.04em}\n.frentes .fi{display:flex;gap:8px;align-items:baseline;font-family:var(--sf);font-size:12px;\n line-height:1.5;color:var(--ink);padding:2.5px 0}\n.frentes .fi::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;\n position:relative;top:-1px}\n.frentes .fi.ok::before{background:var(--ok)}\n.frentes .fi.nv::before{background:var(--accent)}\n@media(max-width:900px){.frentes{grid-template-columns:1fr}}\n\n/* ---------- kpis ---------- */\n.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linha)}\n.kpis .k{padding:clamp(16px,2.6vh,26px) 22px clamp(16px,2.6vh,26px) 0;border-bottom:1px solid var(--linha)}\n.kpis .k .kt{font-family:var(--ext);font-size:clamp(13.5px,1.25vw,16px);line-height:1.35}\n.kpis .k p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:8px}\n.kpis .k .kb{font-family:var(--sf);font-size:11.5px;color:var(--accent);margin-top:8px;line-height:1.5}\n@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}}\n@media(max-width:600px){.kpis{grid-template-columns:1fr}}\n\n/* ---------- cronograma ---------- */\n.ondas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);\n position:relative;padding-top:clamp(30px,5vh,52px)}\n.ondas::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--linha)}\n.onda{position:relative}\n.onda::before{content:'';position:absolute;top:calc(-1 * clamp(30px,5vh,52px));left:0;\n width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateY(-4px)}\n.onda .fase{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);\n margin-bottom:10px}\n.onda .t{font-family:var(--ext);font-size:clamp(17px,1.8vw,24px);margin-bottom:18px}\n.onda ul{list-style:none}\n.onda li{font-size:14px;line-height:1.6;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--linha)}\n@media(max-width:820px){.ondas{grid-template-columns:1fr}.onda::before{display:none}}\n\n/* ---------- investimento ---------- */\n.custos{border-top:1px solid var(--linha);max-width:880px}\n.custos .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;\n padding:clamp(10px,1.8vh,18px) 0;border-bottom:1px solid var(--linha)}\n.custos .row .t{font-family:var(--ext);font-size:clamp(15px,1.5vw,20px)}\n.custos .row .d{font-size:13px;color:var(--muted);margin-top:5px;max-width:56ch;line-height:1.6}\n.custos .row .v{font-family:var(--ext);font-size:clamp(19px,2.1vw,30px);\n font-variant-numeric:tabular-nums;white-space:nowrap}\n.custos .row .v em{font-style:normal;color:var(--muted);font-family:var(--lt);font-size:.55em;\n letter-spacing:.1em}\n.custos .total .v{color:var(--accent)}\n.cond{margin-top:clamp(14px,2.2vh,22px);font-size:13px;line-height:1.7;color:var(--muted);max-width:64ch}\n\n/* ---------- tabelas comerciais ---------- */\n.tbw{overflow-x:auto;border-top:1px solid var(--linha)}\n.tb{width:100%;border-collapse:collapse;min-width:560px}\n.tb th{text-align:left;font-family:var(--lt);font-weight:400;font-size:10px;letter-spacing:.2em;\n text-transform:uppercase;color:var(--muted);padding:14px 22px 12px 0;\n border-bottom:1px solid var(--linha);white-space:nowrap}\n.tb td{padding:13px 22px 13px 0;font-size:13px;color:var(--muted);line-height:1.5;\n border-bottom:1px solid var(--linha);white-space:nowrap;font-variant-numeric:tabular-nums}\n.tb td:first-child{font-family:var(--ext);color:var(--ink);font-size:13.5px}\n.tb td strong{font-family:var(--ext);font-weight:400;color:var(--ink)}\n.tb tbody tr:last-child td{border-bottom:0}\n\n/* ---------- listas de compromisso ---------- */\n.klist{list-style:none;margin-top:6px}\n.klist li{font-size:13.5px;line-height:1.6;color:var(--ink);padding:10px 0;\n border-bottom:1px solid var(--linha);display:flex;gap:10px;align-items:baseline}\n.klist li b{font-weight:600}\n.klist li::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;\n background:var(--ok);position:relative;top:-1px}\n.klist.neg li::before{background:var(--bad)}\n\n/* ---------- fechamento ---------- */\n.dark{color:#fff}\n.dark .mid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;\n text-align:center;gap:34px}\n.dark .sub{font-family:var(--lt);font-size:clamp(12px,1.3vw,16px);letter-spacing:.14em;\n text-transform:uppercase;opacity:.92}\n.fecho .mid{gap:44px}\n.fecho .frase{font-family:var(--lt);font-size:clamp(16px,1.8vw,25px);line-height:1.65;\n letter-spacing:.025em;max-width:44ch;text-wrap:balance}\n.fecho .frase i{font-style:normal;opacity:.65}\n.ring{width:clamp(54px,5.4vw,80px);height:auto;display:block}\n.ring.branco{filter:brightness(0) invert(1)}\n@media(max-width:820px){.fecho .frase{font-size:15px}}\n\n/* ---------- mobile ---------- */\n@media(max-width:820px){\n .deckroot{scroll-snap-type:y proximity}\n .deckwrap::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:35;\n pointer-events:none;background:linear-gradient(to top,var(--paper) 42%,rgba(245,244,240,0));\n height:78px}\n .deckwrap.on-dark::after{display:none}\n nav.dots{display:none}\n section{padding:72px 20px 82px}\n .counter,.hint{bottom:34px}\n .eyebrow{margin-bottom:18px}\n .capa{padding:60px var(--mx) 96px}\n .capa .frame{min-height:42svh}\n .capa .frame .mid{gap:16px;padding:0 20px}\n .capa .frame .sub{font-size:10.5px;letter-spacing:.12em;text-wrap:balance;line-height:1.7}\n .capa .frame .brands{font-size:9px;letter-spacing:.18em;line-height:1.8}\n .capa .lockup{gap:14px}\n .capa .lockup .d2m{height:25px}\n .capa .lockup img.vsm{height:16px}\n .capa .lockup .plus{font-size:17px}\n .capa .caption{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 2px 0}\n .capa .caption .frase-cap{font-size:15px;line-height:1.5;max-width:34ch}\n}\n\n/* ---------- gate ---------- */\n.gwrap{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;\n align-items:center;justify-content:center;background:var(--dark);font-family:var(--lt)}\n.gcard{position:relative;z-index:1;background:var(--paper);border-radius:20px;\n padding:40px 36px 32px;width:min(380px,88vw);text-align:center;\n box-shadow:0 30px 80px rgba(0,0,0,.45)}\n.glock{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}\n.glock img{filter:brightness(0);display:block}\n.glock img.gvs{height:14px;width:auto;filter:none}\n.glock span{font-family:var(--lt);font-size:15px;color:var(--ink)}\n.gsub{font-family:var(--lt);font-size:10px;letter-spacing:.24em;text-transform:uppercase;\n color:var(--muted);margin-bottom:26px}\n.ginput{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid var(--linha);\n border-radius:10px;background:#fff;font-size:15px;text-align:center;outline:none;\n font-family:var(--sf);color:var(--ink)}\n.ginput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(150,87,15,.16)}\n.gbtn{width:100%;margin-top:12px;padding:13px;border:none;border-radius:10px;\n background:var(--accent);color:#fff;font-size:12px;letter-spacing:.24em;\n text-transform:uppercase;cursor:pointer;font-family:var(--lt)}\n.gbtn:hover{filter:brightness(.9)}\n.gerr{display:none;color:var(--bad);font-size:13px;margin-top:12px;font-family:var(--sf)}\n.shake{animation:gsh .4s}\n@keyframes gsh{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}\n 40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}\n\n/* ---------- painel de acessos ---------- */\n.acwrap{position:relative;min-height:100vh;min-height:100svh;background:var(--paper);\n color:var(--ink);font-family:var(--lt);overflow-y:auto}\n.acwrap header{position:relative;background:none}\n.acbody{max-width:900px;margin:0 auto;padding:8px clamp(20px,5vw,48px) 80px}\n.actit{font-family:var(--ext);font-weight:400;font-size:clamp(28px,4vw,46px);\n line-height:1.1;margin-bottom:clamp(22px,4vh,40px)}\n.acgate{max-width:320px}\n.acerr{color:var(--bad);font-size:13px;margin-top:12px;font-family:var(--sf)}\n.acmsg{color:var(--muted);font-family:var(--sf);padding:26px 0}\n.ackpis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);\n border-top:1px solid var(--linha);padding-top:clamp(18px,3vh,28px);\n margin-bottom:clamp(26px,5vh,46px)}\n.acl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);\n margin-bottom:10px}\n.acv{font-family:var(--ext);font-size:clamp(30px,4.4vw,48px);font-variant-numeric:tabular-nums}\n.acsub{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);\n margin-bottom:14px}\n.acwrap .tb{min-width:480px}\n.acwrap .tb .cid{color:var(--muted);font-size:11.5px}\n@media(max-width:700px){.ackpis{grid-template-columns:1fr}}\n `,\n render() { return `
` },\n mounted(d2, root) {\n injectFonts()\n let admin = false\n try { admin = ((window.location.search || '') + (window.location.hash || '')).indexOf('acessos') >= 0 } catch (e) {}\n if (admin) {\n phase = 'acessos'\n sync(d2, root)\n let saved = ''\n try { saved = window.localStorage.getItem('veste_prop_admin') || '' } catch (e) {}\n const host = (d2 && d2.$ && d2.$('.deckhost')) || ((root || document).querySelector('.deckhost'))\n if (saved && host) loadAcessos(host, saved)\n return\n }\n let ok = OPEN\n try { if (sessionStorage.getItem('deckVesteUnlocked') === '1') ok = true } catch (e) {}\n try { if ((location.search || '').indexOf('k=' + PASS) > -1) ok = true } catch (e) {}\n if (ok) phase = 'deck'\n track('open')\n sync(d2, root)\n },\n updated(d2, root) { sync(d2, root) }\n}\n"}}}}}}}},{"_id":"6aaac5b70ea1ff2bdef8a389","component":"data2-core-types@Component","system":"698a0c028a310c894be98bc8","params":{"extends":"data2-core-primitives@Block","component":"kickoff-tryon-guia","package":"veste-app","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"export default {\n css: `\n:host{display:block;width:100%;height:100%}\n.wrap{\n --paper:#F5F4F0; --ink:#15161A; --muted:#6A6E77; --accent:#96570F; --linha:rgba(21,22,26,.13);\n background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;\n width:100%; min-height:100%; overflow-y:auto; padding:clamp(24px,4vw,64px);\n box-sizing:border-box;\n}\n*{box-sizing:border-box}\nh1{font-size:clamp(24px,3vw,36px);font-weight:600;margin:0 0 6px;letter-spacing:-.01em}\nh2{font-size:clamp(17px,2vw,22px);font-weight:600;margin:36px 0 12px;color:var(--accent)}\n.meta{font-size:13px;color:var(--muted);margin-bottom:18px}\n.badge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;letter-spacing:.08em;\n text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:14px}\np{font-size:14.5px;line-height:1.65;color:var(--ink);margin:0 0 10px;max-width:78ch}\np.muted{color:var(--muted)}\nhr{border:none;border-top:1px solid var(--linha);margin:22px 0}\nul{margin:0 0 10px;padding-left:20px}\nli{font-size:14px;line-height:1.65;margin-bottom:8px;max-width:74ch}\nli b{font-weight:600}\n.risk{background:#FBE9E4;border-left:3px solid #A33427;padding:10px 14px;border-radius:6px;margin:10px 0}\n.ok{background:#E8F0EA;border-left:3px solid #2C6B4A;padding:10px 14px;border-radius:6px;margin:10px 0}\ncode{background:rgba(21,22,26,.06);padding:1px 6px;border-radius:4px;font-size:12.5px}\n.foot{margin-top:44px;padding-top:16px;border-top:1px solid var(--linha);font-size:12px;color:var(--muted)}\n`,\n render(d2) {\n return `
\n
Sprint · Grupo Veste
\n

Kickoff Sprint · Provador Virtual com IA

\n
16/09/2026 · 14:00–16:00 · gui
\n

Objetivo do kickoff: alinhar as partes antes de iniciar a Sprint (2–4 semanas, 4 sessões Data²↔Veste) que constrói o provador virtual com IA para as 5 marcas do grupo. Guia de uso ao vivo — preencher decisões durante a call.

\n

Proposta de referência: proposta-veste.veste-app.next.data2.app (senha veste2026).

\n\n
Marca piloto do Dia 1: John John (confirmado por gui, 2026-09-16). Hoje não existe nenhuma prova ao vivo em site nenhum da Veste — é a primeira vez. O catálogo da John John (VTEX) tem request criado mas ainda não validado tecnicamente — só o da Le Lis está testado hoje. Isso é ação técnica bloqueante antes do Dia 1.
\n\n
\n

Status técnico real hoje

\n
    \n
  • Catálogo por marca: só Le Lis está de fato prototipado e testado, contra a VTEX Intelligent Search real (lelis.com.br/.../intelligent-search/product_search). John John, Bo.Bô e Dudalina têm requests criados mas não confirmados. Individual não tem integração nenhuma ainda.
    • \n
  • Sessão de busca: existe uma chamada CREATE SESSION para service.smarthint.co (SmartHint) — provedor terceiro separado da VTEX; precisa confirmar se é o caminho oficial.
    • \n
  • Geração de imagem: motor nano-banana já plugado, copiado do engine validado (Dudalina try-on, Roue etc).
    • \n
  • Clothing-Swap / Shoes-Swap: componentes clonados do engine validado — ainda não adaptados/testados com catálogo real da Veste.
    • \n
  • Nada de embed, evento host↔widget, ou jornada de cliente foi definido ainda — núcleo do bloco Tech de hoje.
    • \n
\n\n
\n

Abertura · 14:00–14:10 (10 min)

\n
    \n
  • Apresentações — quem está na sala de cada lado, papel de cada um
    • \n
  • Reconfirmar o que a Sprint entrega e o que fica pra depois (fora de escopo: tamanho, ERP/OMS/estoque, app nativo, loja física)
    • \n
  • Reconfirmar condições travadas: R$ 0 de sprint, 30 dias de imagem liberada, teto de 2.000 provas, D1/D15/D30
    • \n
\n\n

Bloco 1 · Negócio — 14:10–14:45 (35 min)

\n
    \n
  • John John confirmada como marca piloto — catálogo dela precisa ser validado antes do Dia 1
    • \n
  • Individual fica fora do piloto, ou entra depois? Precisa virar decisão explícita
    • \n
  • Baseline de conversão — número de hoje da John John, quem do lado Veste confirma no Dia 1
    • \n
  • Confirmar as 3 métricas: conversão de visitantes (o número que a POC prova), clique em Comprar pós-prova, troca/devolução (leitura só pós-janela, não fecha em 30 dias)
    • \n
  • Quem aprova uso/consentimento de imagem do cliente (LGPD)
    • \n
  • Donos de cada lado — contato de negócio e de produto/plataforma
    • \n
  • Critério de sucesso combinado antes de rodar
    • \n
\n\n

Bloco 2 · Marca & UX — 14:45–15:20 (35 min)

\n
    \n
  • Onde o provador entra na jornada — PDP, home ou landing de campanha?
    • \n
  • Fluxo: upload de foto → escolha da peça → resultado → Meu Look → Minhas Provas (galeria por e-mail)
    • \n
  • Estética John John — widget herda o visual do site, ou casca única Data²+Veste?
    • \n
  • Como comunicar o limite da prova na UI — não promete tamanho/caimento
    • \n
  • Onde aparece o opt-in de imagem no fluxo
    • \n
  • Quem no time de marca aprova os textos da jornada
    • \n
\n\n

Bloco 3 · Tech — 15:20–15:50 (30 min)

\n
    \n
  • Contrato de catálogo da John John — mesma VTEX Intelligent Search da Le Lis? SmartHint entra em algum ponto?
    • \n
  • Formato do embed — script tag, web component, iframe? Alinhar com o time de front da John John
    • \n
  • Eventos host → embed: SKU/produto da PDP atual, sessão/usuário logado, marca/contexto
    • \n
  • Eventos embed → host: \"prova concluída\", \"clique em Comprar\" (navega ou só reporta?), erro/falha de geração
    • \n
  • Autenticação/CORS da API de catálogo pública — chave, rate limit, allowlist?
    • \n
  • Contato técnico de plataforma da John John — quem publica o embed
    • \n
  • Onde fica o tracking Data² vs. o que a Veste já tem (GA/GTM) — evitar dado duplicado na leitura do Dia 30
    • \n
\n\n

Encerramento · 15:50–16:00 (10 min)

\n
    \n
  • Resumo das decisões de cada bloco (preencher ao vivo)
    • \n
  • Datas de calendário fixadas: Dia 1 / Dia 15 / Dia 30
    • \n
  • Quem faz o quê até a próxima sessão, com prazo
    • \n
  • Próxima sessão da Sprint agendada
    • \n
\n\n
Doc completo (com comentários e histórico): guia no Claude Docs, linkado na conversa com o gui.
\n
`\n }\n}"}}}}}}}},{"_id":"6aac12eab0831151b3b065b7","component":"data2-core-types@Component","system":"698a0c028a310c894be98bc8","params":{"extends":"data2-core-primitives@Block","component":"provador-standalone","package":"veste-app","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const RULER_ICON = ``\nconst WARNING_ICON = ``\nconst REFRESH_ICON = ``\nconst UPLOAD_ICON = ``\nconst THUMBS_UP_ICON = ``\nconst THUMBS_DOWN_ICON = ``\nconst SHARE_ICON = ``\n\n// In-memory only — same product + same customer photo (+ color/size/extra)\n// within THIS session reuses the already-generated result instead of paying\n// for a new AI call. Resets on page reload, which is fine: it's just a\n// same-session speed/cost win, not meant to survive across visits.\nconst tryonResultCache = new Map()\nfunction tryonCacheKey(product, extra, color, size, userPhotoUrl) {\n return [(product && product.productId) || '', (extra && extra.productId) || '', color || '', size || '', userPhotoUrl || ''].join('|')\n}\n\n// ---- Category blocklist (bolsas/cintos/carteiras/etc. can't be \"worn\") ----\n// Fetched once per page load from the Painel's blocklist table (tryon-blocklist\n// rush, public read-only) and cached in d2.state so every render/openProduct\n// check is synchronous after the first fetch.\nasync function ensureBlocklist(d2) {\n if (d2.state.blocklist) return d2.state.blocklist\n try {\n const res = await fetch('https://veste-app.data2apis.com/rush/tryon-blocklist', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({}),\n })\n const json = await res.json()\n const categories = (json && json.data && json.data.categories) || []\n d2.state.blocklist = categories\n return categories\n } catch (err) {\n console.warn('[provador] blocklist fetch failed', err)\n d2.state.blocklist = []\n return []\n }\n}\nfunction isCategoryBlocked(product, blocklist) {\n return !!matchedBlockedCategory(product, blocklist)\n}\nfunction matchedBlockedCategory(product, blocklist) {\n if (!blocklist || !blocklist.length) return null\n const cats = (product && product.categories) || []\n if (!cats.length) return null\n const joined = cats.join(' / ').toLowerCase()\n const hit = blocklist.find((b) => b && joined.includes(String(b).toLowerCase()))\n return hit || null\n}\n\nexport default {\n css: `\n@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap');\n:host{display:block;width:100%;height:100%}\n.wrap{\n --paper:#FFFFFF; --ink:#000000; --muted:#727273; --accent:#96570F; --accent-soft:#C89A4A;\n --linha:#e2e2e2; --card:#FFFFFF; --danger:#A33427;\n width:100%;height:100%;overflow-y:auto;background:var(--paper);color:var(--ink);\n font-family:'Exo 2',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;\n box-sizing:border-box;\n}\n*{box-sizing:border-box}\n.closebtn{position:fixed;top:14px;right:14px;z-index:20;border:1px solid var(--linha);background:#fff;\n border-radius:999px;width:34px;height:34px;box-shadow:0 4px 14px rgba(0,0,0,.12);\n display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1;color:var(--muted)}\n.closebtn:hover{color:var(--ink);border-color:var(--ink)}\n.body{padding:clamp(18px,4vw,40px);max-width:1100px;margin:0 auto}\n.disclaimer{font-size:11.5px;color:var(--muted);line-height:1.5;max-width:60ch;margin:0 0 22px}\n\n/* search */\n.searchbar{display:flex;gap:10px;margin-bottom:26px}\n.searchbar input{flex:1;padding:14px 16px;border:1px solid var(--linha);border-radius:12px;\n font-size:15px;background:#fff;color:var(--ink)}\n.searchbar input:focus{outline:2px solid var(--accent);outline-offset:1px}\n.searchbar button{padding:0 22px;border:0;border-radius:2px;background:#080707;color:#fff;\n font-size:14px;font-weight:500;letter-spacing:normal;text-transform:uppercase;cursor:pointer}\n.searchbar button:disabled{opacity:.5;cursor:default}\n.searchbar button:active,.cta:active,.addbag:active,.checkout:active,.chip:active,.iconbtn:active{transform:scale(.96)}\nbutton,.chip,.iconbtn,.card,.cta{transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}\n.screen-enter{animation:screenIn .38s cubic-bezier(.2,.7,.2,1)}\n@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\n.uploadzone.drag{border-color:var(--accent);background:#FBF3E8;transform:scale(1.01)}\n.hint{font-size:12.5px;color:var(--muted);margin:-14px 0 22px}\n.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}\n.card{background:var(--card);border:1px solid var(--linha);border-radius:14px;overflow:hidden;\n cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}\n.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,22,26,.08)}\n.card .ph{width:100%;aspect-ratio:3/4;background:#eee;background-size:cover;background-position:center;background-repeat:no-repeat}\n.card .info{padding:10px 12px 14px}\n.card .nm{font-size:13px;line-height:1.35;margin-bottom:6px;min-height:34px;font-weight:400;color:#000}\n.card .pr{font-size:13px;color:#000;font-weight:700}\n.empty{padding:60px 0;text-align:center;color:var(--muted);font-size:14px}\n.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,.15);\n border-top-color:var(--ink);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}\n@keyframes sp{to{transform:rotate(360deg)}}\n\n/* product */\n.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)}\n@media(max-width:720px){.pgrid{grid-template-columns:1fr}}\n.pimg{width:100%;aspect-ratio:3/4;border-radius:16px;background:#eee;background-size:cover;background-position:center;background-repeat:no-repeat}\n.pname{font-size:clamp(20px,2.4vw,26px);font-weight:400;margin:4px 0 6px;line-height:1.25;color:#000}\n.pbrand{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#666;margin-bottom:14px;font-weight:400}\n.pprice{font-size:22px;color:#000;font-weight:700;margin-bottom:2px}\n.pinstall{font-size:11px;color:#333;font-weight:700;margin-bottom:22px}\n.ptitlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}\n.shareicon{flex:none;border:1px solid var(--linha);background:#fff;border-radius:999px;width:34px;height:34px;\n display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--muted)}\n.sizeguide{font-size:12.5px;color:var(--ink);text-decoration:underline;cursor:pointer;margin:14px 0 0;display:inline-block}\n.accordion{margin-top:26px;border-top:1px solid var(--linha)}\n.acc-item{border-bottom:1px solid var(--linha)}\n.acc-head{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;\n font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}\n.acc-body{padding:0 0 16px;font-size:13.5px;line-height:1.65;color:var(--muted);display:none}\n.acc-item.open .acc-body{display:block}\n.acc-item.open .acc-chev{transform:rotate(180deg)}\n.acc-chev{transition:transform .2s}\n.optlabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:4px 0 6px}\n.opts{display:flex;flex-wrap:wrap;gap:8px}\n.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--linha);background:#fff;\n font-size:13px;cursor:pointer}\n.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}\n.cta{margin-top:30px;width:100%;padding:16px;border:0;border-radius:2px;\n background:var(--danger);color:#fff;font-size:14px;letter-spacing:normal;text-transform:uppercase;\n font-weight:500;cursor:pointer}\n.cta:hover{filter:brightness(1.05)}\n\n/* upload */\n.uploadzone{border:2px dashed var(--linha);border-radius:18px;padding:clamp(40px,8vw,80px) 20px;\n text-align:center;background:#fff;cursor:pointer;transition:border-color .15s}\n.uploadzone:hover{border-color:var(--accent)}\n.uploadzone .ic{font-size:34px;margin-bottom:14px}\n.uploadzone .t{font-size:16px;font-weight:600;margin-bottom:6px}\n.uploadzone .s{font-size:13px;color:var(--muted)}\n.instr{margin-top:22px;padding:16px 18px;background:#fff;border:1px solid var(--linha);border-radius:12px;\n font-size:13px;color:var(--muted);line-height:1.6}\n.instr b{color:var(--ink)}\n\n/* result */\n.rgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}\n@media(max-width:820px){.rgrid{grid-template-columns:1fr}}\n.rimg{width:100%;aspect-ratio:3/4;border-radius:16px;background:#e5e5e5;background-size:cover;\n background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}\n.rimg .load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;\n justify-content:center;gap:12px;background:rgba(245,244,240,.9);font-size:13px;color:var(--muted)}\n.genprogress{position:absolute;top:0;left:0;width:100%;height:3px;background:rgba(0,0,0,.08);overflow:hidden;z-index:2}\n.genbar{position:absolute;top:0;left:-40%;height:100%;width:40%;background:var(--accent);animation:genprog 1.4s ease-in-out infinite}\n@keyframes genprog{0%{left:-40%}50%{left:60%}100%{left:100%}}\n.gentime{font-size:11.5px;color:var(--muted);margin-top:-4px}\n.generr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;\n gap:12px;background:rgba(255,255,255,.96);font-size:13.5px;color:var(--ink);text-align:center;padding:28px;z-index:3}\n.generr-ic{color:var(--muted);display:flex}\n.generr-msg{max-width:36ch;line-height:1.5}\n.generr.friendly{background:rgba(251,243,232,.97)}\n.generr.friendly .generr-ic{color:var(--accent)}\n.actrow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}\n.iconbtn{flex:1;min-width:76px;padding:10px 8px;border:1px solid var(--linha);border-radius:10px;\n background:#fff;font-size:11.5px;cursor:pointer;text-align:center}\n.panel{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:20px;display:flex;\n flex-direction:column;gap:8px}\n.colorthumbs{gap:8px}\n.colorthumb{width:64px;height:64px;padding:0;border-radius:10px;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;\n border:2px solid transparent;cursor:pointer;flex:none}\n.colorthumb.on{border-color:var(--ink)}\n.helpblock{display:flex;flex-direction:column;gap:14px;margin:2px 0;padding-bottom:16px;border-bottom:1px solid #eee}\n.helprow{display:flex;align-items:center;gap:10px;font-size:12px;color:#252525}\n.helprow.act-personal-shopper{cursor:pointer}\n.helprow u{color:#252525}\n.helpdivider{border-top:1px solid #eee}\n.helprow2{display:flex;gap:24px}\n.helpcol{display:flex;align-items:center;gap:10px;font-size:14px;color:#000}\n.helpcol.act-sizeguide-size{cursor:pointer}\n.helpcol.act-sizeguide-measures{cursor:pointer}\n.helpicon{width:25px;height:25px;flex:none;object-fit:contain}\n.helpicon-emoji{font-size:20px;flex:none}\n.addbag{padding:14px;border:0;border-radius:4px;background:#080707;color:#fff;font-size:14px;\n letter-spacing:normal;text-transform:uppercase;font-weight:400;cursor:pointer}\n.primary-btn{margin-top:16px;width:100%;padding:16px;border:0;border-radius:4px;background:#080707;\n color:#fff;font-size:14px;text-transform:uppercase;font-weight:400;letter-spacing:normal;cursor:pointer}\n.sug{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}\n.sugcard{border:2px solid var(--linha);border-radius:10px;padding:10px;font-size:11.5px;color:var(--muted);\n text-align:center;cursor:pointer}\n.sugcard.on{border-color:#080707}\n.sugcard .sugcheck{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:999px;\n background:#080707;color:#fff;display:none;align-items:center;justify-content:center;font-size:12px}\n.sugcard.on .sugcheck{display:flex}\n.gallery{display:flex;gap:10px;overflow-x:auto;margin-top:26px;padding-bottom:6px}\n.carousel{position:relative}\n.carousel .gallery{margin-top:0}\n.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:999px;\n background:#fff;border:1px solid var(--linha);display:none;align-items:center;justify-content:center;\n cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:2;font-size:16px;line-height:1;color:var(--muted)}\n.carousel-arrow:hover{color:var(--ink)}\n.carousel-arrow.prev{left:-6px}\n.carousel-arrow.next{right:-6px}\n.gitem{flex:none;width:74px;height:98px;border-radius:10px;background:#eee;background-size:cover;\n background-position:center;background-repeat:no-repeat;border:2px solid transparent;cursor:pointer}\n.gitem.on{border-color:var(--accent)}\n.checkout,.outline-cta{margin-top:18px;width:100%;padding:14px;border:1px solid #080707;border-radius:4px;background:#fff;\n color:#080707;font-size:14px;font-weight:400;letter-spacing:normal;text-transform:uppercase;cursor:pointer}\n.iconbtn.fb-selected{border-color:var(--ink);background:#f4f4f4}\n.iconbtn svg{vertical-align:-3px}\n.refazer-confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#FBF3E8;border:1px solid var(--linha);\n border-radius:10px;padding:10px 12px;margin-top:10px;font-size:12.5px;color:var(--ink)}\n.refazer-confirm .rc-btn{border:1px solid var(--ink);border-radius:8px;padding:6px 12px;background:#fff;cursor:pointer;font-size:12px}\n.refazer-confirm .rc-btn.yes{background:#080707;color:#fff;border-color:#080707}\n.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#000;color:#fff;\n padding:12px 20px;border-radius:999px;font-size:13px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.25)}\n.chip-oos{opacity:.4;text-decoration:line-through;cursor:not-allowed}\n.airesult-disclaimer{font-size:11px;color:var(--muted);line-height:1.5;margin-top:8px}\n.uploadgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,40px);align-items:start}\n@media(max-width:720px){.uploadgrid{grid-template-columns:1fr}}\n.uploadtips{padding-top:4px}\n.tipslist{margin:0;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.9}\n`,\n\n render(d2) {\n const s = d2.state\n const screen = s.screen || 'search'\n const step = { search: 1, product: 2, upload: 3, loading: 3, result: 4 }[screen] || 1\n\n // No visible header/steps bar — navigation here is modal and host-driven,\n// there's nothing for the shopper to navigate between. Just a close button.\nconst header = `
×
`\n\n let inner = ''\n try {\n if (screen === 'search') inner = renderSearch(d2)\n else if (screen === 'product') inner = renderProduct(d2)\n else if (screen === 'upload') inner = renderUpload(d2)\n else if (screen === 'loading') inner = `
  carregando…
`\n else inner = renderResult(d2)\n } catch (renderErr) {\n console.error('[provador] render() threw on screen', screen, renderErr)\n inner = `
Erro ao renderizar (${esc(screen)}): ${esc(renderErr && renderErr.message)}
`\n }\n\n const toast = s.toast ? `
${esc(s.toast)}
` : ''\n return `
${header}
${inner}
${toast}`\n },\n\n mounted(d2) {\n d2.state.screen = d2.state.screen || 'search'\n updateCarouselArrows(d2)\n\n // ---- PowerCord embed bridge — real Veste<->Data2 protocol ----\n // Veste -> Data2: tryon-initialize(customerId), tryon-open(productId, skuId?)\n // Data2 -> Veste: tryon-add-to-cart([skuID,...]), tryon-checkout(), tryon-sizeBay(productId), close-tryon\n // Veste -> Data2: cart-state({cartItems})\n d2.state.cart = d2.state.cart || []\n ensureBlocklist(d2)\n try {\n window.__powercordEmit = (eventName, data) => {\n window.parent.postMessage({ eventName, data }, '*')\n logEvent(d2, eventName, 'out', data)\n }\n const fetchProductById = async (productId) => {\n // jj-product does an EXACT id lookup (VTEX legacy Catalog System).\n // jj-search's Intelligent Search fq=productId is a silent no-op —\n // it always falls back to a generic ranked list, ignoring the id.\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-product?productId=' + encodeURIComponent(productId))\n const json = await res.json()\n const products = (json && json.data && json.data.products) || []\n return products[0] || null\n }\n const openProduct = async (productId, skuId) => {\n // 'search' is the standalone-testing landing only — inside the embed\n // it must NEVER surface. No/invalid productId still waiting to\n // resolve just means \"still loading\", not \"show the catalog\".\n if (!productId) { d2.state.screen = 'loading'; return }\n // Loading state FIRST — never let the iframe show the previous\n // product/result while the new one resolves (bad perceived quality).\n d2.state.screen = 'loading'\n try {\n const rawProduct = await fetchProductById(productId)\n if (!rawProduct) { flashToast(d2, 'Produto não encontrado (id ' + productId + ').'); return }\n // Legacy catalog lookup only returns THIS color's SKUs — colors live\n // as separate productIds in this catalog. Enrich with sibling colors\n // found via a text search grouped by the same product family.\n const product = await enrichWithColorSiblings(rawProduct)\n const blocklist = await ensureBlocklist(d2)\n if (isCategoryBlocked(product, blocklist)) {\n // Server-side defense-in-depth lives in jj-tryon-generate — this is\n // the client guard for the Veste host calling tryon-open directly\n // with a productId, bypassing our own catalog/CTA UI entirely.\n flashToast(d2, 'Essa peça não pode ser experimentada no provador virtual (categoria incompatível).')\n window.__powercordEmit && window.__powercordEmit('close-tryon', {})\n return\n }\n const colors = variationValues(product, 'Cor')\n const sizes = variationValues(product, 'Tamanho')\n let preselColor = colors[0] || '', preselSize = sizes[0] || ''\n if (skuId) {\n const item = (product.items || []).find((it) => it.itemId === skuId)\n if (item) {\n const c = (item.variations || []).find((v) => v.name === 'Cor')\n const s = (item.variations || []).find((v) => v.name === 'Tamanho')\n if (c && c.values && c.values[0]) preselColor = c.values[0]\n if (s && s.values && s.values[0]) preselSize = s.values[0]\n }\n }\n d2.setState({\n product,\n color: preselColor,\n size: preselSize,\n lookExtra: null,\n suggestions: [],\n })\n loadCrosssell(d2, product.productId)\n // Photo already on file (this session or a prior visit) — skip\n // straight to the result instead of asking to upload again.\n if (d2.state.userPhoto) {\n generate(d2)\n } else {\n d2.state.screen = 'upload'\n }\n } catch (err) {\n console.warn('[provador] openProduct failed', err)\n flashToast(d2, 'Não deu pra carregar esse produto agora. Tenta de novo.')\n }\n }\n window.__provadorOpenProduct = openProduct\n window.__provadorFetchProduct = fetchProductById\n window.addEventListener('message', (e) => {\n const msg = e.data\n if (!msg || typeof msg !== 'object' || !msg.eventName) return\n console.log('[provador][powercord] received from host:', msg.eventName, msg.data)\n logEvent(d2, msg.eventName, 'in', msg.data)\n if (msg.eventName === 'tryon-initialize') {\n const sessionCode = typeof msg.data === 'string' ? msg.data : (msg.data && msg.data.customerId) || null\n initSession(d2, sessionCode)\n }\n if (msg.eventName === 'tryon-open') {\n const productId = msg.data && msg.data.productId\n const skuId = msg.data && msg.data.skuId\n openProduct(productId, skuId)\n }\n if (msg.eventName === 'cart-state') {\n // The real host often echoes back ONLY skuIds (no image/name/price)\n // — backfill from whatever we already know locally (e.g. items we\n // ourselves just added via .addbag, which DO carry the full data)\n // instead of blindly overwriting with the host's poorer shape.\n const raw = Array.isArray(msg.data) ? msg.data : (msg.data && msg.data.cartItems) || []\n const prevBySkuId = {}\n ;(d2.state.cart || []).forEach((it) => { if (it && it.skuId) prevBySkuId[it.skuId] = it })\n const items = raw.map((entry) => {\n const item = (typeof entry === 'string') ? { skuId: entry } : (entry || {})\n const known = prevBySkuId[item.skuId] || {}\n return {\n skuId: item.skuId,\n productId: item.productId || known.productId || '',\n productName: item.productName || known.productName || '',\n imageUrl: item.imageUrl || known.imageUrl || '',\n price: (item.price != null ? item.price : known.price != null ? known.price : null),\n quantity: item.quantity || known.quantity || 1,\n }\n })\n d2.state.cart = items\n }\n })\n // Guest handshake: tells the host's PowerCord instance we're alive.\n // This is the PowerCord library's own handshake (bare string), separate\n // from the tryon-initialize BUSINESS event above.\n window.parent.postMessage('handshake', '*')\n } catch (err) {\n console.warn('[provador][powercord] bridge init failed', err)\n }\n\n d2.on('.back', 'click', () => {\n const order = ['search', 'product', 'upload', 'result']\n const i = order.indexOf(d2.state.screen || 'search')\n const next = order[Math.max(0, i - 1)]\n d2.state.screen = next\n if (i === 0) window.__powercordEmit && window.__powercordEmit('close-tryon', {})\n })\n d2.on('.closebtn', 'click', () => {\n window.__powercordEmit && window.__powercordEmit('close-tryon', {})\n })\n\n // ---- search ----\n d2.on('.searchbar input', 'keydown', (e) => { if (e.key === 'Enter') runSearch(d2) })\n d2.on('.go', 'click', () => runSearch(d2))\n d2.on('.card', 'click', (e, el) => {\n const idx = Number(el.dataset.idx)\n const product = (d2.state.results || [])[idx]\n if (!product) return\n const colors = variationValues(product, 'Cor')\n const sizes = variationValues(product, 'Tamanho')\n d2.setState({\n screen: 'product',\n product,\n color: colors[0] || '',\n size: sizes[0] || '',\n lookExtra: null,\n suggestions: [],\n })\n loadCrosssell(d2, product.productId)\n })\n\n // ---- product ----\n d2.on('.chip', 'click', (e, el) => {\n const kind = el.dataset.kind\n const val = el.dataset.val\n if (el.dataset.oos === '1') { flashToast(d2, 'Esse tamanho está sem estoque no momento.'); return }\n if (kind === 'color') {\n const changed = val !== d2.state.color\n d2.state.color = val\n if (changed && d2.state.screen === 'result' && d2.state.userPhoto) generate(d2)\n }\n if (kind === 'size') d2.state.size = val\n })\n d2.on('.cta', 'click', () => {\n if (d2.state.userPhoto) generate(d2)\n else d2.state.screen = 'upload'\n })\n d2.on('.act-sizeguide-size', 'click', () => {\n const p = d2.state.product\n window.__powercordEmit && window.__powercordEmit('tryon-size-bay-size', p && p.productId)\n })\n d2.on('.act-sizeguide-measures', 'click', () => {\n const p = d2.state.product\n window.__powercordEmit && window.__powercordEmit('tryon-size-bay-measures', p && p.productId)\n })\n // NOTE: 'tryon-personalShopper' is NOT part of the original event\n // protocol agreed with Veste (only tryon-sizeBay/checkout/add-to-cart/\n // close-tryon/cart-state were spec'd) — confirm this exact event name\n // with them before relying on it in production.\n d2.on('.act-personal-shopper', 'click', () => {\n const p = d2.state.product\n window.__powercordEmit && window.__powercordEmit('tryon-personalShopper', p && p.productId)\n })\n d2.on('.acc-head', 'click', (e, el) => {\n const item = el.closest('.acc-item')\n const key = item && item.dataset.acc\n d2.state.openAcc = d2.state.openAcc === key ? '' : key\n })\n\n // ---- upload ----\n // iPhones (and most phone cameras) store the sensor's raw pixels in\n // landscape and rely on an EXIF Orientation tag to tell viewers \"rotate\n // this for display\" — browsers/Fotos respect it, but many backends\n // (including vision/image-gen APIs) read the raw bytes and ignore it,\n // so the SAME file can look upright in the preview but sideways once it\n // reaches the AI. Re-painting onto a bakes in whatever\n // orientation the browser's own (EXIF-aware) image decoder already\n // applied, producing a fresh file with no orientation tag to misread —\n // preview and AI pipeline then always see the exact same pixels.\n function normalizeImageOrientation(file) {\n return new Promise(async (resolve) => {\n if (!file || !/^image\\//.test(file.type)) { resolve(file); return }\n try {\n // CRITICAL: a plain + canvas.drawImage(img,...) does NOT apply\n // EXIF orientation in most browsers — only the tag's own\n // on-screen paint does (image-orientation:from-image CSS default).\n // drawImage() draws the RAW decoded bitmap, ignoring the tag, which\n // silently re-bakes the sideways pixels as \"fixed\" with no EXIF left\n // to warn anyone afterward. createImageBitmap's\n // `imageOrientation:'from-image'` option is the one API that\n // actually decodes WITH the correction applied — use it, not .\n const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' })\n const canvas = document.createElement('canvas')\n canvas.width = bitmap.width\n canvas.height = bitmap.height\n canvas.getContext('2d').drawImage(bitmap, 0, 0)\n canvas.toBlob((blob) => {\n resolve(blob ? new File([blob], file.name || 'photo.jpg', { type: 'image/jpeg' }) : file)\n }, 'image/jpeg', 0.92)\n } catch (err) {\n resolve(file)\n }\n })\n }\n const doUpload = async (rawFile) => {\n if (!rawFile) return\n d2.setState({ uploading: true, uploadError: '', photoInvalidReason: '' })\n const stopUploadMsgs = cycleMessages(d2, ['Subindo sua foto…', 'Quase lá…'])\n try {\n const file = await normalizeImageOrientation(rawFile)\n const out = await d2.drive(d2.params.uploadDrive).upload([file])\n stopUploadMsgs()\n const url = out && out[0] && out[0].fileUrl\n if (!url) throw new Error('upload sem retorno')\n d2.setState({ uploading: false, uploadPreview: url, uploadPreviewLoaded: false, validatingPhoto: true })\n const preloadImg = new Image()\n preloadImg.onload = () => { d2.state.uploadPreviewLoaded = true }\n preloadImg.onerror = () => { d2.state.uploadPreviewLoaded = true }\n preloadImg.src = url\n const stopValidateMsgs = cycleMessages(d2, ['Verificando sua foto…', 'Conferindo enquadramento e iluminação…'])\n const validation = await validatePhoto(url)\n stopValidateMsgs()\n if (validation && validation.valid === false) {\n d2.setState({ validatingPhoto: false, uploadPreview: '', photoInvalidReason: validation.reason || 'Essa foto não funcionou — tenta outra.' })\n } else {\n d2.setState({ validatingPhoto: false, userPhotoBodyCoverage: (validation && validation.bodyCoverage) || '' })\n }\n } catch (err) {\n stopUploadMsgs()\n d2.setState({ uploading: false, validatingPhoto: false, uploadError: 'Não deu pra subir a foto. Tenta de novo — ' + (err && err.message ? err.message : 'erro') })\n }\n }\n d2.on('.approve-photo', 'click', () => {\n const url = d2.state.uploadPreview\n if (!url) return\n // Direct proxy assignment — guaranteed synchronous, unlike setState's\n // batched writes — so generate() reads the new userPhoto immediately\n // instead of racing an early-return on stale state.\n d2.state.userPhoto = url\n d2.state.uploadPreview = ''\n syncSession(d2, { userPhotoUrl: url })\n generate(d2)\n })\n d2.on('.retake-photo', 'click', () => {\n console.log('[provador] retake-photo clicked')\n d2.state.uploadPreview = ''\n })\n d2.on('.retry-invalid-photo', 'click', () => {\n d2.setState({ photoInvalidReason: '', uploadPreview: '', uploadError: '' })\n })\n d2.on('.related-prev', 'click', (e, el) => {\n const track = el.parentElement && el.parentElement.querySelector('.related-track')\n if (track) track.scrollBy({ left: -160, behavior: 'smooth' })\n })\n d2.on('.related-next', 'click', (e, el) => {\n const track = el.parentElement && el.parentElement.querySelector('.related-track')\n if (track) track.scrollBy({ left: 160, behavior: 'smooth' })\n })\n d2.on('.cart-item-click', 'click', (e, el) => {\n const idx = Number(el.dataset.idx)\n const item = (d2.state.cart || [])[idx]\n if (item && window.__provadorOpenProduct) window.__provadorOpenProduct(item.productId, item.skuId)\n })\n d2.on('.uploadzone', 'click', () => { d2.$('.filepick')?.click() })\n d2.on('.filepick', 'change', (e, el) => { doUpload(el.files && el.files[0]) })\n d2.on('.uploadzone', 'dragover', (e, el) => { e.preventDefault(); el.classList.add('drag') })\n d2.on('.uploadzone', 'dragleave', (e, el) => { el.classList.remove('drag') })\n d2.on('.uploadzone', 'drop', (e, el) => {\n e.preventDefault(); el.classList.remove('drag')\n const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]\n doUpload(file)\n })\n\n // ---- result actions ----\n d2.on('.act-refazer', 'click', () => { d2.state.showRefazerConfirm = false; generate(d2, { force: true }) })\n d2.on('.act-trocar', 'click', () => { d2.state.userPhoto = ''; d2.state.resultUrl = ''; d2.state.showRefazerConfirm = false; d2.state.screen = 'upload' })\n d2.on('.act-share', 'click', () => {\n const p = d2.state.product || {}\n const priceRaw = (p.priceRange && p.priceRange.sellingPrice && p.priceRange.sellingPrice.lowPrice)\n || (p.items && p.items[0] && p.items[0].sellers && p.items[0].sellers[0] && p.items[0].sellers[0].commertialOffer && p.items[0].sellers[0].commertialOffer.Price)\n || null\n window.__powercordEmit && window.__powercordEmit('tryon-share', {\n productId: p.productId || '',\n productName: p.productName || '',\n price: priceRaw,\n color: d2.state.color || '',\n size: d2.state.size || '',\n skuId: resolveSkuId(p, d2.state.color, d2.state.size),\n resultImageUrl: d2.state.resultUrl || '',\n userPhotoUrl: d2.state.userPhoto || '',\n })\n flashToast(d2, 'Compartilhado!')\n })\n d2.on('.act-feedback-up', 'click', () => {\n d2.setState({ feedbackGiven: 'positive', showRefazerConfirm: false })\n logEvent(d2, 'feedback', 'out', { verdict: 'positive', productId: d2.state.product && d2.state.product.productId, resultUrl: d2.state.resultUrl })\n flashToast(d2, 'Obrigado pelo feedback!')\n })\n d2.on('.act-feedback-down', 'click', () => {\n d2.setState({ feedbackGiven: 'negative', showRefazerConfirm: true })\n logEvent(d2, 'feedback', 'out', { verdict: 'negative', productId: d2.state.product && d2.state.product.productId, resultUrl: d2.state.resultUrl })\n })\n d2.on('.confirm-refazer-yes', 'click', () => { d2.state.showRefazerConfirm = false; generate(d2, { force: true }) })\n d2.on('.confirm-refazer-no', 'click', () => { d2.state.showRefazerConfirm = false })\n d2.on('.addbag', 'click', () => {\n const p = d2.state.product\n const skuId = resolveSkuId(p, d2.state.color, d2.state.size)\n if (!skuId) { flashToast(d2, 'Selecione cor e tamanho antes de adicionar à sacola.'); return }\n // Push a full object (not a bare skuId) — renderCart needs imageUrl/\n // productName to show a real thumb instead of a blank gray tile.\n const priceRaw = (p.priceRange && p.priceRange.sellingPrice && p.priceRange.sellingPrice.lowPrice)\n || (p.items && p.items[0] && p.items[0].sellers && p.items[0].sellers[0] && p.items[0].sellers[0].commertialOffer && p.items[0].sellers[0].commertialOffer.Price)\n || null\n const cartItem = {\n skuId,\n productId: p.productId,\n productName: p.productName,\n imageUrl: imageForColor(p, d2.state.color) || firstImage(p),\n price: priceRaw,\n quantity: 1,\n }\n d2.state.cart = [...(d2.state.cart || []), cartItem]\n window.__powercordEmit && window.__powercordEmit('tryon-add-to-cart', [skuId])\n flashToast(d2, 'Adicionado à sacola.')\n })\n d2.on('.checkout', 'click', () => {\n if (!(d2.state.cart || []).length) { flashToast(d2, 'Sacola vazia — adicione uma peça antes do checkout.'); return }\n window.__powercordEmit && window.__powercordEmit('tryon-checkout', {})\n })\n d2.on('.gitem-hist-click', 'click', async (e, el) => {\n const idx = Number(el.dataset.idx)\n const item = (d2.state.gallery || [])[idx]\n if (!item) return\n await preloadImage(item.url)\n d2.state.resultUrl = item.url\n if (item.product) d2.state.product = item.product\n })\n d2.on('.sugcard-click', 'click', async (e, el) => {\n const idx = Number(el.dataset.idx)\n const pick = (d2.state.suggestions || [])[idx]\n if (!pick) return\n d2.state.screen = 'loading'\n const full = await window.__provadorFetchProduct(pick.productId)\n if (!full) { flashToast(d2, 'Produto não encontrado.'); d2.state.screen = 'loading'; return }\n const item = await enrichWithColorSiblings(full)\n const colors = variationValues(item, 'Cor')\n const sizes = variationValues(item, 'Tamanho')\n d2.setState({\n product: item,\n color: colors[0] || '',\n size: sizes[0] || '',\n lookExtra: null,\n })\n loadCrosssell(d2, item.productId)\n generate(d2)\n })\n },\n\n updated(d2) {\n updateCarouselArrows(d2)\n },\n}\n\nfunction updateCarouselArrows(d2) {\n requestAnimationFrame(() => {\n const root = d2.root\n if (!root || !root.querySelectorAll) return\n root.querySelectorAll('.carousel').forEach((wrap) => {\n const track = wrap.querySelector('.related-track')\n if (!track) return\n const hasOverflow = track.scrollWidth > track.clientWidth + 2\n const prev = wrap.querySelector('.related-prev')\n const next = wrap.querySelector('.related-next')\n if (prev) prev.style.display = hasOverflow ? 'flex' : 'none'\n if (next) next.style.display = hasOverflow ? 'flex' : 'none'\n })\n })\n}\n\nfunction renderSearch(d2) {\n const s = d2.state\n const results = s.results || []\n let list\n if (s.loadingSearch) {\n list = `
  buscando no catálogo John John…
`\n } else if (s.searchError) {\n list = `
${esc(s.searchError)}
`\n } else if (!results.length) {\n list = `
${s.searched ? 'Nada encontrado — tenta outro termo.' : 'Busque uma peça pra começar (ex: \"blusa\", \"saia\", \"vestido\").'}
`\n } else {\n list = `
${results.map((p, i) => {\n const img = thumbImageOf(p.items && p.items[0])\n const price = p.priceRange && p.priceRange.sellingPrice ? d2.fmt.currency(p.priceRange.sellingPrice.lowPrice, 'BRL', { locale: 'pt-BR' }) : ''\n return `
\n
\n
${esc(p.productName)}
${price}
\n
`\n }).join('')}
`\n }\n return `
Catálogo real da John John (VTEX Intelligent Search). O provador mostra como a peça fica em você — não substitui a tabela de medidas.
\n
\n \n \n
\n ${list}`\n}\n\nfunction renderProduct(d2) {\n const p = d2.state.product\n if (!p) return `
Nenhum produto selecionado.
`\n const img = (p.items && p.items[0] && p.items[0].images && p.items[0].images[0] && p.items[0].images[0].imageUrl) || ''\n const price = p.priceRange && p.priceRange.sellingPrice ? d2.fmt.currency(p.priceRange.sellingPrice.lowPrice, 'BRL', { locale: 'pt-BR' }) : ''\n const colors = variationValues(p, 'Cor')\n const sizes = variationValues(p, 'Tamanho')\n const installments = p.priceRange && p.priceRange.sellingPrice ? d2.fmt.currency(p.priceRange.sellingPrice.lowPrice / 6, 'BRL', { locale: 'pt-BR' }) : ''\n const desc = htmlToText(p.description)\n const open = d2.state.openAcc || ''\n return `
\n
\n
\n
\n
\n
${esc(p.brand || 'John John')}
\n
${esc(p.productName)}
\n
\n
\n
\n
${price}
\n
${installments ? `6x de ${installments} sem juros` : ''}
\n ${colors.length ? `
Cores
${colors.map(c =>\n `
${esc(c)}
`).join('')}
` : ''}\n ${sizes.length ? `
Medidas
${sizes.map(sz =>\n `
${esc(sz)}
`).join('')}
\n
Tabela de medidas
` : ''}\n ${isCategoryBlocked(p, d2.state.blocklist)\n ? `
Essa peça (categoria incompatível — ex: bolsa, cinto, carteira) não pode ser experimentada no provador virtual.
`\n : ``}\n
\n
\n
Descrição▼
\n
${esc(desc) || 'Sem descrição disponível para este produto.'}
\n
\n
\n
Encontre o seu tamanho▼
\n
Guia de medidas não disponível neste protótipo — em produção, viria da mesma API de catálogo da John John.
\n
\n
\n
\n
`\n}\n\nfunction renderUpload(d2) {\n const s = d2.state\n\n if (s.validatingPhoto) {\n return `
\n
${esc(s.uploadStageMsg || 'Verificando sua foto…')}
\n
`\n }\n\n if (s.photoInvalidReason) {\n return `
${esc(s.photoInvalidReason)}
\n
Tenta outra foto seguindo as dicas ao lado.
\n `\n }\n\n if (s.uploadPreview) {\n const loaded = !!s.uploadPreviewLoaded\n return `
\n ${loaded ? '' : `
Carregando prévia…
`}\n
\n
Confira sua foto antes de continuar. Ao confirmar, você concorda com os termos de uso do provador virtual (referência — termos completos a definir com a Veste).
\n \n
usar outra foto
`\n }\n return `
\n
\n \n ${s.uploading\n ? `
${esc(s.uploadStageMsg || 'Subindo sua foto…')}
`\n : `
📷
Suba uma imagem
Clique pra escolher uma foto sua
`}\n
\n
\n
Como escolher uma boa foto
\n
    \n
  • De frente, olhando pra câmera
    • \n
  • Corpo inteiro ou pelo menos do tórax pra cima
    • \n
  • Boa iluminação — evite contraluz ou ambientes escuros
    • \n
  • Fundo neutro, sem muita bagunça atrás de você
    • \n
  • Roupas justas ajudam a IA a entender melhor seu corpo
    • \n
  • Evite fotos em grupo — só você na foto
    • \n
\n ${s.uploadError ? `
${esc(s.uploadError)}
` : ''}\n
\n
`\n}\n\nfunction renderResult(d2) {\n const s = d2.state\n const p = s.product || {}\n const priceRaw = (p.priceRange && p.priceRange.sellingPrice && p.priceRange.sellingPrice.lowPrice)\n || (p.items && p.items[0] && p.items[0].sellers && p.items[0].sellers[0] && p.items[0].sellers[0].commertialOffer && p.items[0].sellers[0].commertialOffer.Price)\n || null\n const price = priceRaw ? d2.fmt.currency(priceRaw, 'BRL', { locale: 'pt-BR' }) : ''\n const colors = variationValues(p, 'Cor')\n const sizes = variationValues(p, 'Tamanho')\n const gallery = s.gallery || []\n\n const img = s.resultUrl || s.userPhoto || ''\n const loading = s.generating\n ? `
${esc(s.genStageMsg || 'Analisando a peça e gerando sua prova…')}
Costuma levar de 15 a 25 segundos.
` : ''\n const err = s.genError ? `
\n ${s.genFriendly ? RULER_ICON : WARNING_ICON}\n ${esc(s.genError)}\n
` : ''\n\n return `
\n
\n
${loading}${err}
\n
Imagem gerada por inteligência artificial — é uma representação de como a peça pode ficar em você. Outros produtos que aparecem na foto (acessórios, calçados, etc.) não estão inclusos.
\n ${(!s.generating && (s.resultUrl || s.genError)) ? `\n
\n
${REFRESH_ICON}refazer
\n
${THUMBS_UP_ICON}
\n
${THUMBS_DOWN_ICON}
\n
${UPLOAD_ICON}trocar
\n
\n ${s.showRefazerConfirm ? `\n
\n Não curtiu? Deseja refazer?\n
Sim, refazer
\n
Não
\n
` : ''}\n ` : ''}\n ${gallery.length ? `
${gallery.map((g, i) =>\n `
`).join('')}
` : ''}\n
\n
\n
\n
${esc(p.productName || '')}
\n
${price}
\n
\n ${sizes.length ? `
Medidas
${sizes.map(sz => {\n const oos = !sizeHasStock(p, sz, s.color)\n return `
${esc(sz)}
`\n }).join('')}
` : ''}\n ${colors.length > 1 ? `
Cores
${colors.map(c => {\n const cimg = imageForColor(p, c)\n return `
`\n }).join('')}
` : ''}\n
\n
\n 💬\n Está com dúvidas? Fale com nossa Personal Shopper\n
\n
\n
\n
\"\"/Descubra o seu tamanho
\n
\"\"/Tabela de Medidas
\n
\n
\n \n ${renderSuggestions(s)}\n ${renderCart(s)}\n ${(s.cart || []).length ? '' : ''}\n
\n
`\n}\n\nfunction renderCart(s) {\n const items = s.cart || []\n if (!items.length) return ''\n return `
\n
Sua sacola
\n
${items.map((c, i) => `\n
`).join('')}
\n
`\n}\n\nfunction renderSuggestions(s) {\n const picks = (s.suggestions || []).slice(0, 8)\n if (!picks.length) return ''\n return `
\n
Compre Junto
\n
\n
‹
\n
${picks.map((p, i) =>\n `
`).join('')}
\n
›
\n
\n
`\n}\n\nfunction firstItemWithImages(items) {\n return (items || []).find((it) => it.images && it.images.length && it.images[0] && it.images[0].imageUrl) || null\n}\n\nfunction imageForColor(product, colorName) {\n // Some SKUs in this catalog only carry images on the color's \"representative\"\n // size — other sizes of the exact same color can have an EMPTY images array.\n // Blindly taking the first color-matching item can land on one of those and\n // show a blank swatch, so scan every matching item for one that actually has\n // a photo before falling back.\n const colorItems = (product.items || []).filter((it) =>\n (it.variations || []).some((v) => v.name === 'Cor' && (v.values || [])[0] === colorName))\n const item = firstItemWithImages(colorItems)\n return (item && thumbImageOf(item)) || firstImage(product)\n}\n\nasync function loadCrosssell(d2, productId) {\n // \"Compre Junto\" = VTEX's own real cross-sell recommendations — merges\n // both recommendation types (\"accessories\" a.k.a. Complete o Look, and\n // \"showtogether\") since showtogether alone is often empty for a given\n // product while accessories usually has real curated data.\n try {\n const buildTargetUrl = (type) => {\n const variables = JSON.stringify({ identifier: { field: 'id', value: String(productId) }, type, filter: 'ALL_AVAILABLE' })\n const variablesB64 = btoa(variables)\n const extensions = JSON.stringify({\n persistedQuery: {\n version: 1,\n sha256Hash: 'efbe0d6d6698fa852dd37a3a8cbe219c3adaf8baaf342402addd5d0f378927f7',\n sender: 'johnjohndenim.buy-together@0.x',\n provider: 'johnjohndenim.product-recommendations@0.x',\n },\n variables: variablesB64,\n })\n const params = new URLSearchParams({\n workspace: 'master', maxAge: 'short', appsEtag: 'remove', domain: 'store',\n locale: 'pt-BR', operationName: 'CROSSELING_PRODUCTS', variables: '{}', extensions,\n })\n return 'https://www.johnjohndenim.com.br/_v/segment/graphql/v1?' + params.toString()\n }\n const fetchType = async (type) => {\n const targetUrl = buildTargetUrl(type)\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-crosssell?targetUrl=' + encodeURIComponent(targetUrl))\n const json = await res.json()\n return (json && json.data && json.data.data && json.data.data.productRecommendations) || []\n }\n const [accessories, showtogether] = await Promise.all([fetchType('accessories'), fetchType('showtogether')])\n const seen = new Set([String(productId)])\n const picks = []\n ;[...accessories, ...showtogether].forEach((rec) => {\n const id = String(rec.productId)\n if (seen.has(id)) return\n seen.add(id)\n const firstItem = (rec.items || [])[0]\n const priceRaw = firstItem && firstItem.sellers && firstItem.sellers[0] && firstItem.sellers[0].commertialOffer && firstItem.sellers[0].commertialOffer.Price\n const imageUrl = thumbImageOf(firstItem)\n picks.push({ productId: rec.productId, productName: rec.productName, price: priceRaw || null, imageUrl })\n })\n d2.state.suggestions = picks.slice(0, 8)\n } catch (err) {\n console.warn('[provador] crosssell failed', err)\n }\n}\n\nasync function enrichWithColorSiblings(product) {\n // In this catalog each COLOR is its own separate productId, and there's no\n // reliable NAME-based way to tell a real color sibling apart from a\n // same-family style with a different print (a name heuristic here caused a\n // real false-positive merge across two different-gender products). Use\n // VTEX's own first-party \"similars\" endpoint instead — it's the store's\n // own manually-curated same-item/different-color linking, not a guess.\n try {\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-similars?productId=' + encodeURIComponent(product.productId))\n const json = await res.json()\n const siblings = (json && json.data && json.data.products) || []\n if (!siblings.length) return product\n const mergedItems = [...(product.items || [])]\n siblings.forEach((sib) => {\n (sib.items || []).forEach((it) => { mergedItems.push(it) })\n })\n return { ...product, items: mergedItems }\n } catch (err) {\n return product\n }\n}\n\nfunction firstImage(p) {\n const item = firstItemWithImages((p && p.items) || [])\n return thumbImageOf(item)\n}\n\n// The catalog's FIRST product photo is almost always the model wearing a full,\n// styled look (belt, bag, top, pants all in one shot) — great for the PDP hero,\n// useless as a small thumbnail since it doesn't say which product it's pointing\n// at. The SECOND photo is normally the flat/still shot of just that one item, so\n// prefer it for any small thumbnail (search cards, color swatches, cart,\n// Compre Junto). Falls back to the first photo if there's no second one.\nfunction thumbImageOf(item) {\n const imgs = (item && item.images) || []\n return (imgs[1] && imgs[1].imageUrl) || (imgs[0] && imgs[0].imageUrl) || ''\n}\n\nfunction allImages(p, colorName) {\n // After color-sibling enrichment, p.items can hold SKUs from several\n // different sibling products (one per color) — items[0] is no longer\n // guaranteed to be the color actually selected. Resolve by color when we\n // have one; also skip any matching item that carries an empty images\n // array (some size SKUs in this catalog don't have their own photos).\n const items = (p && p.items) || []\n const colorItems = colorName\n ? items.filter((it) => (it.variations || []).some((v) => v.name === 'Cor' && (v.values || [])[0] === colorName))\n : []\n const item = firstItemWithImages(colorItems) || firstItemWithImages(items)\n const imgs = (item && item.images) || []\n return imgs.map((i) => i.imageUrl).filter(Boolean).slice(0, 8)\n}\n\nfunction resolveSkuId(product, color, size) {\n if (!product) return null\n const items = product.items || []\n const match = items.find((it) => {\n const vals = {}\n ;(it.variations || []).forEach((v) => { vals[v.name] = (v.values || [])[0] })\n const colorOk = !color || vals['Cor'] === color\n const sizeOk = !size || vals['Tamanho'] === size || vals['Tamanho do Produto'] === size\n return colorOk && sizeOk\n })\n return (match && match.itemId) || (items[0] && items[0].itemId) || null\n}\n\nfunction variationValues(product, name) {\n const aliases = name === 'Tamanho' ? ['Tamanho', 'Tamanho do Produto'] : [name]\n const set = new Set()\n ;(product.items || []).forEach((it) => {\n (it.variations || []).forEach((v) => { if (aliases.indexOf(v.name) > -1) (v.values || []).forEach((val) => set.add(val)) })\n })\n return Array.from(set)\n}\n\nfunction sizeHasStock(product, sizeVal, colorVal) {\n const items = (product && product.items) || []\n let candidates = items.filter((it) => {\n const vals = {}\n ;(it.variations || []).forEach((v) => { vals[v.name] = (v.values || [])[0] })\n return vals['Tamanho'] === sizeVal || vals['Tamanho do Produto'] === sizeVal\n })\n if (colorVal) {\n const withColor = candidates.filter((it) => {\n const vals = {}\n ;(it.variations || []).forEach((v) => { vals[v.name] = (v.values || [])[0] })\n return vals['Cor'] === colorVal\n })\n if (withColor.length) candidates = withColor\n }\n if (!candidates.length) return true\n return candidates.some((it) => {\n const seller = it.sellers && it.sellers[0]\n const offer = seller && seller.commertialOffer\n if (!offer || typeof offer.AvailableQuantity !== 'number') return true\n return offer.AvailableQuantity > 0 && offer.IsAvailable !== false\n })\n}\n\nasync function runSearch(d2) {\n const input = d2.$('.searchbar input')\n const q = (input && input.value || '').trim()\n if (!q) return\n d2.setState({ loadingSearch: true, searchError: '', query: q, searched: true })\n try {\n const base = d2.rush(d2.params.searchApi).url()\n const res = await fetch(base + '?search=' + encodeURIComponent(q))\n if (!res.ok) throw new Error('HTTP ' + res.status)\n const json = await res.json()\n const products = (json && json.data && json.data.products) || []\n d2.setState({ results: products, loadingSearch: false })\n } catch (err) {\n d2.setState({ loadingSearch: false, searchError: 'Busca falhou: ' + (err && err.message ? err.message : 'erro') })\n }\n}\n\n\n\nasync function generate(d2, opts) {\n const s = d2.state\n const p = s.product\n const candidateImgs = allImages(p, s.color)\n if (!s.userPhoto || !candidateImgs.length) return\n const extra = s.lookExtra\n const extraCandidateImgs = extra ? allImages(extra) : []\n const force = !!(opts && opts.force)\n const blockedCat = matchedBlockedCategory(p, s.blocklist)\n if (blockedCat) {\n // Defense-in-depth: the CTA is already hidden for a blocked category, but\n // the host can fire tryon-open directly with any productId (openProduct()\n // also guards this) — and jj-tryon-generate re-checks blockedCategory\n // server-side regardless of what the client sends.\n d2.setState({ screen: 'result', generating: false, genError: 'Essa peça não pode ser experimentada no provador virtual (categoria incompatível).', genFriendly: true, resultUrl: '' })\n return\n }\n const cacheKey = tryonCacheKey(p, extra, s.color, s.size, s.userPhoto)\n const cachedUrl = force ? null : tryonResultCache.get(cacheKey)\n if (cachedUrl) {\n d2.setState({ screen: 'result', generating: true, genError: '', genFriendly: false, resultUrl: '', feedbackGiven: '', showRefazerConfirm: false })\n await preloadImage(cachedUrl)\n const cacheName = p.productName + (extra ? ' + ' + extra.productName : '')\n const cacheGallery = [{ url: cachedUrl, name: cacheName, product: p }, ...(s.gallery || [])].slice(0, 8)\n d2.setState({ resultUrl: cachedUrl, generating: false, gallery: cacheGallery })\n return\n }\n d2.setState({ screen: 'result', generating: true, genError: '', genFriendly: false, resultUrl: '', feedbackGiven: '', showRefazerConfirm: false })\n const stopGenMsgs = cycleMessages(d2, [\n 'Analisando a peça…',\n 'Aplicando a peça na sua foto…',\n 'Ajustando os detalhes finais…',\n ], 4000, 'genStageMsg')\n try {\n // Unified generation pipeline — same rush used by provador-standalone AND\n // tryon-test-lab, so both always run the exact same analyze+prompt+draw\n // strategy. The prompt/strategy itself lives ONLY server-side (never\n // shipped to the browser bundle).\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-tryon-generate', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n userPhotoUrl: s.userPhoto,\n garmentImages: candidateImgs,\n garmentProductName: p.productName,\n extraImages: extraCandidateImgs,\n extraProductName: extra ? extra.productName : '',\n userPhotoBodyCoverage: s.userPhotoBodyCoverage || '',\n blockedCategory: blockedCat || '',\n }),\n })\n const json = await res.json()\n const result = (json && json.data) || {}\n if (result.blocked) {\n stopGenMsgs()\n d2.setState({\n generating: false,\n genError: result.blockedReason || 'Essa foto não dá pra provar essa peça direito — tenta com outra foto.',\n genFriendly: true,\n })\n return\n }\n const url = result.resultUrl\n if (!url) throw new Error('sem imagem retornada')\n // Preload before swapping the background-image — otherwise the loading\n // overlay disappears the instant resultUrl is set, but the browser still\n // needs to download the (often multi-MB) generated PNG, so the panel\n // flashes blank/half-drawn for a beat. Keep the spinner up until the\n // image is actually decoded and ready to paint.\n await preloadImage(url)\n stopGenMsgs()\n tryonResultCache.set(cacheKey, url)\n const name = p.productName + (extra ? ' + ' + extra.productName : '')\n const gallery = [{ url, name, garment: result.garmentImageUsed, product: p }, ...(s.gallery || [])].slice(0, 8)\n d2.setState({ resultUrl: url, generating: false, gallery })\n logGarmentSwap(d2, {\n productId: p.productId,\n productName: p.productName,\n skuId: resolveSkuId(p, s.color, s.size),\n userPhotoUrl: s.userPhoto,\n referenceImagesUsed: result.referenceImagesUsed || [],\n resultImageUrl: url,\n analysisJson: JSON.stringify({ analysis: result.analysisG, extraAnalysis: result.analysisE, retried: !!result.retried, retryReason: result.retryReason || '' }),\n success: true,\n errorMessage: '',\n })\n } catch (err) {\n stopGenMsgs()\n const technicalDetail = (err && err.message) ? err.message : 'erro'\n const msg = 'Não deu pra gerar sua prova agora — tenta de novo em instantes.'\n d2.setState({ generating: false, genError: msg, genFriendly: false })\n logGarmentSwap(d2, {\n productId: p && p.productId,\n productName: p && p.productName,\n skuId: p ? resolveSkuId(p, s.color, s.size) : '',\n userPhotoUrl: s.userPhoto,\n referenceImagesUsed: [],\n resultImageUrl: '',\n analysisJson: '',\n success: false,\n errorMessage: 'Geração falhou: ' + technicalDetail,\n })\n }\n}\n\n// Tiny nanoid-compatible generator (URL-safe alphabet, 21 chars) — used\n// synchronously at session-init time, so it can't depend on an async d2.lib load.\nfunction nanoid(size = 21) {\n const alphabet = 'ModuleSymbhasOwnPr0123456789ABCDEFGHNRVfgctiUvz_-wLunknI'\n let id = ''\n const bytes = crypto.getRandomValues(new Uint8Array(size))\n for (let i = 0; i < size; i++) id += alphabet[bytes[i] & 63]\n return id\n}\n\nasync function syncSession(d2, extra) {\n try {\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/tryon-session-sync', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n sessionId: d2.state.sessionId,\n customerId: d2.state.customerId || '',\n anonymous: !d2.state.customerId,\n originHost: (document.referrer && new URL(document.referrer).host) || '',\n ...extra,\n }),\n })\n const json = await res.json()\n return (json && json.data) || json\n } catch (err) {\n console.warn('[provador] session sync failed', err)\n return null\n }\n}\n\nasync function initSession(d2, sessionCodeFromHost) {\n const sessionId = sessionCodeFromHost || ('anon-' + nanoid())\n d2.setState({ sessionId, customerId: sessionCodeFromHost || '' })\n const synced = await syncSession(d2)\n if (synced && synced.lastUserPhotoUrl && !d2.state.userPhoto) {\n d2.state.userPhoto = synced.lastUserPhotoUrl\n }\n}\n\nasync function logEvent(d2, eventName, direction, payload) {\n if (!d2.state.sessionId) return\n try {\n await fetch('https://veste-app.data2apis.com/rush/listener/tryon-log-event', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n sessionId: d2.state.sessionId,\n eventName,\n direction,\n payloadJson: JSON.stringify(payload == null ? null : payload),\n }),\n })\n } catch (err) {\n console.warn('[provador] event log failed', err)\n }\n}\n\nasync function logGarmentSwap(d2, fields) {\n if (!d2.state.sessionId) return\n try {\n await fetch('https://veste-app.data2apis.com/rush/listener/tryon-log-swap', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ sessionId: d2.state.sessionId, ...fields }),\n })\n } catch (err) {\n console.warn('[provador] garment-swap log failed', err)\n }\n}\n\nfunction flashToast(d2, msg) {\n d2.state.toast = msg\n clearTimeout(flashToast._t)\n flashToast._t = setTimeout(() => { d2.state.toast = '' }, 2600)\n}\n\nfunction preloadImage(url) {\n return new Promise((resolve) => {\n if (!url) { resolve(); return }\n const img = new Image()\n img.onload = () => resolve()\n img.onerror = () => resolve()\n img.src = url\n })\n}\n\nfunction cycleMessages(d2, messages, intervalMs = 1800, stateKey = 'uploadStageMsg') {\n let i = 0\n d2.state[stateKey] = messages[0]\n const t = setInterval(() => {\n i = (i + 1) % messages.length\n d2.state[stateKey] = messages[i]\n }, intervalMs)\n return () => clearInterval(t)\n}\n\nasync function validatePhoto(url) {\n try {\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-validate-photo', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageUrl: url }),\n })\n const json = await res.json()\n return (json && json.data) || null\n } catch (err) {\n console.warn('[provador] photo validation failed', err)\n return null\n }\n}\n\nfunction htmlToText(html) {\n if (!html) return ''\n const div = document.createElement('div')\n div.innerHTML = String(html)\n return (div.textContent || '').replace(/\\s+/g, ' ').trim()\n}\n\nfunction esc(s) {\n return String(s == null ? '' : s).replace(/&/g, '&').replace(//g, '>').replace(/\"/g, '"')\n}\n"}},"searchApi":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"searchApi"}}}},"drawAssistant":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"drawAssistant"}}}},"uploadDrive":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"uploadDrive"}}}},"analyzeApi":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"analyzeApi"}}}}}}}}}},{"_id":"6ab3d7501a04d8166dcff3c7","component":"data2-core-types@Component","system":"698a0c028a310c894be98bc8","params":{"extends":"data2-core-primitives@Block","component":"tryon-test-lab","package":"veste-app","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"export default {\n css: `\n:host{display:block;width:100%;height:100%}\n.wrap{\n --paper:#F7F7F5; --ink:#0a0a0a; --muted:#6b6b6b; --linha:#e2e2e2; --card:#fff;\n --ok:#1f7a3d; --bad:#b3261e;\n width:100%;height:100%;overflow-y:auto;background:var(--paper);color:var(--ink);\n font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;\n box-sizing:border-box;\n}\n*{box-sizing:border-box}\n.body{padding:clamp(16px,3vw,36px);max-width:1200px;margin:0 auto}\n.hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}\n.hdr h1{font-size:18px;font-weight:700;margin:0}\n.hdr span{font-size:12px;color:var(--muted)}\n.sub{font-size:12.5px;color:var(--muted);margin-bottom:24px;line-height:1.5;max-width:70ch}\n.section{background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:18px;margin-bottom:16px}\n.section h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:700}\n\n.photorow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}\n.photothumb{width:88px;height:112px;border-radius:8px;background:#eee;background-size:cover;background-position:center;border:1px solid var(--linha);flex:none}\n.uploadzone{border:2px dashed var(--linha);border-radius:10px;padding:20px;text-align:center;cursor:pointer;\n font-size:13px;color:var(--muted);flex:1;min-width:200px}\n.uploadzone:hover{border-color:#999}\n.uploadzone.drag{border-color:var(--ink);background:#f2f2f2}\n.smalllink{font-size:12px;color:var(--ink);text-decoration:underline;cursor:pointer}\n\n.searchbar{display:flex;gap:8px;margin-bottom:14px}\n.searchbar input{flex:1;padding:10px 12px;border:1px solid var(--linha);border-radius:8px;font-size:14px}\n.searchbar button{padding:0 18px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;cursor:pointer}\n.searchbar button:disabled{opacity:.5}\n.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}\n.gcard{position:relative;border:2px solid var(--linha);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff}\n.gcard.selected{border-color:var(--ink)}\n.gcard.disabled{opacity:.35;cursor:not-allowed}\n.gcard .ph{width:100%;aspect-ratio:3/4;background:#eee;background-size:cover;background-position:center}\n.gcard .nm{font-size:10.5px;padding:6px 8px;line-height:1.3;min-height:30px}\n.gcard .catpill{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:#fff;font-size:9px;\n letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:999px}\n.gcard .check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:999px;background:var(--ink);\n color:#fff;display:none;align-items:center;justify-content:center;font-size:12px}\n.gcard.selected .check{display:flex}\n.empty{padding:30px 0;text-align:center;color:var(--muted);font-size:13px}\n.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.15);border-top-color:var(--ink);\n border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}\n@keyframes sp{to{transform:rotate(360deg)}}\n\n.selrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}\n.selchip{display:flex;align-items:center;gap:8px;border:1px solid var(--linha);border-radius:999px;padding:4px 12px 4px 4px;font-size:12.5px}\n.selchip img{width:26px;height:26px;border-radius:999px;object-fit:cover}\n.selchip .x{cursor:pointer;color:var(--muted);font-weight:700}\n.testbtn{padding:12px 22px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-size:13.5px;\n font-weight:600;cursor:pointer}\n.testbtn:disabled{opacity:.4;cursor:default}\n\n.resultgrid{display:grid;grid-template-columns:340px 1fr;gap:22px}\n@media(max-width:700px){.resultgrid{grid-template-columns:1fr}}\n.rimg{width:100%;aspect-ratio:3/4;border-radius:10px;background:#eee;background-size:cover;background-position:center;\n position:relative;overflow:hidden}\n.rimg .load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;\n background:rgba(247,247,245,.9);font-size:12.5px;color:var(--muted)}\n.verdictrow{display:flex;gap:10px;margin-top:14px}\n.vbtn{flex:1;padding:12px;border-radius:8px;border:1.5px solid var(--linha);background:#fff;font-size:13.5px;\n font-weight:600;cursor:pointer}\n.vbtn.ok{border-color:var(--ok);color:var(--ok)}\n.vbtn.bad{border-color:var(--bad);color:var(--bad)}\n.notebox{margin-top:10px}\n.notebox textarea{width:100%;min-height:70px;border:1px solid var(--linha);border-radius:8px;padding:10px;font-size:13px;\n font-family:inherit;resize:vertical}\n.notebox button{margin-top:8px;padding:9px 16px;border:0;border-radius:8px;background:var(--bad);color:#fff;\n font-size:13px;cursor:pointer}\n.debugbox{margin-top:16px;font-size:11.5px;color:var(--muted);background:#fafafa;border:1px solid var(--linha);\n border-radius:8px;padding:10px;line-height:1.6;white-space:pre-wrap}\n.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;\n padding:12px 20px;border-radius:999px;font-size:13px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.25)}\n`,\n\n render(d2) {\n const s = d2.state\n const photoRow = `
\n ${s.testPhoto ? `
` : ''}\n
\n \n ${s.uploading ? ` ${esc(s.uploadStageMsg || 'subindo…')}` : (s.testPhoto ? 'Trocar a foto de teste' : 'Clique ou arraste uma foto de teste aqui')}\n
\n
\n ${s.uploadError ? `
${esc(s.uploadError)}
` : ''}`\n\n let searchBlock\n if (s.loadingSearch) {\n searchBlock = `
buscando…
`\n } else if (s.searchError) {\n searchBlock = `
${esc(s.searchError)}
`\n } else if (!(s.results || []).length) {\n searchBlock = `
${s.searched ? 'Nada encontrado.' : 'Busque uma peça (ex: \"blusa\", \"calça\").'}
`\n } else {\n const sel = s.selected || []\n searchBlock = `
${s.results.map((p, i) => {\n const img = firstImage(p)\n const cat = classify(p)\n const isSel = sel.some((x) => x.productId === p.productId)\n const disabled = !isSel && !canAdd(sel, p)\n return `
\n
${cat}
\n
✓
\n
\n
${esc(p.productName)}
\n
`\n }).join('')}
`\n }\n\n const sel = s.selected || []\n const selRow = sel.length ? `
${sel.map((p, i) =>\n `
${esc(p.productName)}×
`\n ).join('')}\n \n
` : `
Selecione 1 peça, ou 2 compatíveis (blusa + calça), pra testar.
`\n\n let resultBlock = ''\n if (s.testing || s.resultUrl || s.genError) {\n const loading = s.testing ? `
 Analisando e gerando…
` : ''\n const img = s.resultUrl || s.testPhoto || ''\n const err = s.genError ? `
${esc(s.genError)}
` : ''\n const verdict = (s.resultUrl && !s.testing) ? `
\n \n \n
\n ${s.showNote ? `
\n \n \n
` : ''}\n ${s.reported ? `
Registrado — obrigado!
` : ''}` : ''\n const debug = (s.lastAnalyses && s.lastAnalyses.length) ? `
${s.lastAnalyses.map((a, i) =>\n `#${i + 1}: ${esc(a.garment_type)} · zona: ${esc(a.body_zone)} · outros na foto: ${esc(a.other_items_in_photo || 'none')}\\nimagem usada: ${esc(a.imageUrl)}`\n ).join('\\n\\n')}
` : ''\n resultBlock = `

Resultado

\n
\n
${loading}
\n
${err}${verdict}${debug}
\n
\n
`\n }\n\n const toast = s.toast ? `
${esc(s.toast)}
` : ''\n\n return `
\n

Provador · Test Lab

uso interno — não é a experiência do cliente
\n
Suba uma foto de teste, escolha 1 ou 2 peças compatíveis (blusa + calça), gere a prova e reporte se ficou bom ou não. Todo problema reportado fica salvo pra gente melhorar o pipeline.
\n

1 · Foto de teste

${photoRow}
\n

2 · Escolher peça(s)

\n
\n \n \n
\n ${searchBlock}\n
${selRow}
\n
\n ${resultBlock}\n
${toast}`\n },\n\n mounted(d2) {\n d2.on('.searchbar input', 'keydown', (e) => { if (e.key === 'Enter') runSearch(d2) })\n d2.on('.go', 'click', () => runSearch(d2))\n\n d2.on('.uploadzone', 'click', () => { d2.$('.filepick')?.click() })\n d2.on('.filepick', 'change', (e, el) => { doUpload(d2, el.files && el.files[0]) })\n d2.on('.uploadzone', 'dragover', (e, el) => { e.preventDefault(); d2.state.dragging = true })\n d2.on('.uploadzone', 'dragleave', () => { d2.state.dragging = false })\n d2.on('.uploadzone', 'drop', (e, el) => {\n e.preventDefault(); d2.state.dragging = false\n const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]\n doUpload(d2, file)\n })\n\n d2.on('.gcard', 'click', (e, el) => {\n if (el.classList.contains('disabled')) return\n const idx = Number(el.dataset.idx)\n const p = (d2.state.results || [])[idx]\n if (!p) return\n const sel = d2.state.selected || []\n const already = sel.findIndex((x) => x.productId === p.productId)\n if (already > -1) {\n d2.state.selected = sel.filter((_, i) => i !== already)\n } else if (canAdd(sel, p)) {\n d2.state.selected = [...sel, p]\n } else {\n flashToast(d2, sel.length >= 2 ? 'Já tem 2 peças — remova uma pra trocar.' : 'Só dá pra combinar peças compatíveis (blusa + calça).')\n }\n })\n d2.on('.selchip .x', 'click', (e, el) => {\n const idx = Number(el.dataset.idx)\n d2.state.selected = (d2.state.selected || []).filter((_, i) => i !== idx)\n })\n\n d2.on('.testbtn', 'click', () => runTest(d2))\n d2.on('.act-ok', 'click', () => report(d2, 'sucesso', ''))\n d2.on('.act-bad', 'click', () => { d2.state.showNote = true })\n d2.on('.act-sendbad', 'click', (e, el) => {\n const ta = el.parentElement.querySelector('textarea')\n report(d2, 'problema', ta ? ta.value : '')\n })\n },\n}\n\nfunction firstImage(p) {\n return (p && p.items && p.items[0] && p.items[0].images && p.items[0].images[0] && p.items[0].images[0].imageUrl) || ''\n}\n\nfunction allImages(p) {\n const imgs = (p && p.items && p.items[0] && p.items[0].images) || []\n return imgs.map((i) => i.imageUrl).filter(Boolean).slice(0, 8)\n}\n\nfunction classify(p) {\n const text = ((p.categories || []).join(' ') + ' ' + (p.productName || '')).toLowerCase()\n if (/vestido/.test(text)) return 'vestido'\n if (/cal(ç|c)a|saia|short|bermuda/.test(text)) return 'bottom'\n if (/camis|blusa|regata|cropped|malha|su[eé]ter|cardigan/.test(text)) return 'top'\n if (/jaqueta|casaco|blazer/.test(text)) return 'outerwear'\n return 'other'\n}\n\nfunction canAdd(selected, candidate) {\n if (selected.length === 0) return true\n if (selected.length >= 2) return false\n const a = classify(selected[0])\n const b = classify(candidate)\n const pair = [a, b].sort().join('+')\n return pair === 'bottom+top'\n}\n\nasync function runSearch(d2) {\n const input = d2.$('.searchbar input')\n const q = (input && input.value || '').trim()\n if (!q) return\n d2.setState({ loadingSearch: true, searchError: '', query: q, searched: true })\n try {\n const base = d2.rush(d2.params.searchApi).url()\n const res = await fetch(base + '?search=' + encodeURIComponent(q))\n if (!res.ok) throw new Error('HTTP ' + res.status)\n const json = await res.json()\n const products = (json && json.data && json.data.products) || []\n d2.setState({ results: products, loadingSearch: false })\n } catch (err) {\n d2.setState({ loadingSearch: false, searchError: 'Busca falhou: ' + (err && err.message ? err.message : 'erro') })\n }\n}\n\n// Phone cameras (especially iPhone) store the raw sensor pixels in landscape\n// and rely on an EXIF Orientation tag for viewers to rotate on display —\n// browsers respect it, but many backends (vision/image-gen APIs included)\n// read the raw bytes and ignore it. Re-painting onto a bakes in\n// whatever orientation the browser's own EXIF-aware decoder already applied,\n// so the uploaded file always matches what the preview showed.\nfunction normalizeImageOrientation(file) {\n return new Promise(async (resolve) => {\n if (!file || !/^image\\//.test(file.type)) { resolve(file); return }\n try {\n // See provador-standalone's normalizeImageOrientation for why this must\n // use createImageBitmap (EXIF-aware) and never +drawImage (not).\n const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' })\n const canvas = document.createElement('canvas')\n canvas.width = bitmap.width\n canvas.height = bitmap.height\n canvas.getContext('2d').drawImage(bitmap, 0, 0)\n canvas.toBlob((blob) => {\n resolve(blob ? new File([blob], file.name || 'photo.jpg', { type: 'image/jpeg' }) : file)\n }, 'image/jpeg', 0.92)\n } catch (err) {\n resolve(file)\n }\n })\n}\n\nasync function doUpload(d2, rawFile) {\n if (!rawFile) return\n d2.setState({ uploading: true, uploadError: '' })\n try {\n const file = await normalizeImageOrientation(rawFile)\n const out = await d2.drive(d2.params.uploadDrive).upload([file])\n const url = out && out[0] && out[0].fileUrl\n if (!url) throw new Error('upload sem retorno')\n d2.state.uploadStageMsg = 'Verificando enquadramento da foto…'\n const validation = await validatePhoto(url)\n if (validation && validation.valid === false) {\n d2.setState({ uploading: false, uploadError: validation.reason || 'Essa foto não serve pro provador — tenta outra.' })\n return\n }\n d2.setState({ testPhoto: url, testPhotoBodyCoverage: (validation && validation.bodyCoverage) || '', uploading: false })\n } catch (err) {\n d2.setState({ uploading: false, uploadError: 'Falha no upload: ' + (err && err.message ? err.message : 'erro') })\n }\n}\n\nasync function validatePhoto(url) {\n try {\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-validate-photo', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageUrl: url }),\n })\n const json = await res.json()\n return (json && json.data) || null\n } catch (err) {\n console.warn('[test-lab] photo validation failed', err)\n return null\n }\n}\n\n\n\nasync function runTest(d2) {\n const s = d2.state\n const sel = s.selected || []\n if (!s.testPhoto || !sel.length) return\n d2.setState({ testing: true, resultUrl: '', genError: '', reported: false, showNote: false, noteDraft: '' })\n try {\n // Same unified rush the real app uses — lab and app can never drift onto\n // different analyze/prompt/draw strategies again.\n const garment = sel[0]\n const extra = sel[1] || null\n const res = await fetch('https://veste-app.data2apis.com/rush/listener/jj-tryon-generate', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n userPhotoUrl: s.testPhoto,\n garmentImages: allImages(garment),\n garmentProductName: garment.productName,\n extraImages: extra ? allImages(extra) : [],\n extraProductName: extra ? extra.productName : '',\n userPhotoBodyCoverage: s.testPhotoBodyCoverage || '',\n }),\n })\n const json = await res.json()\n const result = (json && json.data) || {}\n if (result.blocked) throw new Error(result.blockedReason || 'Bloqueado pelo pipeline.')\n const url = result.resultUrl\n if (!url) throw new Error('sem imagem retornada')\n const lastAnalyses = [\n result.analysisG ? { ...result.analysisG, imageUrl: result.garmentImageUsed } : null,\n result.analysisE ? { ...result.analysisE, imageUrl: result.extraImageUsed } : null,\n ].filter(Boolean)\n d2.setState({ resultUrl: url, testing: false, lastAnalyses })\n } catch (err) {\n d2.setState({ testing: false, genError: 'Falhou: ' + (err && err.message ? err.message : 'erro') })\n }\n}\n\nasync function hostGeneratedImage(d2, dataUri) {\n if (!dataUri || !dataUri.startsWith('data:')) return dataUri\n try {\n const [meta, b64] = dataUri.split(',')\n const bin = atob(b64)\n const bytes = new Uint8Array(bin.length)\n for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)\n const type = (meta.match(/data:(.*?);/) || [])[1] || 'image/png'\n const file = new File([bytes], `tryon-${Date.now()}.png`, { type })\n const out = await d2.drive(d2.params.uploadDrive).upload([file])\n return (out && out[0] && out[0].fileUrl) || dataUri\n } catch (err) {\n return dataUri\n }\n}\n\nasync function report(d2, verdict, note) {\n const s = d2.state\n const sel = s.selected || []\n try {\n const hostedResultUrl = await hostGeneratedImage(d2, s.resultUrl)\n await d2.data('feedbackDs').create({\n verdict,\n note: note || '',\n productNames: sel.map((p) => p.productName).join(' + '),\n productIds: sel.map((p) => p.productId).join(','),\n categories: sel.map(classify).join('+'),\n userPhotoUrl: s.testPhoto,\n resultImageUrl: hostedResultUrl,\n referenceImagesUsed: (s.lastAnalyses || []).map((a) => a.imageUrl).join(', '),\n analysisJson: JSON.stringify(s.lastAnalyses || []),\n testedAt: new Date().toISOString(),\n })\n d2.setState({ reported: true, showNote: false })\n flashToast(d2, verdict === 'sucesso' ? 'Sucesso registrado!' : 'Problema registrado — obrigado!')\n } catch (err) {\n flashToast(d2, 'Falha ao registrar: ' + (err && err.message ? err.message : 'erro'))\n }\n}\n\nfunction flashToast(d2, msg) {\n d2.state.toast = msg\n clearTimeout(flashToast._t)\n flashToast._t = setTimeout(() => { d2.state.toast = '' }, 2600)\n}\n\nfunction esc(s) {\n return String(s == null ? '' : s).replace(/&/g, '&').replace(//g, '>').replace(/\"/g, '"')\n}\n"}},"searchApi":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"searchApi"}}}},"analyzeApi":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"analyzeApi"}}}},"drawAssistant":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"drawAssistant"}}}},"uploadDrive":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"uploadDrive"}}}},"feedbackDs":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"feedbackDs"}}}}}}}}}},{"_id":"6ab3fbe732359c5bc8fdcbc6","component":"data2-core-types@Component","system":"698a0c028a310c894be98bc8","params":{"extends":"data2-core-primitives@Block","component":"docs-tryon","package":"veste-app","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const GUEST_URL = 'https://provador.veste-app.next.data2.app'\n\nconst EVENTS = [\n { name: 'tryon-initialize', dir: 'out', payload: 'customerId: string', desc: 'Enviar assim que onInitialized disparar. Vazio/null → Data2 trata como sessão anônima e gera um id aleatório.' },\n { name: 'tryon-open', dir: 'out', payload: '{ productId, skuId? }', desc: 'Abre o provador nesse produto. skuId (opcional) pré-seleciona cor/tamanho. productId vazio mostra o catálogo interno.' },\n { name: 'tryon-add-to-cart', dir: 'in', payload: '[skuID, ...]', desc: 'Cliente clicou \"adicionar à sacola\" dentro do provador. Chame sua própria API de carrinho com esses SKUs.' },\n { name: 'tryon-checkout', dir: 'in', payload: '{} (vazio)', desc: 'Só é enviado se o carrinho do lado Data2 tiver itens. Redirecione o cliente pro checkout/PDP.' },\n { name: 'tryon-size-bay-size', dir: 'in', payload: 'productId: string', desc: 'Cliente clicou em \"Descubra o seu tamanho\". Abra seu próprio fluxo de recomendação de tamanho (SizeBay ou equivalente) pra esse produto.' },\n { name: 'tryon-size-bay-measures', dir: 'in', payload: 'productId: string', desc: 'Cliente clicou em \"Tabela de Medidas\". Abra sua própria tabela de medidas pra esse produto.' },\n { name: 'tryon-personalShopper', dir: 'in', payload: 'productId: string', desc: '⚠️ Ainda não confirmado com o time Veste — nome de evento sujeito a mudança. Cliente clicou em \"Fale com nossa Personal Shopper\". Abra seu fluxo de atendimento/WhatsApp pra esse produto.' },\n { name: 'tryon-share', dir: 'in', payload: '{ productId, productName, price, color, size, skuId, resultImageUrl, userPhotoUrl }', desc: 'Cliente clicou em \"Compartilhar\". resultImageUrl vem vazio se ele ainda não gerou nenhuma prova (compartilhando direto da página do produto). Use pra abrir seu próprio share sheet / gerar o link.' },\n { name: 'close-tryon', dir: 'in', payload: '{} (vazio)', desc: 'Cliente fechou o provador. Esconda/feche o lightbox.' },\n { name: 'cart-state', dir: 'out', payload: '{ cartItems: [{ skuId, productId, productName, imageUrl, price, quantity }] }', desc: 'Informa o Data2 do estado atual do carrinho (ex.: logo após confirmar um tryon-add-to-cart) — o provador mostra um mini-carrinho real dentro do widget, e o cliente pode experimentar qualquer item que já está no carrinho.' },\n]\n\nfunction eventRows(events) {\n return events.map((e) => `\n \n ${e.name}\n ${e.dir === 'out' ? 'Veste → Data2' : 'Data2 → Veste'}\n ${esc(e.payload)}\n ${esc(e.desc)}\n `).join('')\n}\n\nconst PRISM_SPEC = { url: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js', global: 'Prism', css: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css' }\nconst PRISM_LANG_CLASS = { bash: '', html: 'language-markup', js: 'language-javascript' }\n\nfunction codebox(lang, id, s, code) {\n const cls = PRISM_LANG_CLASS[lang] || ''\n return `
\n
${lang}
\n 
${esc(code)}
\n
`\n}\n\nfunction esc(str) {\n return String(str).replace(/&/g, '&').replace(//g, '>')\n}\n\nconst SNIPPET_CODE = [\n '',\n '