boltdocs 1.10.1 → 1.11.0

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

@@ -1,84 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-
-interface VideoProps {
-  /** Video source URL */
-  src?: string;
-  /** Poster/thumbnail image URL */
-  poster?: string;
-  /** Alt text for accessibility */
-  alt?: string;
-  /** Show native video controls (default: true) */
-  controls?: boolean;
-  /** Preload strategy (default: 'none') */
-  preload?: string;
-  /** Children (e.g. <source> elements) */
-  children?: React.ReactNode;
-  /** Allow any additional HTML video attributes */
-  [key: string]: any;
-}
-
-/**
- * Optimized video component with lazy loading via IntersectionObserver.
- * The `<video>` element is only rendered once it enters the viewport,
- * preventing unnecessary network downloads on initial page load.
- *
- * Usage in MDX:
- * ```mdx
- * <video src="/demo.mp4" poster="/demo-thumb.jpg" />
- * ```
- */
-export function Video({
-  src,
-  poster,
-  alt,
-  children,
-  controls,
-  preload = "metadata",
-  ...rest
-}: VideoProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.disconnect();
-        }
-      },
-      { rootMargin: "200px" },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div ref={containerRef} className="boltdocs-video-wrapper">
-      {isVisible ? (
-        <video
-          className="boltdocs-video"
-          src={src}
-          poster={poster}
-          controls={true}
-          preload={preload}
-          playsInline
-          {...rest}
-        >
-          {children}
-          Your browser does not support the video tag.
-        </video>
-      ) : (
-        <div
-          className="boltdocs-video-placeholder"
-          role="img"
-          aria-label={alt || "Video"}
-        />
-      )}
-    </div>
-  );
-}

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

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

package/src/client/theme/components/Video/video.css

@@ -1,41 +0,0 @@
-/* ─── Video ──────────────────────────────────────────────── */
-.boltdocs-video-wrapper {
-  margin: 1.5rem 0;
-  max-width: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: var(--ld-radius-md);
-  overflow: hidden;
-  border: 1px solid var(--ld-border-subtle);
-  background-color: var(--ld-surface);
-}
-
-.boltdocs-video {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  border-radius: 0;
-  animation: ld-video-fade-in 0.4s ease-out;
-}
-
-.boltdocs-video-placeholder {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  background-color: var(--ld-surface);
-}
-
-/* Ensure video doesn't overflow boltdocs-page container */
-.boltdocs-page video {
-  max-width: 100%;
-  height: auto;
-}
-
-@keyframes ld-video-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/src/client/theme/components/mdx/Admonition.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import {
-  Info,
-  Lightbulb,
-  AlertTriangle,
-  ShieldAlert,
-  Bookmark,
-} from "lucide-react";
-
-const ICON_MAP: Record<string, React.ReactNode> = {
-  note: <Bookmark size={18} />,
-  tip: <Lightbulb size={18} />,
-  info: <Info size={18} />,
-  warning: <AlertTriangle size={18} />,
-  danger: <ShieldAlert size={18} />,
-};
-
-const LABEL_MAP: Record<string, string> = {
-  note: "Note",
-  tip: "Tip",
-  info: "Info",
-  warning: "Warning",
-  danger: "Danger",
-};
-
-export interface AdmonitionProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Admonition type — controls color and icon */
-  type?: "note" | "tip" | "info" | "warning" | "danger";
-  /** Override the default title */
-  title?: string;
-  children: React.ReactNode;
-}
-
-/**
- * Callout / admonition box for notes, warnings, etc.
- *
- * ```mdx
- * <Admonition type="warning" title="Breaking Change">
- *   This API has changed in v2.
- * </Admonition>
- * ```
- */
-export function Admonition({
-  type = "note",
-  title,
-  children,
-  className = "",
-  ...rest
-}: AdmonitionProps) {
-  return (
-    <div
-      className={`ld-admonition ld-admonition--${type} ${className}`.trim()}
-      role={type === "warning" || type === "danger" ? "alert" : "note"}
-      {...rest}
-    >
-      <div className="ld-admonition__header">
-        <span className="ld-admonition__icon">{ICON_MAP[type]}</span>
-        <span className="ld-admonition__title">{title || LABEL_MAP[type]}</span>
-      </div>
-      <div className="ld-admonition__body">{children}</div>
-    </div>
-  );
-}
-
-/* ─── Convenience aliases ─────────────────────────────────── */
-export const Note = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="note" {...props} />
-);
-export const Tip = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="tip" {...props} />
-);
-export const Warning = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="warning" {...props} />
-);
-export const Danger = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="danger" {...props} />
-);
-export const InfoBox = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="info" {...props} />
-);

package/src/client/theme/components/mdx/Badge.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Color variant */
-  variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
-  children: React.ReactNode;
-}
-
-/**
- * Inline badge / pill for labels, statuses, or tags.
- *
- * ```mdx
- * <Badge variant="success">Stable</Badge>
- * <Badge variant="warning">Beta</Badge>
- * ```
- */
-export function Badge({
-  variant = "default",
-  children,
-  className = "",
-  ...rest
-}: BadgeProps) {
-  return (
-    <span
-      className={`ld-badge ld-badge--${variant} ${className}`.trim()}
-      {...rest}
-    >
-      {children}
-    </span>
-  );
-}

package/src/client/theme/components/mdx/Button.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-
-export type ButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    /** Visual variant */
-    variant?: "primary" | "secondary" | "outline" | "ghost";
-    /** Size */
-    size?: "sm" | "md" | "lg";
-    /** If provided, renders as a link */
-    href?: string;
-    children: React.ReactNode;
-  };
-
-/**
- * A versatile button/link component for use in MDX pages and the home page.
- *
- * ```mdx
- * <Button variant="primary" href="/docs/getting-started">Get Started →</Button>
- * <Button variant="secondary" href="https://github.com">GitHub</Button>
- * ```
- */
-export function Button({
-  variant = "primary",
-  size = "md",
-  href,
-  children,
-  className = "",
-  ...rest
-}: ButtonProps) {
-  const cls = `ld-btn ld-btn--${variant} ld-btn--${size} ${className}`.trim();
-
-  if (href) {
-    return (
-      <a
-        href={href}
-        style={{ textDecoration: "none" }}
-        className={cls}
-        {...(rest as any)}
-      >
-        {children}
-      </a>
-    );
-  }
-
-  return (
-    <button className={cls} {...(rest as any)}>
-      {children}
-    </button>
-  );
-}

package/src/client/theme/components/mdx/Card.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-
-/* ─── Cards (grid container) ─────────────────────────────── */
-export interface CardsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Number of columns (defaults to 3) */
-  cols?: 1 | 2 | 3 | 4;
-  children: React.ReactNode;
-}
-
-/**
- * Grid wrapper for `<Card>` components.
- *
- * ```mdx
- * <Cards cols={3}>
- *   <Card title="Fast" icon="⚡">Instant HMR.</Card>
- *   <Card title="Simple" icon="📁">File-system routing.</Card>
- * </Cards>
- * ```
- */
-export function Cards({
-  cols = 3,
-  children,
-  className = "",
-  ...rest
-}: CardsProps) {
-  return (
-    <div className={`ld-cards ld-cards--${cols} ${className}`.trim()} {...rest}>
-      {children}
-    </div>
-  );
-}
-
-/* ─── Card ─────────────────────────────────────────────────── */
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Card heading */
-  title?: string;
-  /** Emoji or icon string displayed above the title */
-  icon?: React.ReactNode;
-  /** If provided, the entire card becomes a link */
-  href?: string;
-  children?: React.ReactNode;
-}
-
-/**
- * Individual feature/info card.
- */
-export function Card({
-  title,
-  icon,
-  href,
-  children,
-  className = "",
-  ...rest
-}: CardProps) {
-  const inner = (
-    <>
-      {icon && <span className="ld-card__icon">{icon}</span>}
-      {title && <h3 className="ld-card__title">{title}</h3>}
-      {children && <div className="ld-card__body">{children}</div>}
-    </>
-  );
-
-  if (href) {
-    return (
-      <a
-        href={href}
-        className={`ld-card ld-card--link ${className}`.trim()}
-        {...(rest as any)}
-      >
-        {inner}
-      </a>
-    );
-  }
-
-  return (
-    <div className={`ld-card ${className}`.trim()} {...rest}>
-      {inner}
-    </div>
-  );
-}

package/src/client/theme/components/mdx/Field.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-
-export interface FieldProps {
-  /** The name of the property or field */
-  name: string;
-  /** The data type of the field (e.g., "string", "number", "boolean") */
-  type?: string;
-  /** The default value if not provided */
-  defaultValue?: string;
-  /** Whether the field is required */
-  required?: boolean;
-  /** Description or additional content */
-  children: React.ReactNode;
-  /** Optional anchor ID for linking */
-  id?: string;
-  /** Optional extra class name */
-  className?: string;
-}
-
-/**
- * A highly aesthetic and readable component for documenting API fields/properties.
- */
-export function Field({
-  name,
-  type,
-  defaultValue,
-  required = false,
-  children,
-  id,
-  className = "",
-}: FieldProps) {
-  return (
-    <div className={`ld-field ${className}`.trim()} id={id}>
-      <div className="ld-field__header">
-        <div className="ld-field__signature">
-          <code className="ld-field__name">{name}</code>
-          {type && (
-            <span className="ld-field__type-badge">
-              {type}
-            </span>
-          )}
-          {required && (
-            <span className="ld-field__required-badge">required</span>
-          )}
-        </div>
-        
-        {defaultValue && (
-          <div className="ld-field__default">
-            <span className="ld-field__default-label">Default:</span>
-            <code className="ld-field__default-value">{defaultValue}</code>
-          </div>
-        )}
-      </div>
-      
-      <div className="ld-field__content">
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/client/theme/components/mdx/FileTree.tsx

@@ -1,229 +0,0 @@
-import React, { Children, isValidElement, useState } from "react";
-import {
-  Folder,
-  FileText,
-  File,
-  FileCode,
-  FileImage,
-  ChevronRight,
-} from "lucide-react";
-
-export interface FileTreeProps {
-  children: React.ReactNode;
-}
-
-function getTextContent(node: React.ReactNode): string {
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return node.toString();
-  if (Array.isArray(node)) return node.map(getTextContent).join("");
-  if (isValidElement(node)) {
-    return getTextContent((node.props as any).children);
-  }
-  return "";
-}
-
-function getFileIcon(filename: string) {
-  const name = filename.toLowerCase();
-
-  if (
-    name.endsWith(".ts") ||
-    name.endsWith(".tsx") ||
-    name.endsWith(".js") ||
-    name.endsWith(".jsx") ||
-    name.endsWith(".json") ||
-    name.endsWith(".mjs") ||
-    name.endsWith(".cjs") ||
-    name.endsWith(".astro") ||
-    name.endsWith(".vue") ||
-    name.endsWith(".svelte")
-  ) {
-    return (
-      <FileCode size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
-    );
-  }
-
-  if (name.endsWith(".md") || name.endsWith(".mdx") || name.endsWith(".txt")) {
-    return (
-      <FileText size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
-    );
-  }
-
-  if (
-    name.endsWith(".png") ||
-    name.endsWith(".jpg") ||
-    name.endsWith(".jpeg") ||
-    name.endsWith(".svg") ||
-    name.endsWith(".gif")
-  ) {
-    return (
-      <FileImage
-        size={16}
-        strokeWidth={2}
-        className="ld-file-tree__icon-file"
-      />
-    );
-  }
-
-  return <File size={16} strokeWidth={2} className="ld-file-tree__icon-file" />;
-}
-
-// Helper to reliably check for ul and li elements, including MDX wrappers
-function isListElement(node: any, tag: "ul" | "li"): boolean {
-  if (typeof node.type === "string") {
-    return node.type === tag;
-  }
-  if (typeof node.type === "function") {
-    return node.type.name === tag || node.type.name?.toLowerCase() === tag;
-  }
-  // MDX specific wrapper detection
-  if (node.props && node.props.originalType === tag) {
-    return true;
-  }
-  if (node.props && node.props.mdxType === tag) {
-    return true;
-  }
-  return false;
-}
-
-function FolderNode({
-  labelText,
-  nestedNodes,
-  depth,
-}: {
-  labelText: string;
-  nestedNodes: React.ReactNode[];
-  depth: number;
-}) {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <li className="ld-file-tree__item">
-      <div
-        className="ld-file-tree__label ld-file-tree__label--folder"
-        onClick={() => setIsOpen(!isOpen)}
-        style={{ cursor: "pointer" }}
-      >
-        <span className="ld-file-tree__icon ld-file-tree__icon--chevron">
-          <ChevronRight
-            size={14}
-            className={`ld-file-tree__chevron ${isOpen ? "ld-file-tree__chevron--open" : ""}`}
-            strokeWidth={3}
-          />
-        </span>
-        <span className="ld-file-tree__icon">
-          <Folder
-            size={16}
-            strokeWidth={2}
-            className="ld-file-tree__icon-folder"
-            fill="currentColor"
-            fillOpacity={0.15}
-          />
-        </span>
-        <span className="ld-file-tree__name">{labelText}</span>
-      </div>
-      {isOpen && nestedNodes.length > 0 && (
-        <div className="ld-file-tree__nested">
-          {nestedNodes.map((child, index) => (
-            <React.Fragment key={index}>
-              {parseNode(child, depth)}
-            </React.Fragment>
-          ))}
-        </div>
-      )}
-    </li>
-  );
-}
-
-function parseNode(node: React.ReactNode, depth: number = 0): React.ReactNode {
-  if (!isValidElement(node)) {
-    return node;
-  }
-
-  if (isListElement(node, "ul")) {
-    return (
-      <ul
-        className={`ld-file-tree__list ${depth === 0 ? "ld-file-tree__list--root" : ""}`}
-      >
-        {Children.map((node.props as any).children, (child, index) => (
-          <React.Fragment key={index}>
-            {parseNode(child, depth + 1)}
-          </React.Fragment>
-        ))}
-      </ul>
-    );
-  }
-
-  if (isListElement(node, "li")) {
-    const children = Children.toArray((node.props as any).children);
-
-    // Find nested list indicating a directory
-    const nestedListIndex = children.findIndex(
-      (child) => isValidElement(child) && isListElement(child, "ul"),
-    );
-    const hasNested = nestedListIndex !== -1;
-
-    // Separate text label from nested items
-    const labelNodes = hasNested
-      ? children.slice(0, nestedListIndex)
-      : children;
-    const nestedNodes = hasNested ? children.slice(nestedListIndex) : [];
-
-    const rawLabelContent = getTextContent(labelNodes).trim();
-    const isExplicitDir = rawLabelContent.endsWith("/");
-    const labelText = isExplicitDir
-      ? rawLabelContent.slice(0, -1)
-      : rawLabelContent;
-
-    const isFolder = hasNested || isExplicitDir;
-
-    if (isFolder) {
-      return (
-        <FolderNode
-          labelText={labelText}
-          nestedNodes={nestedNodes}
-          depth={depth}
-        />
-      );
-    }
-
-    return (
-      <li className="ld-file-tree__item">
-        <div className="ld-file-tree__label ld-file-tree__label--file">
-          <span className="ld-file-tree__icon ld-file-tree__icon--spacer"></span>
-          <span className="ld-file-tree__icon">{getFileIcon(labelText)}</span>
-          <span className="ld-file-tree__name">{labelText}</span>
-        </div>
-      </li>
-    );
-  }
-
-  // If node is e.g. a paragraph injected by MDX wrapping the list
-  if ((node.props as any).children) {
-    return Children.map((node.props as any).children, (child, index) => (
-      <React.Fragment key={index}>{parseNode(child, depth)}</React.Fragment>
-    ));
-  }
-
-  return node;
-}
-
-/**
- * FileTree component displays a customized, styled tree structure for markdown lists.
- *
- * ```mdx
- * <FileTree>
- * - src/
- *   - index.ts
- *   - components/
- *     - Button.tsx
- * - package.json
- * </FileTree>
- * ```
- */
-export function FileTree({ children }: FileTreeProps) {
-  return (
-    <div className="ld-file-tree" dir="ltr">
-      {Children.map(children, (child) => parseNode(child, 0))}
-    </div>
-  );
-}