boltdocs 1.0.0

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

@@ -0,0 +1,405 @@
+/* ═══════════════════════════════════════════════════════════
+   MDX UI COMPONENTS
+   All variables use --ld-ui-* to avoid conflicts with
+   layout elements (sidebar, TOC, navbar).
+   ═══════════════════════════════════════════════════════════ */
+
+/* ─── Button ──────────────────────────────────────────────── */
+.ld-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: 600;
+  border-radius: var(--ld-radius-md);
+  cursor: pointer;
+  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  font-family: var(--ld-font-sans);
+  border: 1px solid transparent;
+  line-height: 1;
+  letter-spacing: -0.01em;
+}
+
+.ld-btn:hover {
+  transform: scale(1.05);
+}
+
+.ld-btn:active {
+  transform: scale(0.95);
+}
+
+/* sizes */
+.ld-btn--sm {
+  padding: 0.45rem 1.1rem;
+  font-size: 0.8125rem;
+  border-radius: var(--ld-radius-md);
+}
+.ld-btn--md {
+  padding: 0.7rem 1.6rem;
+  font-size: 0.9375rem;
+}
+.ld-btn--lg {
+  padding: 0.85rem 2.1rem;
+  font-size: 1.05rem;
+}
+
+/* variants */
+.ld-btn--primary {
+  background-color: var(--ld-ui-btn-primary-bg, var(--ld-btn-primary-bg));
+  color: var(--ld-ui-btn-primary-text, var(--ld-btn-primary-text)) !important;
+}
+.ld-btn--primary:hover {
+  opacity: 0.92;
+  color: var(--ld-ui-btn-primary-text, var(--ld-btn-primary-text)) !important;
+}
+
+.ld-btn--secondary {
+  background-color: var(--ld-ui-btn-secondary-bg, var(--ld-btn-secondary-bg));
+  color: var(
+    --ld-ui-btn-secondary-text,
+    var(--ld-btn-secondary-text)
+  ) !important;
+  border-color: var(--ld-border-subtle);
+}
+.ld-btn--secondary:hover {
+  background-color: var(--ld-bg-mute);
+  border-color: var(--ld-border-strong);
+  color: var(
+    --ld-ui-btn-secondary-text,
+    var(--ld-btn-secondary-text)
+  ) !important;
+}
+
+.ld-btn--outline {
+  background: transparent;
+  color: var(--ld-text-main) !important;
+  border-color: var(--ld-border-strong);
+}
+.ld-btn--outline:hover {
+  background-color: var(--ld-bg-soft);
+  border-color: var(--ld-color-primary);
+}
+
+.ld-btn--ghost {
+  background: transparent;
+  color: var(--ld-text-muted) !important;
+}
+.ld-btn--ghost:hover {
+  background-color: var(--ld-bg-soft);
+  color: var(--ld-text-main) !important;
+}
+
+/* ─── Badge ───────────────────────────────────────────────── */
+.ld-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3rem 0.85rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: var(--ld-radius-full);
+  line-height: 1.4;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}
+
+.ld-badge--default {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+  border: 1px solid var(--ld-border-subtle);
+}
+.ld-badge--primary {
+  background: var(--ld-color-primary-muted);
+  color: var(--ld-color-primary);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+.ld-badge--success {
+  background: var(--ld-ui-success-bg);
+  color: var(--ld-ui-success-text);
+  border: 1px solid var(--ld-ui-success-border);
+}
+.ld-badge--warning {
+  background: var(--ld-ui-warning-bg);
+  color: var(--ld-ui-warning-text);
+  border: 1px solid var(--ld-ui-warning-border);
+}
+.ld-badge--danger {
+  background: var(--ld-ui-danger-bg);
+  color: var(--ld-ui-danger-text);
+  border: 1px solid var(--ld-ui-danger-border);
+}
+.ld-badge--info {
+  background: var(--ld-ui-info-bg);
+  color: var(--ld-ui-info-text);
+  border: 1px solid var(--ld-ui-info-border);
+}
+
+/* ─── Cards ───────────────────────────────────────────────── */
+.ld-cards {
+  display: grid;
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+.ld-cards--1 {
+  grid-template-columns: 1fr;
+}
+.ld-cards--2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.ld-cards--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.ld-cards--4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 768px) {
+  .ld-cards--2,
+  .ld-cards--3,
+  .ld-cards--4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ld-card {
+  position: relative;
+  padding: 1.35rem 1.5rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  text-decoration: none !important;
+  backdrop-filter: blur(var(--ld-navbar-blur));
+  -webkit-backdrop-filter: blur(var(--ld-navbar-blur));
+  color: inherit;
+  overflow: hidden;
+}
+
+/* Subtle inner glow on top edge */
+.ld-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ld-border-strong),
+    transparent
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.ld-card:hover {
+  border-color: var(--ld-color-primary);
+  transform: translateY(-3px);
+}
+.ld-card:hover::before {
+  opacity: 1;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ld-color-primary),
+    transparent
+  );
+}
+
+.ld-card--link {
+  cursor: pointer;
+}
+.ld-card--link:hover {
+  text-decoration: none !important;
+}
+
+.ld-card__icon {
+  font-size: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-bottom: 0.85rem;
+}
+.ld-card__title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin: 0 0 0.4rem;
+  color: var(--ld-text-main);
+  letter-spacing: -0.01em;
+}
+.ld-card__body {
+  font-size: 0.85rem;
+  color: var(--ld-text-muted);
+  line-height: 1.55;
+  margin: 0;
+}
+.ld-card__body p {
+  margin: 0;
+}
+
+/* ─── Tabs ────────────────────────────────────────────────── */
+.ld-tabs {
+  margin: 1.5rem 0;
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-lg);
+  overflow: hidden;
+  background: var(--ld-bg-soft);
+}
+
+.ld-tabs__bar {
+  display: flex;
+  gap: 0;
+  background-color: var(--ld-bg-mute);
+  border-bottom: 1px solid var(--ld-border-subtle);
+  overflow-x: auto;
+}
+
+.ld-tabs__trigger {
+  position: relative;
+  padding: 0.65rem 1.25rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--ld-text-dim);
+  font-family: var(--ld-font-sans);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+.ld-tabs__trigger:hover {
+  color: var(--ld-text-main);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+.ld-tabs__trigger--active {
+  color: var(--ld-color-primary);
+  border-bottom-color: var(--ld-color-primary);
+  background-color: transparent;
+}
+
+.ld-tabs__content {
+  padding: 1.25rem;
+}
+
+.ld-tab-panel {
+  font-size: 0.9rem;
+  line-height: 1.7;
+  color: var(--ld-text-muted);
+}
+
+/* ─── Admonition ──────────────────────────────────────────── */
+.ld-admonition {
+  margin: 1.5rem 0;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid;
+  overflow: hidden;
+}
+
+.ld-admonition__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.1rem;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ld-admonition__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ld-admonition__body {
+  padding: 0.6rem 1.1rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--ld-text-muted);
+}
+.ld-admonition__body p {
+  margin: 0 0 0.5rem;
+}
+.ld-admonition__body p:last-child {
+  margin-bottom: 0;
+}
+
+/* Admonition — Note (blue) */
+.ld-admonition--note {
+  border-color: var(--ld-ui-note-border);
+  background-color: var(--ld-ui-note-bg);
+}
+.ld-admonition--note .ld-admonition__header {
+  color: var(--ld-ui-note-text);
+}
+
+/* Admonition — Tip (green) */
+.ld-admonition--tip {
+  border-color: var(--ld-ui-tip-border);
+  background-color: var(--ld-ui-tip-bg);
+}
+.ld-admonition--tip .ld-admonition__header {
+  color: var(--ld-ui-tip-text);
+}
+
+/* Admonition — Info (blue) */
+.ld-admonition--info {
+  border-color: var(--ld-ui-info-border);
+  background-color: var(--ld-ui-info-bg);
+}
+.ld-admonition--info .ld-admonition__header {
+  color: var(--ld-ui-info-text);
+}
+
+/* Admonition — Warning (amber) */
+.ld-admonition--warning {
+  border-color: var(--ld-ui-warning-border);
+  background-color: var(--ld-ui-warning-bg);
+}
+.ld-admonition--warning .ld-admonition__header {
+  color: var(--ld-ui-warning-text);
+}
+
+/* Admonition — Danger (red) */
+.ld-admonition--danger {
+  border-color: var(--ld-ui-danger-border);
+  background-color: var(--ld-ui-danger-bg);
+}
+.ld-admonition--danger .ld-admonition__header {
+  color: var(--ld-ui-danger-text);
+}
+
+/* ─── List ────────────────────────────────────────────────── */
+.ld-list {
+  margin: 1rem 0;
+  padding-left: 0;
+  list-style: none;
+}
+.ld-list--checked,
+.ld-list--arrow {
+  padding-left: 0;
+}
+
+.ld-list__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.35rem 0;
+  color: var(--ld-text-muted);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.ld-list__icon {
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+}
+
+.ld-list--checked .ld-list__icon {
+  color: var(--ld-ui-success-text);
+}
+.ld-list--arrow .ld-list__icon {
+  color: var(--ld-color-primary);
+}

package/src/client/theme/icons/bun.tsx

@@ -0,0 +1,62 @@
+import type { SVGProps } from "react";
+
+const Bun = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 80 70">
+    <path d="M71.09 20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46 26.46 0 0 1 75.5 35.7c0 16.57-16.82 30.05-37.5 30.05-11.58 0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55 65.3 30.14 69.75 42 69.75c20.68 0 37.5-13.48 37.5-30 0-7.06-3.04-13.75-8.41-19.01Z" />
+    <path
+      d="M73 35.7c0 15.21-15.67 27.54-35 27.54S3 50.91 3 35.7C3 26.27 9 17.94 18.22 13S33.18 3 38 3s8.94 4.13 19.78 10C67 17.94 73 26.27 73 35.7Z"
+      style={{ fill: "#fbf0df" }}
+    />
+    <path
+      d="M73 35.7a21.67 21.67 0 0 0-.8-5.78c-2.73 33.3-43.35 34.9-59.32 24.94A40 40 0 0 0 38 63.24c19.3 0 35-12.35 35-27.54Z"
+      style={{ fill: "#f6dece" }}
+    />
+    <path
+      d="M24.53 11.17C29 8.49 34.94 3.46 40.78 3.45A9.29 9.29 0 0 0 38 3c-2.42 0-5 1.25-8.25 3.13-1.13.66-2.3 1.39-3.54 2.15-2.33 1.44-5 3.07-8 4.7C8.69 18.13 3 26.62 3 35.7v1.19c6.06-21.41 17.07-23.04 21.53-25.72Z"
+      style={{ fill: "#fffefc" }}
+    />
+    <path
+      d="M35.12 5.53A16.41 16.41 0 0 1 29.49 18c-.28.25-.06.73.3.59 3.37-1.31 7.92-5.23 6-13.14-.08-.45-.67-.33-.67.08Zm2.27 0A16.24 16.24 0 0 1 39 19c-.12.35.31.65.55.36 2.19-2.8 4.1-8.36-1.62-14.36-.29-.26-.74.14-.54.49Zm2.76-.17A16.42 16.42 0 0 1 47 17.12a.33.33 0 0 0 .65.11c.92-3.49.4-9.44-7.17-12.53-.4-.16-.66.38-.33.62Zm-18.46 10.4a16.94 16.94 0 0 0 10.47-9c.18-.36.75-.22.66.18-1.73 8-7.52 9.67-11.12 9.45-.38.01-.37-.52-.01-.63Z"
+      style={{ fill: "#ccbea7", fillRule: "evenodd" }}
+    />
+    <path d="M38 65.75C17.32 65.75.5 52.27.5 35.7c0-10 6.18-19.33 16.53-24.92 3-1.6 5.57-3.21 7.86-4.62 1.26-.78 2.45-1.51 3.6-2.19C32 1.89 35 .5 38 .5s5.62 1.2 8.9 3.14c1 .57 2 1.19 3.07 1.87 2.49 1.54 5.3 3.28 9 5.27C69.32 16.37 75.5 25.69 75.5 35.7c0 16.57-16.82 30.05-37.5 30.05ZM38 3c-2.42 0-5 1.25-8.25 3.13-1.13.66-2.3 1.39-3.54 2.15-2.33 1.44-5 3.07-8 4.7C8.69 18.13 3 26.62 3 35.7c0 15.19 15.7 27.55 35 27.55S73 50.89 73 35.7c0-9.08-5.69-17.57-15.22-22.7-3.78-2-6.73-3.88-9.12-5.36-1.09-.67-2.09-1.29-3-1.84C42.63 4 40.42 3 38 3Z" />
+    <g>
+      <path
+        d="M45.05 43a8.93 8.93 0 0 1-2.92 4.71 6.81 6.81 0 0 1-4 1.88A6.84 6.84 0 0 1 34 47.71 8.93 8.93 0 0 1 31.12 43a.72.72 0 0 1 .8-.81h12.34a.72.72 0 0 1 .79.81Z"
+        style={{ fill: "#b71422" }}
+      />
+      <path
+        d="M34 47.79a6.91 6.91 0 0 0 4.12 1.9 6.91 6.91 0 0 0 4.11-1.9 10.63 10.63 0 0 0 1-1.07 6.83 6.83 0 0 0-4.9-2.31 6.15 6.15 0 0 0-5 2.78c.23.21.43.41.67.6Z"
+        style={{ fill: "#ff6164" }}
+      />
+      <path d="M34.16 47a5.36 5.36 0 0 1 4.19-2.08 6 6 0 0 1 4 1.69c.23-.25.45-.51.66-.77a7 7 0 0 0-4.71-1.93 6.36 6.36 0 0 0-4.89 2.36 9.53 9.53 0 0 0 .75.73Z" />
+      <path d="M38.09 50.19a7.42 7.42 0 0 1-4.45-2 9.52 9.52 0 0 1-3.11-5.05 1.2 1.2 0 0 1 .26-1 1.41 1.41 0 0 1 1.13-.51h12.34a1.44 1.44 0 0 1 1.13.51 1.19 1.19 0 0 1 .25 1 9.52 9.52 0 0 1-3.11 5.05 7.42 7.42 0 0 1-4.44 2Zm-6.17-7.4c-.16 0-.2.07-.21.09a8.29 8.29 0 0 0 2.73 4.37A6.23 6.23 0 0 0 38.09 49a6.28 6.28 0 0 0 3.65-1.73 8.3 8.3 0 0 0 2.72-4.37.21.21 0 0 0-.2-.09Z" />
+    </g>
+    <g>
+      <ellipse
+        cx="53.22"
+        cy="40.18"
+        rx="5.85"
+        ry="3.44"
+        style={{ fill: "#febbd0" }}
+      />
+      <ellipse
+        cx="22.95"
+        cy="40.18"
+        rx="5.85"
+        ry="3.44"
+        style={{ fill: "#febbd0" }}
+      />
+      <path
+        d="M25.7 38.8a5.51 5.51 0 1 0-5.5-5.51 5.51 5.51 0 0 0 5.5 5.51Zm24.77 0A5.51 5.51 0 1 0 45 33.29a5.5 5.5 0 0 0 5.47 5.51Z"
+        style={{ fillRule: "evenodd" }}
+      />
+      <path
+        d="M24 33.64a2.07 2.07 0 1 0-2.06-2.07A2.07 2.07 0 0 0 24 33.64Zm24.77 0a2.07 2.07 0 1 0-2.06-2.07 2.07 2.07 0 0 0 2.04 2.07Z"
+        style={{ fill: "#fff", fillRule: "evenodd" }}
+      />
+    </g>
+  </svg>
+);
+
+export { Bun };

package/src/client/theme/icons/deno.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+const Deno = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlSpace="preserve"
+    fillRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="2"
+    clipRule="evenodd"
+    viewBox="0 0 441 441"
+  >
+    <path
+      fill="currentColor"
+      d="M229.858-2.62c121.29 5.675 215.154 108.755 209.479 230.045S330.582 442.578 209.292 436.903-5.863 328.149-.188 206.859 108.568-8.296 229.858-2.62Zm51.365 264.922c-13.886-.687-27.594-3.012-38.616-4.857-8.381-1.404-16.33-3.616-22.855-5.858a2.576 2.576 0 0 0-2.932.878c-.678.905-.777 2.22-.02 3.061 3.08 3.418 12.848 10.54 20.439 13.812-6.491 5.357-10.933 17.608-12.684 23.95-2.35 8.51-2.687 20.801-2.12 25.312 2.282 18.146 8.95 34.41 25.467 48.64 11.562 9.96 28.295 16.77 45.399 17.08 23.603.426 51.882-9.705 74.085-32.493 29.028-31.807 48.051-73.17 51.593-119.393 8.434-110.06-74.073-206.264-184.134-214.698C124.785 9.302 28.582 91.81 20.147 201.87c-4.368 56.998 15.655 110.28 51.267 149.576a3.185 3.185 0 0 0 5.422-2.974c-26.39-103.487 30.95-215.162 94.926-250.494 23.751-13.118 46.884-18.1 67.664-9.69 31.814 12.874 50 34.21 89.375 52.163 39.375 17.951 43.625 47.862 32.64 78.098-10.986 30.236-46.358 45.425-80.218 43.753Zm-68.863-160.08c-12.906 1.006-21.384 16.978-22.497 27.253-1.117 10.275 3.978 27.236 20.794 26.91 19.694-.383 25.681-17.238 23.525-33.55-1.618-12.25-11.033-21.456-21.822-20.613Z"
+    />
+  </svg>
+);
+
+export { Deno };

package/src/client/theme/icons/discord.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const Discord = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 199" preserveAspectRatio="xMidYMid">
+    <path
+      d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export { Discord };

package/src/client/theme/icons/github.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const GitHub = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 1024 1024" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+      transform="scale(64)"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export { GitHub };

package/src/client/theme/icons/npm.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+
+const NPM = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 2500 2500">
+    <path fill="#c00" d="M0 0h2500v2500H0z" />
+    <path
+      fill="#fff"
+      d="M1241.5 268.5h-973v1962.9h972.9V763.5h495v1467.9h495V268.5z"
+    />
+  </svg>
+);
+
+export { NPM };

package/src/client/theme/icons/pnpm.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+
+const Pnpm = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="76.58987244897958 44 164.00775510204068 164"
+  >
+    <defs>
+      <path
+        d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z"
+        id="pnpm_dark__b45vdTD8hs"
+      />
+      <path
+        d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z"
+        id="pnpm_dark__a40WtxIl8d"
+      />
+      <path
+        d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z"
+        id="pnpm_dark__h2CN9AEEpe"
+      />
+      <path
+        d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z"
+        id="pnpm_dark__dqv5133G8"
+      />
+      <path
+        d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z"
+        id="pnpm_dark__b1Lv79ypvm"
+      />
+      <path
+        d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z"
+        id="pnpm_dark__hy1IZWwLX"
+      />
+      <path
+        d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z"
+        id="pnpm_dark__akQfjxQes"
+      />
+      <path
+        d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z"
+        id="pnpm_dark__bdSrwE5pk"
+      />
+    </defs>
+    <g>
+      <g>
+        <use xlinkHref="#pnpm_dark__b45vdTD8hs" fill="#f9ad00" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__a40WtxIl8d" fill="#f9ad00" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__h2CN9AEEpe" fill="#f9ad00" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__dqv5133G8" fill="#f9ad00" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="currentColor" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="currentColor" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="currentColor" />
+      </g>
+      <g>
+        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="currentColor" />
+      </g>
+    </g>
+  </svg>
+);
+
+export { Pnpm };

package/src/client/theme/icons/twitter.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const XformerlyTwitter = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} fill="none" viewBox="0 0 1200 1227">
+    <path
+      fill="currentColor"
+      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
+    />
+  </svg>
+);
+
+export { XformerlyTwitter };

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

@@ -0,0 +1,60 @@
+/* ═══════════════════════════════════════════════════════════
+   HOME / LANDING PAGE — Layout only
+   Component styles (badge, buttons, cards) now live in
+   mdx-components.css and use the shared UI components.
+   ═══════════════════════════════════════════════════════════ */
+.boltdocs-home {
+  min-height: calc(100vh - var(--ld-navbar-height));
+}
+
+.home-hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6rem 2rem 4rem;
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 680px;
+}
+
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 900;
+  line-height: 1.1;
+  margin: 0 0 1.25rem;
+  letter-spacing: -0.03em;
+  color: var(--ld-text-main);
+}
+
+.hero-highlight {
+  background: linear-gradient(
+    135deg,
+    var(--ld-gradient-from),
+    var(--ld-gradient-to)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  font-size: 1.125rem;
+  color: var(--ld-text-muted);
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.home-features {
+  padding: 2rem 2rem 6rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}