@uniweb/kit 0.1.1

package/src/components/Media/Media.jsx

@@ -0,0 +1,322 @@
+/**
+ * Media Component
+ *
+ * Video player supporting:
+ * - YouTube embeds
+ * - Vimeo embeds
+ * - Local/direct video files
+ * - Thumbnail facades
+ * - Playback tracking
+ *
+ * @module @uniweb/kit/Media
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { cn } from '../../utils/index.js'
+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
+  const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&?/]+)/)
+  return match?.[1] || null
+}
+
+/**
+ * Extract Vimeo video ID from URL
+ * @param {string} url
+ * @returns {string|null}
+ */
+function getVimeoId(url) {
+  if (!url) return null
+  const match = url.match(/vimeo\.com\/(?:video\/)?(\d+)/)
+  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)
+
+  const params = new URLSearchParams({
+    enablejsapi: '1',
+    autoplay: autoplay ? '1' : '0',
+    mute: muted ? '1' : '0',
+    loop: loop ? '1' : '0',
+    playlist: loop ? videoId : '',
+    rel: '0',
+    modestbranding: '1'
+  })
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src={`https://www.youtube.com/embed/${videoId}?${params}`}
+      className={cn('w-full h-full', className)}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      title="YouTube video"
+    />
+  )
+}
+
+/**
+ * Vimeo Player Component
+ */
+function VimeoPlayer({ videoId, autoplay, muted, loop, className }) {
+  const params = new URLSearchParams({
+    autoplay: autoplay ? '1' : '0',
+    muted: muted ? '1' : '0',
+    loop: loop ? '1' : '0',
+    dnt: '1'
+  })
+
+  return (
+    <iframe
+      src={`https://player.vimeo.com/video/${videoId}?${params}`}
+      className={cn('w-full h-full', className)}
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowFullScreen
+      title="Vimeo video"
+    />
+  )
+}
+
+/**
+ * Local/Direct Video Player Component
+ */
+function LocalVideo({ src, autoplay, muted, loop, controls, poster, onProgress, className }) {
+  const videoRef = useRef(null)
+  const [milestones, setMilestones] = useState({ 25: false, 50: false, 75: false, 95: false })
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video || !onProgress) return
+
+    const handleTimeUpdate = () => {
+      const percent = (video.currentTime / video.duration) * 100
+
+      Object.entries({ 25: 25, 50: 50, 75: 75, 95: 95 }).forEach(([key, threshold]) => {
+        if (percent >= threshold && !milestones[key]) {
+          setMilestones((prev) => ({ ...prev, [key]: true }))
+          onProgress({ milestone: key, percent, currentTime: video.currentTime })
+        }
+      })
+    }
+
+    video.addEventListener('timeupdate', handleTimeUpdate)
+    return () => video.removeEventListener('timeupdate', handleTimeUpdate)
+  }, [milestones, onProgress])
+
+  return (
+    <video
+      ref={videoRef}
+      src={src}
+      autoPlay={autoplay}
+      muted={muted}
+      loop={loop}
+      controls={controls}
+      poster={poster}
+      playsInline
+      className={cn('w-full h-full object-cover', 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
+ *
+ * @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 {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 {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" />
+ *
+ * @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} />
+ */
+export function Media({
+  src,
+  media,
+  thumbnail,
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  facade = false,
+  aspectRatio = '16/9',
+  className,
+  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 = (() => {
+    switch (mediaType) {
+      case 'youtube': {
+        const videoId = getYouTubeId(videoSrc)
+        if (!videoId) return null
+        return (
+          <YouTubePlayer
+            videoId={videoId}
+            autoplay={autoplay || (facade && showVideo)}
+            muted={muted}
+            loop={loop}
+          />
+        )
+      }
+
+      case 'vimeo': {
+        const videoId = getVimeoId(videoSrc)
+        if (!videoId) return null
+        return (
+          <VimeoPlayer
+            videoId={videoId}
+            autoplay={autoplay || (facade && showVideo)}
+            muted={muted}
+            loop={loop}
+          />
+        )
+      }
+
+      case 'video':
+      default:
+        return (
+          <LocalVideo
+            src={videoSrc}
+            autoplay={autoplay || (facade && showVideo)}
+            muted={muted}
+            loop={loop}
+            controls={controls}
+            poster={thumbnailSrc}
+            onProgress={handleProgress}
+          />
+        )
+    }
+  })()
+
+  return (
+    <div
+      className={cn('relative overflow-hidden bg-black', className)}
+      style={{ aspectRatio }}
+      {...props}
+    >
+      {videoContent}
+    </div>
+  )
+}
+
+export default Media

package/src/components/Media/index.js

@@ -0,0 +1 @@
+export { Media, default } from './Media.jsx'

package/src/components/MediaIcon/MediaIcon.jsx

@@ -0,0 +1,95 @@
+/**
+ * MediaIcon Component
+ *
+ * Social media and contact platform icons.
+ *
+ * @module @uniweb/kit/MediaIcon
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+
+/**
+ * SVG paths for social media icons
+ * Simplified versions of popular brand icons
+ */
+const SOCIAL_ICONS = {
+  facebook: (
+    <path d="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" />
+  ),
+  twitter: (
+    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+  ),
+  x: (
+    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+  ),
+  linkedin: (
+    <path d="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" />
+  ),
+  instagram: (
+    <path d="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.757-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: (
+    <path d="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" />
+  ),
+  github: (
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  ),
+  medium: (
+    <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
+  ),
+  pinterest: (
+    <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
+  ),
+  email: (
+    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
+  ),
+  phone: (
+    <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.68 10.32 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z" />
+  ),
+  link: (
+    <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
+  ),
+  orcid: (
+    <path d="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 01-.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: (
+    <path d="M19.586 0c-.818 0-1.508.19-2.073.565-.563.377-.97.936-1.213 1.68a3.193 3.193 0 00-.112.437 8.365 8.365 0 00-.078.53 9 9 0 00-.05.727c-.01.282-.013.621-.013 1.016a31.121 31.121 0 00.014 1.017 9 9 0 00.05.727 7.946 7.946 0 00.078.53h-.005a3.334 3.334 0 00.112.438c.244.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 00.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 01-.147-.762 17.366 17.366 0 01-.034-.656c-.01-.26-.014-.572-.014-.939a26.401 26.401 0 01.014-.938 15.821 15.821 0 01.035-.656 3.19 3.19 0 01.148-.76c.152-.46.362-.713.67-.917.308-.203.665-.354 1.21-.354.51 0 .836.092 1.12.274.284.18.49.394.6.645.036.078.064.158.093.233.03.075.057.142.098.218.04.076.1.101.198.101h1.1c.095 0 .142-.046.142-.14v-.076c-.053-.277-.158-.58-.27-.856-.113-.277-.28-.53-.5-.764-.222-.234-.508-.427-.836-.58-.328-.153-.71-.249-1.137-.303a7.185 7.185 0 00-1.315-.076c-.38.01-.78.063-1.23.162zm-8.61 1.83c-.373.08-.732.226-1.082.437-.349.21-.66.481-.928.81-.27.329-.489.712-.655 1.147-.163.435-.25.917-.25 1.447 0 1.028.267 1.846.795 2.45.528.606 1.27.972 2.228 1.097-.056.116-.11.237-.167.36a3.78 3.78 0 01-.172.34c-.165.303-.399.634-.711.997-.313.365-.697.708-1.147 1.033a.21.21 0 00-.087.184c0 .057.019.113.056.17a.231.231 0 00.085.078l.864.513c.028.02.056.028.085.028a.2.2 0 00.142-.057c.614-.55 1.11-1.117 1.49-1.697.376-.58.657-1.163.838-1.747h.057c.205 0 .388-.01.542-.026.154-.017.294-.044.418-.082V15.9c0 .095.047.141.141.141h1.228c.095 0 .141-.046.141-.14V7.197c0-.095-.046-.142-.14-.142h-1.693a.237.237 0 00-.14.05.163.163 0 00-.055.134v.072c0 .056.019.11.055.162a.237.237 0 00.14.078h.282v7.133c-.113.011-.248.015-.395.015h-.56c-.575 0-1.03-.112-1.361-.338-.33-.226-.57-.525-.71-.896a3.03 3.03 0 01-.193-.76c-.03-.253-.05-.473-.05-.66 0-.357.03-.668.08-.932.055-.264.13-.489.233-.673.163-.29.377-.512.65-.67.273-.155.59-.244.948-.273.358-.028.746-.011 1.16.05v-1.2c-.414-.102-.792-.144-1.135-.13a3.652 3.652 0 00-.93.145z" />
+  )
+}
+
+/**
+ * MediaIcon - Social media platform icon
+ *
+ * @param {Object} props
+ * @param {string} props.type - Platform type (facebook, twitter, linkedin, etc.)
+ * @param {string} [props.size='24'] - Icon size in pixels
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <MediaIcon type="twitter" size="32" className="text-blue-400" />
+ *
+ * @example
+ * <MediaIcon type="email" />
+ */
+export function MediaIcon({ type, size = '24', className, ...props }) {
+  // Normalize type
+  const iconType = type?.toLowerCase().replace(/[^a-z]/g, '') || 'link'
+  const icon = SOCIAL_ICONS[iconType] || SOCIAL_ICONS.link
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={cn('inline-block', className)}
+      style={{ width: size, height: size }}
+      aria-label={type}
+      role="img"
+      {...props}
+    >
+      {icon}
+    </svg>
+  )
+}
+
+export default MediaIcon

package/src/components/MediaIcon/index.js

@@ -0,0 +1 @@
+export { MediaIcon, default } from './MediaIcon.jsx'

package/src/components/SafeHtml/SafeHtml.jsx

@@ -0,0 +1,93 @@
+/**
+ * SafeHtml Component
+ *
+ * Safely renders HTML content with topic link resolution.
+ * Handles the `topic:` protocol for internal content references.
+ *
+ * @module @uniweb/kit/SafeHtml
+ */
+
+import React, { Suspense, useMemo } from 'react'
+import { useWebsite } from '../../hooks/useWebsite.js'
+
+/**
+ * Resolve topic: links in HTML content
+ * @param {string} html - HTML string with potential topic: links
+ * @param {Object} website - Website instance
+ * @returns {string} HTML with resolved links
+ */
+function resolveTopicLinks(html, website) {
+  if (!html || typeof html !== 'string') return html
+  if (!html.includes('topic:')) return html
+
+  try {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+    const links = doc.querySelectorAll('a[href^="topic:"]')
+
+    links.forEach((link) => {
+      const href = link.getAttribute('href')
+      if (href) {
+        link.setAttribute('href', website.makeHref(href))
+      }
+    })
+
+    return doc.body.innerHTML
+  } catch (error) {
+    console.warn('[SafeHtml] Error resolving topic links:', error)
+    return html
+  }
+}
+
+/**
+ * SafeHtml - Safely render HTML content
+ *
+ * @param {Object} props
+ * @param {string|string[]} props.value - HTML content to render
+ * @param {string} [props.className] - CSS classes
+ * @param {string} [props.as='div'] - HTML element to render as
+ *
+ * @example
+ * <SafeHtml value="<p>Hello <strong>World</strong></p>" />
+ *
+ * @example
+ * // With topic links
+ * <SafeHtml value='<a href="topic:about">About</a>' />
+ */
+export function SafeHtml({ value, className, as: Component = 'div', ...props }) {
+  const { website, getRoutingComponents } = useWebsite()
+
+  // Get the runtime's SafeHtml if available (handles sanitization)
+  const RuntimeSafeHtml = getRoutingComponents()?.SafeHtml
+
+  // Process the value
+  const processedValue = useMemo(() => {
+    if (!value) return ''
+
+    // Handle array of HTML strings
+    const html = Array.isArray(value) ? value.join('') : value
+
+    // Resolve topic: links
+    return website ? resolveTopicLinks(html, website) : html
+  }, [value, website])
+
+  // Use runtime SafeHtml if available (recommended for proper sanitization)
+  if (RuntimeSafeHtml) {
+    return (
+      <Suspense fallback={null}>
+        <RuntimeSafeHtml value={processedValue} className={className} {...props} />
+      </Suspense>
+    )
+  }
+
+  // Fallback: render directly (less safe, but works without runtime)
+  return (
+    <Component
+      className={className}
+      dangerouslySetInnerHTML={{ __html: processedValue }}
+      {...props}
+    />
+  )
+}
+
+export default SafeHtml

package/src/components/SafeHtml/index.js

@@ -0,0 +1 @@
+export { SafeHtml, default } from './SafeHtml.jsx'