boltdocs 1.10.1 → 1.11.0

package/dist/types-Dj-bfnC3.d.mts

@@ -1,74 +0,0 @@
-import React from 'react';
-
-/**
- * Metadata provided by the server for a specific route.
- * Maps closely to the `RouteMeta` type in the Node environment.
- */
-interface ComponentRoute {
-    /** The final URL path */
-    path: string;
-    /** The absolute filesystem path of the source file */
-    componentPath: string;
-    /** The page title */
-    title: string;
-    /** Explicit order in the sidebar */
-    sidebarPosition?: number;
-    /** The relative path from the docs directory */
-    filePath: string;
-    /** The group directory name */
-    group?: string;
-    /** The display title of the group */
-    groupTitle?: string;
-    /** Explicit order of the group in the sidebar */
-    groupPosition?: number;
-    /** Extracted markdown headings for search indexing */
-    headings?: {
-        level: number;
-        text: string;
-        id: string;
-    }[];
-    /** The page summary or description */
-    description?: string;
-    /** The locale this route belongs to, if i18n is configured */
-    locale?: string;
-    /** The version this route belongs to, if versioning is configured */
-    version?: string;
-    /** Optional icon to display (Lucide icon name or raw SVG) */
-    icon?: string;
-    /** The tab this route belongs to, if tabs are configured */
-    tab?: string;
-    /** Optional badge to display next to the sidebar item */
-    badge?: string | {
-        text: string;
-        expires?: string;
-    };
-    /** Optional icon for the route's group */
-    groupIcon?: string;
-    /** The extracted plain-text content of the page for search indexing */
-    _content?: string;
-    /** The raw markdown content of the page */
-    _rawContent?: string;
-}
-/**
- * Configuration options for initializing the Boltdocs client app.
- */
-interface CreateBoltdocsAppOptions {
-    /** CSS selector for the DOM element where the app should mount (e.g. '#root') */
-    target: string;
-    /** Initial routes generated by the Vite plugin (`virtual:boltdocs-routes`) */
-    routes: ComponentRoute[];
-    /** The name of the documentation directory (e.g. 'docs') */
-    docsDirName: string;
-    /** Site configuration (`virtual:boltdocs-config`) */
-    config: any;
-    /** Dynamic import mapping from `import.meta.glob` for the documentation pages */
-    modules: Record<string, () => Promise<any>>;
-    /** The `import.meta.hot` instance necessary for fast refresh/HMR updates */
-    hot?: any;
-    /** Optional custom React component to render when visiting the root path ('/') */
-    homePage?: React.ComponentType;
-    /** Optional custom MDX components provided by plugins */
-    components?: Record<string, React.ComponentType<any>>;
-}
-
-export type { CreateBoltdocsAppOptions as C, ComponentRoute as a };

package/dist/types-Dj-bfnC3.d.ts

@@ -1,74 +0,0 @@
-import React from 'react';
-
-/**
- * Metadata provided by the server for a specific route.
- * Maps closely to the `RouteMeta` type in the Node environment.
- */
-interface ComponentRoute {
-    /** The final URL path */
-    path: string;
-    /** The absolute filesystem path of the source file */
-    componentPath: string;
-    /** The page title */
-    title: string;
-    /** Explicit order in the sidebar */
-    sidebarPosition?: number;
-    /** The relative path from the docs directory */
-    filePath: string;
-    /** The group directory name */
-    group?: string;
-    /** The display title of the group */
-    groupTitle?: string;
-    /** Explicit order of the group in the sidebar */
-    groupPosition?: number;
-    /** Extracted markdown headings for search indexing */
-    headings?: {
-        level: number;
-        text: string;
-        id: string;
-    }[];
-    /** The page summary or description */
-    description?: string;
-    /** The locale this route belongs to, if i18n is configured */
-    locale?: string;
-    /** The version this route belongs to, if versioning is configured */
-    version?: string;
-    /** Optional icon to display (Lucide icon name or raw SVG) */
-    icon?: string;
-    /** The tab this route belongs to, if tabs are configured */
-    tab?: string;
-    /** Optional badge to display next to the sidebar item */
-    badge?: string | {
-        text: string;
-        expires?: string;
-    };
-    /** Optional icon for the route's group */
-    groupIcon?: string;
-    /** The extracted plain-text content of the page for search indexing */
-    _content?: string;
-    /** The raw markdown content of the page */
-    _rawContent?: string;
-}
-/**
- * Configuration options for initializing the Boltdocs client app.
- */
-interface CreateBoltdocsAppOptions {
-    /** CSS selector for the DOM element where the app should mount (e.g. '#root') */
-    target: string;
-    /** Initial routes generated by the Vite plugin (`virtual:boltdocs-routes`) */
-    routes: ComponentRoute[];
-    /** The name of the documentation directory (e.g. 'docs') */
-    docsDirName: string;
-    /** Site configuration (`virtual:boltdocs-config`) */
-    config: any;
-    /** Dynamic import mapping from `import.meta.glob` for the documentation pages */
-    modules: Record<string, () => Promise<any>>;
-    /** The `import.meta.hot` instance necessary for fast refresh/HMR updates */
-    hot?: any;
-    /** Optional custom React component to render when visiting the root path ('/') */
-    homePage?: React.ComponentType;
-    /** Optional custom MDX components provided by plugins */
-    components?: Record<string, React.ComponentType<any>>;
-}
-
-export type { CreateBoltdocsAppOptions as C, ComponentRoute as a };

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

@@ -1,40 +0,0 @@
-import React, { useState, useRef, useCallback } from "react";
-import { Copy, Check } from "lucide-react";
-import { copyToClipboard } from "../../../utils";
-
-interface CodeBlockProps {
-  children?: React.ReactNode;
-  className?: string;
-  [key: string]: any;
-}
-
-/**
- * A specialized wrapper for code snippets compiled from MDX blocks.
- * Provides syntax highlighting styling scaffolding and a "Copy to Clipboard" button.
- */
-export function CodeBlock({ children, ...props }: CodeBlockProps) {
-  const [copied, setCopied] = useState(false);
-  const preRef = useRef<HTMLPreElement>(null);
-
-  const handleCopy = useCallback(async () => {
-    const code = preRef.current?.textContent || "";
-    copyToClipboard(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, []);
-
-  return (
-    <div className="code-block-wrapper">
-      <button
-        className={`code-block-copy ${copied ? "copied" : ""}`}
-        onClick={handleCopy}
-        aria-label="Copy code"
-      >
-        {copied ? <Check size={16} /> : <Copy size={16} />}
-      </button>
-      <pre ref={preRef} {...props}>
-        {children}
-      </pre>
-    </div>
-  );
-}

package/src/client/theme/components/CodeBlock/index.ts

@@ -1 +0,0 @@
-export { CodeBlock } from "./CodeBlock";

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

@@ -1,131 +0,0 @@
-import { useState, useCallback } from "react";
-import { Copy, Check } from "lucide-react";
-import { NPM } from "../../icons/npm";
-import { Pnpm } from "../../icons/pnpm";
-import { Bun } from "../../icons/bun";
-import { Deno } from "../../icons/deno";
-import { copyToClipboard } from "../../../utils";
-
-interface PackageManagerTabsProps {
-  command: string;
-  pkg?: string;
-  className?: string;
-}
-
-type PackageManager = "npm" | "pnpm" | "bun" | "deno";
-
-const MANAGERS: {
-  id: PackageManager;
-  label: string;
-  icon: any;
-}[] = [
-  { id: "npm", label: "npm", icon: NPM },
-  { id: "pnpm", label: "pnpm", icon: Pnpm },
-  { id: "bun", label: "bun", icon: Bun },
-  { id: "deno", label: "deno", icon: Deno },
-];
-
-/**
- * Returns the exact command for a specific package manager based on the action.
- * Maps generic actions like 'install' to their specific permutations (e.g., yarn add, npm install).
- */
-function getCommandForManager(
-  manager: PackageManager,
-  command: string,
-  pkg: string,
-): string {
-  const isInstall =
-    command === "install" || command === "add" || command === "i";
-  const isCreate = command === "create" || command === "init";
-  const isRun = command === "run" || command === "exec";
-
-  // Installation commands
-  if (isInstall) {
-    const pkgArgs = pkg ? ` ${pkg}` : "";
-    if (manager === "npm") return `npm install${pkgArgs}`;
-    if (manager === "pnpm") return pkg ? `pnpm add${pkgArgs}` : `pnpm install`;
-    if (manager === "bun") return pkg ? `bun add${pkgArgs}` : `bun install`;
-    if (manager === "deno")
-      return pkg ? `deno install npm:${pkg}` : `deno install`;
-  }
-
-  // Create/Init commands
-  if (isCreate) {
-    const pkgArgs = pkg ? ` ${pkg}` : "";
-    if (manager === "npm") return `npm create${pkgArgs}`;
-    if (manager === "pnpm") return `pnpm create${pkgArgs}`;
-    if (manager === "bun") return `bun create${pkgArgs}`;
-    if (manager === "deno") return `deno run -A npm:create-${pkg}`; // Approximation
-  }
-
-  // Run/Exec commands
-  if (isRun) {
-    const pkgArgs = pkg ? ` ${pkg}` : "";
-    if (manager === "npm") return `npm run${pkgArgs}`;
-    if (manager === "pnpm") return `pnpm run${pkgArgs}`;
-    if (manager === "bun") return `bun run${pkgArgs}`;
-    if (manager === "deno") return `deno task ${pkg}`;
-  }
-
-  // Fallback: just prefix the manager
-  const pkgArgs = pkg ? ` ${pkg}` : "";
-  return `${manager} ${command}${pkgArgs}`;
-}
-
-export function PackageManagerTabs({
-  command,
-  pkg = "",
-  className = "",
-}: PackageManagerTabsProps) {
-  const [activeTab, setActiveTab] = useState<PackageManager>("npm");
-  const [copied, setCopied] = useState(false);
-
-  const activeCommand = getCommandForManager(activeTab, command, pkg);
-
-  const handleCopy = useCallback(async () => {
-    copyToClipboard(activeCommand);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [activeCommand]);
-
-  return (
-    <div className={`pkg-tabs-wrapper ${className}`}>
-      {/* Tab Headers */}
-      <div className="pkg-tabs-header">
-        {MANAGERS.map((mgr) => {
-          const Icon = mgr.icon;
-          const isActive = activeTab === mgr.id;
-          return (
-            <button
-              key={mgr.id}
-              className={`pkg-tab-btn ${isActive ? "active" : ""}`}
-              onClick={() => setActiveTab(mgr.id)}
-              aria-selected={isActive}
-              role="tab"
-            >
-              <Icon className="pkg-tab-icon" width="16" height="16" />
-              <span>{mgr.label}</span>
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Code Block Content */}
-      <div className="code-block-wrapper pkg-tabs-content">
-        <button
-          className={`code-block-copy ${copied ? "copied" : ""}`}
-          onClick={handleCopy}
-          type="button"
-          aria-label="Copy code"
-        >
-          {copied ? <Check size={14} /> : <Copy size={14} />}
-        </button>
-        <pre>
-          <code>
-            <span className="line">{activeCommand}</span>
-          </code>
-        </pre>
-      </div>
-    </div>
-  );
-}

package/src/client/theme/components/PackageManagerTabs/index.ts

@@ -1 +0,0 @@
-export { PackageManagerTabs } from "./PackageManagerTabs";

package/src/client/theme/components/PackageManagerTabs/pkg-tabs.css

@@ -1,64 +0,0 @@
-
-/* ═══════════════════════════════════════════════════════════
-   PACKAGE MANAGER TABS
-   ═══════════════════════════════════════════════════════════ */
-.pkg-tabs-wrapper {
-    margin: 1.5rem 0;
-}
-
-.pkg-tabs-header {
-    display: flex;
-    gap: 0.25rem;
-    overflow-x: auto;
-    padding-bottom: 0.5rem;
-    margin-bottom: -0.5rem; /* pull down to meet code block */
-    scrollbar-width: none;
-}
-
-.pkg-tabs-header::-webkit-scrollbar {
-    display: none;
-}
-
-.pkg-tab-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.5rem 1rem;
-    background-color: var(--ld-bg-soft);
-    border: 1px solid var(--ld-border-subtle);
-    border-bottom: none;
-    border-radius: var(--ld-radius-md) var(--ld-radius-md) 0 0;
-    color: var(--ld-text-muted);
-    font-family: var(--ld-font-sans);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    opacity: 0.7;
-}
-
-.pkg-tab-btn:hover {
-    color: var(--ld-text-main);
-    background-color: var(--ld-bg-mute);
-    opacity: 1;
-}
-
-.pkg-tab-btn.active {
-    background-color: var(--ld-code-bg);
-    color: var(--ld-text-main);
-    border-color: var(--ld-border-subtle);
-    opacity: 1;
-    position: relative;
-    z-index: 2;
-    margin-bottom: -1px; /* Overlap border */
-}
-
-.pkg-tab-icon {
-    display: inline-block;
-}
-
-/* Ensure tab content sits seamlessly below the tabs */
-.pkg-tabs-content {
-    margin-top: 0 !important;
-    border-top-left-radius: 0 !important;
-}

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

@@ -1,124 +0,0 @@
-import React, { useState } from "react";
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
-import { Copy, Check, Terminal, Play } from "lucide-react";
-
-interface PlaygroundProps {
-  code?: string;
-  children?: string | React.ReactNode;
-  scope?: Record<string, any>;
-  readonly?: boolean;
-  noInline?: boolean;
-}
-
-/**
- * Transforms code that uses `export default` into a format compatible
- * with react-live's `noInline` mode by stripping the export and
- * appending a `render(<ComponentName />)` call.
- */
-function prepareCode(raw: string): { code: string; noInline: boolean } {
-  const trimmed = raw.trim();
-
-  // Match: export default function Name(...)
-  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+/, "") + `\n\nrender(<${name} />);`;
-    return { code, noInline: true };
-  }
-
-  // Match: export default ComponentName  (at the end)
-  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*$/, "") +
-      `\nrender(<${name} />);`;
-    return { code, noInline: true };
-  }
-
-  // No export default — use inline mode (simple JSX expression)
-  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,
-  children,
-  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 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), 2000);
-  };
-
-  // Provide React generically
-  const extendedScope = { React, ...scope };
-
-  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="playground-panel-header">
-              <div className="playground-panel-title">
-                <Terminal size={14} />
-                <span>{readonly ? "Code Example" : "Live Editor"}</span>
-              </div>
-              <button
-                className="playground-copy-btn"
-                onClick={handleCopy}
-                title="Copy code"
-              >
-                {copied ? <Check size={14} /> : <Copy size={14} />}
-              </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>
-  );
-}

package/src/client/theme/components/Playground/index.ts

@@ -1 +0,0 @@
-export { Playground } from "./Playground";

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

@@ -1,168 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   PLAYGROUND (SPLIT UI)
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-playground {
-  display: flex;
-  flex-direction: column;
-  margin: 2rem 0;
-  border-radius: var(--ld-radius-lg);
-  border: 1px solid var(--ld-border-subtle);
-  background: var(--ld-code-bg);
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-}
-
-.playground-split-container {
-  display: flex;
-  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;
-  flex: 1;
-  min-width: 0;
-}
-
-.playground-editor-panel {
-  border-bottom: 1px solid var(--ld-border-subtle);
-  background: var(--ld-code-bg);
-}
-
-@media (min-width: 1024px) {
-  .playground-editor-panel {
-    border-bottom: none;
-    border-right: 1px solid var(--ld-border-subtle);
-  }
-}
-
-.playground-preview-panel {
-  background: var(--ld-bg-mute);
-  position: relative;
-}
-
-/* Header */
-.playground-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--ld-border-subtle);
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.playground-panel-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--ld-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* Copy Button */
-.playground-copy-btn {
-  background: transparent;
-  border: none;
-  color: var(--ld-text-muted);
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: var(--ld-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.playground-copy-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--ld-text-main);
-}
-
-/* Content Area */
-.playground-panel-content {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Editor Specifics */
-.playground-editor {
-  background: transparent;
-}
-
-.playground-editor > div {
-  font-family: var(--ld-font-mono) !important;
-  font-size: 0.85rem !important;
-  line-height: 1.5 !important;
-  min-height: 100%;
-}
-
-.playground-editor pre {
-  padding: 1.5rem !important;
-  margin: 0 !important;
-  background: transparent !important;
-}
-
-.playground-editor textarea {
-  outline: none !important;
-  padding: 1.5rem !important;
-}
-
-/* Prevent editing styles if read-only */
-.boltdocs-playground[data-readonly="true"] .playground-editor textarea {
-  cursor: default !important;
-}
-
-/* Preview Specifics */
-.playground-preview {
-  padding: 2rem;
-  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-size: 24px 24px;
-  color: var(--ld-text-main);
-  min-height: 200px;
-}
-
-/* Error Specifics */
-.playground-error {
-  margin: 0;
-  padding: 1rem;
-  background: #7f1d1d;
-  color: #fca5a5;
-  font-size: 0.8rem;
-  font-family: var(--ld-font-mono);
-  white-space: pre-wrap;
-  border-top: 1px solid #991b1b;
-  z-index: 10;
-}
-
-/* Loading Skeleton */
-.playground-skeleton {
-  height: 350px;
-  background: var(--ld-bg-mute);
-  border-radius: var(--ld-radius-lg);
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  margin: 2rem 0;
-  border: 1px solid var(--ld-border-subtle);
-}