Marcos Paulo
6bfae2033e
Extended the typography `--step-*` scale to cover the ad-hoc pixel values used across components (10px to 48px). Added overlay tokens `--white-14`, `--white-23`, `--white-25`, `--white-31`. Canonicalized one-off legacy color hex values in `ReviewDetail`, `ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer` to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`, `--muted`). Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px) with the closest approved named tokens (`560px`, `800px`, `1100px`).
120 lines
3.1 KiB
TypeScript
120 lines
3.1 KiB
TypeScript
---
|
|
// SkillPackage — the four-file skill-package picker (SKILL.md, references/,
|
|
// scripts/, assets/). Buttons carry the `data-skill-file` hook asserted by
|
|
// `scripts/verify.mjs`.
|
|
//
|
|
// Static shell: the initial file is marked active and selected. The block is
|
|
// paired with a `<article>` detail panel by the parent page; this component
|
|
// renders only the picker.
|
|
|
|
type Localized = { en: string; pt: string };
|
|
|
|
interface PackageFile {
|
|
id: 'skill' | 'references' | 'scripts' | 'assets' | string;
|
|
/** Path rendered inside `<code>`, e.g. "SKILL.md". */
|
|
path: string;
|
|
/** Helper copy under the path. */
|
|
small: string | Localized;
|
|
}
|
|
|
|
interface Props {
|
|
files: PackageFile[];
|
|
initial?: string;
|
|
packageLabel?: string | Localized;
|
|
}
|
|
|
|
const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE' } = Astro.props;
|
|
---
|
|
|
|
<div class="skill-package" role="tree" aria-label="Skill package files">
|
|
<span class="skill-package-label">
|
|
{
|
|
typeof packageLabel === 'string' ? (
|
|
packageLabel
|
|
) : (
|
|
<>
|
|
<span data-language-content="en">{packageLabel.en}</span>
|
|
<span data-language-content="pt" hidden>
|
|
{packageLabel.pt}
|
|
</span>
|
|
</>
|
|
)
|
|
}
|
|
</span>
|
|
{
|
|
files.map((file) => (
|
|
<button
|
|
class:list={['skill-package-row', { active: file.id === initial }]}
|
|
data-skill-file={file.id}
|
|
role="treeitem"
|
|
aria-selected={file.id === initial}
|
|
>
|
|
<code>{file.path}</code>
|
|
<small>
|
|
{typeof file.small === 'string' ? (
|
|
file.small
|
|
) : (
|
|
<>
|
|
<span data-language-content="en">{file.small.en}</span>
|
|
<span data-language-content="pt" hidden>
|
|
{file.small.pt}
|
|
</span>
|
|
</>
|
|
)}
|
|
</small>
|
|
</button>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<style>
|
|
.skill-package {
|
|
display: grid;
|
|
align-content: start;
|
|
color: var(--paper);
|
|
background: var(--blue);
|
|
}
|
|
|
|
.skill-package-label {
|
|
padding: 20px;
|
|
color: var(--gold);
|
|
border-bottom: 1px solid var(--white-25);
|
|
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
|
|
font:
|
|
500 10px 'DM Mono',
|
|
monospace;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.skill-package-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
padding: 17px 20px;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--white-25);
|
|
color: var(--paper);
|
|
background: transparent;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.skill-package-row code {
|
|
/* token-gap: source uses 12px with default weight (no 500); no --step-* covers 12px; owner design-system-keeper */
|
|
font:
|
|
12px 'DM Mono',
|
|
monospace;
|
|
}
|
|
.skill-package-row small {
|
|
opacity: 0.7;
|
|
}
|
|
.skill-package-row.active {
|
|
/* House style: left bar via inset box-shadow, not a border. */
|
|
box-shadow: inset 4px 0 0 var(--gold);
|
|
}
|
|
.skill-package-row:focus-visible {
|
|
outline: 3px solid var(--gold);
|
|
outline-offset: -3px;
|
|
}
|
|
</style>
|