html2apk 0.8.0 → 0.9.0

package/src/desktop/renderer/renderer.js

@@ -105,6 +105,35 @@ const i18n = {
     codesEyebrow: "Bridge nativa",
     codesTitle: "Codigos interpretados",
     codesIntro: "Use estes blocos no JavaScript do seu projeto. O html2apk espera o Android ficar pronto, pede permissoes quando precisar e abre a configuracao certa quando o Android bloquear o pop-up.",
+    testNativeFunctions: "Testar funcoes",
+    functionLabRunning: "Gerando app de teste e abrindo no USB",
+    functionLabOk: "App de teste aberto no celular",
+    functionLabFail: "Nao foi possivel testar as funcoes",
+    functionLabProject: "App de teste criado",
+    functionLabSettings: "Configuracao de teste pronta",
+    functionLabUsbCheck: "Conferindo celular USB",
+    functionLabSuccessTitle: "App de teste aberto no celular",
+    functionLabSuccessText: "Use o celular conectado para experimentar as funcoes interpretadas e ver os retornos no proprio app.",
+    codesAll: "Tudo",
+    codesAllText: "Todas as funcoes interpretadas disponiveis no APK.",
+    codesFeedback: "Feedback",
+    codesFeedbackText: "Mensagens rapidas, vibracao e retornos simples.",
+    codesNotifications: "Notificacoes",
+    codesNotificationsText: "Notificacoes locais, agendamentos, loops e push remoto.",
+    codesPermissionsEvents: "Permissoes e eventos",
+    codesPermissionsEventsText: "Permissoes manuais, ciclo de vida, deep links e listeners nativos.",
+    codesMedia: "Midia e hardware",
+    codesMediaText: "Camera, QR Code, microfone, lanterna, imagens e videos.",
+    codesFiles: "Arquivos e dados",
+    codesFilesText: "Seletores, salvamento, CRUD interno, downloads e abertura de arquivos.",
+    codesShareNav: "Compartilhar e abrir",
+    codesShareNavText: "Compartilhamento, clipboard, URLs, WhatsApp, discador e mapas.",
+    codesDevice: "Tela e diagnostico",
+    codesDeviceText: "Tela ligada, brilho, tema, aparelho, rede, bateria, memoria e modo flutuante.",
+    codesSecurity: "Localizacao e seguranca",
+    codesSecurityText: "GPS, biometria e dados cifrados pelo Android Keystore.",
+    codesShowing: "Mostrando",
+    codesItems: "funcoes",
     javaLabel: "Motor nativo",
     doesLabel: "O que faz",
     whenUseLabel: "Quando usar",
@@ -291,6 +320,35 @@ const i18n = {
     codesEyebrow: "Native bridge",
     codesTitle: "Interpreted code",
     codesIntro: "Use these blocks in your project JavaScript. html2apk waits for Android to be ready, asks permissions when needed and opens the right settings screen when Android blocks the prompt.",
+    testNativeFunctions: "Test functions",
+    functionLabRunning: "Generating test app and opening it over USB",
+    functionLabOk: "Test app opened on the phone",
+    functionLabFail: "Could not test the functions",
+    functionLabProject: "Test app created",
+    functionLabSettings: "Test settings ready",
+    functionLabUsbCheck: "Checking USB phone",
+    functionLabSuccessTitle: "Test app opened on the phone",
+    functionLabSuccessText: "Use the connected phone to try the interpreted functions and see the results inside the app.",
+    codesAll: "All",
+    codesAllText: "All interpreted functions available in the APK.",
+    codesFeedback: "Feedback",
+    codesFeedbackText: "Short messages, vibration and simple native feedback.",
+    codesNotifications: "Notifications",
+    codesNotificationsText: "Local notifications, schedules, loops and remote push.",
+    codesPermissionsEvents: "Permissions and events",
+    codesPermissionsEventsText: "Manual permissions, lifecycle, deep links and native listeners.",
+    codesMedia: "Media and hardware",
+    codesMediaText: "Camera, QR Code, microphone, flashlight, images and videos.",
+    codesFiles: "Files and data",
+    codesFilesText: "Pickers, saving, internal CRUD, downloads and file opening.",
+    codesShareNav: "Share and open",
+    codesShareNavText: "Sharing, clipboard, URLs, WhatsApp, dialer and maps.",
+    codesDevice: "Screen and diagnostics",
+    codesDeviceText: "Keep awake, brightness, theme, device, network, battery, memory and floating mode.",
+    codesSecurity: "Location and security",
+    codesSecurityText: "GPS, biometrics and Android Keystore encrypted data.",
+    codesShowing: "Showing",
+    codesItems: "functions",
     javaLabel: "Native engine",
     doesLabel: "What it does",
     whenUseLabel: "When to use",
@@ -408,6 +466,11 @@ const permissionOptions = [
     label: { pt: "Vibracao", en: "Vibration" },
     detail: { pt: "Permite vibrar", en: "Allows vibration" }
   },
+  {
+    value: "SET_WALLPAPER",
+    label: { pt: "Papel de parede", en: "Wallpaper" },
+    detail: { pt: "Permite definir imagem estatica", en: "Allows setting a static image" }
+  },
   {
     value: "CAMERA",
     label: { pt: "Camera", en: "Camera" },
@@ -431,10 +494,23 @@ const permissionOptions = [
   {
     value: "SYSTEM_ALERT_WINDOW",
     label: { pt: "Sobrepor apps", en: "Draw over apps" },
-    detail: { pt: "Necessaria no modo flutuante", en: "Required for floating mode" }
+    detail: { pt: "Necessaria para icone flutuante", en: "Required for floating icon" }
   }
 ];
 
+const nativeCodeCategories = [
+  { id: "all", title: { pt: "Tudo", en: "All" }, description: { pt: "Todas as funcoes interpretadas disponiveis no APK.", en: "All interpreted functions available in the APK." } },
+  { id: "feedback", title: { pt: "Feedback", en: "Feedback" }, description: { pt: "Mensagens rapidas, vibracao e retornos simples.", en: "Short messages, vibration and simple native feedback." } },
+  { id: "notifications", title: { pt: "Notificacoes", en: "Notifications" }, description: { pt: "Notificacoes locais, agendamentos, loops e push remoto.", en: "Local notifications, schedules, loops and remote push." } },
+  { id: "permissions", title: { pt: "Permissoes e eventos", en: "Permissions and events" }, description: { pt: "Permissoes manuais, ciclo de vida, deep links e listeners nativos.", en: "Manual permissions, lifecycle, deep links and native listeners." } },
+  { id: "media", title: { pt: "Midia e hardware", en: "Media and hardware" }, description: { pt: "Camera, QR Code, microfone, lanterna, imagens e videos.", en: "Camera, QR Code, microphone, flashlight, images and videos." } },
+  { id: "wallpaper", title: { pt: "Papel de parede", en: "Wallpaper" }, description: { pt: "Imagem estatica na tela inicial/bloqueio e atalho para ajustes nativos.", en: "Static images for home/lock screen and shortcut to native settings." } },
+  { id: "files", title: { pt: "Arquivos e dados", en: "Files and data" }, description: { pt: "Seletores, salvamento, CRUD interno, downloads e abertura de arquivos.", en: "Pickers, saving, internal CRUD, downloads and file opening." } },
+  { id: "share", title: { pt: "Compartilhar e abrir", en: "Share and open" }, description: { pt: "Compartilhamento, clipboard, URLs, WhatsApp, discador e mapas.", en: "Sharing, clipboard, URLs, WhatsApp, dialer and maps." } },
+  { id: "device", title: { pt: "Tela e diagnostico", en: "Screen and diagnostics" }, description: { pt: "Tela ligada, brilho, tema, aparelho, rede, bateria, memoria e modo flutuante.", en: "Keep awake, brightness, theme, device, network, battery, memory and floating mode." } },
+  { id: "security", title: { pt: "Localizacao e seguranca", en: "Location and security" }, description: { pt: "GPS, biometria e dados cifrados pelo Android Keystore.", en: "GPS, biometrics and Android Keystore encrypted data." } }
+];
+
 const nativeCodeEntries = [
   {
     syntax: { pt: "toast('Mensagem')", en: "toast('Message')" },
@@ -698,12 +774,171 @@ const nativeCodeEntries = [
   {
     syntax: { pt: "iniciarIconeFlutuante() / pararIconeFlutuante()", en: "startFloatingIcon() / stopFloatingIcon()" },
     java: "FloatingIconService",
-    description: { pt: "Controla o icone flutuante quando o app foi gerado em modo floating.", en: "Controls the floating icon when the app was generated in floating mode." },
+    description: { pt: "Controla o icone flutuante quando a sobreposicao estiver liberada no Android.", en: "Controls the floating icon when draw-over-apps is allowed on Android." },
     returns: { pt: "Promise<void>.", en: "Promise<void>." },
     handling: { pt: "`iniciarIconeFlutuante()` abre a tela de permissao automaticamente se faltar sobreposicao. Quando o usuario voltar, chame novamente para iniciar.", en: "`startFloatingIcon()` opens the permission screen automatically if draw-over-apps is missing. When the user comes back, call it again to start." }
+  },
+  {
+    syntax: { pt: "tirarFoto() / capturarVideo()", en: "takePhoto() / captureVideo()" },
+    java: "ACTION_IMAGE_CAPTURE / ACTION_VIDEO_CAPTURE",
+    description: { pt: "Abre a camera nativa para capturar foto ou video e retorna um arquivo app-scoped.", en: "Opens the native camera to capture a photo or video and returns an app-scoped file." },
+    returns: { pt: "{ uri, name, size, mimeType, kind }. Com `{ base64: true }`, tambem retorna base64.", en: "{ uri, name, size, mimeType, kind }. With `{ base64: true }`, it also returns base64." },
+    handling: { pt: "A permissao de camera e pedida automaticamente. Trate objeto vazio como cancelamento do usuario.", en: "Camera permission is requested automatically. Treat an empty object as user cancellation." }
+  },
+  {
+    syntax: { pt: "escanearQRCode()", en: "scanQRCode()" },
+    java: "BarcodeDetector + camera",
+    description: { pt: "Tira uma foto e tenta ler QR Code pelo WebView quando `BarcodeDetector` estiver disponivel.", en: "Takes a photo and tries to read a QR code through the WebView when `BarcodeDetector` is available." },
+    returns: { pt: "{ text, rawValue, format, photo } ou null se nenhum QR for encontrado.", en: "{ text, rawValue, format, photo } or null when no QR is found." },
+    handling: { pt: "Se o WebView do aparelho nao tiver `BarcodeDetector`, a Promise rejeita; mantenha fallback para digitar/colar o codigo.", en: "If the device WebView does not have `BarcodeDetector`, the Promise rejects; keep a fallback to type/paste the code." }
+  },
+  {
+    syntax: { pt: "salvarArquivo('nome.json', minhaVariavel) / lerArquivo('nome.json')", en: "saveFile('name.json', myValue) / readFile('name.json')" },
+    java: "app-scoped external files",
+    description: { pt: "CRUD de arquivos persistentes no armazenamento app-scoped, sem abrir seletor de documento.", en: "Persistent file CRUD in app-scoped storage, without opening a document picker." },
+    returns: { pt: "`salvarArquivo` retorna metadados; `lerArquivo` retorna o valor salvo; `listarArquivos` retorna a lista.", en: "`saveFile` returns metadata; `readFile` returns the saved value; `listFiles` returns the list." },
+    handling: { pt: "A chamada antiga `salvarArquivo({ nome, conteudo })` continua abrindo o seletor nativo. Use string no primeiro argumento para o CRUD interno.", en: "The old `saveFile({ name, content })` call still opens the native picker. Use a string first argument for internal CRUD." }
+  },
+  {
+    syntax: { pt: "baixarArquivo(url, 'arquivo.pdf') / abrirArquivo('arquivo.pdf')", en: "downloadFile(url, 'file.pdf') / openFile('file.pdf')" },
+    java: "HttpURLConnection + NotificationCompat",
+    description: { pt: "Baixa por URL para o armazenamento persistente e mostra notificacao Android com barra de progresso.", en: "Downloads from a URL to persistent storage and shows an Android progress notification." },
+    returns: { pt: "`baixarArquivo` retorna metadados, tamanho, origem e se a notificacao foi mostrada.", en: "`downloadFile` returns metadata, size, source and whether the notification was shown." },
+    handling: { pt: "Valide URL e tamanho. No Android 13+, se a permissao de notificacao for negada, o download continua e retorna `notificationShown:false`.", en: "Validate URL and size. On Android 13+, if notification permission is denied, the download continues and returns `notificationShown:false`." }
+  },
+  {
+    syntax: { pt: "baixarBase64('foto.png', base64) / baixarArquivoLocal(arquivo, 'copia.pdf')", en: "downloadBase64('photo.png', base64) / downloadLocalFile(file, 'copy.pdf')" },
+    java: "InputStream + NotificationCompat",
+    description: { pt: "Cria um download a partir de base64, data URL, URI/caminho de arquivo ou objeto retornado por `escolherArquivo()`.", en: "Creates a download from base64, data URL, file URI/path or an object returned by `pickFile()`." },
+    returns: { pt: "Metadados do arquivo salvo, `sourceType`, `notificationShown` e permissao de notificacao.", en: "Saved file metadata, `sourceType`, `notificationShown` and notification permission." },
+    handling: { pt: "Use `baixarBase64` para conteudo em memoria e `baixarArquivoLocal` para copiar arquivo normal com progresso. Para esconder a notificacao, passe `{ notificacao: false }`.", en: "Use `downloadBase64` for in-memory content and `downloadLocalFile` to copy a normal file with progress. To hide the notification, pass `{ notification: false }`." }
+  },
+  {
+    syntax: { pt: "obterLocalizacao() / acompanharLocalizacao()", en: "getLocation() / watchLocation()" },
+    java: "LocationManager",
+    description: { pt: "Le a localizacao atual ou inicia acompanhamento por evento `localizacao:mudou`.", en: "Reads current location or starts watching through the `location:changed` event." },
+    returns: { pt: "{ latitude, longitude, accuracy, provider } ou { watchId }.", en: "{ latitude, longitude, accuracy, provider } or { watchId }." },
+    handling: { pt: "A permissao e pedida automaticamente. Pare acompanhamento com `pararLocalizacao(watchId)` quando sair da tela.", en: "Permission is requested automatically. Stop watching with `stopLocationWatch(watchId)` when leaving the screen." }
+  },
+  {
+    syntax: { pt: "autenticarBiometria({ titulo })", en: "authenticateBiometric({ title })" },
+    java: "BiometricPrompt",
+    description: { pt: "Abre a biometria/tela segura do Android para confirmar identidade.", en: "Opens Android biometric/secure prompt to confirm identity." },
+    returns: { pt: "{ supported, authenticated, canceled, message }.", en: "{ supported, authenticated, canceled, message }." },
+    handling: { pt: "Funciona em Android 9+. Se `supported` vier falso, use PIN/senha do proprio app como fallback.", en: "Works on Android 9+. If `supported` is false, use your app's own PIN/password fallback." }
+  },
+  {
+    syntax: { pt: "salvarSeguro('token', valor) / lerSeguro('token')", en: "saveSecure('token', value) / readSecure('token')" },
+    java: "Android Keystore",
+    description: { pt: "Guarda pequenos segredos cifrados com chave do Android Keystore.", en: "Stores small secrets encrypted with an Android Keystore key." },
+    returns: { pt: "`lerSeguro` retorna o valor salvo; `listarSeguro` retorna chaves; `removerSeguro` apaga.", en: "`readSecure` returns the saved value; `listSecureKeys` returns keys; `deleteSecure` removes." },
+    handling: { pt: "Use para tokens e dados pequenos. Nao use para arquivos grandes; para isso, use o CRUD de arquivos.", en: "Use it for tokens and small data. Do not use it for large files; use file CRUD for that." }
+  },
+  {
+    syntax: { pt: "definirPapelParede('foto.jpg', { alvo: 'inicio' })", en: "setWallpaper('photo.jpg', { target: 'home' })" },
+    java: "WallpaperManager",
+    description: { pt: "Define imagem estatica como papel de parede da tela inicial, bloqueio ou ambas.", en: "Sets a static image as home, lock or both wallpapers." },
+    returns: { pt: "{ applied, systemApplied, lockApplied, lockSupported, mimeType }.", en: "{ applied, systemApplied, lockApplied, lockSupported, mimeType }." },
+    handling: { pt: "Aceita nome salvo por `salvarArquivo`, `content://`/`file://` ou `{ base64, mimeType }`. Video retorna aviso e deve seguir pelo ajuste/live wallpaper do Android.", en: "Accepts a name saved by `saveFile`, `content://`/`file://` or `{ base64, mimeType }`. Video returns a warning and must use Android settings/live wallpaper flow." },
+    recipe: {
+      when: { pt: "Para aplicar uma imagem ja salva no armazenamento do app como papel de parede inicial.", en: "To apply an image already saved in app storage as the home wallpaper." },
+      example: {
+        pt: `const resultado = await definirPapelParede("foto.jpg", {
+  alvo: "inicio"
+});
+
+if (!resultado.applied) {
+  console.log(resultado);
+}`,
+        en: `const result = await setWallpaper("photo.jpg", {
+  target: "home"
+});
+
+if (!result.applied) {
+  console.log(result);
+}`
+      }
+    }
+  },
+  {
+    syntax: { pt: "infoPapelParede() / abrirConfiguracaoPapelParede()", en: "wallpaperInfo() / openWallpaperSettings()" },
+    java: "android.settings.WALLPAPER_SETTINGS",
+    description: { pt: "Consulta capacidades do aparelho e abre a tela nativa para escolhas manuais.", en: "Checks device capabilities and opens the native screen for manual choices." },
+    returns: { pt: "`infoPapelParede` retorna suporte a imagem/bloqueio/video. `abrirConfiguracaoPapelParede` retorna se a tela abriu.", en: "`wallpaperInfo` returns image/lock/video support. `openWallpaperSettings` returns whether the screen opened." },
+    handling: { pt: "Use para casos fora do caminho simples, como video wallpaper ou aparelhos que exigem confirmacao do usuario.", en: "Use it for cases outside the simple path, such as video wallpaper or devices that require user confirmation." },
+    recipe: {
+      when: { pt: "Para lidar com video wallpaper ou aparelhos que pedem escolha manual do usuario.", en: "To handle video wallpaper or devices that require a manual user choice." },
+      example: {
+        pt: `const info = await infoPapelParede();
+
+if (!info.videoSupported) {
+  await abrirConfiguracaoPapelParede();
+}`,
+        en: `const info = await wallpaperInfo();
+
+if (!info.videoSupported) {
+  await openWallpaperSettings();
+}`
+      }
+    }
   }
 ];
 
+[
+  "feedback",
+  "feedback",
+  "notifications",
+  "notifications",
+  "notifications",
+  "notifications",
+  "notifications",
+  "permissions",
+  "permissions",
+  "permissions",
+  "permissions",
+  "permissions",
+  "media",
+  "media",
+  "media",
+  "media",
+  "media",
+  "files",
+  "files",
+  "media",
+  "files",
+  "files",
+  "share",
+  "share",
+  "device",
+  "device",
+  "device",
+  "share",
+  "share",
+  "share",
+  "share",
+  "device",
+  "device",
+  "device",
+  "device",
+  "device",
+  "device",
+  "device",
+  "media",
+  "media",
+  "files",
+  "files",
+  "files",
+  "security",
+  "security",
+  "security",
+  "wallpaper",
+  "wallpaper"
+].forEach((category, index) => {
+  if (nativeCodeEntries[index]) {
+    nativeCodeEntries[index].category = category;
+  }
+});
+
 const nativeCodeRecipes = [
   {
     when: { pt: "Para avisos curtos dentro do app, como sucesso, erro simples ou confirmacao.", en: "For short in-app feedback such as success, simple errors or confirmations." },
@@ -1384,7 +1619,7 @@ for (const app of result.apps) {
     }
   },
   {
-    when: { pt: "Para apps em modo floating que precisam mostrar/esconder o icone flutuante.", en: "For floating-mode apps that need to show/hide the floating icon." },
+    when: { pt: "Para apps que precisam mostrar/esconder o icone flutuante.", en: "For apps that need to show/hide the floating icon." },
     example: {
       pt: `const status = await iniciarIconeFlutuante();
 
@@ -1403,6 +1638,180 @@ if (status.requiresSettings) {
 // To turn it off:
 // await stopFloatingIcon();`
     }
+  },
+  {
+    when: { pt: "Para capturar uma imagem ou video feito na hora pelo usuario.", en: "To capture an image or video made by the user right now." },
+    example: {
+      pt: `const foto = await tirarFoto({ base64: true });
+
+if (foto.base64) {
+  document.querySelector("img.preview").src =
+    "data:" + foto.mimeType + ";base64," + foto.base64;
+}`,
+      en: `const photo = await takePhoto({ base64: true });
+
+if (photo.base64) {
+  document.querySelector("img.preview").src =
+    "data:" + photo.mimeType + ";base64," + photo.base64;
+}`
+    }
+  },
+  {
+    when: { pt: "Para ler um QR Code quando o WebView do aparelho oferecer BarcodeDetector.", en: "To read a QR code when the device WebView provides BarcodeDetector." },
+    example: {
+      pt: `try {
+  const qr = await escanearQRCode();
+  if (qr) {
+    console.log("QR:", qr.text);
+  }
+} catch (erro) {
+  await toast("Digite ou cole o codigo");
+}`,
+      en: `try {
+  const qr = await scanQRCode();
+  if (qr) {
+    console.log("QR:", qr.text);
+  }
+} catch (error) {
+  await toast("Type or paste the code");
+}`
+    }
+  },
+  {
+    when: { pt: "Para gravar e recuperar uma variavel pelo nome, sem abrir seletor de arquivo.", en: "To save and recover a variable by name, without opening a file picker." },
+    example: {
+      pt: `await salvarArquivo("perfil.json", {
+  nome: "Ana",
+  plano: "premium"
+});
+
+const perfil = await lerArquivo("perfil.json");
+console.log(perfil.nome);
+
+const arquivos = await listarArquivos();`,
+      en: `await saveFile("profile.json", {
+  name: "Ana",
+  plan: "premium"
+});
+
+const profile = await readFile("profile.json");
+console.log(profile.name);
+
+const files = await listFiles();`
+    }
+  },
+  {
+    when: { pt: "Para baixar um PDF ou imagem e abrir/compartilhar depois.", en: "To download a PDF or image and open/share it later." },
+    example: {
+      pt: `await baixarArquivo(
+  "https://exemplo.com/relatorio.pdf",
+  "relatorio.pdf"
+);
+
+await abrirArquivo("relatorio.pdf");
+// await compartilharArquivo("relatorio.pdf");`,
+      en: `await downloadFile(
+  "https://example.com/report.pdf",
+  "report.pdf"
+);
+
+await openFile("report.pdf");
+// await shareFile("report.pdf");`
+    }
+  },
+  {
+    when: { pt: "Para transformar base64 ou um arquivo escolhido em download com barra de progresso.", en: "To turn base64 or a picked file into a download with a progress bar." },
+    example: {
+      pt: `await baixarBase64("pixel.png", base64, {
+  mimeType: "image/png"
+});
+
+const arquivo = await escolherArquivo();
+if (arquivo) {
+  await baixarArquivoLocal(arquivo, "copia-" + arquivo.name);
+}`,
+      en: `await downloadBase64("pixel.png", base64, {
+  mimeType: "image/png"
+});
+
+const file = await pickFile();
+if (file) {
+  await downloadLocalFile(file, "copy-" + file.name);
+}`
+    }
+  },
+  {
+    when: { pt: "Para preencher mapa, check-in ou entrega usando localizacao atual.", en: "To fill maps, check-ins or delivery flows using current location." },
+    example: {
+      pt: `const local = await obterLocalizacao({
+  altaPrecisao: true,
+  timeoutMs: 10000
+});
+
+if (local.latitude) {
+  console.log(local.latitude, local.longitude);
+}
+
+const watch = await acompanharLocalizacao();
+const parar = aoMudarLocalizacao(console.log);
+
+// Ao sair da tela:
+await pararLocalizacao(watch.watchId);
+parar();`,
+      en: `const location = await getLocation({
+  highAccuracy: true,
+  timeoutMs: 10000
+});
+
+if (location.latitude) {
+  console.log(location.latitude, location.longitude);
+}
+
+const watch = await watchLocation();
+const stopEvent = onLocationChange(console.log);
+
+// When leaving the screen:
+await stopLocationWatch(watch.watchId);
+stopEvent();`
+    }
+  },
+  {
+    when: { pt: "Para confirmar uma acao sensivel antes de abrir dados ou finalizar pagamento.", en: "To confirm a sensitive action before opening data or finishing payment." },
+    example: {
+      pt: `const bio = await autenticarBiometria({
+  titulo: "Confirmar acesso",
+  descricao: "Use a biometria do aparelho"
+});
+
+if (bio.authenticated) {
+  abrirNoApp("#/seguro");
+}`,
+      en: `const bio = await authenticateBiometric({
+  title: "Confirm access",
+  description: "Use this device biometrics"
+});
+
+if (bio.authenticated) {
+  openInApp("#/secure");
+}`
+    }
+  },
+  {
+    when: { pt: "Para guardar tokens ou preferencias sensiveis cifradas pelo Android Keystore.", en: "To store tokens or sensitive preferences encrypted by Android Keystore." },
+    example: {
+      pt: `await salvarSeguro("token", "abc123");
+
+const token = await lerSeguro("token");
+console.log(token);
+
+await removerSeguro("token");`,
+      en: `await saveSecure("token", "abc123");
+
+const token = await readSecure("token");
+console.log(token);
+
+await deleteSecure("token");`
+    }
   }
 ];
 
@@ -1425,6 +1834,7 @@ const state = {
   currentFileDirty: false,
   animationTimer: null,
   progress: 0,
+  nativeCodeCategory: localStorage.getItem("html2apk.nativeCodeCategory") || "all",
   logsVisible: localStorage.getItem("html2apk.logsVisible") === "true"
 };
 
@@ -1493,7 +1903,10 @@ function collectElements() {
     "progressBar",
     "progressPercent",
     "reviewGrid",
+    "nativeCodeCategories",
+    "nativeCodeSummary",
     "nativeCodeGrid",
+    "nativeFunctionLabButton",
     "resultPanel",
     "apkPath",
     "openDistButton",
@@ -1692,6 +2105,7 @@ function updateActionButtons() {
   elements.doctorButton.disabled = !hasProject || isBusy;
   elements.settingsNextButton.disabled = !hasProject || !state.settingsValid || !state.environmentOk || isBusy;
   elements.newFileButton.disabled = !hasProject;
+  elements.nativeFunctionLabButton.disabled = isBusy;
   setBuildButtons(hasProject && state.settingsValid && state.environmentOk && !isBusy);
 }
 
@@ -1762,51 +2176,134 @@ function escapeHtml(value) {
     .replace(/"/g, "&quot;");
 }
 
+function syntaxToken(type, value) {
+  return `<span class="syntax-token-${type}">${escapeHtml(value)}</span>`;
+}
+
+function highlightByRegex(value, regex, classify) {
+  const source = String(value || "");
+  let html = "";
+  let cursor = 0;
+
+  source.replace(regex, (match, ...args) => {
+    const index = args[args.length - 2];
+    const tokenType = classify(match, index, source);
+    html += escapeHtml(source.slice(cursor, index));
+    html += tokenType ? syntaxToken(tokenType, match) : escapeHtml(match);
+    cursor = index + match.length;
+    return match;
+  });
+
+  html += escapeHtml(source.slice(cursor));
+  return html;
+}
+
+function highlightJavaScript(value) {
+  const keywordList = [
+    "await", "async", "break", "case", "catch", "class", "const", "continue", "default", "delete",
+    "do", "else", "export", "extends", "false", "finally", "for", "from", "function", "if",
+    "import", "in", "instanceof", "let", "new", "null", "return", "super", "switch", "this",
+    "throw", "true", "try", "typeof", "undefined", "var", "void", "while", "yield"
+  ];
+  const keywords = new Set(keywordList);
+  const keywordPattern = keywordList.join("|");
+  const regex = new RegExp("\\/\\*[\\s\\S]*?\\*\\/|\\/\\/[^\\n\\r]*|\"(?:\\\\.|[^\"\\\\])*\"|'(?:\\\\.|[^'\\\\])*'|`(?:\\\\.|[^`\\\\])*`|\\b\\d+(?:\\.\\d+)?\\b|\\b(?:" + keywordPattern + ")\\b|\\b[A-Za-z_$][\\w$]*(?=\\s*\\()", "g");
+
+  return highlightByRegex(value, regex, (match) => {
+    if (match.startsWith("//") || match.startsWith("/*")) {
+      return "comment";
+    }
+    if (match.startsWith("\"") || match.startsWith("'") || match.startsWith("`")) {
+      return "string";
+    }
+    if (/^\d/.test(match)) {
+      return "number";
+    }
+    if (keywords.has(match)) {
+      return "keyword";
+    }
+    return "function";
+  });
+}
+
+function highlightHtmlLike(value) {
+  return highlightByRegex(value, /<!--[\s\S]*?-->|<!doctype[^>]*>|<\/?[a-zA-Z][^>]*?>/gi, (match) => {
+    if (match.startsWith("<!--")) {
+      return "comment";
+    }
+    return "tag";
+  });
+}
+
+function highlightCss(value) {
+  const regex = /\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|#[0-9a-fA-F]{3,8}\b|\b\d+(?:\.\d+)?(?:px|rem|em|%|vh|vw|s|ms)?\b|[a-zA-Z-]+(?=\s*:)|[.#]?[a-zA-Z0-9_-]+(?=[^{;]*\{)/g;
+  return highlightByRegex(value, regex, (match) => {
+    if (match.startsWith("/*")) {
+      return "comment";
+    }
+    if (match.startsWith("\"") || match.startsWith("'")) {
+      return "string";
+    }
+    if (match.startsWith("#") || /^\d/.test(match)) {
+      return "number";
+    }
+    if (/^[a-zA-Z-]+$/.test(match)) {
+      return "keyword";
+    }
+    return "tag";
+  });
+}
+
+function highlightJson(value) {
+  const regex = /"(?:\\.|[^"\\])*"(?=\s*:)|"(?:\\.|[^"\\])*"|-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b|\b(?:true|false|null)\b/gi;
+  return highlightByRegex(value, regex, (match, index, source) => {
+    if (match.startsWith("\"")) {
+      return /^\s*:/.test(source.slice(index + match.length)) ? "keyword" : "string";
+    }
+    if (/^(true|false|null)$/i.test(match)) {
+      return "keyword";
+    }
+    return "number";
+  });
+}
+
 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;
+    return highlightHtmlLike(value);
   }
-
   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;
+    return highlightJavaScript(value);
   }
-
   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;
+    return highlightCss(value);
   }
-
   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 highlightJson(value);
   }
 
-  return html;
+  return escapeHtml(value);
 }
 
 function updateFilePreview() {
-  if (!elements.fileHighlight) {
+  if (!elements.fileHighlight || !elements.fileEditorInput) {
+    return;
+  }
+
+  const value = elements.fileEditorInput.value || "";
+  const highlighted = highlightSource(value.length ? value : " ", state.currentFileLanguage);
+  elements.fileHighlight.innerHTML = `<code>${highlighted}</code>`;
+  syncFileEditorHighlightScroll();
+}
+
+function syncFileEditorHighlightScroll() {
+  if (!elements.fileHighlight || !elements.fileEditorInput) {
     return;
   }
 
-  elements.fileHighlight.innerHTML = `<code>${highlightSource(elements.fileEditorInput.value, state.currentFileLanguage)}</code>`;
+  elements.fileHighlight.scrollTop = elements.fileEditorInput.scrollTop;
+  elements.fileHighlight.scrollLeft = elements.fileEditorInput.scrollLeft;
 }
 
 function setCurrentFileDirty(value) {
@@ -1891,6 +2388,8 @@ async function openProjectFile(relativePath) {
     elements.fileLanguageBadge.textContent = state.currentFileLanguage;
     elements.fileEditorInput.disabled = false;
     elements.fileEditorInput.value = file.content || "";
+    elements.fileEditorInput.scrollTop = 0;
+    elements.fileEditorInput.scrollLeft = 0;
     setCurrentFileDirty(false);
     updateFilePreview();
     renderFileTree();
@@ -1940,7 +2439,8 @@ async function createNewProjectFile() {
 
 function recipeForCode(index) {
   const language = currentLanguage();
-  const recipe = nativeCodeRecipes[index] || {};
+  const entry = nativeCodeEntries[index] || {};
+  const recipe = entry.recipe || nativeCodeRecipes[index] || {};
   return {
     when: recipe.when ? recipe.when[language] || recipe.when.pt : "",
     example: recipe.example ? recipe.example[language] || recipe.example.pt : ""
@@ -1966,6 +2466,14 @@ async function copyToClipboard(value) {
 }
 
 async function handleNativeCodeCopy(event) {
+  const categoryButton = event.target.closest("[data-code-category]");
+  if (categoryButton) {
+    state.nativeCodeCategory = categoryButton.dataset.codeCategory || "all";
+    localStorage.setItem("html2apk.nativeCodeCategory", state.nativeCodeCategory);
+    renderNativeCodeGrid();
+    return;
+  }
+
   const button = event.target.closest("[data-copy-code]");
   if (!button) {
     return;
@@ -2125,6 +2633,20 @@ function renderNativeCodeGrid() {
   }
 
   const language = currentLanguage();
+  const activeCategory = nativeCodeCategories.some((category) => category.id === state.nativeCodeCategory)
+    ? state.nativeCodeCategory
+    : "all";
+  state.nativeCodeCategory = activeCategory;
+  const categoryCounts = nativeCodeEntries.reduce((counts, entry) => {
+    const category = entry.category || "device";
+    counts[category] = (counts[category] || 0) + 1;
+    counts.all = (counts.all || 0) + 1;
+    return counts;
+  }, {});
+  const activeCategoryMeta = nativeCodeCategories.find((category) => category.id === activeCategory) || nativeCodeCategories[0];
+  const visibleEntries = nativeCodeEntries
+    .map((entry, index) => ({ entry, index }))
+    .filter((item) => activeCategory === "all" || item.entry.category === activeCategory);
   const javaLabel = text("javaLabel");
   const doesLabel = text("doesLabel");
   const whenUseLabel = text("whenUseLabel");
@@ -2132,17 +2654,45 @@ function renderNativeCodeGrid() {
   const handlingLabel = text("handlingLabel");
   const exampleLabel = text("exampleLabel");
   const copyCodeLabel = text("copyCode");
-  elements.nativeCodeGrid.innerHTML = nativeCodeEntries.map((entry, index) => {
+
+  if (elements.nativeCodeCategories) {
+    elements.nativeCodeCategories.innerHTML = nativeCodeCategories.map((category) => {
+      const title = category.title[language] || category.title.pt;
+      const description = category.description[language] || category.description.pt;
+      const count = categoryCounts[category.id] || 0;
+      const active = category.id === activeCategory ? " active" : "";
+      return `
+        <button type="button" class="code-category-button${active}" data-code-category="${escapeHtml(category.id)}" aria-pressed="${category.id === activeCategory}">
+          <strong>${escapeHtml(title)}</strong>
+          <span class="code-category-count">${count}</span>
+          <small>${escapeHtml(description)}</small>
+        </button>
+      `;
+    }).join("");
+  }
+
+  if (elements.nativeCodeSummary) {
+    const title = activeCategoryMeta.title[language] || activeCategoryMeta.title.pt;
+    const description = activeCategoryMeta.description[language] || activeCategoryMeta.description.pt;
+    elements.nativeCodeSummary.innerHTML = `
+      <strong>${escapeHtml(title)} · ${escapeHtml(text("codesShowing"))} ${visibleEntries.length} ${escapeHtml(text("codesItems"))}</strong>
+      <p>${escapeHtml(description)}</p>
+    `;
+  }
+
+  elements.nativeCodeGrid.innerHTML = visibleEntries.map(({ entry, index }) => {
     const syntax = entry.syntax ? entry.syntax[language] || entry.syntax.pt : entry.js;
     const description = entry.description[language] || entry.description.pt;
     const returns = entry.returns[language] || entry.returns.pt;
     const handling = entry.handling[language] || entry.handling.pt;
     const recipe = recipeForCode(index);
+    const highlightedSyntax = highlightSource(syntax, "js");
+    const highlightedExample = recipe.example ? highlightSource(recipe.example, "js") : "";
 
     return `
     <article class="code-card">
       <div class="code-card-top">
-        <code>${escapeHtml(syntax)}</code>
+        <code class="syntax-inline">${highlightedSyntax}</code>
         <span>${escapeHtml(javaLabel)}: ${escapeHtml(entry.java)}</span>
       </div>
       <p><strong>${escapeHtml(doesLabel)}:</strong> ${escapeHtml(description)}</p>
@@ -2154,7 +2704,7 @@ function renderNativeCodeGrid() {
           <strong>${escapeHtml(exampleLabel)}</strong>
           <button type="button" class="copy-code-button" data-copy-code="${index}">${escapeHtml(copyCodeLabel)}</button>
         </div>
-        <pre><code>${escapeHtml(recipe.example)}</code></pre>
+        <pre><code>${highlightedExample}</code></pre>
       </div>
     </article>
   `;
@@ -2521,7 +3071,9 @@ async function summarizeProject(project) {
   elements.fileLanguageBadge.textContent = "text";
   elements.fileEditorInput.value = "";
   elements.fileEditorInput.disabled = true;
-  elements.fileHighlight.innerHTML = "<code></code>";
+  elements.fileEditorInput.scrollTop = 0;
+  elements.fileEditorInput.scrollLeft = 0;
+  updateFilePreview();
   elements.saveFileButton.disabled = true;
   populateSettings(project.config || {}, project);
   setStep("folder", project.hasEntryFile ? "done" : "active", project.hasEntryFile ? text("folderReady") : text("missing"));
@@ -2751,6 +3303,74 @@ async function runUsbDebugFlow() {
   }
 }
 
+async function runNativeFunctionLabFlow() {
+  if (state.buildRunning) {
+    setStatus("error", text("functionLabRunning"));
+    return;
+  }
+  if (!api.runNativeFunctionLab) {
+    setStatus("error", text("functionLabFail"));
+    return;
+  }
+
+  showLogBar();
+  state.buildRunning = true;
+  updateActionButtons();
+  elements.resultPanel.classList.add("hidden");
+  setView("build");
+  setStatus("busy", text("functionLabRunning"));
+  setStep("folder", "done", text("functionLabProject"));
+  setStep("settings", "done", text("functionLabSettings"));
+  setStep("doctor", "active", text("functionLabUsbCheck"));
+  setStep("build", "active", text("functionLabRunning"));
+  setProgress(20, text("functionLabUsbCheck"), "active");
+  startAnimatedLogs();
+
+  try {
+    const response = await api.runNativeFunctionLab();
+    stopAnimatedLogs();
+    if (!response.ok) {
+      setStep("doctor", "error", text("functionLabUsbCheck"));
+      setStep("build", "error", text("functionLabFail"));
+      setStatus("error", text("functionLabFail"));
+      setProgress(90, text("progressError"), "error");
+      appendLog(response.message || text("functionLabFail"), "error");
+      if (response.projectRoot) {
+        appendLog(`${text("functionLabProject")}: ${response.projectRoot}`, "system");
+      }
+      if (response.buildDir) {
+        appendLog(`Build directory kept: ${response.buildDir}`, "system");
+      }
+      return;
+    }
+
+    const result = response.result;
+    state.lastApkPath = result.apkPath;
+    state.lastDistPath = result.distPath || "";
+    elements.apkPath.textContent = result.apkPath;
+    elements.successTitle.textContent = text("functionLabSuccessTitle");
+    elements.successText.textContent = text("functionLabSuccessText");
+    elements.successApkPath.textContent = result.apkPath;
+    elements.resultPanel.classList.remove("hidden");
+    setStep("doctor", "done", text("functionLabUsbCheck"));
+    setStep("build", "done", text("functionLabOk"));
+    setStatus("ready", text("functionLabOk"));
+    setProgress(100, text("progressDone"));
+    appendLog(`${text("functionLabOk")}: ${result.device && result.device.id ? result.device.id : "Android USB"}`, "success");
+    appendLog(`${text("buildOk")}: ${result.apkPath}`, "success");
+    setView("success");
+  } catch (error) {
+    stopAnimatedLogs();
+    setStep("build", "error", text("functionLabFail"));
+    setStatus("error", error.message);
+    setProgress(90, text("progressError"), "error");
+    appendLog(error.message, "error");
+  } finally {
+    state.buildRunning = false;
+    updateActionButtons();
+  }
+}
+
 function toggleTheme() {
   state.theme = state.theme === "dark" ? "light" : "dark";
   applyTheme();
@@ -2804,6 +3424,7 @@ function bindEvents() {
   elements.doctorButton.addEventListener("click", runDoctorOnly);
   elements.buildButton.addEventListener("click", runBuildFlow);
   elements.usbDebugButton.addEventListener("click", runUsbDebugFlow);
+  elements.nativeFunctionLabButton.addEventListener("click", runNativeFunctionLabFlow);
   elements.newFileButton.addEventListener("click", createNewProjectFile);
   elements.saveFileButton.addEventListener("click", saveCurrentFile);
   elements.fileTree.addEventListener("click", (event) => {
@@ -2816,6 +3437,7 @@ function bindEvents() {
     setCurrentFileDirty(true);
     updateFilePreview();
   });
+  elements.fileEditorInput.addEventListener("scroll", syncFileEditorHighlightScroll);
   elements.clearLogsButton.addEventListener("click", clearLogs);
   elements.toggleLogsButton.addEventListener("click", toggleLogBar);
   elements.bottomToggleLogsButton.addEventListener("click", toggleLogBar);
@@ -2866,6 +3488,7 @@ function bindEvents() {
   });
   elements.permissionGrid.addEventListener("change", validateSettings);
   elements.nativeCodeGrid.addEventListener("click", handleNativeCodeCopy);
+  elements.nativeCodeCategories.addEventListener("click", handleNativeCodeCopy);
   [
     elements.appNameInput,
     elements.packageIdInput,