boltdocs 2.6.2 → 2.7.0

package/src/client/store/boltdocs-context.tsx

@@ -1,4 +1,11 @@
-import { createContext, use, useMemo, useState } from 'react'
+import { createContext, use, useMemo, useState, useEffect } from 'react'
+
+const PREFERENCES_KEY = 'boltdocs-user-preferences'
+
+interface PersistedState {
+  locale?: string
+  version?: string
+}
 
 export interface BoltdocsState {
   currentLocale: string
@@ -27,32 +34,77 @@ export function BoltdocsProvider({
   initialLocale?: string
   initialVersion?: string
 }) {
-  const getInitialState = () => {
-    if (typeof window === 'undefined')
-      return { locale: initialLocale, version: initialVersion }
-    const parts = window.location.pathname.split('/').filter(Boolean)
-    let locale = initialLocale
-    let version = initialVersion
-    // ...
-    return { locale, version }
+  // Helper to read from storage safely
+  const getSavedPrefs = (): PersistedState => {
+    if (typeof window === 'undefined') return {}
+    try {
+      const raw = localStorage.getItem(PREFERENCES_KEY)
+      return raw ? JSON.parse(raw) : {}
+    } catch {
+      return {}
+    }
   }
 
-  const initialState = getInitialState()
-  const [locale, setLocale] = useState(initialState.locale)
-  const [version, setVersion] = useState(initialState.version)
-  const [hasHydrated, setHasHydrated] = useState(false)
+  // 1. Lazy state initializers prioritize passed URL state, falling back to LocalStorage preference immediately
+  const [locale, setLocaleState] = useState(() => {
+    if (initialLocale) return initialLocale
+    const prefs = getSavedPrefs()
+    return prefs.locale || ''
+  })
+
+  const [version, setVersionState] = useState(() => {
+    if (initialVersion) return initialVersion
+    const prefs = getSavedPrefs()
+    return prefs.version || ''
+  })
+
+  const [hasHydrated, setHasHydrated] = useState(() => {
+    return typeof window !== 'undefined'
+  })
 
-  const value = useMemo(
-    () => ({
+  // Ensure the hydrator runs once client is definitely booted
+  useEffect(() => {
+    setHasHydrated(true)
+  }, [])
+
+  const value = useMemo(() => {
+    const updateLocale = (l: string) => {
+      const newL = l || ''
+      setLocaleState(newL)
+      if (typeof window !== 'undefined') {
+        try {
+          const prefs = getSavedPrefs()
+          localStorage.setItem(
+            PREFERENCES_KEY,
+            JSON.stringify({ ...prefs, locale: newL }),
+          )
+        } catch (e) {}
+      }
+    }
+
+    const updateVersion = (v: string) => {
+      const newV = v || ''
+      setVersionState(newV)
+      if (typeof window !== 'undefined') {
+        try {
+          const prefs = getSavedPrefs()
+          localStorage.setItem(
+            PREFERENCES_KEY,
+            JSON.stringify({ ...prefs, version: newV }),
+          )
+        } catch (e) {}
+      }
+    }
+
+    return {
       currentLocale: locale,
       currentVersion: version,
-      setLocale: (l: string) => setLocale(l || ''),
-      setVersion: (v: string) => setVersion(v || ''),
+      setLocale: updateLocale,
+      setVersion: updateVersion,
       hasHydrated,
       setHasHydrated,
-    }),
-    [locale, version, hasHydrated],
-  )
+    }
+  }, [locale, version, hasHydrated])
 
   // Sync with global registry for dual-package fallback
   if (typeof globalThis !== 'undefined') {

package/src/client/theme/neutral.css

@@ -7,29 +7,38 @@
 
   --breakpoint-3xl: 120rem;
 
-  --color-primary-50: oklch(0.985 0.012 265.8);
-  --color-primary-100: oklch(0.92 0.045 265.8);
-  --color-primary-200: oklch(0.84 0.085 265.8);
-  --color-primary-300: oklch(0.74 0.125 265.8);
-  --color-primary-400: oklch(0.64 0.165 265.8);
-  --color-primary-500: oklch(0.54 0.195 265.8);
-  --color-primary-600: oklch(0.45 0.165 265.8);
-  --color-primary-700: oklch(0.36 0.135 265.8);
-  --color-primary-800: oklch(0.27 0.095 265.8);
-  --color-primary-900: oklch(0.15 0.045 265.8);
-
-  /* Neutral Gray Palette */
-  --color-neutral-50: oklch(0.98 0 0);
-  --color-neutral-100: oklch(0.96 0 0);
-  --color-neutral-200: oklch(0.92 0 0);
-  --color-neutral-300: oklch(0.84 0 0);
-  --color-neutral-400: oklch(0.7 0 0);
-  --color-neutral-500: oklch(0.55 0 0);
-  --color-neutral-600: oklch(0.4 0 0);
-  --color-neutral-700: oklch(0.25 0 0);
-  --color-neutral-800: oklch(0.15 0 0);
-  --color-neutral-900: oklch(0.1 0 0);
-  --color-neutral-950: oklch(0.05 0 0);
+  /* Premium Terracotta brand Palette (#eb5828) */
+  --color-primary-50: #fef4f0;
+  --color-primary-100: #fde4da;
+  --color-primary-200: #fbc8b6;
+  --color-primary-300: #faa184;
+  --color-primary-400: #f6724a;
+  --color-primary-500: #eb5828;
+  /* Core brand Terracotta Orange */
+  --color-primary-600: #d34013;
+  --color-primary-700: #ab300c;
+  --color-primary-800: #842308;
+  --color-primary-900: #5a1503;
+
+  /* Intellectual warm Neutral Palette (#faf9f5 / #141413) */
+  --color-neutral-50: #faf9f5;
+  /* Elegant Light Background */
+  --color-neutral-100: #f5f4ee;
+  /* Soft backgrounds and cards */
+  --color-neutral-200: #eae8de;
+  /* Subtle border */
+  --color-neutral-300: #d9d6c7;
+  /* Strong border */
+  --color-neutral-400: #b5b19c;
+  --color-neutral-500: #8a8670;
+  /* Muted warm gray text */
+  --color-neutral-600: #706c57;
+  --color-neutral-700: #4a483a;
+  /* Paragraph text */
+  --color-neutral-800: #25241d;
+  --color-neutral-900: #141413;
+  /* Elegant Soft Black text / Dark mode main background */
+  --color-neutral-950: #080807;
 
   /* Semantic Status Colors */
   --color-danger-500: oklch(0.63 0.24 27);
@@ -37,35 +46,40 @@
   --color-warning-500: oklch(0.78 0.17 75);
   --color-info-500: oklch(0.62 0.19 260);
 
-  /* Shared Properties */
+  /* Modern Organic Rounded Radii (Warmer and More Rounded) */
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
+  --radius-lg: 1rem;
+  /* 16px */
+  --radius-xl: 1.25rem;
+  /* 20px */
   --radius-2xl: 1.5rem;
+  /* 24px */
   --radius-full: 99999rem;
 
   --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
   --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
 
-  /* Semantic Colors - Default (Light) */
-  --color-bg-main: var(--color-neutral-50);
-  --color-bg-surface: var(--color-neutral-100);
-  --color-bg-muted: var(--color-neutral-200);
-  --color-text-main: var(--color-neutral-900);
-  --color-text-muted: var(--color-neutral-500);
-  --color-text-dim: var(--color-neutral-400);
-  --color-border-subtle: var(--color-neutral-200);
-  --color-border-strong: var(--color-neutral-300);
+  /* Semantic Colors - Default (Light Parchment) */
+  --color-main: var(--color-neutral-50);
+  --color-surface: #ffffff;
+  /* Pure soft white for cards */
+  --color-soft: var(--color-neutral-100);
+  --color-body: var(--color-neutral-900);
+  --color-paragraph: var(--color-neutral-700);
+  --color-muted: var(--color-neutral-500);
+  --color-dim: var(--color-neutral-400);
+  --color-subtle: var(--color-neutral-200);
+  --color-strong: var(--color-neutral-300);
   --color-code-bg: var(--color-neutral-100);
-  --color-code-text: var(--color-neutral-800);
+  --color-code-text: #eb5828;
 
   /* Semantic Colors - Dark Override (handled via standard CSS overrides below the @theme block) */
 
   /* Spacing and Dimensions */
   --spacing-navbar: 3.5rem;
   --spacing-sidebar: 16rem;
-  --spacing-toc: 14rem;
+  --spacing-toc: 16rem;
   --spacing-content-max: 54rem;
 
   @keyframes pulse {
@@ -73,6 +87,7 @@
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.5;
     }
@@ -81,11 +96,10 @@
   @keyframes fade-in {
     from {
       opacity: 0;
-      transform: translateY(10px);
     }
+
     to {
       opacity: 1;
-      transform: translateY(0);
     }
   }
 }
@@ -99,330 +113,29 @@
 }
 
 .animate-fade-in {
-  animation: fade-in 0.5s ease-out forwards;
+  animation: fade-in 0.1s ease-out forwards;
 }
 
 :root[data-theme="dark"],
 :root.dark {
-  --color-bg-main: var(--color-neutral-900);
-  --color-bg-surface: var(--color-neutral-800);
-  --color-bg-muted: var(--color-neutral-800);
-  --color-text-main: var(--color-neutral-50);
-  --color-text-muted: var(--color-neutral-400);
-  --color-text-dim: var(--color-neutral-500);
-  --color-border-subtle: var(--color-neutral-800);
-  --color-border-strong: var(--color-neutral-700);
-  --color-code-bg: var(--color-neutral-900);
-  --color-code-text: var(--color-neutral-200);
-}
-
-
-@layer base {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  html,
-  body {
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-    overflow-x: hidden;
-  }
-
-  body {
-    @apply bg-bg-main text-text-main antialiased;
-    font-family: var(--font-sans);
-    line-height: 1.7;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  /* Scroll-margin-top for anchor scrolling */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    scroll-margin-top: 6rem;
-  }
-
-  /* Scrollbar */
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    @apply bg-neutral-300 dark:bg-neutral-700 rounded-full;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    @apply bg-neutral-400 dark:bg-neutral-600;
-  }
-
-  /* ═══ Content Area ═══ */
-  .boltdocs-content {
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-  }
-  .boltdocs-content::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* ═══ Markdown Typography ═══ */
-  .boltdocs-page {
-    position: relative;
-    padding-top: 1rem;
-    padding-bottom: 8rem;
-  }
-
-  .boltdocs-page h1 {
-    font-size: 2.5rem;
-    margin: 0 0 1rem;
-    font-weight: 800;
-    letter-spacing: -0.04em;
-    color: var(--color-text-main);
-    line-height: 1.2;
-  }
-  .boltdocs-page h1 + p {
-    color: var(--color-text-muted);
-    font-size: 1.125rem;
-    margin-bottom: 2.5rem;
-    line-height: 1.6;
-  }
-  .boltdocs-page h2 {
-    font-size: 1.75rem;
-    margin-top: 3.5rem;
-    margin-bottom: 1.25rem;
-    font-weight: 700;
-    color: var(--color-text-main);
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--color-border-subtle);
-    scroll-margin-top: 6rem;
-    letter-spacing: -0.02em;
-  }
-  .boltdocs-page h3 {
-    font-size: 1.25rem;
-    margin-top: 2.5rem;
-    margin-bottom: 1rem;
-    font-weight: 600;
-    color: var(--color-text-main);
-    scroll-margin-top: 6rem;
-    letter-spacing: -0.01em;
-  }
-  .boltdocs-page p {
-    margin-top: 0;
-    margin-bottom: 1.25rem;
-    color: var(--color-text-muted);
-    line-height: 1.8;
-  }
-  .boltdocs-page a {
-    color: var(--color-primary-500);
-    text-decoration: none;
-    transition: color 0.2s;
-    font-weight: 500;
-  }
-  .boltdocs-page a:hover {
-    color: var(--color-primary-400);
-    text-decoration: underline;
-  }
-  .boltdocs-page ul,
-  .boltdocs-page ol {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-    padding-left: 1.5rem;
-    color: var(--color-text-muted);
-  }
-  .boltdocs-page li {
-    margin-bottom: 0.5rem;
-    line-height: 1.8;
-  }
-  .boltdocs-page strong {
-    color: var(--color-text-main);
-    font-weight: 700;
-  }
-  .boltdocs-page blockquote {
-    margin: 2rem 0;
-    padding: 1rem 1.5rem;
-    border-left: 4px solid var(--color-primary-500);
-    background-color: var(--color-primary-500);
-    background-color: color-mix(
-      in oklch,
-      var(--color-primary-500),
-      transparent 93%
-    );
-    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-    color: var(--color-text-muted);
-    font-style: italic;
-  }
-  .boltdocs-page blockquote p {
-    margin: 0;
-  }
-  .boltdocs-page hr {
-    border: none;
-    border-top: 1px solid var(--color-border-subtle);
-    margin: 3rem 0;
-  }
-  .boltdocs-page img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--radius-lg);
-    margin: 2rem 0;
-    display: block;
-  }
-  .boltdocs-page table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 2rem 0;
-    font-size: 0.875rem;
-  }
-  .boltdocs-page th {
-    text-align: left;
-    padding: 0.75rem 1rem;
-    border-bottom: 2px solid var(--color-border-subtle);
-    color: var(--color-text-main);
-    font-weight: 700;
-  }
-  .boltdocs-page td {
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--color-border-subtle);
-    color: var(--color-text-muted);
-  }
-  .boltdocs-page tr:hover td {
-    background-color: var(--color-bg-surface);
-  }
-
-  @media (max-width: 768px) {
-    .boltdocs-page h1 {
-      font-size: 1.75rem;
-    }
-  }
-
-  /* ═══ Header Anchors ═══ */
-  .header-anchor {
-    margin-left: 0.5rem;
-    color: var(--color-text-dim);
-    opacity: 0;
-    transition: opacity 0.2s;
-    text-decoration: none;
-    font-weight: 400;
-  }
-  .boltdocs-page h2:hover .header-anchor,
-  .boltdocs-page h3:hover .header-anchor {
-    opacity: 1;
-  }
-  .header-anchor:hover {
-    color: var(--color-primary-500);
-  }
-  .boltdocs-heading {
-    display: flex;
-    align-items: center;
-  }
-  .boltdocs-heading .header-anchor {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 0.5rem;
-    color: var(--color-text-dim);
-    opacity: 0;
-    transition: opacity 0.2s;
-    text-decoration: none;
-  }
-  .boltdocs-heading:hover .header-anchor {
-    opacity: 1;
-  }
-
-  /* ═══ Shiki Styles ═══ */
-  
-  /* Shiki Light/Dark Mode */
-  :root .shiki,
-  :root .shiki span {
-    font-family: var(--font-mono);
-    font-size: 12px !important;
-    background-color: transparent !important;
-  }
-
-  :root.dark .shiki,
-  :root.dark .shiki span {
-    color: var(--shiki-dark) !important;
-  }
-
-  /* Base Shiki Pre & Span Styles */
-  pre.shiki {
-    @apply py-2 text-[12px] leading-[1.6];
-  }
-
-  pre.shiki span.line {
-    @apply relative block px-4 py-0;
-    min-height: 1.6em;
-  }
-
-  /* Shiki Word Wrap */
-  pre.shiki-word-wrap {
-    @apply whitespace-pre-wrap break-words;
-  }
-
-  pre.shiki-word-wrap span.line {
-    @apply block w-full;
-  }
-
-  /* Shiki Line Numbers */
-  pre.shiki-line-numbers code {
-    counter-reset: step;
-    counter-increment: step 0;
-  }
-
-  pre.shiki-line-numbers .line {
-    @apply pl-12!; 
-  }
-
-  /* Hide the last line if it is completely empty to avoid extra numbers */
-  pre.shiki-line-numbers .line:last-child:empty,
-  pre.shiki-line-numbers .line:last-child:has(> :empty) {
-     display: none;
-  }
-
-  pre.shiki-line-numbers .line::before {
-    counter-increment: step;
-    content: counter(step);
-    @apply absolute left-0 top-0 inline-flex w-10 justify-end pr-3;
-    @apply text-[11px] text-text-muted opacity-30 select-none;
-    line-height: inherit; /* Sync with line text */
-  }
-
-  /* Shiki Highlight */
-  pre span.shiki-line-highlight {
-    @apply relative z-0 inline-block w-full;
-    &::after {
-      content: "";
-      @apply absolute top-0 left-0 -z-10 h-full w-full border-l-2 border-primary-500 bg-primary-500/10! opacity-100;
-    }
-  }
-
-  /* Shiki Notation Diff */
-  pre.has-diff span.line.diff {
-    @apply relative inline-block w-full;
-  }
-
-  pre.has-diff span.line.diff.add {
-    @apply bg-emerald-500/10! dark:bg-emerald-500/10!;
-    &::before {
-      content: "+";
-      @apply absolute left-2 text-emerald-500 font-bold;
-    }
-  }
-
-  pre.has-diff span.line.diff.remove {
-    @apply bg-danger-500/10! opacity-70;
-    &::before {
-      content: "-";
-      @apply absolute left-2 text-danger-500 font-bold;
-    }
-  }
+  --color-main: #141413;
+  /* Deep warm charcoal background */
+  --color-surface: #1e1e1d;
+  /* Slightly lighter warm charcoal for cards */
+  --color-soft: #252524;
+  /* Warm dark gray for containers */
+  --color-body: #f3f3f2;
+  /* Soft warm white body text */
+  --color-paragraph: #d5d5d3;
+  /* Warm light gray text */
+  --color-muted: #9a9a97;
+  /* Warm muted text */
+  --color-dim: #767673;
+  --color-subtle: #2c2c2a;
+  /* Subtle dark border */
+  --color-strong: #3c3c39;
+  /* Strong dark border */
+  --color-code-bg: #1c1c1b;
+  --color-code-text: #eb5828;
+  /* Outstanding terracotta orange inline code */
 }