@uniweb/kit 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.1.13"
+    "@uniweb/core": "0.1.15"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/hooks/useActiveRoute.js

@@ -1,8 +1,9 @@
 /**
  * useActiveRoute Hook
  *
- * SSG-safe hook for active route detection in navigation components.
- * Provides utilities for checking if pages are active or ancestors of the current route.
+ * Hook for active route detection in navigation components.
+ * All route comparison logic is delegated to Website class methods
+ * to ensure a single source of truth for route normalization and matching.
  *
  * @example
  * function NavItem({ page }) {
@@ -13,25 +14,18 @@
  *       href={page.getNavigableRoute()}
  *       className={isActiveOrAncestor(page) ? 'active' : ''}
  *     >
- *       {page.label}
+ *       {page.getLabel()}
  *     </Link>
  *   )
  * }
  */
 
 import { useRouting } from './useRouting.js'
+import { useWebsite } from './useWebsite.js'
 
 /**
- * Normalize a route by removing leading/trailing slashes
- * @param {string} route
- * @returns {string}
- */
-function normalizeRoute(route) {
-  return (route || '').replace(/^\//, '').replace(/\/$/, '')
-}
-
-/**
- * Hook for active route detection with SSG-safe fallbacks.
+ * Hook for active route detection.
+ * Delegates all logic to Website class for consistency.
  *
  * @returns {Object} Route utilities
  * @property {string} route - Current normalized route (e.g., 'docs/getting-started')
@@ -41,17 +35,18 @@ function normalizeRoute(route) {
  */
 export function useActiveRoute() {
   const { useLocation } = useRouting()
+  const { website } = useWebsite()
   const location = useLocation()
 
-  const route = normalizeRoute(location?.pathname)
-  const rootSegment = route.split('/')[0]
+  const currentRoute = website.normalizeRoute(location?.pathname)
+  const rootSegment = currentRoute.split('/')[0]
 
   return {
     /**
      * Current normalized route (no leading/trailing slashes)
      * @type {string}
      */
-    route,
+    route: currentRoute,
 
     /**
      * First segment of the current route
@@ -62,34 +57,31 @@ export function useActiveRoute() {
 
     /**
      * Check if a page is the current active page (exact match)
+     * Delegates to Website.isRouteActive() for consistent comparison.
      *
-     * @param {Object} page - Page object with getNormalizedRoute() or route property
+     * @param {Object|string} pageOrRoute - Page object or route string
      * @returns {boolean}
      */
-    isActive: (page) => {
-      if (typeof page.getNormalizedRoute === 'function') {
-        return page.getNormalizedRoute() === route
-      }
-      // Fallback for page info objects from getPageHierarchy
-      return normalizeRoute(page.route) === route
+    isActive: (pageOrRoute) => {
+      const targetRoute = typeof pageOrRoute === 'string'
+        ? pageOrRoute
+        : pageOrRoute.route
+      return website.isRouteActive(targetRoute, currentRoute)
     },
 
     /**
      * Check if a page or any of its descendants is active
-     * Useful for highlighting parent nav items when child is active
+     * Useful for highlighting parent nav items when child is active.
+     * Delegates to Website.isRouteActiveOrAncestor() for consistent logic.
      *
-     * @param {Object} page - Page object with isActiveOrAncestor() or route property
+     * @param {Object|string} pageOrRoute - Page object or route string
      * @returns {boolean}
      */
-    isActiveOrAncestor: (page) => {
-      if (typeof page.isActiveOrAncestor === 'function') {
-        return page.isActiveOrAncestor(route)
-      }
-      // Fallback for page info objects from getPageHierarchy
-      const pageRoute = normalizeRoute(page.route)
-      if (pageRoute === route) return true
-      if (pageRoute === '') return true // Root is ancestor of all
-      return route.startsWith(pageRoute + '/')
+    isActiveOrAncestor: (pageOrRoute) => {
+      const targetRoute = typeof pageOrRoute === 'string'
+        ? pageOrRoute
+        : pageOrRoute.route
+      return website.isRouteActiveOrAncestor(targetRoute, currentRoute)
     },
   }
 }

package/src/hooks/useWebsite.js

@@ -14,25 +14,23 @@
 import { getUniweb } from '@uniweb/core'
 
 /**
- * Get the current website instance and utilities
+ * Get the current website instance and utilities.
+ * This hook assumes the runtime is properly initialized.
+ *
  * @returns {Object} Website utilities
+ * @throws {Error} If called before runtime initialization
  */
 export function useWebsite() {
   const uniweb = getUniweb()
+  const website = uniweb?.activeWebsite
 
-  if (!uniweb) {
-    console.warn('[Kit] Runtime not initialized. Components require @uniweb/runtime.')
-    return {
-      website: null,
-      localize: (val, defaultVal = '') => defaultVal,
-      makeHref: (href) => href,
-      getLanguage: () => 'en',
-      getLanguages: () => []
-    }
+  if (!website) {
+    throw new Error(
+      '[Kit] useWebsite() called before runtime initialization. ' +
+      'Components must be rendered within a properly initialized Uniweb runtime.'
+    )
   }
 
-  const website = uniweb.activeWebsite
-
   return {
     /**
      * The active Website instance

package/src/styled/Article/index.jsx

@@ -0,0 +1,79 @@
+/**
+ * Article Component
+ *
+ * Semantic article wrapper with prose typography.
+ * Use for blog posts, news articles, documentation pages, etc.
+ *
+ * @module @uniweb/kit/styled/Article
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+import { Render } from '../Section/Render.jsx'
+
+/**
+ * Prose sizes
+ */
+const SIZE_CLASSES = {
+  sm: 'prose-sm',
+  base: 'prose-base',
+  lg: 'prose-lg',
+  xl: 'prose-xl',
+  '2xl': 'prose-2xl'
+}
+
+/**
+ * Article - Semantic article with prose typography
+ *
+ * Renders content inside a semantic <article> tag with prose styling.
+ * Can accept either children or a content prop (ProseMirror JSON).
+ *
+ * @param {Object} props
+ * @param {Object|Array} [props.content] - ProseMirror content to render
+ * @param {string} [props.size='lg'] - Text size: sm, base, lg, xl, 2xl
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Content to render (alternative to content prop)
+ *
+ * @example
+ * // With ProseMirror content
+ * <Article content={articleData.content} />
+ *
+ * @example
+ * // With children
+ * <Article>
+ *   <h1>My Article</h1>
+ *   <p>Article content...</p>
+ * </Article>
+ *
+ * @example
+ * // Composing with Render
+ * <Article size="base" className="dark:prose-invert">
+ *   <Render content={proseMirrorContent} />
+ * </Article>
+ */
+export function Article({
+  content,
+  size = 'lg',
+  className,
+  children,
+  ...props
+}) {
+  const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.lg
+
+  // Resolve content - if it's a ProseMirror doc, get the content array
+  let resolvedContent = content
+  if (resolvedContent?.type === 'doc') {
+    resolvedContent = resolvedContent.content
+  }
+
+  return (
+    <article
+      className={cn('prose', sizeClass, 'max-w-none', className)}
+      {...props}
+    >
+      {children || (resolvedContent && <Render content={resolvedContent} />)}
+    </article>
+  )
+}
+
+export default Article

package/src/styled/Prose/index.jsx

@@ -0,0 +1,66 @@
+/**
+ * Prose Component
+ *
+ * Typography wrapper for long-form content.
+ * Applies prose styling for readable text.
+ *
+ * @module @uniweb/kit/styled/Prose
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+
+/**
+ * Prose sizes
+ */
+const SIZE_CLASSES = {
+  sm: 'prose-sm',
+  base: 'prose-base',
+  lg: 'prose-lg',
+  xl: 'prose-xl',
+  '2xl': 'prose-2xl'
+}
+
+/**
+ * Prose - Typography wrapper for long-form content
+ *
+ * Applies Tailwind Typography (prose) classes for readable text styling.
+ * Use for article bodies, documentation, or any long-form content.
+ *
+ * @param {Object} props
+ * @param {string} [props.size='lg'] - Text size: sm, base, lg, xl, 2xl
+ * @param {string} [props.as='div'] - HTML element to render as
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} props.children - Content to render
+ *
+ * @example
+ * <Prose>
+ *   <h2>Article Title</h2>
+ *   <p>Article content...</p>
+ * </Prose>
+ *
+ * @example
+ * <Prose size="base" className="dark:prose-invert">
+ *   <Render content={proseMirrorContent} />
+ * </Prose>
+ */
+export function Prose({
+  size = 'lg',
+  as: Component = 'div',
+  className,
+  children,
+  ...props
+}) {
+  const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.lg
+
+  return (
+    <Component
+      className={cn('prose', sizeClass, 'max-w-none', className)}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export default Prose

package/src/styled/index.js

@@ -20,9 +20,15 @@ export { SidebarLayout } from './SidebarLayout/index.js'
 // Content Rendering
 // ============================================================================
 
-// Section - Rich content section renderer
+// Section - Rich content section layout container
 export { Section, Render } from './Section/index.js'
 
+// Prose - Typography wrapper for long-form content
+export { Prose } from './Prose/index.jsx'
+
+// Article - Semantic article with prose typography
+export { Article } from './Article/index.jsx'
+
 // Renderers - Individual content type renderers
 export { Code, Alert, Warning, Table, Details, Divider } from './Section/renderers/index.js'