feat(blocks): add PreviewPane for review desk file preview
Static markup-only component for the dark code/markdown preview surface. Renders the preview header (title + actions), the file-tabs slot, and either the source body or the rendered Markdown body based on the 'rendered' prop. Toggling between modes is task 16. Preserves every CSS hook asserted by scripts/verify.mjs: .preview, .preview-title, .preview-markdown, .markdown-preview, max-height:540px, .markdown-table-wrap, .markdown-frontmatter, .markdown-toc, plus the dark surface treatment. Visual fidelity gaps listed in the task report. Did not: introduce a markdown renderer (task 16 hydrates the body); port the cat-marker CSS hook to the new surface (legacy only).
This commit is contained in:
Marcos Paulo
@@ -0,0 +1,343 @@
|
|||||||
|
---
|
||||||
|
// PreviewPane — the dark code/markdown preview block in the review panel.
|
||||||
|
//
|
||||||
|
// The pane has three body modes (source / rendered Markdown / diff / lens)
|
||||||
|
// plus the file-tab strip. The lens view is rendered by ChangeLens instead,
|
||||||
|
// so this component only owns the source and rendered-markdown bodies. The
|
||||||
|
// toggle between them is task 16's job; this component ships zero JS.
|
||||||
|
//
|
||||||
|
// CSS hooks asserted by scripts/verify.mjs that live in the legacy
|
||||||
|
// stylesheet and must survive in the new architecture:
|
||||||
|
// .preview — the section wrapper
|
||||||
|
// .preview-title — the upper-left title cluster
|
||||||
|
// .preview-markdown— the "Preview Markdown" / "View source" toggle
|
||||||
|
// .markdown-preview— the rendered-HTML container
|
||||||
|
// max-height:540px — the bounded reading surface
|
||||||
|
// .markdown-table-wrap, .markdown-frontmatter, .markdown-toc
|
||||||
|
// — sub-blocks inside the rendered Markdown
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** Label rendered above the file name. Source: "FILE PREVIEW". */
|
||||||
|
title: string;
|
||||||
|
/** Smaller subtitle that names the version. Source: e.g.
|
||||||
|
* "ORIGINAL / SAFETY-REDACTED WHERE NEEDED". */
|
||||||
|
subtitle: string;
|
||||||
|
/** True when the "Preview Markdown" toggle is active — the body should
|
||||||
|
* render the slot as HTML, otherwise the slot is treated as plain
|
||||||
|
* source. */
|
||||||
|
rendered: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, subtitle, rendered } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="preview" aria-label="File preview">
|
||||||
|
<header>
|
||||||
|
<div class="preview-title">
|
||||||
|
<span>{title}</span>
|
||||||
|
<small>{subtitle}</small>
|
||||||
|
</div>
|
||||||
|
<div class="preview-actions">
|
||||||
|
<slot name="actions" />
|
||||||
|
<button type="button" class="preview-markdown" aria-pressed={rendered} data-render>
|
||||||
|
{rendered ? 'View source' : 'Preview Markdown'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<slot name="tabs" />
|
||||||
|
{
|
||||||
|
rendered ? (
|
||||||
|
<div class="markdown-preview" aria-label="Rendered Markdown preview">
|
||||||
|
<slot name="rendered" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<pre>
|
||||||
|
<code>
|
||||||
|
<slot name="source" />
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* The whole pane is the dark surface — same --deep as the rest of the
|
||||||
|
preview tooling. The header border separates the action bar from the
|
||||||
|
tab strip from the body. */
|
||||||
|
.preview {
|
||||||
|
border: 1px solid var(--ink);
|
||||||
|
background: var(--deep);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview > header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 14px;
|
||||||
|
color: var(--paper);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title cluster: eyebrow line + subtitle. */
|
||||||
|
.preview-title {
|
||||||
|
display: grid;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-title span {
|
||||||
|
color: var(--gold);
|
||||||
|
font:
|
||||||
|
700 10px ui-monospace,
|
||||||
|
monospace;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Subtitle below the eyebrow. --paper is the closest canonical token
|
||||||
|
for the desaturated blue-grey of the legacy subtitle. */
|
||||||
|
.preview-title small {
|
||||||
|
color: var(--paper);
|
||||||
|
font:
|
||||||
|
var(--step-0) / 1.35 ui-monospace,
|
||||||
|
monospace;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action buttons live in the right cluster. The component lays them out;
|
||||||
|
the call site fills the `actions` slot. */
|
||||||
|
.preview-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview button {
|
||||||
|
padding: 9px 11px;
|
||||||
|
color: var(--paper);
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
font:
|
||||||
|
700 10px ui-monospace,
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview button:hover {
|
||||||
|
background: var(--deep);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The Markdown toggle is deliberately distinct from the other actions. */
|
||||||
|
.preview button.preview-markdown {
|
||||||
|
color: var(--ink);
|
||||||
|
border-color: var(--gold);
|
||||||
|
background: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview button.preview-markdown:hover,
|
||||||
|
.preview button.preview-markdown[aria-pressed='true'] {
|
||||||
|
color: var(--paper);
|
||||||
|
background: var(--red);
|
||||||
|
border-color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Source body: bounded scroll, monospaced, the canonical dark code
|
||||||
|
surface. The max-height hook is the one verify.mjs asserts. */
|
||||||
|
.preview pre {
|
||||||
|
max-height: 540px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 24px;
|
||||||
|
overflow: auto;
|
||||||
|
color: var(--paper);
|
||||||
|
background: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code text inside the source surface. --paper is the closest canonical
|
||||||
|
token for the desaturated blue-grey of the legacy code colour. */
|
||||||
|
.preview code {
|
||||||
|
font:
|
||||||
|
var(--step-0) / 1.65 ui-monospace,
|
||||||
|
monospace;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rendered Markdown body: same bounded reading surface. */
|
||||||
|
.markdown-preview {
|
||||||
|
max-height: 540px;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 24px;
|
||||||
|
color: var(--paper);
|
||||||
|
background: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview > :first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(h1),
|
||||||
|
.markdown-preview :global(h2),
|
||||||
|
.markdown-preview :global(h3),
|
||||||
|
.markdown-preview :global(h4),
|
||||||
|
.markdown-preview :global(h5),
|
||||||
|
.markdown-preview :global(h6) {
|
||||||
|
margin: 1.5em 0 0.5em;
|
||||||
|
color: var(--paper);
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(h1) {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(h2) {
|
||||||
|
font-size: 1.45em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(h3) {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(p),
|
||||||
|
.markdown-preview :global(li) {
|
||||||
|
max-width: 78ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(li + li) {
|
||||||
|
margin-top: 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(a) {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(code) {
|
||||||
|
padding: 0.12em 0.3em;
|
||||||
|
color: var(--paper);
|
||||||
|
background: var(--deep);
|
||||||
|
white-space: break-spaces;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(pre) {
|
||||||
|
max-height: none;
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 14px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(pre code) {
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(blockquote) {
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0.3em 1em;
|
||||||
|
border-left: 3px solid var(--gold);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(hr) {
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Frontmatter: the two-column key/value grid that opens the rendered
|
||||||
|
surface when a `---` block is present. */
|
||||||
|
.markdown-preview :global(.markdown-frontmatter) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content 1fr;
|
||||||
|
gap: 3px 14px;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
font:
|
||||||
|
11px/1.5 ui-monospace,
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-frontmatter dt) {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-frontmatter dd) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table wrapper: horizontal scroll on narrow viewports. */
|
||||||
|
.markdown-preview :global(.markdown-table-wrap) {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
margin: 1em 0;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(table) {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 460px;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: var(--step-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(th),
|
||||||
|
.markdown-preview :global(td) {
|
||||||
|
padding: 9px 11px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(th) {
|
||||||
|
color: var(--gold);
|
||||||
|
background: var(--deep);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table of contents: the "ON THIS PAGE" nav that opens the body when
|
||||||
|
the Markdown has two or more headings. */
|
||||||
|
.markdown-preview :global(.markdown-toc) {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--deep);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-toc > span) {
|
||||||
|
color: var(--gold);
|
||||||
|
font:
|
||||||
|
700 10px ui-monospace,
|
||||||
|
monospace;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-toc ol) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 7px 13px;
|
||||||
|
margin: 9px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-toc li.level-2) {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-toc li.level-3) {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-toc a) {
|
||||||
|
font:
|
||||||
|
12px/1.3 Arial,
|
||||||
|
sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview :global(.markdown-toc a:hover) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.preview > header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user