@jjlmoya/utils-games-development 1.54.0 → 1.56.0

package/src/tool/retroSfxGenerator/logic.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import {
+  calculateEndFrequency,
+  createDefaultParams,
+  encodeWav,
+  generateSfx,
+  getPresetParams,
+  updateSweep,
+  type SfxPreset,
+  type SfxWaveform,
+} from './logic';
+
+describe('retroSfxGenerator logic', () => {
+  it('creates deterministic preset parameters when random is injected', () => {
+    const first = getPresetParams('coin', () => 0.5);
+    const second = getPresetParams('coin', () => 0.5);
+    expect(first).toEqual(second);
+    expect(first.frequencyEnd).toBe(calculateEndFrequency(first.frequency, first.sweep));
+  });
+
+  it('keeps random variations inside the selected preset family', () => {
+    const families: Array<[SfxPreset, SfxWaveform]> = [
+      ['explosion', 'noise'],
+      ['laser', 'sawtooth'],
+      ['jump', 'square'],
+      ['coin', 'square'],
+      ['powerUp', 'triangle'],
+    ];
+
+    families.forEach(([preset, waveform]) => {
+      expect(getPresetParams(preset, () => 0.25).waveform).toBe(waveform);
+    });
+  });
+
+  it('uses the visible explosion preset as the default family', () => {
+    expect(createDefaultParams().waveform).toBe('noise');
+  });
+
+  it('maps sweep to a bounded end frequency', () => {
+    expect(calculateEndFrequency(440, -1)).toBeGreaterThanOrEqual(40);
+    expect(calculateEndFrequency(440, 1)).toBeLessThanOrEqual(12000);
+    expect(updateSweep(getPresetParams('laser', () => 0.5), 0.25).frequencyEnd).toBeGreaterThan(440);
+  });
+
+  it('generates samples within the PCM range and expected duration', () => {
+    const params = getPresetParams('explosion', () => 0.5);
+    const generated = generateSfx(params, 8000);
+    expect(generated.samples.length).toBeGreaterThan(0);
+    expect(generated.duration).toBeCloseTo(params.duration, 2);
+    expect(Math.max(...generated.samples)).toBeLessThanOrEqual(1);
+    expect(Math.min(...generated.samples)).toBeGreaterThanOrEqual(-1);
+  });
+
+  it('encodes a mono 16-bit WAV with a valid RIFF header', () => {
+    const wav = encodeWav(new Float32Array([0, 0.5, -0.5, 0]), 44100);
+    expect(wav.length).toBe(52);
+    expect(String.fromCharCode(...wav.slice(0, 4))).toBe('RIFF');
+    expect(String.fromCharCode(...wav.slice(8, 12))).toBe('WAVE');
+    expect(new DataView(wav.buffer).getUint32(40, true)).toBe(8);
+  });
+});

package/src/tool/retroSfxGenerator/logic.ts

@@ -0,0 +1,214 @@
+export type SfxWaveform = 'square' | 'sawtooth' | 'sine' | 'triangle' | 'noise';
+
+export type SfxPreset = 'explosion' | 'laser' | 'jump' | 'coin' | 'powerUp';
+
+export interface SfxParams {
+  waveform: SfxWaveform;
+  frequency: number;
+  frequencyEnd: number;
+  duration: number;
+  decay: number;
+  sweep: number;
+  vibrato: number;
+  lowpass: number;
+  highpass: number;
+  noiseMix: number;
+}
+
+export interface GeneratedSfx {
+  samples: Float32Array;
+  sampleRate: number;
+  duration: number;
+}
+
+export const MIN_SAMPLE_RATE = 8000;
+export const DEFAULT_SAMPLE_RATE = 44100;
+
+const PRESET_RANGES: Record<SfxPreset, Omit<SfxParams, 'frequencyEnd'>> = {
+  explosion: {
+    waveform: 'noise',
+    frequency: 180,
+    duration: 0.65,
+    decay: 0.84,
+    sweep: -0.55,
+    vibrato: 0.08,
+    lowpass: 3600,
+    highpass: 70,
+    noiseMix: 0.9,
+  },
+  laser: {
+    waveform: 'sawtooth',
+    frequency: 1200,
+    duration: 0.32,
+    decay: 0.56,
+    sweep: -0.7,
+    vibrato: 0.03,
+    lowpass: 9000,
+    highpass: 180,
+    noiseMix: 0.04,
+  },
+  jump: {
+    waveform: 'square',
+    frequency: 260,
+    duration: 0.42,
+    decay: 0.35,
+    sweep: 0.75,
+    vibrato: 0.06,
+    lowpass: 7600,
+    highpass: 100,
+    noiseMix: 0.02,
+  },
+  coin: {
+    waveform: 'square',
+    frequency: 880,
+    duration: 0.24,
+    decay: 0.44,
+    sweep: 0.28,
+    vibrato: 0.02,
+    lowpass: 11000,
+    highpass: 140,
+    noiseMix: 0,
+  },
+  powerUp: {
+    waveform: 'triangle',
+    frequency: 330,
+    duration: 0.78,
+    decay: 0.24,
+    sweep: 0.82,
+    vibrato: 0.11,
+    lowpass: 10000,
+    highpass: 90,
+    noiseMix: 0.01,
+  },
+};
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function createDefaultParams(): SfxParams {
+  return getPresetParams('explosion', () => 0.5);
+}
+
+export function getPresetParams(preset: SfxPreset, random: () => number = Math.random): SfxParams {
+  const base = PRESET_RANGES[preset];
+  const frequencyJitter = 1 + (random() - 0.5) * 0.18;
+  const durationJitter = 1 + (random() - 0.5) * 0.12;
+  const sweepJitter = (random() - 0.5) * 0.16;
+  const frequency = clamp(base.frequency * frequencyJitter, 60, 8000);
+  const duration = clamp(base.duration * durationJitter, 0.08, 2.5);
+  const sweep = clamp(base.sweep + sweepJitter, -1, 1);
+
+  return {
+    ...base,
+    frequency,
+    frequencyEnd: calculateEndFrequency(frequency, sweep),
+    duration,
+    sweep,
+  };
+}
+
+export function calculateEndFrequency(frequency: number, sweep: number): number {
+  const normalizedSweep = clamp(sweep, -1, 1);
+  const ratio = normalizedSweep >= 0
+    ? 1 + normalizedSweep * 11
+    : 1 / (1 + Math.abs(normalizedSweep) * 11);
+  return clamp(frequency * ratio, 40, 12000);
+}
+
+export function updateSweep(params: SfxParams, sweep: number): SfxParams {
+  const safeSweep = clamp(sweep, -1, 1);
+  return { ...params, sweep: safeSweep, frequencyEnd: calculateEndFrequency(params.frequency, safeSweep) };
+}
+
+function seededNoise(index: number): number {
+  const value = Math.sin((index + 1) * 12.9898) * 43758.5453;
+  return (value - Math.floor(value)) * 2 - 1;
+}
+
+function waveformSample(waveform: SfxWaveform, phase: number, index: number): number {
+  const cycle = phase - Math.floor(phase);
+  if (waveform === 'square') return cycle < 0.5 ? 1 : -1;
+  if (waveform === 'sawtooth') return cycle * 2 - 1;
+  if (waveform === 'triangle') return 1 - 4 * Math.abs(Math.round(cycle) - cycle);
+  if (waveform === 'noise') return seededNoise(index);
+  return Math.sin(cycle * Math.PI * 2);
+}
+
+function filterAlpha(cutoff: number, sampleRate: number): number {
+  const safeCutoff = clamp(cutoff, 1, sampleRate * 0.45);
+  return 1 - Math.exp((-2 * Math.PI * safeCutoff) / sampleRate);
+}
+
+export function generateSfx(params: SfxParams, sampleRate = DEFAULT_SAMPLE_RATE): GeneratedSfx {
+  const safeSampleRate = Math.max(MIN_SAMPLE_RATE, Math.round(sampleRate));
+  const duration = clamp(params.duration, 0.04, 4);
+  const frameCount = Math.max(1, Math.round(duration * safeSampleRate));
+  const samples = new Float32Array(frameCount);
+  const lowAlpha = filterAlpha(params.lowpass, safeSampleRate);
+  const highAlpha = filterAlpha(params.highpass, safeSampleRate);
+  const noiseMix = clamp(params.noiseMix, 0, 1);
+  const vibrato = clamp(params.vibrato, 0, 1);
+  let phase = 0;
+  let lowState = 0;
+  let highState = 0;
+
+  for (let index = 0; index < frameCount; index += 1) {
+    const progress = frameCount === 1 ? 1 : index / (frameCount - 1);
+    const frequency = Math.max(20, params.frequency + (params.frequencyEnd - params.frequency) * progress);
+    const vibratoFactor = 1 + Math.sin(progress * Math.PI * 2 * 7) * vibrato * 0.08;
+    phase += (frequency * vibratoFactor) / safeSampleRate;
+    const tone = waveformSample(params.waveform, phase, index);
+    const noise = seededNoise(index + 1987);
+    const mixed = tone * (1 - noiseMix) + noise * noiseMix;
+    lowState += lowAlpha * (mixed - lowState);
+    highState += highAlpha * (mixed - highState);
+    const filtered = lowState * 0.7 + (mixed - highState) * 0.3;
+    const attack = Math.min(1, progress / 0.025);
+    const decayPower = 0.35 + clamp(params.decay, 0, 1) * 4;
+    const envelope = attack * Math.pow(1 - progress, decayPower);
+    samples[index] = clamp(filtered * envelope * 0.92, -1, 1);
+  }
+
+  return { samples, sampleRate: safeSampleRate, duration: frameCount / safeSampleRate };
+}
+
+export function encodeWav(samples: Float32Array, sampleRate: number): Uint8Array {
+  const safeSampleRate = Math.max(MIN_SAMPLE_RATE, Math.round(sampleRate));
+  const dataSize = samples.length * 2;
+  const buffer = new Uint8Array(44 + dataSize);
+  const view = new DataView(buffer.buffer);
+  const writeText = (offset: number, value: string): void => {
+    for (let index = 0; index < value.length; index += 1) buffer[offset + index] = value.charCodeAt(index);
+  };
+
+  writeText(0, 'RIFF');
+  view.setUint32(4, 36 + dataSize, true);
+  writeText(8, 'WAVE');
+  writeText(12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, 1, true);
+  view.setUint32(24, safeSampleRate, true);
+  view.setUint32(28, safeSampleRate * 2, true);
+  view.setUint16(32, 2, true);
+  view.setUint16(34, 16, true);
+  writeText(36, 'data');
+  view.setUint32(40, dataSize, true);
+
+  for (let index = 0; index < samples.length; index += 1) {
+    const sample = clamp(samples[index] ?? 0, -1, 1);
+    view.setInt16(44 + index * 2, Math.round(sample < 0 ? sample * 0x8000 : sample * 0x7fff), true);
+  }
+
+  return buffer;
+}
+
+export function formatFrequency(value: number): string {
+  if (value >= 1000) return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)} kHz`;
+  return `${Math.round(value)} Hz`;
+}
+
+export function formatDuration(value: number): string {
+  return `${value.toFixed(2)} s`;
+}

package/src/tool/retroSfxGenerator/retro-sfx-generator.css

@@ -0,0 +1,435 @@
+.rsfx-app {
+  --rsfx-ink: #282747;
+  --rsfx-ink-strong: #211d3d;
+  --rsfx-muted: #625d78;
+  --rsfx-line: #756983;
+  --rsfx-panel: #fff7de;
+  --rsfx-panel-alt: #f2e4bd;
+  --rsfx-page: #fffaf0;
+  --rsfx-cyan: #315ccf;
+  --rsfx-teal: #087f72;
+  --rsfx-orange: #d35332;
+  --rsfx-yellow: #f2c14e;
+  --rsfx-pink: #b0306a;
+  --rsfx-cream: #fff8df;
+  --rsfx-on-accent: #fff8df;
+  --rsfx-play-bg: #bc4d30;
+  --rsfx-download-ink: #211d3d;
+  --rsfx-shadow: #33294d;
+  --rsfx-scope-panel: #f2c14e;
+  --rsfx-scope-screen: #fff3c4;
+  --rsfx-scope-ink: #282747;
+  --rsfx-scope-muted: #514971;
+  --rsfx-scope-accent: #b0306a;
+  --rsfx-scope-grid: rgba(49, 92, 207, 0.2);
+  --rsfx-waveform: #b0306a;
+  --rsfx-waveform-glow: rgba(176, 48, 106, 0.42);
+
+  background:
+    linear-gradient(rgba(49, 92, 207, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(49, 92, 207, 0.035) 1px, transparent 1px),
+    var(--rsfx-page);
+  background-size: 1rem 1rem;
+  border: 3px solid var(--rsfx-ink-strong);
+  box-shadow: 6px 6px 0 var(--rsfx-shadow);
+  color: var(--rsfx-ink);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: clamp(1rem, 3vw, 2rem);
+}
+
+.theme-dark .rsfx-app {
+  --rsfx-ink: #f7edcf;
+  --rsfx-ink-strong: #fff5d8;
+  --rsfx-muted: #c8b8c4;
+  --rsfx-line: #75627b;
+  --rsfx-panel: #292443;
+  --rsfx-panel-alt: #352d53;
+  --rsfx-page: #19162d;
+  --rsfx-cyan: #6bd5e4;
+  --rsfx-teal: #72f2c8;
+  --rsfx-orange: #ff805c;
+  --rsfx-yellow: #f2c14e;
+  --rsfx-pink: #f477a8;
+  --rsfx-cream: #fff8df;
+  --rsfx-on-accent: #101b32;
+  --rsfx-play-bg: #ff805c;
+  --rsfx-download-ink: #101b32;
+  --rsfx-shadow: #080714;
+  --rsfx-scope-panel: #302555;
+  --rsfx-scope-screen: #101b32;
+  --rsfx-scope-ink: #f7edcf;
+  --rsfx-scope-muted: #b6a8bd;
+  --rsfx-scope-accent: #72f2c8;
+  --rsfx-scope-grid: rgba(114, 242, 200, 0.16);
+  --rsfx-waveform: #72f2c8;
+  --rsfx-waveform-glow: rgba(114, 242, 200, 0.75);
+
+  background:
+    linear-gradient(rgba(107, 213, 228, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 213, 228, 0.035) 1px, transparent 1px),
+    var(--rsfx-page);
+}
+
+.rsfx-scope-panel {
+  background: var(--rsfx-scope-panel);
+  border: 3px solid var(--rsfx-ink-strong);
+  box-shadow: 4px 4px 0 var(--rsfx-shadow);
+  color: var(--rsfx-scope-ink);
+  padding: 1rem;
+}
+
+.rsfx-scope-topline,
+.rsfx-scope-footer {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.rsfx-scope-topline {
+  min-height: 2rem;
+}
+
+.rsfx-kicker,
+.rsfx-section-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.rsfx-kicker {
+  color: var(--rsfx-scope-accent);
+}
+
+.rsfx-section-label::before {
+  color: var(--rsfx-orange);
+  content: '> ';
+}
+
+.rsfx-scope-readout {
+  color: var(--rsfx-scope-muted);
+  font: 0.76rem ui-monospace, monospace;
+  margin-left: 0.75rem;
+}
+
+.rsfx-scope-led {
+  background: var(--rsfx-scope-muted);
+  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.22);
+  height: 0.65rem;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+  width: 0.65rem;
+}
+
+.rsfx-scope-led.is-on {
+  background: var(--rsfx-scope-accent);
+  box-shadow: 0 0 0.8rem 0.2rem var(--rsfx-waveform-glow);
+}
+
+.rsfx-scope-screen {
+  background: var(--rsfx-scope-screen);
+  border: 2px solid var(--rsfx-scope-accent);
+  margin: 0.6rem 0;
+  min-height: 13rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.rsfx-waveform,
+.rsfx-scope-grid {
+  display: block;
+  height: 13rem;
+  width: 100%;
+}
+
+.rsfx-scope-grid {
+  background-image: linear-gradient(var(--rsfx-scope-grid) 1px, transparent 1px), linear-gradient(90deg, var(--rsfx-scope-grid) 1px, transparent 1px);
+  background-size: 12.5% 25%;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.rsfx-scope-footer {
+  color: var(--rsfx-scope-muted);
+  flex-wrap: wrap;
+  font: 0.75rem ui-monospace, monospace;
+}
+
+.rsfx-preset-strip,
+.rsfx-control-section {
+  background: var(--rsfx-panel);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  padding: 1rem;
+}
+
+.rsfx-preset-strip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.rsfx-preset-grid {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.rsfx-preset,
+.rsfx-text-action,
+.rsfx-action,
+.rsfx-select {
+  font: inherit;
+}
+
+.rsfx-preset {
+  align-items: center;
+  background: var(--rsfx-panel-alt);
+  border: 2px solid var(--rsfx-line);
+  color: var(--rsfx-ink);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  justify-content: center;
+  min-height: 4.4rem;
+  padding: 0.5rem;
+  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.rsfx-preset:hover,
+.rsfx-preset:focus-visible {
+  border-color: var(--rsfx-cyan);
+  box-shadow: 3px 3px 0 var(--rsfx-cyan);
+  transform: translate(-1px, -1px);
+}
+
+.rsfx-preset.is-active {
+  background: var(--rsfx-cyan);
+  border-color: var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-on-accent);
+}
+
+.rsfx-preset-glyph {
+  color: var(--rsfx-orange);
+  font-size: 1.35rem;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.rsfx-preset.is-active .rsfx-preset-glyph {
+  color: var(--rsfx-yellow);
+}
+
+.rsfx-preset span:last-child {
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.rsfx-hint {
+  color: var(--rsfx-muted);
+  font-size: 0.8rem;
+  margin: 0;
+}
+
+.rsfx-control-board {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.rsfx-control-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.rsfx-waveform-picker {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: 1fr;
+}
+
+.rsfx-control-label,
+.rsfx-slider-control > span {
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.rsfx-select {
+  appearance: none;
+  background: var(--rsfx-panel-alt);
+  border: 2px solid var(--rsfx-line);
+  color: var(--rsfx-ink);
+  cursor: pointer;
+  min-height: 2.35rem;
+  padding: 0.45rem 0.7rem;
+  width: 100%;
+}
+
+.rsfx-slider-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.rsfx-slider-control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.rsfx-slider-control > span {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.rsfx-slider-control output {
+  color: var(--rsfx-cyan);
+  font: 900 0.75rem ui-monospace, monospace;
+}
+
+.rsfx-slider-control input {
+  accent-color: var(--rsfx-orange);
+  cursor: pointer;
+  width: 100%;
+}
+
+.rsfx-slider-control input::-webkit-slider-runnable-track {
+  background: var(--rsfx-line);
+  border: 1px solid var(--rsfx-ink);
+  height: 0.55rem;
+}
+
+.rsfx-slider-control input::-webkit-slider-thumb {
+  appearance: none;
+  background: var(--rsfx-orange);
+  border: 2px solid var(--rsfx-ink-strong);
+  height: 1.15rem;
+  margin-top: -0.35rem;
+  width: 0.8rem;
+}
+
+.rsfx-slider-control input::-moz-range-track {
+  background: var(--rsfx-line);
+  border: 1px solid var(--rsfx-ink);
+  height: 0.55rem;
+}
+
+.rsfx-slider-control input::-moz-range-thumb {
+  background: var(--rsfx-orange);
+  border: 2px solid var(--rsfx-ink-strong);
+  border-radius: 0;
+  height: 1.15rem;
+  width: 0.8rem;
+}
+
+.rsfx-action-bar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.rsfx-primary-actions,
+.rsfx-secondary-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+.rsfx-action,
+.rsfx-text-action {
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 900;
+  min-height: 2.55rem;
+  padding: 0.65rem 1rem;
+  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
+}
+
+.rsfx-action:hover,
+.rsfx-text-action:hover {
+  filter: brightness(1.08);
+  transform: translate(-1px, -1px);
+}
+
+.rsfx-action-play {
+  background: var(--rsfx-play-bg);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-on-accent);
+}
+
+.rsfx-action-stop {
+  background: var(--rsfx-panel);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-ink);
+}
+
+.rsfx-action-download {
+  background: var(--rsfx-yellow);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-download-ink);
+}
+
+.rsfx-text-action {
+  background: transparent;
+  border: 2px solid transparent;
+  color: var(--rsfx-cyan);
+}
+
+.rsfx-status {
+  border-top: 2px solid var(--rsfx-line);
+  color: var(--rsfx-muted);
+  font: 0.75rem ui-monospace, monospace;
+  margin: 0;
+  padding-top: 0.85rem;
+}
+
+.rsfx-app button:focus-visible,
+.rsfx-app select:focus-visible,
+.rsfx-app input:focus-visible {
+  outline: 3px solid var(--rsfx-yellow);
+  outline-offset: 2px;
+}
+
+@media (max-width: 820px) {
+  .rsfx-control-board {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .rsfx-preset-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .rsfx-preset:last-child {
+    grid-column: span 2;
+  }
+
+  .rsfx-scope-footer span:last-child {
+    width: 100%;
+  }
+
+  .rsfx-action-bar,
+  .rsfx-primary-actions,
+  .rsfx-secondary-actions {
+    width: 100%;
+  }
+
+  .rsfx-action,
+  .rsfx-text-action {
+    flex: 1;
+  }
+}

package/src/tool/retroSfxGenerator/seo.astro

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