@uniweb/kit 0.1.5 → 0.1.6

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
+    "./styled": "./src/styled/index.js",
     "./styles": "./src/styles/index.css",
     "./search": "./src/search/index.js"
   },
@@ -36,7 +37,7 @@
   },
   "dependencies": {
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.1.8"
+    "@uniweb/core": "0.1.11"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/Asset/Asset.jsx

@@ -1,55 +1,47 @@
 /**
- * Asset Component
+ * Asset Component (Plain)
  *
- * File asset preview with download functionality.
+ * File download link with basic functionality.
+ * This is the unstyled version - for styled card with preview,
+ * use @uniweb/kit/tailwind.
  *
  * @module @uniweb/kit/Asset
  */
 
-import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react'
+import React, { useCallback, forwardRef, useImperativeHandle } from 'react'
 import { cn } from '../../utils/index.js'
 import { FileLogo } from '../FileLogo/index.js'
-import { Image } from '../Image/index.js'
 import { useWebsite } from '../../hooks/useWebsite.js'
 
 /**
- * Check if file is an image
- * @param {string} filename
- * @returns {boolean}
- */
-function isImageFile(filename) {
-  if (!filename) return false
-  const ext = filename.toLowerCase().split('.').pop()
-  return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)
-}
-
-/**
- * Asset - File preview with download
+ * Asset - File download component (plain/unstyled)
  *
  * @param {Object} props
  * @param {string|Object} props.value - Asset identifier or object
  * @param {Object} [props.profile] - Profile object for asset resolution
- * @param {boolean} [props.withDownload=true] - Show download button
- * @param {string} [props.className] - Additional CSS classes
+ * @param {boolean} [props.showIcon=true] - Show file type icon
+ * @param {string} [props.iconSize='24'] - Icon size
+ * @param {string} [props.className] - CSS classes for the link
+ * @param {string} [props.iconClassName] - CSS classes for the icon
+ * @param {React.ReactNode} [props.children] - Custom content (overrides default filename display)
  *
  * @example
- * <Asset value="document.pdf" profile={profile} />
+ * <Asset value="document.pdf" className="text-blue-600 hover:underline" />
  *
  * @example
- * <Asset value={{ src: "/files/report.pdf", filename: "report.pdf" }} />
+ * <Asset value={{ src: "/files/report.pdf", filename: "report.pdf" }}>
+ *   Download Report
+ * </Asset>
  */
 export const Asset = forwardRef(function Asset(
-  { value, profile, withDownload = true, className, ...props },
+  { value, profile, showIcon = true, iconSize = '24', className, iconClassName, children, ...props },
   ref
 ) {
   const { localize } = useWebsite()
-  const [imageError, setImageError] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
 
   // Resolve asset info
   let src = ''
   let filename = ''
-  let alt = ''
 
   if (typeof value === 'string') {
     src = value
@@ -57,7 +49,6 @@ export const Asset = forwardRef(function Asset(
   } else if (value && typeof value === 'object') {
     src = value.src || value.url || ''
     filename = value.filename || value.name || src.split('/').pop() || ''
-    alt = value.alt || filename
   }
 
   // Use profile to resolve asset if available
@@ -65,17 +56,15 @@ export const Asset = forwardRef(function Asset(
     const assetInfo = profile.getAssetInfo(value, true, filename)
     src = assetInfo?.src || src
     filename = assetInfo?.filename || filename
-    alt = assetInfo?.alt || alt
   }
 
-  const isImage = isImageFile(filename)
-
   // Handle download
-  const handleDownload = useCallback(async () => {
+  const handleDownload = useCallback(async (e) => {
     if (!src) return
 
+    e.preventDefault()
+
     try {
-      // Try to trigger download
       const downloadUrl = src.includes('?') ? `${src}&download=true` : `${src}?download=true`
       const response = await fetch(downloadUrl)
       const blob = await response.blob()
@@ -98,63 +87,24 @@ export const Asset = forwardRef(function Asset(
     triggerDownload: handleDownload
   }), [handleDownload])
 
-  // Handle image error
-  const handleImageError = useCallback(() => {
-    setImageError(true)
-  }, [])
-
   if (!src) return null
 
   return (
-    <div
-      className={cn(
-        'relative inline-block rounded-lg overflow-hidden border border-gray-200',
-        'transition-shadow hover:shadow-md',
-        className
-      )}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+    <a
+      href={src}
+      onClick={handleDownload}
+      className={cn('inline-flex items-center gap-2', className)}
+      title={localize({
+        en: `Download ${filename}`,
+        fr: `Télécharger ${filename}`
+      })}
       {...props}
     >
-      {/* Preview */}
-      <div className="w-32 h-32 flex items-center justify-center bg-gray-50">
-        {isImage && !imageError ? (
-          <Image
-            src={src}
-            alt={alt}
-            className="w-full h-full object-cover"
-            onError={handleImageError}
-          />
-        ) : (
-          <FileLogo filename={filename} size="48" className="text-gray-400" />
-        )}
-      </div>
-
-      {/* Filename */}
-      <div className="px-2 py-1 text-xs text-gray-600 truncate max-w-[128px]" title={filename}>
-        {filename}
-      </div>
-
-      {/* Download overlay */}
-      {withDownload && (
-        <button
-          onClick={handleDownload}
-          className={cn(
-            'absolute inset-0 flex items-center justify-center',
-            'bg-black/50 text-white transition-opacity',
-            isHovered ? 'opacity-100' : 'opacity-0'
-          )}
-          aria-label={localize({
-            en: 'Download file',
-            fr: 'Télécharger le fichier'
-          })}
-        >
-          <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-          </svg>
-        </button>
+      {showIcon && (
+        <FileLogo filename={filename} size={iconSize} className={iconClassName} />
       )}
-    </div>
+      {children || filename}
+    </a>
   )
 })
 

package/src/components/Media/Media.jsx

@@ -1,12 +1,9 @@
 /**
- * Media Component
+ * Media Component (Plain)
  *
- * Video player supporting:
- * - YouTube embeds
- * - Vimeo embeds
- * - Local/direct video files
- * - Thumbnail facades
- * - Playback tracking
+ * Video player supporting YouTube, Vimeo, and local video files.
+ * This is the unstyled version - for styled facade with play button,
+ * use @uniweb/kit/tailwind.
  *
  * @module @uniweb/kit/Media
  */
@@ -17,8 +14,6 @@ import { detectMediaType } from '../../utils/index.js'
 
 /**
  * Extract YouTube video ID from URL
- * @param {string} url
- * @returns {string|null}
  */
 function getYouTubeId(url) {
   if (!url) return null
@@ -28,8 +23,6 @@ function getYouTubeId(url) {
 
 /**
  * Extract Vimeo video ID from URL
- * @param {string} url
- * @returns {string|null}
  */
 function getVimeoId(url) {
   if (!url) return null
@@ -37,27 +30,10 @@ function getVimeoId(url) {
   return match?.[1] || null
 }
 
-/**
- * Get thumbnail URL for a video
- * @param {string} src - Video URL
- * @param {string} type - Media type
- * @returns {string|null}
- */
-function getVideoThumbnail(src, type) {
-  if (type === 'youtube') {
-    const id = getYouTubeId(src)
-    return id ? `https://img.youtube.com/vi/${id}/maxresdefault.jpg` : null
-  }
-  // Vimeo requires API call, return null for now
-  return null
-}
-
 /**
  * YouTube Player Component
  */
-function YouTubePlayer({ videoId, autoplay, muted, loop, onReady, onStateChange, className }) {
-  const iframeRef = useRef(null)
-
+function YouTubePlayer({ videoId, autoplay, muted, loop, className }) {
   const params = new URLSearchParams({
     enablejsapi: '1',
     autoplay: autoplay ? '1' : '0',
@@ -70,9 +46,8 @@ function YouTubePlayer({ videoId, autoplay, muted, loop, onReady, onStateChange,
 
   return (
     <iframe
-      ref={iframeRef}
       src={`https://www.youtube.com/embed/${videoId}?${params}`}
-      className={cn('w-full h-full', className)}
+      className={className}
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowFullScreen
       title="YouTube video"
@@ -94,7 +69,7 @@ function VimeoPlayer({ videoId, autoplay, muted, loop, className }) {
   return (
     <iframe
       src={`https://player.vimeo.com/video/${videoId}?${params}`}
-      className={cn('w-full h-full', className)}
+      className={className}
       allow="autoplay; fullscreen; picture-in-picture"
       allowFullScreen
       title="Vimeo video"
@@ -138,133 +113,57 @@ function LocalVideo({ src, autoplay, muted, loop, controls, poster, onProgress,
       controls={controls}
       poster={poster}
       playsInline
-      className={cn('w-full h-full object-cover', className)}
+      className={className}
     />
   )
 }
 
 /**
- * Play Button Overlay
- */
-function PlayButton({ onClick, className }) {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'absolute inset-0 flex items-center justify-center',
-        'bg-black/30 hover:bg-black/40 transition-colors',
-        'group cursor-pointer',
-        className
-      )}
-      aria-label="Play video"
-    >
-      <div className="w-16 h-16 rounded-full bg-white/90 group-hover:bg-white flex items-center justify-center transition-colors">
-        <svg className="w-8 h-8 text-gray-900 ml-1" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M8 5v14l11-7z" />
-        </svg>
-      </div>
-    </button>
-  )
-}
-
-/**
- * Media - Video player component
+ * Media - Video player component (plain/unstyled)
  *
  * @param {Object} props
  * @param {string|Object} props.src - Video URL or media object
  * @param {Object} [props.media] - Media object with src/caption
- * @param {string} [props.thumbnail] - Thumbnail URL
+ * @param {string} [props.poster] - Poster/thumbnail URL for local video
  * @param {boolean} [props.autoplay=false] - Auto-play video
  * @param {boolean} [props.muted=false] - Mute video
  * @param {boolean} [props.loop=false] - Loop video
  * @param {boolean} [props.controls=true] - Show controls
- * @param {boolean} [props.facade=false] - Show thumbnail with play button
  * @param {string} [props.aspectRatio='16/9'] - Aspect ratio
- * @param {string} [props.className] - Additional CSS classes
+ * @param {string} [props.className] - CSS classes for the container
+ * @param {string} [props.videoClassName] - CSS classes for the video element
  * @param {Function} [props.onProgress] - Progress callback for tracking
- * @param {Object} [props.block] - Block object for event tracking
  *
  * @example
- * // YouTube video
- * <Media src="https://youtube.com/watch?v=abc123" />
+ * <Media src="https://youtube.com/watch?v=abc123" className="rounded-lg" />
  *
  * @example
- * // With thumbnail facade
- * <Media
- *   src="https://youtube.com/watch?v=abc123"
- *   thumbnail="/images/video-poster.jpg"
- *   facade
- * />
- *
- * @example
- * // Local video
- * <Media src="/videos/intro.mp4" controls autoplay={false} />
+ * <Media src="/videos/intro.mp4" controls className="w-full" />
  */
 export function Media({
   src,
   media,
-  thumbnail,
+  poster,
   autoplay = false,
   muted = false,
   loop = false,
   controls = true,
-  facade = false,
   aspectRatio = '16/9',
   className,
+  videoClassName,
   onProgress,
-  block,
   ...props
 }) {
-  const [showVideo, setShowVideo] = useState(!facade)
-
   // Normalize source
   const videoSrc = typeof src === 'string' ? src : (src?.src || media?.src || '')
-  const caption = media?.caption || src?.caption || ''
 
   // Detect video type
   const mediaType = detectMediaType(videoSrc)
 
-  // Get thumbnail
-  const thumbnailSrc = thumbnail || getVideoThumbnail(videoSrc, mediaType)
-
-  // Handle play click (for facade mode)
-  const handlePlay = useCallback(() => {
-    setShowVideo(true)
-  }, [])
-
-  // Handle progress tracking
-  const handleProgress = useCallback((data) => {
-    onProgress?.(data)
-
-    // Track via block if available
-    if (block?.trackEvent && typeof window !== 'undefined' && window.uniweb?.analytics?.initialized) {
-      block.trackEvent(`video_milestone_${data.milestone}`, {
-        milestone: `${data.milestone}%`,
-        src: videoSrc
-      })
-    }
-  }, [onProgress, block, videoSrc])
-
-  // Render facade (thumbnail with play button)
-  if (facade && !showVideo && thumbnailSrc) {
-    return (
-      <div
-        className={cn('relative overflow-hidden', className)}
-        style={{ aspectRatio }}
-        {...props}
-      >
-        <img
-          src={thumbnailSrc}
-          alt={caption || 'Video thumbnail'}
-          className="w-full h-full object-cover"
-        />
-        <PlayButton onClick={handlePlay} />
-      </div>
-    )
-  }
-
   // Render video player
   const videoContent = (() => {
+    const playerClass = cn('w-full h-full', videoClassName)
+
     switch (mediaType) {
       case 'youtube': {
         const videoId = getYouTubeId(videoSrc)
@@ -272,9 +171,10 @@ export function Media({
         return (
           <YouTubePlayer
             videoId={videoId}
-            autoplay={autoplay || (facade && showVideo)}
+            autoplay={autoplay}
             muted={muted}
             loop={loop}
+            className={playerClass}
           />
         )
       }
@@ -285,9 +185,10 @@ export function Media({
         return (
           <VimeoPlayer
             videoId={videoId}
-            autoplay={autoplay || (facade && showVideo)}
+            autoplay={autoplay}
             muted={muted}
             loop={loop}
+            className={playerClass}
           />
         )
       }
@@ -297,12 +198,13 @@ export function Media({
         return (
           <LocalVideo
             src={videoSrc}
-            autoplay={autoplay || (facade && showVideo)}
+            autoplay={autoplay}
             muted={muted}
             loop={loop}
             controls={controls}
-            poster={thumbnailSrc}
-            onProgress={handleProgress}
+            poster={poster}
+            onProgress={onProgress}
+            className={playerClass}
           />
         )
     }
@@ -310,7 +212,7 @@ export function Media({
 
   return (
     <div
-      className={cn('relative overflow-hidden bg-black', className)}
+      className={cn('relative overflow-hidden', className)}
       style={{ aspectRatio }}
       {...props}
     >

package/src/components/SocialIcon/index.jsx

@@ -0,0 +1,146 @@
+/**
+ * Social Link Utilities
+ *
+ * Utilities for detecting social platforms from URLs and rendering social icons.
+ * Consolidates duplicated patterns from Team and Footer components.
+ *
+ * @example
+ * import { getSocialPlatform, SocialIcon } from '@uniweb/kit'
+ *
+ * const platform = getSocialPlatform('https://twitter.com/user')
+ * // Returns: 'twitter'
+ *
+ * <SocialIcon platform="twitter" className="w-5 h-5" />
+ *
+ * @example
+ * // Auto-detect from URL
+ * <SocialIcon url="https://github.com/user" className="w-5 h-5" />
+ */
+
+import React from 'react'
+
+/**
+ * Social platform domain patterns
+ */
+const SOCIAL_PATTERNS = {
+  twitter: ['twitter.com', 'x.com'],
+  linkedin: ['linkedin.com'],
+  github: ['github.com'],
+  facebook: ['facebook.com', 'fb.com'],
+  instagram: ['instagram.com'],
+  youtube: ['youtube.com', 'youtu.be'],
+  tiktok: ['tiktok.com'],
+  discord: ['discord.gg', 'discord.com'],
+  slack: ['slack.com'],
+  mastodon: ['mastodon.social', 'mastodon.online'],
+  bluesky: ['bsky.app', 'bsky.social'],
+  threads: ['threads.net'],
+  // Academic
+  scholar: ['scholar.google.com'],
+  orcid: ['orcid.org'],
+  researchgate: ['researchgate.net'],
+  // Email
+  email: ['mailto:'],
+}
+
+/**
+ * Detect social platform from URL
+ *
+ * @param {string} url - URL to analyze
+ * @returns {string|null} Platform name or null if not recognized
+ */
+export function getSocialPlatform(url) {
+  if (!url) return null
+
+  const lowerUrl = url.toLowerCase()
+
+  for (const [platform, patterns] of Object.entries(SOCIAL_PATTERNS)) {
+    if (patterns.some(pattern => lowerUrl.includes(pattern))) {
+      return platform
+    }
+  }
+
+  return null
+}
+
+/**
+ * Check if URL is a social link
+ *
+ * @param {string} url - URL to check
+ * @returns {boolean}
+ */
+export function isSocialLink(url) {
+  return getSocialPlatform(url) !== null
+}
+
+/**
+ * Filter links to only social links
+ *
+ * @param {Array} links - Array of link objects with href/url property
+ * @returns {Array} Filtered array of social links
+ */
+export function filterSocialLinks(links) {
+  if (!Array.isArray(links)) return []
+  return links.filter(link => isSocialLink(link.href || link.url))
+}
+
+/**
+ * SVG icon paths for each platform
+ */
+const ICON_PATHS = {
+  twitter: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+  linkedin: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+  github: 'M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z',
+  facebook: 'M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z',
+  instagram: 'M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z',
+  youtube: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
+  tiktok: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
+  discord: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z',
+  email: 'M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z',
+  scholar: 'M5.242 13.769L0 9.5 12 0l12 9.5-5.242 4.269C17.548 11.249 14.978 9.5 12 9.5c-2.977 0-5.548 1.748-6.758 4.269zM12 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14z',
+  orcid: 'M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1-.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919V7.416zm1.444 1.303v7.444h2.297c3.272 0 4.022-2.484 4.022-3.722 0-2.016-1.284-3.722-4.097-3.722h-2.222z',
+  researchgate: 'M19.586 0c-.818 0-1.508.19-2.073.565-.563.377-.97.936-1.213 1.68a3.193 3.193 0 0 0-.112.437 8.365 8.365 0 0 0-.078.53 9 9 0 0 0-.05.727c-.01.282-.013.621-.013 1.016a31.121 31.123 0 0 0 .014 1.017 9 9 0 0 0 .05.727 7.946 7.946 0 0 0 .077.53h-.005a3.334 3.334 0 0 0 .113.438c.245.743.65 1.303 1.214 1.68.565.376 1.256.564 2.075.564.8 0 1.536-.213 2.105-.603.57-.39.94-.916 1.175-1.65.076-.235.135-.558.177-.93a10.9 10.9 0 0 0 .043-1.207v-.82c0-.095-.047-.142-.14-.142h-3.064c-.094 0-.14.047-.14.141v.956c0 .094.046.14.14.14h1.666c.056 0 .084.03.084.086 0 .36 0 .62-.036.865-.038.244-.1.447-.147.606-.108.385-.348.664-.638.876-.29.212-.738.35-1.227.35-.545 0-.901-.15-1.21-.353-.306-.203-.517-.454-.67-.915a3.136 3.136 0 0 1-.147-.762 17.366 17.367 0 0 1-.034-.656c-.01-.26-.014-.572-.014-.939a26.401 26.403 0 0 1 .014-.938 15.821 15.822 0 0 1 .035-.656 3.19 3.19 0 0 1 .148-.76 1.89 1.89 0 0 1 .742-1.01c.344-.244.593-.352 1.137-.352.508 0 .815.09 1.144.326.33.236.53.588.652 1.14.025.12.037.313.037.313h1.458s.036-.353-.023-.6a3.381 3.381 0 0 0-.146-.58 3.716 3.716 0 0 0-1.259-1.652C21.08.193 20.328 0 19.586 0zm-9.586.12h-3.94v.477h1.442v5.373H5.586v-.003H5v.003H1.5v3.793c0 .095.047.142.14.142h.917c.093 0 .14-.047.14-.142v-2.79h2.77c1.053 0 1.58-.636 1.58-1.905V1.074c0-.095-.047-.143-.14-.143H5.99c-.093 0-.14.048-.14.143v3.983c0 .56-.242.84-.725.84h-.99V.6H6v-.48zM4.86 7.27h.913c.095 0 .143.047.143.14v.96c0 .095-.048.142-.143.142H4.86a.136.136 0 0 1-.14-.141v-.96c0-.094.047-.141.14-.141z',
+}
+
+/**
+ * SocialIcon Component
+ *
+ * Renders an SVG icon for a social platform.
+ *
+ * @param {Object} props
+ * @param {string} [props.platform] - Platform name (twitter, linkedin, etc.)
+ * @param {string} [props.url] - URL to auto-detect platform from
+ * @param {string} [props.className] - CSS classes for styling
+ */
+export function SocialIcon({ platform, url, className = 'w-5 h-5' }) {
+  // Auto-detect platform from URL if not provided
+  const detectedPlatform = platform || getSocialPlatform(url)
+
+  if (!detectedPlatform) {
+    // Return generic link icon
+    return (
+      <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+      </svg>
+    )
+  }
+
+  const path = ICON_PATHS[detectedPlatform]
+
+  if (!path) {
+    // Fallback for platforms without icons
+    return (
+      <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+      </svg>
+    )
+  }
+
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d={path} />
+    </svg>
+  )
+}
+
+export default SocialIcon

package/src/hooks/index.js

@@ -1,2 +1,8 @@
 export { useWebsite, default } from './useWebsite.js'
 export { useRouting } from './useRouting.js'
+export { useActiveRoute } from './useActiveRoute.js'
+export { useScrolled } from './useScrolled.js'
+export { useMobileMenu } from './useMobileMenu.js'
+export { useAccordion } from './useAccordion.js'
+export { useGridLayout, getGridClasses } from './useGridLayout.js'
+export { useTheme, getThemeClasses, THEMES, THEME_NAMES } from './useTheme.js'