> ## Documentation Index > Fetch the complete documentation index at: https://docs.morada.ai/llms.txt > Use this file to discover all available pages before exploring further. # Create a simulator to explore scenarios > Turn a repeated calculation into a simple tool: change the values and see the result immediately. export const miniappArtifact = { filename: "simulador-cenarios-comerciais.html", sha256: "d8263baa768a87775e6d8c5b0ccf6a08f7a9bd0ba4df7f5ae94e0c3c845114ed", html: ["\n\n\n \n \n \n Simulador de cenários comerciais\n \n\n\n
\n
\n

Simulação — não é previsão

\n

Simulador de cenários comerciais

\n

Ajuste as entradas para explorar o impacto de volume e conversão nas vendas do mês.

\n
\n\n
\n

Controles da simulação

\n\n
\n
\n
\n \n
\n \n
\n
\n \n
01.000
\n
\n\n
\n
\n \n
\n \n %\n
\n
\n \n
0%10%
\n
\n
\n\n
\n

Estimativa da simulação

\n

8

\n vendas\n
Conta: 400 leads × 2% = 8 vendas
\n
\n\n
\n \n
\n
\n\n \n
\n\n \n\n\n"].join("") }; export const GeneratedArtifact = ({example, source, language = "pt"}) => { const [artifact, setArtifact] = useState(null); const [expanded, setExpanded] = useState(false); const [canExpand, setCanExpand] = useState(false); const [expandFailed, setExpandFailed] = useState(false); const id = `generated-artifact-${example}`; const labels = language === "en" ? { loading: "Opening the generated example…", expand: "Enlarge example", restore: "Exit full screen", download: "Download original file", title: "Complete generated example", expandError: "Full screen is unavailable in this browser. You can still explore the example below or download it.", note: "Complete file generated in a Morada OS test conversation with fictional data. Scroll inside the example to explore the whole page." } : { loading: "Abrindo o exemplo gerado…", expand: "Ampliar exemplo", restore: "Sair da tela cheia", download: "Baixar arquivo original", title: "Exemplo completo gerado", expandError: "Não foi possível ampliar neste navegador. Você pode explorar o exemplo abaixo ou baixar o arquivo.", note: "Arquivo completo gerado em uma conversa de teste do Morada OS, com dados fictícios. Role dentro do exemplo para explorar a página inteira." }; useEffect(() => { setExpandFailed(false); const escapes = { "&": "&", '"': """, "<": "<", ">": ">" }; const html = source.html.replace(/[&"<>]/g, character => escapes[character]); const policy = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; worker-src 'none'; webrtc 'block'"; const srcDoc = ``; setArtifact({ filename: source.filename, html: source.html, srcDoc }); }, [source.html, source.filename, language]); useEffect(() => { setCanExpand(Boolean(document.fullscreenEnabled)); const changed = () => setExpanded(document.fullscreenElement?.id === id); document.addEventListener("fullscreenchange", changed); return () => document.removeEventListener("fullscreenchange", changed); }, [id]); const download = () => { if (!artifact) return; const url = URL.createObjectURL(new Blob([artifact.html], { type: "text/html;charset=utf-8" })); const anchor = document.createElement("a"); anchor.href = url; anchor.download = artifact.filename; document.body.appendChild(anchor); anchor.click(); anchor.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); }; const enlarge = () => { setExpandFailed(false); const action = expanded ? document.exitFullscreen() : document.getElementById(id)?.requestFullscreen(); action?.catch(() => setExpandFailed(true)); }; const css = ` .mo-artifact { --artifact-bg:#f8fafc; --artifact-ink:#1e293b; --artifact-line:#cbd5e1; --artifact-hover:#e2e8f0; margin:24px 0; border:1px solid var(--artifact-line); border-radius:16px; overflow:hidden; background:var(--artifact-bg); color:var(--artifact-ink); } .dark .mo-artifact { --artifact-bg:#18212e; --artifact-ink:#f1f5f9; --artifact-line:#475569; --artifact-hover:#334155; } .mo-artifact:fullscreen { width:100vw; height:100dvh; border:0; border-radius:0; margin:0; display:flex; flex-direction:column; } .mo-artifact .artifact-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; border-bottom:1px solid var(--artifact-line); flex-shrink:0; } .mo-artifact .artifact-name { flex:1 1 180px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .mo-artifact button { min-height:44px; padding:8px 12px; border:1px solid var(--artifact-line); border-radius:8px; color:var(--artifact-ink); background:transparent; cursor:pointer; font:inherit; font-size:12px; } .mo-artifact button:hover { background:var(--artifact-hover); } .mo-artifact button:active { box-shadow:inset 0 0 0 2px var(--artifact-ink); } .mo-artifact button:focus-visible { outline:3px solid #2683eb; outline-offset:2px; } .mo-artifact button:disabled { cursor:default; opacity:.5; } .mo-artifact > iframe { display:block; width:100%; height:720px; border:0; background:white; } .mo-artifact:fullscreen > iframe { flex:1; min-height:0; height:100%; } .mo-artifact .artifact-status { padding:24px; font-size:14px; } .mo-artifact .artifact-note { margin:0; padding:12px; font-size:12px; line-height:1.6; color:var(--artifact-ink); border-top:1px solid var(--artifact-line); } .mo-artifact:fullscreen .artifact-note { display:none; } @media(max-width:600px) { .mo-artifact > iframe { height:640px; } .mo-artifact .artifact-name { flex-basis:100%; } } `; return
{artifact?.filename || labels.title} {canExpand && }
{artifact ?