@farming-labs/theme 0.0.2-beta.20 → 0.0.2-beta.22

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.2-beta.20",
+  "version": "0.0.2-beta.22",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
+  "keywords": [
+    "docs",
+    "documentation",
+    "fumadocs",
+    "theme"
+  ],
+  "license": "MIT",
+  "author": "Farming Labs",
+  "files": [
+    "dist",
+    "styles"
+  ],
   "type": "module",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -74,18 +86,6 @@
     "./presets/black": "./styles/presets/black.css",
     "./presets/base": "./styles/presets/base.css"
   },
-  "files": [
-    "dist",
-    "styles"
-  ],
-  "keywords": [
-    "docs",
-    "fumadocs",
-    "theme",
-    "documentation"
-  ],
-  "author": "Farming Labs",
-  "license": "MIT",
   "dependencies": {
     "fumadocs-core": "^16.6.1",
     "fumadocs-ui": "^16.6.1",
@@ -98,7 +98,7 @@
     "next": ">=14.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.0.2-beta.20"
+    "@farming-labs/docs": "0.0.2-beta.22"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/ai.css

@@ -8,28 +8,58 @@
 /* ─── Animations ─────────────────────────────────────────────────── */
 
 @keyframes fd-ai-dot {
-  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
-  40% { transform: scale(1); opacity: 1; }
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 @keyframes fd-ai-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fd-ai-slide-up {
-  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
-  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 
 @keyframes fd-ai-float-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 @keyframes fd-ai-float-center-in {
-  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
-  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 
 /* ─── Overlay ────────────────────────────────────────────────────── */
@@ -254,7 +284,7 @@
   border-radius: var(--radius, 8px);
   border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.08));
   background: var(--color-fd-background, rgba(255, 255, 255, 0.01));
-  opacity: 0.6; 
+  opacity: 0.6;
   color: var(--color-fd-foreground, #e4e4e7);
   font-size: 13px;
   font-family: inherit;
@@ -394,8 +424,12 @@
   animation: fd-ai-dot 1.4s infinite ease-in-out both;
 }
 
-.fd-ai-loading-dot:nth-child(2) { animation-delay: 0.16s; }
-.fd-ai-loading-dot:nth-child(3) { animation-delay: 0.32s; }
+.fd-ai-loading-dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+.fd-ai-loading-dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
 
 /* ─── Floating trigger button ────────────────────────────────────── */
 
@@ -416,7 +450,10 @@
   cursor: pointer;
   font-size: 14px;
   box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
-  transition: transform 150ms, background 150ms, color 150ms;
+  transition:
+    transform 150ms,
+    background 150ms,
+    color 150ms;
   animation: fd-ai-fade-in 300ms ease-out;
 }
 
@@ -536,7 +573,11 @@
 
 .fd-ai-code-copy:hover {
   color: var(--color-fd-foreground, #e4e4e7);
-  background: color-mix(in srgb, var(--color-fd-accent, rgba(255,255,255,0.05)) 60%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--color-fd-accent, rgba(255, 255, 255, 0.05)) 60%,
+    transparent
+  );
 }
 
 .fd-ai-code-block pre {
@@ -558,7 +599,10 @@
 }
 
 /* sugar-high: each line is a block span, min-height keeps empty lines visible */
-.fd-ai-code-block .sh__line { display: block; min-height: 1.2em; }
+.fd-ai-code-block .sh__line {
+  display: block;
+  min-height: 1.2em;
+}
 
 /* ═══════════════════════════════════════════════════════════════════
  * Full-Modal (better-auth inspired) — fd-ai-fm-*
@@ -615,8 +659,20 @@
   overflow-y: auto;
   width: min(800px, 100%);
   padding: 24px 0 120px;
-  mask-image: linear-gradient(to bottom, transparent, white 3rem, white calc(100% - 8rem), transparent 100%);
-  -webkit-mask-image: linear-gradient(to bottom, transparent, white 3rem, white calc(100% - 8rem), transparent 100%);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    white 3rem,
+    white calc(100% - 8rem),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    white 3rem,
+    white calc(100% - 8rem),
+    transparent 100%
+  );
 }
 
 .fd-ai-fm-messages-inner {
@@ -705,12 +761,24 @@
   animation: fd-ai-fm-bounce 1s infinite ease-in-out;
 }
 
-.fd-ai-fm-thinking-dot:nth-child(2) { animation-delay: 150ms; }
-.fd-ai-fm-thinking-dot:nth-child(3) { animation-delay: 300ms; }
+.fd-ai-fm-thinking-dot:nth-child(2) {
+  animation-delay: 150ms;
+}
+.fd-ai-fm-thinking-dot:nth-child(3) {
+  animation-delay: 300ms;
+}
 
 @keyframes fd-ai-fm-bounce {
-  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-  40% { transform: scale(1); opacity: 1; }
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 /* ─── Bottom input bar ───────────────────────────────────────────── */
@@ -718,9 +786,10 @@
 .fd-ai-fm-input-bar {
   position: fixed;
   z-index: 9999;
-  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-              height 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-              transform 200ms ease-out;
+  transition:
+    width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    height 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    transform 200ms ease-out;
 }
 
 .fd-ai-fm-input-bar--closed {
@@ -809,8 +878,20 @@
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 4px;
-  mask-image: linear-gradient(to right, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
+  mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 1rem,
+    black calc(100% - 1rem),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 1rem,
+    black calc(100% - 1rem),
+    transparent 100%
+  );
 }
 
 .fd-ai-fm-suggestion {
@@ -820,15 +901,16 @@
   font-size: 12px;
   font-family: inherit;
   border-radius: 9999px;
-  border: 1px solid color-mix(in srgb, var(--color-fd-border, rgba(255,255,255,0.1)) 50%, transparent);
-  background: color-mix(in srgb, var(--color-fd-muted, rgba(255,255,255,0.04)) 30%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--color-fd-border, rgba(255, 255, 255, 0.1)) 50%, transparent);
+  background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 30%, transparent);
   color: var(--color-fd-muted-foreground, #71717a);
   cursor: pointer;
   transition: all 200ms;
 }
 
 .fd-ai-fm-suggestion:hover {
-  background: color-mix(in srgb, var(--color-fd-muted, rgba(255,255,255,0.04)) 50%, transparent);
+  background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 50%, transparent);
   color: var(--color-fd-foreground, #e4e4e7);
   border-color: var(--color-fd-border, rgba(255, 255, 255, 0.1));
 }
@@ -841,7 +923,11 @@
   gap: 4px;
   padding: 8px 16px;
   border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
-  background: color-mix(in srgb, var(--color-fd-accent, rgba(255,255,255,0.03)) 40%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--color-fd-accent, rgba(255, 255, 255, 0.03)) 40%,
+    transparent
+  );
   font-size: 12px;
   color: var(--color-fd-muted-foreground, #71717a);
 }
@@ -886,7 +972,11 @@
   gap: 4px;
   padding: 8px 16px;
   border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
-  background: color-mix(in srgb, var(--color-fd-accent, rgba(255,255,255,0.03)) 40%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--color-fd-accent, rgba(255, 255, 255, 0.03)) 40%,
+    transparent
+  );
   font-size: 12px;
   color: var(--color-fd-muted-foreground, #71717a);
   border-radius: 0 0 var(--radius, 12px) var(--radius, 12px);
@@ -915,7 +1005,10 @@
   font-size: 14px;
   cursor: pointer;
   box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
-  transition: transform 150ms, background 150ms, color 150ms;
+  transition:
+    transform 150ms,
+    background 150ms,
+    color 150ms;
   animation: fd-ai-fade-in 300ms ease-out;
   white-space: nowrap;
 }

package/styles/base.css

@@ -26,34 +26,52 @@ body {
   font-family: var(--fd-font-sans, var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif));
 }
 
-code, kbd, pre, samp {
-  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace));
+code,
+kbd,
+pre,
+samp {
+  font-family: var(
+    --fd-font-mono,
+    var(
+      --font-geist-mono,
+      ui-monospace,
+      "Cascadia Code",
+      "Source Code Pro",
+      Menlo,
+      Consolas,
+      monospace
+    )
+  );
 }
 
 /* ─── Prose heading typography ───────────────────────────────────────── */
 
-.prose h1, article h1 {
+.prose h1,
+article h1 {
   font-size: var(--fd-h1-size, 2.25rem);
   font-weight: var(--fd-h1-weight, 700);
   line-height: var(--fd-h1-line-height, 1.2);
   letter-spacing: var(--fd-h1-letter-spacing, -0.02em);
 }
 
-.prose h2, article h2 {
+.prose h2,
+article h2 {
   font-size: var(--fd-h2-size, 1.5rem);
   font-weight: var(--fd-h2-weight, 600);
   line-height: var(--fd-h2-line-height, 1.3);
   letter-spacing: var(--fd-h2-letter-spacing, -0.01em);
 }
 
-.prose h3, article h3 {
+.prose h3,
+article h3 {
   font-size: var(--fd-h3-size, 1.25rem);
   font-weight: var(--fd-h3-weight, 600);
   line-height: var(--fd-h3-line-height, 1.4);
   letter-spacing: var(--fd-h3-letter-spacing, normal);
 }
 
-.prose h4, article h4 {
+.prose h4,
+article h4 {
   font-size: var(--fd-h4-size, 1.125rem);
   font-weight: var(--fd-h4-weight, 600);
   line-height: var(--fd-h4-line-height, 1.4);
@@ -62,7 +80,10 @@ code, kbd, pre, samp {
 
 /* ─── Body text ──────────────────────────────────────────────────────── */
 
-.prose p, .prose li, .prose td, article p {
+.prose p,
+.prose li,
+.prose td,
+article p {
   font-size: var(--fd-body-size, 1rem);
   font-weight: var(--fd-body-weight, 400);
   line-height: var(--fd-body-line-height, 1.75);
@@ -70,7 +91,9 @@ code, kbd, pre, samp {
 
 /* ─── Small text (captions, metadata) ─────────────────────────────── */
 
-.prose small, article small, .text-sm {
+.prose small,
+article small,
+.text-sm {
   font-size: var(--fd-small-size, 0.875rem);
   font-weight: var(--fd-small-weight, 400);
   line-height: var(--fd-small-line-height, 1.5);
@@ -108,6 +131,44 @@ figure.shiki pre > code > [data-line] {
   padding: 0 0.25rem;
 }
 
+/* Titled code blocks: diagonal stripe background on the title bar */
+figure.shiki:has(figcaption) > div:first-child {
+  position: relative;
+}
+
+figure.shiki:has(figcaption) > div:first-child::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    -45deg,
+    currentColor,
+    currentColor 1px,
+    transparent 1px,
+    transparent 6px
+  );
+  opacity: 0.03;
+  pointer-events: none;
+}
+
+.dark figure.shiki:has(figcaption) > div:first-child::before {
+  opacity: 0.05;
+}
+
+figure.shiki:has(figcaption) figcaption {
+  font-family: var(
+    --fd-font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    monospace
+  );
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+}
+
 /* ─── Page description (frontmatter) ─────────────────────────────────── */
 
 .fd-page-description {
@@ -148,7 +209,9 @@ figure.shiki pre > code > [data-line] {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
-  transition: opacity 0.15s, color 0.15s;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
 }
 
 .fd-breadcrumb-link:hover {
@@ -221,7 +284,10 @@ figure.shiki pre > code > [data-line] {
   border-radius: 0.375rem;
   cursor: pointer;
   white-space: nowrap;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    background 0.15s,
+    border-color 0.15s;
   user-select: none;
 }
 
@@ -268,8 +334,14 @@ figure.shiki pre > code > [data-line] {
 }
 
 @keyframes fd-page-actions-fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .fd-page-action-menu-item {
@@ -286,7 +358,9 @@ figure.shiki pre > code > [data-line] {
   border-radius: 0.25rem;
   cursor: pointer;
   text-align: left;
-  transition: background 0.1s, color 0.1s;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .fd-page-action-menu-item:hover {
@@ -372,7 +446,10 @@ figure.shiki:hover > div:first-child button {
   background: var(--color-fd-secondary, hsl(0 0% 96%));
   color: var(--color-fd-muted-foreground, hsl(0 0% 45%));
   cursor: pointer;
-  transition: background-color 150ms, color 150ms, border-color 150ms;
+  transition:
+    background-color 150ms,
+    color 150ms,
+    border-color 150ms;
 }
 
 .fd-sidebar-ai-btn:hover {

package/styles/colorful.css

@@ -44,7 +44,9 @@
 
 .fd-ai-dialog {
   border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(180, 140, 20, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 20px 60px rgba(180, 140, 20, 0.08),
+    0 8px 24px rgba(0, 0, 0, 0.12);
 }
 
 .fd-ai-bubble-user {
@@ -131,7 +133,9 @@
   font-size: 0.875rem;
   color: var(--color-fd-card-foreground);
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-  transition: background-color 150ms, border-color 150ms;
+  transition:
+    background-color 150ms,
+    border-color 150ms;
 }
 
 .fd-card:hover {
@@ -243,7 +247,9 @@
   border-radius: 0.75rem;
   border: 1px solid var(--color-fd-border);
   background: var(--color-fd-popover);
-  box-shadow: 0 24px 60px -12px rgba(180, 140, 20, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  box-shadow:
+    0 24px 60px -12px rgba(180, 140, 20, 0.12),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 
 .omni-item-active {
@@ -258,4 +264,3 @@
 .omni-search-input:focus {
   caret-color: var(--color-fd-primary);
 }
-

package/styles/darkbold.css

@@ -252,7 +252,9 @@ nav[class*="header"] {
   font-size: 0.875rem;
   color: var(--color-fd-card-foreground);
   box-shadow: none;
-  transition: background-color 150ms, border-color 150ms;
+  transition:
+    background-color 150ms,
+    border-color 150ms;
 }
 
 .fd-card:hover {
@@ -327,7 +329,9 @@ figure.shiki {
   border-radius: 0;
   color: var(--color-fd-muted-foreground);
   border-bottom: 2px solid transparent;
-  transition: color 150ms, border-color 150ms;
+  transition:
+    color 150ms,
+    border-color 150ms;
 }
 
 [role="tab"][aria-selected="true"],
@@ -455,6 +459,8 @@ details > :not(summary) {
 .fd-page-action-btn {
   border-radius: 6px;
   font-size: 0.8125rem;
+  text-transform: uppercase;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
 }
 
 .fd-page-action-menu {

package/styles/darksharp.css

@@ -56,10 +56,7 @@
 html {
   scroll-behavior: auto;
   scroll-padding-top: calc(
-    var(--fd-nav-height, 56px) +
-    var(--fd-banner-height, 0px) +
-    var(--fd-tocnav-height, 0px) +
-    24px
+    var(--fd-nav-height, 56px) + var(--fd-banner-height, 0px) + var(--fd-tocnav-height, 0px) + 24px
   );
 }
 
@@ -141,7 +138,8 @@ table {
   border-radius: 0 !important;
 }
 
-th, td {
+th,
+td {
   border-color: var(--color-fd-border);
 }
 

package/styles/default.css

@@ -19,7 +19,9 @@
 
 .fd-ai-dialog {
   border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 20px 60px rgba(99, 102, 241, 0.08),
+    0 8px 24px rgba(0, 0, 0, 0.12);
 }
 
 .fd-ai-bubble-user {
@@ -93,7 +95,9 @@
   border-radius: 0.75rem;
   border: 1px solid var(--color-fd-border, #262626);
   background: var(--color-fd-popover, hsl(0 0% 5%));
-  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  box-shadow:
+    0 24px 60px -12px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 
 .omni-item {

package/styles/greentree.css

@@ -6,43 +6,43 @@
 /* ─── GreenTree color overrides ────────────────────────────────── */
 
 :root {
-  --color-fd-primary: #0D9373;
+  --color-fd-primary: #0d9373;
   --color-fd-primary-foreground: #fff;
-  --color-fd-ring: #0D9373;
+  --color-fd-ring: #0d9373;
 
   --color-fd-background: #fff;
-  --color-fd-foreground: #171A18;
+  --color-fd-foreground: #171a18;
   --color-fd-card: #fff;
-  --color-fd-card-foreground: #171A18;
+  --color-fd-card-foreground: #171a18;
   --color-fd-popover: #fff;
-  --color-fd-popover-foreground: #171A18;
+  --color-fd-popover-foreground: #171a18;
   --color-fd-secondary: #f6f8f7;
-  --color-fd-secondary-foreground: #171A18;
+  --color-fd-secondary-foreground: #171a18;
   --color-fd-muted: #f6f8f7;
   --color-fd-muted-foreground: #505351;
   --color-fd-accent: #f0f5f3;
-  --color-fd-accent-foreground: #171A18;
-  --color-fd-border: #DFE1E0;
+  --color-fd-accent-foreground: #171a18;
+  --color-fd-border: #dfe1e0;
 }
 
 .dark {
-  --color-fd-primary: #26BD6C;
-  --color-fd-primary-foreground: #0A0D0D;
-  --color-fd-ring: #26BD6C;
+  --color-fd-primary: #26bd6c;
+  --color-fd-primary-foreground: #0a0d0d;
+  --color-fd-ring: #26bd6c;
 
-  --color-fd-background: #0A0D0D;
-  --color-fd-foreground: #E5E7E6;
+  --color-fd-background: #0a0d0d;
+  --color-fd-foreground: #e5e7e6;
   --color-fd-card: #111413;
-  --color-fd-card-foreground: #E5E7E6;
+  --color-fd-card-foreground: #e5e7e6;
   --color-fd-popover: #111413;
-  --color-fd-popover-foreground: #E5E7E6;
-  --color-fd-secondary: #1A1D1C;
-  --color-fd-secondary-foreground: #E5E7E6;
-  --color-fd-muted: #1A1D1C;
-  --color-fd-muted-foreground: #8A8D8B;
-  --color-fd-accent: #1A1D1C;
-  --color-fd-accent-foreground: #E5E7E6;
-  --color-fd-border: #2A2D2C;
+  --color-fd-popover-foreground: #e5e7e6;
+  --color-fd-secondary: #1a1d1c;
+  --color-fd-secondary-foreground: #e5e7e6;
+  --color-fd-muted: #1a1d1c;
+  --color-fd-muted-foreground: #8a8d8b;
+  --color-fd-accent: #1a1d1c;
+  --color-fd-accent-foreground: #e5e7e6;
+  --color-fd-border: #2a2d2c;
 }
 
 /* ─── Typography — Inter, Mintlify-style values ──────────────── */
@@ -94,7 +94,9 @@ aside a[data-active] {
   padding: 6px 10px;
   border-radius: 8px;
   color: var(--color-fd-muted-foreground);
-  transition: color 150ms, background-color 150ms;
+  transition:
+    color 150ms,
+    background-color 150ms;
 }
 
 aside a[data-active]:hover {
@@ -265,7 +267,9 @@ nav[class*="header"] {
   font-size: 0.875rem;
   color: var(--color-fd-card-foreground);
   box-shadow: none;
-  transition: background-color 150ms, border-color 150ms;
+  transition:
+    background-color 150ms,
+    border-color 150ms;
 }
 
 .fd-card:hover {
@@ -340,7 +344,9 @@ figure.shiki {
   border-radius: 0;
   color: var(--color-fd-muted-foreground);
   border-bottom: 2px solid transparent;
-  transition: color 150ms, border-color 150ms;
+  transition:
+    color 150ms,
+    border-color 150ms;
 }
 
 [role="tab"][aria-selected="true"],
@@ -622,7 +628,10 @@ details > :not(summary) {
   background: transparent;
   color: var(--color-fd-muted-foreground);
   cursor: pointer;
-  transition: background-color 150ms, color 150ms, border-color 150ms;
+  transition:
+    background-color 150ms,
+    color 150ms,
+    border-color 150ms;
 }
 
 .fd-sidebar-ai-btn:hover {
@@ -657,7 +666,9 @@ details > :not(summary) {
   background: transparent;
   border: 1px solid var(--color-fd-border);
   cursor: pointer;
-  transition: background-color 150ms, color 150ms;
+  transition:
+    background-color 150ms,
+    color 150ms;
   white-space: nowrap;
 }
 

package/styles/omni.css

@@ -4,25 +4,49 @@
  * ═══════════════════════════════════════════════════════════════════ */
 
 @keyframes omni-fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes omni-fade-out {
-  from { opacity: 1; }
-  to   { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 @keyframes omni-scale-in {
-  from { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-4px); }
-  to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1) translateY(0);
+  }
 }
 @keyframes omni-scale-out {
-  from { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
-  to   { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-4px); }
+  from {
+    opacity: 1;
+    transform: translateX(-50%) scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.96) translateY(-4px);
+  }
 }
 
 @keyframes omni-spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .omni-spin {
@@ -123,8 +147,12 @@
   overflow: auto;
   padding: 0.25rem;
 }
-.omni-body::-webkit-scrollbar { width: 6px; }
-.omni-body::-webkit-scrollbar-track { background: transparent; }
+.omni-body::-webkit-scrollbar {
+  width: 6px;
+}
+.omni-body::-webkit-scrollbar-track {
+  background: transparent;
+}
 .omni-body::-webkit-scrollbar-thumb {
   background: var(--color-fd-muted, #262626);
   border-radius: 3px;
@@ -141,7 +169,9 @@
 }
 
 /* Groups */
-.omni-group { padding: 0.25rem 0; }
+.omni-group {
+  padding: 0.25rem 0;
+}
 .omni-group-label {
   padding: 0.25rem 0.75rem;
   font-size: 10px;
@@ -150,7 +180,10 @@
   color: var(--color-fd-muted-foreground, #a3a3a3);
   font-weight: 500;
 }
-.omni-group-items { display: flex; flex-direction: column; }
+.omni-group-items {
+  display: flex;
+  flex-direction: column;
+}
 
 /* Items */
 .omni-item {
@@ -223,7 +256,9 @@
   border-radius: 0.25rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
   flex-shrink: 0;
-  transition: color 100ms, background 100ms;
+  transition:
+    color 100ms,
+    background 100ms;
   text-decoration: none;
 }
 .omni-item-ext:hover {
@@ -238,7 +273,9 @@
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 @media (min-width: 640px) {
-  .omni-item-shortcuts { display: flex; }
+  .omni-item-shortcuts {
+    display: flex;
+  }
 }
 .omni-kbd-sm {
   border-radius: 0.25rem;
@@ -255,7 +292,9 @@
   transition: opacity 120ms;
   flex-shrink: 0;
 }
-.omni-item:hover .omni-item-chevron { opacity: 1; }
+.omni-item:hover .omni-item-chevron {
+  opacity: 1;
+}
 
 /* Highlight */
 .omni-highlight {
@@ -314,5 +353,7 @@
   display: none;
 }
 @media (min-width: 640px) {
-  .omni-footer-hint-desktop { display: flex; }
+  .omni-footer-hint-desktop {
+    display: flex;
+  }
 }

package/styles/pixel-border.css

@@ -58,10 +58,7 @@
 html {
   scroll-behavior: auto;
   scroll-padding-top: calc(
-    var(--fd-nav-height, 56px) +
-    var(--fd-banner-height, 0px) +
-    var(--fd-tocnav-height, 0px) +
-    24px
+    var(--fd-nav-height, 56px) + var(--fd-banner-height, 0px) + var(--fd-tocnav-height, 0px) + 24px
   );
 }
 
@@ -80,18 +77,22 @@ html:not([data-anchor-scrolling]) {
   width: 12px;
   height: 12px;
 }
+
 ::-webkit-scrollbar-track {
   background: var(--scrollbar-track);
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb);
   border-radius: 9999px;
   border: 3px solid transparent;
   background-clip: content-box;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover);
 }
+
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
@@ -412,16 +413,19 @@ figure.shiki > div:first-child {
   font-size: 0.75rem;
   letter-spacing: 0.01em;
 }
+
 .fd-breadcrumb-link {
   color: inherit;
   text-decoration: none;
   text-transform: uppercase;
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
 }
+
 .fd-breadcrumb-current {
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
   text-transform: uppercase;
 }
+
 /* ─── Page Actions (pixel-border overrides) ───────────────────────── */
 
 .fd-page-action-btn {
@@ -661,15 +665,17 @@ figure.shiki > div:first-child {
 .omni-content {
   border-radius: 0 !important;
   border: 2px solid var(--color-fd-border, hsl(0 0% 15%));
-  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%)),
-              0 0 0 1px rgba(255, 255, 255, 0.02);
+  box-shadow:
+    3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)),
+    0 0 0 1px rgba(255, 255, 255, 0.02);
 }
 
 .omni-item {
   border-radius: 0 !important;
 }
 
-.omni-kbd, .omni-kbd-sm {
+.omni-kbd,
+.omni-kbd-sm {
   border-radius: 0 !important;
   border: 1px solid var(--color-fd-border, hsl(0 0% 15%));
 }

package/styles/shiny.css

@@ -63,7 +63,9 @@
 
 .fd-page-action-menu {
   border-radius: 0.75rem;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 8px 30px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.04);
 }
 
 .fd-page-action-menu-item {
@@ -74,7 +76,9 @@
 
 .fd-ai-dialog {
   border-radius: 16px;
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.08),
+    0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .fd-ai-bubble-user {
@@ -97,13 +101,17 @@
   border-radius: 6px;
   background: hsl(240, 6%, 15%);
   color: #fff;
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
+    0 1px 3px rgba(0, 0, 0, 0.2);
   border: none;
 }
 
 .fd-ai-floating-btn:hover {
   background: hsl(240, 6%, 20%);
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.25);
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+    0 2px 6px rgba(0, 0, 0, 0.25);
 }
 
 :root .fd-ai-floating-btn {
@@ -194,8 +202,13 @@
   padding: 1.25rem;
   font-size: 0.875rem;
   color: var(--color-fd-card-foreground);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
-  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.04),
+    0 1px 2px -1px rgb(0 0 0 / 0.04);
+  transition:
+    background-color 150ms,
+    border-color 150ms,
+    box-shadow 150ms;
 }
 
 .fd-card:hover {
@@ -350,7 +363,9 @@ figure.shiki {
   border-radius: 0;
   color: var(--color-fd-muted-foreground);
   border-bottom: 2px solid transparent;
-  transition: color 150ms, border-color 150ms;
+  transition:
+    color 150ms,
+    border-color 150ms;
 }
 
 [role="tab"][aria-selected="true"],
@@ -430,7 +445,9 @@ details > :not(summary) {
   border-radius: 0.875rem;
   border: 1px solid var(--color-fd-border);
   background: var(--color-fd-popover);
-  box-shadow: 0 24px 80px -12px rgba(0, 0, 0, 0.12), 0 8px 30px rgba(0, 0, 0, 0.08);
+  box-shadow:
+    0 24px 80px -12px rgba(0, 0, 0, 0.12),
+    0 8px 30px rgba(0, 0, 0, 0.08);
 }
 
 .omni-item {