html2apk 0.4.0 → 0.7.0

package/src/desktop/renderer/renderer.js

@@ -10,6 +10,7 @@ const i18n = {
     navSettings: "Configuracoes",
     navAppearance: "Aparencia",
     navBuild: "Build",
+    navFiles: "Arquivos",
     navCodes: "Codigos",
     navLogs: "Logs",
     navHelp: "Ajuda",
@@ -32,6 +33,10 @@ const i18n = {
     appName: "Nome do app",
     packageId: "Package ID",
     appVersion: "Versao do app",
+    buildFormat: "Formato",
+    formatApk: "APK",
+    formatAab: "AAB",
+    buildFormatHint: "APK para instalar direto; AAB para loja.",
     mode: "Modo",
     chooseMode: "Escolha o modo",
     modeFullscreen: "Tela cheia",
@@ -51,13 +56,35 @@ const i18n = {
     oneSignalAppIdHint: "Opcional. Use o App ID do OneSignal, nao a REST API Key.",
     androidPermissions: "Permissoes Android",
     chooseIcon: "Trocar icone PNG",
+    keystoreTitle: "Assinatura / keystore",
+    keystoreFile: "Arquivo keystore",
+    chooseKeystore: "Escolher",
+    keystoreAlias: "Alias",
+    keystoreStorePassword: "Senha da store",
+    keystoreKeyPassword: "Senha da key",
+    keystoreHint: "Opcional para APK debug. Para AAB/release, preencha para assinar o arquivo.",
     reviewBuild: "Revisar build",
     debugBuild: "Debug tecnico",
     debugBuildText: "Mantem a pasta Cordova temporaria para inspecao.",
+    runtimeLogsBuild: "Console no APK",
+    runtimeLogsBuildText: "Mostra um modal Console no app gerado para depurar erros e funcoes interpretadas.",
     releaseBuild: "Release",
     releaseBuildText: "Usa configuracao de assinatura se houver keystore.",
     appearanceEyebrow: "Preferencias",
     appearanceTitle: "Idioma e tema",
+    filesEyebrow: "Editor visual",
+    filesTitle: "Arquivos do projeto",
+    fileTreeTitle: "Pastas e arquivos",
+    newFile: "Novo arquivo",
+    saveFile: "Salvar",
+    noFileSelected: "Nenhum arquivo selecionado",
+    syntaxPreview: "Previa com sintaxe",
+    newFilePrompt: "Digite o caminho do novo arquivo dentro do projeto:",
+    fileSaved: "Arquivo salvo",
+    fileCreated: "Arquivo criado",
+    fileOpenFail: "Nao foi possivel abrir o arquivo",
+    fileSaveFail: "Nao foi possivel salvar o arquivo",
+    unsavedFileConfirm: "Ha alteracoes nao salvas. Deseja trocar de arquivo mesmo assim?",
     language: "Idioma",
     languageText: "Escolha como os feedbacks aparecem durante o build.",
     themeText: "O botao tambem fica na barra lateral para acesso rapido.",
@@ -133,7 +160,10 @@ const i18n = {
     invalidThemeColor: "Use uma cor hexadecimal valida, exemplo: #126fff.",
     invalidOneSignalAppId: "Use um OneSignal App ID valido ou deixe vazio.",
     invalidMinSdkVersion: "Escolha uma versao minima do Android entre API 24 e API 36.",
+    missingKeystoreForAab: "Para gerar AAB, informe o arquivo keystore, alias e senhas.",
+    incompleteKeystore: "Complete arquivo keystore, alias, senha da store e senha da key.",
     iconSelected: "Icone selecionado",
+    keystoreSelected: "Keystore selecionado",
     progressLabel: "Progresso",
     progressIdle: "Aguardando pasta",
     progressFolder: "Pasta recebida",
@@ -166,6 +196,7 @@ const i18n = {
     navSettings: "Settings",
     navAppearance: "Appearance",
     navBuild: "Build",
+    navFiles: "Files",
     navCodes: "Code",
     navLogs: "Logs",
     navHelp: "Help",
@@ -188,6 +219,10 @@ const i18n = {
     appName: "App name",
     packageId: "Package ID",
     appVersion: "App version",
+    buildFormat: "Format",
+    formatApk: "APK",
+    formatAab: "AAB",
+    buildFormatHint: "APK to install directly; AAB for stores.",
     mode: "Mode",
     chooseMode: "Choose mode",
     modeFullscreen: "Fullscreen",
@@ -207,13 +242,35 @@ const i18n = {
     oneSignalAppIdHint: "Optional. Use the OneSignal App ID, not the REST API Key.",
     androidPermissions: "Android permissions",
     chooseIcon: "Change PNG icon",
+    keystoreTitle: "Signing / keystore",
+    keystoreFile: "Keystore file",
+    chooseKeystore: "Choose",
+    keystoreAlias: "Alias",
+    keystoreStorePassword: "Store password",
+    keystoreKeyPassword: "Key password",
+    keystoreHint: "Optional for debug APK. For AAB/release, fill this to sign the file.",
     reviewBuild: "Review build",
     debugBuild: "Technical debug",
     debugBuildText: "Keeps the temporary Cordova folder for inspection.",
+    runtimeLogsBuild: "APK console",
+    runtimeLogsBuildText: "Shows a Console modal in the generated app to debug errors and interpreted functions.",
     releaseBuild: "Release",
     releaseBuildText: "Uses signing configuration when a keystore exists.",
     appearanceEyebrow: "Preferences",
     appearanceTitle: "Language and theme",
+    filesEyebrow: "Visual editor",
+    filesTitle: "Project files",
+    fileTreeTitle: "Folders and files",
+    newFile: "New file",
+    saveFile: "Save",
+    noFileSelected: "No file selected",
+    syntaxPreview: "Syntax preview",
+    newFilePrompt: "Enter the new file path inside the project:",
+    fileSaved: "File saved",
+    fileCreated: "File created",
+    fileOpenFail: "Could not open the file",
+    fileSaveFail: "Could not save the file",
+    unsavedFileConfirm: "There are unsaved changes. Switch files anyway?",
     language: "Language",
     languageText: "Choose how feedback appears during the build.",
     themeText: "The button also stays in the sidebar for quick access.",
@@ -289,7 +346,10 @@ const i18n = {
     invalidThemeColor: "Use a valid hex color, example: #126fff.",
     invalidOneSignalAppId: "Use a valid OneSignal App ID or leave it empty.",
     invalidMinSdkVersion: "Choose a minimum Android version between API 24 and API 36.",
+    missingKeystoreForAab: "To build AAB, enter the keystore file, alias and passwords.",
+    incompleteKeystore: "Complete keystore file, alias, store password and key password.",
     iconSelected: "Icon selected",
+    keystoreSelected: "Keystore selected",
     progressLabel: "Progress",
     progressIdle: "Waiting for folder",
     progressFolder: "Folder received",
@@ -391,11 +451,11 @@ const nativeCodeEntries = [
     handling: { pt: "Limite duracoes longas e deixe a permissao `VIBRATE` no app; se falhar, siga sem bloquear o fluxo principal.", en: "Keep long durations under control and include the `VIBRATE` permission; if it fails, continue without blocking the main flow." }
   },
   {
-    syntax: { pt: "notificar({ titulo, texto, acoes })", en: "notify({ title, text, actions })" },
+    syntax: { pt: "notificar({ titulo, texto, aoClicar?, acoes?, open? })", en: "notify({ title, text, onClick?, actions?, open? })" },
     java: "notify",
-    description: { pt: "Cria notificacao Android imediata. `acoes` ou `actions` viram botoes clicaveis.", en: "Creates an immediate Android notification. `actions` or `acoes` become clickable buttons." },
-    returns: { pt: "Promise<void>; cliques chegam em `aoEvento('notificacao:clicada')` ou `aoClicarNotificacao()`.", en: "Promise<void>; clicks arrive through `onEvent('notification:clicked')` or `onNotificationClick()`." },
-    handling: { pt: "Ao chamar, o html2apk pede permissao automaticamente no Android 13+. Se o Android nao puder mostrar o pop-up, ele abre as configuracoes e retorna `settingsOpened`.", en: "When called, html2apk automatically requests permission on Android 13+. If Android cannot show the prompt, it opens settings and returns `settingsOpened`." }
+    description: { pt: "Cria notificacao Android imediata. So `titulo` e `texto` ja bastam; `aoClicar`, `acoes` e `open` sao opcionais.", en: "Creates an immediate Android notification. `title` and `text` are enough; `onClick`, `actions` and `open` are optional." },
+    returns: { pt: "Promise<void>; cliques chegam em `aoEvento('notificacao:clicada')` ou `aoClicarNotificacao()` e tambem podem executar `aoClicar` automaticamente.", en: "Promise<void>; clicks arrive through `onEvent('notification:clicked')` or `onNotificationClick()` and can also run `onClick` automatically." },
+    handling: { pt: "Use `aoClicar: () => funcao()` enquanto o app esta vivo. Para agendada ou app fechado, prefira `aoClicar: { funcao, argumentos }`. `open:false` evita abrir a tela; JavaScript so roda assim se o app ainda estiver vivo, mas acoes externas como `abrirForaDoApp` funcionam por fallback nativo.", en: "Use `onClick: () => functionName()` while the app process is alive. For scheduled notifications or a closed app, prefer `onClick: { functionName, args }`. `open:false` avoids opening the screen; JavaScript only runs this way if the app is still alive, but external actions like `openOutsideApp` work through a native fallback." }
   },
   {
     syntax: { pt: "agendarNotificacao({ titulo, texto, quando }) / agendarNotificacoes([...])", en: "scheduleNotification({ title, text, when }) / scheduleNotifications([...])" },
@@ -409,7 +469,7 @@ const nativeCodeEntries = [
     java: "AlarmManager + NotificationStore",
     description: { pt: "Cria um loop de notificacoes que continua funcionando com o app fechado e alterna os itens da lista.", en: "Creates a notification loop that keeps working with the app closed and rotates through the list items." },
     returns: { pt: "{ id, when, repeating, loop }. Guarde o `id` para cancelar depois.", en: "{ id, when, repeating, loop }. Store the `id` to cancel later." },
-    handling: { pt: "Use `aoClicarNotificacao()` ou `aoEvento('notificacao:clicada')` para chamar funcoes conforme `aoClicar`. Cancele com `cancelarNotificacao(id)`.", en: "Use `onNotificationClick()` or `onEvent('notification:clicked')` to call functions from `onClick`. Cancel with `cancelNotification(id)`." }
+    handling: { pt: "Cancele com `cancelarNotificacao(id)`. Se o clique precisar chamar funcao automaticamente mesmo apos o Android reabrir o app, use `funcao` + `argumentos` no `aoClicar`.", en: "Cancel with `cancelNotification(id)`. If the click must call a function automatically after Android reopens the app, use `functionName` + `args` in `onClick`." }
   },
   {
     syntax: { pt: "solicitarPermissaoNotificacoes()", en: "requestNotificationPermission()" },
@@ -668,17 +728,102 @@ const nativeCodeRecipes = [
     }
   },
   {
-    when: { pt: "Para mostrar uma notificacao agora. A permissao aparece automaticamente se o Android exigir.", en: "To show a notification now. Permission appears automatically if Android requires it." },
+    when: { pt: "Para mostrar uma notificacao simples agora. `aoClicar`, `acoes` e `open` sao opcionais.", en: "To show a simple notification now. `onClick`, `actions` and `open` are optional." },
+    example: {
+      pt: `await notificar({
+  titulo: "Pedido aprovado",
+  texto: "Toque para abrir o app"
+});`,
+      en: `await notify({
+  title: "Order approved",
+  text: "Tap to open the app"
+});`
+    }
+  },
+  {
+    when: { pt: "Para executar algo quando a notificacao for clicada.", en: "To run something when the notification is clicked." },
     example: {
       pt: `await notificar({
   titulo: "Pedido aprovado",
   texto: "Toque para abrir os detalhes",
-  aoClicar: { acao: "abrir-pedido", id: 123 }
+  aoClicar: () => abrirForaDoApp("https://exemplo.com/pedidos/123")
 });`,
       en: `await notify({
   title: "Order approved",
   text: "Tap to open details",
-  onClick: { action: "open-order", id: 123 }
+  onClick: () => openOutsideApp("https://example.com/orders/123")
+});`
+    }
+  },
+  {
+    when: { pt: "Para colocar botoes na notificacao, cada um chamando uma funcao.", en: "To add buttons to the notification, each one calling a function." },
+    example: {
+      pt: `window.marcarPedidoLido = (id) => {
+  localStorage.setItem("pedido:" + id, "lido");
+};
+
+await notificar({
+  titulo: "Pedido aprovado",
+  texto: "Escolha uma acao",
+  acoes: [
+    {
+      id: "abrir",
+      titulo: "Abrir",
+      open: true,
+      aoClicar: { funcao: "abrirNoApp", argumentos: ["#/pedido/123"] }
+    },
+    {
+      id: "lido",
+      titulo: "Marcar lido",
+      open: false,
+      aoClicar: { funcao: "marcarPedidoLido", argumentos: [123], open: false }
+    }
+  ]
+});`,
+      en: `window.markOrderRead = (id) => {
+  localStorage.setItem("order:" + id, "read");
+};
+
+await notify({
+  title: "Order approved",
+  text: "Choose an action",
+  actions: [
+    {
+      id: "open",
+      title: "Open",
+      open: true,
+      onClick: { functionName: "openInApp", args: ["#/order/123"] }
+    },
+    {
+      id: "read",
+      title: "Mark read",
+      open: false,
+      onClick: { functionName: "markOrderRead", args: [123], open: false }
+    }
+  ]
+});`
+    }
+  },
+  {
+    when: { pt: "Para clique de notificacao agendada ou com app fechado.", en: "For scheduled notification clicks or when the app is closed." },
+    example: {
+      pt: `await agendarNotificacao({
+  titulo: "Pedido aprovado",
+  texto: "Toque para abrir os detalhes",
+  quando: Date.now() + 60 * 1000,
+  aoClicar: {
+    funcao: "abrirForaDoApp",
+    argumentos: ["https://exemplo.com/pedidos/123"]
+  }
+});`,
+      en: `await scheduleNotification({
+  title: "Order approved",
+  text: "Tap to open details",
+  when: Date.now() + 60 * 1000,
+  onClick: {
+    functionName: "openOutsideApp",
+    args: ["https://example.com/orders/123"]
+  }
 });`
     }
   },
@@ -1274,6 +1419,10 @@ const state = {
   lastApkPath: null,
   lastDistPath: null,
   defaultIconPath: "",
+  fileTree: [],
+  currentFilePath: "",
+  currentFileLanguage: "text",
+  currentFileDirty: false,
   animationTimer: null,
   progress: 0,
   logsVisible: localStorage.getItem("html2apk.logsVisible") === "true"
@@ -1313,6 +1462,7 @@ function collectElements() {
     "appNameInput",
     "packageIdInput",
     "versionInput",
+    "buildFormatInput",
     "modeInput",
     "orientationInput",
     "minSdkVersionInput",
@@ -1325,9 +1475,15 @@ function collectElements() {
     "iconPathInput",
     "iconPreview",
     "selectIconButton",
+    "keystorePathInput",
+    "selectKeystoreButton",
+    "keystoreAliasInput",
+    "keystoreStorePasswordInput",
+    "keystoreKeyPasswordInput",
     "settingsValidation",
     "settingsNextButton",
     "debugInput",
+    "runtimeLogsInput",
     "releaseInput",
     "stepFolderText",
     "stepSettingsText",
@@ -1348,6 +1504,13 @@ function collectElements() {
     "successOpenDistButton",
     "successShowApkButton",
     "newBuildButton",
+    "newFileButton",
+    "saveFileButton",
+    "fileTree",
+    "currentFileName",
+    "fileLanguageBadge",
+    "fileEditorInput",
+    "fileHighlight",
     "logConsole",
     "bottomLogConsole",
     "clearLogsButton",
@@ -1384,6 +1547,12 @@ function applyLanguage() {
   applyLogBarVisibility();
   renderPermissionOptions(selectedPermissions());
   renderNativeCodeGrid();
+  renderFileTree();
+  if (state.currentFilePath && elements.currentFileName) {
+    elements.currentFileName.textContent = `${state.currentFilePath}${state.currentFileDirty ? " *" : ""}`;
+  } else if (elements.currentFileName) {
+    elements.currentFileName.textContent = text("noFileSelected");
+  }
   if (state.project) {
     validateSettings();
     renderReview();
@@ -1522,6 +1691,7 @@ function updateActionButtons() {
   elements.nextSettingsButton.disabled = !hasProject || isBusy || !state.environmentOk;
   elements.doctorButton.disabled = !hasProject || isBusy;
   elements.settingsNextButton.disabled = !hasProject || !state.settingsValid || !state.environmentOk || isBusy;
+  elements.newFileButton.disabled = !hasProject;
   setBuildButtons(hasProject && state.settingsValid && state.environmentOk && !isBusy);
 }
 
@@ -1592,6 +1762,182 @@ function escapeHtml(value) {
     .replace(/"/g, "&quot;");
 }
 
+function highlightSource(value, language) {
+  let html = escapeHtml(value);
+  const lang = String(language || "").toLowerCase();
+
+  if (["html", "xml", "svg"].includes(lang)) {
+    html = html
+      .replace(/(&lt;!--[\s\S]*?--&gt;)/g, "<span class=\"syntax-token-comment\">$1</span>")
+      .replace(/(&lt;\/?[a-zA-Z][^&]*?&gt;)/g, "<span class=\"syntax-token-tag\">$1</span>");
+    return html;
+  }
+
+  if (["js", "mjs", "cjs", "ts", "tsx", "jsx"].includes(lang)) {
+    html = html
+      .replace(/\b(await|async|const|let|var|function|return|if|else|for|while|try|catch|throw|new|class|import|export|from|true|false|null|undefined)\b/g, "<span class=\"syntax-token-keyword\">$1</span>")
+      .replace(/\b(\d+(?:\.\d+)?)\b/g, "<span class=\"syntax-token-number\">$1</span>")
+      .replace(/(\/\*[\s\S]*?\*\/|\/\/[^\n\r]*)/g, "<span class=\"syntax-token-comment\">$1</span>")
+      .replace(/(&quot;.*?&quot;|'.*?'|`[\s\S]*?`)/g, "<span class=\"syntax-token-string\">$1</span>");
+    return html;
+  }
+
+  if (lang === "css") {
+    html = html
+      .replace(/(\/\*[\s\S]*?\*\/)/g, "<span class=\"syntax-token-comment\">$1</span>")
+      .replace(/([.#]?[a-zA-Z0-9_-]+)(\s*\{)/g, "<span class=\"syntax-token-tag\">$1</span>$2")
+      .replace(/(:\s*)([^;\n]+)(;?)/g, "$1<span class=\"syntax-token-string\">$2</span>$3");
+    return html;
+  }
+
+  if (lang === "json") {
+    html = html
+      .replace(/(&quot;[^&]+&quot;)(\s*:)/g, "<span class=\"syntax-token-keyword\">$1</span>$2")
+      .replace(/(:\s*)(&quot;.*?&quot;)/g, "$1<span class=\"syntax-token-string\">$2</span>")
+      .replace(/\b(true|false|null)\b/g, "<span class=\"syntax-token-keyword\">$1</span>")
+      .replace(/\b(\d+(?:\.\d+)?)\b/g, "<span class=\"syntax-token-number\">$1</span>");
+  }
+
+  return html;
+}
+
+function updateFilePreview() {
+  if (!elements.fileHighlight) {
+    return;
+  }
+
+  elements.fileHighlight.innerHTML = `<code>${highlightSource(elements.fileEditorInput.value, state.currentFileLanguage)}</code>`;
+}
+
+function setCurrentFileDirty(value) {
+  state.currentFileDirty = Boolean(value);
+  elements.saveFileButton.disabled = !state.currentFilePath || !state.currentFileDirty;
+  if (state.currentFilePath) {
+    elements.currentFileName.textContent = `${state.currentFilePath}${state.currentFileDirty ? " *" : ""}`;
+  }
+}
+
+function renderFileNodes(nodes, depth = 0) {
+  return (nodes || []).map((node) => {
+    const padding = 8 + (depth * 16);
+    if (node.type === "directory") {
+      return `
+        <div class="folder-row" style="padding-left:${padding}px">${escapeHtml(node.name)}</div>
+        ${renderFileNodes(node.children, depth + 1)}
+      `;
+    }
+
+    const active = node.path === state.currentFilePath ? " active" : "";
+    const disabled = node.editable ? "" : " disabled";
+    const marker = node.editable ? "file" : "bin";
+    return `
+      <button class="file-row${active}" type="button" style="padding-left:${padding}px" data-file-path="${escapeHtml(node.path)}"${disabled}>
+        <span>${marker}</span>
+        <strong>${escapeHtml(node.name)}</strong>
+      </button>
+    `;
+  }).join("");
+}
+
+function renderFileTree() {
+  if (!elements.fileTree) {
+    return;
+  }
+
+  if (!state.project) {
+    elements.fileTree.className = "file-tree-empty";
+    elements.fileTree.textContent = text("chooseProjectFirst");
+    return;
+  }
+
+  if (!state.fileTree.length) {
+    elements.fileTree.className = "file-tree-empty";
+    elements.fileTree.textContent = text("missing");
+    return;
+  }
+
+  elements.fileTree.className = "file-tree";
+  elements.fileTree.innerHTML = renderFileNodes(state.fileTree);
+}
+
+async function refreshProjectFiles() {
+  if (!state.project || !api.listProjectFiles) {
+    renderFileTree();
+    return;
+  }
+
+  try {
+    state.fileTree = await api.listProjectFiles(state.project.projectRoot);
+    renderFileTree();
+  } catch (error) {
+    appendLog(`${text("projectWatcherFail")}: ${error.message}`, "error");
+  }
+}
+
+async function openProjectFile(relativePath) {
+  if (!state.project || !relativePath) {
+    return;
+  }
+
+  if (state.currentFileDirty && !window.confirm(text("unsavedFileConfirm"))) {
+    return;
+  }
+
+  try {
+    const file = await api.readProjectFile(state.project.projectRoot, relativePath);
+    state.currentFilePath = file.path;
+    state.currentFileLanguage = file.language || "text";
+    elements.currentFileName.textContent = file.path;
+    elements.fileLanguageBadge.textContent = state.currentFileLanguage;
+    elements.fileEditorInput.disabled = false;
+    elements.fileEditorInput.value = file.content || "";
+    setCurrentFileDirty(false);
+    updateFilePreview();
+    renderFileTree();
+  } catch (error) {
+    appendLog(`${text("fileOpenFail")}: ${error.message}`, "error");
+    setStatus("error", text("fileOpenFail"));
+  }
+}
+
+async function saveCurrentFile() {
+  if (!state.project || !state.currentFilePath) {
+    return;
+  }
+
+  try {
+    await api.writeProjectFile(state.project.projectRoot, state.currentFilePath, elements.fileEditorInput.value);
+    setCurrentFileDirty(false);
+    appendLog(`${text("fileSaved")}: ${state.currentFilePath}`, "success");
+    await refreshProjectFiles();
+  } catch (error) {
+    appendLog(`${text("fileSaveFail")}: ${error.message}`, "error");
+    setStatus("error", text("fileSaveFail"));
+  }
+}
+
+async function createNewProjectFile() {
+  if (!state.project) {
+    setStatus("error", text("chooseProjectFirst"));
+    return;
+  }
+
+  const relativePath = window.prompt(text("newFilePrompt"), "js/app.js");
+  if (!relativePath) {
+    return;
+  }
+
+  try {
+    const file = await api.createProjectFile(state.project.projectRoot, relativePath);
+    appendLog(`${text("fileCreated")}: ${file.path}`, "success");
+    await refreshProjectFiles();
+    await openProjectFile(file.path);
+  } catch (error) {
+    appendLog(`${text("fileSaveFail")}: ${error.message}`, "error");
+    setStatus("error", text("fileSaveFail"));
+  }
+}
+
 function recipeForCode(index) {
   const language = currentLanguage();
   const recipe = nativeCodeRecipes[index] || {};
@@ -1723,10 +2069,41 @@ function normalizeThemeMode(value) {
   return String(value || "").trim().toLowerCase() === "auto" ? "auto" : "fixed";
 }
 
+function normalizeBuildFormat(value) {
+  return String(value || "").trim().toLowerCase() === "aab" ? "aab" : "apk";
+}
+
 function normalizeOneSignalAppId(value) {
   return String(value || "").trim();
 }
 
+function keystoreFromConfig(config = {}) {
+  const keystore = config.keystore && typeof config.keystore === "object" ? config.keystore : {};
+  return {
+    path: String(keystore.path || "").trim(),
+    alias: String(keystore.alias || "").trim(),
+    storePassword: String(keystore.storePassword || keystore.password || "").trim(),
+    keyPassword: String(keystore.keyPassword || keystore.password || "").trim()
+  };
+}
+
+function keystoreFromInputs() {
+  return {
+    path: elements.keystorePathInput.value.trim(),
+    alias: elements.keystoreAliasInput.value.trim(),
+    storePassword: elements.keystoreStorePasswordInput.value,
+    keyPassword: elements.keystoreKeyPasswordInput.value
+  };
+}
+
+function hasAnyKeystoreField(keystore) {
+  return Boolean(keystore.path || keystore.alias || keystore.storePassword || keystore.keyPassword);
+}
+
+function hasCompleteKeystore(keystore) {
+  return Boolean(keystore.path && keystore.alias && keystore.storePassword && keystore.keyPassword);
+}
+
 function oneSignalAppIdFromConfig(config = {}) {
   return normalizeOneSignalAppId(
     config.oneSignalAppId
@@ -1789,6 +2166,7 @@ function populateSettings(config = {}, project = state.project) {
   elements.appNameInput.value = config.appName || projectName || "";
   elements.packageIdInput.value = config.packageId || `com.html2apk.${packageSegment(projectName)}`;
   elements.versionInput.value = config.version || "1.0.0";
+  elements.buildFormatInput.value = normalizeBuildFormat(config.buildFormat || config.outputFormat || config.artifactType || config.packageType);
   elements.modeInput.value = config.mode || "fullscreen";
   elements.orientationInput.value = normalizeOrientationInputValue(config.orientation);
   elements.minSdkVersionInput.value = String(normalizeMinSdkVersion(config.minSdkVersion || config.androidMinSdkVersion));
@@ -1802,14 +2180,22 @@ function populateSettings(config = {}, project = state.project) {
   const iconPath = String(config.icon || "").trim() || defaultIconPath();
   elements.iconPathInput.value = iconPath;
   elements.iconPreview.src = iconPreviewPath(iconPath);
+  const keystore = keystoreFromConfig(config);
+  elements.keystorePathInput.value = keystore.path;
+  elements.keystoreAliasInput.value = keystore.alias;
+  elements.keystoreStorePasswordInput.value = keystore.storePassword;
+  elements.keystoreKeyPasswordInput.value = keystore.keyPassword;
   elements.debugInput.checked = Boolean(config.debug);
-  elements.releaseInput.checked = Boolean(config.release);
+  elements.runtimeLogsInput.checked = Boolean(config.showRuntimeLogs || config.mostrarLogs || config.runtimeLogs || config.debugConsole || config.console);
+  elements.releaseInput.checked = Boolean(config.release || elements.buildFormatInput.value === "aab");
 }
 
 function validateSettings() {
   const errors = [];
   const packagePattern = /^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)+$/;
   const versionPattern = /^\d+\.\d+\.\d+([-.+][0-9A-Za-z.-]+)?$/;
+  const buildFormat = normalizeBuildFormat(elements.buildFormatInput.value);
+  const keystore = keystoreFromInputs();
 
   if (!state.project) {
     errors.push(text("missingProject"));
@@ -1835,6 +2221,11 @@ function validateSettings() {
   if (!isValidOptionalOneSignalAppId(elements.oneSignalAppIdInput.value)) {
     errors.push(text("invalidOneSignalAppId"));
   }
+  if (buildFormat === "aab" && !hasCompleteKeystore(keystore)) {
+    errors.push(text("missingKeystoreForAab"));
+  } else if (hasAnyKeystoreField(keystore) && !hasCompleteKeystore(keystore)) {
+    errors.push(text("incompleteKeystore"));
+  }
   if (elements.iconPathInput.value.trim() && !/\.png$/i.test(elements.iconPathInput.value.trim())) {
     errors.push(text("invalidIconType"));
   }
@@ -1875,6 +2266,7 @@ function renderReview() {
     [text("appName"), elements.appNameInput.value.trim()],
     [text("packageId"), elements.packageIdInput.value.trim()],
     [text("appVersion"), elements.versionInput.value.trim()],
+    [text("buildFormat"), selectedOptionText(elements.buildFormatInput)],
     [text("mode"), selectedOptionText(elements.modeInput)],
     [text("orientation"), selectedOptionText(elements.orientationInput)],
     [text("minSdkVersion"), selectedOptionText(elements.minSdkVersionInput)],
@@ -1882,7 +2274,10 @@ function renderReview() {
     [text("appThemeColor"), elements.themeColorTextInput.value.trim()],
     [text("oneSignalAppId"), elements.oneSignalAppIdInput.value.trim() || "-"],
     [text("androidPermissions"), selectedPermissions().join(", ")],
-    [text("appIcon"), displayIconValue(elements.iconPathInput.value.trim())]
+    [text("appIcon"), displayIconValue(elements.iconPathInput.value.trim())],
+    [text("keystoreTitle"), elements.keystorePathInput.value.trim() ? elements.keystorePathInput.value.trim() : "-"],
+    [text("runtimeLogsBuild"), elements.runtimeLogsInput.checked ? text("selected") : "-"],
+    [text("releaseBuild"), elements.releaseInput.checked || normalizeBuildFormat(elements.buildFormatInput.value) === "aab" ? text("selected") : "-"]
   ];
 
   elements.reviewGrid.innerHTML = items.map(([label, value]) => `
@@ -2081,6 +2476,7 @@ function applyProjectChange(payload) {
   }
 
   renderProjectSnapshot(payload.project);
+  refreshProjectFiles();
 
   const reloadSettings = isConfigFilePath(payload.changedPath);
   if (reloadSettings && !state.buildRunning) {
@@ -2095,6 +2491,14 @@ function applyProjectChange(payload) {
   if (document.querySelector(".nav-item.active")?.dataset.view === "build") {
     renderReview();
   }
+  if (
+    state.currentFilePath &&
+    payload.changedPath &&
+    String(payload.changedPath).replace(/\\/g, "/").endsWith(`/${state.currentFilePath}`) &&
+    !state.currentFileDirty
+  ) {
+    openProjectFile(state.currentFilePath);
+  }
 }
 
 async function summarizeProject(project) {
@@ -2109,6 +2513,16 @@ async function summarizeProject(project) {
   elements.nextSettingsButton.disabled = false;
   elements.doctorButton.disabled = true;
   setBuildButtons(false);
+  state.fileTree = [];
+  state.currentFilePath = "";
+  state.currentFileLanguage = "text";
+  state.currentFileDirty = false;
+  elements.currentFileName.textContent = text("noFileSelected");
+  elements.fileLanguageBadge.textContent = "text";
+  elements.fileEditorInput.value = "";
+  elements.fileEditorInput.disabled = true;
+  elements.fileHighlight.innerHTML = "<code></code>";
+  elements.saveFileButton.disabled = true;
   populateSettings(project.config || {}, project);
   setStep("folder", project.hasEntryFile ? "done" : "active", project.hasEntryFile ? text("folderReady") : text("missing"));
   setStep("settings", "active", text("settingsMissing"));
@@ -2118,6 +2532,7 @@ async function summarizeProject(project) {
   setStatus("ready", text("projectLoaded"));
   appendLog(`${text("droppedFolder")}: ${project.projectRoot}`, "system");
   validateSettings();
+  await refreshProjectFiles();
   setProgress(project.hasEntryFile ? 25 : 15, project.hasEntryFile ? text("progressFolder") : text("missing"), project.hasEntryFile ? "" : "error");
   await watchCurrentProject();
   await ensureEnvironmentBeforeSettings();
@@ -2155,11 +2570,14 @@ async function runDoctorOnly() {
 }
 
 function buildOptions() {
-  return {
+  const buildFormat = normalizeBuildFormat(elements.buildFormatInput.value);
+  const keystore = keystoreFromInputs();
+  const options = {
     projectRoot: state.project.projectRoot,
     appName: elements.appNameInput.value.trim(),
     packageId: elements.packageIdInput.value.trim(),
     version: elements.versionInput.value.trim(),
+    buildFormat,
     mode: elements.modeInput.value,
     orientation: elements.orientationInput.value,
     minSdkVersion: normalizeMinSdkVersion(elements.minSdkVersionInput.value),
@@ -2171,8 +2589,15 @@ function buildOptions() {
     icon: elements.iconPathInput.value.trim(),
     androidPlatform: elements.androidPlatformInput.value.trim(),
     debug: elements.debugInput.checked,
-    release: elements.releaseInput.checked
+    showRuntimeLogs: elements.runtimeLogsInput.checked,
+    release: elements.releaseInput.checked || buildFormat === "aab"
   };
+
+  if (hasAnyKeystoreField(keystore)) {
+    options.keystore = keystore;
+  }
+
+  return options;
 }
 
 function startAnimatedLogs() {
@@ -2360,6 +2785,9 @@ function bindEvents() {
       if (button.dataset.view === "build" && !goToReview()) {
         return;
       }
+      if (button.dataset.view === "files") {
+        await refreshProjectFiles();
+      }
       setView(button.dataset.view);
     });
   });
@@ -2376,6 +2804,18 @@ function bindEvents() {
   elements.doctorButton.addEventListener("click", runDoctorOnly);
   elements.buildButton.addEventListener("click", runBuildFlow);
   elements.usbDebugButton.addEventListener("click", runUsbDebugFlow);
+  elements.newFileButton.addEventListener("click", createNewProjectFile);
+  elements.saveFileButton.addEventListener("click", saveCurrentFile);
+  elements.fileTree.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-file-path]");
+    if (button && !button.disabled) {
+      openProjectFile(button.dataset.filePath);
+    }
+  });
+  elements.fileEditorInput.addEventListener("input", () => {
+    setCurrentFileDirty(true);
+    updateFilePreview();
+  });
   elements.clearLogsButton.addEventListener("click", clearLogs);
   elements.toggleLogsButton.addEventListener("click", toggleLogBar);
   elements.bottomToggleLogsButton.addEventListener("click", toggleLogBar);
@@ -2390,6 +2830,21 @@ function bindEvents() {
     appendLog(`${text("iconSelected")}: ${iconPath}`, "system");
     validateSettings();
   });
+  elements.selectKeystoreButton.addEventListener("click", async () => {
+    const keystorePath = await api.selectKeystore();
+    if (!keystorePath) {
+      return;
+    }
+    elements.keystorePathInput.value = keystorePath;
+    appendLog(`${text("keystoreSelected")}: ${keystorePath}`, "system");
+    validateSettings();
+  });
+  elements.buildFormatInput.addEventListener("change", () => {
+    if (normalizeBuildFormat(elements.buildFormatInput.value) === "aab") {
+      elements.releaseInput.checked = true;
+    }
+    validateSettings();
+  });
   elements.themeColorInput.addEventListener("input", () => {
     elements.themeColorTextInput.value = elements.themeColorInput.value;
     validateSettings();
@@ -2415,12 +2870,18 @@ function bindEvents() {
     elements.appNameInput,
     elements.packageIdInput,
     elements.versionInput,
+    elements.buildFormatInput,
     elements.orientationInput,
     elements.minSdkVersionInput,
     elements.androidPlatformInput,
     elements.themeModeInput,
     elements.oneSignalAppIdInput,
+    elements.keystorePathInput,
+    elements.keystoreAliasInput,
+    elements.keystoreStorePasswordInput,
+    elements.keystoreKeyPasswordInput,
     elements.debugInput,
+    elements.runtimeLogsInput,
     elements.releaseInput
   ].forEach((input) => {
     input.addEventListener("input", validateSettings);