boltdocs 1.7.1 → 1.8.0

package/dist/{SearchDialog-GOZ6X53X.css → SearchDialog-4ANHNJTL.css}

@@ -48,7 +48,7 @@
   --ld-code-bg: #f3f4f6;
   --ld-code-header: #e5e7eb;
   --ld-code-text: #1f2937;
-  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --ld-navbar-bg: #ffffff;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
@@ -1932,6 +1932,89 @@ a {
   opacity: 0.4;
   cursor: not-allowed;
 }
+.ld-field {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.ld-field:hover {
+  border-color: var(--ld-color-primary);
+  box-shadow: 0 4px 20px -8px rgba(127, 19, 236, 0.15);
+}
+.ld-field__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+.ld-field__signature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.ld-field__name {
+  font-family: var(--ld-font-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  background: rgba(127, 19, 236, 0.08);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: -0.01em;
+}
+.ld-field__type-badge {
+  font-family: var(--ld-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ld-color-primary);
+  background: var(--ld-color-primary-muted);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--ld-radius-full);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+.ld-field__required-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ld-ui-danger-text);
+  background: var(--ld-ui-danger-bg);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: 0.05em;
+}
+.ld-field__default {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+.ld-field__default-label {
+  color: var(--ld-text-dim);
+  font-weight: 500;
+}
+.ld-field__default-value {
+  font-family: var(--ld-font-mono);
+  color: var(--ld-text-main);
+  background: var(--ld-bg-mute);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+}
+.ld-field__content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ld-text-muted);
+}
+.ld-field__content p {
+  margin: 0;
+}
 
 /* src/client/theme/components/PackageManagerTabs/pkg-tabs.css */
 .pkg-tabs-wrapper {
@@ -2454,8 +2537,6 @@ a.not-found-link:hover {
 .boltdocs-link-preview-content {
   padding: 0.85rem 1rem;
   background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--ld-border-subtle);
   border-radius: var(--ld-radius-lg);
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -5px rgba(0, 0, 0, 0.1);
@@ -2479,14 +2560,3 @@ a.not-found-link:hover {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-[data-theme=dark] .boltdocs-link-preview-content {
-  background-color: rgba(15, 15, 20, 0.8);
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
-}
-[data-theme=dark] .boltdocs-link-preview-title {
-  color: #fff;
-}
-[data-theme=dark] .boltdocs-link-preview-summary {
-  color: #94a3b8;
-}

package/dist/client/index.css

@@ -18,8 +18,6 @@
 .boltdocs-link-preview-content {
   padding: 0.85rem 1rem;
   background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--ld-border-subtle);
   border-radius: var(--ld-radius-lg);
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -5px rgba(0, 0, 0, 0.1);
@@ -43,17 +41,6 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-[data-theme=dark] .boltdocs-link-preview-content {
-  background-color: rgba(15, 15, 20, 0.8);
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
-}
-[data-theme=dark] .boltdocs-link-preview-title {
-  color: #fff;
-}
-[data-theme=dark] .boltdocs-link-preview-summary {
-  color: #94a3b8;
-}
 
 /* src/client/theme/ui/ProgressBar/ProgressBar.css */
 .boltdocs-progress-container {
@@ -103,7 +90,7 @@
   --ld-code-bg: #f3f4f6;
   --ld-code-header: #e5e7eb;
   --ld-code-text: #1f2937;
-  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --ld-navbar-bg: #ffffff;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
@@ -1987,6 +1974,89 @@ a {
   opacity: 0.4;
   cursor: not-allowed;
 }
+.ld-field {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.ld-field:hover {
+  border-color: var(--ld-color-primary);
+  box-shadow: 0 4px 20px -8px rgba(127, 19, 236, 0.15);
+}
+.ld-field__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+.ld-field__signature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.ld-field__name {
+  font-family: var(--ld-font-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  background: rgba(127, 19, 236, 0.08);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: -0.01em;
+}
+.ld-field__type-badge {
+  font-family: var(--ld-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ld-color-primary);
+  background: var(--ld-color-primary-muted);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--ld-radius-full);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+.ld-field__required-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ld-ui-danger-text);
+  background: var(--ld-ui-danger-bg);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: 0.05em;
+}
+.ld-field__default {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+.ld-field__default-label {
+  color: var(--ld-text-dim);
+  font-weight: 500;
+}
+.ld-field__default-value {
+  font-family: var(--ld-font-mono);
+  color: var(--ld-text-main);
+  background: var(--ld-bg-mute);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+}
+.ld-field__content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ld-text-muted);
+}
+.ld-field__content p {
+  margin: 0;
+}
 
 /* src/client/theme/components/PackageManagerTabs/pkg-tabs.css */
 .pkg-tabs-wrapper {

package/dist/client/index.d.mts

@@ -355,4 +355,25 @@ interface TableProps {
 }
 declare function Table({ headers, data, children, className, sortable, paginated, pageSize, }: TableProps): react_jsx_runtime.JSX.Element;
 
-export { Admonition, type AdmonitionProps, BackgroundGradient, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };
+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.
+ */
+declare function Field({ name, type, defaultValue, required, children, id, className, }: FieldProps): react_jsx_runtime.JSX.Element;
+
+export { Admonition, type AdmonitionProps, BackgroundGradient, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, Field, type FieldProps, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };

package/dist/client/index.d.ts

@@ -355,4 +355,25 @@ interface TableProps {
 }
 declare function Table({ headers, data, children, className, sortable, paginated, pageSize, }: TableProps): react_jsx_runtime.JSX.Element;
 
-export { Admonition, type AdmonitionProps, BackgroundGradient, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };
+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.
+ */
+declare function Field({ name, type, defaultValue, required, children, id, className, }: FieldProps): react_jsx_runtime.JSX.Element;
+
+export { Admonition, type AdmonitionProps, BackgroundGradient, Badge, type BadgeProps, BoltdocsConfig, Breadcrumbs, Button, type ButtonProps, Card, type CardProps, Cards, type CardsProps, CodeBlock, ComponentRoute, CreateBoltdocsAppOptions, Danger, Field, type FieldProps, FileTree, type FileTreeProps, Head, InfoBox, List, type ListProps, Loading, Navbar, NotFound, Note, OnThisPage, Playground, Sidebar, Tab, type TabProps, Table, type TableProps, Tabs, type TabsProps, ThemeLayout, Tip, Video, Warning, createBoltdocsApp };

package/dist/client/index.js

@@ -2827,6 +2827,7 @@ __export(client_exports, {
   Cards: () => Cards,
   CodeBlock: () => CodeBlock,
   Danger: () => Danger,
+  Field: () => Field,
   FileTree: () => FileTree,
   Head: () => Head,
   InfoBox: () => InfoBox,
@@ -3431,6 +3432,33 @@ function Table({
     ] })
   ] });
 }
+
+// src/client/theme/components/mdx/Field.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function Field({
+  name,
+  type,
+  defaultValue,
+  required = false,
+  children,
+  id,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: `ld-field ${className}`.trim(), id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ld-field__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ld-field__signature", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: "ld-field__name", children: name }),
+        type && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ld-field__type-badge", children: type }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ld-field__required-badge", children: "required" })
+      ] }),
+      defaultValue && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ld-field__default", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ld-field__default-label", children: "Default:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: "ld-field__default-value", children: defaultValue })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "ld-field__content", children })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Admonition,
@@ -3442,6 +3470,7 @@ function Table({
   Cards,
   CodeBlock,
   Danger,
+  Field,
   FileTree,
   Head,
   InfoBox,

package/dist/client/index.mjs

@@ -598,6 +598,33 @@ function Table({
     ] })
   ] });
 }
+
+// src/client/theme/components/mdx/Field.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function Field({
+  name,
+  type,
+  defaultValue,
+  required = false,
+  children,
+  id,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: `ld-field ${className}`.trim(), id, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "ld-field__header", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "ld-field__signature", children: [
+        /* @__PURE__ */ jsx10("code", { className: "ld-field__name", children: name }),
+        type && /* @__PURE__ */ jsx10("span", { className: "ld-field__type-badge", children: type }),
+        required && /* @__PURE__ */ jsx10("span", { className: "ld-field__required-badge", children: "required" })
+      ] }),
+      defaultValue && /* @__PURE__ */ jsxs8("div", { className: "ld-field__default", children: [
+        /* @__PURE__ */ jsx10("span", { className: "ld-field__default-label", children: "Default:" }),
+        /* @__PURE__ */ jsx10("code", { className: "ld-field__default-value", children: defaultValue })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "ld-field__content", children })
+  ] });
+}
 export {
   Admonition,
   BackgroundGradient,
@@ -608,6 +635,7 @@ export {
   Cards,
   CodeBlock,
   Danger,
+  Field,
   FileTree,
   Head,
   InfoBox,

package/dist/client/ssr.css

@@ -18,8 +18,6 @@
 .boltdocs-link-preview-content {
   padding: 0.85rem 1rem;
   background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--ld-border-subtle);
   border-radius: var(--ld-radius-lg);
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -5px rgba(0, 0, 0, 0.1);
@@ -43,17 +41,6 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-[data-theme=dark] .boltdocs-link-preview-content {
-  background-color: rgba(15, 15, 20, 0.8);
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
-}
-[data-theme=dark] .boltdocs-link-preview-title {
-  color: #fff;
-}
-[data-theme=dark] .boltdocs-link-preview-summary {
-  color: #94a3b8;
-}
 
 /* src/client/theme/ui/ProgressBar/ProgressBar.css */
 .boltdocs-progress-container {
@@ -103,7 +90,7 @@
   --ld-code-bg: #f3f4f6;
   --ld-code-header: #e5e7eb;
   --ld-code-text: #1f2937;
-  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --ld-navbar-bg: #ffffff;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
@@ -1987,6 +1974,89 @@ a {
   opacity: 0.4;
   cursor: not-allowed;
 }
+.ld-field {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.ld-field:hover {
+  border-color: var(--ld-color-primary);
+  box-shadow: 0 4px 20px -8px rgba(127, 19, 236, 0.15);
+}
+.ld-field__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+.ld-field__signature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.ld-field__name {
+  font-family: var(--ld-font-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  background: rgba(127, 19, 236, 0.08);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: -0.01em;
+}
+.ld-field__type-badge {
+  font-family: var(--ld-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ld-color-primary);
+  background: var(--ld-color-primary-muted);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--ld-radius-full);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+.ld-field__required-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ld-ui-danger-text);
+  background: var(--ld-ui-danger-bg);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: 0.05em;
+}
+.ld-field__default {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+.ld-field__default-label {
+  color: var(--ld-text-dim);
+  font-weight: 500;
+}
+.ld-field__default-value {
+  font-family: var(--ld-font-mono);
+  color: var(--ld-text-main);
+  background: var(--ld-bg-mute);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+}
+.ld-field__content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ld-text-muted);
+}
+.ld-field__content p {
+  margin: 0;
+}
 
 /* src/client/theme/components/PackageManagerTabs/pkg-tabs.css */
 .pkg-tabs-wrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltdocs",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "A lightweight documentation generator for React projects.",
   "main": "dist/node/index.js",
   "module": "dist/node/index.mjs",

package/src/client/index.ts

@@ -30,6 +30,7 @@ export {
   List,
   FileTree,
   Table,
+  Field,
 } from "./theme/components/mdx";
 export type {
   ButtonProps,
@@ -42,4 +43,5 @@ export type {
   ListProps,
   FileTreeProps,
   TableProps,
+  FieldProps,
 } from "./theme/components/mdx";

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

@@ -0,0 +1,60 @@
+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/index.ts

@@ -22,3 +22,6 @@ export type { FileTreeProps } from "./FileTree";
 
 export { Table } from "./Table";
 export type { TableProps } from "./Table";
+
+export { Field } from "./Field";
+export type { FieldProps } from "./Field";

package/src/client/theme/components/mdx/mdx-components.css

@@ -667,3 +667,98 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+/* ─── Field ───────────────────────────────────────────────── */
+.ld-field {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ld-field:hover {
+  border-color: var(--ld-color-primary);
+  box-shadow: 0 4px 20px -8px rgba(127, 19, 236, 0.15);
+}
+
+.ld-field__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+
+.ld-field__signature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ld-field__name {
+  font-family: var(--ld-font-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  background: rgba(127, 19, 236, 0.08);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: -0.01em;
+}
+
+.ld-field__type-badge {
+  font-family: var(--ld-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ld-color-primary);
+  background: var(--ld-color-primary-muted);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--ld-radius-full);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+
+.ld-field__required-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ld-ui-danger-text);
+  background: var(--ld-ui-danger-bg);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: 0.05em;
+}
+
+.ld-field__default {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.ld-field__default-label {
+  color: var(--ld-text-dim);
+  font-weight: 500;
+}
+
+.ld-field__default-value {
+  font-family: var(--ld-font-mono);
+  color: var(--ld-text-main);
+  background: var(--ld-bg-mute);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+}
+
+.ld-field__content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ld-text-muted);
+}
+
+.ld-field__content p {
+  margin: 0;
+}

package/src/client/theme/styles/variables.css

@@ -41,7 +41,7 @@
   --ld-code-text: #1f2937;
 
   /* ─ Customization ─ */
-  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --ld-navbar-bg: #ffffff;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;

package/src/client/theme/ui/Link/link-preview.css

@@ -19,11 +19,9 @@
 .boltdocs-link-preview-content {
   padding: 0.85rem 1rem;
   background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--ld-border-subtle);
   border-radius: var(--ld-radius-lg);
-  box-shadow: 
+  box-shadow:
     0 10px 30px -10px rgba(0, 0, 0, 0.2),
     0 4px 10px -5px rgba(0, 0, 0, 0.1);
 }
@@ -48,20 +46,3 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-
-/* Dark mode refinements */
-[data-theme="dark"] .boltdocs-link-preview-content {
-  background-color: rgba(15, 15, 20, 0.8);
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 
-    0 20px 40px -15px rgba(0, 0, 0, 0.5),
-    0 8px 16px -8px rgba(0, 0, 0, 0.3);
-}
-
-[data-theme="dark"] .boltdocs-link-preview-title {
-  color: #fff;
-}
-
-[data-theme="dark"] .boltdocs-link-preview-summary {
-  color: #94a3b8;
-}