@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/chromaticLens/i18n/fr.ts

@@ -0,0 +1,244 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
+
+const slug = 'lentille-chromatique-extraction-palette-couleurs-ligne';
+const title = 'Lentille Chromatique - Extraction de Palette de Couleurs en Ligne';
+const description = 'Extrayez gratuitement des palettes de couleurs professionnelles à partir de n\'importe quelle image. Identifiez les couleurs dominantes à l\'aide d\'algorithmes mathématiques.';
+
+const ui: ChromaticLensUI = {
+    dropTitle: "Analyser les Couleurs",
+    dropSubtitle: "Faites glisser une image pour extraire son ADN chromatique.",
+    processingLabel: "Extraction de la palette...",
+    paletteTitle: "Palette Extraite",
+    copyLabel: "Copier HEX",
+    copiedLabel: "Copié !",
+    colorCountLabel: "Nombre de couleurs",
+    changeImage: "Changer d'image"
+};
+
+const faq: ChromaticLensLocaleContent['faq'] = [
+    {
+        question: "Comment fonctionne l'extraction des couleurs ?",
+        answer: "Nous utilisons l'algorithme 'Median Cut', qui regroupe les pixels de l'image en fonction de leur proximité dans l'espace colorimétrique RVB pour trouver les tons les plus représentatifs.",
+    },
+    {
+        question: "Puis-je copier les couleurs dans mon éditeur de design ?",
+        answer: "Oui, en cliquant sur chaque couleur, le code HEX sera automatiquement copié dans votre presse-papiers, prêt à être collé dans Photoshop, Figma ou CSS.",
+    },
+    {
+        question: "Quels types d'images puis-je analyser ?",
+        answer: "N'importe quel fichier JPG, PNG ou WebP. Le traitement est local, les images lourdes seront donc analysées rapidement sans consommer de données réseau.",
+    },
+];
+
+const howTo: ChromaticLensLocaleContent['howTo'] = [
+    {
+        name: "Charger l'image",
+        text: "Téléchargez la photographie dont vous souhaitez extraire l'inspiration chromatique.",
+    },
+    {
+        name: "Ajuster la précision",
+        text: "Sélectionnez le nombre de couleurs dominantes que l'outil doit identifier (de 3 à 12).",
+    },
+    {
+        name: "Analyser le résultat",
+        text: "La palette apparaîtra instantanément avec ses codes hexadécimaux correspondants.",
+    },
+    {
+        name: "Copier et utiliser",
+        text: "Cliquez sur les tons pour les enregistrer et les appliquer à votre projet de conception.",
+    },
+];
+
+const bibliography: ChromaticLensLocaleContent['bibliography'] = [
+    {
+        name: "Median Cut Algorithm - Wikipédia",
+        url: "https://fr.wikipedia.org/wiki/Coupure_m%C3%A9diane",
+    },
+    {
+        name: "Théorie des couleurs pour les designers",
+        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
+    },
+];
+
+const seo: ChromaticLensLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Extraction Intelligente de Palette de Couleurs',
+        items: [
+            'Algorithme Median Cut professionnel pour l\'analyse des couleurs',
+            'Extrayez 3 à 12 couleurs dominantes de n\'importe quelle image',
+            'Codes HEX cliquables directement vers le presse-papiers',
+            'Traitement 100 % local - idéal pour les créatifs'
+        ]
+    },
+    { type: 'title', text: 'Extraction de Palettes de Couleurs : Science et Design', level: 2 },
+    { type: 'paragraph', html: 'Vous êtes-vous déjà demandé pourquoi une photographie de film semble si harmonieuse ? Ce n\'est pas un hasard ; c\'est la théorie des couleurs en action. Lentille Chromatique vous permet d\'extraire cette harmonie directement du pixel, en la transformant en codes HEX utilisables dans vos projets de design.' },
+
+    { type: 'stats', items: [
+        { value: 'Instantané', label: 'Analyse de Couleur', icon: 'mdi:lightning-bolt' },
+        { value: '100%', label: 'Confidentialité Locale', icon: 'mdi:lock' },
+        { value: 'RVB', label: 'Espace Colorimétrique Précis', icon: 'mdi:palette' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'L\'Algorithme Median Cut Expliqué', level: 3 },
+    { type: 'paragraph', html: 'L\'extraction intelligente de palettes n\'est pas un simple échantillonnage aléatoire de pixels. Elle utilise l\'algorithme Median Cut, une technique de partitionnement récursif qui garantit une représentation fidèle :' },
+    { type: 'list', items: [
+        '<strong>Division Récursive :</strong> Le "cube de couleur" RVB de l\'image est divisé récursivement en boîtes plus petites.',
+        '<strong>Équilibre de Volume :</strong> Chaque partition cherche à regrouper des pixels du même espace colorimétrique avec des volumes similaires.',
+        '<strong>Moyenne Pondérée :</strong> La couleur résultante de chaque boîte est la moyenne de tous les pixels qu\'elle contient.',
+        '<strong>Représentation Fidèle :</strong> Les couleurs dominantes reflètent l\'atmosphère visuelle réelle de l\'image, pas un simple échantillon.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Flux de Travail Créatif', html: 'Idéal pour les développeurs web, les designers UX/UI, les artistes numériques et les créatifs cherchant à capturer instantanément l\'essence visuelle d\'une photographie, d\'un film ou d\'une référence visuelle pour l\'appliquer dans leurs interfaces, illustrations ou palettes de marque.' },
+
+    { type: 'title', text: 'Cas d\'Utilisation en Design Numérique', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Designers UX/UI',
+            description: 'Extrayez des palettes d\'images hero pour créer des interfaces cohérentes',
+            icon: 'mdi:palette',
+            points: [
+                'Couleurs de fond harmonieuses',
+                'Boutons et éléments secondaires',
+                'Contraste calculé automatiquement'
+            ]
+        },
+        {
+            title: 'Développeurs Web',
+            description: 'Créez des feuilles de style CSS directement depuis des références visuelles',
+            icon: 'mdi:code-braces',
+            points: [
+                'Copier HEX directement vers CSS',
+                'Variables de couleur en SCSS/CSS',
+                'Thèmes cohérents sans conception préalable'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Artistes Numériques et Illustrateurs',
+            description: 'Capturez des références chromatiques de films, de la nature ou de l\'art',
+            icon: 'mdi:brush',
+            points: [
+                'Palettes de référence de chefs-d\'œuvre',
+                'Études de couleurs cinématographiques',
+                'Inspiration visuelle immédiate'
+            ]
+        },
+        {
+            title: 'Spécialistes en Branding',
+            description: 'Développez des identités visuelles basées sur des photographies de référence',
+            icon: 'mdi:tag-multiple',
+            points: [
+                'Extraire les couleurs de marque des images',
+                'Créer des guides chromatiques professionnels',
+                'Assurer la cohérence visuelle'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Théorie des Couleurs Appliquée', level: 3 },
+    { type: 'table', headers: ['Concept de Couleur', 'Définition', 'Application Pratique'], rows: [
+        ['Harmonie Chromatique', 'Combinaison de couleurs visuellement équilibrée', 'Identité visuelle cohérente en UI'],
+        ['Contraste', 'Différence de luminosité entre les couleurs', 'Lisibilité et hiérarchie visuelle'],
+        ['Saturation', 'Intensité colorée d\'un ton', 'Professionnalisme (basse) vs Énergie (haute)'],
+        ['Température de Couleur', 'Couleurs chaudes (rouges) vs froides (bleues)', 'Psychologie émotionnelle du design'],
+        ['Palette Monochromatique', 'Variations d\'un seul ton', 'Élégance et minimalisme']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Précision mathématique dans l\'extraction - pas une sélection visuelle approximative',
+            con: 'Des couleurs peu visibles peuvent être incluses si elles ont beaucoup de pixels'
+        },
+        {
+            pro: 'Copie instantanée dans le presse-papiers - intégration parfaite avec le flux de travail',
+            con: 'Nécessite un navigateur moderne compatible avec l\'API Canvas'
+        },
+        {
+            pro: 'Confidentialité totale - analyse 100 % locale sans envoi de données',
+            con: 'Aucun enregistrement d\'historique des analyses précédentes'
+        },
+        {
+            pro: 'Compatible avec n\'importe quel format d\'image numérique',
+            con: 'Les couleurs finales dépendent de la compression et de la qualité de l\'image'
+        }
+    ], proTitle: 'Avantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Représentation Réaliste de la Couleur', icon: 'mdi:check-circle-outline', badge: 'Algorithme Avancé', html: 'Contrairement aux outils qui échantillonnent simplement des pixels aléatoires, notre système utilise l\'algorithme Median Cut qui pondère l\'ensemble du nombre de pixels de chaque ton, garantissant que la palette résultante reflète fidèlement l\'atmosphère visuelle et la psychologie des couleurs de l\'image originale.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Median Cut',
+            definition: 'Algorithme de quantification de couleur qui divise récursivement l\'espace RVB en boîtes, assurant une distribution uniforme. Utilisé historiquement dans les GIF.'
+        },
+        {
+            term: 'Espace Colorimétrique RVB',
+            definition: 'Modèle de couleur basé sur le rouge, le vert et le bleu. Chaque couleur est représentée comme une combinaison de ces trois valeurs (0-255).'
+        },
+        {
+            term: 'Code HEX',
+            definition: 'Notation hexadécimale à 6 chiffres (#RRGGBB) représentant la couleur sur le web. Universel en CSS, Figma et Adobe.'
+        },
+        {
+            term: 'Saturation de la Couleur',
+            definition: 'Intensité ou pureté de la couleur. Une saturation élevée = couleur vive ; une saturation basse = couleur grisâtre.'
+        },
+        {
+            term: 'Harmonie Chromatique',
+            definition: 'Sélection et combinaison de couleurs résultant en un ensemble visuellement agréable.'
+        }
+    ] },
+
+    { type: 'message', title: 'Analyse Chromatique Professionnelle', ariaLabel: 'Informations techniques sur l\'analyse des couleurs', html: 'Lentille Chromatique transforme l\'analyse visuelle manuelle en précision algorithmique. Elle ne se contente pas d\'extraire des couleurs : elle capture l\'essence émotionnelle et visuelle de toute image, la plaçant directement dans votre presse-papiers sous forme de codes HEX prêts à l\'emploi. Confidentialité totale, analyses illimitées.' },
+
+    { type: 'title', text: 'Concevez Depuis l\'Inspiration Visuelle', level: 3 },
+    { type: 'paragraph', html: 'La meilleure palette de couleurs est celle qui capture l\'intention visuelle de votre référence. Lentille Chromatique automatise ce qui était auparavant un processus manuel : observer, analyser, noter. Désormais, faites simplement glisser une image et obtenez des codes HEX professionnels en quelques secondes.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'fr',
+};
+
+export const content: ChromaticLensLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Frequently Asked Questions",
+    faq,
+    bibliography,
+    bibliographyTitle: "References",
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/chromaticLens/index.ts

@@ -0,0 +1,43 @@
+import type { AudiovisualToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import ChromaticLens from './component.astro';
+import ChromaticLensSEO from './seo.astro';
+import ChromaticLensBibliography from './bibliography.astro';
+
+export interface ChromaticLensUI {
+    dropTitle: string;
+    dropSubtitle: string;
+    processingLabel: string;
+    paletteTitle: string;
+    copyLabel: string;
+    copiedLabel: string;
+    colorCountLabel: string;
+    [key: string]: string;
+}
+
+export type ChromaticLensLocaleContent = ToolLocaleContent<ChromaticLensUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const chromaticLens: AudiovisualToolEntry<ChromaticLensUI> = {
+    id: 'lente-cromatica',
+    icons: {
+        bg: 'mdi:palette-swatch',
+        fg: 'mdi:eye-outline',
+    },
+    i18n: {
+        es: async () => es as unknown as ChromaticLensLocaleContent,
+        en: async () => en as unknown as ChromaticLensLocaleContent,
+        fr: async () => fr as unknown as ChromaticLensLocaleContent,
+    },
+};
+
+export { ChromaticLens, ChromaticLensSEO, ChromaticLensBibliography };
+
+export const CHROMATIC_LENS_TOOL: ToolDefinition = {
+    entry: chromaticLens as unknown as AudiovisualToolEntry,
+    Component: ChromaticLens,
+    SEOComponent: ChromaticLensSEO,
+    BibliographyComponent: ChromaticLensBibliography,
+};

package/src/tool/chromaticLens/logic.ts

@@ -0,0 +1,87 @@
+export type RGB = [number, number, number];
+
+export interface ColorSwatch {
+    rgb: RGB;
+    hex: string;
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+    return (
+        "#" +
+        [r, g, b]
+            .map((x) => {
+                const hex = x.toString(16);
+                return hex.length === 1 ? "0" + hex : hex;
+            })
+            .join("")
+    ).toUpperCase();
+}
+
+function findBucketRanges(bucket: RGB[]): { ranges: [number, number, number]; channel: 0 | 1 | 2 } {
+    let minR = 255, maxR = 0, minG = 255, maxG = 0, minB = 255, maxB = 0;
+    for (const p of bucket) {
+        minR = Math.min(minR, p[0]); maxR = Math.max(maxR, p[0]);
+        minG = Math.min(minG, p[1]); maxG = Math.max(maxG, p[1]);
+        minB = Math.min(minB, p[2]); maxB = Math.max(maxB, p[2]);
+    }
+    const rangeR = maxR - minR, rangeG = maxG - minG, rangeB = maxB - minB;
+    const ranges = [rangeR, rangeG, rangeB] as const;
+    const maxIdx = ranges.indexOf(Math.max(...ranges)) as 0 | 1 | 2;
+    return { ranges, channel: maxIdx };
+}
+
+function samplePixels(imageData: Uint8ClampedArray): RGB[] {
+    const pixels: RGB[] = [];
+    const skip = imageData.length > 500000 ? 40 : 4;
+    for (let i = 0; i < imageData.length; i += skip) {
+        const r = imageData[i], g = imageData[i + 1], b = imageData[i + 2], a = imageData[i + 3];
+        if (typeof r === 'number' && typeof g === 'number' && typeof b === 'number' && typeof a === 'number' && a >= 128) {
+            pixels.push([r, g, b]);
+        }
+    }
+    return pixels;
+}
+
+function quantizeBuckets(buckets: RGB[][], colorCount: number): void {
+    while (buckets.length < colorCount) {
+        let maxRange = -1, splitIndex = -1, bestChannel: 0 | 1 | 2 = 0;
+        for (let i = 0; i < buckets.length; i++) {
+            const bucket = buckets[i];
+            if (!bucket?.length) continue;
+            const { channel } = findBucketRanges(bucket);
+            const maxDimension = Math.max(...findBucketRanges(bucket).ranges);
+            if (maxDimension > maxRange) {
+                maxRange = maxDimension; splitIndex = i; bestChannel = channel;
+            }
+        }
+        if (splitIndex === -1) break;
+        const bucketToSplit = buckets[splitIndex];
+        if (!bucketToSplit) break;
+        bucketToSplit.sort((a, b) => (a[bestChannel] ?? 0) - (b[bestChannel] ?? 0));
+        const mid = Math.floor(bucketToSplit.length / 2);
+        buckets.splice(splitIndex, 1, bucketToSplit.slice(0, mid), bucketToSplit.slice(mid));
+    }
+}
+
+function bucketToSwatch(bucket: RGB[]): ColorSwatch {
+    let r = 0, g = 0, b = 0;
+    for (const p of bucket) {
+        r += p[0]; g += p[1]; b += p[2];
+    }
+    const count = bucket.length || 1;
+    return {
+        rgb: [Math.round(r / count), Math.round(g / count), Math.round(b / count)],
+        hex: rgbToHex(Math.round(r / count), Math.round(g / count), Math.round(b / count)),
+    };
+}
+
+export function extractPalette(
+    imageData: Uint8ClampedArray,
+    colorCount: number = 5
+): ColorSwatch[] {
+    const pixels = samplePixels(imageData);
+    if (!pixels.length) return [];
+    const buckets: RGB[][] = [pixels];
+    quantizeBuckets(buckets, colorCount);
+    return buckets.map(bucketToSwatch);
+}

package/src/tool/chromaticLens/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { chromaticLens } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await chromaticLens.i18n[locale]?.();
+if (!content) return null;
+---
+
+<SEORenderer content={{ locale, sections: content.seo || [] }} />

package/src/tool/chromaticLens/style.css

@@ -0,0 +1,308 @@
+.cl-root {
+  --cl-bg: #fff;
+  --cl-bg-elevated: #f8fafc;
+  --cl-border: #e2e8f0;
+  --cl-text: #0f172a;
+  --cl-text-muted: #64748b;
+  --cl-accent: #6366f1;
+  --cl-accent-alpha: rgba(99, 102, 241, 0.08);
+  --cl-accent-alpha-hover: rgba(99, 102, 241, 0.04);
+  --cl-emerald: #10b981;
+  --cl-emerald-alpha: rgba(16, 185, 129, 0.06);
+  --cl-shadow: rgba(0, 0, 0, 0.15);
+
+  padding: 2.5rem 1.5rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.theme-dark .cl-root {
+  --cl-bg: #18181b;
+  --cl-bg-elevated: #27272a;
+  --cl-border: #3f3f46;
+  --cl-text: #f4f4f5;
+  --cl-text-muted: #71717a;
+  --cl-accent: #818cf8;
+  --cl-accent-alpha: rgba(129, 140, 248, 0.12);
+  --cl-accent-alpha-hover: rgba(129, 140, 248, 0.06);
+  --cl-emerald: #34d399;
+  --cl-emerald-alpha: rgba(52, 211, 153, 0.08);
+  --cl-shadow: rgba(0, 0, 0, 0.5);
+}
+
+.cl-card {
+  background: var(--cl-bg);
+  border: 1px solid var(--cl-border);
+  border-radius: 3rem;
+  padding: 1.5rem;
+  box-shadow: 0 45px 120px -30px var(--cl-shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+.cl-drop {
+  padding: 5rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 3px dashed var(--cl-border);
+  border-radius: 2.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.cl-drop:hover,
+.cl-drop-active {
+  background: var(--cl-accent-alpha-hover);
+  border-color: var(--cl-accent);
+}
+
+.cl-drop-icon {
+  width: 5rem;
+  height: 5rem;
+  background: var(--cl-accent-alpha);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  color: var(--cl-accent);
+}
+
+.cl-drop-icon svg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.cl-drop-title {
+  font-size: 2rem;
+  font-weight: 950;
+  color: var(--cl-text);
+  margin: 0;
+}
+
+.cl-drop-sub {
+  font-size: 1.1rem;
+  color: var(--cl-text-muted);
+  margin: 0;
+  font-weight: 600;
+}
+
+.cl-workspace {
+  padding: 1.5rem;
+}
+
+.cl-mini-drop {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+  background: var(--cl-bg-elevated);
+  border: 1px solid var(--cl-border);
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--cl-text-muted);
+  cursor: pointer;
+  margin-bottom: 2rem;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.cl-mini-drop:hover {
+  border-color: var(--cl-accent);
+  color: var(--cl-accent);
+}
+
+.cl-mini-drop svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.cl-config-bar {
+  padding: 1rem 0;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid var(--cl-border);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.cl-config-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.cl-config-label {
+  font-size: 0.75rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  color: var(--cl-text-muted);
+  letter-spacing: 0.1em;
+}
+
+.cl-count-select {
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+  background: var(--cl-bg-elevated);
+  border: 1px solid var(--cl-border);
+  color: var(--cl-text);
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.cl-result-layout {
+  display: grid;
+  grid-template-columns: 1fr 1.25fr;
+  gap: 3rem;
+}
+
+@media (max-width: 800px) {
+  .cl-result-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.cl-preview-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cl-preview-img {
+  width: 100%;
+  border-radius: 1.5rem;
+  box-shadow: 0 20px 40px var(--cl-shadow);
+  display: block;
+}
+
+.cl-palette-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.cl-palette-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--cl-accent);
+}
+
+.cl-palette-header svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.cl-palette-header h4 {
+  font-size: 1.25rem;
+  font-weight: 950;
+  color: var(--cl-text);
+  margin: 0;
+}
+
+.cl-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem 0;
+}
+
+.cl-spinner {
+  width: 3rem;
+  height: 3rem;
+  border: 3px solid var(--cl-accent-alpha);
+  border-top-color: var(--cl-accent);
+  border-radius: 50%;
+  animation: cl-spin 0.8s linear infinite;
+}
+
+.cl-loader-text {
+  font-size: 0.75rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  color: var(--cl-text-muted);
+  letter-spacing: 0.1em;
+  margin: 0;
+}
+
+.cl-swatches {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  animation: cl-fade-up 0.5s ease;
+}
+
+.cl-swatch {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  background: var(--cl-bg-elevated);
+  border-radius: 1.25rem;
+  padding: 1rem;
+  border: 1px solid var(--cl-border);
+  cursor: pointer;
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
+}
+
+.cl-swatch:hover {
+  transform: scale(1.02);
+  border-color: var(--cl-accent);
+}
+
+.cl-swatch-copied {
+  background: var(--cl-emerald-alpha);
+  border-color: var(--cl-emerald);
+}
+
+.cl-swatch-color {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 0.75rem;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
+}
+
+.cl-swatch-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.cl-swatch-hex {
+  font-weight: 950;
+  color: var(--cl-text);
+  font-size: 1.25rem;
+}
+
+.cl-swatch-action {
+  font-size: 0.7rem;
+  font-weight: 900;
+  color: var(--cl-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cl-hidden {
+  display: none;
+}
+
+@keyframes cl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes cl-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}