From 914a813b8f316320c313ba316214335fce6d3aa9 Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sat, 5 Sep 2026 07:09:01 +0000 Subject: [PATCH] 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). --- src/components/blocks/PreviewPane.astro | 343 ++++++++++++++++++++++++ 1 file changed, 343 insertions(+) create mode 100644 src/components/blocks/PreviewPane.astro diff --git a/src/components/blocks/PreviewPane.astro b/src/components/blocks/PreviewPane.astro new file mode 100644 index 0000000..4224ddd --- /dev/null +++ b/src/components/blocks/PreviewPane.astro @@ -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; +--- + +
+
+
+ {title} + {subtitle} +
+
+ + +
+
+ + { + rendered ? ( +
+ +
+ ) : ( + 
+        
+          
+        
+
+ ) + } +
+ +