@jjlmoya/utils-developer 1.30.0 → 1.32.0

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>

package/src/tool/dualOsIconPreview/controller.ts

@@ -0,0 +1,157 @@
+import { auditLogo, buildPreviewState, DEFAULT_SETTINGS, sanitiseSettings, type AndroidShape, type IconPreviewSettings, type IosAppearance, type LogoAudit, type LogoAuditMetrics } from './logic';
+import { renderPreview } from './dom-views';
+import { loadStoredSettings, saveStoredSettings } from './storage';
+import type { DualOsIconPreviewUI } from './ui';
+
+interface ControllerOptions {
+  ui: DualOsIconPreviewUI;
+}
+
+interface ControllerState {
+  settings: IconPreviewSettings;
+  logoUrl: string;
+  audit: LogoAudit | null;
+}
+
+function getElement<T extends HTMLElement>(selector: string): T | null {
+  return document.querySelector<T>(selector);
+}
+
+function readSettings(): IconPreviewSettings {
+  const stored = loadStoredSettings();
+  return sanitiseSettings({ ...DEFAULT_SETTINGS, ...stored });
+}
+
+function updateView(state: ControllerState, ui: DualOsIconPreviewUI): void {
+  renderPreview({ state: buildPreviewState(state.settings, Boolean(state.logoUrl), state.audit), ui, logoUrl: state.logoUrl });
+  saveStoredSettings(state.settings);
+}
+
+function setPressed(selector: string, attribute: string, value: string): void {
+  document.querySelectorAll<HTMLButtonElement>(selector).forEach((button) => {
+    button.setAttribute('aria-pressed', String(button.getAttribute(attribute) === value));
+  });
+}
+
+function bindSettingButtons(state: ControllerState, ui: DualOsIconPreviewUI): void {
+  document.querySelectorAll<HTMLButtonElement>('[data-ios-value]').forEach((button) => {
+    button.addEventListener('click', () => {
+      state.settings.iosAppearance = button.dataset.iosValue as IosAppearance;
+      setPressed('[data-ios-value]', 'data-ios-value', state.settings.iosAppearance);
+      updateView(state, ui);
+    });
+  });
+  document.querySelectorAll<HTMLButtonElement>('[data-android-value]').forEach((button) => {
+    button.addEventListener('click', () => {
+      state.settings.androidShape = button.dataset.androidValue as AndroidShape;
+      setPressed('[data-android-value]', 'data-android-value', state.settings.androidShape);
+      updateView(state, ui);
+    });
+  });
+}
+
+function bindFileInput(state: ControllerState, ui: DualOsIconPreviewUI): void {
+  const input = getElement<HTMLInputElement>('[data-logo-input]');
+  const error = getElement<HTMLElement>('[data-file-error]');
+  input?.addEventListener('change', () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+      if (error) error.textContent = ui.fileError;
+      return;
+    }
+    readLogoFile(file).then((logo) => {
+      state.logoUrl = logo.url;
+      state.audit = logo.audit;
+      if (error) error.textContent = '';
+      updateView(state, ui);
+    }).catch(() => { if (error) error.textContent = ui.fileError; });
+  });
+}
+
+function readDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => typeof reader.result === 'string' ? resolve(reader.result) : reject(new Error('image-read')));
+    reader.addEventListener('error', () => reject(new Error('image-read')));
+    reader.readAsDataURL(file);
+  });
+}
+
+function findOpaqueBounds(data: Uint8ClampedArray, width: number, height: number): LogoAuditMetrics {
+  let minX = width;
+  let minY = height;
+  let maxX = -1;
+  let maxY = -1;
+  let visiblePixels = 0;
+  for (let alphaIndex = 3; alphaIndex < data.length; alphaIndex += 4) {
+    if ((data[alphaIndex] ?? 0) <= 12) continue;
+    const pixel = (alphaIndex - 3) / 4;
+    const x = pixel % width;
+    const y = Math.floor(pixel / width);
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+    visiblePixels += 1;
+  }
+  return { width, height, leftMargin: minX, rightMargin: maxX < 0 ? 0 : width - maxX - 1, topMargin: minY, bottomMargin: maxY < 0 ? 0 : height - maxY - 1, visiblePixels };
+}
+
+function measureLogo(url: string): Promise<LogoAuditMetrics> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = image.naturalWidth;
+      canvas.height = image.naturalHeight;
+      const context = canvas.getContext('2d');
+      if (!context) { reject(new Error('canvas-unavailable')); return; }
+      context.drawImage(image, 0, 0);
+      resolve(findOpaqueBounds(context.getImageData(0, 0, canvas.width, canvas.height).data, canvas.width, canvas.height));
+    });
+    image.addEventListener('error', () => reject(new Error('image-load')));
+    image.src = url;
+  });
+}
+
+async function readLogoFile(file: File): Promise<{ url: string; audit: LogoAudit }> {
+  const url = await readDataUrl(file);
+  return { url, audit: auditLogo(await measureLogo(url)) };
+}
+
+function bindTextInput(state: ControllerState, ui: DualOsIconPreviewUI): void {
+  getElement<HTMLInputElement>('[data-app-name-input]')?.addEventListener('input', (event) => {
+    state.settings.appName = (event.target as HTMLInputElement).value;
+    updateView(state, ui);
+  });
+  getElement<HTMLInputElement>('[data-brand-input]')?.addEventListener('input', (event) => {
+    state.settings.brandColor = (event.target as HTMLInputElement).value;
+    updateView(state, ui);
+  });
+  getElement<HTMLInputElement>('[data-themed-input]')?.addEventListener('change', (event) => {
+    state.settings.androidThemed = (event.target as HTMLInputElement).checked;
+    updateView(state, ui);
+  });
+}
+
+function syncInputs(settings: IconPreviewSettings): void {
+  const appName = getElement<HTMLInputElement>('[data-app-name-input]');
+  const brand = getElement<HTMLInputElement>('[data-brand-input]');
+  const themed = getElement<HTMLInputElement>('[data-themed-input]');
+  if (appName) appName.value = settings.appName;
+  if (brand) brand.value = settings.brandColor;
+  if (themed) themed.checked = settings.androidThemed;
+  setPressed('[data-ios-value]', 'data-ios-value', settings.iosAppearance);
+  setPressed('[data-android-value]', 'data-android-value', settings.androidShape);
+}
+
+export function initDualOsIconPreview(options: ControllerOptions): void {
+  const state: ControllerState = { settings: readSettings(), logoUrl: '', audit: null };
+  syncInputs(state.settings);
+  bindSettingButtons(state, options.ui);
+  bindFileInput(state, options.ui);
+  bindTextInput(state, options.ui);
+  getElement<HTMLButtonElement>('[data-upload-action]')?.addEventListener('click', () => getElement<HTMLInputElement>('[data-logo-input]')?.click());
+  updateView(state, options.ui);
+}

package/src/tool/dualOsIconPreview/dom-views.ts

@@ -0,0 +1,82 @@
+import { evaluatePreview } from './evaluator';
+import { getIosSurface, type IconPreviewState, type LogoAudit } from './logic';
+import type { DualOsIconPreviewUI } from './ui';
+
+interface RenderPayload {
+  state: IconPreviewState;
+  ui: DualOsIconPreviewUI;
+  logoUrl: string;
+}
+
+function setText(selector: string, text: string): void {
+  document.querySelectorAll<HTMLElement>(selector).forEach((node) => { node.textContent = text; });
+}
+
+function setLogo(logoUrl: string, hasLogo: boolean): void {
+  document.querySelectorAll<HTMLImageElement>('[data-logo-image]').forEach((image) => {
+    image.src = logoUrl;
+    image.hidden = !hasLogo;
+  });
+  document.querySelectorAll<HTMLElement>('[data-empty-logo]').forEach((node) => { node.hidden = hasLogo; });
+}
+
+function renderBadges(payload: RenderPayload): void {
+  const target = document.querySelector<HTMLElement>('[data-preview-badges]');
+  if (!target) return;
+  target.replaceChildren(...evaluatePreview(payload.state, payload.ui).map((badge) => {
+    const node = document.createElement('span');
+    node.className = `preview-badge preview-badge-${badge.tone}`;
+    node.textContent = `${badge.label} / ${badge.detail}`;
+    return node;
+  }));
+}
+
+function setAuditValue(selector: string, value: string, status: string | null): void {
+  const node = document.querySelector<HTMLElement>(selector);
+  if (!node) return;
+  node.textContent = value;
+  if (status) {
+    node.dataset.auditStatus = status;
+  } else {
+    delete node.dataset.auditStatus;
+  }
+}
+
+function renderAuditScore(audit: LogoAudit, ui: DualOsIconPreviewUI): void {
+  setAuditValue('[data-audit-score]', `${audit.score}/100`, audit.score === 100 ? 'pass' : 'review');
+  setAuditValue('[data-audit-resolution]', audit.resolution === 'pass' ? ui.statusPass : ui.statusReview, audit.resolution);
+  setAuditValue('[data-audit-ios]', audit.iosMask === 'pass' ? ui.statusPass : ui.statusReview, audit.iosMask);
+  setAuditValue('[data-audit-android]', audit.androidSafeZone === 'pass' ? ui.statusPass : ui.statusReview, audit.androidSafeZone);
+}
+
+function renderAuditMetrics(audit: LogoAudit, ui: DualOsIconPreviewUI): void {
+  setAuditValue('[data-audit-file]', audit.dimensions, null);
+  setAuditValue('[data-audit-aspect]', audit.aspect, audit.aspect === '1:1' ? 'pass' : 'review');
+  setAuditValue('[data-audit-margin]', `${Math.round(audit.minimumMargin * 100)}%`, audit.androidSafeZone);
+  setAuditValue('[data-audit-transparency]', audit.transparency === 'transparent' ? ui.auditTransparent : ui.auditFullBleed, null);
+}
+
+function renderAudit(audit: LogoAudit | null, ui: DualOsIconPreviewUI): void {
+  const report = document.querySelector<HTMLElement>('[data-audit-report]');
+  if (!report) return;
+  report.dataset.auditState = audit ? 'ready' : 'waiting';
+  if (!audit) {
+    setAuditValue('[data-audit-score]', ui.auditWaiting, null);
+    return;
+  }
+  renderAuditScore(audit, ui);
+  renderAuditMetrics(audit, ui);
+}
+
+export function renderPreview(payload: RenderPayload): void {
+  const root = document.querySelector<HTMLElement>('[data-icon-preview]');
+  if (!root) return;
+  root.dataset.iosAppearance = getIosSurface(payload.state.iosAppearance);
+  root.dataset.androidShape = payload.state.androidShape;
+  root.dataset.androidThemed = String(payload.state.androidThemed);
+  root.style.setProperty('--n-brand', payload.state.brandColor);
+  setText('[data-app-name]', payload.state.appName || payload.ui.nameFallback);
+  setLogo(payload.logoUrl, payload.state.hasLogo);
+  renderBadges(payload);
+  renderAudit(payload.state.audit, payload.ui);
+}