boltdocs 1.10.2 → 2.0.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,61 +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 [isExpanded, setIsExpanded] = useState(false);
-  const [isExpandable, setIsExpandable] = useState(false);
-  const preRef = useRef<HTMLPreElement>(null);
-
-  const handleCopy = useCallback(async () => {
-    const code = preRef.current?.textContent || "";
-    copyToClipboard(code);
-    setCopied(true);
-    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 ${shouldTruncate ? "is-truncated" : ""}`}>
-      <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>
-      {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/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,180 +0,0 @@
-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;
-}
-
-/**
- * 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 };
-}
-
-export function Playground({
-  code: propsCode,
-  children,
-  preview,
-  scope = {},
-  readonly = false,
-  noInline: forceNoInline,
-}: PlaygroundProps) {
-  // Extract code from either `code` prop or `children`
-  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);
-
-  // Sync activeCode when initialCode changes (e.g. in static mode)
-  React.useEffect(() => {
-    setActiveCode(prepared.code);
-  }, [prepared.code]);
-
-  const handleCopy = () => {
-    const textToCopy = !!preview ? initialCode : activeCode;
-    navigator.clipboard.writeText(textToCopy);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  // 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 ${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-expand-btn"
-                onClick={() => setIsExpanded(!isExpanded)}
-              >
-                {isExpanded ? "Show less" : "Expand code"}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

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