@zpress/ui 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import type { Paths } from '@zpress/core';
 import type { RspressPlugin } from '@rspress/core';
 import type { UserConfig } from '@rspress/core';
-import type { ZpressConfig } from '@zpress/core';
+import type { ZpressConfig } from '@zpress/config';
 
 /**
  * Translate zpress config + sync engine output into a complete

package/dist/index.mjs

@@ -1,7 +1,22 @@
 import { execSync } from "node:child_process";
 import { existsSync, readFileSync } from "node:fs";
 import node_path from "node:path";
-import { resolveDefaultColorMode } from "@zpress/core";
+import { isBuiltInTheme, resolveDefaultColorMode } from "@zpress/theme";
+const BASE_CRITICAL_CSS = ":root{--zp-c-brand-1:#a78bfa;--zp-c-brand-2:#8b5cf6;--zp-c-brand-3:#7c3aed;--zp-c-brand-soft:rgba(167,139,250,0.14);--zp-c-bg:#ffffff;--zp-c-bg-alt:#f9f9f9;--zp-c-bg-elv:#f5f5f5;--zp-c-bg-soft:#f0f0f0;--zp-c-bg-icon:#cccccc;--zp-c-text-1:#1a1a1a;--zp-c-text-2:rgba(26,26,26,0.72);--zp-c-text-3:rgba(26,26,26,0.48);--zp-c-divider:#e2e2e2;--zp-c-border:#d0d0d0;--zp-c-gutter:#f5f5f5;--zp-code-block-bg:#f5f5f5;--zp-button-brand-bg:#7c3aed;--zp-button-brand-hover-bg:#8b5cf6;--zp-button-brand-active-bg:#6d28d9;--zp-button-brand-text:#ffffff;--rp-c-brand:#a78bfa;--rp-c-brand-light:#c4b5fd;--rp-c-brand-lighter:#ddd6fe;--rp-c-brand-dark:#8b5cf6;--rp-c-brand-darker:#7c3aed;--rp-c-brand-tint:rgba(167,139,250,0.14);--rp-home-background-bg:#fff;--rp-c-bg:#ffffff;--rp-c-bg-soft:#f0f0f0;--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-divider:#e2e2e2}html,body{background-color:var(--zp-c-bg);color:var(--zp-c-text-1)}";
+const MIDNIGHT_CRITICAL_CSS = ":root{--zp-c-brand-1:#60a5fa;--zp-c-brand-2:#3b82f6;--zp-c-brand-3:#2563eb;--zp-c-brand-soft:rgba(96,165,250,0.14);--zp-c-bg:#0a0e1a;--zp-c-bg-alt:#0d1120;--zp-c-bg-elv:#111523;--zp-c-bg-soft:#141829;--zp-c-bg-icon:#2d3548;--zp-c-text-1:#e8edf5;--zp-c-text-2:rgba(232,237,245,0.72);--zp-c-text-3:rgba(232,237,245,0.48);--zp-c-divider:#1a1f2e;--zp-c-border:#252a3a;--zp-c-gutter:#0d1120;--zp-code-block-bg:#0d1120;--zp-button-brand-bg:#2563eb;--zp-button-brand-hover-bg:#3b82f6;--zp-button-brand-active-bg:#1d4ed8;--zp-button-brand-text:#e8edf5;--rp-c-brand:#60a5fa;--rp-c-brand-light:#93c5fd;--rp-c-brand-lighter:#bfdbfe;--rp-c-brand-dark:#3b82f6;--rp-c-brand-darker:#2563eb;--rp-c-brand-tint:rgba(96,165,250,0.14);--rp-home-background-bg:#0a0e1a;--rp-c-bg:#0a0e1a;--rp-c-bg-soft:#141829;--rp-c-text-1:#e8edf5;--rp-c-text-2:rgba(232,237,245,0.72);--rp-c-text-3:rgba(232,237,245,0.48);--rp-c-divider:#1a1f2e}html,body{background-color:var(--zp-c-bg);color:var(--zp-c-text-1)}";
+const ARCADE_CRITICAL_CSS = ":root{--zp-c-brand-1:#f472b6;--zp-c-brand-2:#ec4899;--zp-c-brand-3:#db2777;--zp-c-brand-soft:rgba(244,114,182,0.14);--zp-c-bg:#fef7fb;--zp-c-bg-alt:#fef3f9;--zp-c-bg-elv:#fdeef7;--zp-c-bg-soft:#fce9f4;--zp-c-bg-icon:#f9d5ea;--zp-c-text-1:#1a0a14;--zp-c-text-2:rgba(26,10,20,0.72);--zp-c-text-3:rgba(26,10,20,0.48);--zp-c-divider:#fce0f0;--zp-c-border:#fad0e8;--zp-c-gutter:#fef3f9;--zp-code-block-bg:#fef3f9;--zp-button-brand-bg:#db2777;--zp-button-brand-hover-bg:#ec4899;--zp-button-brand-active-bg:#be185d;--zp-button-brand-text:#fef7fb;--rp-c-brand:#f472b6;--rp-c-brand-light:#f9a8d4;--rp-c-brand-lighter:#fbcfe8;--rp-c-brand-dark:#ec4899;--rp-c-brand-darker:#db2777;--rp-c-brand-tint:rgba(244,114,182,0.14);--rp-home-background-bg:#fef7fb;--rp-c-bg:#fef7fb;--rp-c-bg-soft:#fce9f4;--rp-c-text-1:#1a0a14;--rp-c-text-2:rgba(26,10,20,0.72);--rp-c-text-3:rgba(26,10,20,0.48);--rp-c-divider:#fce0f0}html,body{background-color:var(--zp-c-bg);color:var(--zp-c-text-1)}";
+const CRITICAL_CSS_MAP = {
+    base: BASE_CRITICAL_CSS,
+    midnight: MIDNIGHT_CRITICAL_CSS,
+    arcade: ARCADE_CRITICAL_CSS,
+    'arcade-fx': ARCADE_CRITICAL_CSS
+};
+function getCriticalCss(themeName) {
+    const theme = themeName;
+    const css = CRITICAL_CSS_MAP[theme];
+    if (!css) return '';
+    return css;
+}
 function zpressPlugin() {
     const componentsDir = node_path.resolve(import.meta.dirname, 'theme', 'components');
     return {
@@ -35,7 +50,8 @@ function resolveThemeName(config) {
 }
 function resolveColorMode(config, themeName) {
     if (config.theme && config.theme.colorMode) return config.theme.colorMode;
-    return resolveDefaultColorMode(themeName);
+    if (isBuiltInTheme(themeName)) return resolveDefaultColorMode(themeName);
+    return 'toggle';
 }
 function resolveThemeSwitcher(config) {
     if (config.theme && config.theme.switcher) return config.theme.switcher;
@@ -60,6 +76,13 @@ function createRspressConfig(options) {
     const themeSwitcher = resolveThemeSwitcher(config);
     const themeColors = resolveThemeColors(config);
     const themeDarkColors = resolveThemeDarkColors(config);
+    const criticalCss = getCriticalCss(themeName);
+    const headElements = (()=>{
+        if (criticalCss) return [
+            `<style data-zpress-critical>${criticalCss}</style>`
+        ];
+        return [];
+    })();
     return {
         root: paths.contentDir,
         outDir: paths.distDir,
@@ -76,6 +99,7 @@ function createRspressConfig(options) {
         plugins: [
             zpressPlugin()
         ],
+        head: headElements,
         builderConfig: {
             ...(()=>{
                 if (logLevel) return {

package/dist/theme/components/home/feature-card.tsx

@@ -1,13 +1,11 @@
+import type { IconColor } from '@zpress/config'
 import type React from 'react'
 import { match, P } from 'ts-pattern'
 
 import './feature-card.css'
 import { Card } from '../shared/card'
 
-/**
- * Icon color variants matching the design system.
- */
-export type IconColor = 'purple' | 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'cyan' | 'pink'
+export type { IconColor } from '@zpress/config'
 
 export interface FeatureCardProps {
   readonly title: string

package/dist/theme/components/home/workspaces.tsx

@@ -37,8 +37,8 @@ function renderGroup(group: WorkspaceGroupData): React.ReactElement {
     <WorkspaceGrid key={group.heading} heading={group.heading} description={group.description}>
       {group.cards.map((card, i) => (
         <WorkspaceCard
-          key={`${card.text}-${i}`}
-          text={card.text}
+          key={`${card.title}-${i}`}
+          title={card.title}
           href={card.href}
           icon={card.icon}
           iconColor={card.iconColor}

package/dist/theme/components/nav/layout.tsx

@@ -6,20 +6,57 @@ import { BranchTag } from './branch-tag'
 import { ThemeSwitcher } from './theme-switcher'
 import { VscodeTag } from './vscode-tag'
 
-const VSCODE_OVERRIDES = [
-  /* Hide left sidebar and its placeholder */
-  '.rp-doc-layout__sidebar { display: none !important; }',
-  '.rp-doc-layout__sidebar-placeholder { display: none !important; }',
-  /* Hide right TOC and its placeholder */
-  '.rp-doc-layout__outline { display: none !important; }',
-  '.rp-doc-layout__outline-placeholder { display: none !important; }',
-  /* Center content at 1200px max */
-  '.rp-doc-layout__doc { max-width: 1200px !important; margin: 0 auto !important; }',
-  /* Hide nav items, social links, hamburger */
-  '.rp-nav-menu__item { display: none !important; }',
-  '.rp-social-links { display: none !important; }',
-  '.rp-nav-hamburger { display: none !important; }',
-].join('\n')
+const VSCODE_OVERRIDES = `
+/* Hide left sidebar and its placeholder */
+html[data-zpress-env="vscode"] .rp-doc-layout__sidebar {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-doc-layout__sidebar-placeholder {
+  display: none;
+}
+
+/* Hide right TOC and its placeholder */
+html[data-zpress-env="vscode"] .rp-doc-layout__outline {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-doc-layout__outline-placeholder {
+  display: none;
+}
+
+/* Center content at 1200px max */
+html[data-zpress-env="vscode"] .rp-doc-layout__doc {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Hide nav items, social links, hamburger */
+html[data-zpress-env="vscode"] .rp-nav-menu__item {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-social-links {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-nav-hamburger {
+  display: none;
+}
+
+/* Hide mobile navigation elements */
+html[data-zpress-env="vscode"] .rp-nav-screen {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-nav-screen-menu {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-local-nav {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-appearance {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-doc-layout__menu {
+  display: none;
+}
+`
 
 function useVscodeMode(): boolean {
   const [active, setActive] = useState(false)

package/dist/theme/components/nav/theme-switcher.tsx

@@ -17,6 +17,7 @@ const THEME_OPTIONS: readonly ThemeOption[] = [
   { name: 'base', label: 'Base', swatch: '#a78bfa', defaultColorMode: 'toggle' },
   { name: 'midnight', label: 'Midnight', swatch: '#60a5fa', defaultColorMode: 'dark' },
   { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark' },
+  { name: 'arcade-fx', label: 'Arcade FX', swatch: '#ff00ff', defaultColorMode: 'dark' },
 ]
 
 /**

package/dist/theme/components/workspaces/card.tsx

@@ -1,7 +1,7 @@
+import type { IconColor } from '@zpress/config'
 import type React from 'react'
 import { match, P } from 'ts-pattern'
 
-import type { IconColor } from '../home/feature-card'
 import { Card } from '../shared/card'
 import { Icon } from '../shared/icon'
 import { TechTag } from '../shared/tech-tag'
@@ -12,7 +12,7 @@ export interface WorkspaceCardProps {
   /**
    * Display name for the card header.
    */
-  readonly text: string
+  readonly title: string
   /**
    * Link target (e.g. "/apps/api").
    */
@@ -50,7 +50,7 @@ export interface WorkspaceCardProps {
  * description, tech tags, and optional deploy badge.
  */
 export function WorkspaceCard({
-  text,
+  title,
   href,
   icon,
   iconColor = 'purple',
@@ -59,7 +59,7 @@ export function WorkspaceCard({
   tags,
   badge,
 }: WorkspaceCardProps): React.ReactElement {
-  const name = text.toLowerCase()
+  const name = title.toLowerCase()
 
   const iconEl = match(icon)
     .with(P.nonNullable, (id) => <Icon icon={id} />)

package/dist/theme/hooks/use-zpress.ts

@@ -1,6 +1,5 @@
 import { useSite } from '@rspress/core/runtime'
-
-import type { IconColor } from '../components/home/feature-card'
+import type { IconColor } from '@zpress/config'
 
 // ── Sidebar types ───────────────────────────────────────────
 
@@ -14,7 +13,7 @@ export interface ZpressSidebarItem {
 // ── Workspace types ─────────────────────────────────────────
 
 export interface WorkspaceCardData {
-  readonly text: string
+  readonly title: string
   readonly href: string
   readonly icon: string | undefined
   readonly iconColor: IconColor | undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zpress/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Rspress plugin, theme components, and styles for zpress",
   "keywords": [
     "react",
@@ -52,7 +52,9 @@
     "@iconify-json/vscode-icons": "^1.2.45",
     "@iconify/react": "^6.0.2",
     "ts-pattern": "^5.9.0",
-    "@zpress/core": "0.5.0"
+    "@zpress/config": "0.2.0",
+    "@zpress/core": "0.6.0",
+    "@zpress/theme": "0.2.0"
   },
   "devDependencies": {
     "@rslib/core": "^0.20.0",

package/src/theme/components/home/feature-card.tsx

@@ -1,13 +1,11 @@
+import type { IconColor } from '@zpress/config'
 import type React from 'react'
 import { match, P } from 'ts-pattern'
 
 import './feature-card.css'
 import { Card } from '../shared/card'
 
-/**
- * Icon color variants matching the design system.
- */
-export type IconColor = 'purple' | 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'cyan' | 'pink'
+export type { IconColor } from '@zpress/config'
 
 export interface FeatureCardProps {
   readonly title: string

package/src/theme/components/home/workspaces.tsx

@@ -37,8 +37,8 @@ function renderGroup(group: WorkspaceGroupData): React.ReactElement {
     <WorkspaceGrid key={group.heading} heading={group.heading} description={group.description}>
       {group.cards.map((card, i) => (
         <WorkspaceCard
-          key={`${card.text}-${i}`}
-          text={card.text}
+          key={`${card.title}-${i}`}
+          title={card.title}
           href={card.href}
           icon={card.icon}
           iconColor={card.iconColor}

package/src/theme/components/nav/layout.tsx

@@ -6,20 +6,57 @@ import { BranchTag } from './branch-tag'
 import { ThemeSwitcher } from './theme-switcher'
 import { VscodeTag } from './vscode-tag'
 
-const VSCODE_OVERRIDES = [
-  /* Hide left sidebar and its placeholder */
-  '.rp-doc-layout__sidebar { display: none !important; }',
-  '.rp-doc-layout__sidebar-placeholder { display: none !important; }',
-  /* Hide right TOC and its placeholder */
-  '.rp-doc-layout__outline { display: none !important; }',
-  '.rp-doc-layout__outline-placeholder { display: none !important; }',
-  /* Center content at 1200px max */
-  '.rp-doc-layout__doc { max-width: 1200px !important; margin: 0 auto !important; }',
-  /* Hide nav items, social links, hamburger */
-  '.rp-nav-menu__item { display: none !important; }',
-  '.rp-social-links { display: none !important; }',
-  '.rp-nav-hamburger { display: none !important; }',
-].join('\n')
+const VSCODE_OVERRIDES = `
+/* Hide left sidebar and its placeholder */
+html[data-zpress-env="vscode"] .rp-doc-layout__sidebar {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-doc-layout__sidebar-placeholder {
+  display: none;
+}
+
+/* Hide right TOC and its placeholder */
+html[data-zpress-env="vscode"] .rp-doc-layout__outline {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-doc-layout__outline-placeholder {
+  display: none;
+}
+
+/* Center content at 1200px max */
+html[data-zpress-env="vscode"] .rp-doc-layout__doc {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Hide nav items, social links, hamburger */
+html[data-zpress-env="vscode"] .rp-nav-menu__item {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-social-links {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-nav-hamburger {
+  display: none;
+}
+
+/* Hide mobile navigation elements */
+html[data-zpress-env="vscode"] .rp-nav-screen {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-nav-screen-menu {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-local-nav {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-appearance {
+  display: none;
+}
+html[data-zpress-env="vscode"] .rp-doc-layout__menu {
+  display: none;
+}
+`
 
 function useVscodeMode(): boolean {
   const [active, setActive] = useState(false)

package/src/theme/components/nav/theme-switcher.tsx

@@ -17,6 +17,7 @@ const THEME_OPTIONS: readonly ThemeOption[] = [
   { name: 'base', label: 'Base', swatch: '#a78bfa', defaultColorMode: 'toggle' },
   { name: 'midnight', label: 'Midnight', swatch: '#60a5fa', defaultColorMode: 'dark' },
   { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark' },
+  { name: 'arcade-fx', label: 'Arcade FX', swatch: '#ff00ff', defaultColorMode: 'dark' },
 ]
 
 /**

package/src/theme/components/workspaces/card.tsx

@@ -1,7 +1,7 @@
+import type { IconColor } from '@zpress/config'
 import type React from 'react'
 import { match, P } from 'ts-pattern'
 
-import type { IconColor } from '../home/feature-card'
 import { Card } from '../shared/card'
 import { Icon } from '../shared/icon'
 import { TechTag } from '../shared/tech-tag'
@@ -12,7 +12,7 @@ export interface WorkspaceCardProps {
   /**
    * Display name for the card header.
    */
-  readonly text: string
+  readonly title: string
   /**
    * Link target (e.g. "/apps/api").
    */
@@ -50,7 +50,7 @@ export interface WorkspaceCardProps {
  * description, tech tags, and optional deploy badge.
  */
 export function WorkspaceCard({
-  text,
+  title,
   href,
   icon,
   iconColor = 'purple',
@@ -59,7 +59,7 @@ export function WorkspaceCard({
   tags,
   badge,
 }: WorkspaceCardProps): React.ReactElement {
-  const name = text.toLowerCase()
+  const name = title.toLowerCase()
 
   const iconEl = match(icon)
     .with(P.nonNullable, (id) => <Icon icon={id} />)

package/src/theme/hooks/use-zpress.ts

@@ -1,6 +1,5 @@
 import { useSite } from '@rspress/core/runtime'
-
-import type { IconColor } from '../components/home/feature-card'
+import type { IconColor } from '@zpress/config'
 
 // ── Sidebar types ───────────────────────────────────────────
 
@@ -14,7 +13,7 @@ export interface ZpressSidebarItem {
 // ── Workspace types ─────────────────────────────────────────
 
 export interface WorkspaceCardData {
-  readonly text: string
+  readonly title: string
   readonly href: string
   readonly icon: string | undefined
   readonly iconColor: IconColor | undefined