@jjlmoya/utils-developer 1.27.0 → 1.29.0

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Frequently Asked Questions',
   faq: faqData,
   bibliographyTitle: 'References and Documentation',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -158,9 +146,9 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
     {
       type: 'list',
       items: [
-        '<strong>Pixel Perfect Resolution:</strong> Native HTML5 Canvas ensures the exported canvas corresponds arithmetically to the coordinates stipulated by the user.',
+        '<strong>Pixel Perfect Resolution:</strong> Native HTML5 Canvas keeps the exported canvas aligned with the coordinates stipulated by the user.',
         '<strong>Typographic Autoscaling:</strong> In Automatic mode, the font size calculates the perimeter area and number of characters to elegantly fit the text without causing unwanted <em>overflows</em>.',
-        '<strong>Hexadecimal Fusion:</strong> Bidirectional state control between native HTML ecosystem selectors and typed inputs, guaranteeing precise contrasts dictated by your Figma or Penpot UI/UX palette.',
+        '<strong>Hexadecimal Fusion:</strong> Bidirectional state control between native HTML ecosystem selectors and typed inputs, so you can match the contrast values from your Figma or Penpot UI/UX palette.',
       ],
     },
     {

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Preguntas Frecuentes',
   faq: faqData,
   bibliographyTitle: 'Referencias y Documentación',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -158,9 +146,9 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
     {
       type: 'list',
       items: [
-        '<strong>Resolución Pixel Perfect:</strong> HTML5 Canvas nativo asegura que el lienzo exportado corresponde aritméticamente a las coordenadas estipuladas por el usuario.',
+        '<strong>Resolución Pixel Perfect:</strong> HTML5 Canvas nativo mantiene el lienzo exportado alineado con las coordenadas indicadas por el usuario.',
         '<strong>Autoscaling Tipográfico:</strong> En el modo Automático, la dimensión de la fuente calcula el área perimetral y el número de caracteres para acoplar con elegancia el texto a lo largo y ancho sin provocar <em>overflows</em> indeseados.',
-        '<strong>Fusión Hexadecimal:</strong> Control de estado bidireccional entre selectores de ecosistema nativo HTML e inputs mecanografiados garantizando contrastes precisos dictados por la paleta del UI/UX de tu Figma o Penpot original.',
+        '<strong>Fusión Hexadecimal:</strong> Control de estado bidireccional entre selectores de ecosistema nativo HTML e inputs mecanografiados para ajustar los contrastes de la paleta de tu Figma o Penpot original.',
       ],
     },
     {

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Questions Fréquentes',
   faq: faqData,
   bibliographyTitle: 'Références et Documentation',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Pertanyaan yang Sering Diajukan',
   faq: faqData,
   bibliographyTitle: 'Referensi dan Dokumentasi',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Domande Frequenti',
   faq: faqData,
   bibliographyTitle: 'Riferimenti e Documentazione',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/it/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/it/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'よくある質問',
   faq: faqData,
   bibliographyTitle: '参考資料',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: '자주 묻는 질문',
   faq: faqData,
   bibliographyTitle: '참고 자료 및 문서',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/ko/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/ko/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/nl.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Veelgestelde vragen',
   faq: faqData,
   bibliographyTitle: 'Referenties en documentatie',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/nl/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/nl/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/pl.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Często Zadawane Pytania',
   faq: faqData,
   bibliographyTitle: 'Referencje i Dokumentacja',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/pt.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Perguntas Frequentes',
   faq: faqData,
   bibliographyTitle: 'Referências e Documentação',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/ru.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Часто Задаваемые Вопросы',
   faq: faqData,
   bibliographyTitle: 'Ссылки и Документация',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/sv.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Vanliga Frågor',
   faq: faqData,
   bibliographyTitle: 'Referenser och Dokumentation',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/tr.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: 'Sık Sorulan Sorular',
   faq: faqData,
   bibliographyTitle: 'Referanslar ve Belgeler',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/placeholderGenerator/i18n/zh.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PlaceholderGeneratorUI } from '../ui';
@@ -106,20 +107,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
   faqTitle: '常见问题',
   faq: faqData,
   bibliographyTitle: '参考资料和文档',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
-    },
-    {
-      name: 'MDN Web Docs: CanvasRenderingContext2D',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
-    },
-    {
-      name: 'W3C: HTML Canvas 2D Context',
-      url: 'https://www.w3.org/TR/2dcontext/',
-    },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/promoteThisWebsite/asset-bindings.ts

@@ -0,0 +1,73 @@
+import type { CompositionState } from './logic';
+import type { RenderAssets } from './dom-views';
+import { writeState } from './storage';
+import type { PromoteThisWebsiteUI } from './ui';
+
+function query<T extends HTMLElement>(root: HTMLElement, selector: string): T | null {
+  return root.querySelector(selector) as T | null;
+}
+
+export function loadImage(source: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    if (source.startsWith('http')) image.crossOrigin = 'anonymous';
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Image could not be loaded'));
+    image.src = source;
+  });
+}
+
+export function loadDefaultMascot(): Promise<HTMLImageElement> {
+  return loadImage(new URL('./pixel-cat.png', import.meta.url).href);
+}
+
+export function readFile(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+interface CanvasDownload {
+  root: HTMLElement;
+  state: CompositionState;
+}
+
+export function downloadCanvas(input: CanvasDownload): void {
+  const canvas = query<HTMLCanvasElement>(input.root, '#promote-canvas');
+  if (!canvas) return;
+  canvas.toBlob((blob) => {
+    if (!blob) return;
+    const link = document.createElement('a');
+    link.download = `promote-this-website-${input.state.format}.png`;
+    link.href = URL.createObjectURL(blob);
+    link.click();
+    URL.revokeObjectURL(link.href);
+  }, 'image/png');
+}
+
+interface PasteBinding {
+  root: HTMLElement;
+  stateRef: { current: CompositionState };
+  assets: RenderAssets;
+  ui: PromoteThisWebsiteUI;
+  draw: (root: HTMLElement, state: CompositionState, assets: RenderAssets, ui: PromoteThisWebsiteUI) => void;
+  setStatus: (root: HTMLElement, message: string) => void;
+}
+
+export function bindPaste(binding: PasteBinding): void {
+  document.addEventListener('paste', async (event) => {
+    const item = Array.from(event.clipboardData?.items || []).find((entry) => entry.type.startsWith('image/'));
+    if (!item) return;
+    event.preventDefault();
+    const file = item.getAsFile();
+    if (!file) return;
+    binding.assets.tool = await loadImage(await readFile(file));
+    binding.stateRef.current.active = 'tool';
+    writeState(binding.stateRef.current);
+    binding.draw(binding.root, binding.stateRef.current, binding.assets, binding.ui);
+    binding.setStatus(binding.root, binding.ui.pasted);
+  });
+}

package/src/tool/promoteThisWebsite/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { promoteThisWebsite } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await promoteThisWebsite.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/promoteThisWebsite/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliography = [
+  {
+    name: 'jjlmoya resistance colour calculator',
+    url: 'https://www.jjlmoya.es/utilidades/calculadora-codigo-colores-resistencia/',
+  },
+  {
+    name: 'jjlmoya utilities index',
+    url: 'https://www.jjlmoya.es/utilidades/',
+  },
+  {
+    name: 'GameBob team and feline management board',
+    url: 'https://www.gamebob.dev/de/mannschaft/',
+  },
+];

package/src/tool/promoteThisWebsite/component.astro

@@ -0,0 +1,136 @@
+---
+import './promote-this-website.css';
+import type { PromoteThisWebsiteUI } from './ui';
+
+interface Props {
+  ui: PromoteThisWebsiteUI;
+}
+
+const { ui } = Astro.props;
+const uiData = JSON.stringify(ui);
+const layerRows = [
+  ['background', 'backgroundLayer'],
+  ['tool', 'toolLayer'],
+  ['brand', 'logoLayer'],
+  ['mascot', 'mascotLayer'],
+  ['title', 'titleLayer'],
+] as const;
+const formatOptions = [
+  ['panoramic', ui.panoramic],
+  ['instagram', ui.instagram],
+  ['square', ui.square],
+  ['story', ui.story],
+] as const;
+const titleStyleOptions = [
+  ['paper', ui.titlePaper], ['ribbon', ui.titleRibbon], ['ink', ui.titleInk], ['poster', ui.titlePoster], ['ticket', ui.titleTicket],
+  ['marker', ui.titleMarker], ['split', ui.titleSplit], ['capsule', ui.titleCapsule], ['corner', ui.titleCorner], ['vertical', ui.titleVertical],
+] as const;
+const brandOptions = [['jjlmoya.es', 'jjlmoya.es'], ['GameBob.dev', 'GameBob.dev']] as const;
+const brandStyleOptions = [
+  ['plain', ui.brandPlain], ['plaque', ui.brandPlaque], ['ticket', ui.brandTicket], ['stamp', ui.brandStamp], ['neon', ui.brandNeon],
+  ['ribbon', ui.brandRibbon], ['corner', ui.brandCorner], ['pixel', ui.brandPixel], ['halo', ui.brandHalo], ['editorial', ui.brandEditorial],
+] as const;
+---
+
+<div class="promote-tool" id="promote-this-website" data-ui={uiData}>
+  <aside class="promote-sidebar" aria-label={ui.urlLabel}>
+    <div class="promote-control-group">
+      <label for="promote-url">{ui.urlLabel}</label>
+      <div class="promote-inline-control">
+        <input id="promote-url" type="url" placeholder={ui.urlPlaceholder} />
+        <button id="promote-apply-url" type="button">{ui.applyUrl}</button>
+      </div>
+    </div>
+
+    <div class="promote-control-grid">
+      <label for="promote-format-trigger">{ui.formatLabel}</label>
+      <div class="promote-custom-select" data-promote-select="format" data-value="panoramic">
+        <button id="promote-format-trigger" class="promote-select-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
+          <span data-select-label>{ui.panoramic}</span>
+        </button>
+        <div class="promote-select-menu" role="listbox" tabindex="-1" hidden>
+          {formatOptions.map(([value, label]) => <button class="promote-select-option" type="button" role="option" data-value={value} aria-selected={value === 'panoramic'}>{label}</button>)}
+        </div>
+      </div>
+      <label for="promote-title">{ui.titleLabel}</label>
+      <input id="promote-title" type="text" placeholder={ui.titlePlaceholder} />
+      <label for="promote-title-size">{ui.titleSizeLabel}</label>
+      <input id="promote-title-size" type="range" min="0.45" max="1" step="0.01" value="1" aria-label={ui.titleSizeLabel} />
+      <label for="promote-title-box-size">{ui.titleBoxSizeLabel}</label>
+      <input id="promote-title-box-size" type="range" min="0.5" max="2.4" step="0.01" value="1" aria-label={ui.titleBoxSizeLabel} />
+      <label for="promote-title-style-trigger">{ui.titleStyleLabel}</label>
+      <div class="promote-custom-select" data-promote-select="title-style" data-value="paper">
+        <button id="promote-title-style-trigger" class="promote-select-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
+          <span data-select-label>{ui.titlePaper}</span>
+        </button>
+        <div class="promote-select-menu" role="listbox" tabindex="-1" hidden>
+          {titleStyleOptions.map(([value, label]) => <button class="promote-select-option" type="button" role="option" data-value={value} aria-selected={value === 'paper'}>{label}</button>)}
+        </div>
+      </div>
+      <label for="promote-brand-trigger">{ui.brandLabel}</label>
+      <div class="promote-custom-select" data-promote-select="brand" data-value="jjlmoya.es">
+        <button id="promote-brand-trigger" class="promote-select-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
+          <span data-select-label>jjlmoya.es</span>
+        </button>
+        <div class="promote-select-menu" role="listbox" tabindex="-1" hidden>
+          {brandOptions.map(([value, label]) => <button class="promote-select-option" type="button" role="option" data-value={value} aria-selected={value === 'jjlmoya.es'}>{label}</button>)}
+        </div>
+      </div>
+      <label for="promote-brand-style-trigger">{ui.brandStyleLabel}</label>
+      <div class="promote-custom-select" data-promote-select="brand-style" data-value="plain">
+        <button id="promote-brand-style-trigger" class="promote-select-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
+          <span data-select-label>{ui.brandPlain}</span>
+        </button>
+        <div class="promote-select-menu" role="listbox" tabindex="-1" hidden>
+          {brandStyleOptions.map(([value, label]) => <button class="promote-select-option" type="button" role="option" data-value={value} aria-selected={value === 'plain'}>{label}</button>)}
+        </div>
+      </div>
+    </div>
+
+    <details class="promote-advanced">
+      <summary>{ui.advancedLabel}</summary>
+      <fieldset class="promote-fieldset">
+        <legend>{ui.assetsLabel}</legend>
+        <label>{ui.backgroundLabel}<input id="promote-background-file" type="file" accept="image/*" /></label>
+        <label>{ui.toolLabel}<input id="promote-tool-file" type="file" accept="image/*" /></label>
+        <label>{ui.logoLabel}<input id="promote-brand-file" type="file" accept="image/*" /></label>
+        <label>{ui.mascotLabel}<input id="promote-mascot-file" type="file" accept="image/*" /></label>
+      </fieldset>
+
+      <fieldset class="promote-fieldset promote-layers">
+        <legend>{ui.layersLabel}</legend>
+        {layerRows.map(([key, labelKey]) => (
+          <label class="promote-layer" for={`promote-${key}-visible`}>
+            <span><input id={`promote-${key}-visible`} type="checkbox" checked /> {ui[labelKey]}</span>
+            <input id={`promote-${key}-scale`} type="range" min="0.35" max="3.5" step="0.01" value="1" aria-label={`${ui[labelKey]} scale`} />
+          </label>
+        ))}
+      </fieldset>
+
+    </details>
+
+    <div class="promote-actions">
+      <button id="promote-reset" type="button">{ui.reset}</button>
+      <button id="promote-download" class="promote-primary" type="button">{ui.download}</button>
+    </div>
+    <p class="promote-status" id="promote-status" aria-live="polite">{ui.canvasHint}</p>
+  </aside>
+
+  <main class="promote-stage">
+    <div class="promote-stage-meta">
+      <span id="promote-active">{ui.activeLayer}: {ui.toolLayer}</span>
+      <span id="promote-size">1536 × 1024</span>
+    </div>
+    <div class="promote-canvas-wrap">
+      <canvas id="promote-canvas" aria-label={ui.canvasHint}></canvas>
+    </div>
+  </main>
+</div>
+
+<script>
+  import { mountPromoteThisWebsite } from './controller';
+  import type { PromoteThisWebsiteUI } from './ui';
+
+  const root = document.getElementById('promote-this-website');
+  if (root) mountPromoteThisWebsite(root, JSON.parse(root.dataset.ui || '{}') as PromoteThisWebsiteUI);
+</script>