@jjlmoya/utils-tools 1.1.0

package/src/tool/text-pixel-calculator/component.astro

@@ -0,0 +1,315 @@
+---
+import type { TextPixelCalculatorUI } from './ui';
+import Editor from './components/Editor.astro';
+import Stats from './components/Stats.astro';
+import Preview from './components/Preview.astro';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as TextPixelCalculatorUI;
+---
+
+<div class="tpc-root" data-ui={JSON.stringify(t)}>
+  <div class="tpc-main-card">
+    <div class="tpc-left">
+      <Editor 
+        textLabel={t.textLabel}
+        textPlaceholder={t.textPlaceholder}
+        fontLabel={t.fontLabel}
+        sizeLabel={t.sizeLabel}
+        weightLabel={t.weightLabel}
+        italicLabel={t.italicLabel}
+      />
+      <Stats 
+        widthLabel={t.widthLabel}
+        charsLabel={t.charsLabel}
+      />
+    </div>
+
+    <div class="tpc-right">
+      <Preview 
+        previewLabel={t.previewLabel}
+        copyBtn={t.copyBtn}
+        resetBtn={t.resetBtn}
+      />
+    </div>
+  </div>
+</div>
+
+<div class="tpc-toast" id="tpc-toast">{t.copyDone}</div>
+
+<style>
+  .tpc-root {
+    --tpc-cyan: #06b6d4;
+    --tpc-cyan-dark: #0891b2;
+    --tpc-cyan-focus: rgba(6, 182, 212, 0.15);
+    --tpc-purple: #8b5cf6;
+    --tpc-card-bg: #fff;
+    --tpc-card-border: rgba(0, 0, 0, 0.05);
+    --tpc-field-bg: #f8fafc;
+    --tpc-field-border: #e2e8f0;
+    --tpc-text-main: #1e293b;
+    --tpc-text-label: #64748b;
+    --tpc-canvas-bg: #f1f5f9;
+    --tpc-btn-secondary-bg: #f1f5f9;
+    --tpc-btn-secondary-color: #475569;
+    --tpc-checkbox-border: #cbd5e1;
+    --tpc-checkbox-bg: #fff;
+    --tpc-toast-bg: #1e293b;
+
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .tpc-root {
+    --tpc-card-bg: #1e293b;
+    --tpc-card-border: rgba(255, 255, 255, 0.05);
+    --tpc-field-bg: #0f172a;
+    --tpc-field-border: #334155;
+    --tpc-text-main: #f1f5f9;
+    --tpc-text-label: #94a3b8;
+    --tpc-canvas-bg: #0f172a;
+    --tpc-btn-secondary-bg: #334155;
+    --tpc-btn-secondary-color: #e2e8f0;
+    --tpc-checkbox-border: #475569;
+    --tpc-checkbox-bg: #0f172a;
+    --tpc-toast-bg: #06b6d4;
+  }
+
+  .tpc-main-card {
+    background: var(--tpc-card-bg);
+    border: 1px solid var(--tpc-card-border);
+    border-radius: 2.5rem;
+    padding: 2.5rem;
+    display: flex;
+    gap: 3rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  }
+
+  .tpc-left {
+    flex: 1.2;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tpc-right {
+    flex: 1;
+    border-left: 1px solid var(--tpc-field-border);
+    padding-left: 3rem;
+  }
+
+  @media (max-width: 900px) {
+    .tpc-main-card {
+      flex-direction: column;
+      padding: 1.5rem;
+      gap: 2rem;
+    }
+    .tpc-right {
+      border-left: none;
+      padding-left: 0;
+      border-top: 1px solid var(--tpc-field-border);
+      padding-top: 2rem;
+    }
+  }
+
+  .tpc-toast {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: var(--tpc-toast-bg);
+    color: #fff;
+    padding: 1rem 2rem;
+    border-radius: 100px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    z-index: 1000;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+  }
+
+  .tpc-toast-show {
+    transform: translateX(-50%) translateY(0);
+  }
+</style>
+
+<script>
+  import type { TextPixelCalculatorUI } from './ui';
+
+  const root = document.querySelector('.tpc-root') as HTMLElement | null;
+  const t = JSON.parse(root?.dataset.ui ?? '{}') as TextPixelCalculatorUI;
+
+  const textInput = document.getElementById('tpc-text') as HTMLTextAreaElement | null;
+  const fontSelect = document.getElementById('tpc-font') as HTMLSelectElement | null;
+  const sizeInput = document.getElementById('tpc-size') as HTMLInputElement | null;
+  const weightSelect = document.getElementById('tpc-weight') as HTMLSelectElement | null;
+  const italicCheck = document.getElementById('tpc-italic') as HTMLInputElement | null;
+  const italicLabel = italicCheck?.closest('label');
+  const widthSpan = document.getElementById('tpc-width');
+  const charsSpan = document.getElementById('tpc-chars');
+  const canvas = document.getElementById('tpc-canvas') as HTMLCanvasElement | null;
+  const copyBtn = document.getElementById('tpc-copy');
+  const resetBtn = document.getElementById('tpc-reset');
+  const toast = document.getElementById('tpc-toast');
+
+  const STORAGE_KEY = 'tpc_preferences';
+  const systemFonts = ["system-ui", "serif", "sans-serif", "monospace", "cursive", "fantasy"];
+  const loadedFonts = new Set<string>();
+
+  function saveSettings() {
+    const settings = {
+      text: textInput?.value,
+      font: fontSelect?.value,
+      size: sizeInput?.value,
+      weight: weightSelect?.value,
+      italic: italicCheck?.checked
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  }
+
+  function loadSettings() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (!saved) return;
+    try {
+      const settings = JSON.parse(saved);
+      if (textInput && settings.text !== undefined) textInput.value = settings.text;
+      if (fontSelect && settings.font !== undefined) fontSelect.value = settings.font;
+      if (sizeInput && settings.size !== undefined) sizeInput.value = settings.size;
+      if (weightSelect && settings.weight !== undefined) weightSelect.value = settings.weight;
+      if (italicCheck && settings.italic !== undefined) {
+        italicCheck.checked = settings.italic;
+        italicLabel?.classList.toggle('tpc-checked', italicCheck.checked);
+      }
+    } catch {}
+  }
+
+  const gFontsHost = ['fonts', 'googleapis', 'com'].join('.');
+
+  function loadGoogleFont(family: string) {
+    if (!family || systemFonts.includes(family) || loadedFonts.has(family)) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `https://${gFontsHost}/css2?family=${family.replace(/ /g, '+')}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
+    link.onload = () => {
+      loadedFonts.add(family);
+      document.fonts.ready.then(() => measure());
+    };
+    document.head.appendChild(link);
+  }
+
+  function buildFont(): string {
+    const style = italicCheck?.checked ? 'italic ' : '';
+    const weight = weightSelect?.value ?? '400';
+    const size = sizeInput?.value || '16';
+    const family = fontSelect?.value ?? 'sans-serif';
+    return `${style}${weight} ${size}px "${family}", sans-serif`;
+  }
+
+  function measure(): void {
+    if (!textInput || !canvas) return;
+    const text = textInput.value;
+    const font = buildFont();
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    ctx.font = font;
+    const metrics = ctx.measureText(text);
+    const px = Math.round(metrics.width * 100) / 100;
+    
+    if (widthSpan) widthSpan.textContent = String(px);
+    if (charsSpan) charsSpan.textContent = String(text.length);
+    
+    drawPreview(text, font, px, ctx);
+    saveSettings();
+  }
+
+  function drawPreview(text: string, font: string, width: number, ctx: CanvasRenderingContext2D): void {
+    if (!canvas) return;
+    const wrap = canvas.parentElement;
+    if (wrap) {
+      canvas.width = wrap.clientWidth;
+      canvas.height = wrap.clientHeight || 150;
+    }
+    
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    
+    ctx.fillStyle = isDark ? '#f1f5f9' : '#0f172a';
+    ctx.font = font;
+    ctx.textBaseline = 'middle';
+    
+    const x = 20;
+    const y = canvas.height / 2;
+    ctx.fillText(text, x, y);
+    
+    ctx.strokeStyle = '#06b6d4';
+    ctx.setLineDash([5, 5]);
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x, y + 40);
+    ctx.lineTo(x + width, y + 40);
+    ctx.stroke();
+    
+    ctx.setLineDash([]);
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x, y + 35);
+    ctx.lineTo(x, y + 45);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x + width, y + 35);
+    ctx.lineTo(x + width, y + 45);
+    ctx.stroke();
+  }
+
+  function showToast(): void {
+    if (!toast) return;
+    toast.classList.add('tpc-toast-show');
+    setTimeout(() => { toast.classList.remove('tpc-toast-show'); }, 2000);
+  }
+
+  italicCheck?.addEventListener('change', () => {
+    italicLabel?.classList.toggle('tpc-checked', italicCheck.checked);
+    measure();
+  });
+
+  fontSelect?.addEventListener('change', () => {
+    if (fontSelect.value) loadGoogleFont(fontSelect.value);
+    measure();
+  });
+
+  [textInput, sizeInput, weightSelect].forEach((el) => {
+    el?.addEventListener('input', measure);
+  });
+
+  window.addEventListener('resize', measure);
+
+  copyBtn?.addEventListener('click', () => {
+    const text = widthSpan?.textContent ?? '0';
+    navigator.clipboard.writeText(text).then(showToast).catch(() => {});
+  });
+
+  resetBtn?.addEventListener('click', () => {
+    if (textInput) textInput.value = t.defaultText ?? '';
+    if (fontSelect) fontSelect.value = 'Inter';
+    if (sizeInput) sizeInput.value = '16';
+    if (weightSelect) weightSelect.value = '400';
+    if (italicCheck) {
+      italicCheck.checked = false;
+      italicLabel?.classList.remove('tpc-checked');
+    }
+    localStorage.removeItem(STORAGE_KEY);
+    measure();
+  });
+
+  loadSettings();
+  if (textInput && !textInput.value) textInput.value = t.defaultText ?? '';
+  if (fontSelect?.value) loadGoogleFont(fontSelect.value);
+  measure();
+</script>

package/src/tool/text-pixel-calculator/components/Editor.astro

@@ -0,0 +1,240 @@
+---
+interface Props {
+  textLabel: string;
+  textPlaceholder: string;
+  fontLabel: string;
+  sizeLabel: string;
+  weightLabel: string;
+  italicLabel: string;
+}
+
+const { textLabel, textPlaceholder, fontLabel, sizeLabel, weightLabel, italicLabel } = Astro.props;
+
+const googleFonts = [
+  "Inter", "Roboto", "Open Sans", "Montserrat", "Lato", "Poppins", 
+  "Playfair Display", "Oswald", "Raleway", "Ubuntu", "Merriweather", 
+  "Lora", "Nunito", "Rubik", "Kanit", "Work Sans", "DM Sans", 
+  "Fira Sans", "Quicksand", "Mulish", "Cabin", "Jost", "Titillium Web", 
+  "PT Sans", "Source Sans 3", "Manrope", "Heebo", "IBM Plex Sans", 
+  "Outfit", "Space Grotesk", "Dancing Script", "Pacifico", "Caveat", 
+  "Indie Flower", "Shadows Into Light", "Abril Fatface", "Cinzel", 
+  "Bebas Neue", "Anton", "Archivo", "Lexend", "EB Garamond"
+].sort();
+
+const systemFonts = [
+  "system-ui", "serif", "sans-serif", "monospace", "cursive", "fantasy"
+];
+---
+
+<div class="tpc-editor">
+  <div class="tpc-field">
+    <label class="tpc-label" for="tpc-text">{textLabel}</label>
+    <textarea
+      id="tpc-text"
+      class="tpc-textarea"
+      placeholder={textPlaceholder}
+      spellcheck="false"
+      rows="4"
+    ></textarea>
+  </div>
+
+  <div class="tpc-config-grid">
+    <div class="tpc-field">
+      <label class="tpc-label" for="tpc-font">{fontLabel}</label>
+      <div class="tpc-select-wrapper">
+        <select id="tpc-font" class="tpc-input">
+          <optgroup label="System Fonts">
+            {systemFonts.map(font => <option value={font}>{font}</option>)}
+          </optgroup>
+          <optgroup label="Google Fonts">
+            {googleFonts.map(font => <option value={font} selected={font === "Inter"}>{font}</option>)}
+          </optgroup>
+        </select>
+        <div class="tpc-select-arrow">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="tpc-field">
+      <label class="tpc-label" for="tpc-size">{sizeLabel}</label>
+      <input
+        type="number"
+        id="tpc-size"
+        class="tpc-input"
+        value="16"
+        min="1"
+        max="500"
+      />
+    </div>
+
+    <div class="tpc-field">
+      <label class="tpc-label" for="tpc-weight">{weightLabel}</label>
+      <select id="tpc-weight" class="tpc-input">
+        <option value="100">100 Thin</option>
+        <option value="200">200 ExtraLight</option>
+        <option value="300">300 Light</option>
+        <option value="400" selected>400 Regular</option>
+        <option value="500">500 Medium</option>
+        <option value="600">600 SemiBold</option>
+        <option value="700">700 Bold</option>
+        <option value="800">800 ExtraBold</option>
+        <option value="900">900 Black</option>
+      </select>
+    </div>
+
+    <div class="tpc-field tpc-field-italic">
+      <label class="tpc-checkbox-label" for="tpc-italic">
+        <input type="checkbox" id="tpc-italic" class="tpc-checkbox-input" />
+        <span class="tpc-checkbox-box"></span>
+        <span class="tpc-italic-text">{italicLabel}</span>
+      </label>
+    </div>
+  </div>
+</div>
+
+<style>
+  .tpc-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .tpc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .tpc-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--tpc-text-label);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .tpc-textarea {
+    width: 100%;
+    background: var(--tpc-field-bg);
+    border: 1px solid var(--tpc-field-border);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    font-size: 1.125rem;
+    color: var(--tpc-text-main);
+    line-height: 1.6;
+    resize: none;
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-sizing: border-box;
+  }
+
+  .tpc-textarea:focus {
+    border-color: var(--tpc-cyan);
+    box-shadow: 0 0 0 4px var(--tpc-cyan-focus);
+    background: #fff;
+  }
+
+  :global(.theme-dark) .tpc-textarea:focus {
+    background: var(--tpc-field-bg);
+  }
+
+  .tpc-config-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+
+  .tpc-input {
+    width: 100%;
+    background: var(--tpc-field-bg);
+    border: 1px solid var(--tpc-field-border);
+    border-radius: 0.875rem;
+    padding: 0.75rem 1rem;
+    font-size: 0.9375rem;
+    color: var(--tpc-text-main);
+    outline: none;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+    appearance: none;
+  }
+
+  .tpc-input:focus {
+    border-color: var(--tpc-cyan);
+    box-shadow: 0 0 0 4px var(--tpc-cyan-focus);
+  }
+
+  .tpc-select-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .tpc-select-arrow {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--tpc-text-label);
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .tpc-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    user-select: none;
+    height: 100%;
+    padding-top: 1.5rem;
+  }
+
+  .tpc-checkbox-input {
+    display: none;
+  }
+
+  .tpc-checkbox-box {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid var(--tpc-checkbox-border);
+    background: var(--tpc-checkbox-bg);
+    border-radius: 0.5rem;
+    position: relative;
+    flex-shrink: 0;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :global(.tpc-checked) .tpc-checkbox-box {
+    background: var(--tpc-cyan);
+    border-color: var(--tpc-cyan);
+    transform: scale(1.05);
+  }
+
+  :global(.tpc-checked) .tpc-checkbox-box::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    width: 6px;
+    height: 11px;
+    border: solid #fff;
+    border-width: 0 2.5px 2.5px 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .tpc-italic-text {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--tpc-text-main);
+  }
+
+  @media (max-width: 480px) {
+    .tpc-config-grid {
+      grid-template-columns: 1fr;
+    }
+    .tpc-field-italic {
+      padding-top: 0;
+    }
+  }
+</style>

package/src/tool/text-pixel-calculator/components/Preview.astro

@@ -0,0 +1,155 @@
+---
+interface Props {
+  previewLabel: string;
+  copyBtn: string;
+  resetBtn: string;
+}
+
+const { previewLabel, copyBtn, resetBtn } = Astro.props;
+---
+
+<div class="tpc-preview-section">
+  <div class="tpc-preview-header">
+    <span class="tpc-label">{previewLabel}</span>
+  </div>
+  
+  <div class="tpc-canvas-container">
+    <div class="tpc-canvas-overlay"></div>
+    <div class="tpc-canvas-wrap">
+      <canvas id="tpc-canvas" class="tpc-canvas"></canvas>
+    </div>
+  </div>
+
+  <div class="tpc-actions">
+    <button type="button" id="tpc-copy" class="tpc-btn tpc-btn-primary">
+      <svg class="tpc-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
+      </svg>
+      <span>{copyBtn}</span>
+    </button>
+    <button type="button" id="tpc-reset" class="tpc-btn tpc-btn-secondary">
+      <svg class="tpc-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
+        <path d="M3 3v5h5"></path>
+      </svg>
+      <span>{resetBtn}</span>
+    </button>
+  </div>
+</div>
+
+<style>
+  .tpc-preview-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    height: 100%;
+  }
+
+  .tpc-preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tpc-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--tpc-text-label);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .tpc-canvas-container {
+    position: relative;
+    background: var(--tpc-canvas-bg);
+    border-radius: 1.25rem;
+    border: 1px solid var(--tpc-field-border);
+    min-height: 12rem;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tpc-canvas-overlay {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+  }
+
+  :global(.theme-dark) .tpc-canvas-overlay {
+    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
+  }
+
+  .tpc-canvas-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tpc-canvas {
+    width: 100%;
+    height: 12rem;
+    display: block;
+  }
+
+  .tpc-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: auto;
+  }
+
+  .tpc-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    font-size: 0.9375rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .tpc-btn-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .tpc-btn-primary {
+    background: linear-gradient(135deg, var(--tpc-cyan) 0%, var(--tpc-cyan-dark) 100%);
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
+  }
+
+  .tpc-btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
+  }
+
+  .tpc-btn-primary:active {
+    transform: translateY(0);
+  }
+
+  .tpc-btn-secondary {
+    background: var(--tpc-btn-secondary-bg);
+    color: var(--tpc-btn-secondary-color);
+  }
+
+  .tpc-btn-secondary:hover {
+    background: rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+
+  :global(.theme-dark) .tpc-btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+</style>