@jjlmoya/utils-developer 1.31.0 → 1.33.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/promoteThisWebsite/i18n/pl.ts

@@ -24,7 +24,7 @@ const localized = {
     ],
     seoTitle: 'Oficjalne biuro propagandy jjlmoya i GameBob',
     seoIntro: 'To nie jest ogólny kompozytor obrazów społecznościowych dla kogoś, kto właśnie odkrył słowo branding. Służy do promowania naszych stron jjlmoya.es i GameBob.dev pod nadzorem kotów.',
-    seoBody: 'Wklej prawdziwy zrzut lub załaduj adres produkcyjny. Narzędzie czyta tytuł strony zamiast zgadywać go ze sluga i zachowuje widoczny obraz Open Graph podczas układania warstw.',
+    seoBody: 'Wklej prawdziwy zrzut lub załaduj adres produkcyjny. Narzędzie czyta tytuł strony zamiast zgadywać go ze sluga i zachowuje widoczny obraz Open Graph podczas układania warstw. Możesz dopasować układ, markę, tło, logo i maskotkę do formatu publikacji, a potem pobrać gotowy PNG bez opuszczania narzędzia.',
     seoTip: 'Zacznij od adresu produkcyjnego jjlmoya.es lub GameBob.dev. Jeśli tytuł, marka lub obraz się nie ładują, zarząd obwini sieć, człowieka, a na końcu koty.',
 };
 const ui: PromoteThisWebsiteUI = {

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

@@ -24,7 +24,7 @@ const localized = {
     ],
     seoTitle: 'Официальный отдел пропаганды jjlmoya и GameBob',
     seoIntro: 'Это не универсальный редактор социальных изображений для человека, который только узнал слово branding. Он нужен для продвижения наших страниц jjlmoya.es и GameBob.dev под наблюдением кошек.',
-    seoBody: 'Вставьте настоящий снимок или загрузите рабочий URL. Инструмент читает заголовок страницы, а не угадывает его по slug, и оставляет официальное изображение Open Graph видимым.',
+    seoBody: 'Вставьте настоящий снимок или загрузите рабочий URL. Инструмент читает заголовок страницы, а не угадывает его по slug, и оставляет официальное изображение Open Graph видимым. Затем настройте композицию, бренд, фон, логотип и маскота под формат публикации и скачайте готовый PNG без выхода из инструмента.',
     seoTip: 'Начните с рабочего URL jjlmoya.es или GameBob.dev. Если заголовок, бренд или изображение не загрузились, совет обвинит сеть, человека и наконец кошек.',
 };
 const ui: PromoteThisWebsiteUI = {

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

@@ -24,7 +24,7 @@ const localized = {
     ],
     seoTitle: 'jjlmoya ve GameBob için resmi propaganda masası',
     seoIntro: 'Bu, branding kelimesini yeni keşfetmiş biri için genel bir sosyal görsel düzenleyici değil. Kediler denetlerken jjlmoya.es ve GameBob.dev sayfalarımızı tanıtmak için var.',
-    seoBody: "Gerçek bir ekran görüntüsü yapıştır veya üretim URL'si yükle. Araç slugdan tahmin etmek yerine sayfa başlığını okur ve kompozisyon sırasında resmi Open Graph görselini görünür tutar.",
+    seoBody: "Gerçek bir ekran görüntüsü yapıştır veya üretim URL'si yükle. Araç slugdan tahmin etmek yerine sayfa başlığını okur ve kompozisyon sırasında resmi Open Graph görselini görünür tutar. Yerleşimi, markayı, arka planı, logoyu ve maskotu paylaşım formatına göre düzenleyip hazır PNG dosyasını araçtan ayrılmadan indirebilirsin.",
     seoTip: 'jjlmoya.es veya GameBob.dev üretim URLsiyle başla. Başlık, marka veya görsel yüklenmezse kurul önce ağı, sonra insanı, en son kedileri suçlar.',
 };
 const ui: PromoteThisWebsiteUI = {

package/src/tools.ts

@@ -29,5 +29,6 @@ import { JWT_DECODER_TOOL } from './tool/jwtDecoder/index';
 import { VISUAL_CSS_GRID_FLEXBOX_GENERATOR_TOOL } from './tool/visualCssGridFlexboxGenerator/index';
 import { CSS_BOX_SHADOW_GENERATOR_TOOL } from './tool/cssBoxShadowGenerator/index';
 import { PROMOTE_THIS_WEBSITE_TOOL } from './tool/promoteThisWebsite/index';
+import { DUAL_OS_ICON_PREVIEW_TOOL } from './tool/dualOsIconPreview/index';
 
-export const ALL_TOOLS: ToolDefinition[] = [JSON_FORMATTER_TOOL, SVG_TO_CSS_TOOL, ASPECT_RATIO_TOOL, PLACEHOLDER_GENERATOR_TOOL, URL_ENCODER_DECODER_TOOL, DUPLICATE_CSS_REMOVER_TOOL, CSS_TO_INLINE_CONVERTER_TOOL, CSS_SPECIFICITY_CALCULATOR_TOOL, CRON_GENERATOR_TOOL, KEYCODE_TOOL, LLM_COST_CALCULATOR_TOOL, MUSICAL_TYPOGRAPHY_TOOL, MOBILE_MOCKUP_GENERATOR_TOOL, HASH_GENERATOR_TOOL, PROMPT_LIBRARY_TOOL, COLOR_CONVERTER_TOOL, READABILITY_CALCULATOR_TOOL, SVG_SANITIZER_TOOL, UTM_GENERATOR_TOOL, URL_CLEANER_TOOL, INSPECTOR_CERTIFICADOS_SSL_TOOL, GENERADOR_SECURITY_TXT_TOOL, CALCULADORA_TIEMPO_DATOS_TOOL, CONVERSOR_EXCEL_CSV_HTML_TOOL, SERP_PIXEL_SIMULATOR_TOOL, JWT_DECODER_TOOL, VISUAL_CSS_GRID_FLEXBOX_GENERATOR_TOOL, CSS_BOX_SHADOW_GENERATOR_TOOL, PROMOTE_THIS_WEBSITE_TOOL];
+export const ALL_TOOLS: ToolDefinition[] = [JSON_FORMATTER_TOOL, SVG_TO_CSS_TOOL, ASPECT_RATIO_TOOL, PLACEHOLDER_GENERATOR_TOOL, URL_ENCODER_DECODER_TOOL, DUPLICATE_CSS_REMOVER_TOOL, CSS_TO_INLINE_CONVERTER_TOOL, CSS_SPECIFICITY_CALCULATOR_TOOL, CRON_GENERATOR_TOOL, KEYCODE_TOOL, LLM_COST_CALCULATOR_TOOL, MUSICAL_TYPOGRAPHY_TOOL, MOBILE_MOCKUP_GENERATOR_TOOL, HASH_GENERATOR_TOOL, PROMPT_LIBRARY_TOOL, COLOR_CONVERTER_TOOL, READABILITY_CALCULATOR_TOOL, SVG_SANITIZER_TOOL, UTM_GENERATOR_TOOL, URL_CLEANER_TOOL, INSPECTOR_CERTIFICADOS_SSL_TOOL, GENERADOR_SECURITY_TXT_TOOL, CALCULADORA_TIEMPO_DATOS_TOOL, CONVERSOR_EXCEL_CSV_HTML_TOOL, SERP_PIXEL_SIMULATOR_TOOL, JWT_DECODER_TOOL, VISUAL_CSS_GRID_FLEXBOX_GENERATOR_TOOL, CSS_BOX_SHADOW_GENERATOR_TOOL, PROMOTE_THIS_WEBSITE_TOOL, DUAL_OS_ICON_PREVIEW_TOOL];