@uniweb/kit 0.9.34 → 0.9.35

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.9.34",
+  "version": "0.9.35",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
     "./xref": "./src/xref/index.js",
-    "./theme-tokens.css": "./src/theme-tokens.css"
+    "./theme-tokens.css": "./src/theme-tokens.css",
+    "./prose-tokens.css": "./src/prose-tokens.css"
   },
   "files": [
     "src",
@@ -39,8 +40,8 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
-    "@uniweb/core": "0.7.27",
-    "@uniweb/scene": "0.1.2"
+    "@uniweb/scene": "0.1.2",
+    "@uniweb/core": "0.7.27"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/hooks/useHeadings.js

@@ -41,8 +41,15 @@ import { useActiveRoute } from './useActiveRoute.js'
 
 /**
  * Pull headings out of the page's own content — available during prerender.
+ *
+ * Skips the headings the semantic parser claimed as the section's own
+ * title/pretitle/subtitle. In this framework a leading `###` is a pretitle and
+ * the `##` after the title is a subtitle — structure, not body headings — so a
+ * typed section would otherwise open every contents rail with two entries no
+ * reader recognises as sections of the article. An untyped document has none of
+ * those fields set, and everything in it counts.
  */
-function headingsFromContent(page, levels) {
+export function headingsFromContent(page, levels = [2, 3]) {
   const blocks = page?.getBodyBlocks?.() ?? []
   const found = []
 
@@ -50,13 +57,23 @@ function headingsFromContent(page, levels) {
     const nodes = block?.rawContent?.content
     if (!Array.isArray(nodes)) continue
 
+    const parsed = block.parsedContent || {}
+    const claimed = new Set(
+      [parsed.title, parsed.pretitle, parsed.subtitle]
+        .flat()
+        .filter(Boolean)
+        .map(value => String(value).trim())
+    )
+
     for (const node of nodes) {
       if (node?.type !== 'heading') continue
       const level = node.attrs?.level ?? 1
       if (!levels.includes(level)) continue
 
       const text = nodeText(node).trim()
-      if (text) found.push({ id: headingId(text), text, level })
+      if (!text || claimed.has(text)) continue
+
+      found.push({ id: headingId(text), text, level })
     }
   }
 

package/src/index.js

@@ -124,7 +124,6 @@ export {
 // Styled Components (Tailwind-based)
 // ============================================================================
 
-export { SidebarLayout } from './styled/SidebarLayout/index.js'
 export { Section, Render } from './styled/Section/index.js'
 export { Prose } from './styled/Prose/index.jsx'
 export { Article } from './styled/Article/index.jsx'

package/src/prose-tokens.css

@@ -0,0 +1,73 @@
+/*
+ * Tailwind Typography, wired to the theme.
+ *
+ * Usage — after the plugin, so these win on equal specificity:
+ *
+ *   @plugin "@tailwindcss/typography";
+ *   @import "@uniweb/kit/prose-tokens.css";
+ *
+ * `prose` ships its own greys, which means long-form body copy is the one part
+ * of a foundation that ignores the site's theme.yml unless someone bridges it
+ * by hand. Everyone does bridge it by hand, identically, and the bridge is easy
+ * to get subtly wrong — so it lives here.
+ *
+ * After this import, a prose container answers to the site like everything else
+ * and flips with the visitor's scheme on its own. Do not add a `prose-invert`
+ * or a `dark:` variant: the tokens have already changed by the time the dark
+ * scheme is active, and `prose-invert` would override this with fixed greys.
+ *
+ * For the same reason, do not add a palette modifier — `prose-gray`,
+ * `prose-slate`, `prose-neutral`. Those re-declare every variable below.
+ *
+ * ── One container ──
+ *
+ * These variables are inherited, so a `prose` container nested inside another
+ * silently resets the lot for its subtree. Two containers is always a bug, and
+ * a quiet one: the outer looks right and everything inside it does not. Decide
+ * who owns prose — the section that renders the document is usually the better
+ * owner, since it then renders correctly under any layout — and make sure the
+ * other one only supplies column width and padding.
+ */
+
+.prose {
+  --tw-prose-body: var(--body);
+  --tw-prose-headings: var(--heading);
+  --tw-prose-lead: var(--subtle);
+  --tw-prose-links: var(--link, var(--primary));
+  --tw-prose-bold: var(--heading);
+  --tw-prose-counters: var(--subtle);
+  --tw-prose-bullets: var(--border);
+  --tw-prose-hr: var(--border);
+  --tw-prose-quotes: var(--subtle);
+  --tw-prose-quote-borders: var(--primary);
+  --tw-prose-captions: var(--subtle);
+  --tw-prose-kbd: var(--heading);
+  --tw-prose-code: var(--heading);
+  --tw-prose-th-borders: var(--border);
+  --tw-prose-td-borders: var(--border);
+
+  /* Fenced code keeps whatever the highlighter paints — a site retunes that
+     through `code:` in theme.yml, not here. */
+  --tw-prose-pre-code: var(--code-text, var(--body));
+  --tw-prose-pre-bg: var(--code-surface, var(--muted));
+}
+
+/* Inline code reads as a chip on whatever surface it sits on, rather than the
+   plugin's fixed grey. Scoped to `:not(pre)` so fenced blocks are untouched. */
+.prose :not(pre) > code {
+  background-color: color-mix(in oklch, var(--section), var(--heading) 6%);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-weight: 500;
+  font-size: 0.875em;
+}
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+  content: none;
+}
+
+/* Anchors land clear of a fixed site header when something scrolls to them —
+   a contents rail, or a link with a #fragment. */
+.prose :is(h1, h2, h3, h4) {
+  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
+}

package/src/styled/index.js

@@ -7,14 +7,13 @@
  * For unstyled primitives, use the main '@uniweb/kit' export.
  *
  * @example
- * import { SidebarLayout, Section, Media } from '@uniweb/kit (styled)'
+ * import { Section, Prose, Media } from '@uniweb/kit (styled)'
  */
 
 // ============================================================================
 // Layout
 // ============================================================================
 
-export { SidebarLayout } from './SidebarLayout/index.js'
 
 // ============================================================================
 // Content Rendering

package/src/styled/SidebarLayout/SidebarLayout.jsx

@@ -1,311 +0,0 @@
-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/foundation.js
- * 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-[var(--header-height,4rem)]' : 'top-0'
-  const height = stickyHeader ? 'h-[calc(100vh-var(--header-height,4rem))]' : 'h-screen'
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        className={cn(
-          // kit-palette-ok: a modal scrim is the same black in either scheme
-          '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-section 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-muted transition-colors"
-          aria-label="Close sidebar"
-        >
-          <CloseIcon className="w-5 h-5 text-subtle" />
-        </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-primary-foreground 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 layout/header.md)
- * @param {React.ReactNode} props.body - Main body content (page sections)
- * @param {React.ReactNode} props.footer - Footer content (from layout/footer.md)
- * @param {React.ReactNode} props.left - Left panel content (from layout/left.md)
- * @param {React.ReactNode} props.right - Right panel content (from layout/right.md)
- * @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-[var(--header-height,4rem)] h-[calc(100vh-var(--header-height,4rem))]'
-    : stickySidebar
-      ? 'sticky top-0 h-screen'
-      : ''
-
-  return (
-    <div className={cn('min-h-screen flex flex-col bg-section', className)}>
-      {/* Header */}
-      {header && (
-        <header className={cn(
-          'w-full border-b border-border bg-section/95 backdrop-blur supports-[backdrop-filter]:bg-section/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-border',
-              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-border',
-              rightClasses.showClass,
-              rightWidth,
-              sidebarClasses
-            )}>
-              {rightContent}
-            </aside>
-          )}
-        </div>
-      </div>
-
-      {/* Footer */}
-      {footer && (
-        <footer className="w-full border-t border-border">
-          {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

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