@jjlmoya/utils-developer 1.30.0 → 1.32.0

package/src/tool/dualOsIconPreview/logic.ts

@@ -0,0 +1,135 @@
+export type IosAppearance = 'default' | 'dark' | 'clear' | 'tinted';
+export type AndroidShape = 'circle' | 'squircle' | 'rounded' | 'teardrop';
+
+export interface IconPreviewSettings {
+  appName: string;
+  brandColor: string;
+  iosAppearance: IosAppearance;
+  androidShape: AndroidShape;
+  androidThemed: boolean;
+}
+
+export interface IconPreviewState extends IconPreviewSettings {
+  hasLogo: boolean;
+  audit: LogoAudit | null;
+}
+
+export interface LogoAuditMetrics {
+  width: number;
+  height: number;
+  leftMargin: number;
+  rightMargin: number;
+  topMargin: number;
+  bottomMargin: number;
+  visiblePixels: number;
+}
+
+export interface LogoAudit {
+  score: number;
+  dimensions: string;
+  aspect: string;
+  resolution: 'pass' | 'review';
+  iosMask: 'pass' | 'review';
+  androidSafeZone: 'pass' | 'review';
+  transparency: 'transparent' | 'full-bleed';
+  minimumMargin: number;
+}
+
+export const DEFAULT_SETTINGS: IconPreviewSettings = {
+  appName: 'Northstar',
+  brandColor: '#f4b942',
+  iosAppearance: 'default',
+  androidShape: 'squircle',
+  androidThemed: false,
+};
+
+const APPEARANCES: IosAppearance[] = ['default', 'dark', 'clear', 'tinted'];
+const SHAPES: AndroidShape[] = ['circle', 'squircle', 'rounded', 'teardrop'];
+
+export function isIosAppearance(value: string): value is IosAppearance {
+  return APPEARANCES.includes(value as IosAppearance);
+}
+
+export function isAndroidShape(value: string): value is AndroidShape {
+  return SHAPES.includes(value as AndroidShape);
+}
+
+export function normaliseAppName(value: string): string {
+  const clean = value.trim().replace(/\s+/g, ' ');
+  return clean.slice(0, 24);
+}
+
+export function isHexColor(value: string): boolean {
+  return /^#[0-9a-f]{6}$/i.test(value);
+}
+
+function resolveAppName(value: string | undefined): string {
+  return normaliseAppName(value ?? DEFAULT_SETTINGS.appName) || DEFAULT_SETTINGS.appName;
+}
+
+function resolveBrandColor(value: string | undefined): string {
+  return isHexColor(value ?? '') ? value! : DEFAULT_SETTINGS.brandColor;
+}
+
+function resolveAppearance(value: string | undefined): IosAppearance {
+  return isIosAppearance(value ?? '') ? value as IosAppearance : DEFAULT_SETTINGS.iosAppearance;
+}
+
+function resolveShape(value: string | undefined): AndroidShape {
+  return isAndroidShape(value ?? '') ? value as AndroidShape : DEFAULT_SETTINGS.androidShape;
+}
+
+export function sanitiseSettings(input: Partial<IconPreviewSettings>): IconPreviewSettings {
+  return {
+    appName: resolveAppName(input.appName),
+    brandColor: resolveBrandColor(input.brandColor),
+    iosAppearance: resolveAppearance(input.iosAppearance),
+    androidShape: resolveShape(input.androidShape),
+    androidThemed: input.androidThemed === true,
+  };
+}
+
+export function buildPreviewState(settings: Partial<IconPreviewSettings>, hasLogo: boolean, audit: LogoAudit | null = null): IconPreviewState {
+  return { ...sanitiseSettings(settings), hasLogo, audit };
+}
+
+export function getIosSurface(appearance: IosAppearance): string {
+  if (appearance === 'dark') return 'dark';
+  if (appearance === 'clear') return 'clear';
+  if (appearance === 'tinted') return 'tinted';
+  return 'light';
+}
+
+function isSquare(metrics: LogoAuditMetrics): boolean {
+  return metrics.width === metrics.height;
+}
+
+function hasGoodResolution(metrics: LogoAuditMetrics): boolean {
+  return Math.min(metrics.width, metrics.height) >= 512;
+}
+
+function getMinimumMargin(metrics: LogoAuditMetrics): number {
+  return Math.min(metrics.leftMargin, metrics.rightMargin, metrics.topMargin, metrics.bottomMargin) / Math.max(metrics.width, metrics.height);
+}
+
+function getScore(metrics: LogoAuditMetrics, minimumMargin: number): number {
+  const squarePoints = isSquare(metrics) ? 25 : 0;
+  const resolutionPoints = hasGoodResolution(metrics) ? 25 : 0;
+  const iosPoints = minimumMargin >= 0.1 ? 25 : 0;
+  const androidPoints = minimumMargin >= 0.195 ? 25 : 0;
+  return squarePoints + resolutionPoints + iosPoints + androidPoints;
+}
+
+export function auditLogo(metrics: LogoAuditMetrics): LogoAudit {
+  const minimumMargin = getMinimumMargin(metrics);
+  return {
+    score: getScore(metrics, minimumMargin),
+    dimensions: `${metrics.width} x ${metrics.height}`,
+    aspect: isSquare(metrics) ? '1:1' : `${metrics.width}:${metrics.height}`,
+    resolution: hasGoodResolution(metrics) ? 'pass' : 'review',
+    iosMask: minimumMargin >= 0.1 && isSquare(metrics) ? 'pass' : 'review',
+    androidSafeZone: minimumMargin >= 0.195 && isSquare(metrics) ? 'pass' : 'review',
+    transparency: metrics.visiblePixels < metrics.width * metrics.height ? 'transparent' : 'full-bleed',
+    minimumMargin,
+  };
+}

package/src/tool/dualOsIconPreview/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { dualOsIconPreview } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await dualOsIconPreview.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/dualOsIconPreview/storage.ts

@@ -0,0 +1,18 @@
+import type { IconPreviewSettings } from './logic';
+
+const STORAGE_KEY = 'jjlmoya:dual-os-icon-preview';
+
+export function loadStoredSettings(): Partial<IconPreviewSettings> {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) as Partial<IconPreviewSettings> : {};
+  } catch {
+    return {};
+  }
+}
+
+export function saveStoredSettings(settings: IconPreviewSettings): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch {}
+}

package/src/tool/dualOsIconPreview/ui.ts

@@ -0,0 +1,52 @@
+export interface DualOsIconPreviewUI extends Record<string, string> {
+  labelUpload: string;
+  uploadAction: string;
+  uploadHint: string;
+  dropHint: string;
+  labelAppName: string;
+  appNamePlaceholder: string;
+  labelBrandColor: string;
+  labelIosAppearance: string;
+  iosAppearanceHint: string;
+  iosDefault: string;
+  iosDark: string;
+  iosClear: string;
+  iosTinted: string;
+  labelAndroidShape: string;
+  androidShapeHint: string;
+  androidCircle: string;
+  androidSquircle: string;
+  androidRounded: string;
+  androidTeardrop: string;
+  labelAndroidTheme: string;
+  androidThemeHint: string;
+  iosDeviceLabel: string;
+  androidDeviceLabel: string;
+  iosHomeLabel: string;
+  androidHomeLabel: string;
+  safeZoneLabel: string;
+  adaptiveLayerLabel: string;
+  monochromeLabel: string;
+  nameFallback: string;
+  emptyLogo: string;
+  fileError: string;
+  statusReady: string;
+  statusNeedsReview: string;
+  stageKicker: string;
+  stageNote: string;
+  auditTitle: string;
+  auditHint: string;
+  auditWaiting: string;
+  auditNotChecked: string;
+  auditFile: string;
+  auditAspect: string;
+  auditResolution: string;
+  auditIosMask: string;
+  auditAndroidZone: string;
+  auditMargin: string;
+  auditTransparency: string;
+  auditTransparent: string;
+  auditFullBleed: string;
+  statusPass: string;
+  statusReview: string;
+}

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

@@ -153,4 +153,4 @@ export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
     },
   ],
 };
-
+

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

@@ -153,4 +153,4 @@ export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
     },
   ],
 };
-
+

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

@@ -153,4 +153,4 @@ export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
     },
   ],
 };
-
+

package/src/tool/duplicateCssRemover/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { duplicateCssRemover } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await duplicateCssRemover.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { duplicateCssRemover } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await duplicateCssRemover.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

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

@@ -168,4 +168,4 @@ export const content: ToolLocaleContent<GeneradorSecurityTxtUI> = {
     },
   ],
 };
-
+

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

@@ -168,4 +168,4 @@ export const content: ToolLocaleContent<GeneradorSecurityTxtUI> = {
     },
   ],
 };
-
+

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

@@ -168,4 +168,4 @@ export const content: ToolLocaleContent<GeneradorSecurityTxtUI> = {
     },
   ],
 };
-
+

package/src/tool/generadorSecurityTxt/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { generadorSecurityTxt } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await generadorSecurityTxt.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { generadorSecurityTxt } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await generadorSecurityTxt.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

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

@@ -113,4 +113,4 @@ export const content: ToolLocaleContent<HashGeneratorUI> = {
     },
   ],
 };
-
+

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

@@ -113,4 +113,4 @@ export const content: ToolLocaleContent<HashGeneratorUI> = {
     },
   ],
 };
-
+

package/src/tool/hashGenerator/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { hashGenerator } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await hashGenerator.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { hashGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await hashGenerator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

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

@@ -208,4 +208,4 @@ export const content: ToolLocaleContent<InspectorCertificadosSslUI> = {
     },
   ],
 };
-
+

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

@@ -208,4 +208,4 @@ export const content: ToolLocaleContent<InspectorCertificadosSslUI> = {
     },
   ],
 };
-
+

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

@@ -208,4 +208,4 @@ export const content: ToolLocaleContent<InspectorCertificadosSslUI> = {
     },
   ],
 };
-
+

package/src/tool/inspectorCertificadosSsl/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { inspectorCertificadosSsl } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await inspectorCertificadosSsl.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { inspectorCertificadosSsl } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await inspectorCertificadosSsl.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/jsonFormatter/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { jsonFormatter } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await jsonFormatter.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { jsonFormatter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await jsonFormatter.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}