@jjlmoya/utils-creative 1.2.0

package/src/tool/dice-roller/style.css

@@ -0,0 +1,482 @@
+.dr-root {
+  --dr-bg: #fff;
+  --dr-bg-muted: #f8fafc;
+  --dr-bg-card: #fff;
+  --dr-text: #0f172a;
+  --dr-text-muted: #64748b;
+  --dr-border: #e2e8f0;
+  --dr-primary: #7c3aed;
+  --dr-primary-light: #ede9fe;
+  --dr-primary-dark: #5b21b6;
+  --dr-accent: #f59e0b;
+  --dr-danger: #ef4444;
+  --dr-success: #10b981;
+  --dr-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+  --dr-shadow-md: 0 4px 16px rgba(0,0,0,0.1);
+  --dr-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
+  --dr-radius: 1rem;
+  --dr-radius-sm: 0.5rem;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.theme-dark .dr-root {
+  --dr-bg: #0f172a;
+  --dr-bg-muted: #1e293b;
+  --dr-bg-card: #1e293b;
+  --dr-text: #f1f5f9;
+  --dr-text-muted: #94a3b8;
+  --dr-border: #334155;
+  --dr-primary: #a78bfa;
+  --dr-primary-light: #2d1b69;
+  --dr-primary-dark: #7c3aed;
+  --dr-accent: #fbbf24;
+  --dr-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --dr-shadow-md: 0 4px 16px rgba(0,0,0,0.4);
+  --dr-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
+}
+
+@media (max-width: 680px) {
+  .dr-root {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── panel izquierdo ── */
+.dr-panel {
+  background: var(--dr-bg-card);
+  border: 1px solid var(--dr-border);
+  border-radius: var(--dr-radius);
+  box-shadow: var(--dr-shadow-md);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.dr-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--dr-text-muted);
+  margin: 0 0 0.625rem;
+}
+
+/* ── cuadrícula de dados ── */
+.dr-dice-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+}
+
+.dr-die-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 0.5rem;
+  background: var(--dr-bg-muted);
+  border: 1px solid var(--dr-border);
+  border-radius: var(--dr-radius-sm);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, transform 0.1s;
+  color: var(--dr-primary);
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.dr-die-btn:hover {
+  background: var(--dr-primary-light);
+  border-color: var(--dr-primary);
+  transform: translateY(-2px);
+}
+
+.dr-die-btn:active {
+  transform: translateY(0);
+}
+
+/* ── bolsa ── */
+.dr-pool-section {
+  border: 1px solid var(--dr-border);
+  border-radius: var(--dr-radius-sm);
+  padding: 0.875rem;
+  background: var(--dr-bg-muted);
+}
+
+.dr-pool-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.dr-pool-header .dr-label {
+  margin-bottom: 0;
+}
+
+.dr-clear-btn {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--dr-text-muted);
+  background: none;
+  border: 1px solid var(--dr-border);
+  border-radius: 0.375rem;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.dr-clear-btn:hover {
+  color: var(--dr-danger);
+  border-color: var(--dr-danger);
+}
+
+.dr-pool-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  align-items: center;
+}
+
+.dr-pool-empty {
+  font-size: 0.8rem;
+  color: var(--dr-text-muted);
+  font-style: italic;
+}
+
+.dr-pool-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: var(--dr-primary-light);
+  border: 1px solid var(--dr-primary);
+  border-radius: 2rem;
+  padding: 0.2rem 0.5rem 0.2rem 0.75rem;
+}
+
+.dr-chip-label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--dr-primary);
+}
+
+.dr-chip-remove {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  border: none;
+  background: var(--dr-primary);
+  color: #fff;
+  font-size: 0.8rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+  padding: 0;
+}
+
+.dr-chip-remove:hover {
+  background: var(--dr-primary-dark);
+}
+
+/* ── modificador ── */
+.dr-modifier-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dr-modifier-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--dr-bg-muted);
+  border: 1px solid var(--dr-border);
+  border-radius: 2rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.dr-mod-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  border: 1px solid var(--dr-border);
+  background: var(--dr-bg-card);
+  color: var(--dr-text);
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+  line-height: 1;
+  padding: 0;
+}
+
+.dr-mod-btn:hover {
+  background: var(--dr-primary-light);
+  border-color: var(--dr-primary);
+}
+
+.dr-modifier-display {
+  min-width: 2rem;
+  text-align: center;
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--dr-text);
+}
+
+/* ── botón lanzar ── */
+.dr-roll-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.875rem;
+  background: linear-gradient(135deg, var(--dr-primary), var(--dr-primary-dark));
+  color: #fff;
+  border: none;
+  border-radius: var(--dr-radius-sm);
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
+  margin-top: auto;
+}
+
+.dr-roll-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.dr-roll-btn:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
+}
+
+.dr-roll-btn:not(:disabled):active {
+  transform: translateY(0);
+}
+
+@keyframes dr-shake {
+  0%, 100% { transform: rotate(0deg); }
+  20% { transform: rotate(-15deg); }
+  40% { transform: rotate(15deg); }
+  60% { transform: rotate(-10deg); }
+  80% { transform: rotate(10deg); }
+}
+
+.dr-rolling {
+  animation: dr-shake 0.4s ease-in-out;
+}
+
+/* ── panel de resultados ── */
+.dr-results-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.dr-result-card {
+  background: var(--dr-bg-card);
+  border: 1px solid var(--dr-border);
+  border-radius: var(--dr-radius);
+  box-shadow: var(--dr-shadow-md);
+  padding: 1.5rem;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dr-result-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--dr-text-muted);
+}
+
+.dr-result-empty p {
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.dr-result-content {
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.dr-total-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.dr-total-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--dr-text-muted);
+}
+
+.dr-total-val {
+  font-size: 4rem;
+  font-weight: 900;
+  color: var(--dr-primary);
+  line-height: 1;
+}
+
+.dr-roll-expr {
+  font-size: 0.8rem;
+  color: var(--dr-text-muted);
+  font-style: italic;
+}
+
+.dr-dice-results {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.dr-result-pip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--dr-bg-muted);
+  border: 2px solid var(--dr-border);
+  border-radius: var(--dr-radius-sm);
+  min-width: 3rem;
+  transition: border-color 0.2s;
+}
+
+.dr-pip-max {
+  border-color: var(--dr-success);
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.dr-pip-min {
+  border-color: var(--dr-danger);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.dr-pip-val {
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--dr-text);
+  line-height: 1;
+}
+
+.dr-pip-die {
+  font-size: 0.65rem;
+  color: var(--dr-text-muted);
+  font-weight: 600;
+}
+
+/* ── historial ── */
+.dr-history-section {
+  background: var(--dr-bg-card);
+  border: 1px solid var(--dr-border);
+  border-radius: var(--dr-radius);
+  box-shadow: var(--dr-shadow-sm);
+  padding: 1.25rem;
+  flex: 1;
+}
+
+.dr-history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.dr-history-header .dr-label {
+  margin-bottom: 0;
+}
+
+.dr-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.dr-history-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.dr-history-list::-webkit-scrollbar-thumb {
+  background: var(--dr-border);
+  border-radius: 2px;
+}
+
+.dr-history-empty {
+  font-size: 0.8rem;
+  color: var(--dr-text-muted);
+  font-style: italic;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+.dr-history-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--dr-bg-muted);
+  border-radius: var(--dr-radius-sm);
+  font-size: 0.8rem;
+  animation: dr-fadein 0.2s ease-out;
+}
+
+@keyframes dr-fadein {
+  from {
+    opacity: 0;
+    transform: translate-y(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dr-hist-expr {
+  color: var(--dr-text-muted);
+  font-size: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dr-hist-result {
+  font-weight: 800;
+  font-size: 1rem;
+  color: var(--dr-primary);
+}
+
+.dr-hist-time {
+  font-size: 0.7rem;
+  color: var(--dr-text-muted);
+}

package/src/tool/excuse-generator/bibliography.astro

@@ -0,0 +1,18 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { excuseGenerator, type ExcuseGeneratorLocaleContent } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const localeContentLoader = (excuseGenerator.i18n as Record<string, () => Promise<ExcuseGeneratorLocaleContent>>)[locale];
+const content = localeContentLoader ? await localeContentLoader() : null;
+if (!content) return null;
+
+const { bibliography } = content;
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/excuse-generator/component.astro

@@ -0,0 +1,140 @@
+---
+import { Icon } from 'astro-icon/components';
+import './style.css';
+import type { ExcuseGeneratorUI } from './index';
+
+interface Props {
+  ui: ExcuseGeneratorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="excuse-generator-root" class="excuse-generator" data-ui={JSON.stringify(ui)}>
+  <div class="excuse-generator-root">
+    <div class="excuse-generator-card">
+      <div class="excuse-generator-blob excuse-generator-blob-1"></div>
+      <div class="excuse-generator-blob excuse-generator-blob-2"></div>
+
+      <div class="excuse-generator-slots">
+        <div id="excuse-part-1" class="excuse-generator-slot">
+          <span class="excuse-generator-slot-label">{ui.subjectLabel}</span>
+          <p class="excuse-generator-slot-text">?</p>
+        </div>
+
+        <div class="excuse-generator-separator">
+          <Icon name="mdi:plus" />
+        </div>
+        <div class="excuse-generator-separator-mobile">
+          <Icon name="mdi:arrow-down" />
+        </div>
+
+        <div id="excuse-part-2" class="excuse-generator-slot">
+          <span class="excuse-generator-slot-label">{ui.actionLabel}</span>
+          <p class="excuse-generator-slot-text">?</p>
+        </div>
+
+        <div class="excuse-generator-separator">
+          <Icon name="mdi:arrow-right" />
+        </div>
+        <div class="excuse-generator-separator-mobile">
+          <Icon name="mdi:arrow-down" />
+        </div>
+
+        <div id="excuse-part-3" class="excuse-generator-slot">
+          <span class="excuse-generator-slot-label">{ui.victimLabel}</span>
+          <p class="excuse-generator-slot-text">?</p>
+        </div>
+      </div>
+
+      <div class="excuse-generator-actions">
+        <button id="excuse-generate-btn" class="excuse-generator-btn">
+          <span class="excuse-generator-btn-content">
+            <Icon name="mdi:creation" />
+            {ui.generateBtn}
+          </span>
+          <div class="excuse-generator-btn-gradient"></div>
+        </button>
+
+        <button id="excuse-copy-btn" class="excuse-generator-copy">
+          <Icon name="mdi:content-copy" />
+          {ui.copyBtn}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const root = document.getElementById('excuse-generator-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui as string) as Record<string, string>;
+
+  const starts = JSON.parse(ui.starts) as string[];
+  const middles = JSON.parse(ui.middles) as string[];
+  const ends = JSON.parse(ui.ends) as string[];
+
+  const els = {
+    p1: document.querySelector('#excuse-part-1 .excuse-generator-slot-text') as HTMLElement,
+    p2: document.querySelector('#excuse-part-2 .excuse-generator-slot-text') as HTMLElement,
+    p3: document.querySelector('#excuse-part-3 .excuse-generator-slot-text') as HTMLElement,
+    genBtn: document.getElementById('excuse-generate-btn') as HTMLButtonElement,
+    copyBtn: document.getElementById('excuse-copy-btn') as HTMLElement,
+  };
+
+  let generatedText = '';
+
+  function runSlot(element: HTMLElement, options: string[], duration: number): Promise<string> {
+    return new Promise((resolve) => {
+      const intervalTime = 50;
+      const steps = duration / intervalTime;
+      let currentStep = 0;
+
+      element.classList.add('blur');
+
+      const timer = setInterval(() => {
+        const randomText = options[Math.floor(Math.random() * options.length)];
+        element.innerText = randomText || '';
+        currentStep++;
+
+        if (currentStep >= steps) {
+          clearInterval(timer);
+          element.classList.remove('blur');
+          const final = options[Math.floor(Math.random() * options.length)] || '';
+          element.innerText = final;
+          resolve(final);
+        }
+      }, intervalTime);
+    });
+  }
+
+  async function generateExcuse() {
+    if (!els.p1 || !els.p2 || !els.p3 || !els.genBtn) return;
+
+    els.genBtn.disabled = true;
+    if (els.copyBtn) {
+      els.copyBtn.classList.remove('visible');
+    }
+
+    const res1 = await runSlot(els.p1, starts, 800);
+    const res2 = await runSlot(els.p2, middles, 1400);
+    const res3 = await runSlot(els.p3, ends, 2000);
+
+    generatedText = `${res1} ${res2} ${res3}`;
+
+    els.genBtn.disabled = false;
+    if (els.copyBtn) {
+      els.copyBtn.classList.add('visible');
+
+      els.copyBtn.onclick = () => {
+        navigator.clipboard.writeText(generatedText);
+        const original = els.copyBtn.innerHTML;
+        els.copyBtn.innerHTML = `<span class="excuse-generator-copy-success">${ui.copied}</span>`;
+        setTimeout(() => {
+          els.copyBtn.innerHTML = original;
+        }, 2000);
+      };
+    }
+  }
+
+  els.genBtn?.addEventListener('click', generateExcuse);
+</script>

package/src/tool/excuse-generator/i18n/en.ts

@@ -0,0 +1,80 @@
+import type { ExcuseGeneratorLocaleContent } from '../index';
+
+export const content: ExcuseGeneratorLocaleContent = {
+  slug: 'excuse-generator',
+  title: 'Excuse Generator',
+  description: 'Semantic gambling machine to get rid of commitments with style. Generate surreal and irrefutable excuses instantly.',
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Leisure Bibliography',
+  ui: {
+    title: 'Surreal Excuse Generator',
+    description: 'Next-generation alibi calculator.',
+    subjectLabel: 'Subject',
+    actionLabel: 'Action',
+    victimLabel: 'Victim',
+    generateBtn: 'GENERATE EXCUSE',
+    copyBtn: 'Copy this craziness',
+    copied: 'Copied!',
+    starts: JSON.stringify([
+      "My cat", "My grandmother", "The president", "An alien", "My neighbor from the 5th floor",
+      "The wifi", "My horoscope", "A time traveler", "The washing machine", "My fridge",
+      "The spirit of Christmas", "My shadow", "A ninja", "The vegan police", "Siri",
+      "My carnivorous plant", "The Amazon delivery guy", "My evil clone", "A wizard", "Godzilla"
+    ]),
+    middles: JSON.stringify([
+      "has declared war on", "has eaten", "has kidnapped", "has set fire to",
+      "is organizing a party in", "has vomited on", "refuses to leave",
+      "has hacked", "has stolen", "has fallen in love with", "is meditating on",
+      "has cast a spell on", "is protesting against", "has founded a cult in",
+      "is dancing samba in", "has summoned a demon in", "has blocked access to",
+      "has turned into gold", "is trying to sell", "has written a book about"
+    ]),
+    ends: JSON.stringify([
+      "my house keys.", "my will to live.", "the garage door.",
+      "my favorite pants.", "the living room router.", "my only pair of shoes.",
+      "the laws of physics.", "my dignity.", "the building's elevator.",
+      "my Netflix account.", "my toothbrush.", "my house deeds.",
+      "my pogs collection.", "the car's handbrake.", "my desire to socialize.",
+      "my coffee supply.", "the toilet lid.", "the TV remote.",
+      "my lucky socks.", "Western civilization."
+    ]),
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'References'
+  },
+  seo: [
+    { type: 'title', text: 'The Scientific Art of the Perfect Excuse', level: 2 },
+    { type: 'paragraph', html: 'We live in the era of hyperconnectivity. Your phone vibrates, your watch notifies you, and your social agenda looks like a game of Tetris about to lose. The pressure to say "yes" to everything has created an epidemic of social exhaustion.' },
+    { type: 'title', text: 'The Renaissance of JOMO (Joy of Missing Out)', level: 3 },
+    { type: 'paragraph', html: 'While FOMO (Fear of Missing Out) dominated the last decade, digital wellness experts now advocate for <strong>JOMO: The Joy of Missing Out</strong>. It\'s not about isolation, but about intentionality.' },
+    { type: 'tip', title: 'The Formula for the Irrefutable Alibi', html: '<strong>The Dissociated Subject:</strong> You are never the culprit. It is "the wifi", "my cat", "the universe". Shift the blame to an external entity.<br><strong>The Hyperbolic Action:</strong> The situation must be absurd or technical enough that nobody asks for details.<br><strong>The Physical Block:</strong> The final outcome must be binary: either I go or I stay home.' },
+    { type: 'title', text: 'A Brief History of the Excuse', level: 3 },
+    { type: 'list', items: [
+      '<strong>Middle Ages:</strong> "My horse has lost a horseshoe" (A timeless classic).',
+      '<strong>Industrial Revolution:</strong> "The steam engine overheated".',
+      '<strong>Digital Era:</strong> "My internet dropped right in the middle of an update".',
+    ]},
+    { type: 'proscons', items: [
+      { pro: 'Instantly relieves social pressure', con: 'Overuse erodes trust' },
+      { pro: 'Protects your energy and boundaries', con: 'May generate guilt if used carelessly' },
+      { pro: 'Creative and humorous tone defuses tension', con: 'Not suitable for formal or professional contexts' },
+    ]},
+  ],
+  faq: [
+    {
+      question: 'Can this generator save my marriage?',
+      answer: 'While we are not therapists, avoiding that dinner with the in-laws using a plausible technical emergency can significantly reduce tension. Use responsibly.'
+    },
+    {
+      question: 'Why such surreal phrases?',
+      answer: 'The strategy is based on Cognitive Dissonance. If you say something boring it is verifiable. If you say something absurd, the surprise blocks the capacity for anger.'
+    }
+  ],
+  bibliography: [
+    { name: 'Procrastinator\'s Manifesto', url: 'https://example.com/manifesto' }
+  ],
+  howTo: [
+    { name: 'Generate', text: 'Click the generate button to create a new excuse.' },
+    { name: 'Copy', text: 'Click the copy button to bring the excuse to your clipboard.' }
+  ],
+  schemas: []
+};