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`).
98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
---
|
|
// FileTabs — the package-file switcher inside the preview surface.
|
|
//
|
|
// A horizontal scroll of buttons, one per file in the submitted package
|
|
// (SKILL.md + references + scripts + templates). Click handling and the
|
|
// fetch-state machine are task 16's job; this component ships zero JS.
|
|
//
|
|
// `aria-label` is on the nav itself so the tablist announces as a unit.
|
|
// The `active` class on the selected file mirrors the legacy CSS so the
|
|
// verification engineer can re-point scripts/verify.mjs assertions without
|
|
// renaming.
|
|
|
|
interface PackageFile {
|
|
/** File name without directory prefix; the row label. */
|
|
name: string;
|
|
/** Kind tag rendered as the small uppercase eyebrow above the name. */
|
|
kind: string;
|
|
/** Absolute or repo-relative path used to fetch the source. */
|
|
path: string;
|
|
}
|
|
|
|
interface Props {
|
|
files: PackageFile[];
|
|
/** Name of the currently-selected file. */
|
|
currentFile?: string;
|
|
/** Accessible label for the tablist. Defaults to the skill-package label. */
|
|
ariaLabel?: string;
|
|
}
|
|
|
|
const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
|
|
---
|
|
|
|
<nav class="file-tabs" aria-label={ariaLabel}>
|
|
{
|
|
files.map((file) => (
|
|
<button
|
|
type="button"
|
|
class={file.name === currentFile ? 'active' : ''}
|
|
aria-pressed={file.name === currentFile}
|
|
data-file={file.name}
|
|
>
|
|
<span>{file.kind}</span>
|
|
{file.name}
|
|
</button>
|
|
))
|
|
}
|
|
</nav>
|
|
|
|
<style>
|
|
/* The dark-on-dark tab strip. Sits inside the preview surface, which is
|
|
the only dark block in the review panel. */
|
|
.file-tabs {
|
|
display: flex;
|
|
gap: 1px;
|
|
overflow-x: auto;
|
|
padding: 10px 14px;
|
|
background: var(--deep);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.file-tabs button {
|
|
display: grid;
|
|
gap: 1px;
|
|
min-width: max-content;
|
|
padding: 7px 10px;
|
|
color: var(--paper);
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font:
|
|
11px ui-monospace,
|
|
monospace;
|
|
}
|
|
|
|
.file-tabs button span {
|
|
color: var(--gold);
|
|
font-size: var(--step-09);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.file-tabs button.active,
|
|
.file-tabs button:hover {
|
|
color: var(--deep);
|
|
background: var(--gold);
|
|
}
|
|
|
|
.file-tabs button.active span,
|
|
.file-tabs button:hover span {
|
|
color: var(--deep);
|
|
}
|
|
|
|
.file-tabs button:focus-visible {
|
|
outline: 3px solid var(--red);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|