@wads.dev/i18n-editor 0.0.1-beta.0 → 0.0.1-rc.0

package/dist/public/editor.js

@@ -81,10 +81,21 @@ var init_en = __esm({
         updateUsages: "Update usages",
         loadingUsages: "Loading usages\u2026",
         updatingUsages: "Updating usages\u2026",
-        unreferencedOnly: "Unreferenced only",
-        visualizationLevels: "Visualization levels",
+        unreferencedOnly: "Show unreferenced only",
+        newKeysOnly: "Show only last changes",
+        filters: "Filters",
+        markCurrentReviewed: "Mark current keys as reviewed",
+        noReviewBaseline: "No review baseline yet.",
+        expandAll: "Expand all",
+        collapseAll: "Collapse all",
+        showToolbar: "Show toolbar",
+        hideToolbar: "Hide toolbar",
+        reviewSummary: (addedCount, removedCount) => `${addedCount} new and ${removedCount} removed key${addedCount + removedCount === 1 ? "" : "s"} since the last review.`,
+        visualizationLevels: "Levels",
+        visualizationLevelsHelp: "Choose how many hierarchy levels should be displayed as collapsible translation groups. Level 0 shows a single table; each additional level breaks the table into nested groups without changing the translation structure.",
         search: "Search",
-        searchPlaceholder: "Key or translation",
+        searchPlaceholder: "Search by key or translation",
+        removed: "Removed",
         key: "Key",
         usages: "Usages",
         base: "Base",
@@ -133,6 +144,7 @@ var init_en = __esm({
 The change will remain in the in-memory bundle until you export it to the project.`,
         keyRemoved: (key) => `Key ${key} removed from every language. Export to apply the change to the project.`,
         translationUpdated: (language, key) => `Translation ${language}.${key} updated.`,
+        reviewBaselineSaved: (count) => `${count} key${count === 1 ? "" : "s"} marked as reviewed.`,
         jsonObjectExpected: (field) => `${field} must be a JSON object.`,
         couldNotSaveSettings: (error) => `Could not save settings: ${error}`,
         couldNotSaveLocalCopy: (error) => `Could not save the local copy: ${error}`,
@@ -144,12 +156,13 @@ The change will remain in the in-memory bundle until you export it to the projec
         exported: "Changes exported to the project files.",
         generatingBundle: "Generating the project bundle\u2026",
         generatedBundle: "Bundle generated automatically from the project catalog.",
+        couldNotGenerateBundle: (error) => `Could not generate the project bundle: ${error}`,
         restoredBundle: "The newest version was restored from the browser.",
         loadedBundle: "Project bundle loaded automatically.",
         newerBundle: "A newer bundle exists in the project. It was loaded and will replace the browser copy.",
         noUsageCache: "No usage cache was found. Analyzing typed references\u2026",
         unverifiedUsageCache: "Showing an unverified cached usage report while a fresh analysis runs\u2026",
-        usageSummary: (used, uncertain, unreferenced, files) => `${used} used keys, ${uncertain} uncertain keys, and ${unreferenced} unreferenced keys across ${files} source files.`,
+        usageSummary: (used, uncertain, unreferenced) => `${used} used, ${uncertain} uncertain, and ${unreferenced} unreferenced.`,
         couldNotAnalyzeUsages: (error) => `Could not analyze usages: ${error}`,
         plannedChanges: (count) => `${count} file${count === 1 ? "" : "s"} with planned changes.`,
         projectMatchesPreview: "The project files already match the preview.",
@@ -259,10 +272,21 @@ var init_pt = __esm({
         updateUsages: "Atualizar usos",
         loadingUsages: "Carregando usos\u2026",
         updatingUsages: "Atualizando usos\u2026",
-        unreferencedOnly: "Somente n\xE3o referenciadas",
-        visualizationLevels: "N\xEDveis de visualiza\xE7\xE3o",
+        unreferencedOnly: "Mostrar somente n\xE3o referenciadas",
+        newKeysOnly: "Mostrar somente \xFAltimas altera\xE7\xF5es",
+        filters: "Filtros",
+        markCurrentReviewed: "Marcar chaves atuais como revisadas",
+        noReviewBaseline: "Ainda n\xE3o h\xE1 uma base de revis\xE3o.",
+        expandAll: "Expandir todos",
+        collapseAll: "Recolher todos",
+        showToolbar: "Mostrar barra de ferramentas",
+        hideToolbar: "Ocultar barra de ferramentas",
+        reviewSummary: (addedCount, removedCount) => `${addedCount} nova${addedCount === 1 ? "" : "s"} e ${removedCount} removida${removedCount === 1 ? "" : "s"} desde a \xFAltima revis\xE3o.`,
+        visualizationLevels: "N\xEDveis",
+        visualizationLevelsHelp: "Escolha quantos n\xEDveis hier\xE1rquicos devem aparecer como grupos de tradu\xE7\xF5es colaps\xE1veis. O n\xEDvel 0 mostra uma \xFAnica tabela; cada n\xEDvel adicional quebra a tabela em grupos aninhados, sem alterar a estrutura das tradu\xE7\xF5es.",
         search: "Pesquisar",
-        searchPlaceholder: "Chave ou tradu\xE7\xE3o",
+        searchPlaceholder: "Pesquisar por chave ou tradu\xE7\xE3o",
+        removed: "Removida",
         key: "Chave",
         usages: "Usos",
         base: "Base",
@@ -311,6 +335,7 @@ var init_pt = __esm({
 A altera\xE7\xE3o permanecer\xE1 na bundle em mem\xF3ria at\xE9 que voc\xEA a exporte para o projeto.`,
         keyRemoved: (key) => `Chave ${key} removida de todos os idiomas. Exporte para aplicar a altera\xE7\xE3o ao projeto.`,
         translationUpdated: (language, key) => `Tradu\xE7\xE3o ${language}.${key} atualizada.`,
+        reviewBaselineSaved: (count) => `${count} chave${count === 1 ? "" : "s"} marcada${count === 1 ? "" : "s"} como revisada${count === 1 ? "" : "s"}.`,
         jsonObjectExpected: (field) => `${field} deve ser um objeto JSON.`,
         couldNotSaveSettings: (error) => `N\xE3o foi poss\xEDvel salvar as configura\xE7\xF5es: ${error}`,
         couldNotSaveLocalCopy: (error) => `N\xE3o foi poss\xEDvel salvar a c\xF3pia local: ${error}`,
@@ -322,12 +347,13 @@ A altera\xE7\xE3o permanecer\xE1 na bundle em mem\xF3ria at\xE9 que voc\xEA a ex
         exported: "Altera\xE7\xF5es exportadas para os arquivos do projeto.",
         generatingBundle: "Gerando a bundle do projeto\u2026",
         generatedBundle: "Bundle gerada automaticamente a partir do cat\xE1logo do projeto.",
+        couldNotGenerateBundle: (error) => `N\xE3o foi poss\xEDvel gerar a bundle do projeto: ${error}`,
         restoredBundle: "A vers\xE3o mais recente foi restaurada do navegador.",
         loadedBundle: "Bundle do projeto carregada automaticamente.",
         newerBundle: "Existe uma bundle mais recente no projeto. Ela foi carregada e substituir\xE1 a c\xF3pia do navegador.",
         noUsageCache: "Nenhum cache de usos foi encontrado. Analisando refer\xEAncias tipadas\u2026",
         unverifiedUsageCache: "Exibindo um cache de usos n\xE3o verificado enquanto uma nova an\xE1lise \xE9 executada\u2026",
-        usageSummary: (used, uncertain, unreferenced, files) => `${used} chaves usadas, ${uncertain} incertas e ${unreferenced} n\xE3o referenciadas em ${files} arquivos de c\xF3digo-fonte.`,
+        usageSummary: (used, uncertain, unreferenced) => `${used} usadas, ${uncertain} incertas e ${unreferenced} n\xE3o referenciadas.`,
         couldNotAnalyzeUsages: (error) => `N\xE3o foi poss\xEDvel analisar os usos: ${error}`,
         plannedChanges: (count) => `${count} arquivo${count === 1 ? "" : "s"} com altera\xE7\xF5es planejadas.`,
         projectMatchesPreview: "Os arquivos do projeto j\xE1 correspondem \xE0 pr\xE9via.",
@@ -405,12 +431,64 @@ function withUpdatedAt(bundle, updatedAt = Date.now()) {
   };
 }
 
+// src/web/review-baseline.ts
+var REVIEW_BASELINE_FORMAT = "wads-i18n-review-baseline";
+var REVIEW_BASELINE_VERSION = 1;
+function isFunctionDescriptor(value) {
+  return value !== null && typeof value === "object" && value.$type === "function";
+}
+function appendSegment(keyPath, segment) {
+  return segment.startsWith("[") ? `${keyPath}${segment}` : keyPath ? `${keyPath}.${segment}` : segment;
+}
+function collectTranslationKeys(value, keyPath = "", keys = /* @__PURE__ */ new Set()) {
+  if (isFunctionDescriptor(value)) {
+    keys.add(keyPath);
+    return keys;
+  }
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => collectTranslationKeys(item, appendSegment(keyPath, `[${index}]`), keys));
+    return keys;
+  }
+  if (value !== null && typeof value === "object") {
+    Object.entries(value).forEach(([key, nestedValue]) => {
+      collectTranslationKeys(nestedValue, appendSegment(keyPath, key), keys);
+    });
+    return keys;
+  }
+  if (keyPath) keys.add(keyPath);
+  return keys;
+}
+function getBundleTranslationKeys(bundle) {
+  const keys = /* @__PURE__ */ new Set();
+  Object.values(bundle.languages).forEach(({ translations }) => collectTranslationKeys(translations, "", keys));
+  return [...keys].sort((left, right) => left.localeCompare(right));
+}
+function createReviewBaseline(bundle) {
+  return {
+    format: REVIEW_BASELINE_FORMAT,
+    version: REVIEW_BASELINE_VERSION,
+    createdAt: Date.now(),
+    keys: getBundleTranslationKeys(bundle)
+  };
+}
+function getNewReviewKeys(bundle, baseline) {
+  if (!baseline) return [];
+  const reviewedKeys = new Set(baseline.keys);
+  return getBundleTranslationKeys(bundle).filter((key) => !reviewedKeys.has(key));
+}
+function getRemovedReviewKeys(bundle, baseline) {
+  if (!baseline) return [];
+  const currentKeys = new Set(getBundleTranslationKeys(bundle));
+  return baseline.keys.filter((key) => !currentKeys.has(key));
+}
+
 // src/web/bundle-storage.ts
 var DATABASE_NAME = "wads-i18n-editor";
 var DATABASE_VERSION = 1;
 var STORE_NAME = "bundles";
 var CURRENT_BUNDLE_KEY = "current";
 var PROJECT_CONFIG_KEY = "project-config";
+var REVIEW_BASELINE_KEY = "review-baseline";
 var LEGACY_VISUALIZATION_CONFIG_KEY = "visualization-config";
 function projectKey(projectDirectory, key) {
   return `${key}:${projectDirectory}`;
@@ -486,6 +564,34 @@ async function saveStoredProjectConfig(projectDirectory, config) {
     database.close();
   }
 }
+async function loadStoredReviewBaseline(projectDirectory) {
+  const database = await openDatabase();
+  try {
+    const transaction = database.transaction(STORE_NAME, "readonly");
+    const record = await requestResult(
+      transaction.objectStore(STORE_NAME).get(projectKey(projectDirectory, REVIEW_BASELINE_KEY))
+    );
+    await transactionComplete(transaction);
+    const baseline = record?.baseline;
+    if (!baseline || baseline.format !== REVIEW_BASELINE_FORMAT || baseline.version !== REVIEW_BASELINE_VERSION || !Array.isArray(baseline.keys)) return null;
+    return baseline;
+  } finally {
+    database.close();
+  }
+}
+async function saveStoredReviewBaseline(projectDirectory, baseline) {
+  const database = await openDatabase();
+  try {
+    const transaction = database.transaction(STORE_NAME, "readwrite");
+    await requestResult(transaction.objectStore(STORE_NAME).put({
+      id: projectKey(projectDirectory, REVIEW_BASELINE_KEY),
+      baseline
+    }));
+    await transactionComplete(transaction);
+  } finally {
+    database.close();
+  }
+}
 
 // src/core/keyPath.ts
 function isContainer(value) {
@@ -925,11 +1031,11 @@ function getTranslationOwnerChain(fullKey, config) {
   void consumedSegments;
   return owners;
 }
-function isFunctionDescriptor(value) {
+function isFunctionDescriptor2(value) {
   return value !== null && typeof value === "object" && "$type" in value && value.$type === "function";
 }
-function collectTranslationKeys(value, path = "", keys = []) {
-  if (isFunctionDescriptor(value)) {
+function collectTranslationKeys2(value, path = "", keys = []) {
+  if (isFunctionDescriptor2(value)) {
     keys.push(path);
     return keys;
   }
@@ -939,7 +1045,7 @@ function collectTranslationKeys(value, path = "", keys = []) {
   }
   if (value && typeof value === "object") {
     Object.entries(value).forEach(([key, nestedValue]) => {
-      collectTranslationKeys(nestedValue, path ? `${path}.${key}` : key, keys);
+      collectTranslationKeys2(nestedValue, path ? `${path}.${key}` : key, keys);
     });
     return keys;
   }
@@ -952,7 +1058,7 @@ function buildTranslationOwners(bundle, config) {
   const owners = /* @__PURE__ */ new Map();
   const referenceLanguage = Object.values(validBundle.languages)[0];
   if (referenceLanguage) {
-    collectTranslationKeys(referenceLanguage.translations).forEach((key) => {
+    collectTranslationKeys2(referenceLanguage.translations).forEach((key) => {
       getTranslationOwnerChain(key, validConfig).forEach((owner) => {
         const existing = owners.get(owner.directory);
         if (existing && existing.keyPath !== owner.keyPath) {
@@ -1182,7 +1288,7 @@ function getDisplayLevelName2(config, level) {
   const configured = getEditorLevelName(config, level);
   return configured === `Level ${level}` ? Lang.common.level(level) : configured;
 }
-function isFunctionDescriptor2(value) {
+function isFunctionDescriptor3(value) {
   return value && typeof value === "object" && value.$type === "function";
 }
 function splitFunctionSource(source) {
@@ -1202,21 +1308,21 @@ function describeBase(entries) {
   }
   return { label: Lang.editor.inconsistent, type: "inconsistent" };
 }
-function appendSegment(path, segment) {
+function appendSegment2(path, segment) {
   return segment.startsWith("[") ? `${path}${segment}` : path ? `${path}.${segment}` : segment;
 }
 function flatten(value, path = "", entries = /* @__PURE__ */ new Map()) {
-  if (isFunctionDescriptor2(value)) {
+  if (isFunctionDescriptor3(value)) {
     const { signature, body } = splitFunctionSource(value.source);
     entries.set(path, { text: body, type: "function", signature });
     return entries;
   }
   if (Array.isArray(value)) {
-    value.forEach((item, index) => flatten(item, appendSegment(path, `[${index}]`), entries));
+    value.forEach((item, index) => flatten(item, appendSegment2(path, `[${index}]`), entries));
     return entries;
   }
   if (value && typeof value === "object") {
-    Object.entries(value).forEach(([key, nestedValue]) => flatten(nestedValue, appendSegment(path, key), entries));
+    Object.entries(value).forEach(([key, nestedValue]) => flatten(nestedValue, appendSegment2(path, key), entries));
     return entries;
   }
   entries.set(path, { text: value == null ? "" : String(value), type: "string" });
@@ -1352,18 +1458,27 @@ function beginTextEdit(cell, originalValue, onCommit) {
   input.focus();
   input.select();
 }
-function createRows(bundle) {
+function createRows(bundle, removedKeys = []) {
   const languages = Object.entries(bundle.languages);
   const flattenedTranslations = Object.fromEntries(
     languages.map(([key, language]) => [key, flatten(language.translations)])
   );
   const keys = [...new Set(Object.values(flattenedTranslations).flatMap((entries) => [...entries.keys()]))].sort((left, right) => left.localeCompare(right));
+  const currentRows = keys.map((fullKey) => ({
+    fullKey,
+    removed: false,
+    languageEntries: languages.map(([languageKey]) => flattenedTranslations[languageKey].get(fullKey))
+  }));
+  const currentKeySet = new Set(keys);
+  const removedRows = removedKeys.filter((fullKey) => !currentKeySet.has(fullKey)).sort((left, right) => left.localeCompare(right)).map((fullKey) => ({
+    fullKey,
+    removed: true,
+    languageEntries: languages.map(() => void 0)
+  }));
   return {
     languages,
-    rows: keys.map((fullKey) => ({
-      fullKey,
-      languageEntries: languages.map(([languageKey]) => flattenedTranslations[languageKey].get(fullKey))
-    }))
+    rows: [...currentRows, ...removedRows],
+    currentKeyCount: currentRows.length
   };
 }
 function createGroupTree(rows, levelCount) {
@@ -1413,23 +1528,26 @@ function createTranslationTable(document2, languages, rows, depth, { onMoveKey,
   const body = table.createTBody();
   rows.forEach((rowData) => {
     const row = body.insertRow();
-    const { fullKey, languageEntries } = rowData;
+    const { fullKey, languageEntries, removed } = rowData;
+    if (removed) row.classList.add("review-removed-row");
+    row.dataset.translationKey = fullKey;
+    row.dataset.reviewStatus = removed ? "removed" : "current";
     row.dataset.search = [
       fullKey,
       ...languageEntries.map((entry) => entry?.text ?? "")
     ].join(" ").toLocaleLowerCase();
-    row.dataset.usageStatus = usageReport?.entries[fullKey]?.status || "not-analyzed";
+    row.dataset.usageStatus = removed ? "removed" : usageReport?.entries[fullKey]?.status || "not-analyzed";
     const keyCell = document2.createElement("td");
     keyCell.className = "key";
     const keyContent = document2.createElement("div");
     keyContent.className = "key-content";
     const keyLabel = document2.createElement("span");
     keyLabel.textContent = getRelativeKey(fullKey, depth);
-    if (onMoveKey) {
+    if (!removed && onMoveKey) {
       keyCell.title = Lang.editor.doubleClickMove;
       keyCell.addEventListener("dblclick", () => onMoveKey(fullKey));
     }
-    if (onRemoveKey) {
+    if (!removed && onRemoveKey) {
       const removeButton = document2.createElement("button");
       removeButton.type = "button";
       removeButton.className = [
@@ -1449,12 +1567,12 @@ function createTranslationTable(document2, languages, rows, depth, { onMoveKey,
     keyContent.append(keyLabel);
     keyCell.append(keyContent);
     row.append(keyCell);
-    row.append(createUsageCell(document2, usageReport?.entries[fullKey]));
+    row.append(removed ? createCell(document2, Lang.editor.removed, "usage-cell review-removed-value") : createUsageCell(document2, usageReport?.entries[fullKey]));
     languages.forEach(([languageKey], index) => {
       const entry = languageEntries[index];
       const className = ["language-value", entry?.type === "function" ? "function-value" : ""].filter(Boolean).join(" ");
-      const valueCell = createCell(document2, entry?.text ?? Lang.editor.missing, className);
-      if (entry?.type === "string" && onEditValue) {
+      const valueCell = createCell(document2, entry?.text ?? (removed ? Lang.editor.removed : Lang.editor.missing), className);
+      if (!removed && entry?.type === "string" && onEditValue) {
         valueCell.title = Lang.editor.doubleClickEdit;
         valueCell.addEventListener("dblclick", () => {
           beginTextEdit(valueCell, entry.text, (value) => onEditValue({
@@ -1466,7 +1584,7 @@ function createTranslationTable(document2, languages, rows, depth, { onMoveKey,
       }
       row.append(valueCell);
     });
-    const base = describeBase(languageEntries);
+    const base = removed ? { label: Lang.editor.removed, type: "removed" } : describeBase(languageEntries);
     row.append(createCell(document2, base.label, `base-value base-${base.type}`));
   });
   return table;
@@ -1513,16 +1631,16 @@ function appendTableGroup(document2, container, node, languages, callbacks, isRo
   }
   [...node.children.values()].sort((left, right) => left.name.localeCompare(right.name)).forEach((child) => appendTableGroup(document2, container, child, languages, callbacks));
 }
-function renderTranslationTables(container, bundle, { projectConfig: projectConfig2, usageReport, onMoveKey, onRemoveKey, onEditValue }) {
+function renderTranslationTables(container, bundle, { projectConfig: projectConfig2, usageReport, onMoveKey, onRemoveKey, onEditValue, removedKeys }) {
   activeUsagePopover?.close();
   const document2 = container.ownerDocument;
-  const { languages, rows } = createRows(bundle);
+  const { languages, rows, currentKeyCount } = createRows(bundle, removedKeys);
   const normalizedLevelCount = Math.max(0, Number.isInteger(projectConfig2?.levelCount) ? projectConfig2.levelCount : 0);
   const tree = createGroupTree(rows, normalizedLevelCount);
   const fragment = document2.createDocumentFragment();
   appendTableGroup(document2, fragment, tree, languages, { projectConfig: projectConfig2, usageReport, onMoveKey, onRemoveKey, onEditValue }, true);
   container.replaceChildren(fragment);
-  return rows.length;
+  return currentKeyCount;
 }
 
 // src/web/view.ts
@@ -1532,12 +1650,17 @@ function createEditorView({ emptyState, tableWrap, tableContainer, summary, sear
   let projectConfig2 = createDefaultEditorProjectConfig();
   let usageReport = null;
   let showUnreferenced = false;
+  let showNewKeys = false;
+  let newKeys = /* @__PURE__ */ new Set();
+  let removedKeys = /* @__PURE__ */ new Set();
   function applyFilters() {
     const query = search.value.trim().toLocaleLowerCase();
     currentRows.forEach((row) => {
       const matchesSearch = query === "" || row.dataset.search.includes(query);
       const matchesUsage = !showUnreferenced || row.dataset.usageStatus === "unreferenced";
-      row.hidden = !matchesSearch || !matchesUsage;
+      const isRemoved = row.dataset.reviewStatus === "removed";
+      const matchesReview = showNewKeys ? newKeys.has(row.dataset.translationKey) || removedKeys.has(row.dataset.translationKey) : !isRemoved;
+      row.hidden = !matchesSearch || !matchesUsage || !matchesReview;
     });
     tableContainer.querySelectorAll(".table-group, .translation-group").forEach((group) => {
       group.hidden = group.querySelector("tbody tr:not([hidden])") === null;
@@ -1558,6 +1681,7 @@ function createEditorView({ emptyState, tableWrap, tableContainer, summary, sear
       const keyCount = renderTranslationTables(tableContainer, bundle, {
         projectConfig: projectConfig2,
         usageReport,
+        removedKeys: [...removedKeys],
         onMoveKey,
         onRemoveKey,
         onEditValue
@@ -1579,6 +1703,23 @@ function createEditorView({ emptyState, tableWrap, tableContainer, summary, sear
     setShowUnreferenced(value) {
       showUnreferenced = value;
       applyFilters();
+    },
+    setReviewKeys(keys, removed) {
+      newKeys = new Set(keys);
+      removedKeys = new Set(removed);
+      if (currentBundle) this.render(currentBundle);
+    },
+    setShowNewKeys(value) {
+      showNewKeys = value;
+      applyFilters();
+    },
+    toggleAllGroups() {
+      const groups = [...tableContainer.querySelectorAll("details.translation-group")];
+      const expand = groups.some((group) => !group.open);
+      groups.forEach((group) => {
+        group.open = expand;
+      });
+      return expand;
     }
   };
 }
@@ -1672,6 +1813,17 @@ function translateStaticDocument() {
 }
 translateStaticDocument();
 var state = createEditorState();
+var REVIEW_FILTER_STORAGE_KEY = "@wads.dev/i18n-editor/show-new-keys";
+var TOOLBAR_VISIBILITY_STORAGE_KEY = "@wads.dev/i18n-editor/translation-toolbar-visible";
+function getReviewFilterStorageKey(projectDirectory) {
+  return `${REVIEW_FILTER_STORAGE_KEY}:${projectDirectory}`;
+}
+function loadShowNewKeysPreference(projectDirectory) {
+  return localStorage.getItem(getReviewFilterStorageKey(projectDirectory)) === "true";
+}
+function saveShowNewKeysPreference(projectDirectory, value) {
+  localStorage.setItem(getReviewFilterStorageKey(projectDirectory), String(value));
+}
 function getElement(selector) {
   const element = document.querySelector(selector);
   if (!element) throw new Error(`Required editor element not found: ${selector}`);
@@ -1710,6 +1862,8 @@ var elements = {
   summary: getElement("#bundle-summary"),
   settingsPanel: getElement("#settings-panel"),
   tableWrap: getElement("#table-wrap"),
+  translationToolbar: getElement("#translation-toolbar"),
+  toggleTranslationToolbar: getElement("#toggle-translation-toolbar"),
   toggleSettingsPanel: getElement("#toggle-settings-panel"),
   projectStatus: getElement("#project-status"),
   projectStatusText: getElement("#project-status-text"),
@@ -1717,15 +1871,33 @@ var elements = {
   analyzeUsage: getElement("#analyze-usage"),
   language: getElement("#editor-language"),
   showUnreferenced: getElement("#show-unreferenced"),
+  showNewKeys: getElement("#show-new-keys"),
+  newKeyCount: getElement("#new-key-count"),
+  markCurrentReviewed: getElement("#mark-current-reviewed"),
+  toggleAllGroups: getElement("#toggle-all-groups"),
+  reviewSummary: getElement("#review-summary"),
   visualLevelCount: getElement("#visual-level-count")
 };
+function setIconButtonLabel(button, label) {
+  button.title = label;
+  button.setAttribute("aria-label", label);
+}
+function setAllGroupsToggleState(expanded) {
+  const label = expanded ? Lang.editor.collapseAll : Lang.editor.expandAll;
+  setIconButtonLabel(elements.toggleAllGroups, label);
+  elements.toggleAllGroups.setAttribute("aria-pressed", String(expanded));
+  elements.toggleAllGroups.classList.toggle("is-expanded", expanded);
+}
 var settingsPanelVisible = false;
+var translationToolbarVisible = localStorage.getItem(TOOLBAR_VISIBILITY_STORAGE_KEY) !== "false";
 var projectConfig = createDefaultEditorProjectConfig();
 var currentProjectDirectory = "";
+var canGenerateProjectBundle = false;
 var checkedExportChanges = null;
 var exportPreviewRequestVersion = 0;
 var visualLevelCountOverride = null;
 var currentUsageReport = null;
+var reviewBaseline = null;
 function replaceUsageReport(report) {
   currentUsageReport = report;
   view.setUsageReport(report);
@@ -1753,6 +1925,30 @@ function removeUsageKey(keyToRemove) {
   }));
   replaceUsageReport({ ...currentUsageReport, entries });
 }
+function updateReviewControls(bundle = state.getBundle()) {
+  const newKeys = bundle ? getNewReviewKeys(bundle, reviewBaseline) : [];
+  const removedKeys = bundle ? getRemovedReviewKeys(bundle, reviewBaseline) : [];
+  view.setReviewKeys(newKeys, removedKeys);
+  elements.markCurrentReviewed.disabled = !bundle;
+  elements.toggleAllGroups.disabled = !bundle;
+  if (!bundle) setAllGroupsToggleState(false);
+  elements.showNewKeys.disabled = !bundle || reviewBaseline === null;
+  elements.newKeyCount.textContent = reviewBaseline ? String(newKeys.length + removedKeys.length) : "";
+  if (!bundle) {
+    elements.showNewKeys.checked = false;
+    view.setShowNewKeys(false);
+    elements.reviewSummary.textContent = "";
+    return;
+  }
+  if (!reviewBaseline) {
+    elements.showNewKeys.checked = false;
+    view.setShowNewKeys(false);
+    elements.reviewSummary.textContent = Lang.editor.noReviewBaseline;
+    return;
+  }
+  view.setShowNewKeys(elements.showNewKeys.checked);
+  elements.reviewSummary.textContent = Lang.editor.reviewSummary(newKeys.length, removedKeys.length);
+}
 function renderCurrentExportPreview() {
   renderExportPreview(elements.exportPreview, state.getBundle(), projectConfig, checkedExportChanges);
 }
@@ -1769,7 +1965,7 @@ function invalidateExportPreview() {
 function invalidateUsageAnalysis(message = "") {
   view.setUsageReport(currentUsageReport);
   elements.analyzeUsage.disabled = !state.getBundle();
-  elements.analyzeUsage.textContent = currentUsageReport ? Lang.editor.updateUsages : Lang.editor.analyzeUsages;
+  setIconButtonLabel(elements.analyzeUsage, currentUsageReport ? Lang.editor.updateUsages : Lang.editor.analyzeUsages);
   if (message) setFeedback(message);
 }
 var view = createEditorView({
@@ -1824,6 +2020,14 @@ function setSettingsPanelVisibility(visible) {
   );
   elements.toggleSettingsPanel.title = elements.toggleSettingsPanel.getAttribute("aria-label");
 }
+function setTranslationToolbarVisibility(visible, persist = true) {
+  translationToolbarVisible = visible;
+  elements.translationToolbar.hidden = !visible;
+  elements.toggleTranslationToolbar.setAttribute("aria-expanded", String(visible));
+  setIconButtonLabel(elements.toggleTranslationToolbar, visible ? Lang.editor.hideToolbar : Lang.editor.showToolbar);
+  elements.toggleTranslationToolbar.classList.toggle("toolbar-collapsed", !visible);
+  if (persist) localStorage.setItem(TOOLBAR_VISIBILITY_STORAGE_KEY, String(visible));
+}
 var projectConfigQueue = Promise.resolve();
 function parseJsonObject(value, fieldName) {
   const parsed = JSON.parse(value);
@@ -1893,6 +2097,8 @@ function persistBundle(bundle) {
 }
 state.subscribe((bundle) => {
   view.render(bundle);
+  setAllGroupsToggleState(false);
+  updateReviewControls(bundle);
   invalidateExportPreview();
   invalidateUsageAnalysis();
   if (bundle) persistBundle(bundle);
@@ -1901,13 +2107,19 @@ view.render(state.getBundle());
 elements.toggleSettingsPanel.addEventListener("click", () => {
   setSettingsPanelVisibility(!settingsPanelVisible);
 });
+elements.toggleTranslationToolbar.addEventListener("click", () => {
+  setTranslationToolbarVisibility(!translationToolbarVisible);
+});
 elements.language.value = globalThis.CurrentLanguage;
 elements.language.addEventListener("change", async () => {
   await setLanguage(elements.language.value);
   translateStaticDocument();
+  setTranslationToolbarVisibility(translationToolbarVisible, false);
   setSettingsPanelVisibility(settingsPanelVisible);
   applyProjectConfig(projectConfig, false);
   view.render(state.getBundle());
+  setAllGroupsToggleState(false);
+  updateReviewControls();
   invalidateExportPreview();
   invalidateUsageAnalysis();
 });
@@ -1916,7 +2128,7 @@ async function loadUsageAnalysis(wait) {
   if (!bundle) return;
   const config = projectConfig;
   elements.analyzeUsage.disabled = true;
-  elements.analyzeUsage.textContent = wait ? Lang.editor.updatingUsages : Lang.editor.loadingUsages;
+  setIconButtonLabel(elements.analyzeUsage, wait ? Lang.editor.updatingUsages : Lang.editor.loadingUsages);
   try {
     const cached = await analyzeProjectUsage(bundle, config, wait);
     if (state.getBundle() !== bundle || projectConfig !== config) return;
@@ -1933,20 +2145,54 @@ async function loadUsageAnalysis(wait) {
     const used = usages.filter(({ status }) => status === "used").length;
     const uncertain = usages.filter(({ status }) => status === "uncertain").length;
     const unreferenced = usages.filter(({ status }) => status === "unreferenced").length;
-    setFeedback(Lang.messages.usageSummary(used, uncertain, unreferenced, report.sourceFileCount));
+    setFeedback(Lang.messages.usageSummary(used, uncertain, unreferenced));
   } catch (error) {
     setFeedback(Lang.messages.couldNotAnalyzeUsages(error instanceof Error ? error.message : String(error)), true);
   } finally {
     elements.analyzeUsage.disabled = !state.getBundle();
-    elements.analyzeUsage.textContent = currentUsageReport ? Lang.editor.updateUsages : Lang.editor.analyzeUsages;
+    setIconButtonLabel(elements.analyzeUsage, currentUsageReport ? Lang.editor.updateUsages : Lang.editor.analyzeUsages);
   }
 }
 elements.analyzeUsage.addEventListener("click", async () => {
+  const bundleBeforeRefresh = state.getBundle();
+  if (bundleBeforeRefresh && canGenerateProjectBundle) {
+    elements.analyzeUsage.disabled = true;
+    setIconButtonLabel(elements.analyzeUsage, Lang.messages.generatingBundle);
+    await refreshBundleFromProject(bundleBeforeRefresh);
+  }
   await loadUsageAnalysis(true);
 });
 elements.showUnreferenced.addEventListener("change", () => {
   view.setShowUnreferenced(elements.showUnreferenced.checked);
 });
+elements.showNewKeys.addEventListener("change", () => {
+  view.setShowNewKeys(elements.showNewKeys.checked);
+  if (!currentProjectDirectory) return;
+  try {
+    saveShowNewKeysPreference(currentProjectDirectory, elements.showNewKeys.checked);
+  } catch (error) {
+    setFeedback(Lang.messages.couldNotSaveLocalCopy(error instanceof Error ? error.message : String(error)), true);
+  }
+});
+elements.markCurrentReviewed.addEventListener("click", async () => {
+  const bundle = state.getBundle();
+  if (!bundle || !currentProjectDirectory) return;
+  const nextBaseline = createReviewBaseline(bundle);
+  elements.markCurrentReviewed.disabled = true;
+  try {
+    await saveStoredReviewBaseline(currentProjectDirectory, nextBaseline);
+    reviewBaseline = nextBaseline;
+    updateReviewControls(bundle);
+    setFeedback(Lang.messages.reviewBaselineSaved(nextBaseline.keys.length));
+  } catch (error) {
+    setFeedback(Lang.messages.couldNotSaveLocalCopy(error instanceof Error ? error.message : String(error)), true);
+  } finally {
+    elements.markCurrentReviewed.disabled = !state.getBundle();
+  }
+});
+elements.toggleAllGroups.addEventListener("click", () => {
+  setAllGroupsToggleState(view.toggleAllGroups());
+});
 elements.visualLevelCount.addEventListener("input", () => {
   const parsed = Number.parseInt(elements.visualLevelCount.value, 10);
   visualLevelCountOverride = Number.isFinite(parsed) ? Math.min(12, Math.max(0, parsed)) : 0;
@@ -2218,37 +2464,62 @@ function setProjectStatus(message, isError = false) {
 function hideProjectStatus() {
   elements.projectStatus.hidden = true;
 }
+async function refreshBundleFromProject(bundleBeforeRefresh, refreshUsage = false) {
+  if (!canGenerateProjectBundle) return false;
+  try {
+    const generatedBundle = (await generateProjectBundle()).bundle;
+    if (state.getBundle() !== bundleBeforeRefresh) return false;
+    state.replaceBundle(generatedBundle);
+    setFeedback(Lang.messages.generatedBundle);
+    if (refreshUsage) void loadUsageAnalysis(false);
+    return true;
+  } catch (error) {
+    setFeedback(
+      Lang.messages.couldNotGenerateBundle(error instanceof Error ? error.message : String(error)),
+      true
+    );
+    return false;
+  }
+}
 async function loadProject() {
   setProjectStatus(Lang.messages.connecting);
   try {
     const info = await getProjectInfo();
     currentProjectDirectory = info.projectDirectory;
-    const [storedBundle, storedConfig] = await Promise.all([
+    canGenerateProjectBundle = info.canGenerateBundle;
+    const [storedBundle, storedConfig, storedReviewBaseline] = await Promise.all([
       loadStoredBundle(currentProjectDirectory),
-      loadStoredProjectConfig(currentProjectDirectory)
+      loadStoredProjectConfig(currentProjectDirectory),
+      loadStoredReviewBaseline(currentProjectDirectory)
     ]);
+    reviewBaseline = storedReviewBaseline;
+    elements.showNewKeys.checked = reviewBaseline !== null && loadShowNewKeysPreference(currentProjectDirectory);
     if (info.config) {
       applyProjectConfig(info.config, false);
     } else if (storedConfig && Array.isArray(storedConfig.levelImports)) {
       applyProjectConfig(storedConfig, false);
     }
-    let projectBundle = info.bundle;
-    let generated = false;
-    if (!projectBundle) {
-      if (!info.canGenerateBundle) {
-        throw new Error(Lang.messages.missingCatalog);
-      }
-      setProjectStatus(Lang.messages.generatingBundle);
-      projectBundle = (await generateProjectBundle()).bundle;
-      generated = true;
+    const projectBundle = info.bundle;
+    if (!projectBundle && !storedBundle && !info.canGenerateBundle) {
+      throw new Error(Lang.messages.missingCatalog);
     }
-    const projectIsNewer = storedBundle && projectBundle.updatedAt > storedBundle.updatedAt;
-    const selectedBundle = !storedBundle || projectIsNewer ? projectBundle : storedBundle;
-    if (projectIsNewer && !generated) {
+    const projectIsNewer = Boolean(storedBundle && projectBundle && projectBundle.updatedAt > storedBundle.updatedAt);
+    const selectedBundle = !storedBundle || projectBundle && projectIsNewer ? projectBundle : storedBundle;
+    if (projectIsNewer) {
       window.alert(Lang.messages.newerBundle);
     }
-    state.replaceBundle(selectedBundle);
-    setFeedback(generated ? Lang.messages.generatedBundle : selectedBundle === storedBundle ? Lang.messages.restoredBundle : Lang.messages.loadedBundle);
+    if (selectedBundle) {
+      state.replaceBundle(selectedBundle);
+      setFeedback(selectedBundle === storedBundle ? Lang.messages.restoredBundle : Lang.messages.loadedBundle);
+      hideProjectStatus();
+      void loadUsageAnalysis(false);
+      void refreshBundleFromProject(selectedBundle, true);
+      return;
+    }
+    setProjectStatus(Lang.messages.generatingBundle);
+    const generatedBundle = (await generateProjectBundle()).bundle;
+    state.replaceBundle(generatedBundle);
+    setFeedback(Lang.messages.generatedBundle);
     hideProjectStatus();
     void loadUsageAnalysis(false);
   } catch (error) {
@@ -2260,5 +2531,6 @@ async function loadProject() {
 }
 applyProjectConfig(projectConfig, false);
 setSettingsPanelVisibility(false);
+setTranslationToolbarVisibility(translationToolbarVisible, false);
 elements.retryProjectLoad.addEventListener("click", () => void loadProject());
 void loadProject();

package/dist/public/index.html

@@ -9,22 +9,25 @@
   </head>
   <body>
     <main class="page">
-      <header class="page-header">
-        <p class="eyebrow" data-i18n="page.eyebrow">i18n bundle</p>
-        <div class="page-title-row">
+      <header class="app-header">
+        <div class="app-identity">
+          <span class="eyebrow" data-i18n="page.eyebrow">i18n bundle</span>
           <h1 data-i18n="page.title">Translation Editor</h1>
-          <label class="language-field" for="editor-language">
-            <span data-i18n="language.label">Language</span>
+        </div>
+        <div class="app-actions">
+          <label class="compact-language-field" for="editor-language" data-i18n-title="language.label" title="Language">
             <select id="editor-language">
               <option value="en" data-i18n="language.english">English</option>
               <option value="pt" data-i18n="language.portuguese">Português</option>
             </select>
           </label>
+          <button id="toggle-translation-toolbar" class="icon-button" type="button" data-i18n-title="editor.hideToolbar" data-i18n-aria-label="editor.hideToolbar" aria-expanded="true" title="Hide toolbar" aria-label="Hide toolbar">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 14 5-5 5 5" /></svg>
+          </button>
           <button id="toggle-settings-panel" class="icon-button" type="button" aria-label="Show settings" aria-expanded="false" title="Show settings">
             <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z"/><path d="m19.4 13.5 1.1.9-2 3.4-1.3-.5a8 8 0 0 1-1.8 1l-.2 1.4h-4l-.2-1.4a8 8 0 0 1-1.8-1l-1.3.5-2-3.4 1.1-.9a8.5 8.5 0 0 1 0-2l-1.1-.9 2-3.4 1.3.5a8 8 0 0 1 1.8-1l.2-1.4h4l.2 1.4a8 8 0 0 1 1.8 1l1.3-.5 2 3.4-1.1.9a8.5 8.5 0 0 1 0 2Z"/></svg>
           </button>
         </div>
-        <p class="intro" data-i18n="page.intro">The editor detects the current project's configuration and bundle. When necessary, it generates the bundle directly from the TypeScript catalog.</p>
       </header>
 
       <section id="project-status" class="project-status loading" role="status" aria-live="polite">
@@ -155,26 +158,42 @@
       </section>
 
       <section class="report" aria-labelledby="report-title">
-        <div class="report-header">
-          <div>
+        <div id="translation-toolbar" class="report-header">
+          <div class="report-heading">
             <h2 id="report-title" data-i18n="editor.title">Translations</h2>
             <p id="bundle-summary" data-i18n="editor.emptySummary">Load a bundle to view translations.</p>
             <p id="editor-feedback" class="feedback" role="status" aria-live="polite"></p>
+            <p id="review-summary" class="review-summary" role="status" aria-live="polite"></p>
           </div>
           <div class="translation-actions">
-            <button id="analyze-usage" class="secondary-button" type="button" data-i18n="editor.analyzeUsages" disabled>Analyze usages</button>
-            <label class="usage-filter" for="show-unreferenced">
-              <input id="show-unreferenced" type="checkbox" disabled>
-              <span data-i18n="editor.unreferencedOnly">Unreferenced only</span>
-            </label>
-            <label class="visual-level-field" for="visual-level-count">
-              <span data-i18n="editor.visualizationLevels">Visualization levels</span>
+            <section class="filter-box" aria-label="Filters" data-i18n-aria-label="editor.filters">
+              <label class="toolbar-toggle" for="show-unreferenced" data-i18n-title="editor.unreferencedOnly" title="Show unreferenced only">
+                <input id="show-unreferenced" type="checkbox" disabled>
+                <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01M10.3 4.4 2.8 18a2 2 0 0 0 1.75 3h14.9A2 2 0 0 0 21.2 18L13.7 4.4a2 2 0 0 0-3.4 0Z" /></svg>
+                <span data-i18n="editor.unreferencedOnly">Show unreferenced only</span>
+              </label>
+              <label class="toolbar-toggle toolbar-toggle--with-count" for="show-new-keys" data-i18n-title="editor.newKeysOnly" title="Show new keys only">
+                <input id="show-new-keys" type="checkbox" disabled>
+                <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3v18M3 12h18" /><path d="m5 5 2 2m10-2-2 2m2 10-2-2M5 19l2-2" /></svg>
+                <span data-i18n="editor.newKeysOnly">Show new keys only</span>
+                <output id="new-key-count" class="filter-count"></output>
+              </label>
+              <input id="translation-search" class="search-field" type="search" data-i18n-placeholder="editor.searchPlaceholder" data-i18n-aria-label="editor.search" placeholder="Search by key or translation" aria-label="Search">
+            </section>
+            <label class="toolbar-field visual-level-field" for="visual-level-count" data-i18n-title="editor.visualizationLevelsHelp" title="Choose how many hierarchy levels become collapsible translation groups.">
+              <span data-i18n="editor.visualizationLevels">Levels</span>
+              <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
               <input id="visual-level-count" type="number" min="0" max="12" step="1" value="2">
             </label>
-            <label class="search-field" for="translation-search">
-              <span data-i18n="editor.search">Search</span>
-              <input id="translation-search" type="search" data-i18n-placeholder="editor.searchPlaceholder" placeholder="Key or translation">
-            </label>
+            <button id="analyze-usage" class="secondary-button icon-button toolbar-icon-button" type="button" data-i18n-title="editor.analyzeUsages" data-i18n-aria-label="editor.analyzeUsages" title="Analyze usages" aria-label="Analyze usages" disabled>
+              <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M20 11a8 8 0 1 1-2.34-5.66M20 4v7h-7" /></svg>
+            </button>
+            <button id="mark-current-reviewed" class="secondary-button icon-button toolbar-icon-button" type="button" data-i18n-title="editor.markCurrentReviewed" data-i18n-aria-label="editor.markCurrentReviewed" title="Mark current keys as reviewed" aria-label="Mark current keys as reviewed" disabled>
+              <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6M5 6h7M5 18h7" /></svg>
+            </button>
+            <button id="toggle-all-groups" class="secondary-button icon-button toolbar-icon-button" type="button" data-i18n-title="editor.expandAll" data-i18n-aria-label="editor.expandAll" title="Expand all" aria-label="Expand all" aria-pressed="false" disabled>
+              <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 14 4 4 4-4M8 10l4-4 4 4M12 6v12" /></svg>
+            </button>
           </div>
         </div>
         <div id="empty-state" class="empty-state" data-i18n="editor.noBundle">No bundle loaded.</div>

package/dist/public/styles.css

@@ -20,14 +20,14 @@ body {
 
 button, input, textarea { font: inherit; }
 
-.page { width: calc(100% - 40px); margin: 44px auto; }
-.page-header { max-width: 720px; margin-bottom: 28px; }
-.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.language-field { display: grid; gap: 3px; margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 750; }
-.language-field select { padding: 6px 24px 6px 8px; border: 1px solid #c8cfdd; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
-.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
+.page { width: calc(100% - 24px); margin: 12px auto 24px; }
+.app-header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 10px; padding: 0 4px; }
+.app-identity, .app-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.app-identity { gap: 9px; }
+.compact-language-field select { height: 32px; padding: 5px 25px 5px 9px; border: 1px solid #c8cfdd; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; font-weight: 700; }
+.eyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
 h1, h2, p { margin-top: 0; }
-h1 { margin-bottom: 8px; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.045em; line-height: 1.05; }
+h1 { margin: 0; font-size: clamp(22px, 2.25vw, 30px); letter-spacing: -.04em; line-height: 1.05; white-space: nowrap; }
 h2 { margin-bottom: 4px; font-size: 18px; }
 .intro, .report-header p { color: var(--muted); }
 
@@ -63,12 +63,22 @@ h2 { margin-bottom: 4px; font-size: 18px; }
 .export-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
 .export-delete-option { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
 .export-delete-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--danger); }
-.translation-actions { display: flex; align-items: flex-end; gap: 10px; }
-.usage-filter { display: flex; align-items: center; gap: 7px; min-height: 38px; color: #34405b; font-size: 12px; font-weight: 750; white-space: nowrap; }
-.usage-filter input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
+.translation-actions { display: flex; width: 100%; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 8px; }
+.toolbar-toggle { min-height: 38px; }
+.toolbar-icon-button { width: 38px; height: 38px; border-radius: 9px; }
+.filter-box { display: flex; flex: 1 1 430px; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-right: auto; padding: 0; }
+.filter-box-title { align-self: center; padding: 0 3px; color: #52617c; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+.toolbar-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #c8cfdd; border-radius: 9px; color: #34405b; background: #fff; font-size: 12px; font-weight: 750; line-height: 1.25; white-space: nowrap; }
+.toolbar-toggle:has(input:checked) { border-color: #a5b4fc; color: #3730a3; background: #eef2ff; }
+.toolbar-toggle:has(input:disabled) { color: #94a3b8; background: #f8fafc; }
+.toolbar-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
+.toolbar-toggle svg, .visual-level-field svg { display: none; width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
+.filter-count { min-width: 16px; padding-left: 2px; color: var(--accent); font-variant-numeric: tabular-nums; }
 .translation-group[hidden], .table-group[hidden] { display: none; }
-.visual-level-field { display: grid; gap: 4px; color: #52617c; font-size: 11px; font-weight: 750; white-space: nowrap; }
-.visual-level-field input { width: 86px; padding: 8px 9px; border: 1px solid #c8cfdd; border-radius: 8px; color: var(--ink); background: #fff; }
+.toolbar-field { display: grid; gap: 4px; color: #52617c; font-size: 11px; font-weight: 750; white-space: nowrap; }
+.toolbar-field > span { color: #52617c; font-size: 11px; font-weight: 750; }
+.toolbar-field input { height: 38px; border: 1px solid #c8cfdd; border-radius: 8px; color: var(--ink); background: #fff; }
+.visual-level-field input { width: 86px; padding: 8px 9px; }
 .usage-cell { min-width: 170px; font-size: 12px; }
 .usage-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 4px 7px; border: 0; border-radius: 6px; color: inherit; background: transparent; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
 .usage-trigger:hover, .usage-trigger[aria-expanded="true"] { background: #f1f4fb; }
@@ -82,6 +92,10 @@ h2 { margin-bottom: 4px; font-size: 18px; }
 .usage-popover-uncertain { border-color: #f0c078; }
 .usage-popover-unreferenced { border-color: #f2b8b5; }
 .usage-empty { color: var(--muted); }
+.review-removed-row { color: #9f1239; background: #fff1f2; }
+.review-removed-row td { border-color: #fecdd3; }
+.review-removed-row .key { color: #881337; font-weight: 800; text-decoration: line-through; text-decoration-color: #fb7185; }
+.review-removed-value, .base-removed { color: #be123c; font-weight: 800; }
 .key-content { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
 .key-content > span { min-width: 0; overflow-wrap: anywhere; }
 .remove-key-button { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: 6px; color: #9f3a38; background: transparent; font: 700 18px/1 sans-serif; cursor: pointer; opacity: .22; }
@@ -111,9 +125,9 @@ h2 { margin-bottom: 4px; font-size: 18px; }
 .secondary-button { border: 1px solid #c8cfdd; color: #4c5770; background: #fff; white-space: nowrap; }
 .secondary-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
 .secondary-button:disabled { cursor: default; opacity: .55; }
-button, .report-header { display: flex; align-items: center; gap: 14px; }
+button { display: flex; align-items: center; gap: 8px; }
 button { cursor: pointer; border-radius: 9px; font-weight: 700; }
-.search-field > span { color: #34405b; font-size: 13px; font-weight: 700; }
+.search-field > span { color: #52617c; font-size: 11px; font-weight: 750; }
 textarea, .search-field input { width: 100%; border: 1px solid #c8cfdd; border-radius: 9px; color: var(--ink); background: #fff; outline: none; }
 textarea:focus, .search-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
 textarea { min-height: 120px; padding: 12px; resize: vertical; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@@ -122,12 +136,17 @@ button { border: 0; padding: 10px 14px; color: #fff; background: var(--accent);
 .feedback.error { color: var(--danger); }
 
 .report { overflow: hidden; }
-.report-header { justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
+.report-header { display: grid; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.report-heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0; }
+.report-heading h2 { margin: 0; font-size: 16px; white-space: nowrap; }
+.report-heading p { display: inline; margin: 0; font-size: 12px; white-space: nowrap; }
+.report-heading p:not(:empty)::before { content: '·'; margin: 0 7px; color: #a4afc1; }
+.review-summary { color: #596780; }
 .icon-button { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #c8cfdd; color: #4c5770; background: #fff; }
 .icon-button:hover { border-color: var(--accent); color: var(--accent); }
 .icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
-.search-field { width: min(340px, 100%); }
-.search-field input { margin-top: 5px; padding: 9px 11px; }
+.search-field { width: min(220px, 100%); }
+.search-field input { margin-top: 0; padding: 8px 10px; }
 .empty-state { padding: 56px 22px; color: var(--muted); text-align: center; }
 .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
 .table-group { padding: 18px 22px; }
@@ -160,13 +179,123 @@ code { color: #4338ca; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Conso
 tr[hidden] { display: none; }
 
 @media (max-width: 720px) {
-  .page { width: min(100% - 24px, 1500px); margin: 24px auto; }
-  .report-header { align-items: flex-start; flex-direction: column; }
-  .page-title-row { align-items: flex-start; flex-wrap: wrap; }
+  .page { width: calc(100% - 20px); margin: 8px auto 16px; }
+  .app-header { min-height: 44px; }
+  .eyebrow { display: none; }
+  h1 { font-size: 21px; }
+  .report-header { display: grid; }
   .translation-actions { width: 100%; align-items: stretch; flex-direction: column; }
+  .filter-box { width: 100%; }
+  .filter-box-title { width: 100%; }
+  .toolbar-toggle, .toolbar-field { width: 100%; }
+  .toolbar-icon-button { width: calc(50% - 5px); }
+  .visual-level-field input, .search-field { width: 100%; }
   .export-preview-header { flex-direction: column; }
   .export-diff-details { margin-left: 0; }
   .settings-fields, .level-replacers { grid-template-columns: 1fr; }
   .export-settings-fields, .code-format-fields, .deletion-settings-fields { grid-template-columns: 1fr; }
   .search-field { width: 100%; }
 }
+
+@media (max-width: 1050px) {
+  .filter-box { flex: 0 1 auto; margin-right: auto; }
+  .filter-box-title, .toolbar-toggle > span, .visual-level-field > span { display: none; }
+  .toolbar-toggle { position: relative; width: 38px; height: 38px; justify-content: center; padding: 0; }
+  .toolbar-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+  .toolbar-toggle svg, .visual-level-field svg { display: block; }
+  .visual-level-field { position: relative; display: flex; align-items: center; justify-content: center; width: 66px; height: 38px; padding: 0 7px; border: 1px solid #c8cfdd; border-radius: 9px; background: #fff; }
+  .visual-level-field input { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; text-align: center; }
+  .search-field { width: min(210px, 32vw); }
+  .search-field > span { display: none; }
+  .search-field input { height: 38px; }
+}
+
+@media (max-width: 720px) {
+  .translation-actions { align-items: flex-end; flex-direction: row; }
+  .filter-box { width: auto; }
+  .toolbar-toggle { width: 38px; }
+  .toolbar-field { width: auto; }
+  .toolbar-icon-button { width: 38px; }
+  .search-field { width: min(180px, calc(100vw - 210px)); }
+}
+
+.report-header[hidden] { display: none; }
+
+.toolbar-icon-button {
+  display: inline-grid;
+  width: 38px;
+  height: 38px;
+  flex: 0 0 38px;
+  place-items: center;
+  padding: 0;
+}
+
+.toolbar-icon-button.is-expanded svg { transform: rotate(180deg); }
+
+.toolbar-icon-button svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.search-field {
+  width: min(260px, 34vw);
+  height: 38px;
+  padding: 8px 10px;
+  border: 1px solid #c8cfdd;
+  border-radius: 9px;
+  color: var(--ink);
+  background: #fff;
+  outline: none;
+}
+
+.search-field:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
+}
+
+.visual-level-field {
+  display: inline-flex;
+  width: auto;
+  min-width: 98px;
+  height: 38px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  border: 1px solid #c8cfdd;
+  border-radius: 9px;
+  background: #fff;
+}
+
+.visual-level-field input {
+  width: 32px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: center;
+}
+
+@media (max-width: 1050px), (max-aspect-ratio: 1 / 1) {
+  .filter-box { margin-right: auto; }
+  .toolbar-toggle svg, .visual-level-field svg { display: block; }
+  .toolbar-toggle > span, .visual-level-field > span { display: none; }
+  .toolbar-toggle { width: 38px; height: 38px; padding: 0; justify-content: center; }
+  .toolbar-toggle.toolbar-toggle--with-count { width: 62px; min-width: 62px; gap: 6px; }
+  .toolbar-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+  .visual-level-field { width: 68px; min-width: 68px; justify-content: center; padding: 0 7px; }
+  .visual-level-field input { display: block; }
+  .search-field { width: min(230px, 32vw); }
+}
+
+@media (max-width: 720px) {
+  .translation-actions { align-items: center; gap: 7px; }
+  .toolbar-icon-button, .toolbar-toggle { width: 38px; height: 38px; flex: 0 0 38px; }
+  .visual-level-field { width: 68px; min-width: 68px; height: 38px; flex: 0 0 68px; }
+  .toolbar-toggle.toolbar-toggle--with-count { width: 62px; min-width: 62px; flex-basis: 62px; }
+  .search-field { width: min(180px, calc(100vw - 230px)); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wads.dev/i18n-editor",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-rc.0",
   "description": "Local web editor for typed i18n projects.",
   "license": "MIT",
   "author": {