@farming-labs/theme 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -452,54 +452,58 @@ function createDocsLayout(config) {
452
452
  collapsible: sidebarProps.collapsible !== false,
453
453
  flat: !!sidebarFlat
454
454
  });
455
- return /* @__PURE__ */ jsxs(DocsLayout, {
456
- tree,
457
- nav: {
458
- title: navTitle,
459
- url: navUrl
460
- },
461
- themeSwitch,
462
- sidebar: finalSidebarProps,
463
- ...aiMode === "sidebar-icon" && aiEnabled ? { searchToggle: { components: { lg: /* @__PURE__ */ jsx(SidebarSearchWithAI, {}) } } } : {},
464
- children: [
465
- /* @__PURE__ */ jsx(ColorStyle, { colors }),
466
- /* @__PURE__ */ jsx(TypographyStyle, { typography }),
467
- /* @__PURE__ */ jsx(LayoutStyle, { layout: layoutDimensions }),
468
- forcedTheme && /* @__PURE__ */ jsx(ForcedThemeScript, { theme: forcedTheme }),
469
- !staticExport && /* @__PURE__ */ jsx(DocsCommandSearch, {}),
470
- aiEnabled && /* @__PURE__ */ jsx(DocsAIFeatures, {
471
- mode: aiMode,
472
- position: aiPosition,
473
- floatingStyle: aiFloatingStyle,
474
- triggerComponentHtml: aiTriggerComponentHtml,
475
- suggestedQuestions: aiSuggestedQuestions,
476
- aiLabel,
477
- loaderVariant: aiLoaderVariant,
478
- loadingComponentHtml: aiLoadingComponentHtml,
479
- models: aiModels,
480
- defaultModelId: aiDefaultModelId
481
- }),
482
- /* @__PURE__ */ jsx(DocsPageClient, {
483
- tocEnabled,
484
- tocStyle,
485
- breadcrumbEnabled,
486
- entry: config.entry,
487
- copyMarkdown: copyMarkdownEnabled,
488
- openDocs: openDocsEnabled,
489
- openDocsProviders,
490
- pageActionsPosition,
491
- pageActionsAlignment,
492
- githubUrl,
493
- githubBranch,
494
- githubDirectory,
495
- lastModifiedMap,
496
- lastUpdatedEnabled,
497
- lastUpdatedPosition,
498
- llmsTxtEnabled,
499
- descriptionMap,
500
- children
501
- })
502
- ]
455
+ return /* @__PURE__ */ jsx("div", {
456
+ id: "nd-docs-layout",
457
+ style: { display: "contents" },
458
+ children: /* @__PURE__ */ jsxs(DocsLayout, {
459
+ tree,
460
+ nav: {
461
+ title: navTitle,
462
+ url: navUrl
463
+ },
464
+ themeSwitch,
465
+ sidebar: finalSidebarProps,
466
+ ...aiMode === "sidebar-icon" && aiEnabled ? { searchToggle: { components: { lg: /* @__PURE__ */ jsx(SidebarSearchWithAI, {}) } } } : {},
467
+ children: [
468
+ /* @__PURE__ */ jsx(ColorStyle, { colors }),
469
+ /* @__PURE__ */ jsx(TypographyStyle, { typography }),
470
+ /* @__PURE__ */ jsx(LayoutStyle, { layout: layoutDimensions }),
471
+ forcedTheme && /* @__PURE__ */ jsx(ForcedThemeScript, { theme: forcedTheme }),
472
+ !staticExport && /* @__PURE__ */ jsx(DocsCommandSearch, {}),
473
+ aiEnabled && /* @__PURE__ */ jsx(DocsAIFeatures, {
474
+ mode: aiMode,
475
+ position: aiPosition,
476
+ floatingStyle: aiFloatingStyle,
477
+ triggerComponentHtml: aiTriggerComponentHtml,
478
+ suggestedQuestions: aiSuggestedQuestions,
479
+ aiLabel,
480
+ loaderVariant: aiLoaderVariant,
481
+ loadingComponentHtml: aiLoadingComponentHtml,
482
+ models: aiModels,
483
+ defaultModelId: aiDefaultModelId
484
+ }),
485
+ /* @__PURE__ */ jsx(DocsPageClient, {
486
+ tocEnabled,
487
+ tocStyle,
488
+ breadcrumbEnabled,
489
+ entry: config.entry,
490
+ copyMarkdown: copyMarkdownEnabled,
491
+ openDocs: openDocsEnabled,
492
+ openDocsProviders,
493
+ pageActionsPosition,
494
+ pageActionsAlignment,
495
+ githubUrl,
496
+ githubBranch,
497
+ githubDirectory,
498
+ lastModifiedMap,
499
+ lastUpdatedEnabled,
500
+ lastUpdatedPosition,
501
+ llmsTxtEnabled,
502
+ descriptionMap,
503
+ children
504
+ })
505
+ ]
506
+ })
503
507
  });
504
508
  };
505
509
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/theme",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
5
5
  "keywords": [
6
6
  "docs",
@@ -103,7 +103,7 @@
103
103
  "next": ">=14.0.0",
104
104
  "tsdown": "^0.20.3",
105
105
  "typescript": "^5.9.3",
106
- "@farming-labs/docs": "0.0.8"
106
+ "@farming-labs/docs": "0.0.9"
107
107
  },
108
108
  "peerDependencies": {
109
109
  "@farming-labs/docs": ">=0.0.1",
package/styles/base.css CHANGED
@@ -290,7 +290,9 @@ figure.shiki:has(figcaption) figcaption {
290
290
  border-color 0.15s;
291
291
  user-select: none;
292
292
  }
293
-
293
+ .fd-ai-fm-msg-content .fd-ai-code-block pre {
294
+ padding:10px !important;
295
+ }
294
296
  .fd-page-action-btn:hover {
295
297
  color: var(--color-fd-accent-foreground);
296
298
  background: var(--color-fd-accent);
@@ -122,6 +122,124 @@
122
122
  --color-fd-muted-foreground: hsl(0, 0%, 72%);
123
123
  }
124
124
 
125
+ /* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ─────
126
+ * Use !important where base.css would otherwise win (e.g. background). */
127
+ .fd-ai-model-dropdown-menu {
128
+ box-shadow: none !important;
129
+ }
130
+ .fd-ai-model-dropdown-item {
131
+ padding: 6px 10px !important;
132
+ border: none !important;
133
+ border-radius: var(--radius, 8px) !important;
134
+ }
135
+ .fd-sidebar-search-ai-row {
136
+ display: flex !important;
137
+ gap: 10px !important;
138
+ align-items: stretch !important;
139
+ width: 100% !important;
140
+ margin-bottom: 2px;
141
+ }
142
+
143
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
144
+ flex: 1 !important;
145
+ min-width: 0 !important;
146
+ display: flex !important;
147
+ align-items: center !important;
148
+ gap: 8px !important;
149
+ padding: 6px 12px !important;
150
+ font-size: 0.875rem !important;
151
+ color: var(--color-fd-muted-foreground) !important;
152
+ background: transparent !important;
153
+ border: 1px solid var(--color-fd-border) !important;
154
+ border-radius: 8px !important;
155
+ cursor: pointer;
156
+ transition: background-color 150ms, border-color 150ms, color 150ms;
157
+ }
158
+
159
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
160
+ background: var(--color-fd-accent) !important;
161
+ color: var(--color-fd-foreground) !important;
162
+ }
163
+
164
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
165
+ flex-shrink: 0 !important;
166
+ width: 16px !important;
167
+ height: 16px !important;
168
+ }
169
+
170
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
171
+ display: flex !important;
172
+ gap: 2px !important;
173
+ margin-left: auto !important;
174
+ font-size: 0.75rem !important;
175
+ opacity: 0.8;
176
+ }
177
+
178
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
179
+ font-family: inherit !important;
180
+ font-size: 0.7rem !important;
181
+ padding: 2px 5px !important;
182
+ border: 1px solid var(--color-fd-border) !important;
183
+ border-radius: 4px !important;
184
+ background: var(--color-fd-muted) !important;
185
+ }
186
+
187
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
188
+ display: inline-flex !important;
189
+ align-items: center !important;
190
+ justify-content: center !important;
191
+ width: 38px !important;
192
+ min-width: 38px !important;
193
+ flex-shrink: 0 !important;
194
+ border-radius: 8px !important;
195
+ border: 1px solid var(--color-fd-border) !important;
196
+ background: transparent !important;
197
+ color: var(--color-fd-muted-foreground) !important;
198
+ cursor: pointer;
199
+ transition: background-color 150ms, color 150ms, border-color 150ms;
200
+ }
201
+
202
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
203
+ background: var(--color-fd-accent) !important;
204
+ color: var(--color-fd-primary) !important;
205
+ border-color: var(--color-fd-primary) !important;
206
+ }
207
+
208
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
209
+ width: 16px !important;
210
+ height: 16px !important;
211
+ }
212
+
213
+ /* Dark mode: .dark can be on html or body; row may be inside or outside .fd-sidebar */
214
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
215
+ background: hsl(0 0% 18%) !important;
216
+ border-color: hsl(0 0% 28%) !important;
217
+ color: hsl(0 0% 72%) !important;
218
+ }
219
+
220
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
221
+ background: hsl(0 0% 24%) !important;
222
+ color: hsl(0 0% 95%) !important;
223
+ }
224
+
225
+ .dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
226
+ background: hsl(0 0% 22%) !important;
227
+ border-color: hsl(0 0% 28%) !important;
228
+ color: hsl(0 0% 72%) !important;
229
+ }
230
+
231
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
232
+ background: hsl(0 0% 18%) !important;
233
+ border-color: hsl(0 0% 28%) !important;
234
+ color: hsl(0 0% 72%) !important;
235
+ }
236
+
237
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
238
+ background: hsl(0 0% 24%) !important;
239
+ color: hsl(45 100% 60%) !important;
240
+ border-color: hsl(45 100% 60%) !important;
241
+ }
242
+
125
243
  /* ─── Cards (fumadocs style) ────────────────────────────────────────── */
126
244
 
127
245
  .fd-card {
@@ -92,6 +92,127 @@
92
92
  border-radius: 4px;
93
93
  }
94
94
 
95
+ /* ─── AI model dropdown (default) ────────────────────────────────── */
96
+
97
+ .fd-ai-model-dropdown-menu {
98
+ box-shadow: none !important;
99
+ }
100
+
101
+ .fd-ai-model-dropdown-item {
102
+ padding: 6px 10px !important;
103
+ border: none !important;
104
+ border-radius: var(--radius, 8px) !important;
105
+ }
106
+
107
+ /* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
108
+
109
+ .fd-sidebar-search-ai-row {
110
+ display: flex !important;
111
+ gap: 10px !important;
112
+ align-items: stretch !important;
113
+ width: 100% !important;
114
+ margin-bottom: 2px;
115
+ }
116
+
117
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
118
+ flex: 1 !important;
119
+ min-width: 0 !important;
120
+ display: flex !important;
121
+ align-items: center !important;
122
+ gap: 8px !important;
123
+ padding: 8px 12px !important;
124
+ font-size: 0.875rem !important;
125
+ color: var(--color-fd-muted-foreground) !important;
126
+ background: transparent !important;
127
+ border: 1px solid var(--color-fd-border) !important;
128
+ border-radius: 8px !important;
129
+ cursor: pointer;
130
+ transition: background-color 150ms, border-color 150ms, color 150ms;
131
+ }
132
+
133
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
134
+ background: var(--color-fd-accent) !important;
135
+ color: var(--color-fd-foreground) !important;
136
+ }
137
+
138
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
139
+ flex-shrink: 0 !important;
140
+ width: 16px !important;
141
+ height: 16px !important;
142
+ }
143
+
144
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
145
+ display: flex !important;
146
+ gap: 2px !important;
147
+ margin-left: auto !important;
148
+ font-size: 0.75rem !important;
149
+ opacity: 0.8;
150
+ }
151
+
152
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
153
+ font-family: inherit !important;
154
+ font-size: 0.7rem !important;
155
+ padding: 2px 5px !important;
156
+ border: 1px solid var(--color-fd-border) !important;
157
+ border-radius: 4px !important;
158
+ background: var(--color-fd-muted) !important;
159
+ }
160
+
161
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
162
+ display: inline-flex !important;
163
+ align-items: center !important;
164
+ justify-content: center !important;
165
+ width: 38px !important;
166
+ min-width: 38px !important;
167
+ flex-shrink: 0 !important;
168
+ border-radius: 8px !important;
169
+ border: 1px solid var(--color-fd-border) !important;
170
+ background: transparent !important;
171
+ color: var(--color-fd-muted-foreground) !important;
172
+ cursor: pointer;
173
+ transition: background-color 150ms, color 150ms, border-color 150ms;
174
+ }
175
+
176
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
177
+ background: var(--color-fd-accent) !important;
178
+ color: var(--color-fd-primary) !important;
179
+ border-color: var(--color-fd-primary) !important;
180
+ }
181
+
182
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
183
+ width: 16px !important;
184
+ height: 16px !important;
185
+ }
186
+
187
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
188
+ background: hsl(0 0% 18%) !important;
189
+ border-color: hsl(0 0% 28%) !important;
190
+ color: hsl(0 0% 72%) !important;
191
+ }
192
+
193
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
194
+ background: hsl(0 0% 24%) !important;
195
+ color: hsl(0 0% 95%) !important;
196
+ }
197
+
198
+ .dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
199
+ background: hsl(0 0% 22%) !important;
200
+ border-color: hsl(0 0% 28%) !important;
201
+ color: hsl(0 0% 72%) !important;
202
+ }
203
+
204
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
205
+ background: hsl(0 0% 18%) !important;
206
+ border-color: hsl(0 0% 28%) !important;
207
+ color: hsl(0 0% 72%) !important;
208
+ }
209
+
210
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
211
+ background: hsl(0 0% 24%) !important;
212
+ color: var(--color-fd-primary) !important;
213
+ border-color: var(--color-fd-primary) !important;
214
+ }
215
+
95
216
  /* ─── Omni Command Palette (default theme) ──────────────────────── */
96
217
 
97
218
  .omni-content {
@@ -139,14 +139,19 @@ code:not(pre code) {
139
139
  * ═══════════════════════════════════════════════════════════════════ */
140
140
 
141
141
  /* ─── Wider content area on desktop ──────────────────────────────── */
142
- /* :root {
143
- --fd-layout-width: 1400px;
144
- } */
145
142
 
146
- /* ─── Docs grid: pin sidebar left, TOC right, content fills middle ── */
143
+ @media (min-width: 1024px) {
144
+ :root {
145
+ --fd-layout-width: 1400px;
146
+ }
147
+ }
148
+
149
+ /* ─── Docs grid: sidebar | content | TOC — with gap and constrained TOC ── */
147
150
  @media (min-width: 768px) {
148
- #nd-docs-layout {
149
- grid-template-columns: var(--fd-sidebar-col, 0px) 1fr min-content !important;
151
+ #nd-docs-layout,
152
+ [style*="fd-sidebar-col"] {
153
+ grid-template-columns: var(--fd-sidebar-col, 0px) minmax(0, 1fr) min(var(--fd-toc-width, 260px), 260px) !important;
154
+ gap: 24px !important;
150
155
  }
151
156
  }
152
157
 
package/styles/shiny.css CHANGED
@@ -163,6 +163,127 @@
163
163
  border-radius: 6px;
164
164
  }
165
165
 
166
+ /* ─── AI model dropdown (shiny) ──────────────────────────────────────── */
167
+
168
+ .fd-ai-model-dropdown-menu {
169
+ box-shadow: none !important;
170
+ }
171
+
172
+ .fd-ai-model-dropdown-item {
173
+ padding: 6px 10px !important;
174
+ border: none !important;
175
+ border-radius: var(--radius, 8px) !important;
176
+ }
177
+
178
+ /* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
179
+
180
+ .fd-sidebar-search-ai-row {
181
+ display: flex !important;
182
+ gap: 10px !important;
183
+ align-items: stretch !important;
184
+ width: 100% !important;
185
+ margin-bottom: 2px;
186
+ }
187
+
188
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
189
+ flex: 1 !important;
190
+ min-width: 0 !important;
191
+ display: flex !important;
192
+ align-items: center !important;
193
+ gap: 8px !important;
194
+ padding: 8px 12px !important;
195
+ font-size: 0.875rem !important;
196
+ color: var(--color-fd-muted-foreground) !important;
197
+ background: transparent !important;
198
+ border: 1px solid var(--color-fd-border) !important;
199
+ border-radius: 8px !important;
200
+ cursor: pointer;
201
+ transition: background-color 150ms, border-color 150ms, color 150ms;
202
+ }
203
+
204
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
205
+ background: var(--color-fd-accent) !important;
206
+ color: var(--color-fd-foreground) !important;
207
+ }
208
+
209
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
210
+ flex-shrink: 0 !important;
211
+ width: 16px !important;
212
+ height: 16px !important;
213
+ }
214
+
215
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
216
+ display: flex !important;
217
+ gap: 2px !important;
218
+ margin-left: auto !important;
219
+ font-size: 0.75rem !important;
220
+ opacity: 0.8;
221
+ }
222
+
223
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
224
+ font-family: inherit !important;
225
+ font-size: 0.7rem !important;
226
+ padding: 2px 5px !important;
227
+ border: 1px solid var(--color-fd-border) !important;
228
+ border-radius: 4px !important;
229
+ background: var(--color-fd-muted) !important;
230
+ }
231
+
232
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
233
+ display: inline-flex !important;
234
+ align-items: center !important;
235
+ justify-content: center !important;
236
+ width: 38px !important;
237
+ min-width: 38px !important;
238
+ flex-shrink: 0 !important;
239
+ border-radius: 8px !important;
240
+ border: 1px solid var(--color-fd-border) !important;
241
+ background: transparent !important;
242
+ color: var(--color-fd-muted-foreground) !important;
243
+ cursor: pointer;
244
+ transition: background-color 150ms, color 150ms, border-color 150ms;
245
+ }
246
+
247
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
248
+ background: var(--color-fd-accent) !important;
249
+ color: var(--color-fd-primary) !important;
250
+ border-color: var(--color-fd-primary) !important;
251
+ }
252
+
253
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
254
+ width: 16px !important;
255
+ height: 16px !important;
256
+ }
257
+
258
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
259
+ background: var(--color-fd-secondary) !important;
260
+ border-color: var(--color-fd-border) !important;
261
+ color: var(--color-fd-muted-foreground) !important;
262
+ }
263
+
264
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
265
+ background: var(--color-fd-accent) !important;
266
+ color: var(--color-fd-foreground) !important;
267
+ }
268
+
269
+ .dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
270
+ background: var(--color-fd-muted) !important;
271
+ border-color: var(--color-fd-border) !important;
272
+ color: var(--color-fd-muted-foreground) !important;
273
+ }
274
+
275
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
276
+ background: var(--color-fd-secondary) !important;
277
+ border-color: var(--color-fd-border) !important;
278
+ color: var(--color-fd-muted-foreground) !important;
279
+ }
280
+
281
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
282
+ background: var(--color-fd-accent) !important;
283
+ color: var(--color-fd-primary) !important;
284
+ border-color: var(--color-fd-primary) !important;
285
+ }
286
+
166
287
  /* ─── Sidebar shiny overrides ────────────────────────────────────────── */
167
288
 
168
289
  :root .fd-sidebar {