@jjlmoya/utils-developer 1.31.0 → 1.33.0

package/src/tool/dualOsIconPreview/entry.ts

@@ -0,0 +1,31 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+import type { DualOsIconPreviewUI } from './ui';
+
+export type DualOsIconPreviewLocaleContent = ToolLocaleContent<DualOsIconPreviewUI>;
+
+import { content as en } from './i18n/en';
+
+export const dualOsIconPreview: DeveloperToolEntry<DualOsIconPreviewUI> = {
+  id: 'dual-os-icon-preview',
+  icons: {
+    bg: 'mdi:cellphone-link',
+    fg: 'mdi:image-filter-center-focus',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => en,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};

package/src/tool/dualOsIconPreview/evaluator.ts

@@ -0,0 +1,20 @@
+import type { IconPreviewState } from './logic';
+import type { DualOsIconPreviewUI } from './ui';
+
+export interface PreviewBadge {
+  label: string;
+  detail: string;
+  tone: 'ready' | 'review' | 'quiet';
+}
+
+export function evaluatePreview(state: IconPreviewState, ui: DualOsIconPreviewUI): PreviewBadge[] {
+  if (!state.hasLogo) {
+    return [{ label: ui.statusNeedsReview, detail: ui.emptyLogo, tone: 'review' }];
+  }
+  const badges: PreviewBadge[] = [
+    { label: ui.statusReady, detail: ui.safeZoneLabel, tone: 'ready' },
+    { label: ui.statusReady, detail: ui.adaptiveLayerLabel, tone: 'ready' },
+  ];
+  if (state.androidThemed) badges.push({ label: ui.monochromeLabel, detail: ui.androidThemeHint, tone: 'quiet' });
+  return badges;
+}

package/src/tool/dualOsIconPreview/i18n/de.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'App Icon Audit für iOS und Android';
+const description = 'Lade ein Logo hoch und prüfe sein Aussehen auf iPhone und Pixel. Untersuche iOS Modi, adaptive Android Masken, Sicherheitsabstände und thematische Symbole direkt im Browser.';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'Logo hochladen', uploadAction: 'Bild auswählen', uploadHint: 'Dasselbe Zeichen füllt beide Telefone', dropHint: 'PNG, JPG, WEBP oder SVG', labelAppName: 'App Name', appNamePlaceholder: 'Wird unter dem Symbol angezeigt', labelBrandColor: 'Systemakzentfarbe', labelIosAppearance: 'iOS Darstellung', iosAppearanceHint: 'Prüfe das Zeichen in jedem Home Screen Modus', iosDefault: 'Standard', iosDark: 'Dunkel', iosClear: 'Klar', iosTinted: 'Getönt', labelAndroidShape: 'Adaptive Android Maske', androidShapeHint: 'Launcher können die Außenform ändern', androidCircle: 'Kreis', androidSquircle: 'Squircle', androidRounded: 'Abgerundet', androidTeardrop: 'Tropfen', labelAndroidTheme: 'Thematisches Symbol prüfen', androidThemeHint: 'Färbt jedes Symbol mit einem Systemton und erhält seine Silhouette', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'Home Screen', androidHomeLabel: 'Launcher', safeZoneLabel: 'iOS Maske', adaptiveLayerLabel: 'Adaptives Symbol', monochromeLabel: 'Themenebene', nameFallback: 'Deine App', emptyLogo: 'Dein Logo', fileError: 'Wähle eine Bilddatei aus.', statusReady: 'Bereit', statusNeedsReview: 'Logo hinzufügen', stageKicker: 'Zwei Gerätekontexte, ein Audit', stageNote: 'Prüfe jede Darstellung im Kontext', auditTitle: 'Logo Audit', auditHint: 'Lokal aus dem geladenen Bild gemessen', auditWaiting: 'Logo hochladen', auditNotChecked: 'Nicht geprüft', auditFile: 'Datei', auditAspect: 'Seitenverhältnis', auditResolution: 'Auflösung', auditIosMask: 'iOS Maskenabstand', auditAndroidZone: 'Android Sicherheitszone', auditMargin: 'Kleinster Rand', auditTransparency: 'Alpha Rand', auditTransparent: 'Transparent', auditFullBleed: 'Vollflächig', statusPass: 'BESTANDEN', statusReview: 'PRÜFEN',
+};
+const faq = [
+  { question: 'Was prüft dieses App Icon Audit?', answer: 'Es prüft Bildmaße, Seitenverhältnis, Auflösung, transparenten Rand, iOS Maskenabstand und die adaptive Android Sicherheitszone. Außerdem siehst du den App Namen in Launcher Größe.' },
+  { question: 'Kann ich iPhone und Android gleichzeitig sehen?', answer: 'Ja. Logo und App Name erscheinen gleichzeitig in einem iPhone Home Screen und einem Pixel Launcher. So bleibt der Kontext beider Geräte sichtbar.' },
+  { question: 'Was macht der Modus für thematische Android Symbole?', answer: 'Er legt einen Systemton und eine monochrome Darstellung auf jedes Android Symbol in der Szene, einschließlich Zielsymbol, Nachbarsymbolen und Dock. So wird sichtbar, ob die Form auch ohne Originalfarben funktioniert.' },
+  { question: 'Verlässt das Logo meinen Browser?', answer: 'Nein. Das Bild wird lokal im Browser gelesen und gemessen. Dieses Tool lädt es nicht auf einen Server hoch.' },
+  { question: 'Ist das Ergebnis für die Veröffentlichung im App Store bereit?', answer: 'Nein. Es ist ein lokales Design und Asset Audit. Für finale Exporte, Launcher Verhalten und Store Freigaben brauchst du die Plattformwerkzeuge von Apple und Android sowie ein echtes Gerät oder einen Emulator.' },
+];
+const howTo = [
+  { name: 'Logo hochladen', text: 'Wähle ein PNG, JPG, WEBP oder SVG. Dasselbe lokale Bild erscheint in beiden Gerätekontexten.' },
+  { name: 'App Namen eingeben', text: 'Gib die Beschriftung des Launchers ein und prüfe, ob sie neben echten Nachbarsymbolen lesbar bleibt.' },
+  { name: 'iOS Darstellungen prüfen', text: 'Wechsle zwischen Standard, Dunkel, Klar und Getönt und achte auf schwachen Kontrast oder verschwindende Details.' },
+  { name: 'Android Masken prüfen', text: 'Probiere Kreis, Squircle, abgerundet und Tropfen. Aktiviere danach thematische Symbole, um die monochrome Version im gesamten Launcher zu prüfen.' },
+  { name: 'Audit auswerten', text: 'Schaffe mehr freien Rand, vereinfache feine Details oder verbessere den Kontrast, bevor du die finalen Plattform Assets vorbereitest.' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'de', slug: 'app-icon-audit-ios-android', title, description, faqTitle: 'Häufig gestellte Fragen', bibliographyTitle: 'Quellen', ui, faq, howTo, seo: [
+  { type: 'title', text: 'App Icon vor der Veröffentlichung prüfen', level: 2 },
+  { type: 'paragraph', html: 'Lade ein Logo hoch und prüfe es gleichzeitig in einem iPhone Home Screen und einem Pixel Launcher. Dieses App Icon Audit misst Bildfläche, Seitenverhältnis, Auflösung, transparenten Rand, iOS Maskenabstand und die adaptive Android Sicherheitszone. Gib auch den echten App Namen ein, denn ein Symbol kann die Bildprüfung bestehen und trotzdem scheitern, wenn seine Launcher Beschriftung nicht lesbar ist.' },
+  { type: 'title', text: 'Was dieses App Icon Audit prüft', level: 3 },
+  { type: 'list', items: ['Bildfläche und Seitenverhältnis: Bestätige, dass die Quelle quadratisch ist, bevor Plattformwerkzeuge ihre eigene Darstellung hinzufügen.', 'Auflösung: Erkenne kleine Quelldateien, bevor sie in größeren Launcher Kontexten weich oder unbrauchbar werden.', 'Randabstand: Sieh, ob wichtige Formen oder Buchstaben zu nah an der iOS Maske oder der Android Sicherheitszone liegen.', 'Launcher Beschriftung: Prüfe den App Namen in derselben Größe wie benachbarte Symbole und erkenne ungünstige Umbrüche.', 'Thematische Android Darstellung: Lege eine monochrome Systemfarbe auf Ziel, Nachbarsymbole und Dock, damit Farbe keine schwache Silhouette verdeckt.'] },
+  { type: 'title', text: 'Beide Gerätekontexte gleichzeitig ansehen', level: 3 },
+  { type: 'paragraph', html: 'Nutze die beiden Telefonansichten als eine Audit Fläche. Wechsle durch iOS Standard, Dunkel, Klar und Getönt und probiere danach Android Kreis, Squircle, abgerundet und Tropfen. Ziel ist, Informationen darüber zu sammeln, wie sich dasselbe Asset auf Launcher Flächen verhält, nicht eine Plattform gegen die andere auszuspielen.' },
+  { type: 'title', text: 'Was dieses Audit nicht garantieren kann', level: 3 },
+  { type: 'paragraph', html: 'Dies ist eine browserbasierte Design und Asset Prüfung und kein Ersatz für Xcode, Android Studio, ein echtes Gerät oder einen Emulator. Launcher, Betriebssystemversionen und Hersteller können Masken, Abstände, Kontrast und Regeln für thematische Symbole unterschiedlich anwenden. Nutze das Audit, um Risiken früh zu finden, und prüfe danach die finalen Plattform Assets in den Umgebungen, die du unterstützt.' },
+  { type: 'tip', title: 'Praktische Audit Routine', html: 'Prüfe das Logo in jeder Darstellung bei der kleinsten sinnvollen Größe. Wenn es nur mit einem Hintergrund, einer Maske oder seinen Originalfarben funktioniert, vereinfache die Grafik oder gib ihr mehr freien Rand, bevor du sie veröffentlichst.' },
+] });

package/src/tool/dualOsIconPreview/i18n/en.ts

@@ -0,0 +1,46 @@
+import { bibliography } from '../bibliography';
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+const slug = 'dual-ios-android-app-icon-preview';
+const title = 'App Icon Audit for iOS and Android';
+const description = 'Upload a logo to audit its launcher appearance on iPhone and Pixel. Inspect iOS modes, Android adaptive masks, safe margins and themed icons locally.';
+const faqTitle = 'Frequently Asked Questions';
+const bibliographyTitle = 'References';
+
+const faq = [
+  { question: 'What does this app icon audit check?', answer: 'It checks the uploaded image dimensions, aspect ratio, resolution, transparent edge margin, iOS mask cushion and Android adaptive safe zone. It also lets you inspect the app name at launcher size.' },
+  { question: 'Can I see iPhone and Android at the same time?', answer: 'Yes. The same logo and app name are shown simultaneously in an iPhone Home Screen context and a Pixel launcher context so you can inspect both without losing the surrounding information.' },
+  { question: 'What does Android themed icon mode do?', answer: 'It applies one system tint and a monochrome treatment to every Android icon in the scene, including the uploaded icon, neighboring apps and the dock. This helps reveal whether the mark still reads without its original colors.' },
+  { question: 'Does the logo leave my browser?', answer: 'No. The image is read and measured locally in your browser. It is not uploaded to a server by this tool.' },
+  { question: 'Is this ready for app store submission?', answer: 'No. It is a local design and asset audit. Use Apple and Android platform tooling plus a real device or emulator for final export, launcher behavior and store approval.' },
+];
+
+const howTo = [
+  { name: 'Upload the logo', text: 'Choose a PNG, JPG, WEBP or SVG logo. The same local image appears in both device contexts.' },
+  { name: 'Enter the app name', text: 'Type the launcher label and check whether it remains readable beside the real neighboring app labels.' },
+  { name: 'Inspect iOS appearances', text: 'Cycle through Default, Dark, Clear and Tinted Home Screen treatments and watch for weak contrast or disappearing detail.' },
+  { name: 'Inspect Android masks', text: 'Try circle, squircle, rounded and teardrop masks. Then enable themed icon mode to review the monochrome version across the entire launcher.' },
+  { name: 'Act on the audit', text: 'Add breathing room, simplify fine detail or improve contrast before preparing the final platform assets.' },
+];
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: 'en' };
+
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'Upload logo', uploadAction: 'Choose an image', uploadHint: 'The same mark fills both phones', dropHint: 'PNG, JPG, WEBP or SVG', labelAppName: 'App name', appNamePlaceholder: 'Shown below the icon', labelBrandColor: 'Accent used by the system', labelIosAppearance: 'iOS appearance', iosAppearanceHint: 'Check the mark in every Home Screen mode', iosDefault: 'Default', iosDark: 'Dark', iosClear: 'Clear', iosTinted: 'Tinted', labelAndroidShape: 'Android adaptive mask', androidShapeHint: 'Launchers can change the outer shape', androidCircle: 'Circle', androidSquircle: 'Squircle', androidRounded: 'Rounded', androidTeardrop: 'Teardrop', labelAndroidTheme: 'Preview themed icon', androidThemeHint: 'Recolors every icon with one system tint while preserving its silhouette', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'Home Screen', androidHomeLabel: 'Launcher', safeZoneLabel: 'iOS mask', adaptiveLayerLabel: 'Adaptive icon', monochromeLabel: 'Theme layer', nameFallback: 'Your app', emptyLogo: 'Your logo', fileError: 'Choose an image file to continue.', statusReady: 'Ready', statusNeedsReview: 'Add logo', stageKicker: 'Two device contexts, one audit', stageNote: 'Inspect every treatment in context', auditTitle: 'Logo audit', auditHint: 'Measured locally from the loaded image', auditWaiting: 'Upload a logo', auditNotChecked: 'Not checked', auditFile: 'Canvas', auditAspect: 'Aspect ratio', auditResolution: 'Resolution', auditIosMask: 'iOS mask cushion', auditAndroidZone: 'Android safe zone', auditMargin: 'Minimum edge margin', auditTransparency: 'Alpha edge', auditTransparent: 'Transparent', auditFullBleed: 'Full bleed', statusPass: 'PASS', statusReview: 'REVIEW',
+};
+
+export const content: ToolLocaleContent<DualOsIconPreviewUI> = { slug, title, description, ui, faqTitle, faq, bibliographyTitle, bibliography, howTo, schemas: [appSchema, faqSchema, howToSchema], seo: [
+  { type: 'title', text: 'Audit your app icon before release', level: 2 },
+  { type: 'paragraph', html: 'Upload one logo and inspect it simultaneously in an iPhone Home Screen context and a Pixel launcher context. This app icon audit measures the image canvas, aspect ratio, resolution, transparent edge margin, iOS mask cushion and Android adaptive safe zone. Enter the real app name too, because a mark can pass the icon check and still fail when its launcher label becomes unreadable.' },
+  { type: 'title', text: 'What this app icon audit checks', level: 3 },
+  { type: 'list', items: ['Canvas and aspect ratio: confirm that the source is square before platform tooling adds its own treatment.', 'Resolution: catch small source files before they become soft or unusable in larger launcher contexts.', 'Edge margin: see whether important shapes or lettering sit too close to the iOS mask or Android adaptive safe zone.', 'Launcher label: check the app name at the same scale as neighboring icons and spot awkward wrapping.', 'Themed Android treatment: apply one monochrome system tint to the target, neighboring apps and dock so color is not hiding a weak silhouette.'] },
+  { type: 'title', text: 'See both device contexts at once', level: 3 },
+  { type: 'paragraph', html: 'Use the two phone views as one audit surface. Cycle through iOS Default, Dark, Clear and Tinted appearances, then try Android circle, squircle, rounded and teardrop masks. The goal is to gather context about how the same asset behaves across launcher surfaces, not to declare one platform better than the other.' },
+  { type: 'title', text: 'What the audit cannot guarantee', level: 3 },
+  { type: 'paragraph', html: 'This is a browser based design and asset review, not a replacement for Xcode, Android Studio, a real device or an emulator. Launchers, OS versions and manufacturers can apply different masks, spacing, contrast and themed icon rules. Use the audit to find risks early, then validate the final platform assets in the environments you support.' },
+  { type: 'tip', title: 'A practical audit routine', html: 'Review the logo at its smallest practical size in every available treatment. If the mark only works with one background, one mask or its original colors, simplify the artwork or add breathing room before shipping.' },
+] };

package/src/tool/dualOsIconPreview/i18n/es.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'Auditoría de iconos de app para iOS y Android';
+const description = 'Sube un logo y audita cómo se ve en un iPhone y un Pixel. Revisa modos de iOS, máscaras adaptativas de Android, márgenes seguros e iconos temáticos directamente en el navegador.';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'Subir logo', uploadAction: 'Elegir una imagen', uploadHint: 'La misma marca llena los dos móviles', dropHint: 'PNG, JPG, WEBP o SVG', labelAppName: 'Nombre de la app', appNamePlaceholder: 'Aparece debajo del icono', labelBrandColor: 'Color de acento del sistema', labelIosAppearance: 'Apariencia de iOS', iosAppearanceHint: 'Comprueba la marca en cada modo de la pantalla de inicio', iosDefault: 'Predeterminado', iosDark: 'Oscuro', iosClear: 'Claro', iosTinted: 'Tintado', labelAndroidShape: 'Máscara adaptativa de Android', androidShapeHint: 'El launcher puede cambiar la forma exterior', androidCircle: 'Círculo', androidSquircle: 'Squircle', androidRounded: 'Redondeado', androidTeardrop: 'Gota', labelAndroidTheme: 'Previsualizar icono temático', androidThemeHint: 'Recolorea todos los iconos con un tinte del sistema y conserva su silueta', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'Pantalla de inicio', androidHomeLabel: 'Launcher', safeZoneLabel: 'Máscara de iOS', adaptiveLayerLabel: 'Icono adaptativo', monochromeLabel: 'Capa temática', nameFallback: 'Tu app', emptyLogo: 'Tu logo', fileError: 'Elige un archivo de imagen para continuar.', statusReady: 'Listo', statusNeedsReview: 'Añade un logo', stageKicker: 'Dos contextos de dispositivo, una auditoría', stageNote: 'Inspecciona cada tratamiento en contexto', auditTitle: 'Auditoría del logo', auditHint: 'Medido localmente a partir de la imagen cargada', auditWaiting: 'Sube un logo', auditNotChecked: 'Sin comprobar', auditFile: 'Lienzo', auditAspect: 'Relación de aspecto', auditResolution: 'Resolución', auditIosMask: 'Margen de máscara iOS', auditAndroidZone: 'Zona segura Android', auditMargin: 'Margen mínimo', auditTransparency: 'Borde alfa', auditTransparent: 'Transparente', auditFullBleed: 'A sangre', statusPass: 'PASA', statusReview: 'REVISAR',
+};
+const faq = [
+  { question: '¿Qué comprueba esta auditoría de iconos de app?', answer: 'Comprueba las dimensiones, la relación de aspecto, la resolución, el margen transparente, el margen de la máscara de iOS y la zona segura adaptativa de Android. También permite inspeccionar el nombre de la app al tamaño del launcher.' },
+  { question: '¿Puedo ver iPhone y Android a la vez?', answer: 'Sí. El mismo logo y nombre aparecen simultáneamente en un contexto de pantalla de inicio de iPhone y en un launcher de Pixel para conservar toda la información alrededor.' },
+  { question: '¿Qué hace el modo de icono temático de Android?', answer: 'Aplica un tinte del sistema y un tratamiento monocromo a todos los iconos Android de la escena, incluido el icono subido, las apps vecinas y el dock. Así puedes comprobar si la silueta sigue leyendo sin sus colores originales.' },
+  { question: '¿El logo sale de mi navegador?', answer: 'No. La imagen se lee y se mide localmente en tu navegador. Esta herramienta no la sube a ningún servidor.' },
+  { question: '¿Está listo para enviar la app a una tienda?', answer: 'No. Es una auditoría local de diseño y assets. Para la exportación final, el comportamiento del launcher y la aprobación de la tienda necesitas las herramientas de Apple y Android, además de un dispositivo real o un emulador.' },
+];
+const howTo = [
+  { name: 'Sube el logo', text: 'Elige un logo PNG, JPG, WEBP o SVG. La misma imagen local aparece en los dos contextos de dispositivo.' },
+  { name: 'Escribe el nombre de la app', text: 'Introduce la etiqueta del launcher y comprueba si sigue siendo legible junto a los nombres reales de las apps vecinas.' },
+  { name: 'Inspecciona las apariencias de iOS', text: 'Alterna entre Predeterminado, Oscuro, Claro y Tintado y busca contraste débil o detalles que desaparecen.' },
+  { name: 'Inspecciona las máscaras de Android', text: 'Prueba círculo, squircle, redondeado y gota. Después activa el modo temático para revisar la versión monocroma en todo el launcher.' },
+  { name: 'Actúa sobre la auditoría', text: 'Añade aire alrededor, simplifica los detalles pequeños o mejora el contraste antes de preparar los assets finales de cada plataforma.' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'es', slug: 'auditoria-iconos-app-ios-android', title, description, faqTitle: 'Preguntas frecuentes', bibliographyTitle: 'Referencias', ui, faq, howTo, seo: [
+  { type: 'title', text: 'Audita el icono de tu app antes de publicarlo', level: 2 },
+  { type: 'paragraph', html: 'Sube un logo y revísalo simultáneamente en un contexto de pantalla de inicio de iPhone y en un launcher de Pixel. Esta auditoría de iconos mide el lienzo, la relación de aspecto, la resolución, el margen transparente, el margen de la máscara de iOS y la zona segura adaptativa de Android. Escribe también el nombre real de la app, porque una marca puede pasar la comprobación del icono y fallar cuando su etiqueta del launcher deja de ser legible.' },
+  { type: 'title', text: 'Qué comprueba esta auditoría de iconos', level: 3 },
+  { type: 'list', items: ['Lienzo y relación de aspecto: confirma que el archivo de origen es cuadrado antes de que las herramientas de la plataforma añadan su propio tratamiento.', 'Resolución: detecta archivos pequeños antes de que se vean borrosos o resulten inutilizables en contextos de launcher más grandes.', 'Margen exterior: comprueba si las formas o letras importantes quedan demasiado cerca de la máscara de iOS o de la zona segura de Android.', 'Etiqueta del launcher: revisa el nombre de la app a la misma escala que los iconos vecinos y detecta saltos de línea incómodos.', 'Tratamiento temático de Android: aplica un tinte monocromo del sistema al icono, las apps vecinas y el dock para que el color no esconda una silueta débil.'] },
+  { type: 'title', text: 'Mira los dos contextos de dispositivo a la vez', level: 3 },
+  { type: 'paragraph', html: 'Usa las dos vistas de móvil como una sola superficie de auditoría. Recorre las apariencias Predeterminado, Oscuro, Claro y Tintado de iOS y prueba después las máscaras círculo, squircle, redondeado y gota de Android. El objetivo es reunir información sobre cómo se comporta el mismo asset en distintas superficies de launcher, no declarar una plataforma mejor que la otra.' },
+  { type: 'title', text: 'Qué no puede garantizar esta auditoría', level: 3 },
+  { type: 'paragraph', html: 'Es una revisión de diseño y assets basada en el navegador, no sustituye a Xcode, Android Studio, un dispositivo real o un emulador. Los launchers, las versiones del sistema y los fabricantes pueden aplicar máscaras, espaciados, contraste y reglas de iconos temáticos diferentes. Usa la auditoría para encontrar riesgos pronto y valida después los assets finales en los entornos que admitas.' },
+  { type: 'tip', title: 'Rutina práctica de auditoría', html: 'Revisa el logo en su tamaño práctico más pequeño y en todos los tratamientos disponibles. Si solo funciona con un fondo, una máscara o sus colores originales, simplifica el diseño o añade margen antes de publicarlo.' },
+] });

package/src/tool/dualOsIconPreview/i18n/fr.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'Audit des icônes d application pour iOS et Android';
+const description = 'Importez un logo et auditez son rendu sur iPhone et Pixel. Vérifiez les modes iOS, les masques adaptatifs Android, les marges sûres et les icônes thématiques dans le navigateur.';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'Importer un logo', uploadAction: 'Choisir une image', uploadHint: 'La même marque remplit les deux téléphones', dropHint: 'PNG, JPG, WEBP ou SVG', labelAppName: 'Nom de l application', appNamePlaceholder: 'Affiché sous l icône', labelBrandColor: 'Couleur d accent du système', labelIosAppearance: 'Apparence iOS', iosAppearanceHint: 'Vérifiez la marque dans chaque mode de l écran d accueil', iosDefault: 'Par défaut', iosDark: 'Sombre', iosClear: 'Clair', iosTinted: 'Teinté', labelAndroidShape: 'Masque adaptatif Android', androidShapeHint: 'Le launcher peut modifier la forme extérieure', androidCircle: 'Cercle', androidSquircle: 'Squircle', androidRounded: 'Arrondi', androidTeardrop: 'Goutte', labelAndroidTheme: 'Prévisualiser l icône thématique', androidThemeHint: 'Recolore chaque icône avec une teinte système en préservant sa silhouette', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'Écran d accueil', androidHomeLabel: 'Launcher', safeZoneLabel: 'Masque iOS', adaptiveLayerLabel: 'Icône adaptative', monochromeLabel: 'Couche thématique', nameFallback: 'Votre app', emptyLogo: 'Votre logo', fileError: 'Choisissez un fichier image pour continuer.', statusReady: 'Prêt', statusNeedsReview: 'Ajouter un logo', stageKicker: 'Deux contextes d appareil, un audit', stageNote: 'Inspectez chaque traitement en contexte', auditTitle: 'Audit du logo', auditHint: 'Mesuré localement depuis l image chargée', auditWaiting: 'Importez un logo', auditNotChecked: 'Non vérifié', auditFile: 'Canevas', auditAspect: 'Proportions', auditResolution: 'Résolution', auditIosMask: 'Marge du masque iOS', auditAndroidZone: 'Zone sûre Android', auditMargin: 'Marge minimale', auditTransparency: 'Bord alpha', auditTransparent: 'Transparent', auditFullBleed: 'Pleine couverture', statusPass: 'RÉUSSI', statusReview: 'À VÉRIFIER',
+};
+const faq = [
+  { question: 'Que vérifie cet audit d icône d application ?', answer: 'Il vérifie les dimensions, les proportions, la résolution, la marge transparente, la marge du masque iOS et la zone sûre adaptative Android. Il permet aussi d inspecter le nom de l app à la taille du launcher.' },
+  { question: 'Puis je voir iPhone et Android en même temps ?', answer: 'Oui. Le même logo et le même nom apparaissent simultanément dans un écran d accueil iPhone et un launcher Pixel, avec le contexte des deux appareils.' },
+  { question: 'Que fait le mode d icône thématique Android ?', answer: 'Il applique une teinte système et un traitement monochrome à toutes les icônes Android de la scène, y compris l icône importée, les apps voisines et le dock. Vous voyez ainsi si la silhouette reste lisible sans ses couleurs originales.' },
+  { question: 'Le logo quitte t il mon navigateur ?', answer: 'Non. L image est lue et mesurée localement dans votre navigateur. Cet outil ne l envoie pas sur un serveur.' },
+  { question: 'Est ce prêt pour envoyer l app sur un store ?', answer: 'Non. Il s agit d un audit local du design et des assets. Pour l export final, le comportement du launcher et la validation du store, utilisez les outils Apple et Android ainsi qu un appareil réel ou un émulateur.' },
+];
+const howTo = [
+  { name: 'Importer le logo', text: 'Choisissez un logo PNG, JPG, WEBP ou SVG. La même image locale apparaît dans les deux contextes.' },
+  { name: 'Saisir le nom de l app', text: 'Entrez le libellé du launcher et vérifiez qu il reste lisible à côté des vrais noms des apps voisines.' },
+  { name: 'Inspecter les apparences iOS', text: 'Passez de Par défaut à Sombre, Clair et Teinté pour repérer un contraste faible ou des détails qui disparaissent.' },
+  { name: 'Inspecter les masques Android', text: 'Essayez le cercle, le squircle, l arrondi et la goutte. Activez ensuite le mode thématique pour examiner la version monochrome de tout le launcher.' },
+  { name: 'Agir sur le résultat', text: 'Ajoutez de l espace, simplifiez les détails fins ou améliorez le contraste avant de préparer les assets finaux.' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'fr', slug: 'audit-icone-app-ios-android', title, description, faqTitle: 'Questions fréquentes', bibliographyTitle: 'Références', ui, faq, howTo, seo: [
+  { type: 'title', text: 'Auditer l icône de votre app avant sa sortie', level: 2 },
+  { type: 'paragraph', html: 'Importez un logo et inspectez-le simultanément dans le contexte d un écran d accueil iPhone et d un launcher Pixel. Cet audit d icône mesure le canevas, les proportions, la résolution, la marge transparente, la marge du masque iOS et la zone sûre adaptative Android. Saisissez aussi le vrai nom de l app, car une marque peut réussir le contrôle de l icône tout en échouant lorsque son libellé de launcher devient illisible.' },
+  { type: 'title', text: 'Ce que vérifie cet audit d icône', level: 3 },
+  { type: 'list', items: ['Canevas et proportions: confirmez que la source est carrée avant que les outils de la plateforme ajoutent leur propre traitement.', 'Résolution: repérez les petits fichiers source avant qu ils deviennent flous ou inutilisables dans un grand launcher.', 'Marge extérieure: voyez si les formes ou lettres importantes sont trop proches du masque iOS ou de la zone sûre Android.', 'Libellé du launcher: vérifiez le nom de l app à la même échelle que les icônes voisines et repérez les retours à la ligne gênants.', 'Traitement thématique Android: appliquez une teinte système monochrome à la cible, aux apps voisines et au dock pour révéler une silhouette faible.'] },
+  { type: 'title', text: 'Voir les deux contextes d appareil à la fois', level: 3 },
+  { type: 'paragraph', html: 'Utilisez les deux vues de téléphone comme une seule surface d audit. Parcourez les apparences iOS Par défaut, Sombre, Clair et Teinté, puis essayez les masques Android cercle, squircle, arrondi et goutte. Le but est de comprendre comment le même asset se comporte sur plusieurs surfaces de launcher, pas d opposer une plateforme à l autre.' },
+  { type: 'title', text: 'Ce que l audit ne peut pas garantir', level: 3 },
+  { type: 'paragraph', html: 'Il s agit d une revue de design et d assets dans le navigateur, et non d un remplacement de Xcode, Android Studio, d un appareil réel ou d un émulateur. Les launchers, versions du système et fabricants peuvent appliquer des masques, espacements, contrastes et règles d icônes thématiques différents. Utilisez l audit pour trouver les risques tôt, puis validez les assets finaux dans les environnements pris en charge.' },
+  { type: 'tip', title: 'Routine d audit pratique', html: 'Examinez le logo à sa plus petite taille utile dans chaque traitement. S il ne fonctionne qu avec un fond, un masque ou ses couleurs originales, simplifiez le dessin ou ajoutez de la marge avant la publication.' },
+] });

package/src/tool/dualOsIconPreview/i18n/id.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'Audit ikon aplikasi untuk iOS dan Android';
+const description = 'Unggah logo untuk mengaudit tampilannya di iPhone dan Pixel. Periksa mode iOS, mask adaptif Android, jarak aman, dan ikon bertema langsung di browser.';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'Unggah logo', uploadAction: 'Pilih gambar', uploadHint: 'Tanda yang sama mengisi kedua ponsel', dropHint: 'PNG, JPG, WEBP atau SVG', labelAppName: 'Nama aplikasi', appNamePlaceholder: 'Tampil di bawah ikon', labelBrandColor: 'Warna aksen sistem', labelIosAppearance: 'Tampilan iOS', iosAppearanceHint: 'Periksa tanda di setiap mode Layar Utama', iosDefault: 'Default', iosDark: 'Gelap', iosClear: 'Jernih', iosTinted: 'Berwarna', labelAndroidShape: 'Mask adaptif Android', androidShapeHint: 'Launcher dapat mengubah bentuk luar', androidCircle: 'Lingkaran', androidSquircle: 'Squircle', androidRounded: 'Membulat', androidTeardrop: 'Tetesan', labelAndroidTheme: 'Pratinjau ikon bertema', androidThemeHint: 'Mewarnai ulang setiap ikon dengan satu warna sistem sambil mempertahankan siluetnya', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'Layar Utama', androidHomeLabel: 'Launcher', safeZoneLabel: 'Mask iOS', adaptiveLayerLabel: 'Ikon adaptif', monochromeLabel: 'Lapisan tema', nameFallback: 'Aplikasi Anda', emptyLogo: 'Logo Anda', fileError: 'Pilih berkas gambar untuk melanjutkan.', statusReady: 'Siap', statusNeedsReview: 'Tambahkan logo', stageKicker: 'Dua konteks perangkat, satu audit', stageNote: 'Periksa setiap perlakuan dalam konteksnya', auditTitle: 'Audit logo', auditHint: 'Diukur secara lokal dari gambar yang dimuat', auditWaiting: 'Unggah logo', auditNotChecked: 'Belum diperiksa', auditFile: 'Kanvas', auditAspect: 'Rasio aspek', auditResolution: 'Resolusi', auditIosMask: 'Jarak mask iOS', auditAndroidZone: 'Zona aman Android', auditMargin: 'Jarak tepi minimum', auditTransparency: 'Tepi alfa', auditTransparent: 'Transparan', auditFullBleed: 'Penuh', statusPass: 'LULUS', statusReview: 'TINJAU',
+};
+const faq = [
+  { question: 'Apa yang diperiksa audit ikon aplikasi ini?', answer: 'Audit ini memeriksa dimensi gambar, rasio aspek, resolusi, jarak tepi transparan, ruang mask iOS, dan zona aman adaptif Android. Anda juga dapat melihat nama aplikasi pada ukuran launcher.' },
+  { question: 'Bisakah saya melihat iPhone dan Android sekaligus?', answer: 'Bisa. Logo dan nama aplikasi yang sama ditampilkan secara bersamaan dalam konteks Layar Utama iPhone dan launcher Pixel agar konteks kedua perangkat tetap terlihat.' },
+  { question: 'Apa fungsi mode ikon bertema Android?', answer: 'Mode ini menerapkan satu warna sistem dan perlakuan monokrom pada semua ikon Android di adegan, termasuk ikon yang diunggah, aplikasi di sebelahnya, dan dock. Dengan begitu Anda dapat melihat apakah siluetnya tetap terbaca tanpa warna asli.' },
+  { question: 'Apakah logo meninggalkan browser saya?', answer: 'Tidak. Gambar dibaca dan diukur secara lokal di browser. Alat ini tidak mengunggahnya ke server.' },
+  { question: 'Apakah hasilnya siap untuk dikirim ke app store?', answer: 'Belum. Ini adalah audit desain dan aset lokal. Gunakan alat platform Apple dan Android serta perangkat nyata atau emulator untuk ekspor akhir, perilaku launcher, dan persetujuan store.' },
+];
+const howTo = [
+  { name: 'Unggah logo', text: 'Pilih logo PNG, JPG, WEBP, atau SVG. Gambar lokal yang sama muncul dalam kedua konteks perangkat.' },
+  { name: 'Masukkan nama aplikasi', text: 'Ketik label launcher dan periksa apakah tetap terbaca di samping label aplikasi lain yang nyata.' },
+  { name: 'Periksa tampilan iOS', text: 'Ganti antara Default, Gelap, Jernih, dan Berwarna untuk menemukan kontras lemah atau detail yang menghilang.' },
+  { name: 'Periksa mask Android', text: 'Coba bentuk lingkaran, squircle, membulat, dan tetesan. Lalu aktifkan ikon bertema untuk meninjau versi monokrom di seluruh launcher.' },
+  { name: 'Tindak lanjuti audit', text: 'Tambahkan ruang, sederhanakan detail kecil, atau tingkatkan kontras sebelum menyiapkan aset platform final.' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'id', slug: 'audit-ikon-aplikasi-ios-android', title, description, faqTitle: 'Pertanyaan umum', bibliographyTitle: 'Referensi', ui, faq, howTo, seo: [
+  { type: 'title', text: 'Audit ikon aplikasi sebelum dirilis', level: 2 },
+  { type: 'paragraph', html: 'Unggah satu logo dan periksa secara bersamaan dalam konteks Layar Utama iPhone dan launcher Pixel. Audit ikon aplikasi ini mengukur kanvas, rasio aspek, resolusi, jarak tepi transparan, ruang mask iOS, dan zona aman adaptif Android. Masukkan juga nama aplikasi yang sebenarnya, karena tanda dapat lolos pemeriksaan ikon tetapi tetap gagal ketika label launcher tidak lagi terbaca.' },
+  { type: 'title', text: 'Yang diperiksa audit ikon aplikasi ini', level: 3 },
+  { type: 'list', items: ['Kanvas dan rasio aspek: pastikan sumber berbentuk persegi sebelum alat platform menambahkan perlakuannya sendiri.', 'Resolusi: temukan berkas sumber kecil sebelum tampak buram atau tidak berguna pada launcher yang lebih besar.', 'Jarak tepi: lihat apakah bentuk atau huruf penting terlalu dekat dengan mask iOS atau zona aman Android.', 'Label launcher: periksa nama aplikasi pada skala yang sama dengan ikon di sebelahnya dan temukan pemenggalan yang mengganggu.', 'Perlakuan Android bertema: terapkan satu warna sistem monokrom pada target, ikon sekitar, dan dock agar warna tidak menyembunyikan siluet yang lemah.'] },
+  { type: 'title', text: 'Lihat kedua konteks perangkat sekaligus', level: 3 },
+  { type: 'paragraph', html: 'Gunakan dua tampilan ponsel sebagai satu permukaan audit. Ganti tampilan iOS Default, Gelap, Jernih, dan Berwarna, lalu coba mask Android lingkaran, squircle, membulat, dan tetesan. Tujuannya adalah memahami perilaku aset yang sama pada permukaan launcher, bukan membandingkan platform mana yang lebih baik.' },
+  { type: 'title', text: 'Yang tidak dapat dijamin audit ini', level: 3 },
+  { type: 'paragraph', html: 'Ini adalah peninjauan desain dan aset berbasis browser, bukan pengganti Xcode, Android Studio, perangkat nyata, atau emulator. Launcher, versi sistem operasi, dan produsen dapat menerapkan mask, jarak, kontras, dan aturan ikon bertema yang berbeda. Gunakan audit ini untuk menemukan risiko lebih awal, lalu validasi aset platform final pada lingkungan yang Anda dukung.' },
+  { type: 'tip', title: 'Rutinitas audit praktis', html: 'Tinjau logo pada ukuran praktis terkecil dalam setiap perlakuan. Jika tanda hanya berfungsi dengan satu latar, satu mask, atau warna aslinya, sederhanakan gambar atau tambahkan ruang sebelum dirilis.' },
+] });

package/src/tool/dualOsIconPreview/i18n/it.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'Audit delle icone app per iOS e Android';
+const description = 'Carica un logo e controlla come appare su iPhone e Pixel. Esamina modalità iOS, maschere adattive Android, margini sicuri e icone a tema direttamente nel browser.';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'Carica logo', uploadAction: 'Scegli un immagine', uploadHint: 'Lo stesso marchio riempie entrambi i telefoni', dropHint: 'PNG, JPG, WEBP o SVG', labelAppName: 'Nome dell app', appNamePlaceholder: 'Mostrato sotto l icona', labelBrandColor: 'Colore di accento del sistema', labelIosAppearance: 'Aspetto iOS', iosAppearanceHint: 'Controlla il marchio in ogni modalità della schermata Home', iosDefault: 'Predefinito', iosDark: 'Scuro', iosClear: 'Chiaro', iosTinted: 'Colorato', labelAndroidShape: 'Maschera adattiva Android', androidShapeHint: 'Il launcher può cambiare la forma esterna', androidCircle: 'Cerchio', androidSquircle: 'Squircle', androidRounded: 'Arrotondato', androidTeardrop: 'Goccia', labelAndroidTheme: 'Anteprima icona a tema', androidThemeHint: 'Ricolora ogni icona con una tinta di sistema preservandone la silhouette', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'Schermata Home', androidHomeLabel: 'Launcher', safeZoneLabel: 'Maschera iOS', adaptiveLayerLabel: 'Icona adattiva', monochromeLabel: 'Livello tema', nameFallback: 'La tua app', emptyLogo: 'Il tuo logo', fileError: 'Scegli un file immagine per continuare.', statusReady: 'Pronto', statusNeedsReview: 'Aggiungi un logo', stageKicker: 'Due contesti dispositivo, un audit', stageNote: 'Esamina ogni trattamento nel suo contesto', auditTitle: 'Audit del logo', auditHint: 'Misurato localmente dall immagine caricata', auditWaiting: 'Carica un logo', auditNotChecked: 'Non verificato', auditFile: 'Canvas', auditAspect: 'Rapporto d aspetto', auditResolution: 'Risoluzione', auditIosMask: 'Margine maschera iOS', auditAndroidZone: 'Zona sicura Android', auditMargin: 'Margine minimo', auditTransparency: 'Bordo alfa', auditTransparent: 'Trasparente', auditFullBleed: 'A piena copertura', statusPass: 'SUPERATO', statusReview: 'DA RIVEDERE',
+};
+const faq = [
+  { question: 'Che cosa controlla questo audit dell icona app?', answer: 'Controlla dimensioni, rapporto d aspetto, risoluzione, margine trasparente, margine della maschera iOS e zona sicura adattiva Android. Puoi anche esaminare il nome dell app alla dimensione del launcher.' },
+  { question: 'Posso vedere iPhone e Android nello stesso momento?', answer: 'Sì. Lo stesso logo e lo stesso nome vengono mostrati simultaneamente in una schermata Home iPhone e in un launcher Pixel, mantenendo visibile il contesto di entrambi.' },
+  { question: 'Che cosa fa la modalità icona a tema Android?', answer: 'Applica una tinta di sistema e un trattamento monocromatico a ogni icona Android della scena, inclusi l icona caricata, le app vicine e il dock. Puoi così capire se la silhouette rimane leggibile senza i colori originali.' },
+  { question: 'Il logo lascia il mio browser?', answer: 'No. L immagine viene letta e misurata localmente nel browser. Questo strumento non la carica su un server.' },
+  { question: 'È pronto per inviare l app allo store?', answer: 'No. È un audit locale di design e asset. Per esportazione finale, comportamento del launcher e approvazione dello store usa gli strumenti Apple e Android, oltre a un dispositivo reale o un emulatore.' },
+];
+const howTo = [
+  { name: 'Carica il logo', text: 'Scegli un logo PNG, JPG, WEBP o SVG. La stessa immagine locale appare nei due contesti dispositivo.' },
+  { name: 'Inserisci il nome dell app', text: 'Scrivi l etichetta del launcher e controlla che rimanga leggibile accanto ai nomi reali delle app vicine.' },
+  { name: 'Esamina gli aspetti iOS', text: 'Passa da Predefinito a Scuro, Chiaro e Colorato per trovare contrasto debole o dettagli che scompaiono.' },
+  { name: 'Esamina le maschere Android', text: 'Prova cerchio, squircle, arrotondato e goccia. Poi attiva l icona a tema per controllare la versione monocromatica nell intero launcher.' },
+  { name: 'Agisci sul risultato', text: 'Aggiungi spazio libero, semplifica i dettagli fini o migliora il contrasto prima di preparare gli asset finali.' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'it', slug: 'verifica-icone-app-ios-android', title, description, faqTitle: 'Domande frequenti', bibliographyTitle: 'Riferimenti', ui, faq, howTo, seo: [
+  { type: 'title', text: 'Controlla l icona della tua app prima del rilascio', level: 2 },
+  { type: 'paragraph', html: 'Carica un logo e controllalo simultaneamente nel contesto di una schermata Home iPhone e di un launcher Pixel. Questo audit dell icona app misura canvas, rapporto d aspetto, risoluzione, margine trasparente, margine della maschera iOS e zona sicura adattiva Android. Inserisci anche il vero nome dell app, perché un marchio può superare il controllo dell icona e fallire quando l etichetta del launcher diventa illeggibile.' },
+  { type: 'title', text: 'Che cosa controlla questo audit dell icona', level: 3 },
+  { type: 'list', items: ['Canvas e rapporto d aspetto: conferma che la sorgente sia quadrata prima che gli strumenti della piattaforma aggiungano il proprio trattamento.', 'Risoluzione: trova i file sorgente piccoli prima che diventino sfocati o inutilizzabili nei launcher più grandi.', 'Margine esterno: verifica se forme o lettere importanti sono troppo vicine alla maschera iOS o alla zona sicura Android.', 'Etichetta del launcher: controlla il nome dell app alla stessa scala delle icone vicine e individua ritorni a capo scomodi.', 'Trattamento Android a tema: applica una tinta di sistema monocromatica al target, alle icone vicine e al dock per rivelare una silhouette debole.'] },
+  { type: 'title', text: 'Visualizza entrambi i contesti dispositivo insieme', level: 3 },
+  { type: 'paragraph', html: 'Usa le due viste del telefono come un unica superficie di audit. Passa dagli aspetti iOS Predefinito, Scuro, Chiaro e Colorato, poi prova le maschere Android cerchio, squircle, arrotondato e goccia. L obiettivo è capire come si comporta lo stesso asset sulle superfici del launcher, non stabilire quale piattaforma sia migliore.' },
+  { type: 'title', text: 'Che cosa non può garantire l audit', level: 3 },
+  { type: 'paragraph', html: 'Questa è una revisione di design e asset nel browser, non sostituisce Xcode, Android Studio, un dispositivo reale o un emulatore. Launcher, versioni del sistema e produttori possono applicare maschere, spaziature, contrasto e regole per icone a tema diverse. Usa l audit per trovare presto i rischi, poi valida gli asset finali negli ambienti supportati.' },
+  { type: 'tip', title: 'Routine pratica di audit', html: 'Controlla il logo alla sua dimensione pratica minima in ogni trattamento. Se funziona solo con uno sfondo, una maschera o i colori originali, semplifica la grafica o aggiungi margine prima della pubblicazione.' },
+] });

package/src/tool/dualOsIconPreview/i18n/ja.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'iOS と Android のアプリアイコン監査';
+const description = 'ロゴをアップロードして iPhone と Pixel での表示を監査します。iOS の表示モード、Android のアダプティブマスク、安全な余白、テーマアイコンをブラウザで確認できます。';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: 'ロゴをアップロード', uploadAction: '画像を選択', uploadHint: '同じマークを両方のスマートフォンに表示', dropHint: 'PNG、JPG、WEBP、SVG', labelAppName: 'アプリ名', appNamePlaceholder: 'アイコンの下に表示', labelBrandColor: 'システムのアクセント色', labelIosAppearance: 'iOS の表示', iosAppearanceHint: 'ホーム画面のすべてのモードで確認', iosDefault: '標準', iosDark: 'ダーク', iosClear: 'クリア', iosTinted: '色合い', labelAndroidShape: 'Android アダプティブマスク', androidShapeHint: 'ランチャーによって外形が変わります', androidCircle: '円形', androidSquircle: 'スクワークル', androidRounded: '角丸', androidTeardrop: 'ティアドロップ', labelAndroidTheme: 'テーマアイコンをプレビュー', androidThemeHint: 'システムの色合いで全アイコンを再着色し、シルエットを保ちます', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: 'ホーム画面', androidHomeLabel: 'ランチャー', safeZoneLabel: 'iOS マスク', adaptiveLayerLabel: 'アダプティブアイコン', monochromeLabel: 'テーマレイヤー', nameFallback: 'あなたのアプリ', emptyLogo: 'あなたのロゴ', fileError: '続行するには画像ファイルを選択してください。', statusReady: '準備完了', statusNeedsReview: 'ロゴを追加', stageKicker: '2つの端末コンテキストを1つの監査で確認', stageNote: 'すべての表示を実際の文脈で確認', auditTitle: 'ロゴ監査', auditHint: '読み込んだ画像をローカルで測定', auditWaiting: 'ロゴをアップロード', auditNotChecked: '未確認', auditFile: 'キャンバス', auditAspect: 'アスペクト比', auditResolution: '解像度', auditIosMask: 'iOS マスク余白', auditAndroidZone: 'Android 安全領域', auditMargin: '最小端余白', auditTransparency: 'アルファ端', auditTransparent: '透明', auditFullBleed: '全面', statusPass: '合格', statusReview: '要確認',
+};
+const faq = [
+  { question: 'このアプリアイコン監査では何を確認できますか？', answer: '画像の寸法、アスペクト比、解像度、透明な端の余白、iOS マスクの余白、Android アダプティブアイコンの安全領域を確認できます。ランチャーで表示されるアプリ名も確認できます。' },
+  { question: 'iPhone と Android を同時に表示できますか？', answer: 'できます。同じロゴとアプリ名を iPhone のホーム画面と Pixel のランチャーに同時に表示し、両方の端末コンテキストを保ったまま確認できます。' },
+  { question: 'Android のテーマアイコンモードは何をしますか？', answer: '読み込んだアイコン、周囲のアプリ、ドックを含む Android のすべてのアイコンに、1つのシステム色とモノクロ処理を適用します。元の色がなくても形が読めるか確認できます。' },
+  { question: 'ロゴがブラウザの外へ送信されますか？', answer: '送信されません。画像はブラウザ内でローカルに読み込まれ、測定されます。サーバーへアップロードしません。' },
+  { question: 'アプリストアへの提出にそのまま使えますか？', answer: 'そのままでは使えません。これはデザインとアセットのローカル監査です。最終書き出し、ランチャーの動作、ストア審査には Apple と Android のツール、実機またはエミュレーターを使用してください。' },
+];
+const howTo = [
+  { name: 'ロゴをアップロード', text: 'PNG、JPG、WEBP、SVG のロゴを選択します。同じ画像が2つの端末コンテキストに表示されます。' },
+  { name: 'アプリ名を入力', text: 'ランチャーのラベルを入力し、周囲の実際のアプリ名の横でも読みやすいか確認します。' },
+  { name: 'iOS の表示を確認', text: '標準、ダーク、クリア、色合いを切り替え、コントラスト不足や消える細部を探します。' },
+  { name: 'Android のマスクを確認', text: '円形、スクワークル、角丸、ティアドロップを試します。テーマアイコンを有効にしてランチャー全体のモノクロ表示も確認します。' },
+  { name: '監査結果に対応', text: '余白を増やし、細部を簡略化し、コントラストを改善してから最終アセットを準備します。' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'ja', slug: 'dual-ios-android-app-icon-preview', title, description, faqTitle: 'よくある質問', bibliographyTitle: '参考資料', ui, faq, howTo, seo: [
+  { type: 'title', text: '公開前にアプリアイコンを監査する', level: 2 },
+  { type: 'paragraph', html: '1つのロゴをアップロードし、iPhone のホーム画面と Pixel のランチャーで同時に確認します。このアプリアイコン監査では、画像のキャンバス、アスペクト比、解像度、透明な端の余白、iOS マスクの余白、Android アダプティブアイコンの安全領域を測定します。実際のアプリ名も入力してください。アイコン自体が問題なくても、ランチャーのラベルが読みにくくなることがあります。' },
+  { type: 'title', text: 'この監査で確認できること', level: 3 },
+  { type: 'list', items: ['キャンバスと比率: プラットフォームのツールが処理を追加する前に、元画像が正方形か確認します。', '解像度: 大きなランチャー表示でぼやける小さな元ファイルを見つけます。', '端の余白: 重要な形や文字が iOS マスクや Android 安全領域に近すぎないか確認します。', 'ランチャーのラベル: 周囲のアイコンと同じ大きさでアプリ名を確認し、不自然な改行を見つけます。', 'Android テーマ処理: 対象、周囲のアイコン、ドックにモノクロのシステム色を適用し、色に隠れた弱い形を確認します。'] },
+  { type: 'title', text: '2つの端末コンテキストを同時に見る', level: 3 },
+  { type: 'paragraph', html: '2つのスマートフォン表示を1つの監査画面として使います。iOS の標準、ダーク、クリア、色合いを切り替え、Android の円形、スクワークル、角丸、ティアドロップも試してください。同じアセットが複数のランチャー画面でどう見えるかを知ることが目的であり、どちらかのプラットフォームを競わせることが目的ではありません。' },
+  { type: 'title', text: 'この監査で保証できないこと', level: 3 },
+  { type: 'paragraph', html: 'これはブラウザで行うデザインとアセットの確認であり、Xcode、Android Studio、実機、エミュレーターの代わりではありません。ランチャー、OS のバージョン、メーカーによってマスク、余白、コントラスト、テーマアイコンの規則が異なる場合があります。早い段階でリスクを見つけた後、対応する環境で最終アセットを検証してください。' },
+  { type: 'tip', title: '実用的な監査手順', html: 'すべての表示モードで、実際に使われる最小サイズのロゴを確認します。1つの背景、マスク、元の色でしか機能しない場合は、図形を簡略化するか余白を増やしてから公開します。' },
+] });

package/src/tool/dualOsIconPreview/i18n/ko.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent, SEOSection } from '../../../types';
+import type { DualOsIconPreviewUI } from '../ui';
+
+interface LocalizedCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  ui: DualOsIconPreviewUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SEOSection[];
+}
+
+function createDualOsIconPreviewContent(copy: LocalizedCopy): ToolLocaleContent<DualOsIconPreviewUI> {
+  const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: copy.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+  const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: copy.title, description: copy.description, step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+  const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: copy.title, description: copy.description, applicationCategory: 'DesignApplication', operatingSystem: 'iOS, Android', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, inLanguage: copy.locale };
+  return { slug: copy.slug, title: copy.title, description: copy.description, ui: copy.ui, faqTitle: copy.faqTitle, faq: copy.faq, bibliographyTitle: copy.bibliographyTitle, bibliography, howTo: copy.howTo, schemas: [appSchema, faqSchema, howToSchema], seo: copy.seo };
+}
+
+const title = 'iOS 및 Android 앱 아이콘 감사';
+const description = '로고를 업로드하고 iPhone과 Pixel에서 보이는 모습을 감사하세요. iOS 모드, Android 적응형 마스크, 안전 여백과 테마 아이콘을 브라우저에서 확인할 수 있습니다.';
+const ui: DualOsIconPreviewUI = {
+  labelUpload: '로고 업로드', uploadAction: '이미지 선택', uploadHint: '같은 마크를 두 휴대폰에 표시', dropHint: 'PNG, JPG, WEBP 또는 SVG', labelAppName: '앱 이름', appNamePlaceholder: '아이콘 아래에 표시', labelBrandColor: '시스템 강조 색상', labelIosAppearance: 'iOS 화면', iosAppearanceHint: '모든 홈 화면 모드에서 마크 확인', iosDefault: '기본', iosDark: '다크', iosClear: '클리어', iosTinted: '색조', labelAndroidShape: 'Android 적응형 마스크', androidShapeHint: '런처가 바깥 모양을 바꿀 수 있음', androidCircle: '원형', androidSquircle: '스쿼클', androidRounded: '둥근 모서리', androidTeardrop: '물방울', labelAndroidTheme: '테마 아이콘 미리보기', androidThemeHint: '모든 아이콘을 하나의 시스템 색으로 다시 칠하면서 실루엣을 유지', iosDeviceLabel: 'iPhone', androidDeviceLabel: 'Pixel', iosHomeLabel: '홈 화면', androidHomeLabel: '런처', safeZoneLabel: 'iOS 마스크', adaptiveLayerLabel: '적응형 아이콘', monochromeLabel: '테마 레이어', nameFallback: '내 앱', emptyLogo: '내 로고', fileError: '계속하려면 이미지 파일을 선택하세요.', statusReady: '준비됨', statusNeedsReview: '로고 추가', stageKicker: '두 기기 컨텍스트, 하나의 감사', stageNote: '모든 처리를 실제 컨텍스트에서 확인', auditTitle: '로고 감사', auditHint: '불러온 이미지에서 로컬로 측정', auditWaiting: '로고 업로드', auditNotChecked: '확인하지 않음', auditFile: '캔버스', auditAspect: '화면 비율', auditResolution: '해상도', auditIosMask: 'iOS 마스크 여백', auditAndroidZone: 'Android 안전 영역', auditMargin: '최소 가장자리 여백', auditTransparency: '알파 가장자리', auditTransparent: '투명', auditFullBleed: '전체 채움', statusPass: '통과', statusReview: '검토',
+};
+const faq = [
+  { question: '이 앱 아이콘 감사는 무엇을 확인하나요?', answer: '이미지 크기, 화면 비율, 해상도, 투명 가장자리 여백, iOS 마스크 여유와 Android 적응형 안전 영역을 확인합니다. 런처 크기에서 앱 이름이 읽히는지도 볼 수 있습니다.' },
+  { question: 'iPhone과 Android를 동시에 볼 수 있나요?', answer: '네. 같은 로고와 앱 이름을 iPhone 홈 화면과 Pixel 런처에 동시에 표시하므로 두 기기의 주변 정보까지 유지하며 확인할 수 있습니다.' },
+  { question: 'Android 테마 아이콘 모드는 무엇을 하나요?', answer: '업로드한 아이콘, 주변 앱, 독을 포함한 장면의 모든 Android 아이콘에 하나의 시스템 색조와 단색 처리를 적용합니다. 원래 색이 없어도 형태가 읽히는지 확인할 수 있습니다.' },
+  { question: '로고가 브라우저 밖으로 전송되나요?', answer: '아니요. 이미지는 브라우저 안에서 로컬로 읽고 측정합니다. 이 도구는 서버로 업로드하지 않습니다.' },
+  { question: '앱 스토어 제출에 바로 사용할 수 있나요?', answer: '아니요. 로컬 디자인 및 에셋 감사입니다. 최종 내보내기와 런처 동작, 스토어 승인을 위해 Apple 및 Android 플랫폼 도구와 실제 기기 또는 에뮬레이터를 사용하세요.' },
+];
+const howTo = [
+  { name: '로고 업로드', text: 'PNG, JPG, WEBP 또는 SVG 로고를 선택하세요. 같은 로컬 이미지가 두 기기 컨텍스트에 나타납니다.' },
+  { name: '앱 이름 입력', text: '런처 라벨을 입력하고 실제 주변 앱 이름 옆에서도 읽기 쉬운지 확인하세요.' },
+  { name: 'iOS 화면 확인', text: '기본, 다크, 클리어, 색조를 전환하며 약한 대비나 사라지는 세부 요소를 찾으세요.' },
+  { name: 'Android 마스크 확인', text: '원형, 스쿼클, 둥근 모서리, 물방울을 시도하세요. 테마 아이콘을 켜고 전체 런처의 단색 버전도 확인하세요.' },
+  { name: '감사 결과에 대응', text: '여백을 늘리고 작은 세부 요소를 단순화하거나 대비를 개선한 뒤 최종 플랫폼 에셋을 준비하세요.' },
+];
+
+export const content = createDualOsIconPreviewContent({ locale: 'ko', slug: 'dual-ios-android-app-icon-preview', title, description, faqTitle: '자주 묻는 질문', bibliographyTitle: '참고 자료', ui, faq, howTo, seo: [
+  { type: 'title', text: '출시 전에 앱 아이콘 감사하기', level: 2 },
+  { type: 'paragraph', html: '하나의 로고를 업로드하고 iPhone 홈 화면과 Pixel 런처 컨텍스트에서 동시에 확인하세요. 이 앱 아이콘 감사는 캔버스, 화면 비율, 해상도, 투명 가장자리 여백, iOS 마스크 여유와 Android 적응형 안전 영역을 측정합니다. 실제 앱 이름도 입력하세요. 아이콘 자체는 통과해도 런처 라벨이 읽기 어려우면 실제 사용에서 문제가 될 수 있습니다.' },
+  { type: 'title', text: '이 앱 아이콘 감사가 확인하는 항목', level: 3 },
+  { type: 'list', items: ['캔버스와 화면 비율: 플랫폼 도구가 자체 처리를 추가하기 전에 원본이 정사각형인지 확인합니다.', '해상도: 큰 런처 화면에서 흐려질 수 있는 작은 원본 파일을 찾습니다.', '가장자리 여백: 중요한 모양이나 글자가 iOS 마스크 또는 Android 안전 영역에 너무 가까운지 확인합니다.', '런처 라벨: 주변 아이콘과 같은 크기로 앱 이름을 확인하고 어색한 줄바꿈을 찾습니다.', 'Android 테마 처리: 대상 아이콘과 주변 아이콘, 독에 단색 시스템 색을 적용하여 색상에 가려진 약한 실루엣을 드러냅니다.'] },
+  { type: 'title', text: '두 기기 컨텍스트를 동시에 보기', level: 3 },
+  { type: 'paragraph', html: '두 휴대폰 화면을 하나의 감사 화면으로 사용하세요. iOS 기본, 다크, 클리어, 색조 표시를 전환하고 Android 원형, 스쿼클, 둥근 모서리, 물방울 마스크를 시도하세요. 목적은 같은 에셋이 여러 런처 화면에서 어떻게 보이는지 파악하는 것이며, 어느 플랫폼이 더 나은지 겨루는 것이 아닙니다.' },
+  { type: 'title', text: '이 감사가 보장하지 않는 것', level: 3 },
+  { type: 'paragraph', html: '브라우저에서 진행하는 디자인 및 에셋 검토이며 Xcode, Android Studio, 실제 기기 또는 에뮬레이터를 대신하지 않습니다. 런처와 운영체제 버전, 제조사에 따라 마스크, 간격, 대비, 테마 아이콘 규칙이 달라질 수 있습니다. 먼저 위험을 찾고, 이후 지원할 환경에서 최종 플랫폼 에셋을 검증하세요.' },
+  { type: 'tip', title: '실용적인 감사 순서', html: '모든 표시 방식에서 실제로 사용할 가장 작은 크기의 로고를 확인하세요. 하나의 배경이나 마스크, 원래 색상에서만 작동한다면 공개 전에 그래픽을 단순화하거나 여백을 추가하세요.' },
+] });