boltdocs 1.0.4 → 1.3.0

package/dist/client/index.mjs

@@ -1,37 +1,325 @@
 import {
-  Admonition,
   BackgroundGradient,
-  Badge,
   Breadcrumbs,
-  Button,
-  Card,
-  Cards,
-  Danger,
   Head,
-  InfoBox,
-  List,
   Loading,
   Navbar,
   NotFound,
-  Note,
   OnThisPage,
   Sidebar,
-  Tab,
-  Tabs,
   ThemeLayout,
-  Tip,
-  Warning,
   createBoltdocsApp
-} from "../chunk-TWSRXUFF.mjs";
+} from "../chunk-NS7WHDYA.mjs";
 import {
   CodeBlock
 } from "../chunk-2YRDWM6O.mjs";
 import {
   Video
 } from "../chunk-Z7JHYNAS.mjs";
+
+// src/client/theme/components/Playground/Playground.tsx
+import React, { useState } 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 fnMatch = trimmed.match(/export\s+default\s+function\s+(\w+)/);
+  if (fnMatch) {
+    const name = fnMatch[1];
+    const code = trimmed.replace(/export\s+default\s+/, "") + `
+
+render(<${name} />);`;
+    return { code, noInline: true };
+  }
+  const varMatch = trimmed.match(/export\s+default\s+(\w+)\s*;?\s*$/);
+  if (varMatch) {
+    const name = varMatch[1];
+    const code = trimmed.replace(/export\s+default\s+\w+\s*;?\s*$/, "") + `
+render(<${name} />);`;
+    return { code, noInline: true };
+  }
+  return { code: trimmed, noInline: false };
+}
+function Playground({
+  code,
+  children,
+  scope = {},
+  readonly = false,
+  noInline: forceNoInline
+}) {
+  let initialCode = code || "";
+  if (!initialCode && typeof children === "string") {
+    initialCode = children;
+  }
+  const prepared = prepareCode(initialCode);
+  const useNoInline = forceNoInline ?? prepared.noInline;
+  const [copied, setCopied] = useState(false);
+  const [activeCode, setActiveCode] = useState(prepared.code);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(activeCode);
+    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: [
+            /* @__PURE__ */ jsx(LivePreview, {}),
+            /* @__PURE__ */ jsx(LiveError, { className: "playground-error" })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+}
+
+// src/client/theme/components/mdx/Button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Button({
+  variant = "primary",
+  size = "md",
+  href,
+  children,
+  className = "",
+  ...rest
+}) {
+  const cls = `ld-btn ld-btn--${variant} ld-btn--${size} ${className}`.trim();
+  if (href) {
+    return /* @__PURE__ */ jsx2(
+      "a",
+      {
+        href,
+        style: { textDecoration: "none" },
+        className: cls,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2("button", { className: cls, ...rest, children });
+}
+
+// src/client/theme/components/mdx/Badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Badge({
+  variant = "default",
+  children,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: `ld-badge ld-badge--${variant} ${className}`.trim(),
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/client/theme/components/mdx/Card.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Cards({
+  cols = 3,
+  children,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx4("div", { className: `ld-cards ld-cards--${cols} ${className}`.trim(), ...rest, children });
+}
+function Card({
+  title,
+  icon,
+  href,
+  children,
+  className = "",
+  ...rest
+}) {
+  const inner = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx4("span", { className: "ld-card__icon", children: icon }),
+    title && /* @__PURE__ */ jsx4("h3", { className: "ld-card__title", children: title }),
+    children && /* @__PURE__ */ jsx4("div", { className: "ld-card__body", children })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href,
+        className: `ld-card ld-card--link ${className}`.trim(),
+        ...rest,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4("div", { className: `ld-card ${className}`.trim(), ...rest, children: inner });
+}
+
+// src/client/theme/components/mdx/Tabs.tsx
+import { useState as useState2, Children, isValidElement, useRef } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Tab({ children }) {
+  return /* @__PURE__ */ jsx5("div", { className: "ld-tab-panel", children });
+}
+function Tabs({ defaultIndex = 0, children }) {
+  const [active, setActive] = useState2(defaultIndex);
+  const tabRefs = useRef([]);
+  const tabs = Children.toArray(children).filter(
+    (child) => isValidElement(child) && child.props?.label
+  );
+  const handleKeyDown = (e) => {
+    let newIndex = active;
+    if (e.key === "ArrowRight") {
+      newIndex = (active + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft") {
+      newIndex = (active - 1 + tabs.length) % tabs.length;
+    }
+    if (newIndex !== active) {
+      setActive(newIndex);
+      tabRefs.current[newIndex]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "ld-tabs", children: [
+    /* @__PURE__ */ jsx5("div", { className: "ld-tabs__bar", role: "tablist", onKeyDown: handleKeyDown, children: tabs.map((child, i) => {
+      const label = child.props.label;
+      return /* @__PURE__ */ jsx5(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": i === active,
+          "aria-controls": `tabpanel-${i}`,
+          id: `tab-${i}`,
+          tabIndex: i === active ? 0 : -1,
+          ref: (el) => {
+            tabRefs.current[i] = el;
+          },
+          className: `ld-tabs__trigger ${i === active ? "ld-tabs__trigger--active" : ""}`,
+          onClick: () => setActive(i),
+          children: label
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "ld-tabs__content",
+        role: "tabpanel",
+        id: `tabpanel-${active}`,
+        "aria-labelledby": `tab-${active}`,
+        children: tabs[active]
+      }
+    )
+  ] });
+}
+
+// src/client/theme/components/mdx/Admonition.tsx
 import {
-  Playground
-} from "../chunk-WPT4MWTQ.mjs";
+  Info,
+  Lightbulb,
+  AlertTriangle,
+  ShieldAlert,
+  Bookmark
+} from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ICON_MAP = {
+  note: /* @__PURE__ */ jsx6(Bookmark, { size: 18 }),
+  tip: /* @__PURE__ */ jsx6(Lightbulb, { size: 18 }),
+  info: /* @__PURE__ */ jsx6(Info, { size: 18 }),
+  warning: /* @__PURE__ */ jsx6(AlertTriangle, { size: 18 }),
+  danger: /* @__PURE__ */ jsx6(ShieldAlert, { size: 18 })
+};
+var LABEL_MAP = {
+  note: "Note",
+  tip: "Tip",
+  info: "Info",
+  warning: "Warning",
+  danger: "Danger"
+};
+function Admonition({
+  type = "note",
+  title,
+  children,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `ld-admonition ld-admonition--${type} ${className}`.trim(),
+      role: type === "warning" || type === "danger" ? "alert" : "note",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "ld-admonition__header", children: [
+          /* @__PURE__ */ jsx6("span", { className: "ld-admonition__icon", children: ICON_MAP[type] }),
+          /* @__PURE__ */ jsx6("span", { className: "ld-admonition__title", children: title || LABEL_MAP[type] })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "ld-admonition__body", children })
+      ]
+    }
+  );
+}
+var Note = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "note", ...props });
+var Tip = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "tip", ...props });
+var Warning = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "warning", ...props });
+var Danger = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "danger", ...props });
+var InfoBox = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "info", ...props });
+
+// src/client/theme/components/mdx/List.tsx
+import React3, { Children as Children2 } from "react";
+import { Check as Check2, ChevronRight } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ICON_MAP2 = {
+  checked: /* @__PURE__ */ jsx7(Check2, { size: 14, className: "ld-list__icon" }),
+  arrow: /* @__PURE__ */ jsx7(ChevronRight, { size: 14, className: "ld-list__icon" })
+};
+function List({
+  variant = "default",
+  children,
+  className = "",
+  ...rest
+}) {
+  if (variant === "default") {
+    return /* @__PURE__ */ jsx7("ul", { className: `ld-list ${className}`.trim(), ...rest, children });
+  }
+  const icon = ICON_MAP2[variant];
+  return /* @__PURE__ */ jsx7("ul", { className: `ld-list ld-list--${variant} ${className}`.trim(), ...rest, children: Children2.map(children, (child) => {
+    if (!React3.isValidElement(child)) return child;
+    return /* @__PURE__ */ jsxs5("li", { className: "ld-list__item", children: [
+      icon,
+      /* @__PURE__ */ jsx7("span", { className: "ld-list__text", children: child.props.children })
+    ] });
+  }) });
+}
 export {
   Admonition,
   BackgroundGradient,

package/dist/client/ssr.css

@@ -422,73 +422,43 @@ a {
   flex: 1;
 }
 .boltdocs-main-container.sidebar-collapsed .boltdocs-sidebar {
-  width: 0;
-  padding-left: 0;
-  padding-right: 0;
-  border-right-color: transparent;
-  opacity: 0;
-  pointer-events: none;
+  width: 54px;
+  padding: 1rem 0;
+  border-right: 1px solid var(--ld-border-subtle);
+  opacity: 1;
+  pointer-events: auto;
   overflow: hidden;
 }
-.sidebar-toggle-floating {
-  position: fixed;
-  bottom: 2rem;
-  left: 2rem;
-  width: 2.75rem;
-  height: 2.75rem;
-  border-radius: 50%;
-  background-color: var(--ld-surface);
-  border: 1px solid var(--ld-border-strong);
-  color: var(--ld-text-muted);
+.sidebar-collapse {
+  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 100;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(20px) scale(0.9);
-}
-.sidebar-toggle-floating:hover {
-  background-color: var(--ld-bg-soft);
-  color: var(--ld-text-main);
-  transform: translateY(0px) scale(1.05);
-  border-color: var(--ld-color-primary);
+  justify-content: flex-end;
+  padding: 0 0.75rem 1rem;
+  transition: justify-content 0.3s ease;
 }
-.sidebar-toggle-floating:active {
-  transform: translateY(0px) scale(0.95);
-}
-.boltdocs-main-container.sidebar-collapsed .sidebar-toggle-floating {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0) scale(1);
-}
-.sidebar-footer {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--ld-border-subtle);
+.boltdocs-main-container.sidebar-collapsed .sidebar-collapse {
+  justify-content: center;
+  padding: 0 0 1rem;
 }
 .sidebar-collapse-btn {
+  color: var(--ld-text-muted);
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+  cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: none;
-  border: none;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
   border-radius: var(--ld-radius-md);
-  color: var(--ld-text-muted);
-  font-family: var(--ld-font-sans);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .sidebar-collapse-btn:hover {
-  background-color: var(--ld-bg-soft);
-  color: var(--ld-color-primary);
+  background-color: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+  transform: scale(1.05);
 }
 .boltdocs-sidebar::-webkit-scrollbar {
   width: 4px;
@@ -1161,7 +1131,7 @@ a {
 }
 .boltdocs-page pre > code {
   display: grid;
-  padding: 1rem 0;
+  padding: 1rem 1rem;
   background-color: transparent;
   border: none;
   color: inherit;
@@ -1245,57 +1215,68 @@ a {
 
 /* src/client/theme/components/mdx/mdx-components.css */
 .ld-btn {
+  all: unset;
+  box-sizing: border-box !important;
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: var(--ld-font-sans);
   font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: normal;
+  letter-spacing: -0.01em;
+  text-align: center;
+  text-decoration: none !important;
+  white-space: nowrap;
   border-radius: var(--ld-radius-md);
   cursor: pointer;
-  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
-  font-family: var(--ld-font-sans);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid transparent;
-  line-height: 1;
-  letter-spacing: -0.01em;
+  user-select: none;
+  position: relative;
 }
 .ld-btn:hover {
-  transform: scale(1.05);
+  transform: translateY(-1px);
 }
 .ld-btn:active {
-  transform: scale(0.95);
+  transform: translateY(0) scale(0.98);
 }
 .ld-btn--sm {
-  padding: 0.45rem 1.1rem;
+  min-height: 2rem;
+  padding: 0 1rem;
   font-size: 0.8125rem;
   border-radius: var(--ld-radius-md);
 }
 .ld-btn--md {
-  padding: 0.7rem 1.6rem;
+  min-height: 2.625rem;
+  padding: 0 1.6rem;
   font-size: 0.9375rem;
 }
 .ld-btn--lg {
-  padding: 0.85rem 2.1rem;
+  min-height: 3.25rem;
+  padding: 0 2.2rem;
   font-size: 1.05rem;
 }
 .ld-btn--primary {
-  background-color: var(--ld-ui-btn-primary-bg, var(--ld-btn-primary-bg));
+  background-color: var( --ld-ui-btn-primary-bg, var(--ld-btn-primary-bg) ) !important;
   color: var(--ld-ui-btn-primary-text, var(--ld-btn-primary-text)) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ld-btn--primary:hover {
-  opacity: 0.92;
-  color: var(--ld-ui-btn-primary-text, var(--ld-btn-primary-text)) !important;
+  filter: brightness(1.1);
 }
 .ld-btn--secondary {
-  background-color: var(--ld-ui-btn-secondary-bg, var(--ld-btn-secondary-bg));
+  background-color: var( --ld-ui-btn-secondary-bg, var(--ld-btn-secondary-bg) ) !important;
   color: var( --ld-ui-btn-secondary-text, var(--ld-btn-secondary-text) ) !important;
   border-color: var(--ld-border-subtle);
 }
 .ld-btn--secondary:hover {
   background-color: var(--ld-bg-mute);
   border-color: var(--ld-border-strong);
-  color: var( --ld-ui-btn-secondary-text, var(--ld-btn-secondary-text) ) !important;
 }
 .ld-btn--outline {
-  background: transparent;
+  background: transparent !important;
   color: var(--ld-text-main) !important;
   border-color: var(--ld-border-strong);
 }
@@ -1304,7 +1285,7 @@ a {
   border-color: var(--ld-color-primary);
 }
 .ld-btn--ghost {
-  background: transparent;
+  background: transparent !important;
   color: var(--ld-text-muted) !important;
 }
 .ld-btn--ghost:hover {
@@ -1840,56 +1821,6 @@ a {
   color: var(--ld-color-primary);
 }
 
-/* src/client/theme/styles/home.css */
-.boltdocs-home {
-  min-height: calc(100vh - var(--ld-navbar-height));
-}
-.home-hero {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6rem 2rem 4rem;
-  text-align: center;
-}
-.hero-content {
-  max-width: 680px;
-}
-.hero-title {
-  font-size: 3.5rem;
-  font-weight: 900;
-  line-height: 1.1;
-  margin: 0 0 1.25rem;
-  letter-spacing: -0.03em;
-  color: var(--ld-text-main);
-}
-.hero-highlight {
-  background:
-    linear-gradient(
-      135deg,
-      var(--ld-gradient-from),
-      var(--ld-gradient-to));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-.hero-description {
-  font-size: 1.125rem;
-  color: var(--ld-text-muted);
-  line-height: 1.7;
-  margin-bottom: 2rem;
-}
-.hero-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-.home-features {
-  padding: 2rem 2rem 6rem;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
 /* src/client/theme/ui/NotFound/not-found.css */
 .boltdocs-not-found {
   display: flex;
@@ -2122,9 +2053,6 @@ a.not-found-link:hover {
   .boltdocs-sidebar {
     display: none;
   }
-  .sidebar-toggle-floating {
-    display: none !important;
-  }
   .boltdocs-content {
     padding: 1.5rem 1rem 3rem;
   }