boltdocs 1.10.1 → 1.10.2

package/dist/client/ssr.mjs

@@ -1,6 +1,6 @@
 import {
   AppShell
-} from "../chunk-OZLYRXAD.mjs";
+} from "../chunk-TKLQWU7H.mjs";
 import "../chunk-FMTOYQLO.mjs";
 
 // src/client/ssr.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltdocs",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "description": "A lightweight documentation generator for React projects.",
   "main": "dist/node/index.js",
   "module": "dist/node/index.mjs",

package/src/client/index.ts

@@ -8,7 +8,6 @@ export { Sidebar } from "./theme/ui/Sidebar";
 export { OnThisPage } from "./theme/ui/OnThisPage";
 export { Head } from "./theme/ui/Head";
 export { Breadcrumbs } from "./theme/ui/Breadcrumbs";
-export { BackgroundGradient } from "./theme/ui/BackgroundGradient";
 export { Playground } from "./theme/components/Playground";
 export { NotFound } from "./theme/ui/NotFound";
 export { Loading } from "./theme/ui/Loading";

package/src/client/theme/components/CodeBlock/CodeBlock.tsx

@@ -14,6 +14,8 @@ interface CodeBlockProps {
  */
 export function CodeBlock({ children, ...props }: CodeBlockProps) {
   const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpandable, setIsExpandable] = useState(false);
   const preRef = useRef<HTMLPreElement>(null);
 
   const handleCopy = useCallback(async () => {
@@ -23,8 +25,17 @@ export function CodeBlock({ children, ...props }: CodeBlockProps) {
     setTimeout(() => setCopied(false), 2000);
   }, []);
 
+  React.useEffect(() => {
+    if (preRef.current) {
+      const codeLength = preRef.current.textContent?.length || 0;
+      setIsExpandable(codeLength > 500);
+    }
+  }, [children]);
+
+  const shouldTruncate = isExpandable && !isExpanded;
+
   return (
-    <div className="code-block-wrapper">
+    <div className={`code-block-wrapper ${shouldTruncate ? "is-truncated" : ""}`}>
       <button
         className={`code-block-copy ${copied ? "copied" : ""}`}
         onClick={handleCopy}
@@ -35,6 +46,16 @@ export function CodeBlock({ children, ...props }: CodeBlockProps) {
       <pre ref={preRef} {...props}>
         {children}
       </pre>
+      {isExpandable && (
+        <div className="code-block-expand-wrapper">
+          <button
+            className="code-block-expand-btn"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? "Show less" : "Expand code"}
+          </button>
+        </div>
+      )}
     </div>
   );
 }

package/src/client/theme/components/Playground/Playground.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import { Copy, Check, Terminal, Play } from "lucide-react";
+import { CodeBlock } from "../CodeBlock";
 
 interface PlaygroundProps {
   code?: string;
   children?: string | React.ReactNode;
+  preview?: React.ReactNode;
   scope?: Record<string, any>;
   readonly?: boolean;
   noInline?: boolean;
@@ -16,7 +18,7 @@ interface PlaygroundProps {
  * appending a `render(<ComponentName />)` call.
  */
 function prepareCode(raw: string): { code: string; noInline: boolean } {
-  const trimmed = raw.trim();
+  const trimmed = (raw || "").trim();
 
   // Match: export default function Name(...)
   const fnMatch = trimmed.match(/export\s+default\s+function\s+(\w+)/);
@@ -41,33 +43,38 @@ function prepareCode(raw: string): { code: string; noInline: boolean } {
   return { code: trimmed, noInline: false };
 }
 
-/**
- * A live React playground component.
- * Features a split layout with a live editor and a preview section.
- *
- * Supports `export default function App()` style code out of the box.
- */
 export function Playground({
-  code,
+  code: propsCode,
   children,
+  preview,
   scope = {},
   readonly = false,
   noInline: forceNoInline,
 }: PlaygroundProps) {
   // Extract code from either `code` prop or `children`
-  let initialCode = code || "";
-  if (!initialCode && typeof children === "string") {
-    initialCode = children;
-  }
+  const initialCode = useMemo(() => {
+    let base = propsCode || "";
+    if (!base && typeof children === "string") {
+      base = children;
+    }
+    return base.trim();
+  }, [propsCode, children]);
 
-  const prepared = prepareCode(initialCode);
+  const prepared = useMemo(() => prepareCode(initialCode), [initialCode]);
   const useNoInline = forceNoInline ?? prepared.noInline;
 
   const [copied, setCopied] = useState(false);
   const [activeCode, setActiveCode] = useState(prepared.code);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Sync activeCode when initialCode changes (e.g. in static mode)
+  React.useEffect(() => {
+    setActiveCode(prepared.code);
+  }, [prepared.code]);
 
   const handleCopy = () => {
-    navigator.clipboard.writeText(activeCode);
+    const textToCopy = !!preview ? initialCode : activeCode;
+    navigator.clipboard.writeText(textToCopy);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
@@ -75,50 +82,99 @@ export function Playground({
   // Provide React generically
   const extendedScope = { React, ...scope };
 
+  const charLimit = 800; // Adjust as needed
+  const isExpandable = (propsCode || initialCode).length > charLimit;
+  const shouldTruncate = isExpandable && !isExpanded;
+
+  const isStatic = !!preview;
+
+  // Transformer to prevent ReferenceError: require is not defined
+  // only used in static mode to allow highlighting without execution
+  const staticTransform = (code: string) => {
+    // Return empty or a simple dummy to avoid running the code
+    return "render(<div style={{display:'none'}} />)";
+  };
+
   return (
-    <div className="boltdocs-playground" data-readonly={readonly}>
-      <LiveProvider
-        code={activeCode}
-        scope={extendedScope}
-        theme={undefined}
-        noInline={useNoInline}
-      >
-        <div className="playground-split-container">
-          {/* Editor Side */}
-          <div className="playground-panel playground-editor-panel">
+    <div className={`boltdocs-playground ${shouldTruncate ? "is-truncated" : ""}`} data-readonly={readonly || isStatic}>
+      <div className="playground-split-container">
+        {/* Preview Side - Now on top */}
+        <div className="playground-panel playground-preview-panel">
+          <div className="playground-panel-header">
+            <div className="playground-panel-title">
+              <Play size={14} />
+              <span>Preview</span>
+            </div>
+          </div>
+          <div className="playground-panel-content playground-preview">
+            {isStatic ? (
+              preview
+            ) : (
+              <LiveProvider
+                code={activeCode}
+                scope={extendedScope}
+                theme={undefined}
+                noInline={useNoInline}
+              >
+                <LivePreview />
+                <LiveError className="playground-error" />
+              </LiveProvider>
+            )}
+          </div>
+        </div>
+
+        {/* Editor Side - Now on bottom */}
+        <div className="playground-panel playground-editor-panel">
+          {!isStatic && (
             <div className="playground-panel-header">
               <div className="playground-panel-title">
                 <Terminal size={14} />
                 <span>{readonly ? "Code Example" : "Live Editor"}</span>
               </div>
+            </div>
+          )}
+          <div className="playground-panel-content playground-editor">
+            {/* Copy button moved inside code area */}
+            <button
+              className="playground-copy-btn-inner"
+              onClick={handleCopy}
+              title="Copy code"
+            >
+              {copied ? <Check size={14} /> : <Copy size={14} />}
+            </button>
+
+            {isStatic ? (
+              <LiveProvider
+                code={initialCode}
+                noInline={true}
+                transformCode={staticTransform}
+              >
+                <LiveEditor disabled />
+              </LiveProvider>
+            ) : (
+              <LiveProvider
+                code={activeCode}
+                scope={extendedScope}
+                theme={undefined}
+                noInline={useNoInline}
+              >
+                <LiveEditor disabled={readonly} onChange={setActiveCode} />
+              </LiveProvider>
+            )}
+          </div>
+          
+          {isExpandable && (
+            <div className="playground-expand-wrapper">
               <button
-                className="playground-copy-btn"
-                onClick={handleCopy}
-                title="Copy code"
+                className="playground-expand-btn"
+                onClick={() => setIsExpanded(!isExpanded)}
               >
-                {copied ? <Check size={14} /> : <Copy size={14} />}
+                {isExpanded ? "Show less" : "Expand code"}
               </button>
             </div>
-            <div className="playground-panel-content playground-editor">
-              <LiveEditor disabled={readonly} onChange={setActiveCode} />
-            </div>
-          </div>
-
-          {/* Preview Side */}
-          <div className="playground-panel playground-preview-panel">
-            <div className="playground-panel-header">
-              <div className="playground-panel-title">
-                <Play size={14} />
-                <span>Preview</span>
-              </div>
-            </div>
-            <div className="playground-panel-content playground-preview">
-              <LivePreview />
-              <LiveError className="playground-error" />
-            </div>
-          </div>
+          )}
         </div>
-      </LiveProvider>
+      </div>
     </div>
   );
 }

package/src/client/theme/components/Playground/playground.css

@@ -19,14 +19,6 @@
   width: 100%;
 }
 
-@media (min-width: 1024px) {
-  .playground-split-container {
-    flex-direction: row;
-    min-height: 350px;
-    align-items: stretch;
-  }
-}
-
 .playground-panel {
   display: flex;
   flex-direction: column;
@@ -35,15 +27,62 @@
 }
 
 .playground-editor-panel {
-  border-bottom: 1px solid var(--ld-border-subtle);
+  border-top: 1px solid var(--ld-border-subtle);
   background: var(--ld-code-bg);
+  position: relative;
+}
+
+.boltdocs-playground.is-truncated .playground-editor {
+  max-height: 250px;
+  overflow: hidden;
+}
+
+.boltdocs-playground[data-readonly="true"]:not(.is-truncated) .playground-editor {
+  max-height: 600px; /* Limit height even if not truncated manually */
 }
 
-@media (min-width: 1024px) {
-  .playground-editor-panel {
-    border-bottom: none;
-    border-right: 1px solid var(--ld-border-subtle);
-  }
+.playground-expand-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--ld-code-bg) 20%, transparent);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 1rem;
+  z-index: 10;
+}
+
+.playground-expand-btn {
+  background-color: var(--ld-surface);
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: 20px;
+  color: var(--ld-text-main);
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.playground-expand-btn:hover {
+  background-color: var(--ld-border-subtle);
+  transform: translateY(-1px);
+}
+
+/* When expanded, maybe show the button at the bottom without overlay */
+.boltdocs-playground:not(.is-truncated) .playground-expand-wrapper {
+  position: relative;
+  height: auto;
+  background: none;
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0;
+  border-top: 1px solid var(--ld-border-subtle);
 }
 
 .playground-preview-panel {
@@ -130,18 +169,18 @@
 
 /* Preview Specifics */
 .playground-preview {
-  padding: 2rem;
+  padding: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--ld-bg-mute);
+  background-color: #000; /* Dark background as in the image */
   background-image: radial-gradient(
-    var(--ld-border-subtle) 1.5px,
+    rgba(255, 255, 255, 0.05) 1.5px,
     transparent 1.5px
   );
   background-size: 24px 24px;
   color: var(--ld-text-main);
-  min-height: 200px;
+  min-height: 300px;
 }
 
 /* Error Specifics */
@@ -166,3 +205,34 @@
   margin: 2rem 0;
   border: 1px solid var(--ld-border-subtle);
 }
+/* Copy Button - Inner */
+.playground-copy-btn-inner {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-surface);
+  color: var(--ld-text-dim);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.playground-copy-btn-inner:hover {
+  background: var(--ld-border-subtle);
+  color: var(--ld-text-main);
+  transform: translateY(-1px);
+}
+
+/* Obsolete Static Code Integration - Cleaning up since we use LiveEditor now */
+.playground-static-code {
+  display: none;
+}

package/src/client/theme/styles/markdown.css

@@ -77,6 +77,7 @@
   font-weight: 700;
   letter-spacing: -0.025em;
   color: var(--ld-text-main);
+  padding-right: 160px; /* Space for CopyMarkdown button */
 }
 
 .boltdocs-page h1 + p {
@@ -267,6 +268,58 @@
   padding: 1.25rem 1rem !important;
 }
 
+.code-block-wrapper.is-truncated pre {
+  max-height: 250px;
+  overflow: hidden;
+}
+
+.code-block-expand-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--ld-code-bg) 20%, transparent);
+  display: none;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 1rem;
+  z-index: 10;
+}
+
+.code-block-wrapper.is-truncated .code-block-expand-wrapper {
+  display: flex;
+}
+
+.code-block-expand-btn {
+  background-color: var(--ld-surface);
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: 20px;
+  color: var(--ld-text-main);
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.code-block-expand-btn:hover {
+  background-color: var(--ld-border-subtle);
+  transform: translateY(-1px);
+}
+
+.code-block-wrapper:not(.is-truncated) .code-block-expand-wrapper {
+  position: relative;
+  height: auto;
+  background: none;
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0;
+  border-top: 1px solid var(--ld-border-subtle);
+}
+
 .code-block-wrapper pre > code .line {
   padding: 0 1.25rem;
 }

package/src/client/theme/styles/variables.css

@@ -32,10 +32,6 @@
   --ld-btn-secondary-bg: #ffffff;
   --ld-btn-secondary-text: #111827;
 
-  /* ─ Gradients ─ */
-  --ld-gradient-from: var(--ld-color-primary);
-  --ld-gradient-to: #a855f7;
-
   --ld-code-bg: #f3f4f6;
   --ld-code-header: #e5e7eb;
   --ld-code-text: #1f2937;
@@ -45,8 +41,6 @@
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
-  --ld-glow-1-bg: var(--ld-color-primary-glow);
-  --ld-glow-2-bg: rgba(215, 59, 246, 0.15);
 
   /* ─ UI Components (overridable independently from layout) ─ */
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
@@ -102,10 +96,6 @@
   --ld-btn-secondary-bg: #1a1a2e;
   --ld-btn-secondary-text: #e4e4ed;
 
-  /* ─ Gradients ─ */
-  --ld-gradient-from: #ffffff;
-  --ld-gradient-to: rgba(255, 255, 255, 0.7);
-
   /* ─ Code ─ */
   --ld-code-bg: #050505;
   --ld-code-header: #111119;
@@ -116,8 +106,6 @@
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
-  --ld-glow-1-bg: var(--ld-color-primary-glow);
-  --ld-glow-2-bg: rgba(246, 59, 187, 0.15);
 
   /* ─ UI Components (dark) ─ */
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);

package/src/client/theme/styles.css

@@ -30,6 +30,7 @@
 /* Pages */
 @import "./ui/NotFound/not-found.css";
 @import "./ui/Loading/loading.css";
+@import "./ui/ErrorBoundary/error-boundary.css";
 
 /* Playground */
 @import "./components/Playground/playground.css";

package/src/client/theme/ui/CopyMarkdown/copy-markdown.css

@@ -12,12 +12,10 @@
   border-radius: var(--ld-radius-full);
   overflow: hidden;
   transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
 .copy-btn-group:hover {
   border-color: var(--ld-color-primary-hover);
-  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
 }
 
 .copy-btn {

package/src/client/theme/ui/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
+import { Component, ErrorInfo, ReactNode } from "react";
+import "./error-boundary.css";
 
 interface Props {
   children?: ReactNode;
@@ -12,7 +13,7 @@ interface State {
 
 export class ErrorBoundary extends Component<Props, State> {
   public state: State = {
-    hasError: false
+    hasError: false,
   };
 
   public static getDerivedStateFromError(error: Error): State {
@@ -25,19 +26,22 @@ export class ErrorBoundary extends Component<Props, State> {
 
   public render() {
     if (this.state.hasError) {
-      return this.props.fallback || (
-        <div className="boltdocs-error-boundary">
-          <div className="boltdocs-error-title">Something went wrong</div>
-          <p className="boltdocs-error-message">
-            {this.state.error?.message || "An unexpected error occurred while rendering this page."}
-          </p>
-          <button 
-            className="boltdocs-error-retry"
-            onClick={() => this.setState({ hasError: false })}
-          >
-            Try again
-          </button>
-        </div>
+      return (
+        this.props.fallback || (
+          <div className="boltdocs-error-boundary">
+            <div className="boltdocs-error-title">Something went wrong</div>
+            <p className="boltdocs-error-message">
+              {this.state.error?.message ||
+                "An unexpected error occurred while rendering this page."}
+            </p>
+            <button
+              className="boltdocs-error-retry"
+              onClick={() => this.setState({ hasError: false })}
+            >
+              Try again
+            </button>
+          </div>
+        )
       );
     }
 

package/src/client/theme/ui/ErrorBoundary/error-boundary.css

@@ -0,0 +1,55 @@
+.boltdocs-error-boundary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 2rem;
+  margin: 2rem 0;
+  background-color: var(--ld-bg-soft);
+  border: 1px solid var(--ld-ui-danger-border);
+  border-radius: var(--ld-radius-lg);
+  text-align: center;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.boltdocs-error-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--ld-ui-danger-text);
+  margin-bottom: 0.75rem;
+  font-family: var(--ld-font-sans);
+}
+
+.boltdocs-error-message {
+  font-size: 1rem;
+  color: var(--ld-text-muted);
+  max-width: 100%;
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.boltdocs-error-retry {
+  padding: 0.6rem 1.25rem;
+  background-color: var(--ld-ui-btn-primary-bg);
+  color: var(--ld-ui-btn-primary-text);
+  border: none;
+  border-radius: var(--ld-radius-full);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px var(--ld-color-primary-glow);
+}
+
+.boltdocs-error-retry:hover {
+  background-color: var(--ld-color-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px var(--ld-color-primary-glow);
+}
+
+.boltdocs-error-retry:active {
+  transform: translateY(0);
+}