const packageFiles = {
  skill: { label: 'SKILL.md', title: 'The operating contract', body: 'The one file that should always be loaded. Define the exact trigger, the ordered workflow, safety limits, and the evidence the agent returns.', code: '---\nname: review-ui\ndescription: Review a changed UI for focus, reflow, and motion.\n---\n\n1. Inspect the changed interaction.\n2. Run the UI checks.\n3. Return findings with evidence.' },
  references: { label: 'references/', title: 'Facts, only when needed', body: 'Keep conditional detail out of the main instruction. A dialog pattern, framework caveat, or accessibility checklist belongs here when it is not needed for every review.', code: 'references/\n└── accessibility.md\n    ├── keyboard interaction patterns\n    └── focus and reflow checklist' },
  scripts: { label: 'scripts/', title: 'Mechanics that should not depend on memory', body: 'Turn deterministic checks into runnable tools. The agent still judges the result, but it should not have to recreate a viewport test or filename rule by hand.', code: 'scripts/\n└── check-reflow.mjs\n    └── checks 320px, 1280px, and 4K widths' },
  assets: { label: 'assets/', title: 'Starting material, not hidden instructions', body: 'Use assets for templates and examples a person or agent can copy. Keep them clearly named so package readers can choose the right starting point.', code: 'assets/\n├── review-report.md\n└── focus-test-fixture.html' }
};

const preview = document.querySelector('#package-preview');
const buttons = [...document.querySelectorAll('[data-package-file]')];
function renderPackage(file) {
  const item = packageFiles[file];
  preview.classList.remove('is-swapping');
  void preview.offsetWidth;
  preview.classList.add('is-swapping');
  preview.innerHTML = `<span>SELECTED / ${item.label}</span><h3>${item.title}</h3><p>${item.body}</p><pre><code>${item.code}</code></pre>`;
  buttons.forEach((button) => {
    const selected = button.dataset.packageFile === file;
    button.classList.toggle('active', selected);
    button.setAttribute('aria-selected', String(selected));
  });
}
buttons.forEach((button) => button.addEventListener('click', () => renderPackage(button.dataset.packageFile)));
renderPackage('skill');