sync mode on

assets/js/creations/ui.js

@@ -153,4 +153,68 @@ export async function showOpenProjectModal() {
 export function closeOpenProjectModal() {
     const openProjectModal = document.getElementById("open-project-modal");
     openProjectModal.classList.remove("visible");
-}
+}
+
+// ui.js — sistema global de avisos / toasts
+export function showToast(message, type = "info", duration = 3000) {
+  // cria o contêiner se não existir
+  let container = document.getElementById("toast-container");
+  if (!container) {
+    container = document.createElement("div");
+    container.id = "toast-container";
+    Object.assign(container.style, {
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      gap: "8px",
+    });
+    document.body.appendChild(container);
+  }
+
+  // cria o toast
+  const toast = document.createElement("div");
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+  Object.assign(toast.style, {
+    padding: "10px 16px",
+    borderRadius: "6px",
+    color: "#fff",
+    fontFamily: "sans-serif",
+    fontSize: "14px",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+    opacity: "0",
+    transform: "translateY(10px)",
+    transition: "all 0.3s ease",
+    maxWidth: "260px",
+    textAlign: "left",
+    wordWrap: "break-word",
+  });
+
+  // cores por tipo
+  const colors = {
+    info: "#3498db",
+    success: "#2ecc71",
+    warning: "#f1c40f",
+    error: "#e74c3c",
+  };
+  toast.style.backgroundColor = colors[type] || colors.info;
+
+  container.appendChild(toast);
+
+  // animação de entrada
+  setTimeout(() => {
+    toast.style.opacity = "1";
+    toast.style.transform = "translateY(0)";
+  }, 50);
+
+  // remover após tempo
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    toast.style.transform = "translateY(10px)";
+    setTimeout(() => toast.remove(), 300);
+  }, duration);
+}