feat: align component CSS with research-article-template

- Note: left border accent style with color-mix variants (info/success/danger)
- QuoteBlock: decorative open-quote mark, large text, author/source footer
- Accordion: template-matching border, bg, chevron, open state highlight
- Sidenote: muted text, generous padding (matches Sidenote.astro)
- Reference: proper spacing and caption styling
- Stack: responsive breakpoints matching template (768/1100px)
- Tables: zebra stripes, template header bg, vertical dividers
- Wide/fullWidth: proper overflow layout in editor
- Add PDF download button to hero meta section (using showPdf flag)
- Update publisher HTML styles for all components to match template

Made-with: Cursor

backend/src/publisher/html-renderer.ts

@@ -131,77 +131,145 @@ ${css.print}
 @keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
 
-/* Note component */
+/* Note component - aligned with template Note.astro */
 div[data-component="note"] {
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 1rem 1.25rem;
-  margin: 1em 0;
-  background: var(--surface-bg, rgba(0,0,0,0.02));
+  background: var(--surface-bg);
+  border-left: 2px solid var(--border-color);
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 20px 18px;
+  margin: var(--block-spacing-y, 1em) 0;
 }
-div[data-component="note"][data-variant="warning"] {
-  border-color: #f59e0b;
-  background: rgba(245,158,11,0.06);
+div[data-component="note"][variant="info"] {
+  border-left-color: #f39c12;
+  background: color-mix(in oklab, #f39c12 10%, var(--surface-bg));
 }
-div[data-component="note"][data-variant="danger"] {
-  border-color: #ef4444;
-  background: rgba(239,68,68,0.06);
+div[data-component="note"][variant="success"] {
+  border-left-color: #2ecc71;
+  background: color-mix(in oklab, #2ecc71 8%, var(--surface-bg));
 }
-div[data-component="note"][data-variant="success"] {
-  border-color: #22c55e;
-  background: rgba(34,197,94,0.06);
+div[data-component="note"][variant="danger"] {
+  border-left-color: #e74c3c;
+  background: color-mix(in oklab, #e74c3c 8%, var(--surface-bg));
+}
+div[data-component="note"] .note__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 6px;
 }
 div[data-component="note"] > *:first-child { margin-top: 0; }
 div[data-component="note"] > *:last-child { margin-bottom: 0; }
 
-/* Quote component */
+/* Quote component - aligned with template Quote.astro */
 div[data-component="quoteBlock"] {
-  border-left: 3px solid var(--primary-color, var(--border-color));
-  padding: 1rem 1.25rem;
-  margin: 1.5em 0;
-  font-style: italic;
+  position: relative;
+  margin: 32px 0;
+  max-width: 600px;
+  padding: 0;
+  border: none;
+  background: none;
+}
+div[data-component="quoteBlock"]::before {
+  content: '\\201C';
+  position: absolute;
+  top: -24px;
+  left: -30px;
+  font-size: 8rem;
+  font-weight: 400;
+  color: var(--text-color);
+  opacity: 0.05;
+  z-index: -1;
+  line-height: 1;
+  pointer-events: none;
+}
+div[data-component="quoteBlock"] .quote-text {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  color: var(--text-color);
+}
+div[data-component="quoteBlock"] .quote-footer {
+  font-size: 0.875rem;
   color: var(--muted-color);
+  margin-top: 12px;
+}
+div[data-component="quoteBlock"] .quote-author::before {
+  content: '\\2014\\00A0';
+  font-style: normal;
+}
+div[data-component="quoteBlock"] .quote-author {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--text-color);
+  opacity: 0.85;
+}
+div[data-component="quoteBlock"] .quote-source {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--text-color);
+  opacity: 0.85;
 }
 div[data-component="quoteBlock"] > *:first-child { margin-top: 0; }
 div[data-component="quoteBlock"] > *:last-child { margin-bottom: 0; }
 
-/* Sidenote component */
+/* Sidenote component - aligned with template Sidenote.astro */
 div[data-component="sidenote"] {
-  font-size: 0.85em;
+  font-size: 0.9rem;
   color: var(--muted-color);
-  border-left: 2px solid var(--border-color);
-  padding-left: 0.75rem;
+  padding: 0 30px;
   margin: 1em 0;
 }
 div[data-component="sidenote"] > *:first-child { margin-top: 0; }
 div[data-component="sidenote"] > *:last-child { margin-bottom: 0; }
 
-/* Reference wrapper */
+/* Reference wrapper - aligned with template Reference.astro */
 div[data-component="reference"] {
-  margin: 1.5em 0;
+  margin: 0 0 var(--spacing-4, 1rem);
+}
+div[data-component="reference"] .reference__caption {
+  text-align: left;
+  font-size: 0.9rem;
+  color: var(--muted-color);
+  margin-top: 6px;
 }
 div[data-component="reference"] > *:first-child { margin-top: 0; }
 div[data-component="reference"] > *:last-child { margin-bottom: 0; }
 
-/* Stack / multi-column layout */
+/* Stack / multi-column layout - aligned with template Stack.astro */
 div[data-component="stack"] {
   display: grid;
   gap: 1rem;
-  margin: 1.5em 0;
+  margin: var(--block-spacing-y, 1.5em) 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
-div[data-component="stack"][data-layout="2-column"] { grid-template-columns: 1fr 1fr; }
-div[data-component="stack"][data-layout="3-column"] { grid-template-columns: 1fr 1fr 1fr; }
-div[data-component="stack"][data-layout="4-column"] { grid-template-columns: 1fr 1fr 1fr 1fr; }
+div[data-component="stack"][data-layout="2-column"] { grid-template-columns: repeat(2, 1fr); }
+div[data-component="stack"][data-layout="3-column"] { grid-template-columns: repeat(3, 1fr); }
+div[data-component="stack"][data-layout="4-column"] { grid-template-columns: repeat(4, 1fr); }
+div[data-component="stack"][data-layout="auto"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+div[data-component="stack"]:not([data-layout]) { grid-template-columns: repeat(2, 1fr); }
 div[data-component="stack"][data-gap="small"] { gap: 0.5rem; }
 div[data-component="stack"][data-gap="large"] { gap: 2rem; }
-div[data-type="stack-column"] { min-width: 0; }
+div[data-type="stack-column"] { min-width: 0; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; }
 div[data-type="stack-column"] > *:first-child { margin-top: 0; }
 div[data-type="stack-column"] > *:last-child { margin-bottom: 0; }
-@media (max-width: 640px) {
-  div[data-component="stack"] { grid-template-columns: 1fr !important; }
+@media (max-width: 768px) {
+  div[data-component="stack"][data-layout="2-column"],
+  div[data-component="stack"][data-layout="3-column"],
+  div[data-component="stack"][data-layout="4-column"],
+  div[data-component="stack"][data-layout="auto"],
+  div[data-component="stack"]:not([data-layout]) { grid-template-columns: 1fr !important; }
+}
+@media (min-width: 769px) and (max-width: 1100px) {
+  div[data-component="stack"][data-layout="3-column"],
+  div[data-component="stack"][data-layout="4-column"],
+  div[data-component="stack"][data-layout="auto"] { grid-template-columns: repeat(2, 1fr) !important; }
 }
 
-/* Wide / full-width helpers for published content (if not already from _layout.css) */
+/* Wide / full-width helpers */
 div[data-component="wide"] {
   width: min(1100px, 100vw - 64px);
   margin-left: 50%;
@@ -212,34 +280,55 @@ div[data-component="fullWidth"] {
   margin-left: calc(50% - 50vw);
 }
 
-/* Accordion as details/summary */
+/* Accordion - aligned with template Accordion.astro */
 details[data-component="accordion"] {
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--table-border-radius, 8px);
+  background: var(--surface-bg);
   padding: 0;
-  margin: 1em 0;
+  margin: 0 0 var(--spacing-4, 1em);
+  transition: box-shadow 180ms ease, border-color 180ms ease;
+}
+details[data-component="accordion"][open] {
+  border-color: color-mix(in oklab, var(--border-color), var(--primary-color) 20%);
 }
-
 details[data-component="accordion"] > summary {
-  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
   cursor: pointer;
   font-weight: 600;
   color: var(--text-color);
   list-style: none;
   user-select: none;
 }
-
+details[data-component="accordion"][open] > summary {
+  border-bottom: 1px solid var(--border-color);
+}
 details[data-component="accordion"] > summary::-webkit-details-marker { display: none; }
-
-details[data-component="accordion"] > summary::before {
-  content: "\\25B8";
+details[data-component="accordion"] > summary::marker { content: ""; }
+details[data-component="accordion"] > summary::after {
+  content: '';
   display: inline-block;
-  margin-right: 0.5rem;
-  transition: transform 0.2s;
+  width: 0.5em;
+  height: 0.5em;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 220ms ease;
+  opacity: 0.6;
+  flex-shrink: 0;
 }
-
-details[data-component="accordion"][open] > summary::before { transform: rotate(90deg); }
-details[data-component="accordion"] > .accordion-content { padding: 0 1rem 1rem; }
+details[data-component="accordion"][open] > summary::after {
+  transform: rotate(45deg);
+}
+details[data-component="accordion"] > .accordion-content {
+  padding: 8px;
+}
+details[data-component="accordion"] > .accordion-content > *:first-child { margin-top: 0; }
+details[data-component="accordion"] > .accordion-content > *:last-child { margin-bottom: 0; }
 
 /* Footer */
 .footer {

frontend/src/editor/components/WrapperView.tsx

@@ -14,12 +14,11 @@ import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import type { NodeViewProps } from "@tiptap/react";
 import type { ComponentDef, ComponentField } from "./registry";
 
-// Variant color mapping for the Note component
 const VARIANT_COLORS: Record<string, { border: string; bg: string; icon: string }> = {
-  neutral: { border: "rgba(255,255,255,0.12)", bg: "rgba(255,255,255,0.03)", icon: "📝" },
-  info: { border: "rgba(59,130,246,0.35)", bg: "rgba(59,130,246,0.06)", icon: "ℹ️" },
-  success: { border: "rgba(34,197,94,0.35)", bg: "rgba(34,197,94,0.06)", icon: "✅" },
-  danger: { border: "rgba(239,68,68,0.35)", bg: "rgba(239,68,68,0.06)", icon: "⚠️" },
+  neutral: { border: "var(--border-color)", bg: "var(--surface-bg)", icon: "📝" },
+  info: { border: "#f39c12", bg: "color-mix(in oklab, #f39c12 10%, var(--surface-bg))", icon: "💡" },
+  success: { border: "#2ecc71", bg: "color-mix(in oklab, #2ecc71 8%, var(--surface-bg))", icon: "✅" },
+  danger: { border: "#e74c3c", bg: "color-mix(in oklab, #e74c3c 8%, var(--surface-bg))", icon: "⚠️" },
 };
 
 function FieldInput({
@@ -115,21 +114,50 @@ export function makeWrapperView(def: ComponentDef) {
 
     const emoji = (node.attrs.emoji as string) || colors?.icon || def.icon;
 
-    const borderColor = colors?.border || "rgba(255,255,255,0.1)";
-    const bgColor = colors?.bg || "rgba(255,255,255,0.02)";
+    const borderColor = colors?.border || "var(--border-color)";
+    const bgColor = colors?.bg || "var(--surface-bg)";
 
     const isAccordion = def.name === "accordion";
+    const isNote = def.name === "note";
+    const isQuote = def.name === "quoteBlock";
+    const isSidenote = def.name === "sidenote";
+
+    const wrapperStyle: React.CSSProperties = isNote
+      ? {
+          borderLeft: `2px solid ${borderColor}`,
+          borderTopRightRadius: 8,
+          borderBottomRightRadius: 8,
+          background: bgColor,
+          padding: 0,
+          margin: "0.75em 0",
+        }
+      : isQuote
+        ? {
+            position: "relative" as const,
+            margin: "32px 0",
+            maxWidth: 600,
+          }
+        : isSidenote
+          ? {
+              borderRadius: 8,
+              padding: 0,
+              margin: "0.75em 0",
+              fontSize: "0.9rem",
+              color: "var(--muted-color)",
+            }
+          : {
+              border: `1px solid ${borderColor}`,
+              borderRadius: "var(--table-border-radius, 8px)",
+              background: bgColor,
+              margin: "0.75em 0",
+              overflow: "hidden",
+            };
 
     return (
       <NodeViewWrapper
         data-component={def.name}
-        style={{
-          border: `1px solid ${borderColor}`,
-          borderRadius: 8,
-          background: bgColor,
-          margin: "0.75em 0",
-          overflow: "hidden",
-        }}
+        data-variant={variant || undefined}
+        style={wrapperStyle}
       >
         {/* Header chrome - not editable by ProseMirror */}
         <div
@@ -138,8 +166,8 @@ export function makeWrapperView(def: ComponentDef) {
             display: "flex",
             alignItems: "center",
             gap: 8,
-            padding: "8px 12px",
-            borderBottom: collapsed ? "none" : `1px solid ${borderColor}`,
+            padding: isNote ? "8px 18px" : isQuote ? "0" : "8px 12px",
+            borderBottom: collapsed || isQuote ? "none" : isNote ? "none" : `1px solid ${borderColor}`,
             userSelect: "none",
             cursor: isAccordion ? "pointer" : "default",
           }}
@@ -193,7 +221,7 @@ export function makeWrapperView(def: ComponentDef) {
         <div
           style={{
             display: collapsed ? "none" : "block",
-            padding: "8px 12px",
+            padding: isNote ? "0 18px 12px" : isQuote ? "0" : isSidenote ? "0 30px" : "8px 12px",
           }}
         >
           <NodeViewContent className="component-content" />

frontend/src/editor/frontmatter/FrontmatterHero.tsx

@@ -28,7 +28,7 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   const hasAuthors = data.authors.length > 0;
   const hasAffiliations = data.affiliations.length > 0;
   const multipleAffiliations = data.affiliations.length > 1;
-  const hasMeta = hasAuthors || data.published || data.doi;
+  const hasMeta = hasAuthors || data.published || data.doi || data.showPdf;
 
   return (
     <div>
@@ -145,6 +145,18 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
                 inline
               />
             </div>
+
+            {/* PDF cell */}
+            {data.showPdf && (
+              <div className="meta-container-cell meta-container-cell--pdf">
+                <h3>PDF</h3>
+                <p style={{ margin: 0, lineHeight: 1 }}>
+                  <a className="button" href="#" onClick={(e) => e.preventDefault()}>
+                    Download PDF
+                  </a>
+                </p>
+              </div>
+            )}
           </div>
         </header>
       )}

frontend/src/styles/article.css

@@ -200,40 +200,51 @@
   margin: 2em 0;
 }
 
-/* Tables */
+/* Tables - aligned with template _table.css */
 .tiptap table {
   border-collapse: collapse;
+  table-layout: auto;
   width: 100%;
   margin: 1em 0;
   overflow: hidden;
-  border-radius: 6px;
-  border: 1px solid var(--border-light);
+  border-radius: var(--table-border-radius, 6px);
+  border: 1px solid var(--border-color);
+  background: var(--surface-bg);
 }
 
 .tiptap th,
 .tiptap td {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border-light);
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
   text-align: left;
-  font-size: 0.875rem;
+  font-size: 15px;
+  vertical-align: top;
   min-width: 80px;
 }
 
+.tiptap th:last-child,
+.tiptap td:last-child {
+  border-right: none;
+}
+
 .tiptap th {
-  background: var(--code-bg);
-  color: var(--muted-color);
+  background: var(--table-header-bg, var(--code-bg));
   font-weight: 600;
-  font-size: 0.8125rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .tiptap td {
   color: var(--text-color);
 }
 
-.tiptap tr:hover td {
-  background: var(--bg-hover);
+.tiptap tbody tr:nth-child(odd) td {
+  background: var(--table-row-odd-bg, rgba(255,255,255,0.02));
+}
+
+.tiptap tbody tr:last-child td {
+  border-bottom: none;
 }
 
 /* Links - aligned with template (_base.css .content-grid main a) */
@@ -413,7 +424,10 @@
   font-style: italic;
 }
 
-/* Custom component blocks */
+/* -----------------------------------------------------------------------
+   Custom component blocks (aligned with research-article-template)
+   ----------------------------------------------------------------------- */
+
 .component-content > *:first-child {
   margin-top: 0;
 }
@@ -422,6 +436,81 @@
   margin-bottom: 0;
 }
 
+/* --- Note --- */
+.tiptap [data-component="note"] .component-content {
+  font-size: 0.95rem;
+}
+
+/* --- Quote block (decorative) --- */
+.tiptap [data-component="quoteBlock"] {
+  position: relative;
+}
+
+.tiptap [data-component="quoteBlock"]::before {
+  content: '\201C';
+  position: absolute;
+  top: -24px;
+  left: -30px;
+  font-size: 8rem;
+  font-family: var(--default-font-family);
+  font-weight: 400;
+  color: var(--text-color);
+  opacity: 0.05;
+  z-index: -1;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.tiptap [data-component="quoteBlock"] .component-content {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+
+/* --- Accordion --- */
+.tiptap [data-component="accordion"][open] {
+  border-color: color-mix(in oklab, var(--border-color), var(--primary-color) 20%);
+}
+
+/* --- Sidenote --- */
+.tiptap [data-component="sidenote"] .component-content {
+  font-size: 0.9rem;
+  color: var(--muted-color);
+}
+
+/* --- Reference / figure --- */
+.tiptap [data-component="reference"] {
+  margin-bottom: var(--spacing-4, 1rem);
+}
+
+.tiptap [data-component="reference"] .component-content {
+  margin-bottom: 0;
+}
+
+/* --- Wide container --- */
+.tiptap [data-component="wide"] {
+  width: calc(100% + 160px);
+  margin-left: -80px;
+  margin-right: -80px;
+}
+
+/* --- Full width container --- */
+.tiptap [data-component="fullWidth"] {
+  width: calc(100% + 300px);
+  margin-left: -150px;
+  margin-right: -150px;
+}
+
+@media (max-width: 1100px) {
+  .tiptap [data-component="wide"],
+  .tiptap [data-component="fullWidth"] {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 /* Glossary inline node */
 .glossary-node {
   position: relative;