@jjlmoya/utils-creative 1.19.0 → 1.21.0

package/src/tool/fortune-cookie/i18n/pl.ts

@@ -1,5 +1,6 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { FortuneCookieLocaleContent } from '../index';
+import { bibliography } from '../bibliography';
 
 const slug = 'ciasteczko-z-wrozba-online';
 const title = 'Ciasteczko z Wróżbą';
@@ -59,7 +60,6 @@ export const content: FortuneCookieLocaleContent = {
   title,
   description,
   faqTitle: 'Najczęściej Zadawane Pytania',
-  bibliographyTitle: 'Bibliografia Przeznaczenia',
   ui: {
     title: 'Ciasteczko z Wróżbą Online',
     description: 'Twoja codzienna cyfrowa wyrocznia.',
@@ -97,7 +97,6 @@ export const content: FortuneCookieLocaleContent = {
       "Nieoczekiwana podróż przyniesie Ci wielkie radości."
     ]),
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Źródła'
   },
   seo: [
     { type: 'title', text: 'Tajemnica ciasteczka z wróżbą', level: 2 },
@@ -119,9 +118,7 @@ export const content: FortuneCookieLocaleContent = {
     ], columns: 4 },
   ],
   faq,
-  bibliography: [
-    { name: 'Historia ciasteczka z wróżbą', url: 'https://pl.wikipedia.org/wiki/Ciasteczko_z_wróżbą' }
-  ],
+  bibliography,
   howTo,
   schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/fortune-cookie/i18n/pt.ts

@@ -1,5 +1,6 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { FortuneCookieLocaleContent } from '../index';
+import { bibliography } from '../bibliography';
 
 const slug = 'biscoito-da-sorte-online';
 const title = 'Biscoito da Sorte';
@@ -59,7 +60,6 @@ export const content: FortuneCookieLocaleContent = {
   title,
   description,
   faqTitle: 'Perguntas Frequentes',
-  bibliographyTitle: 'Bibliografia do Destino',
   ui: {
     title: 'Biscoito da Sorte Online',
     description: 'O seu oráculo digital diário.',
@@ -97,7 +97,6 @@ export const content: FortuneCookieLocaleContent = {
       "Uma viagem inesperada trar-lhe-á grandes alegrias."
     ]),
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referências'
   },
   seo: [
     { type: 'title', text: 'O Mistério do Biscoito da Sorte', level: 2 },
@@ -119,9 +118,7 @@ export const content: FortuneCookieLocaleContent = {
     ], columns: 4 },
   ],
   faq,
-  bibliography: [
-    { name: 'História do Biscoito da Sorte', url: 'https://pt.wikipedia.org/wiki/Biscoito_da_sorte' }
-  ],
+  bibliography,
   howTo,
   schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/fortune-cookie/i18n/ru.ts

@@ -1,5 +1,6 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { FortuneCookieLocaleContent } from '../index';
+import { bibliography } from '../bibliography';
 
 const slug = 'pechenie-s-predskazaniem-online';
 const title = 'Печенье с предсказанием';
@@ -59,7 +60,6 @@ export const content: FortuneCookieLocaleContent = {
   title,
   description,
   faqTitle: 'Часто задаваемые вопросы',
-  bibliographyTitle: 'Библиография судьбы',
   ui: {
     title: 'Печенье с предсказанием онлайн',
     description: 'Ваш ежедневный цифровой оракул.',
@@ -97,7 +97,6 @@ export const content: FortuneCookieLocaleContent = {
       "Неожиданное путешествие принесет вам большую радость."
     ]),
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Ссылки'
   },
   seo: [
     { type: 'title', text: 'Тайна печенья с предсказанием', level: 2 },
@@ -119,9 +118,7 @@ export const content: FortuneCookieLocaleContent = {
     ], columns: 4 },
   ],
   faq,
-  bibliography: [
-    { name: 'История печенья с предсказанием (англ.)', url: 'https://en.wikipedia.org/wiki/Fortune_cookie' }
-  ],
+  bibliography,
   howTo,
   schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/fortune-cookie/i18n/sv.ts

@@ -1,5 +1,6 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { FortuneCookieLocaleContent } from '../index';
+import { bibliography } from '../bibliography';
 
 const slug = 'lyckokaka-online';
 const title = 'Lyckokaka';
@@ -59,7 +60,6 @@ export const content: FortuneCookieLocaleContent = {
   title,
   description,
   faqTitle: 'Vanliga frågor',
-  bibliographyTitle: 'Ödesbibliografi',
   ui: {
     title: 'Online Lyckokaka',
     description: 'Ditt dagliga digitala orakel.',
@@ -97,7 +97,6 @@ export const content: FortuneCookieLocaleContent = {
       "En oväntad resa kommer att ge dig stor glädje."
     ]),
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referenser'
   },
   seo: [
     { type: 'title', text: 'Lyckokakans mysterium', level: 2 },
@@ -119,9 +118,7 @@ export const content: FortuneCookieLocaleContent = {
     ], columns: 4 },
   ],
   faq,
-  bibliography: [
-    { name: 'Lyckokakans historia (engelska)', url: 'https://en.wikipedia.org/wiki/Fortune_cookie' }
-  ],
+  bibliography,
   howTo,
   schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/fortune-cookie/i18n/tr.ts

@@ -1,5 +1,6 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { FortuneCookieLocaleContent } from '../index';
+import { bibliography } from '../bibliography';
 
 const slug = 'sans-kurabiyesi-online';
 const title = 'Şans Kurabiyesi';
@@ -59,7 +60,6 @@ export const content: FortuneCookieLocaleContent = {
   title,
   description,
   faqTitle: 'Sıkça Sorulan Sorular',
-  bibliographyTitle: 'Kader Kaynakçası',
   ui: {
     title: 'Online Şans Kurabiyesi',
     description: 'Günlük dijital falınız.',
@@ -97,7 +97,6 @@ export const content: FortuneCookieLocaleContent = {
       "Beklenmedik bir yolculuk size büyük neşeler getirecek."
     ]),
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referanslar'
   },
   seo: [
     { type: 'title', text: 'Şans Kurabiyesinin Gizemi', level: 2 },
@@ -119,9 +118,7 @@ export const content: FortuneCookieLocaleContent = {
     ], columns: 4 },
   ],
   faq,
-  bibliography: [
-    { name: 'Şans Kurabiyesi Tarihi (İngilizce)', url: 'https://en.wikipedia.org/wiki/Fortune_cookie' }
-  ],
+  bibliography,
   howTo,
   schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/fortune-cookie/i18n/zh.ts

@@ -1,5 +1,6 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { FortuneCookieLocaleContent } from '../index';
+import { bibliography } from '../bibliography';
 
 const slug = 'fortune-cookie';
 const title = '幸运饼干';
@@ -59,7 +60,6 @@ export const content: FortuneCookieLocaleContent = {
   title,
   description,
   faqTitle: '常见问题解答',
-  bibliographyTitle: '命运文献',
   ui: {
     title: '在线幸运饼干',
     description: '您的每日数字神谕。',
@@ -97,7 +97,6 @@ export const content: FortuneCookieLocaleContent = {
       "一次意外的旅行会给您带来巨大的喜悦。"
     ]),
     faqTitle: 'FAQ',
-    bibliographyTitle: '参考资料'
   },
   seo: [
     { type: 'title', text: '幸运饼干之谜', level: 2 },
@@ -119,9 +118,7 @@ export const content: FortuneCookieLocaleContent = {
     ], columns: 4 },
   ],
   faq,
-  bibliography: [
-    { name: '幸运饼干的历史（英文）', url: 'https://en.wikipedia.org/wiki/Fortune_cookie' }
-  ],
+  bibliography,
   howTo,
   schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/fortune-cookie/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await fortuneCookie.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/glitch-image-distorter/bibliography.astro

@@ -0,0 +1,8 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+
+if (!bibliography || bibliography.length === 0) return null;
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/glitch-image-distorter/bibliography.ts

@@ -0,0 +1,4 @@
+export const bibliography = [
+  { name: 'Pixel Sorting by Jeff Thompson', url: 'https://github.com/jeffThompson/PixelSorting' },
+  { name: 'Digital Glitch Art - Creative Computing', url: 'https://www.adobe.com/uk/express/learn/blog/what-is-glitch-art' },
+];

package/src/tool/glitch-image-distorter/component.astro

@@ -0,0 +1,393 @@
+---
+import type { GlitchImageDistorterUI } from './index';
+
+interface Props {
+  ui: GlitchImageDistorterUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="gid-root" class="glitch-image-distorter" data-ui={JSON.stringify(ui)}>
+  <div class="glitch-image-distorter-card">
+    <div class="glitch-image-distorter-canvas-wrapper" id="gid-canvas-wrapper">
+      <canvas id="gid-canvas" class="glitch-image-distorter-canvas"></canvas>
+      <div class="glitch-image-distorter-drop-zone" id="gid-drop-zone">
+        <svg class="glitch-image-distorter-drop-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        <span class="glitch-image-distorter-drop-text">{ui.dragDropText}</span>
+        <span class="glitch-image-distorter-paste-hint">{ui.pasteHint}</span>
+      </div>
+      <button class="glitch-image-distorter-example-btn" id="gid-example-btn">{ui.exampleImageBtn}</button>
+      <input type="file" id="gid-file-input" accept="image/*" hidden />
+    </div>
+
+    <div class="glitch-image-distorter-controls" id="gid-controls">
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label">{ui.corruptionLabel}</label>
+        <input type="range" id="gid-corruption" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-corruption-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label">{ui.interferenceLabel}</label>
+        <input type="range" id="gid-interference" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-interference-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label">{ui.tremorLabel}</label>
+        <input type="range" id="gid-tremor" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-tremor-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label">{ui.pixelSortLabel}</label>
+        <input type="range" id="gid-pixel-sort" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-pixel-sort-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label">{ui.pixelSortDirectionLabel}</label>
+        <select id="gid-sort-direction" class="glitch-image-distorter-select">
+          <option value="none">None</option>
+          <option value="up">Up</option>
+          <option value="down">Down</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label">{ui.noiseLabel}</label>
+        <input type="range" id="gid-noise" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-noise-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-checkbox">
+          <input type="checkbox" id="gid-animate" />
+          <span>{ui.animateBtn}</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="glitch-image-distorter-buttons">
+      <button class="glitch-image-distorter-btn" id="gid-chaos-btn">{ui.chaosBtn}</button>
+      <button class="glitch-image-distorter-btn" id="gid-undo-btn">{ui.undoBtn}</button>
+      <button class="glitch-image-distorter-btn" id="gid-redo-btn">{ui.redoBtn}</button>
+      <button class="glitch-image-distorter-btn primary" id="gid-download-png-btn">{ui.downloadPngBtn}</button>
+      <button class="glitch-image-distorter-btn primary" id="gid-download-gif-btn">{ui.downloadGifBtn}</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  interface State {
+    corruption: number;
+    interference: number;
+    tremor: number;
+    pixelSort: number;
+    sortDirection: string;
+    noise: number;
+  }
+
+  class GlitchDistorter {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D | null;
+    sourceImage: HTMLImageElement | null = null;
+    state: State;
+    history: State[] = [];
+    historyIdx = -1;
+
+    constructor() {
+      this.canvas = document.getElementById('gid-canvas') as HTMLCanvasElement;
+      this.ctx = this.canvas.getContext('2d');
+      this.state = { corruption: 0, interference: 0, tremor: 0, pixelSort: 0, sortDirection: 'none', noise: 0 };
+    }
+
+    loadExampleImage() {
+      const svg = `<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgb(255,0,0)"/><stop offset="50%" style="stop-color:rgb(0,255,0)"/><stop offset="100%" style="stop-color:rgb(0,0,255)"/></linearGradient></defs><rect width="400" height="300" fill="url(#g)"/><circle cx="100" cy="100" r="50" fill="rgba(255,255,255,0.5)"/><text x="200" y="150" font-size="40" fill="white" text-anchor="middle" font-weight="bold">GLITCH</text></svg>`;
+      const blob = new Blob([svg], { type: 'image/svg+xml' });
+      const img = new Image();
+      img.onload = () => {
+        this.sourceImage = img;
+        this.canvas.width = img.width;
+        this.canvas.height = img.height;
+        this.applyDefaultGlitch();
+        this.updateDropZone();
+        URL.revokeObjectURL(img.src);
+      };
+      img.src = URL.createObjectURL(blob);
+    }
+
+    loadImage(file: File) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          this.sourceImage = img;
+          this.canvas.width = img.width;
+          this.canvas.height = img.height;
+          this.applyDefaultGlitch();
+          this.updateDropZone();
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    applyDefaultGlitch() {
+      this.state = { corruption: 40, interference: 50, tremor: 30, pixelSort: 35, sortDirection: 'down', noise: 25 };
+      this.updateSliders();
+      this.saveState();
+      this.render();
+    }
+
+    updateDropZone() {
+      const zone = document.getElementById('gid-drop-zone') as HTMLElement;
+      zone.classList.toggle('hidden', !!this.sourceImage);
+    }
+
+    render() {
+      if (!this.ctx || !this.sourceImage) return;
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.ctx.drawImage(this.sourceImage, 0, 0);
+      const img = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      if (this.state.corruption > 0) this.applyRGBSplit(img.data, this.state.corruption);
+      if (this.state.interference > 0) this.applyScanlines(img.data, this.state.interference, this.state.tremor);
+      if (this.state.noise > 0) this.applyNoise(img.data, this.state.noise);
+      this.ctx.putImageData(img, 0, 0);
+      if (this.state.pixelSort > 0 && this.state.sortDirection !== 'none') {
+        this.applyPixelSort(this.state.pixelSort, this.state.sortDirection);
+      }
+    }
+
+    applyRGBSplit(data: Uint8ClampedArray, intensity: number) {
+      const offset = Math.floor((intensity / 100) * 20);
+      for (let i = 0; i < data.length; i += 4) {
+        if (Math.random() < intensity / 100) {
+          const tmp = data[i] ?? 0;
+          data[i] = data[i + 2] ?? 0;
+          data[i + 2] = tmp;
+          if (offset > 0 && i + offset * 4 + 1 < data.length) {
+            data[i + 1] = data[i + offset * 4 + 1] ?? 0;
+          }
+        }
+      }
+    }
+
+    applyScanlines(data: Uint8ClampedArray, freq: number, tremor: number) {
+      const spacing = Math.max(1, Math.floor((100 - freq) / 10));
+      const w = this.canvas.width;
+      for (let y = 0; y < this.canvas.height; y += spacing) {
+        const off = Math.floor(y * w * 4);
+        for (let x = 0; x < w; x++) {
+          const idx = off + x * 4;
+          if (idx + 2 < data.length) {
+            const tint = 0.8 + Math.random() * 0.2 * (tremor / 100);
+            data[idx] = Math.floor((data[idx] ?? 0) * tint);
+            data[idx + 1] = Math.floor((data[idx + 1] ?? 0) * tint);
+            data[idx + 2] = Math.floor((data[idx + 2] ?? 0) * tint);
+          }
+        }
+      }
+    }
+
+    applyNoise(data: Uint8ClampedArray, intensity: number) {
+      for (let i = 0; i < data.length; i += 4) {
+        if (Math.random() < intensity / 100 && i + 3 < data.length) {
+          const n = Math.random() * 255;
+          data[i] = Math.floor((data[i] ?? 0) * 0.7 + n * 0.3);
+          data[i + 1] = Math.floor((data[i + 1] ?? 0) * 0.7 + n * 0.3);
+          data[i + 2] = Math.floor((data[i + 2] ?? 0) * 0.7 + n * 0.3);
+          data[i + 3] = Math.floor((intensity / 100) * 255);
+        }
+      }
+    }
+
+    applyPixelSort(intensity: number, dir: string) {
+      if (!this.ctx) return;
+      const cd = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      const cfg = { th: (intensity / 100) * 255, sh: Math.floor((intensity / 100) * 30), w: this.canvas.width, h: this.canvas.height, dir };
+      const v = dir === 'up' || dir === 'down';
+      const max = v ? cfg.w : cfg.h;
+      for (let i = 0; i < max; i++) {
+        this.sortLine(cd.data, i, v, cfg);
+      }
+      this.ctx.putImageData(cd, 0, 0);
+    }
+
+    sortLine(d: Uint8ClampedArray, ln: number, v: boolean, cfg: { th: number; sh: number; w: number; h: number; dir: string }) {
+      const idx: number[] = [];
+      const max = v ? cfg.h : cfg.w;
+      for (let j = 0; j < max; j++) {
+        const p = (v ? j * cfg.w + ln : ln * cfg.w + j) * 4;
+        if (p + 2 < d.length && this.isBright(d, p, cfg.th)) idx.push(p);
+      }
+      if (cfg.dir === 'down' || cfg.dir === 'left') idx.reverse();
+      const o = this.getOffset(v, cfg.sh, cfg.w, cfg.dir);
+      this.movePixels(d, idx, o);
+    }
+
+    getOffset(v: boolean, sh: number, w: number, dir: string): number {
+      if (v) return sh * w * 4;
+      return dir === 'right' ? sh * 4 : -sh * 4;
+    }
+
+    isBright(d: Uint8ClampedArray, p: number, th: number): boolean {
+      return ((d[p] ?? 0) + (d[p + 1] ?? 0) + (d[p + 2] ?? 0)) / 3 > th;
+    }
+
+    movePixels(d: Uint8ClampedArray, idx: number[], off: number) {
+      for (const i of idx) {
+        const t = i + off;
+        if (t >= 0 && t + 3 < d.length && i + 3 < d.length) {
+          for (let j = 0; j < 4; j++) d[t + j] = d[i + j] ?? 0;
+        }
+      }
+    }
+
+    saveState() {
+      this.history = this.history.slice(0, this.historyIdx + 1);
+      this.history.push({ ...this.state });
+      this.historyIdx++;
+      if (this.history.length > 20) {
+        this.history.shift();
+        this.historyIdx--;
+      }
+    }
+
+    undo() {
+      if (this.historyIdx > 0) {
+        this.historyIdx--;
+        this.state = { ...this.history[this.historyIdx] };
+        this.updateSliders();
+        this.render();
+      }
+    }
+
+    redo() {
+      if (this.historyIdx < this.history.length - 1) {
+        this.historyIdx++;
+        this.state = { ...this.history[this.historyIdx] };
+        this.updateSliders();
+        this.render();
+      }
+    }
+
+    updateSliders() {
+      (document.getElementById('gid-corruption') as HTMLInputElement).value = String(this.state.corruption);
+      (document.getElementById('gid-interference') as HTMLInputElement).value = String(this.state.interference);
+      (document.getElementById('gid-tremor') as HTMLInputElement).value = String(this.state.tremor);
+      (document.getElementById('gid-pixel-sort') as HTMLInputElement).value = String(this.state.pixelSort);
+      (document.getElementById('gid-sort-direction') as HTMLSelectElement).value = this.state.sortDirection;
+      (document.getElementById('gid-noise') as HTMLInputElement).value = String(this.state.noise);
+      this.updateValueDisplays();
+    }
+
+    updateValueDisplays() {
+      (document.getElementById('gid-corruption-val') as HTMLElement).textContent = String(this.state.corruption);
+      (document.getElementById('gid-interference-val') as HTMLElement).textContent = String(this.state.interference);
+      (document.getElementById('gid-tremor-val') as HTMLElement).textContent = String(this.state.tremor);
+      (document.getElementById('gid-pixel-sort-val') as HTMLElement).textContent = String(this.state.pixelSort);
+      (document.getElementById('gid-noise-val') as HTMLElement).textContent = String(this.state.noise);
+    }
+
+    randomizeSettings() {
+      const dirs = ['none', 'up', 'down', 'left', 'right'];
+      this.state = {
+        corruption: Math.floor(Math.random() * 100),
+        interference: Math.floor(Math.random() * 100),
+        tremor: Math.floor(Math.random() * 100),
+        pixelSort: Math.floor(Math.random() * 100),
+        sortDirection: dirs[Math.floor(Math.random() * dirs.length)] ?? 'none',
+        noise: Math.floor(Math.random() * 100),
+      };
+      this.updateSliders();
+      this.saveState();
+      this.render();
+    }
+
+    downloadPNG() {
+      const link = document.createElement('a');
+      link.href = this.canvas.toDataURL('image/png');
+      link.download = 'glitch-art.png';
+      link.click();
+    }
+
+    downloadGIF() {
+      alert('GIF export coming soon. Use PNG export or screen recording.');
+    }
+
+    setupInputs() {
+      const w = document.getElementById('gid-canvas-wrapper');
+      const fi = document.getElementById('gid-file-input') as HTMLInputElement;
+      const eb = document.getElementById('gid-example-btn') as HTMLButtonElement;
+      w?.addEventListener('click', () => fi.click());
+      w?.addEventListener('dragover', (e) => e.preventDefault());
+      w?.addEventListener('drop', (e) => {
+        e.preventDefault();
+        const f = (e as DragEvent).dataTransfer?.files?.[0];
+        if (f) this.loadImage(f);
+      });
+      fi.addEventListener('change', (e) => {
+        const f = (e.target as HTMLInputElement).files?.[0];
+        if (f) this.loadImage(f);
+      });
+      eb.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.loadExampleImage();
+      });
+      document.addEventListener('paste', (e) => {
+        for (let i = 0; i < (e.clipboardData?.items.length ?? 0); i++) {
+          const item = e.clipboardData?.items[i];
+          if (item?.type.includes('image')) {
+            const f = item.getAsFile();
+            if (f) this.loadImage(f);
+          }
+        }
+      });
+    }
+
+    setupSliders() {
+      const sliders: { id: string; key: keyof State }[] = [
+        { id: 'gid-corruption', key: 'corruption' },
+        { id: 'gid-interference', key: 'interference' },
+        { id: 'gid-tremor', key: 'tremor' },
+        { id: 'gid-pixel-sort', key: 'pixelSort' },
+        { id: 'gid-noise', key: 'noise' },
+      ];
+      sliders.forEach(({ id, key }) => {
+        document.getElementById(id)?.addEventListener('input', (e) => {
+          (this.state[key] as number) = Number((e.target as HTMLInputElement).value);
+          this.updateValueDisplays();
+          this.render();
+        });
+      });
+      document.getElementById('gid-sort-direction')?.addEventListener('change', (e) => {
+        this.state.sortDirection = (e.target as HTMLSelectElement).value;
+        this.render();
+      });
+    }
+
+    setupButtons() {
+      document.getElementById('gid-chaos-btn')?.addEventListener('click', () => this.randomizeSettings());
+      document.getElementById('gid-undo-btn')?.addEventListener('click', () => this.undo());
+      document.getElementById('gid-redo-btn')?.addEventListener('click', () => this.redo());
+      document.getElementById('gid-download-png-btn')?.addEventListener('click', () => this.downloadPNG());
+      document.getElementById('gid-download-gif-btn')?.addEventListener('click', () => this.downloadGIF());
+    }
+
+    init() {
+      this.setupInputs();
+      this.setupSliders();
+      this.setupButtons();
+    }
+  }
+
+  const d = new GlitchDistorter();
+  d.init();
+  document.addEventListener('astro:page-load', () => new GlitchDistorter().init());
+</script>

package/src/tool/glitch-image-distorter/entry.ts

@@ -0,0 +1,48 @@
+import type { CreativeToolEntry, ToolLocaleContent } from '../../types';
+
+export interface GlitchImageDistorterUI {
+  [key: string]: string;
+  title: string;
+  description: string;
+  dragDropText: string;
+  pasteHint: string;
+  exampleImageBtn: string;
+  corruptionLabel: string;
+  interferenceLabel: string;
+  tremorLabel: string;
+  pixelSortLabel: string;
+  pixelSortDirectionLabel: string;
+  noiseLabel: string;
+  animateBtn: string;
+  chaosBtn: string;
+  downloadPngBtn: string;
+  downloadGifBtn: string;
+  undoBtn: string;
+  redoBtn: string;
+  footerText: string;
+  faqTitle: string;
+}
+
+export type GlitchImageDistorterLocaleContent = ToolLocaleContent<GlitchImageDistorterUI>;
+
+export const glitchImageDistorter: CreativeToolEntry<GlitchImageDistorterUI> = {
+  id: 'glitch-image-distorter',
+  icons: { bg: 'mdi:image-broken-variant', fg: 'mdi:flash-outline' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};