@uniweb/scholar 0.2.0 → 0.2.1

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,27 @@
  * 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'
 
-// 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/bibliography/formatters/apa.js

@@ -1,352 +0,0 @@
-/**
- * APA 7th Edition Reference Formatter
- *
- * Formats references according to APA 7th edition guidelines.
- *
- * @module @uniweb/scholar/bibliography/formatters/apa
- */
-
-import { formatApaAuthors, parseAuthorString } from '../utils/authors.js'
-import { formatApaDate, getYear } from '../utils/dates.js'
-
-/**
- * Format a journal article in APA style
- *
- * @param {Object} pub - Publication data
- * @returns {string}
- */
-function formatArticle(pub) {
-  const parts = []
-
-  // Authors
-  const authors = Array.isArray(pub.authors)
-    ? pub.authors
-    : parseAuthorString(pub.authors || pub.author)
-  if (authors.length) {
-    parts.push(formatApaAuthors(authors))
-  }
-
-  // Year
-  const year = getYear(pub.year || pub.date)
-  parts.push(`(${year || 'n.d.'}).`)
-
-  // Title
-  if (pub.title) {
-    parts.push(`${pub.title}.`)
-  }
-
-  // Journal (italicized in actual rendering)
-  if (pub.journal) {
-    let journalPart = pub.journal
-    if (pub.volume) {
-      journalPart += `, ${pub.volume}`
-      if (pub.issue) {
-        journalPart += `(${pub.issue})`
-      }
-    }
-    if (pub.pages) {
-      journalPart += `, ${pub.pages}`
-    }
-    parts.push(`${journalPart}.`)
-  }
-
-  // DOI
-  if (pub.doi) {
-    const doi = pub.doi.startsWith('http')
-      ? pub.doi
-      : `https://doi.org/${pub.doi}`
-    parts.push(doi)
-  }
-
-  return parts.join(' ')
-}
-
-/**
- * Format a book in APA style
- *
- * @param {Object} pub - Publication data
- * @returns {string}
- */
-function formatBook(pub) {
-  const parts = []
-
-  // Authors or editors
-  const authors = Array.isArray(pub.authors)
-    ? pub.authors
-    : parseAuthorString(pub.authors || pub.author)
-  const editors = Array.isArray(pub.editors)
-    ? pub.editors
-    : parseAuthorString(pub.editors || pub.editor)
-
-  if (authors.length) {
-    parts.push(formatApaAuthors(authors))
-  } else if (editors.length) {
-    parts.push(`${formatApaAuthors(editors)} (Ed${editors.length > 1 ? 's' : ''}).`)
-  }
-
-  // Year
-  const year = getYear(pub.year || pub.date)
-  parts.push(`(${year || 'n.d.'}).`)
-
-  // Title (italicized in actual rendering)
-  if (pub.title) {
-    let title = pub.title
-    if (pub.edition && pub.edition !== '1') {
-      title += ` (${pub.edition} ed.)`
-    }
-    parts.push(`${title}.`)
-  }
-
-  // Publisher
-  if (pub.publisher) {
-    parts.push(`${pub.publisher}.`)
-  }
-
-  // DOI or URL
-  if (pub.doi) {
-    const doi = pub.doi.startsWith('http')
-      ? pub.doi
-      : `https://doi.org/${pub.doi}`
-    parts.push(doi)
-  } else if (pub.url) {
-    parts.push(pub.url)
-  }
-
-  return parts.join(' ')
-}
-
-/**
- * Format a book chapter in APA style
- *
- * @param {Object} pub - Publication data
- * @returns {string}
- */
-function formatInBook(pub) {
-  const parts = []
-
-  // Chapter authors
-  const authors = Array.isArray(pub.authors)
-    ? pub.authors
-    : parseAuthorString(pub.authors || pub.author)
-  if (authors.length) {
-    parts.push(formatApaAuthors(authors))
-  }
-
-  // Year
-  const year = getYear(pub.year || pub.date)
-  parts.push(`(${year || 'n.d.'}).`)
-
-  // Chapter title
-  if (pub.title) {
-    parts.push(`${pub.title}.`)
-  }
-
-  // Book editors and title
-  const editors = Array.isArray(pub.editors)
-    ? pub.editors
-    : parseAuthorString(pub.editors || pub.editor)
-  if (editors.length || pub.bookTitle) {
-    let bookPart = 'In'
-    if (editors.length) {
-      bookPart += ` ${formatApaAuthors(editors)} (Ed${editors.length > 1 ? 's' : ''}),`
-    }
-    if (pub.bookTitle) {
-      bookPart += ` ${pub.bookTitle}`
-    }
-    if (pub.pages) {
-      bookPart += ` (pp. ${pub.pages})`
-    }
-    parts.push(`${bookPart}.`)
-  }
-
-  // Publisher
-  if (pub.publisher) {
-    parts.push(`${pub.publisher}.`)
-  }
-
-  // DOI
-  if (pub.doi) {
-    const doi = pub.doi.startsWith('http')
-      ? pub.doi
-      : `https://doi.org/${pub.doi}`
-    parts.push(doi)
-  }
-
-  return parts.join(' ')
-}
-
-/**
- * Format conference proceedings in APA style
- *
- * @param {Object} pub - Publication data
- * @returns {string}
- */
-function formatConference(pub) {
-  const parts = []
-
-  // Authors
-  const authors = Array.isArray(pub.authors)
-    ? pub.authors
-    : parseAuthorString(pub.authors || pub.author)
-  if (authors.length) {
-    parts.push(formatApaAuthors(authors))
-  }
-
-  // Year
-  const year = getYear(pub.year || pub.date)
-  parts.push(`(${year || 'n.d.'}).`)
-
-  // Title
-  if (pub.title) {
-    parts.push(`${pub.title}.`)
-  }
-
-  // Conference/Proceedings
-  if (pub.booktitle || pub.conference) {
-    let confPart = `In ${pub.booktitle || pub.conference}`
-    if (pub.pages) {
-      confPart += ` (pp. ${pub.pages})`
-    }
-    parts.push(`${confPart}.`)
-  }
-
-  // Publisher or location
-  if (pub.publisher) {
-    parts.push(`${pub.publisher}.`)
-  } else if (pub.address || pub.location) {
-    parts.push(`${pub.address || pub.location}.`)
-  }
-
-  // DOI
-  if (pub.doi) {
-    const doi = pub.doi.startsWith('http')
-      ? pub.doi
-      : `https://doi.org/${pub.doi}`
-    parts.push(doi)
-  }
-
-  return parts.join(' ')
-}
-
-/**
- * Format a website/webpage in APA style
- *
- * @param {Object} pub - Publication data
- * @returns {string}
- */
-function formatWebsite(pub) {
-  const parts = []
-
-  // Authors or organization
-  const authors = Array.isArray(pub.authors)
-    ? pub.authors
-    : parseAuthorString(pub.authors || pub.author)
-  if (authors.length) {
-    parts.push(formatApaAuthors(authors))
-  } else if (pub.organization) {
-    parts.push(pub.organization)
-  }
-
-  // Date
-  const date = formatApaDate(pub.date || pub.year)
-  parts.push(`(${date}).`)
-
-  // Title
-  if (pub.title) {
-    parts.push(`${pub.title}.`)
-  }
-
-  // Site name
-  if (pub.siteName && pub.siteName !== pub.organization) {
-    parts.push(`${pub.siteName}.`)
-  }
-
-  // URL
-  if (pub.url) {
-    parts.push(pub.url)
-  }
-
-  return parts.join(' ')
-}
-
-/**
- * Format a thesis/dissertation in APA style
- *
- * @param {Object} pub - Publication data
- * @returns {string}
- */
-function formatThesis(pub) {
-  const parts = []
-
-  // Author
-  const authors = Array.isArray(pub.authors)
-    ? pub.authors
-    : parseAuthorString(pub.authors || pub.author)
-  if (authors.length) {
-    parts.push(formatApaAuthors(authors))
-  }
-
-  // Year
-  const year = getYear(pub.year || pub.date)
-  parts.push(`(${year || 'n.d.'}).`)
-
-  // Title (italicized)
-  if (pub.title) {
-    parts.push(`${pub.title}`)
-  }
-
-  // Thesis type and institution
-  const type = pub.type || 'Doctoral dissertation'
-  if (pub.school || pub.institution) {
-    parts.push(`[${type}, ${pub.school || pub.institution}].`)
-  } else {
-    parts.push(`[${type}].`)
-  }
-
-  // URL or database
-  if (pub.url) {
-    parts.push(pub.url)
-  }
-
-  return parts.join(' ')
-}
-
-/**
- * Format a reference in APA 7th edition style
- *
- * @param {Object} pub - Publication data
- * @param {Object} [options] - Formatting options
- * @returns {string}
- */
-export function formatApa(pub, options = {}) {
-  const type = (pub.type || pub.entryType || 'article').toLowerCase()
-
-  switch (type) {
-    case 'article':
-    case 'journal':
-      return formatArticle(pub)
-    case 'book':
-      return formatBook(pub)
-    case 'inbook':
-    case 'incollection':
-    case 'chapter':
-      return formatInBook(pub)
-    case 'inproceedings':
-    case 'conference':
-    case 'proceedings':
-      return formatConference(pub)
-    case 'webpage':
-    case 'website':
-    case 'online':
-      return formatWebsite(pub)
-    case 'thesis':
-    case 'phdthesis':
-    case 'mastersthesis':
-      return formatThesis(pub)
-    default:
-      // Generic format
-      return formatArticle(pub)
-  }
-}
-
-export default formatApa