boltdocs 1.10.1 → 1.10.2

package/dist/client/index.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 {

package/dist/client/index.d.mts

@@ -100,8 +100,6 @@ interface BreadcrumbsProps {
 }
 declare function Breadcrumbs({ routes, config }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null;
 
-declare function BackgroundGradient(): react_jsx_runtime.JSX.Element;
-
 interface ThemeLayoutProps {
     config: BoltdocsConfig;
     routes: ComponentRoute[];
@@ -136,17 +134,12 @@ declare function ThemeLayout({ config, routes, children, navbar, sidebar, toc, b
 interface PlaygroundProps {
     code?: string;
     children?: string | React.ReactNode;
+    preview?: React.ReactNode;
     scope?: Record<string, any>;
     readonly?: boolean;
     noInline?: boolean;
 }
-/**
- * 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.
- */
-declare function Playground({ code, children, scope, readonly, noInline: forceNoInline, }: PlaygroundProps): react_jsx_runtime.JSX.Element;
+declare function Playground({ code: propsCode, children, preview, scope, readonly, noInline: forceNoInline, }: PlaygroundProps): react_jsx_runtime.JSX.Element;
 
 declare function NotFound(): react_jsx_runtime.JSX.Element;
 
@@ -376,4 +369,4 @@ interface FieldProps {
  */
 declare function Field({ name, type, defaultValue, required, children, id, className, }: FieldProps): react_jsx_runtime.JSX.Element;
 
-export { Admonition, type AdmonitionProps, BackgroundGradient, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, Field, type FieldProps, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };
+export { Admonition, type AdmonitionProps, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, Field, type FieldProps, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };

package/dist/client/index.d.ts

@@ -100,8 +100,6 @@ interface BreadcrumbsProps {
 }
 declare function Breadcrumbs({ routes, config }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null;
 
-declare function BackgroundGradient(): react_jsx_runtime.JSX.Element;
-
 interface ThemeLayoutProps {
     config: BoltdocsConfig;
     routes: ComponentRoute[];
@@ -136,17 +134,12 @@ declare function ThemeLayout({ config, routes, children, navbar, sidebar, toc, b
 interface PlaygroundProps {
     code?: string;
     children?: string | React.ReactNode;
+    preview?: React.ReactNode;
     scope?: Record<string, any>;
     readonly?: boolean;
     noInline?: boolean;
 }
-/**
- * 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.
- */
-declare function Playground({ code, children, scope, readonly, noInline: forceNoInline, }: PlaygroundProps): react_jsx_runtime.JSX.Element;
+declare function Playground({ code: propsCode, children, preview, scope, readonly, noInline: forceNoInline, }: PlaygroundProps): react_jsx_runtime.JSX.Element;
 
 declare function NotFound(): react_jsx_runtime.JSX.Element;
 
@@ -376,4 +369,4 @@ interface FieldProps {
  */
 declare function Field({ name, type, defaultValue, required, children, id, className, }: FieldProps): react_jsx_runtime.JSX.Element;
 
-export { Admonition, type AdmonitionProps, BackgroundGradient, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, Field, type FieldProps, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };
+export { Admonition, type AdmonitionProps, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, Field, type FieldProps, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };