boltdocs 1.10.1 → 1.10.2

package/dist/client/index.mjs

@@ -1,5 +1,4 @@
 import {
-  BackgroundGradient,
   Breadcrumbs,
   CodeBlock,
   Head,
@@ -10,7 +9,7 @@ import {
   Sidebar,
   ThemeLayout,
   createBoltdocsApp
-} from "../chunk-OZLYRXAD.mjs";
+} from "../chunk-TKLQWU7H.mjs";
 import {
   Video
 } from "../chunk-Z7JHYNAS.mjs";
@@ -23,12 +22,12 @@ import {
 import "../chunk-FMTOYQLO.mjs";
 
 // src/client/theme/components/Playground/Playground.tsx
-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 { jsx, jsxs } from "react/jsx-runtime";
 function prepareCode(raw) {
-  const trimmed = raw.trim();
+  const trimmed = (raw || "").trim();
   const fnMatch = trimmed.match(/export\s+default\s+function\s+(\w+)/);
   if (fnMatch) {
     const name = fnMatch[1];
@@ -47,65 +46,106 @@ render(<${name} />);`;
   return { code: trimmed, noInline: false };
 }
 function Playground({
-  code,
+  code: propsCode,
   children,
+  preview,
   scope = {},
   readonly = false,
   noInline: forceNoInline
 }) {
-  let initialCode = code || "";
-  if (!initialCode && typeof children === "string") {
-    initialCode = children;
-  }
-  const prepared = prepareCode(initialCode);
+  const initialCode = useMemo(() => {
+    let base = propsCode || "";
+    if (!base && typeof children === "string") {
+      base = children;
+    }
+    return base.trim();
+  }, [propsCode, children]);
+  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);
+  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), 2e3);
   };
   const extendedScope = { React, ...scope };
-  return /* @__PURE__ */ jsx("div", { className: "boltdocs-playground", "data-readonly": readonly, children: /* @__PURE__ */ jsx(
-    LiveProvider,
-    {
-      code: activeCode,
-      scope: extendedScope,
-      theme: void 0,
-      noInline: useNoInline,
-      children: /* @__PURE__ */ jsxs("div", { className: "playground-split-container", children: [
-        /* @__PURE__ */ jsxs("div", { className: "playground-panel playground-editor-panel", children: [
-          /* @__PURE__ */ jsxs("div", { className: "playground-panel-header", children: [
-            /* @__PURE__ */ jsxs("div", { className: "playground-panel-title", children: [
-              /* @__PURE__ */ jsx(Terminal, { size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: readonly ? "Code Example" : "Live Editor" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "playground-copy-btn",
-                onClick: handleCopy,
-                title: "Copy code",
-                children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "playground-panel-content playground-editor", children: /* @__PURE__ */ jsx(LiveEditor, { disabled: readonly, onChange: setActiveCode }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "playground-panel playground-preview-panel", children: [
-          /* @__PURE__ */ jsx("div", { className: "playground-panel-header", children: /* @__PURE__ */ jsxs("div", { className: "playground-panel-title", children: [
-            /* @__PURE__ */ jsx(Play, { size: 14 }),
-            /* @__PURE__ */ jsx("span", { children: "Preview" })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "playground-panel-content playground-preview", children: [
+  const charLimit = 800;
+  const isExpandable = (propsCode || initialCode).length > charLimit;
+  const shouldTruncate = isExpandable && !isExpanded;
+  const isStatic = !!preview;
+  const staticTransform = (code) => {
+    return "render(<div style={{display:'none'}} />)";
+  };
+  return /* @__PURE__ */ jsx("div", { className: `boltdocs-playground ${shouldTruncate ? "is-truncated" : ""}`, "data-readonly": readonly || isStatic, children: /* @__PURE__ */ jsxs("div", { className: "playground-split-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "playground-panel playground-preview-panel", children: [
+      /* @__PURE__ */ jsx("div", { className: "playground-panel-header", children: /* @__PURE__ */ jsxs("div", { className: "playground-panel-title", children: [
+        /* @__PURE__ */ jsx(Play, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: "Preview" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "playground-panel-content playground-preview", children: isStatic ? preview : /* @__PURE__ */ jsxs(
+        LiveProvider,
+        {
+          code: activeCode,
+          scope: extendedScope,
+          theme: void 0,
+          noInline: useNoInline,
+          children: [
             /* @__PURE__ */ jsx(LivePreview, {}),
             /* @__PURE__ */ jsx(LiveError, { className: "playground-error" })
-          ] })
-        ] })
-      ] })
-    }
-  ) });
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "playground-panel playground-editor-panel", children: [
+      !isStatic && /* @__PURE__ */ jsx("div", { className: "playground-panel-header", children: /* @__PURE__ */ jsxs("div", { className: "playground-panel-title", children: [
+        /* @__PURE__ */ jsx(Terminal, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: readonly ? "Code Example" : "Live Editor" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "playground-panel-content playground-editor", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "playground-copy-btn-inner",
+            onClick: handleCopy,
+            title: "Copy code",
+            children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
+          }
+        ),
+        isStatic ? /* @__PURE__ */ jsx(
+          LiveProvider,
+          {
+            code: initialCode,
+            noInline: true,
+            transformCode: staticTransform,
+            children: /* @__PURE__ */ jsx(LiveEditor, { disabled: true })
+          }
+        ) : /* @__PURE__ */ jsx(
+          LiveProvider,
+          {
+            code: activeCode,
+            scope: extendedScope,
+            theme: void 0,
+            noInline: useNoInline,
+            children: /* @__PURE__ */ jsx(LiveEditor, { disabled: readonly, onChange: setActiveCode })
+          }
+        )
+      ] }),
+      isExpandable && /* @__PURE__ */ jsx("div", { className: "playground-expand-wrapper", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "playground-expand-btn",
+          onClick: () => setIsExpanded(!isExpanded),
+          children: isExpanded ? "Show less" : "Expand code"
+        }
+      ) })
+    ] })
+  ] }) });
 }
 
 // src/client/theme/components/mdx/Button.tsx
@@ -484,7 +524,7 @@ function FileTree({ children }) {
 }
 
 // src/client/theme/components/mdx/Table.tsx
-import { useState as useState4, useMemo } from "react";
+import { useState as useState4, useMemo as useMemo2 } from "react";
 import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight as ChevronRight3, ChevronsLeft, ChevronsRight } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function Table({
@@ -498,7 +538,7 @@ function Table({
 }) {
   const [sortConfig, setSortConfig] = useState4(null);
   const [currentPage, setCurrentPage] = useState4(1);
-  const processedData = useMemo(() => {
+  const processedData = useMemo2(() => {
     if (!data) return [];
     let items = [...data];
     if (sortable && sortConfig !== null) {
@@ -515,7 +555,7 @@ function Table({
     return items;
   }, [data, sortConfig, sortable]);
   const totalPages = Math.ceil(processedData.length / pageSize);
-  const paginatedData = useMemo(() => {
+  const paginatedData = useMemo2(() => {
     if (!paginated) return processedData;
     const start = (currentPage - 1) * pageSize;
     return processedData.slice(start, start + pageSize);
@@ -627,7 +667,6 @@ function Field({
 }
 export {
   Admonition,
-  BackgroundGradient,
   Badge,
   Breadcrumbs,
   Button,

package/dist/client/ssr.css

@@ -85,8 +85,6 @@
   --ld-btn-primary-text: #ffffff;
   --ld-btn-secondary-bg: #ffffff;
   --ld-btn-secondary-text: #111827;
-  --ld-gradient-from: var(--ld-color-primary);
-  --ld-gradient-to: #a855f7;
   --ld-code-bg: #f3f4f6;
   --ld-code-header: #e5e7eb;
   --ld-code-text: #1f2937;
@@ -94,8 +92,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);
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
   --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
   --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
@@ -139,8 +135,6 @@
   --ld-btn-primary-text: #0a0a0f;
   --ld-btn-secondary-bg: #1a1a2e;
   --ld-btn-secondary-text: #e4e4ed;
-  --ld-gradient-from: #ffffff;
-  --ld-gradient-to: rgba(255, 255, 255, 0.7);
   --ld-code-bg: #050505;
   --ld-code-header: #111119;
   --ld-code-text: #d4d4d4;
@@ -148,8 +142,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);
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
   --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
   --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
@@ -292,12 +284,13 @@ a {
 }
 .boltdocs-page-header {
   position: absolute;
-  top: 0;
+  top: -0.5rem;
   right: 0;
   display: flex;
   justify-content: flex-end;
   padding: 1rem 0;
   pointer-events: none;
+  z-index: 101;
 }
 .boltdocs-page-header > * {
   pointer-events: auto;
@@ -1120,11 +1113,9 @@ a {
   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 {
   display: flex;
@@ -1271,6 +1262,7 @@ a {
   font-weight: 700;
   letter-spacing: -0.025em;
   color: var(--ld-text-main);
+  padding-right: 160px;
 }
 .boltdocs-page h1 + p {
   color: var(--ld-text-muted);
@@ -1431,6 +1423,56 @@ a {
   display: grid !important;
   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;
 }
@@ -2510,6 +2552,58 @@ a.not-found-link:hover {
   margin: 0;
 }
 
+/* src/client/theme/ui/ErrorBoundary/error-boundary.css */
+.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);
+}
+
 /* src/client/theme/components/Playground/playground.css */
 .boltdocs-playground {
   display: flex;
@@ -2527,13 +2621,6 @@ a.not-found-link:hover {
   flex-direction: column;
   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;
@@ -2541,14 +2628,59 @@ a.not-found-link:hover {
   min-width: 0;
 }
 .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;
 }
-@media (min-width: 1024px) {
-  .playground-editor-panel {
-    border-bottom: none;
-    border-right: 1px solid var(--ld-border-subtle);
-  }
+.boltdocs-playground.is-truncated .playground-editor {
+  max-height: 250px;
+  overflow: hidden;
+}
+.boltdocs-playground[data-readonly=true]:not(.is-truncated) .playground-editor {
+  max-height: 600px;
+}
+.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);
+}
+.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 {
   background: var(--ld-bg-mute);
@@ -2617,15 +2749,15 @@ a.not-found-link:hover {
   cursor: default !important;
 }
 .playground-preview {
-  padding: 2rem;
+  padding: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--ld-bg-mute);
-  background-image: radial-gradient(var(--ld-border-subtle) 1.5px, transparent 1.5px);
+  background-color: #000;
+  background-image: radial-gradient(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;
 }
 .playground-error {
   margin: 0;
@@ -2646,6 +2778,33 @@ a.not-found-link:hover {
   margin: 2rem 0;
   border: 1px solid var(--ld-border-subtle);
 }
+.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);
+}
+.playground-static-code {
+  display: none;
+}
 
 /* src/client/theme/ui/Layout/responsive.css */
 @media (max-width: 1100px) {
@@ -2663,6 +2822,15 @@ a.not-found-link:hover {
   .hero-title {
     font-size: 2.25rem;
   }
+  .boltdocs-page h1 {
+    padding-right: 0;
+  }
+  .boltdocs-page-header {
+    position: static;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    padding: 0;
+  }
   .ld-cards--2,
   .ld-cards--3,
   .ld-cards--4 {