boltdocs 1.10.2 → 2.0.0

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

@@ -1,238 +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%;
-}
-
-.playground-panel {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-.playground-editor-panel {
-  border-top: 1px solid var(--ld-border-subtle);
-  background: var(--ld-code-bg);
-  position: relative;
-}
-
-.boltdocs-playground.is-truncated .playground-editor {
-  max-height: 250px;
-  overflow: hidden;
-}
-
-.boltdocs-playground[data-readonly="true"]:not(.is-truncated) .playground-editor {
-  max-height: 600px; /* Limit height even if not truncated manually */
-}
-
-.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);
-}
-
-/* When expanded, maybe show the button at the bottom without overlay */
-.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);
-  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: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #000; /* Dark background as in the image */
-  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: 300px;
-}
-
-/* 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);
-}
-/* Copy Button - Inner */
-.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);
-}
-
-/* Obsolete Static Code Integration - Cleaning up since we use LiveEditor now */
-.playground-static-code {
-  display: none;
-}

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>
-  );
-}