@ciderpress/ui 1.0.0-rc.12 → 1.0.0-rc.14

package/dist/theme/lib/theme-favicon.ts

@@ -23,9 +23,7 @@ export function syncThemeFavicon(html: HTMLElement): void {
   const surface = resolveSurfaceColor(html)
   const dataUri = buildIconDataUri(brand, shadow, surface)
   const link = ensureFaviconLink()
-  // oxlint-disable-next-line functional/immutable-data -- boundary mutation: updating link element href
   link.type = 'image/svg+xml'
-  // oxlint-disable-next-line functional/immutable-data -- boundary mutation: updating link element href
   link.href = dataUri
 }
 
@@ -118,7 +116,6 @@ function ensureFaviconLink(): HTMLLinkElement {
     return existing
   }
   const link = globalThis.document.createElement('link')
-  // oxlint-disable-next-line functional/immutable-data -- boundary mutation: initialising newly created link element
   link.rel = 'icon'
   globalThis.document.head.append(link)
   return link

package/dist/theme/styles/themes/honeycrisp.css

@@ -288,7 +288,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='dark'] {
 }
 
 html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
-  --cp-c-brand-1: #dc2626;
+  --cp-c-brand-1: #d02020;
   --cp-c-brand-2: #b91c1c;
   --cp-c-brand-3: #7f1d1d;
   --cp-c-brand-fg: #ffffff;
@@ -301,15 +301,15 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --cp-c-warn: #d97706;
   --cp-c-info: #2563eb;
   --cp-c-muted: #888888;
-  --cp-c-bg: #ffffff;
-  --cp-c-bg-alt: #f9f9f9;
-  --cp-c-bg-elv: #f5f5f5;
-  --cp-c-bg-soft: #f0f0f0;
-  --cp-c-bg-icon: #cccccc;
-  --cp-c-home-bg: #ffffff;
+  --cp-c-bg: #f7f5f0;
+  --cp-c-bg-alt: #f1eee7;
+  --cp-c-bg-elv: #fffdf8;
+  --cp-c-bg-soft: #ebe7dc;
+  --cp-c-bg-icon: #d5cebe;
+  --cp-c-home-bg: #f7f5f0;
   --cp-c-overlay-faint: rgba(0, 0, 0, 0.1);
-  --cp-c-gutter: #f5f5f5;
-  --cp-code-block-bg: #f5f5f5;
+  --cp-c-gutter: #f1eee7;
+  --cp-code-block-bg: #f1eee7;
   --cp-c-text-1: #1a1a1a;
   --cp-c-text-2: rgba(26, 26, 26, 0.72);
   --cp-c-text-3: rgba(26, 26, 26, 0.48);
@@ -384,7 +384,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --cp-oas-deprecated: var(--cp-c-text-3);
   --cp-oas-required: #dc2626;
   --cp-button-brand-bg: #b91c1c;
-  --cp-button-brand-hover-bg: #dc2626;
+  --cp-button-brand-hover-bg: #d02020;
   --cp-button-brand-active-bg: #7f1d1d;
   --cp-button-brand-text: #ffffff;
   --cp-s-1: 1px;
@@ -535,12 +535,12 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --cp-blur-base: 8px;
   --cp-gradient-brand: linear-gradient(135deg, var(--cp-c-brand-1), var(--cp-c-brand-3));
   --cp-gradient-hero-title: linear-gradient(135deg, var(--cp-c-brand-1), var(--cp-c-brand-light));
-  --rp-c-bg: #ffffff;
-  --rp-c-bg-alt: #f9f9f9;
-  --rp-c-bg-dark: #f5f5f5;
-  --rp-c-bg-mute: #ffffff;
-  --rp-c-bg-soft: #f0f0f0;
-  --rp-c-brand: #dc2626;
+  --rp-c-bg: #f7f5f0;
+  --rp-c-bg-alt: #f1eee7;
+  --rp-c-bg-dark: #f1eee7;
+  --rp-c-bg-mute: #f7f5f0;
+  --rp-c-bg-soft: #ebe7dc;
+  --rp-c-brand: #d02020;
   --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #fca5a5;
   --rp-c-brand-dark: #b91c1c;
@@ -549,15 +549,15 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --rp-c-divider: #e2e2e2;
   --rp-c-divider-dark: #d0d0d0;
   --rp-c-divider-light: #e2e2e2;
-  --rp-c-link: #dc2626;
+  --rp-c-link: #d02020;
   --rp-c-text-1: #1a1a1a;
   --rp-c-text-2: rgba(26, 26, 26, 0.72);
   --rp-c-text-3: rgba(26, 26, 26, 0.48);
   --rp-c-text-4: rgba(26, 26, 26, 0.48);
   --rp-c-text-code: #1a1a1a;
-  --rp-code-block-bg: #f5f5f5;
-  --rp-home-background-bg: #ffffff;
-  --rp-home-feature-bg: #f0f0f0;
+  --rp-code-block-bg: #f1eee7;
+  --rp-home-background-bg: #f7f5f0;
+  --rp-home-feature-bg: #ebe7dc;
   --rp-home-hero-secondary-color: rgba(26, 26, 26, 0.72);
   --rp-home-hero-title-color: #1a1a1a;
   --rp-font-family-base:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.12",
+  "version": "1.0.0-rc.14",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",
@@ -47,43 +47,44 @@
   "dependencies": {
     "@iconify-json/catppuccin": "^1.2.17",
     "@iconify-json/devicon": "^1.2.62",
-    "@iconify-json/logos": "^1.2.11",
-    "@iconify-json/material-icon-theme": "^1.2.69",
+    "@iconify-json/logos": "^1.2.13",
+    "@iconify-json/material-icon-theme": "^1.2.70",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pixel": "^1.2.2",
-    "@iconify-json/pixelarticons": "^1.2.7",
-    "@iconify-json/simple-icons": "^1.2.89",
+    "@iconify-json/pixelarticons": "^1.2.8",
+    "@iconify-json/simple-icons": "^1.2.93",
     "@iconify-json/skill-icons": "^1.2.4",
-    "@iconify-json/vscode-icons": "^1.2.65",
+    "@iconify-json/vscode-icons": "^1.2.73",
     "@iconify/react": "^6.0.2",
     "@mermaid-js/layout-elk": "^0.2.2",
     "@rspress/plugin-sitemap": "^2.0.19",
     "clsx": "^2.1.1",
-    "katex": "^0.17.0",
-    "massaman": "^0.3.0",
-    "mermaid": "^11.16.0",
+    "katex": "^0.18.4",
+    "massaman": "^0.5.0",
+    "mermaid": "^11.16.1",
     "openapi-sampler": "^1.7.4",
-    "react-aria-components": "^1.19.0",
+    "react-aria-components": "^1.20.0",
     "ts-morph": "^28.0.0",
     "unist-util-visit": "^5.1.0",
-    "@ciderpress/config": "1.0.0-rc.9",
-    "@ciderpress/theme": "1.0.0-rc.5"
+    "@ciderpress/config": "1.0.0-rc.11",
+    "@ciderpress/theme": "1.0.0-rc.6"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@rslib/core": "0.23.1",
+    "@rslib/core": "^0.23.2",
     "@rspress/core": "^2.0.19",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "esbuild": "^0.28.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "esbuild": "^0.28.2",
     "geist": "^1.7.2",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "happy-dom": "^20.12.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rspress-plugin-devkit": "^1.0.0",
     "rspress-plugin-file-tree": "^1.0.5",
     "rspress-plugin-katex": "^1.0.1",
     "rspress-plugin-supersub": "^1.0.0",
-    "typescript": "^6.0.3",
+    "typescript": "^7.0.2",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {

package/src/theme/components/home/hero-banner.tsx

@@ -0,0 +1,225 @@
+import type { BannerFn, CiderpressConfig, ImageSource, LogoContext } from '@ciderpress/config'
+// oxlint-disable-next-line import/no-unresolved -- alias provided by createRspressConfig's resolve.alias
+import userConfigModule from '@ciderpress/internal/user-config'
+import { BRAND_COLORS, DEFAULT_THEME_NAME } from '@ciderpress/theme'
+import React, { useEffect, useState } from 'react'
+
+import { withMountBase } from '../../lib/with-mount-base.ts'
+
+const COLOR_VARS = Object.freeze({
+  brand: '--rp-c-brand',
+  brandHover: '--rp-c-brand-dark',
+  brandSoft: '--rp-c-brand-tint',
+  bg: '--rp-c-bg',
+  text: '--rp-c-text-1',
+})
+
+const DEFAULT_BRAND = BRAND_COLORS[DEFAULT_THEME_NAME]
+const FALLBACK_COLORS = Object.freeze({
+  brand: DEFAULT_BRAND.primary,
+  brandHover: DEFAULT_BRAND.hover,
+  brandSoft: DEFAULT_BRAND.soft,
+  bg: '#ffffff',
+  text: '#1f2937',
+})
+const FALLBACK_THEME: LogoContext = Object.freeze({
+  name: DEFAULT_THEME_NAME,
+  variant: 'dark',
+  isDark: true,
+  colors: FALLBACK_COLORS,
+})
+
+/**
+ * Resolve and render a function-valued `brand.banner` with the live theme context.
+ *
+ * @returns Theme-aware banner content, an image, or null.
+ */
+export function HeroBanner(): React.ReactElement | null {
+  const banner = readBannerConfig(userConfigModule)
+  const theme = useThemeContext(typeof banner === 'function')
+
+  if (typeof banner !== 'function') {
+    return null
+  }
+
+  return <>{renderBanner({ banner, theme })}</>
+}
+
+interface RenderBannerParams {
+  readonly banner: BannerFn
+  readonly theme: LogoContext
+}
+
+/**
+ * Invoke a banner function and normalize image returns into elements.
+ *
+ * @private
+ * @param params - Banner function and active theme context.
+ * @returns Renderable banner content.
+ */
+function renderBanner(params: RenderBannerParams): React.ReactNode {
+  const result = params.banner({ theme: params.theme })
+  if (typeof result === 'string') {
+    return <img src={withMountBase(result)} alt="" />
+  }
+  if (isImageSource(result)) {
+    return (
+      <img
+        src={withMountBase(result.src)}
+        alt={result.alt ?? ''}
+        width={result.width}
+        height={result.height}
+      />
+    )
+  }
+  return result as React.ReactNode
+}
+
+/**
+ * Read a function-valued banner from the bundled user config.
+ *
+ * @private
+ * @param mod - User config module or its default export.
+ * @returns Banner function when configured.
+ */
+function readBannerConfig(mod: unknown): BannerFn | undefined {
+  if (mod === null || mod === undefined) {
+    return undefined
+  }
+  const record = mod as Record<string, unknown>
+  const candidate = readConfigExport({ mod, record })
+  const brand = candidate.brand
+  if (brand === undefined || typeof brand.banner !== 'function') {
+    return undefined
+  }
+  return brand.banner
+}
+
+interface ReadConfigExportParams {
+  readonly mod: unknown
+  readonly record: Record<string, unknown>
+}
+
+/**
+ * Normalize default and direct user-config module exports.
+ *
+ * @private
+ * @param params - Raw module and record view.
+ * @returns Partial Ciderpress config.
+ */
+function readConfigExport(params: ReadConfigExportParams): Partial<CiderpressConfig> {
+  if (params.record.default !== null && params.record.default !== undefined) {
+    return params.record.default as Partial<CiderpressConfig>
+  }
+  return params.mod as Partial<CiderpressConfig>
+}
+
+/**
+ * Subscribe to theme changes only when a runtime banner needs them.
+ *
+ * @private
+ * @param enabled - Whether the banner is function-valued.
+ * @returns Server-safe default context followed by the live browser context.
+ */
+function useThemeContext(enabled: boolean): LogoContext {
+  const [theme, setTheme] = useState<LogoContext>(FALLBACK_THEME)
+
+  useEffect(() => {
+    if (!enabled) {
+      return
+    }
+    const html = globalThis.document.documentElement
+    function update(): void {
+      return setTheme(readThemeContext(html))
+    }
+    update()
+
+    const observer = new MutationObserver(update)
+    observer.observe(html, {
+      attributes: true,
+      attributeFilter: ['data-cp-theme', 'data-cp-variant', 'class', 'style'],
+    })
+    return () => observer.disconnect()
+  }, [enabled])
+
+  return theme
+}
+
+/**
+ * Distinguish a structured image source from a React element.
+ *
+ * @private
+ * @param value - Banner return value.
+ * @returns Whether the value is an image source object.
+ */
+function isImageSource(value: unknown): value is Exclude<ImageSource, string> {
+  if (value === null || typeof value !== 'object') {
+    return false
+  }
+  const record = value as Record<string, unknown>
+  if ('$$typeof' in record) {
+    return false
+  }
+  return typeof record.src === 'string'
+}
+
+/**
+ * Build the live theme context passed to `brand.banner`.
+ *
+ * @private
+ * @param html - Document root element.
+ * @returns Current theme snapshot.
+ */
+function readThemeContext(html: HTMLElement): LogoContext {
+  const variant = readVariant(html)
+  const name = readThemeName(html)
+  const styles = globalThis.window.getComputedStyle(html)
+  function read(cssVar: string, fallback: string): string {
+    const raw = styles.getPropertyValue(cssVar).trim()
+    if (raw.length === 0) {
+      return fallback
+    }
+    return raw
+  }
+
+  return {
+    name,
+    variant,
+    isDark: variant === 'dark',
+    colors: {
+      brand: read(COLOR_VARS.brand, FALLBACK_COLORS.brand),
+      brandHover: read(COLOR_VARS.brandHover, FALLBACK_COLORS.brandHover),
+      brandSoft: read(COLOR_VARS.brandSoft, FALLBACK_COLORS.brandSoft),
+      bg: read(COLOR_VARS.bg, FALLBACK_COLORS.bg),
+      text: read(COLOR_VARS.text, FALLBACK_COLORS.text),
+    },
+  }
+}
+
+/**
+ * Read the active color variant from the document root.
+ *
+ * @private
+ * @param html - Document root element.
+ * @returns Active variant.
+ */
+function readVariant(html: HTMLElement): 'light' | 'dark' {
+  if (html.dataset.cpVariant === 'light') {
+    return 'light'
+  }
+  return 'dark'
+}
+
+/**
+ * Read the active theme name from the document root.
+ *
+ * @private
+ * @param html - Document root element.
+ * @returns Active theme name.
+ */
+function readThemeName(html: HTMLElement): string {
+  if (typeof html.dataset.cpTheme === 'string') {
+    return html.dataset.cpTheme
+  }
+  return DEFAULT_THEME_NAME
+}