@uniweb/kit 0.1.4 → 0.1.6

package/src/styled/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/styled/Media/index.js

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

package/src/{components → styled}/Section/Render.jsx

@@ -9,10 +9,10 @@
 
 import React from 'react'
 import { cn } from '../../utils/index.js'
-import { SafeHtml } from '../SafeHtml/index.js'
-import { Image } from '../Image/index.js'
-import { Media } from '../Media/index.js'
-import { Link } from '../Link/index.js'
+import { SafeHtml } from '../../components/SafeHtml/index.js'
+import { Image } from '../../components/Image/index.js'
+import { Media } from '../../components/Media/index.js'
+import { Link } from '../../components/Link/index.js'
 import { Code } from './renderers/Code.jsx'
 import { Alert } from './renderers/Alert.jsx'
 import { Table } from './renderers/Table.jsx'

package/src/{components → styled}/Section/index.js

@@ -1,3 +1,9 @@
+/**
+ * Section Component (Tailwind-styled)
+ *
+ * Rich content section renderer with full styling.
+ */
+
 export { Section, default } from './Section.jsx'
 export { Render } from './Render.jsx'
 export * from './renderers/index.js'

package/src/{components → styled}/Section/renderers/Alert.jsx

@@ -8,7 +8,7 @@
 
 import React from 'react'
 import { cn } from '../../../utils/index.js'
-import { SafeHtml } from '../../SafeHtml/index.js'
+import { SafeHtml } from '../../../components/SafeHtml/index.js'
 
 /**
  * Alert type configurations

package/src/{components → styled}/Section/renderers/Details.jsx

@@ -8,7 +8,7 @@
 
 import React, { useState } from 'react'
 import { cn } from '../../../utils/index.js'
-import { SafeHtml } from '../../SafeHtml/index.js'
+import { SafeHtml } from '../../../components/SafeHtml/index.js'
 
 /**
  * Details - Collapsible section

package/src/{components → styled}/Section/renderers/Table.jsx

@@ -8,7 +8,7 @@
 
 import React from 'react'
 import { cn } from '../../../utils/index.js'
-import { SafeHtml } from '../../SafeHtml/index.js'
+import { SafeHtml } from '../../../components/SafeHtml/index.js'
 
 /**
  * Table - Table renderer

package/src/{components → styled}/Section/renderers/index.js

@@ -1,5 +1,5 @@
 /**
- * Section Renderers
+ * Section Renderers (Tailwind-styled)
  *
  * Individual content type renderers for the Section component.
  */

package/src/styled/SidebarLayout/SidebarLayout.jsx

@@ -0,0 +1,310 @@
+import React, { useEffect } from 'react'
+import { cn } from '../../utils/index.js'
+import { useMobileMenu } from '../../hooks/useMobileMenu.js'
+
+/**
+ * SidebarLayout Component
+ *
+ * A flexible layout with optional left and/or right sidebars.
+ * On desktop, sidebars appear inline at their configured breakpoints.
+ * On mobile, the left panel is accessible via a slide-out drawer with FAB toggle.
+ * The right panel is hidden on mobile (common pattern: nav essential, TOC optional).
+ *
+ * The layout is "sandwiched" - header and footer span the full width,
+ * with the sidebars and content area between them.
+ *
+ * @example
+ * // In foundation's src/exports.js - use as-is
+ * import { SidebarLayout } from '@uniweb/kit'
+ *
+ * export default {
+ *   Layout: SidebarLayout,
+ * }
+ *
+ * @example
+ * // With custom configuration
+ * import { SidebarLayout } from '@uniweb/kit'
+ *
+ * function CustomLayout(props) {
+ *   return (
+ *     <SidebarLayout
+ *       {...props}
+ *       leftBreakpoint="lg"
+ *       rightBreakpoint="xl"
+ *       leftWidth="w-72"
+ *     />
+ *   )
+ * }
+ *
+ * export default { Layout: CustomLayout }
+ */
+
+/**
+ * Hamburger menu icon
+ */
+function MenuIcon({ className }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  )
+}
+
+/**
+ * Close (X) icon
+ */
+function CloseIcon({ className }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  )
+}
+
+/**
+ * Mobile drawer component (always slides from left)
+ */
+function MobileDrawer({ isOpen, onClose, width, stickyHeader, children }) {
+  // Prevent body scroll when drawer is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = ''
+      }
+    }
+  }, [isOpen])
+
+  // Position below header if sticky, otherwise from top
+  const topOffset = stickyHeader ? 'top-16' : 'top-0'
+  const height = stickyHeader ? 'h-[calc(100vh-4rem)]' : 'h-screen'
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={cn(
+          'fixed inset-0 bg-black/50 z-40 transition-opacity duration-300',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Drawer (always from left) */}
+      <div
+        className={cn(
+          'fixed left-0 bg-white z-50 shadow-xl',
+          topOffset,
+          height,
+          width,
+          'transform transition-transform duration-300 ease-in-out',
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Sidebar navigation"
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-1.5 rounded-md hover:bg-gray-100 transition-colors"
+          aria-label="Close sidebar"
+        >
+          <CloseIcon className="w-5 h-5 text-gray-500" />
+        </button>
+
+        {/* Drawer content */}
+        <div className="h-full overflow-y-auto overscroll-contain">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}
+
+/**
+ * Floating action button for mobile menu (always bottom-left)
+ */
+function FloatingMenuButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'fixed bottom-4 left-4 z-30',
+        'p-3 bg-primary text-white rounded-full shadow-lg',
+        'hover:bg-primary/90 active:scale-95 transition-all',
+        'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2'
+      )}
+      aria-label="Open navigation menu"
+    >
+      <MenuIcon className="w-6 h-6" />
+    </button>
+  )
+}
+
+/**
+ * Get responsive classes for showing/hiding at breakpoint
+ */
+function getBreakpointClasses(breakpoint) {
+  const showClass = {
+    sm: 'sm:block',
+    md: 'md:block',
+    lg: 'lg:block',
+    xl: 'xl:block',
+  }[breakpoint] || 'md:block'
+
+  const hideClass = {
+    sm: 'sm:hidden',
+    md: 'md:hidden',
+    lg: 'lg:hidden',
+    xl: 'xl:hidden',
+  }[breakpoint] || 'md:hidden'
+
+  return { showClass, hideClass }
+}
+
+/**
+ * SidebarLayout main component
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.header - Header content (from @header sections)
+ * @param {React.ReactNode} props.body - Main body content (page sections)
+ * @param {React.ReactNode} props.footer - Footer content (from @footer sections)
+ * @param {React.ReactNode} props.left - Left panel content (from @left sections)
+ * @param {React.ReactNode} props.right - Right panel content (from @right sections)
+ * @param {React.ReactNode} props.leftPanel - Alias for left (backwards compatibility)
+ * @param {React.ReactNode} props.rightPanel - Alias for right (backwards compatibility)
+ * @param {string} [props.leftWidth='w-64'] - Tailwind width class for left sidebar
+ * @param {string} [props.rightWidth='w-64'] - Tailwind width class for right sidebar
+ * @param {string} [props.drawerWidth='w-72'] - Tailwind width class for mobile drawer
+ * @param {string} [props.leftBreakpoint='md'] - Breakpoint for showing left sidebar inline
+ * @param {string} [props.rightBreakpoint='xl'] - Breakpoint for showing right sidebar inline
+ * @param {boolean} [props.stickyHeader=true] - Whether header sticks to top
+ * @param {boolean} [props.stickySidebar=true] - Whether sidebars stick below header
+ * @param {string} [props.maxWidth='max-w-7xl'] - Max width of content area
+ * @param {string} [props.contentPadding='px-4 py-8 sm:px-6 lg:px-8'] - Padding for main content
+ * @param {string} [props.className] - Additional classes for the root element
+ */
+export function SidebarLayout({
+  // Pre-rendered layout areas from runtime
+  header,
+  body,
+  footer,
+  left,
+  right,
+  leftPanel,
+  rightPanel,
+  // Configuration
+  leftWidth = 'w-64',
+  rightWidth = 'w-64',
+  drawerWidth = 'w-72',
+  leftBreakpoint = 'md',
+  rightBreakpoint = 'xl',
+  stickyHeader = true,
+  stickySidebar = true,
+  maxWidth = 'max-w-7xl',
+  contentPadding = 'px-4 py-8 sm:px-6 lg:px-8',
+  className,
+}) {
+  const { isOpen, open, close } = useMobileMenu()
+
+  // Resolve panel content (support both naming conventions)
+  const leftContent = left || leftPanel
+  const rightContent = right || rightPanel
+
+  // Get breakpoint classes for each panel
+  const leftClasses = getBreakpointClasses(leftBreakpoint)
+  const rightClasses = getBreakpointClasses(rightBreakpoint)
+
+  // Sticky positioning
+  const headerClasses = stickyHeader
+    ? 'sticky top-0 z-30'
+    : ''
+
+  const sidebarClasses = stickySidebar && stickyHeader
+    ? 'sticky top-16 h-[calc(100vh-4rem)]'
+    : stickySidebar
+      ? 'sticky top-0 h-screen'
+      : ''
+
+  return (
+    <div className={cn('min-h-screen flex flex-col bg-white', className)}>
+      {/* Header */}
+      {header && (
+        <header className={cn(
+          'w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80',
+          headerClasses
+        )}>
+          {header}
+        </header>
+      )}
+
+      {/* Mobile Drawer (left panel only) */}
+      {leftContent && (
+        <div className={leftClasses.hideClass}>
+          <MobileDrawer
+            isOpen={isOpen}
+            onClose={close}
+            width={drawerWidth}
+            stickyHeader={stickyHeader}
+          >
+            {leftContent}
+          </MobileDrawer>
+        </div>
+      )}
+
+      {/* Main Content Area */}
+      <div className={cn('flex-1 w-full mx-auto', maxWidth)}>
+        <div className="flex">
+          {/* Left Sidebar (desktop) */}
+          {leftContent && (
+            <aside className={cn(
+              'hidden flex-shrink-0 overflow-y-auto border-r border-gray-200',
+              leftClasses.showClass,
+              leftWidth,
+              sidebarClasses
+            )}>
+              {leftContent}
+            </aside>
+          )}
+
+          {/* Main Content */}
+          <main className="flex-1 min-w-0">
+            <div className={contentPadding}>
+              {body}
+            </div>
+          </main>
+
+          {/* Right Sidebar (desktop only, hidden on mobile) */}
+          {rightContent && (
+            <aside className={cn(
+              'hidden flex-shrink-0 overflow-y-auto border-l border-gray-200',
+              rightClasses.showClass,
+              rightWidth,
+              sidebarClasses
+            )}>
+              {rightContent}
+            </aside>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {footer && (
+        <footer className="w-full border-t border-gray-200">
+          {footer}
+        </footer>
+      )}
+
+      {/* Mobile FAB (only if left panel exists) */}
+      {leftContent && (
+        <div className={leftClasses.hideClass}>
+          <FloatingMenuButton onClick={open} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SidebarLayout

package/src/styled/SidebarLayout/index.js

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