@jjlmoya/utils-developer 1.15.0 → 1.16.0

package/src/tool/serpPixelSimulator/serp-pixel-simulator.css

@@ -0,0 +1,335 @@
+.sps-root {
+  --sps-ink: #1f2937;
+  --sps-muted: #64748b;
+  --sps-line: #d9e2ec;
+  --sps-panel: #fff;
+  --sps-soft: #f6f8fb;
+  --sps-ok: #16875d;
+  --sps-warn: #d93025;
+
+  color: var(--sps-ink);
+}
+
+.theme-dark .sps-root {
+  --sps-ink: #e5edf7;
+  --sps-muted: #a8b5c6;
+  --sps-line: #2c3a4e;
+  --sps-panel: #111827;
+  --sps-soft: #0b1120;
+}
+
+.sps-shell {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.sps-card {
+  border: 1px solid var(--sps-line);
+  border-radius: 8px;
+  background: var(--sps-panel);
+  padding: 24px;
+}
+
+.sps-panel,
+.sps-preview-wrap {
+  min-width: 0;
+}
+
+.sps-field {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+.sps-label,
+.sps-device-label,
+.sps-meter-top {
+  font-size: 0.86rem;
+  font-weight: 700;
+  color: #334155;
+}
+
+.sps-input,
+.sps-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 10px 12px;
+  font-size: 15px;
+  line-height: 1.45;
+  color: #172033;
+  background: #fff;
+}
+
+.sps-url-control {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.sps-url-input {
+  min-width: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.sps-fetch-button {
+  flex: 0 0 auto;
+  border: 1px solid #cbd5e1;
+  border-left: 0;
+  border-radius: 0 6px 6px 0;
+  padding: 0 14px;
+  background: #174ea6;
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.sps-fetch-button:disabled {
+  cursor: progress;
+  opacity: 0.72;
+}
+
+.sps-fetch-message {
+  min-height: 1.2em;
+  margin: 0;
+  color: var(--sps-muted);
+  font-size: 0.82rem;
+  line-height: 1.4;
+}
+
+.sps-fetch-message[data-tone='success'] {
+  color: var(--sps-ok);
+  font-weight: 700;
+}
+
+.sps-fetch-message[data-tone='error'] {
+  color: var(--sps-warn);
+  font-weight: 700;
+}
+
+.theme-dark .sps-input,
+.theme-dark .sps-textarea,
+.theme-dark .sps-segment button {
+  border-color: #334155;
+  background: #0f172a;
+  color: #e5edf7;
+}
+
+.theme-dark .sps-fetch-button {
+  border-color: #334155;
+  background: #2563eb;
+}
+
+.theme-dark .sps-label,
+.theme-dark .sps-device-label,
+.theme-dark .sps-meter-top,
+.theme-dark .sps-preview-title {
+  color: #d6e1f0;
+}
+
+.sps-textarea {
+  min-height: 108px;
+  resize: vertical;
+}
+
+.sps-device {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.sps-segment {
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  overflow: hidden;
+}
+
+.sps-segment button {
+  border: 0;
+  border-right: 1px solid #cbd5e1;
+  background: #fff;
+  color: #334155;
+  padding: 8px 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.sps-segment button:last-child {
+  border-right: 0;
+}
+
+.sps-segment button[aria-pressed='true'] {
+  background: #e8f0fe;
+  color: #174ea6;
+}
+
+.theme-dark .sps-segment button[aria-pressed='true'] {
+  background: #1e3a5f;
+  color: #bfdbfe;
+}
+
+.sps-meter {
+  display: grid;
+  gap: 7px;
+  margin-top: 14px;
+}
+
+.sps-meter-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.sps-track {
+  height: 10px;
+  border-radius: 999px;
+  background: #e5eaf1;
+  overflow: hidden;
+}
+
+.sps-fill {
+  display: block;
+  width: 0%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--sps-ok);
+  transition: width 120ms ease, background-color 120ms ease;
+}
+
+.sps-meter.sps-over .sps-fill {
+  background: var(--sps-warn);
+}
+
+.sps-meter-status {
+  font-size: 0.82rem;
+  color: var(--sps-muted);
+}
+
+.sps-meter.sps-over .sps-meter-status {
+  color: var(--sps-warn);
+  font-weight: 700;
+}
+
+.sps-preview-wrap {
+  border-left: 1px solid var(--sps-line);
+  background: var(--sps-soft);
+  border-radius: 8px;
+  padding: 24px;
+}
+
+.sps-preview-title {
+  margin: 0 0 14px;
+  color: #334155;
+  font-size: 0.92rem;
+}
+
+.sps-serp {
+  width: min(100%, 652px);
+  border-radius: 8px;
+  background: #fff;
+  padding: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+  box-shadow: 0 1px 2px rgb(60, 64, 67, 0.14), 0 1px 3px 1px rgb(60, 64, 67, 0.08);
+}
+
+.theme-dark .sps-serp {
+  background: #f8fafc;
+}
+
+.sps-serp.sps-mobile {
+  max-width: 390px;
+}
+
+.sps-url-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  margin-bottom: 6px;
+}
+
+.sps-favicon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #edf2f7;
+  color: #5f6368;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.sps-favicon-image {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #edf2f7;
+  object-fit: contain;
+}
+
+.sps-hidden {
+  display: none;
+}
+
+.sps-url-text {
+  min-width: 0;
+  color: #202124;
+  font-size: 14px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sps-serp-title {
+  margin: 0 0 4px;
+  color: #1a0dab;
+  font-size: 20px;
+  line-height: 1.3;
+  font-weight: 400;
+}
+
+.sps-description {
+  margin: 0;
+  color: #4d5156;
+  font-size: 14px;
+  line-height: 1.58;
+}
+
+.sps-measure {
+  position: fixed;
+  inset: auto auto -9999px -9999px;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+@media (max-width: 780px) {
+  .sps-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sps-card {
+    padding: 16px;
+  }
+
+  .sps-preview-wrap {
+    border-left: 0;
+    border-top: 1px solid var(--sps-line);
+    padding: 18px 0 0;
+    background: transparent;
+  }
+}

package/src/tool/serpPixelSimulator/ui.ts

@@ -0,0 +1,33 @@
+export interface SerpPixelSimulatorUI extends Record<string, string> {
+  titleLabel: string;
+  titlePlaceholder: string;
+  urlLabel: string;
+  urlPlaceholder: string;
+  descriptionLabel: string;
+  descriptionPlaceholder: string;
+  deviceLabel: string;
+  desktopLabel: string;
+  mobileLabel: string;
+  titlePixelsLabel: string;
+  descriptionPixelsLabel: string;
+  charactersLabel: string;
+  previewLabel: string;
+  tooLongLabel: string;
+  goodLabel: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  defaultTitle: string;
+  defaultUrl: string;
+  defaultDescription: string;
+  fallbackUrl: string;
+  fallbackFaviconText: string;
+  pixelUnit: string;
+  ellipsis: string;
+  fetchButtonLabel: string;
+  fetchLoadingLabel: string;
+  fetchSuccessLabel: string;
+  fetchCorsError: string;
+  fetchInvalidUrlError: string;
+  fetchNoMetadataError: string;
+  fetchGenericError: string;
+}

package/src/tools.ts

@@ -24,6 +24,6 @@ import { INSPECTOR_CERTIFICADOS_SSL_TOOL } from './tool/inspectorCertificadosSsl
 import { GENERADOR_SECURITY_TXT_TOOL } from './tool/generadorSecurityTxt/index';
 import { CALCULADORA_TIEMPO_DATOS_TOOL } from './tool/calculadoraTiempoDatos/index';
 import { CONVERSOR_EXCEL_CSV_HTML_TOOL } from './tool/conversorExcelCsvHtml/index';
+import { SERP_PIXEL_SIMULATOR_TOOL } from './tool/serpPixelSimulator/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];
-
+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];