@jjlmoya/utils-developer 1.31.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-developer",
-    "version": "1.31.0",
+    "version": "1.33.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/i18n/en.ts

@@ -27,7 +27,7 @@ export const content: CategoryLocaleContent = {
     },
     {
       type: 'tip',
-      title: 'Privacy guaranteed',
+      title: 'Local privacy',
       html: 'All tools process data locally in your browser. No code, data or files are sent to any external server.',
     },
   ],

package/src/category/i18n/es.ts

@@ -27,7 +27,7 @@ export const content: CategoryLocaleContent = {
     },
     {
       type: 'tip',
-      title: 'Privacidad garantizada',
+      title: 'Privacidad local',
       html: 'Todas las herramientas procesan los datos localmente en tu navegador. Ningún código, dato ni archivo se envía a ningún servidor externo.',
     },
   ],

package/src/category/index.ts

@@ -22,10 +22,11 @@ import { urlCleaner } from '../tool/urlCleaner/entry';
 import { serpPixelSimulator } from '../tool/serpPixelSimulator/entry';
 import { jwtDecoder } from '../tool/jwtDecoder/entry';
 import { visualCssGridFlexboxGenerator } from '../tool/visualCssGridFlexboxGenerator/entry';
+import { dualOsIconPreview } from '../tool/dualOsIconPreview/entry';
 
 export const developerCategory: DeveloperCategoryEntry = {
   icon: 'mdi:code-tags',
-  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner, serpPixelSimulator, jwtDecoder, visualCssGridFlexboxGenerator],
+  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner, serpPixelSimulator, jwtDecoder, visualCssGridFlexboxGenerator, dualOsIconPreview],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -56,6 +56,8 @@ export { cssBoxShadowGenerator } from './tool/cssBoxShadowGenerator/entry';
 export type { CssBoxShadowGeneratorLocaleContent } from './tool/cssBoxShadowGenerator/entry';
 export { promoteThisWebsite } from './tool/promoteThisWebsite/entry';
 export type { PromoteThisWebsiteLocaleContent } from './tool/promoteThisWebsite/entry';
+export { dualOsIconPreview } from './tool/dualOsIconPreview/entry';
+export type { DualOsIconPreviewLocaleContent } from './tool/dualOsIconPreview/entry';
 export { developerCategory } from './category';
 import { aspectRatio } from './tool/aspectRatio/entry';
 import { calculadoraTiempoDatos } from './tool/calculadoraTiempoDatos/entry';
@@ -86,4 +88,5 @@ import { jwtDecoder } from './tool/jwtDecoder/entry';
 import { visualCssGridFlexboxGenerator } from './tool/visualCssGridFlexboxGenerator/entry';
 import { cssBoxShadowGenerator } from './tool/cssBoxShadowGenerator/entry';
 import { promoteThisWebsite } from './tool/promoteThisWebsite/entry';
-export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator, jwtDecoder, visualCssGridFlexboxGenerator, cssBoxShadowGenerator, promoteThisWebsite];
+import { dualOsIconPreview } from './tool/dualOsIconPreview/entry';
+export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator, jwtDecoder, visualCssGridFlexboxGenerator, cssBoxShadowGenerator, promoteThisWebsite, dualOsIconPreview];

package/src/index.ts

@@ -71,3 +71,4 @@ export { JWT_DECODER_TOOL } from './tool/jwtDecoder/index';
 
 export { VISUAL_CSS_GRID_FLEXBOX_GENERATOR_TOOL } from './tool/visualCssGridFlexboxGenerator/index';
 export { CSS_BOX_SHADOW_GENERATOR_TOOL } from './tool/cssBoxShadowGenerator/index';
+export { DUAL_OS_ICON_PREVIEW_TOOL } from './tool/dualOsIconPreview/index';

package/src/pages/[locale]/[slug].astro

@@ -132,12 +132,12 @@ const titleBase = words.slice(1).join(" ") || "";
       <SEORenderer content={seoContent} />
     </section>
 
-    <section class="section-faq">
-      <FAQSection items={content.faq} title={content.ui.faqTitle} inLanguage={locale} />
+    <section class="section-faq">
+      <FAQSection items={content.faq} title={content.faqTitle} inLanguage={locale} />
     </section>
 
     <section class="section-bibliography">
-      <Bibliography links={content.bibliography} title={content.ui.bibliographyTitle} />
+      <Bibliography links={content.bibliography} title={content.bibliographyTitle} />
     </section>
   </div>
 </PreviewLayout>

package/src/tests/bibliography_wellformed_export.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+
+function findBibliographyAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  if (!existsSync(dir)) return files;
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...findBibliographyAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name === 'bibliography.astro') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+const toolDir = join(process.cwd(), 'src', 'tool');
+const bibliographyFiles = findBibliographyAstroFiles(toolDir);
+
+describe('Bibliography Component Wellformed Export', () => {
+  it('found tool bibliography.astro components', () => {
+    expect(bibliographyFiles.length).toBeGreaterThan(0);
+  });
+
+  bibliographyFiles.forEach((file) => {
+    const relativePath = relative(process.cwd(), file);
+
+    it(`${relativePath} should use SharedBibliography from @jjlmoya/utils-shared`, () => {
+      const content = readFileSync(file, 'utf-8');
+
+      const usesSharedComponent =
+        content.includes('@jjlmoya/utils-shared') &&
+        (content.includes('Bibliography') || content.includes('SharedBibliography'));
+
+      expect(
+        usesSharedComponent,
+        `File "${relativePath}" does not use the standard Bibliography component from @jjlmoya/utils-shared, resulting in unstyled or raw bibliography output.`,
+      ).toBe(true);
+    });
+  });
+});

package/src/tests/category_seo_quality.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+import type { CategoryLocaleContent } from '../types';
+
+const EXPECTED_LOCALES = [
+  'de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh',
+] as const;
+const COMPACT_LOCALES = new Set(['ja', 'ko', 'zh']);
+
+const localeModules = import.meta.glob('../category/i18n/*.ts', { eager: true }) as Record<
+  string,
+  { content: CategoryLocaleContent }
+>;
+
+function textFrom(value: unknown): string {
+  if (typeof value === 'string') return value.replace(/<[^>]*>/g, ' ');
+  if (Array.isArray(value)) return value.map(textFrom).join(' ');
+  if (value && typeof value === 'object') return Object.values(value).map(textFrom).join(' ');
+  return '';
+}
+
+const STRONG_CLAIM = /\b(?:garantiz\w*|guarante\w*|validat(?:ed)|valid(?:ated|ado|ada|ados|adas|ée|ées)|actualizad\w*)\b/iu;
+
+function getContents(): Map<string, CategoryLocaleContent> {
+  return new Map(
+    Object.entries(localeModules).map(([file, module]) => [file.match(/\/([a-z]{2})\.ts$/u)?.[1] ?? file, module.content]),
+  );
+}
+
+function validateContent(locale: string, content: CategoryLocaleContent): string[] {
+  const failures: string[] = [];
+  const check = (condition: boolean, message: string) => { if (!condition) failures.push(`${locale}: ${message}`); };
+  const minimumTitleLength = COMPACT_LOCALES.has(locale) ? 4 : 12;
+  const minimumDescriptionLength = COMPACT_LOCALES.has(locale) ? 20 : 60;
+  check(content.title.trim().length >= minimumTitleLength && content.title.trim().length <= 70, 'title must use a useful 4/12–70 character length');
+  check(content.description.trim().length >= minimumDescriptionLength && content.description.trim().length <= 180, 'description must use a useful 20/60–180 character length');
+  check(content.seo.length >= 2, 'SEO needs at least two sections');
+
+  const seoText = textFrom(content.seo).replace(/\s+/g, ' ').trim();
+  const minimumSeoLength = COMPACT_LOCALES.has(locale) ? 120 : 240;
+  check(seoText.length >= minimumSeoLength, 'SEO copy must contain the minimum visible copy for its script');
+  check(content.seo.filter((section) => section.type === 'title').length >= 1, 'SEO needs a section heading');
+  check(!/[�]/u.test(seoText), 'SEO contains replacement characters');
+  check(!/ {2,}/u.test(seoText), 'SEO contains duplicated whitespace');
+  check(!STRONG_CLAIM.test(seoText), 'SEO contains an unsupported strong claim');
+
+  check(content.slug.trim().length > 0 && /^[a-z0-9-]+$/u.test(content.slug), 'slug must be a non-empty URL-safe value');
+  return failures;
+}
+
+describe('Category SEO quality contract', () => {
+  it('has one content file for every configured locale', () => {
+    const contents = getContents();
+    expect([...contents.keys()].sort()).toEqual([...EXPECTED_LOCALES].sort());
+  });
+
+  it('keeps metadata, SEO structure and copy quality above the minimum in every locale', () => {
+    const contents = getContents();
+    const english = contents.get('en');
+    expect(english, 'English category content is required as the structural reference').toBeDefined();
+
+    const failures = EXPECTED_LOCALES.flatMap((locale) => {
+      const content = contents.get(locale);
+      return content ? validateContent(locale, content) : [];
+    });
+
+    const englishShape = english?.seo.map((section) => section.type);
+    for (const locale of EXPECTED_LOCALES) {
+      const content = contents.get(locale);
+      if (content && JSON.stringify(content.seo.map((section) => section.type)) !== JSON.stringify(englishShape)) {
+        failures.push(`${locale}: SEO section types must match English`);
+      }
+    }
+
+    expect(failures, 'category SEO quality failures').toEqual([]);
+  }, 30000);
+});

package/src/tests/locale_completeness.test.ts

@@ -36,6 +36,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all 28 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(29);
+    expect(ALL_TOOLS.length).toBe(30);
   });
 });

package/src/tests/seo_translation_completeness.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+const ASIAN_LOCALES = ['ja', 'ko', 'zh'];
+
+function getSimpleSectionLength(section: any): number {
+  if (section.type === 'title') return section.text ? section.text.length : 0;
+  if (section.type === 'paragraph') return section.html ? section.html.replace(/<[^>]*>/g, '').length : 0;
+  if (section.type === 'list') return section.items ? section.items.join('').length : 0;
+  return 0;
+}
+
+function getComplexSectionLength(section: any): number {
+  if (section.type === 'diagnostic' || section.type === 'tip') {
+    return (section.title ? section.title.length : 0) + (section.html ? section.html.replace(/<[^>]*>/g, '').length : 0);
+  }
+  if (section.type === 'table') {
+    return ((section.headers || []).join('').length) + ((section.rows || []).flat().join('').length);
+  }
+  return 0;
+}
+
+function getSectionLength(section: any): number {
+  return getSimpleSectionLength(section) || getComplexSectionLength(section);
+}
+
+function calculateSeoTextLength(seoSections: any[]): number {
+  return seoSections.reduce((acc, section) => acc + getSectionLength(section), 0);
+}
+
+function checkLocaleSeoLength(toolId: string, locale: string, localeLen: number, enLen: number): void {
+  const isAsian = ASIAN_LOCALES.includes(locale);
+  const minLength = Math.floor(enLen * (isAsian ? 0.25 : 0.70));
+  const msgType = isAsian ? 'suspiciously short' : 'truncated/lazy';
+
+  expect(
+    localeLen,
+    `[LAZY SEO TRANSLATION] Tool "${toolId}" locale "${locale}" SEO text is ${msgType} (${localeLen} chars vs EN ${enLen} chars, expected min ${minLength})`,
+  ).toBeGreaterThanOrEqual(minLength);
+}
+
+async function auditSingleLocale(toolId: string, locale: string, loader: any, enSeoLength: number): Promise<void> {
+  if (locale === 'en' || !loader) return;
+  const content = await loader();
+  if (!content.seo || !Array.isArray(content.seo)) return;
+
+  checkLocaleSeoLength(toolId, locale, calculateSeoTextLength(content.seo), enSeoLength);
+}
+
+describe('SEO Translation Completeness & Laziness Audit', () => {
+  ALL_TOOLS.forEach(({ entry }) => {
+    describe(`Tool: ${entry.id}`, () => {
+      it('should not have lazy or truncated SEO content compared to English reference', async () => {
+        const enLoader = entry.i18n['en' as keyof typeof entry.i18n];
+        if (!enLoader) return;
+
+        const enContent = await enLoader();
+        if (!enContent.seo || !Array.isArray(enContent.seo)) return;
+
+        const enSeoLength = calculateSeoTextLength(enContent.seo);
+
+        for (const [locale, loader] of Object.entries(entry.i18n)) {
+          await auditSingleLocale(entry.id, locale, loader, enSeoLength);
+        }
+      });
+    });
+  });
+});
+

package/src/tests/seo_wellformed_export.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+
+function findSeoAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  if (!existsSync(dir)) return files;
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...findSeoAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name === 'seo.astro') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+const toolDir = join(process.cwd(), 'src', 'tool');
+const seoFiles = findSeoAstroFiles(toolDir);
+
+describe('SEO Component Wellformed Export', () => {
+  it('found tool seo.astro components', () => {
+    expect(seoFiles.length).toBeGreaterThan(0);
+  });
+
+  seoFiles.forEach((file) => {
+    const relativePath = relative(process.cwd(), file);
+
+    it(`${relativePath} should dynamically load SEO sections and use SEORenderer`, () => {
+      const content = readFileSync(file, 'utf-8');
+
+      const usesSeoRenderer =
+        content.includes('@jjlmoya/utils-shared') &&
+        (content.includes('SEORenderer') || content.includes('SEOArticle'));
+
+      const acquiresDynamicContent =
+        content.includes('.i18n') ||
+        content.includes('loader') ||
+        content.includes('await loader') ||
+        content.includes('.seo');
+
+      const isBrokenPattern =
+        /sections\s*=\s*\[\s*\]/.test(content) && !acquiresDynamicContent;
+
+      expect(
+        usesSeoRenderer,
+        `File "${relativePath}" does not import or use SEORenderer from @jjlmoya/utils-shared.`,
+      ).toBe(true);
+
+      expect(
+        isBrokenPattern,
+        `File "${relativePath}" relies on a static sections=[] prop default without fetching content from entry.i18n, resulting in empty SEO text on consumers.`,
+      ).toBe(false);
+
+      expect(
+        acquiresDynamicContent,
+        `File "${relativePath}" does not fetch dynamic i18n content for SEO rendering.`,
+      ).toBe(true);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -1,17 +1,22 @@
 import { describe, it, expect } from 'vitest';
-import { ALL_TOOLS } from '../tools';
-import { developerCategory } from '../data';
+import { ALL_TOOLS } from '../tools';
+import { ALL_ENTRIES } from '../entries';
+import { developerCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have 28 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(29);
+      expect(ALL_TOOLS.length).toBe(30);
     });
 
-    it('developerCategory should be defined', () => {
-      expect(developerCategory).toBeDefined();
-      expect(developerCategory.i18n).toBeDefined();
-    });
+    it('developerCategory should be defined', () => {
+      expect(developerCategory).toBeDefined();
+      expect(developerCategory.i18n).toBeDefined();
+    });
+
+    it('ALL_ENTRIES should contain every tool entry', () => {
+      expect(ALL_ENTRIES.map((entry) => entry.id).sort()).toEqual(ALL_TOOLS.map((tool) => tool.entry.id).sort());
+    });
   });
 });
 

package/src/tool/dualOsIconPreview/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/dualOsIconPreview/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'App icons', url: 'https://developer.apple.com/design/human-interface-guidelines/app-icons/' },
+  { name: '앱 아이콘 (App icons)', url: 'https://developer.apple.com/kr/design/human-interface-guidelines/app-icons' },
+  { name: 'Design adaptive icons', url: 'https://developer.android.com/develop/ui/compose/system/icon_design_adaptive' },
+];

package/src/tool/dualOsIconPreview/component.astro

@@ -0,0 +1,117 @@
+---
+import type { DualOsIconPreviewUI } from './ui';
+import dayCheckIcon from './assets/day-check.webp';
+import fastTaskIcon from './assets/fast-task.webp';
+import fortuneCookieIcon from './assets/fortune-cookie.webp';
+import lexiCrashIcon from './assets/lexi-crash.webp';
+import pizzaMetricsIcon from './assets/pizzametrics.webp';
+import sauceLabIcon from './assets/sauce-lab.webp';
+import vespIcon from './assets/vesp.webp';
+
+interface Props {
+  ui: DualOsIconPreviewUI;
+}
+
+const { ui } = Astro.props;
+
+const appCatalog = [
+  { name: 'Day Check', src: dayCheckIcon.src },
+  { name: 'Fast Task', src: fastTaskIcon.src },
+  { name: 'Fortune Cookie', src: fortuneCookieIcon.src },
+  { name: 'LexiCrash', src: lexiCrashIcon.src },
+  { name: 'Pizzametrics', src: pizzaMetricsIcon.src },
+  { name: 'SauceLab', src: sauceLabIcon.src },
+  { name: 'VESP', src: vespIcon.src },
+];
+
+const iosApps = [...appCatalog, ...appCatalog.slice(0, 4)];
+const androidApps = [...appCatalog, ...appCatalog.slice(0, 3)];
+const dockApps = appCatalog.slice(0, 4);
+---
+
+<div class="dual-os-icon-preview" data-icon-preview data-ios-appearance="light" data-android-shape="squircle" data-android-themed="false">
+  <section class="preview-controls" aria-label="Icon audit controls">
+    <div class="control-block control-upload">
+      <div class="control-heading"><span class="step-number">01</span><div><strong>{ui.labelUpload}</strong><small>{ui.uploadHint}</small></div></div>
+      <input class="visually-hidden" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" data-logo-input aria-label={ui.labelUpload} />
+      <button class="upload-button" type="button" data-upload-action>
+        <span class="upload-glyph" aria-hidden="true">+</span>
+        <span><strong>{ui.uploadAction}</strong><small>{ui.dropHint}</small></span>
+      </button>
+      <p class="field-error" data-file-error role="status"></p>
+    </div>
+
+    <div class="control-block">
+      <div class="control-heading"><span class="step-number">02</span><div><strong>{ui.labelAppName}</strong><small>{ui.appNamePlaceholder}</small></div></div>
+      <input class="text-input" data-app-name-input type="text" maxlength="24" autocomplete="off" aria-label={ui.labelAppName} />
+      <label class="color-row"><span>{ui.labelBrandColor}</span><input data-brand-input type="color" value="#f4b942" /></label>
+    </div>
+
+    <div class="control-block">
+      <div class="control-heading"><span class="step-number">03</span><div><strong>{ui.labelIosAppearance}</strong><small>{ui.iosAppearanceHint}</small></div></div>
+      <div class="choice-grid" role="group" aria-label={ui.labelIosAppearance}>
+        <button type="button" data-ios-value="default">{ui.iosDefault}</button><button type="button" data-ios-value="dark">{ui.iosDark}</button><button type="button" data-ios-value="clear">{ui.iosClear}</button><button type="button" data-ios-value="tinted">{ui.iosTinted}</button>
+      </div>
+    </div>
+
+    <div class="control-block">
+      <div class="control-heading"><span class="step-number">04</span><div><strong>{ui.labelAndroidShape}</strong><small>{ui.androidShapeHint}</small></div></div>
+      <div class="choice-grid" role="group" aria-label={ui.labelAndroidShape}>
+        <button type="button" data-android-value="circle">{ui.androidCircle}</button><button type="button" data-android-value="squircle">{ui.androidSquircle}</button><button type="button" data-android-value="rounded">{ui.androidRounded}</button><button type="button" data-android-value="teardrop">{ui.androidTeardrop}</button>
+      </div>
+      <label class="toggle-row"><input data-themed-input type="checkbox" /><span><strong>{ui.labelAndroidTheme}</strong><small>{ui.androidThemeHint}</small></span></label>
+    </div>
+  </section>
+
+  <section class="preview-stage" aria-live="polite">
+    <div class="stage-topline"><span class="stage-kicker">{ui.stageKicker}</span><span class="stage-note">{ui.stageNote}</span></div>
+    <div class="device-pair">
+      <article class="device-card device-ios">
+        <div class="device-shell"><div class="device-island"></div><div class="device-screen">
+          <div class="system-status"><span>9:41</span><span>|||</span></div>
+          <div class="home-wallpaper ios-wallpaper">
+            <div class="wallpaper-glow glow-one"></div><div class="wallpaper-glow glow-two"></div>
+            <div class="home-grid ios-grid">
+              <div class="launcher-item target-item"><span class="app-tile audited-icon ios-icon launcher-icon"><img data-logo-image alt="" /><span data-empty-logo>{ui.emptyLogo}</span></span><small data-app-name></small></div>
+              {iosApps.map((app) => <div class="launcher-item"><span class="app-tile ios-icon launcher-icon"><img src={app.src} alt="" /></span><small>{app.name}</small></div>)}
+            </div>
+            <div class="device-dock">{dockApps.map((app) => <span class="app-tile ios-icon launcher-icon"><img src={app.src} alt="" /></span>)}</div>
+          </div>
+          <div class="home-indicator"></div>
+        </div></div>
+        <div class="device-caption"><strong><span class="platform-dot dot-ios"></span>{ui.iosDeviceLabel}</strong><span>{ui.iosHomeLabel}</span></div>
+      </article>
+
+      <article class="device-card device-android">
+        <div class="device-shell"><div class="device-camera"></div><div class="device-screen">
+          <div class="system-status"><span>9:41</span><span>|||</span></div>
+          <div class="home-wallpaper android-wallpaper">
+            <div class="android-search"><span>G</span><small>Search</small><b>?</b></div>
+            <div class="home-grid android-grid">
+              {androidApps.slice(0, 4).map((app) => <div class="launcher-item"><span class="app-tile android-icon launcher-icon"><img src={app.src} alt="" /></span><small>{app.name}</small></div>)}
+              <div class="launcher-item target-item"><span class="app-tile audited-icon android-icon launcher-icon"><img data-logo-image alt="" /><span data-empty-logo>{ui.emptyLogo}</span></span><small data-app-name></small></div>
+              {androidApps.slice(4).map((app) => <div class="launcher-item"><span class="app-tile android-icon launcher-icon"><img src={app.src} alt="" /></span><small>{app.name}</small></div>)}
+            </div>
+            <div class="android-dock">{appCatalog.slice(0, 5).map((app) => <span class="app-tile android-icon launcher-icon"><img src={app.src} alt="" /></span>)}</div>
+          </div>
+          <div class="android-navigation"><span></span><span></span><span></span></div>
+        </div></div>
+        <div class="device-caption"><strong><span class="platform-dot dot-android"></span>{ui.androidDeviceLabel}</strong><span>{ui.androidHomeLabel}</span></div>
+      </article>
+    </div>
+
+    <section class="audit-report" data-audit-report data-audit-state="waiting">
+      <div class="audit-heading"><div><strong>{ui.auditTitle}</strong><small>{ui.auditHint}</small></div><span class="audit-score" data-audit-score>{ui.auditWaiting}</span></div>
+      <div class="audit-grid">
+        <div class="audit-metric"><small>{ui.auditFile}</small><strong data-audit-file>{ui.auditNotChecked}</strong></div><div class="audit-metric"><small>{ui.auditAspect}</small><strong data-audit-aspect>{ui.auditNotChecked}</strong></div><div class="audit-metric"><small>{ui.auditResolution}</small><strong data-audit-resolution>{ui.auditNotChecked}</strong></div><div class="audit-metric"><small>{ui.auditMargin}</small><strong data-audit-margin>{ui.auditNotChecked}</strong></div><div class="audit-metric"><small>{ui.auditIosMask}</small><strong data-audit-ios>{ui.auditNotChecked}</strong></div><div class="audit-metric"><small>{ui.auditAndroidZone}</small><strong data-audit-android>{ui.auditNotChecked}</strong></div><div class="audit-metric"><small>{ui.auditTransparency}</small><strong data-audit-transparency>{ui.auditNotChecked}</strong></div>
+      </div>
+    </section>
+  </section>
+</div>
+
+<script is:inline type="application/json" id="dual-os-icon-preview-ui" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initDualOsIconPreview } from './controller';
+  const payload = document.querySelector('#dual-os-icon-preview-ui')?.textContent;
+  if (payload) initDualOsIconPreview({ ui: JSON.parse(payload) });
+</script>