@uniweb/scholar 0.2.0 → 0.2.2

package/src/components/AuthorList.jsx

@@ -2,15 +2,66 @@
  * AuthorList Component
  *
  * Renders a formatted list of authors with optional ORCID links.
+ * Works with both Scholar-shaped author objects and CSL-JSON name objects.
  *
  * @module @uniweb/scholar/components/AuthorList
  */
 
 import React from 'react'
-import { formatAuthors } from '../bibliography/utils/authors.js'
 
 /**
- * AuthorList - Formatted author names
+ * Format a single author name for display.
+ *
+ * @param {{ family: string, given?: string, suffix?: string }} author
+ * @param {boolean} invertFirst - Show as "Last, First" (true) or "First Last" (false)
+ * @returns {string}
+ */
+function formatName(author, invertFirst = false) {
+  if (typeof author === 'string') return author
+
+  const family = author.family || ''
+  const given = author.given || ''
+  const suffix = author.suffix ? `, ${author.suffix}` : ''
+
+  if (!given) return family + suffix
+
+  return invertFirst
+    ? `${family}${suffix}, ${given}`
+    : `${given} ${family}${suffix}`
+}
+
+/**
+ * Format an array of authors into a display string.
+ *
+ * @param {Array} authors - Author objects
+ * @param {Object} options
+ * @param {string} [options.style='apa']
+ * @returns {string}
+ */
+function formatAuthorsText(authors, { style = 'apa' } = {}) {
+  if (!authors?.length) return ''
+
+  const useAmpersand = style === 'apa'
+  const invertFirst = style === 'apa' || style === 'chicago' || style === 'mla'
+
+  if (authors.length === 1) {
+    return formatName(authors[0], invertFirst)
+  }
+
+  if (authors.length === 2) {
+    const sep = useAmpersand ? ' & ' : ' and '
+    return formatName(authors[0], invertFirst) + sep + formatName(authors[1])
+  }
+
+  // 3+ authors
+  const allButLast = authors.slice(0, -1).map((a, i) => formatName(a, i === 0 && invertFirst))
+  const last = formatName(authors[authors.length - 1])
+  const sep = useAmpersand ? ', & ' : ', and '
+  return allButLast.join(', ') + sep + last
+}
+
+/**
+ * AuthorList - Formatted author names with optional ORCID links
  *
  * @param {Object} props
  * @param {Array|string} props.authors - Authors array or string
@@ -21,9 +72,6 @@ import { formatAuthors } from '../bibliography/utils/authors.js'
  *
  * @example
  * <AuthorList authors={[{ family: 'Smith', given: 'John', orcid: '0000-0001-2345-6789' }]} />
- *
- * @example
- * <AuthorList authors="Smith, John and Doe, Jane" style="mla" />
  */
 export function AuthorList({
   authors,
@@ -33,71 +81,48 @@ export function AuthorList({
   className,
   ...props
 }) {
-  // If authors is a string, just format it
+  // String authors — just display
   if (typeof authors === 'string') {
     return (
       <span className={className} {...props}>
-        {formatAuthors(authors, { style })}
+        {authors}
       </span>
     )
   }
 
-  // If no array or empty, return nothing
-  if (!authors?.length) {
-    return null
-  }
+  if (!authors?.length) return null
 
-  // Check if any author has ORCID
+  // If no ORCID to show, use simple formatted string
   const hasOrcid = showOrcid && authors.some((a) => a.orcid)
 
-  // If no ORCID to show, use simple formatted string
   if (!hasOrcid) {
     return (
       <span className={className} {...props}>
-        {formatAuthors(authors, { style })}
+        {formatAuthorsText(authors, { style })}
       </span>
     )
   }
 
   // Render with ORCID links
+  const useAmpersand = style === 'apa'
+
   return (
     <span className={className} {...props}>
       {authors.map((author, index) => {
         const isLast = index === authors.length - 1
         const isSecondToLast = index === authors.length - 2
+        const isFirst = index === 0
+        const invertFirst = isFirst && (style === 'apa' || style === 'chicago' || style === 'mla')
 
-        // Format name based on style and position
-        let name
-        if (typeof author === 'string') {
-          name = author
-        } else {
-          const suffix = author.suffix ? `, ${author.suffix}` : ''
-          if (style === 'apa') {
-            // APA: Last, F.
-            const initials = author.given
-              ? author.given
-                  .split(/\s+/)
-                  .map((n) => `${n.charAt(0)}.`)
-                  .join(' ')
-              : ''
-            name = initials
-              ? `${author.family}${suffix}, ${initials}`
-              : author.family + suffix
-          } else {
-            // Default: First Last
-            name = author.given
-              ? `${author.given} ${author.family}${suffix}`
-              : author.family + suffix
-          }
-        }
+        const name = formatName(author, invertFirst)
 
         // Determine separator
         let sep = ''
         if (!isLast) {
           if (authors.length === 2) {
-            sep = style === 'apa' ? ' & ' : ' and '
+            sep = useAmpersand ? ' & ' : ' and '
           } else if (isSecondToLast) {
-            sep = style === 'apa' ? ', & ' : ', and '
+            sep = useAmpersand ? ', & ' : ', and '
           } else {
             sep = separator
           }

package/src/components/BibtexBlock.jsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useState } from 'react'
-import { exportBibtex } from '../bibliography/parsers/bibtex.js'
+import { exportBibtex } from '../bibliography/parsers/index.js'
 
 /**
  * BibtexBlock - Display copyable BibTeX entry

package/src/components/CiteButton.jsx

@@ -1,21 +1,22 @@
 /**
  * CiteButton Component
  *
- * A dropdown button that lets users copy citations in various formats.
+ * A dropdown button that lets users copy citations in various formats,
+ * including rich text (HTML with formatting preserved for paste into Word/Docs).
  *
  * @module @uniweb/scholar/components/CiteButton
  */
 
 import React, { useState, useRef, useEffect } from 'react'
-import { formatReference } from '../bibliography/formatters/index.js'
-import { exportBibtex } from '../bibliography/parsers/bibtex.js'
+import { formatReference, getAvailableStyles } from '../bibliography/formatters/index.js'
+import { exportBibtex } from '../bibliography/parsers/index.js'
 
 /**
  * CiteButton - Copy citation dropdown
  *
  * @param {Object} props
- * @param {Object} props.publication - Publication data
- * @param {Array<string>} [props.styles=['apa', 'mla', 'chicago', 'ieee', 'bibtex']] - Available citation styles
+ * @param {Object} props.publication - Publication data (Scholar or CSL-JSON)
+ * @param {Array<string>} [props.styles] - Style names to show (defaults to all + bibtex)
  * @param {string} [props.label='Cite'] - Button label
  * @param {string} [props.className] - Additional CSS classes
  *
@@ -24,7 +25,7 @@ import { exportBibtex } from '../bibliography/parsers/bibtex.js'
  */
 export function CiteButton({
   publication,
-  styles = ['apa', 'mla', 'chicago', 'ieee', 'bibtex'],
+  styles,
   label = 'Cite',
   className,
   ...props
@@ -33,6 +34,16 @@ export function CiteButton({
   const [copied, setCopied] = useState(null)
   const dropdownRef = useRef(null)
 
+  // Default: all available citation styles + bibtex
+  const availableStyles = getAvailableStyles()
+  const styleIds = styles || [...availableStyles.map((s) => s.id), 'bibtex']
+
+  // Build label map from available styles
+  const styleLabels = Object.fromEntries(
+    availableStyles.map((s) => [s.id, s.label])
+  )
+  styleLabels.bibtex = 'BibTeX'
+
   // Close dropdown when clicking outside
   useEffect(() => {
     function handleClickOutside(event) {
@@ -47,17 +58,35 @@ export function CiteButton({
     }
   }, [isOpen])
 
-  // Copy citation to clipboard
+  /**
+   * Copy citation to clipboard.
+   * For citation styles, copies both plain text and rich HTML.
+   */
   async function copyToClipboard(style) {
     try {
-      let text
       if (style === 'bibtex') {
-        text = exportBibtex(publication)
+        const text = exportBibtex(publication)
+        await navigator.clipboard.writeText(text)
       } else {
-        text = formatReference(publication, { style })
+        const entry = formatReference(publication, { style })
+
+        // Try rich-text copy (HTML + plain text) for formatting in Word/Docs
+        if (typeof ClipboardItem !== 'undefined') {
+          try {
+            const item = new ClipboardItem({
+              'text/html': new Blob([entry.html], { type: 'text/html' }),
+              'text/plain': new Blob([entry.text], { type: 'text/plain' }),
+            })
+            await navigator.clipboard.write([item])
+          } catch {
+            // Fallback to plain text if rich copy fails
+            await navigator.clipboard.writeText(entry.text)
+          }
+        } else {
+          await navigator.clipboard.writeText(entry.text)
+        }
       }
 
-      await navigator.clipboard.writeText(text)
       setCopied(style)
       setTimeout(() => setCopied(null), 2000)
     } catch (err) {
@@ -65,14 +94,6 @@ export function CiteButton({
     }
   }
 
-  const styleLabels = {
-    apa: 'APA',
-    mla: 'MLA',
-    chicago: 'Chicago',
-    ieee: 'IEEE',
-    bibtex: 'BibTeX',
-  }
-
   return (
     <div
       ref={dropdownRef}
@@ -88,21 +109,34 @@ export function CiteButton({
           display: 'inline-flex',
           alignItems: 'center',
           gap: '0.25rem',
-          padding: '0.375rem 0.75rem',
-          fontSize: '0.875rem',
-          fontWeight: '500',
-          color: '#374151',
-          backgroundColor: '#f3f4f6',
-          border: '1px solid #d1d5db',
-          borderRadius: '0.375rem',
+          padding: '0.125rem 0.5rem',
+          fontSize: '0.8125rem',
+          fontWeight: '400',
+          color: 'var(--subtle, #6b7280)',
+          backgroundColor: 'transparent',
+          border: 'none',
+          borderRadius: '0.25rem',
           cursor: 'pointer',
+          letterSpacing: '0.01em',
         }}
+        onMouseEnter={(e) => { e.target.style.color = 'var(--heading, #111827)' }}
+        onMouseLeave={(e) => { if (!isOpen) e.target.style.color = 'var(--subtle, #6b7280)' }}
       >
+        {/* Quote icon */}
+        <svg
+          style={{ width: '0.875rem', height: '0.875rem', opacity: 0.7, flexShrink: 0 }}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
+        </svg>
         {label}
         <svg
           style={{
-            width: '1rem',
-            height: '1rem',
+            width: '0.625rem',
+            height: '0.625rem',
+            opacity: 0.5,
             transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
             transition: 'transform 0.15s',
           }}
@@ -110,12 +144,7 @@ export function CiteButton({
           stroke="currentColor"
           viewBox="0 0 24 24"
         >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>
 
@@ -127,16 +156,17 @@ export function CiteButton({
             top: '100%',
             left: 0,
             marginTop: '0.25rem',
-            minWidth: '8rem',
-            backgroundColor: '#ffffff',
-            border: '1px solid #e5e7eb',
-            borderRadius: '0.375rem',
-            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+            minWidth: '8.5rem',
+            backgroundColor: 'var(--section, #ffffff)',
+            border: '1px solid var(--border, #e5e7eb)',
+            borderRadius: '0.5rem',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
             zIndex: 50,
             overflow: 'hidden',
+            padding: '0.25rem',
           }}
         >
-          {styles.map((style) => (
+          {styleIds.map((style) => (
             <button
               key={style}
               type="button"
@@ -144,17 +174,18 @@ export function CiteButton({
               style={{
                 display: 'block',
                 width: '100%',
-                padding: '0.5rem 1rem',
-                fontSize: '0.875rem',
+                padding: '0.375rem 0.625rem',
+                fontSize: '0.8125rem',
                 textAlign: 'left',
-                color: copied === style ? '#059669' : '#374151',
+                color: copied === style ? '#059669' : 'var(--body, #374151)',
                 backgroundColor: copied === style ? '#ecfdf5' : 'transparent',
                 border: 'none',
+                borderRadius: '0.25rem',
                 cursor: 'pointer',
               }}
               onMouseEnter={(e) => {
                 if (copied !== style) {
-                  e.target.style.backgroundColor = '#f3f4f6'
+                  e.target.style.backgroundColor = 'var(--card, #f3f4f6)'
                 }
               }}
               onMouseLeave={(e) => {
@@ -163,7 +194,9 @@ export function CiteButton({
                 }
               }}
             >
-              {copied === style ? '✓ Copied!' : styleLabels[style] || style.toUpperCase()}
+              {copied === style
+                ? '✓ Copied!'
+                : styleLabels[style] || style.toUpperCase()}
             </button>
           ))}
         </div>

package/src/components/DoiLink.jsx

@@ -50,6 +50,12 @@ export function DoiLink({
     case 'link':
       displayText = doiUrl
       break
+    case 'label':
+      displayText = 'DOI'
+      break
+    case 'icon':
+      displayText = null
+      break
     case 'full':
     default:
       displayText = `DOI: ${normalizedDoi}`
@@ -61,35 +67,35 @@ export function DoiLink({
       target="_blank"
       rel="noopener noreferrer"
       className={className}
+      title={`DOI: ${normalizedDoi}`}
       style={{
-        color: '#2563eb',
+        color: 'var(--subtle, #6b7280)',
         textDecoration: 'none',
         display: 'inline-flex',
         alignItems: 'center',
         gap: '0.25rem',
+        fontSize: '0.8125rem',
+        transition: 'color 0.15s',
       }}
+      onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--primary, #2563eb)' }}
+      onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--subtle, #6b7280)' }}
       {...props}
     >
-      {displayText}
-      {showIcon && (
-        <svg
-          style={{
-            width: '0.875rem',
-            height: '0.875rem',
-            opacity: 0.7,
-          }}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-          />
-        </svg>
-      )}
+      {/* DOI icon — external link */}
+      <svg
+        style={{ width: '0.875rem', height: '0.875rem', flexShrink: 0 }}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+        />
+      </svg>
+      {displayText && <span>{displayText}</span>}
     </a>
   )
 }

package/src/index.js

@@ -4,21 +4,31 @@
  * Provides math rendering, bibliographic references, and inline citations
  * for academic and scientific content.
  *
+ * Bibliography formatting is powered by @citestyle/* compiled styles,
+ * giving access to 6 citation styles with structured HTML output,
+ * year-suffix disambiguation, and cite collapsing.
+ *
  * @module @uniweb/scholar
  */
 
-// Math components
-export { Math, Equation, EquationRef, loadKatex } from './math/index.js'
+// Math components — scholar no longer ships a math renderer. Plain
+// LaTeX in markdown (`$x$`, `$$x$$`, fenced ```math) is compiled to
+// MathML by the content pipeline and rendered natively by the browser.
+// <Equation> / <EquationRef> cover numbered cross-referenceable
+// equations, consuming pre-compiled MathML via `content.math`.
+export { Equation, EquationRef } from './math/index.js'
 
-// Bibliography utilities
+// Bibliography — formatting, parsing, normalization
 export {
   formatReference,
-  formatAuthors,
+  getAvailableStyles,
   parseBibtex,
   exportBibtex,
+  toCslJson,
+  fromCslJson,
 } from './bibliography/index.js'
 
-// Citation system
+// Citation system — registry-powered
 export {
   CitationProvider,
   Citation,

package/src/math/Equation.jsx

@@ -1,31 +1,49 @@
 /**
  * Equation Component
  *
- * Renders a numbered equation with an optional label for cross-referencing.
- * Equations are numbered sequentially within a CitationProvider context.
+ * Renders a numbered display equation from pre-compiled MathML.
+ *
+ * The MathML is produced by Uniweb's content pipeline at build time
+ * (see @uniweb/content-reader/math). This component does no math
+ * rendering of its own — it wraps the MathML string with numbering and
+ * cross-reference machinery, which means it is fully SSR-safe and adds
+ * zero runtime math library cost to sites.
+ *
+ * Authors write labeled display equations in markdown:
+ *
+ *   ```math:einstein
+ *   E = mc^2
+ *   ```
+ *
+ * A foundation's section component then iterates `content.math` and
+ * renders each labeled entry through <Equation>:
+ *
+ *   <EquationProvider>
+ *     {content.math.map(m => (
+ *       <Equation key={m.id} id={m.id} mathml={m.mathml} />
+ *     ))}
+ *   </EquationProvider>
  *
  * @module @uniweb/scholar/math/Equation
  */
 
-import React, { useEffect, useState, useContext, useId } from 'react'
-import { loadKatex } from './katex-loader.js'
+import React, { useContext, useEffect, useId } from 'react'
 
 /**
- * Context for tracking equation numbers
- * Exported for use by EquationRef
+ * Context for tracking equation numbers. Exported for use by EquationRef.
  */
 export const EquationContext = React.createContext(null)
 
 /**
- * Provider for equation numbering
- * Wrap your content with this to enable automatic equation numbering.
+ * Provider for equation numbering. Wrap section content with this to
+ * enable automatic sequential numbering across all <Equation> instances.
  *
  * @param {Object} props
  * @param {React.ReactNode} props.children
  * @param {number} [props.startNumber=1] - Starting equation number
  */
 export function EquationProvider({ children, startNumber = 1 }) {
-  const [equations, setEquations] = useState(new Map())
+  const [equations, setEquations] = React.useState(new Map())
   const counterRef = React.useRef(startNumber)
 
   const register = React.useCallback((id) => {
@@ -39,7 +57,7 @@ export function EquationProvider({ children, startNumber = 1 }) {
 
   const getNumber = React.useCallback(
     (id) => equations.get(id),
-    [equations]
+    [equations],
   )
 
   return (
@@ -50,77 +68,35 @@ export function EquationProvider({ children, startNumber = 1 }) {
 }
 
 /**
- * Hook to access equation context
+ * Hook for foundation code that needs direct access to the numbering
+ * context (e.g., to render a list of all equations on a page).
  */
 export function useEquations() {
   return useContext(EquationContext)
 }
 
 /**
- * Equation - Numbered display equation with optional label
+ * Equation — numbered display equation rendered from pre-compiled MathML.
  *
  * @param {Object} props
- * @param {string} props.children - LaTeX expression
- * @param {string} [props.id] - Unique identifier for cross-referencing
- * @param {string} [props.label] - Custom label (defaults to equation number)
- * @param {string} [props.className] - Additional CSS classes
- *
- * @example
- * <EquationProvider>
- *   <Equation id="einstein">E = mc^2</Equation>
- *   <p>As shown in <EquationRef id="einstein" />, energy equals...</p>
- * </EquationProvider>
+ * @param {string} [props.id] - Identifier for cross-referencing. If omitted,
+ *   a stable React id is generated but will not be discoverable by <EquationRef>.
+ * @param {string} props.mathml - Pre-compiled MathML HTML string from the
+ *   content pipeline (e.g., `content.math[i].mathml`).
+ * @param {string} [props.label] - Override the auto-number with a custom label.
+ * @param {string} [props.className] - Additional CSS classes on the wrapper.
  */
-export function Equation({ children, id, label, className, ...props }) {
-  const [html, setHtml] = useState(null)
+export function Equation({ id, mathml, label, className, ...props }) {
+  const ctx = useContext(EquationContext)
   const generatedId = useId()
   const equationId = id || generatedId
-  const ctx = useContext(EquationContext)
-
-  // Extract LaTeX string from children
-  const latex = typeof children === 'string' ? children.trim() : ''
 
-  // Register equation for numbering
   useEffect(() => {
-    if (ctx) {
-      ctx.register(equationId)
-    }
+    if (ctx) ctx.register(equationId)
   }, [ctx, equationId])
 
-  // Get equation number
   const number = ctx?.getNumber(equationId)
-
-  // Render LaTeX
-  useEffect(() => {
-    if (!latex) return
-
-    let cancelled = false
-
-    async function render() {
-      const katex = await loadKatex()
-      if (cancelled || !katex) return
-
-      try {
-        const rendered = katex.renderToString(latex, {
-          displayMode: true,
-          throwOnError: false,
-        })
-        if (!cancelled) {
-          setHtml(rendered)
-        }
-      } catch (e) {
-        console.warn('[Equation] Render error:', e.message)
-      }
-    }
-
-    render()
-
-    return () => {
-      cancelled = true
-    }
-  }, [latex])
-
-  const displayLabel = label || (number ? `(${number})` : '')
+  const displayLabel = label !== undefined ? label : number ? `(${number})` : ''
 
   return (
     <div
@@ -135,16 +111,10 @@ export function Equation({ children, id, label, className, ...props }) {
       }}
       {...props}
     >
-      {/* Equation content */}
-      <div style={{ flex: 1, textAlign: 'center' }}>
-        {html ? (
-          <span dangerouslySetInnerHTML={{ __html: html }} />
-        ) : (
-          <code>{latex}</code>
-        )}
-      </div>
-
-      {/* Equation number */}
+      <div
+        style={{ flex: 1, textAlign: 'center' }}
+        dangerouslySetInnerHTML={{ __html: mathml || '' }}
+      />
       {displayLabel && (
         <span
           style={{