@jjlmoya/utils-developer 1.28.0 → 1.29.0

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>

package/src/tool/promoteThisWebsite/control-views.ts

@@ -0,0 +1,83 @@
+import { activeLabel } from './evaluator';
+import type { CompositionState, LayerKey } from './logic';
+import type { PromoteThisWebsiteUI } from './ui';
+
+const labels: Record<LayerKey, keyof PromoteThisWebsiteUI> = { background: 'backgroundLayer', tool: 'toolLayer', brand: 'logoLayer', mascot: 'mascotLayer', title: 'titleLayer' };
+
+function query<T extends HTMLElement>(root: HTMLElement, selector: string): T | null {
+  return root.querySelector(selector) as T | null;
+}
+
+function syncValue(root: HTMLElement, selector: string, value: string): void {
+  const control = query<HTMLInputElement>(root, selector);
+  if (control) control.value = value;
+}
+
+function setMenuPlacement(trigger: HTMLElement, menu: HTMLElement): void {
+  const triggerRect = trigger.getBoundingClientRect();
+  const roomBelow = window.innerHeight - triggerRect.bottom;
+  const roomAbove = triggerRect.top;
+  menu.dataset.placement = roomBelow < 260 && roomAbove > roomBelow ? 'top' : 'bottom';
+}
+
+function syncCustomValue(root: HTMLElement, key: string, value: string): void {
+  const control = query<HTMLElement>(root, `[data-promote-select="${key}"]`);
+  if (!control) return;
+  control.dataset.value = value;
+  const option = query<HTMLElement>(control, `[data-value="${value}"]`);
+  const label = query<HTMLElement>(control, '[data-select-label]');
+  if (label && option) label.textContent = option.textContent;
+  control.querySelectorAll<HTMLElement>('[role="option"]').forEach((item) => { item.setAttribute('aria-selected', String(item.dataset.value === value)); });
+}
+
+export function bindCustomSelect(root: HTMLElement, key: string, onChange: (value: string) => void): void {
+  const control = query<HTMLElement>(root, `[data-promote-select="${key}"]`);
+  const trigger = query<HTMLButtonElement>(control || root, '.promote-select-trigger');
+  const menu = query<HTMLElement>(control || root, '.promote-select-menu');
+  if (!control || !trigger || !menu) return;
+  const close = () => { menu.hidden = true; trigger.setAttribute('aria-expanded', 'false'); };
+  const open = () => {
+    setMenuPlacement(trigger, menu);
+    root.querySelectorAll<HTMLElement>('.promote-select-menu').forEach((item) => { item.hidden = true; });
+    root.querySelectorAll<HTMLButtonElement>('.promote-select-trigger').forEach((item) => { item.setAttribute('aria-expanded', 'false'); });
+    menu.hidden = false;
+    trigger.setAttribute('aria-expanded', 'true');
+  };
+  const choose = (option: HTMLElement) => {
+    const value = option.dataset.value;
+    if (!value) return;
+    syncCustomValue(root, key, value);
+    close();
+    onChange(value);
+  };
+  trigger.addEventListener('click', () => { if (menu.hidden) open(); else close(); });
+  trigger.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') { event.preventDefault(); open(); }
+    if (event.key === 'Escape') close();
+  });
+  menu.querySelectorAll<HTMLElement>('[role="option"]').forEach((option) => option.addEventListener('click', () => choose(option)));
+  root.addEventListener('click', (event) => { if (!control.contains(event.target as Node)) close(); });
+}
+
+export function syncControls(root: HTMLElement, state: CompositionState, ui: PromoteThisWebsiteUI): void {
+  syncValue(root, '#promote-url', state.sourceUrl);
+  syncCustomValue(root, 'format', state.format);
+  syncValue(root, '#promote-title', state.title);
+  syncValue(root, '#promote-title-size', state.titleFontSize.toString());
+  syncValue(root, '#promote-title-box-size', state.scale.title.toString());
+  syncCustomValue(root, 'title-style', state.titleStyle);
+  syncCustomValue(root, 'brand', state.brand);
+  syncCustomValue(root, 'brand-style', state.brandStyle);
+  syncLayerControls(root, state);
+  const label = query<HTMLElement>(root, '#promote-active');
+  if (label) label.textContent = `${ui.activeLayer}: ${activeLabel(state, Object.fromEntries(Object.entries(labels).map(([key, value]) => [key, ui[value]])) as Record<LayerKey, string>)}`;
+}
+
+function syncLayerControls(root: HTMLElement, state: CompositionState): void {
+  (Object.keys(state.visible) as LayerKey[]).forEach((key) => {
+    const visible = query<HTMLInputElement>(root, `#promote-${key}-visible`);
+    if (visible) visible.checked = state.visible[key];
+    const scale = query<HTMLInputElement>(root, `#promote-${key}-scale`);
+    if (scale) scale.value = state.scale[key].toString();
+  });
+}