mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandCursor
7648af0095
Restyle the live picker to match the site kinpaku kit, persist pick mode in localStorage, fix DESIGN.md color swatches in the parser, and land the neo-kinpaku site refresh with new tokens, assets, palette script, and detector rules. Co-authored-by: Cursor <cursoragent@cursor.com>
36 lines
1.5 KiB
JavaScript
36 lines
1.5 KiB
JavaScript
import { skillFocusAreas, slopFocusAreas, dimensionGuidelineCounts } from '../data.js';
|
|
import { foundationAnimations } from './foundation-animations.js';
|
|
|
|
// Renders the seven-discipline grid. The container picks its data source via
|
|
// `data-source="foundation"` (the original "loaded on every command" copy) or
|
|
// `data-source="slop"` (the slop-tells-we-prevent copy used on /catch-the-slop).
|
|
// Both share the icon + plinth + card chrome so we get the elegant magazine
|
|
// rail twice without two parallel components.
|
|
export function initFoundationGrid() {
|
|
const containers = document.querySelectorAll('.foundation-grid');
|
|
if (!containers.length) return;
|
|
|
|
containers.forEach((container) => {
|
|
const source = container.dataset.source || 'foundation';
|
|
const data = source === 'slop' ? slopFocusAreas['impeccable'] : skillFocusAreas['impeccable'];
|
|
if (!data) return;
|
|
const showCount = source !== 'slop';
|
|
|
|
container.innerHTML = data.map((dim, i) => `
|
|
<div class="foundation-column">
|
|
<div class="foundation-card">
|
|
<div class="foundation-card-viz">
|
|
${foundationAnimations[dim.area] || ''}
|
|
</div>
|
|
<div class="foundation-card-header">
|
|
<span class="foundation-card-label">${dim.area}</span>
|
|
${showCount ? `<span class="foundation-card-count">${dimensionGuidelineCounts[dim.area] || ''}</span>` : ''}
|
|
</div>
|
|
<p class="foundation-card-detail">${dim.detail}</p>
|
|
</div>
|
|
<div class="foundation-plinth plinth-${i + 1}"></div>
|
|
</div>
|
|
`).join('');
|
|
});
|
|
}
|