feat(blocks): add FileTabs for review desk package switcher

Static markup-only component for the package-file switcher inside the preview surface. Renders one button per file with the kind eyebrow and file name; applies the 'active' class on the current file. Click handling is task 16. The dark tab strip uses --deep for the surface and --gold for the active state; close to the legacy palette but with a few mid-tones documented in the task report. Did not: extract the eyebrow into a separate component (it is a two-property chip, not a reusable element); introduce client: directives.
2026-09-05 07:08:45 +00:00
parent 82601e104e
commit c6b87b74ae
1 changed files with 97 additions and 0 deletions
@@ -0,0 +1,97 @@
+---
+// 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-0);
+    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>