app/src/content/embeds/data-packing.html

<div class="d3-data-packing"></div>
<style>
    .d3-data-packing {
        font-family: 'Arial', sans-serif;
        margin: 0;
    }

    .d3-data-packing .container {
        max-width: 1000px;
        margin: 0 auto;
        border-radius: 10px;
    }

    .d3-data-packing .sections-container {
        display: flex;
        gap: 20px;
    }

    @media (max-width: 768px) {
        .d3-data-packing .sections-container {
            flex-direction: column;
            gap: 30px;
        }
    }

    .d3-data-packing .section {
        flex: 1;
        margin-bottom: 0;
    }

    .d3-data-packing .section-title {
        font-size: 16px;
        font-weight: bold;
        color: var(--text-color, #333);
        margin: 0 auto 20px auto;
        text-align: center;
        width: 100%;
        display: block;
    }

    .d3-data-packing .dataset {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .d3-data-packing .dataset-row {
        display: flex;
        gap: 3px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .d3-data-packing .grid {
        display: grid;
        gap: 3px;
        margin: 0 auto;
        width: fit-content;
    }

    .d3-data-packing .block {
        width: 30px;
        height: 30px;
        border: 1px solid;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        color: white;
        position: relative;
    }

    .d3-data-packing .red {
        background-color: color-mix(in srgb, var(--color-0) 60%, transparent);
        border-color: var(--color-0);
    }

    .d3-data-packing .orange {
        background-color: color-mix(in srgb, var(--color-1) 60%, transparent);
        border-color: var(--color-1);
    }

    .d3-data-packing .yellow {
        background-color: color-mix(in srgb, var(--color-2) 60%, transparent);
        border-color: var(--color-2);
    }

    .d3-data-packing .green {
        background-color: color-mix(in srgb, var(--color-3) 60%, transparent);
        border-color: var(--color-3);
    }

    .d3-data-packing .lightgreen {
        background-color: color-mix(in srgb, var(--color-4) 60%, transparent);
        border-color: var(--color-4);
    }

    .d3-data-packing .lightblue {
        background-color: color-mix(in srgb, var(--color-5) 60%, transparent);
        border-color: var(--color-5);
    }

    .d3-data-packing .blue {
        background-color: color-mix(in srgb, var(--color-6) 60%, transparent);
        border-color: var(--color-6);
    }

    .d3-data-packing .purple {
        background-color: color-mix(in srgb, var(--color-7) 60%, transparent);
        border-color: var(--color-7);
    }

    .d3-data-packing .pink {
        background-color: color-mix(in srgb, var(--color-8) 60%, transparent);
        border-color: var(--color-8);
    }

    .d3-data-packing .gray {
        background-color: var(--surface-bg);
        border-color: color-mix(in srgb, var(--text-color) 30%, transparent);
    }

    .d3-data-packing .packing-false {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        max-width: calc(7 * 30px + 6 * 3px);
    }

    .d3-data-packing .packing-true {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        max-width: calc(7 * 30px + 6 * 3px);
    }
</style>
<script>
    (() => {
        const bootstrap = () => {
            const scriptEl = document.currentScript;
            let container = scriptEl ? scriptEl.previousElementSibling : null;
            if (!(container && container.classList && container.classList.contains('d3-data-packing'))) {
                const candidates = Array.from(document.querySelectorAll('.d3-data-packing'))
                    .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
                container = candidates[candidates.length - 1] || null;
            }
            if (!container) return;
            if (container.dataset) {
                if (container.dataset.mounted === 'true') return;
                container.dataset.mounted = 'true';
            }

            // Apply categorical color palette
            const applyColorPalette = () => {
                try {
                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
                        const colors = window.ColorPalettes.getColors('categorical', 9);
                        colors.forEach((color, index) => {
                            document.documentElement.style.setProperty(`--color-${index}`, color);
                        });
                    } else {
                        // Fallback to CSS variables or default colors
                        const fallbackColors = [
                            'var(--primary-color, #E889AB)',
                            '#4EA5B7', '#E38A42', '#CEC0FA', '#9B59B6',
                            '#16A085', '#1f77b4', '#ff7f0e', '#2ca02c'
                        ];
                        fallbackColors.forEach((color, index) => {
                            document.documentElement.style.setProperty(`--color-${index}`, color);
                        });
                    }
                } catch (e) {
                    console.warn('ColorPalettes not available, using fallback colors');
                }
            };

            // Apply colors immediately and on theme changes
            applyColorPalette();
            if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') {
                window.ColorPalettes.refresh();
            }

            // Data structure - only colored blocks, no gray blocks
            const dataset = [
                { color: 'red', count: 7, label: 'R' },
                { color: 'orange', count: 3, label: 'O' },
                { color: 'yellow', count: 4, label: 'Y' },
                { color: 'lightgreen', count: 6, label: 'G' },
                { color: 'lightblue', count: 12, label: 'L' },
                { color: 'purple', count: 6, label: 'P' },
                { color: 'pink', count: 4, label: 'K' }
            ];

            const packingFalse = [
                { color: 'red', count: 7, label: 'R' },
                { color: 'orange', count: 3, label: 'O' },
                { color: 'gray', count: 4, label: '-' },
                { color: 'yellow', count: 4, label: 'Y' },
                { color: 'gray', count: 3, label: '-' },
                { color: 'lightgreen', count: 6, label: 'G' },
                { color: 'gray', count: 1, label: '-' },
                { color: 'lightblue', count: 7, label: 'L' },
                { color: 'lightblue', count: 3, label: 'L' },
                { color: 'gray', count: 4, label: '-' },
                { color: 'purple', count: 6, label: 'P' },
                { color: 'gray', count: 1, label: '-' },
                { color: 'pink', count: 4, label: 'K' },
                { color: 'gray', count: 3, label: '-' }
            ];

            const packingTrue = [
                // Ligne 1: 7 R
                { color: 'red', count: 7, label: 'R' },
                // Ligne 2: 3 O + 4 Y (combinaison optimisée)
                { color: 'orange', count: 3, label: 'O' },
                { color: 'yellow', count: 4, label: 'Y' },
                // Ligne 3: 6 G + 1 gris
                { color: 'lightgreen', count: 6, label: 'G' },
                { color: 'gray', count: 1, label: '-' },
                // Ligne 4: 7 L (rangée complète)
                { color: 'lightblue', count: 7, label: 'L' },
                // Ligne 5: 3 L + 4 K (combinaison optimisée)
                { color: 'lightblue', count: 3, label: 'L' },
                { color: 'pink', count: 4, label: 'K' },
                // Ligne 6: 6 P + 1 gris
                { color: 'purple', count: 6, label: 'P' },
                { color: 'gray', count: 1, label: '-' }
            ];

            // Helper function to create blocks
            const createBlocks = (blocks) => {
                return blocks.map(block =>
                    block.count > 0 ? `<div class="block ${block.color}"></div>`.repeat(block.count) : ''
                ).join('');
            };

            // Helper function to create dataset rows
            const createDatasetRows = (dataset) => {
                return dataset.map(item =>
                    `<div class="dataset-row">${createBlocks([item])}</div>`
                ).join('');
            };

            // Create the HTML structure
            container.innerHTML = `
        <div class="container">
          <div class="sections-container">
            <div class="section">
              <label class="section-title">Dataset</label>
              <div class="dataset">
                ${createDatasetRows(dataset)}
              </div>
            </div>

            <div class="section">
              <label class="section-title">Packing = False</label>
              <div class="grid packing-false">
                ${createBlocks(packingFalse)}
              </div>
            </div>

            <div class="section">
              <label class="section-title">Packing = True</label>
              <div class="grid packing-true">
                ${createBlocks(packingTrue)}
              </div>
            </div>
          </div>
        </div>
      `;
        };

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
        } else {
            bootstrap();
        }
    })();
</script>