@clarify-labs/renderer 0.1.0

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.
Files changed (50) hide show
  1. package/LICENSE +661 -0
  2. package/output/AppShell-C_bj6ZhV.js +1928 -0
  3. package/output/AppShell-C_bj6ZhV.js.map +1 -0
  4. package/output/AppShell-DBgUlirU.cjs +2127 -0
  5. package/output/AppShell-DBgUlirU.cjs.map +1 -0
  6. package/output/app/AppShell.d.ts +7 -0
  7. package/output/client.cjs +3 -0
  8. package/output/client.d.ts +1 -0
  9. package/output/client.js +2 -0
  10. package/output/components/BuiltWithClarify.d.ts +1 -0
  11. package/output/components/Code.d.ts +18 -0
  12. package/output/components/Feedback.d.ts +1 -0
  13. package/output/components/PageFooter.d.ts +1 -0
  14. package/output/components/SectionProvider.d.ts +25 -0
  15. package/output/components/SiteLogo.d.ts +6 -0
  16. package/output/components/ThemeProvider.d.ts +13 -0
  17. package/output/components/ThemeToggle.d.ts +1 -0
  18. package/output/components/index.d.ts +82 -0
  19. package/output/components/patterns.d.ts +9 -0
  20. package/output/context.d.ts +6 -0
  21. package/output/index.cjs +870 -0
  22. package/output/index.cjs.map +1 -0
  23. package/output/index.d.ts +11 -0
  24. package/output/index.js +850 -0
  25. package/output/index.js.map +1 -0
  26. package/output/mdx/components.d.ts +50 -0
  27. package/output/mdx/primitives.d.ts +42 -0
  28. package/output/openapi/index.d.ts +20 -0
  29. package/output/openapi/utils.d.ts +12 -0
  30. package/output/render-CLI-MnH_.cjs +60 -0
  31. package/output/render-CLI-MnH_.cjs.map +1 -0
  32. package/output/render-Ca4Is683.js +55 -0
  33. package/output/render-Ca4Is683.js.map +1 -0
  34. package/output/renderer.css +3986 -0
  35. package/output/runtime/render.d.ts +2 -0
  36. package/output/runtime/server.d.ts +7 -0
  37. package/output/server.cjs +34 -0
  38. package/output/server.cjs.map +1 -0
  39. package/output/server.d.ts +1 -0
  40. package/output/server.js +33 -0
  41. package/output/server.js.map +1 -0
  42. package/output/shell/ContentActions.d.ts +7 -0
  43. package/output/shell/Header.d.ts +8 -0
  44. package/output/shell/Navigation.d.ts +5 -0
  45. package/output/shell/Search.d.ts +10 -0
  46. package/output/shell/index.d.ts +5 -0
  47. package/output/shell/mobile.d.ts +15 -0
  48. package/output/types.d.ts +121 -0
  49. package/output/utils/remToPx.d.ts +1 -0
  50. package/package.json +71 -0
@@ -0,0 +1,1928 @@
1
+ import { AnimatePresence, motion, useInView, useIsPresent, useScroll, useTransform } from "framer-motion";
2
+ import { Children, Fragment, Suspense, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
3
+ import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
4
+ import { create, createStore, useStore } from "zustand";
5
+ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
6
+ import clsx from "clsx";
7
+ import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition, TransitionChild } from "@headlessui/react";
8
+ import * as LucideIcons from "lucide-react";
9
+ import { Check, ChevronDown, Copy, Link2 } from "lucide-react";
10
+ //#region source/utils/remToPx.ts
11
+ function remToPx(remValue) {
12
+ return remValue * (typeof window === "undefined" ? 16 : Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
13
+ }
14
+ //#endregion
15
+ //#region source/components/SectionProvider.tsx
16
+ function createSectionStore(sections) {
17
+ return createStore()((set) => ({
18
+ sections,
19
+ visibleSections: [],
20
+ setVisibleSections: (visibleSections) => set((state) => state.visibleSections.join() === visibleSections.join() ? {} : { visibleSections }),
21
+ registerHeading: ({ id, ref, offsetRem }) => set((state) => ({ sections: state.sections.map((section) => section.id === id ? {
22
+ ...section,
23
+ headingRef: ref,
24
+ offsetRem
25
+ } : section) }))
26
+ }));
27
+ }
28
+ function useVisibleSections(sectionStore) {
29
+ const setVisibleSections = useStore(sectionStore, (state) => state.setVisibleSections);
30
+ const sections = useStore(sectionStore, (state) => state.sections);
31
+ useEffect(() => {
32
+ function checkVisibleSections() {
33
+ const { innerHeight, scrollY } = window;
34
+ const newVisibleSections = [];
35
+ for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex += 1) {
36
+ const { id, headingRef, offsetRem = 0 } = sections[sectionIndex];
37
+ if (!headingRef?.current) continue;
38
+ const offset = remToPx(offsetRem);
39
+ const top = headingRef.current.getBoundingClientRect().top + scrollY;
40
+ if (sectionIndex === 0 && top - offset > scrollY) newVisibleSections.push("_top");
41
+ const nextSection = sections[sectionIndex + 1];
42
+ const bottom = (nextSection?.headingRef?.current?.getBoundingClientRect().top ?? Infinity) + scrollY - remToPx(nextSection?.offsetRem ?? 0);
43
+ if (top > scrollY && top < scrollY + innerHeight || bottom > scrollY && bottom < scrollY + innerHeight || top <= scrollY && bottom >= scrollY + innerHeight) newVisibleSections.push(id);
44
+ }
45
+ setVisibleSections(newVisibleSections);
46
+ }
47
+ const raf = window.requestAnimationFrame(() => checkVisibleSections());
48
+ window.addEventListener("scroll", checkVisibleSections, { passive: true });
49
+ window.addEventListener("resize", checkVisibleSections);
50
+ return () => {
51
+ window.cancelAnimationFrame(raf);
52
+ window.removeEventListener("scroll", checkVisibleSections);
53
+ window.removeEventListener("resize", checkVisibleSections);
54
+ };
55
+ }, [setVisibleSections, sections]);
56
+ }
57
+ var SectionStoreContext = createContext(null);
58
+ var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
59
+ function SectionProvider(arg0) {
60
+ const { sections, children } = arg0;
61
+ const [sectionStore] = useState(() => createSectionStore(sections));
62
+ useVisibleSections(sectionStore);
63
+ useIsomorphicLayoutEffect(() => {
64
+ sectionStore.setState({ sections });
65
+ }, [sectionStore, sections]);
66
+ return /* @__PURE__ */ jsx(SectionStoreContext.Provider, {
67
+ value: sectionStore,
68
+ children
69
+ });
70
+ }
71
+ function useSectionStore(selector) {
72
+ const store = useContext(SectionStoreContext);
73
+ if (!store) throw new Error("[clarify] useSectionStore must be used within SectionProvider");
74
+ return useStore(store, selector);
75
+ }
76
+ //#endregion
77
+ //#region source/components/SiteLogo.tsx
78
+ function SiteLogo(arg0) {
79
+ const { logo, className } = arg0;
80
+ if (!logo) return null;
81
+ if (typeof logo === "string") return /* @__PURE__ */ jsx("img", {
82
+ src: logo,
83
+ alt: "",
84
+ className: clsx("clarify-logo", className)
85
+ });
86
+ const lightLogo = logo.light ?? logo.dark;
87
+ const darkLogo = logo.dark ?? logo.light;
88
+ if (!lightLogo || !darkLogo) return null;
89
+ if (lightLogo === darkLogo) return /* @__PURE__ */ jsx("img", {
90
+ src: lightLogo,
91
+ alt: "",
92
+ className: clsx("clarify-logo", className)
93
+ });
94
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
95
+ src: lightLogo,
96
+ alt: "",
97
+ className: clsx("clarify-logo clarify-logo-light", className, "dark:hidden")
98
+ }), /* @__PURE__ */ jsx("img", {
99
+ src: darkLogo,
100
+ alt: "",
101
+ className: clsx("clarify-logo clarify-logo-dark", className, "hidden dark:block")
102
+ })] });
103
+ }
104
+ //#endregion
105
+ //#region source/shell/ContentActions.tsx
106
+ function resolveRawContentUrl(rawContentUrl, routePrefix = "/") {
107
+ if (!routePrefix || routePrefix === "/") return rawContentUrl;
108
+ return `/${routePrefix.replace(/^\/+|\/+$/g, "")}${rawContentUrl}`;
109
+ }
110
+ function getAbsoluteUrl(path) {
111
+ if (typeof window === "undefined") return path;
112
+ return new URL(path, window.location.href).href;
113
+ }
114
+ async function copyText(text) {
115
+ await navigator.clipboard.writeText(text);
116
+ }
117
+ function ContentActions(arg0) {
118
+ const { route, routePrefix } = arg0;
119
+ const [copied, setCopied] = useState("idle");
120
+ if (!route?.rawContentUrl) return null;
121
+ const rawContentUrl = resolveRawContentUrl(route.rawContentUrl, routePrefix);
122
+ const isOpenApi = route.kind === "openapi";
123
+ const contentLabel = isOpenApi ? "复制 OpenAPI 内容" : "复制 Markdown 内容";
124
+ const linkLabel = isOpenApi ? "复制 OpenAPI 链接" : "复制 Markdown 链接";
125
+ function markCopied(state) {
126
+ setCopied(state);
127
+ window.setTimeout(() => setCopied("idle"), 1600);
128
+ }
129
+ async function handleCopyContent() {
130
+ await copyText(await (await fetch(rawContentUrl)).text());
131
+ markCopied("content");
132
+ }
133
+ async function handleCopyLink() {
134
+ await copyText(getAbsoluteUrl(rawContentUrl));
135
+ markCopied("link");
136
+ }
137
+ const actions = [{
138
+ key: "content",
139
+ label: contentLabel,
140
+ icon: Copy,
141
+ run: handleCopyContent
142
+ }, {
143
+ key: "link",
144
+ label: linkLabel,
145
+ icon: Link2,
146
+ run: handleCopyLink
147
+ }];
148
+ const primaryAction = actions[0];
149
+ return /* @__PURE__ */ jsx("div", {
150
+ className: "clarify-content-actions sticky top-16 z-20 flex justify-end py-4",
151
+ children: /* @__PURE__ */ jsxs(Menu, {
152
+ as: "div",
153
+ className: "clarify-content-actions-menu relative inline-flex text-xs font-medium",
154
+ children: [/* @__PURE__ */ jsxs("div", {
155
+ className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-zinc-900/10 bg-white/85 backdrop-blur dark:border-white/10 dark:bg-white/5",
156
+ children: [/* @__PURE__ */ jsxs("button", {
157
+ type: "button",
158
+ onClick: primaryAction.run,
159
+ className: "clarify-content-actions-primary inline-flex h-8 items-center gap-1.5 px-3 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white",
160
+ children: [copied === primaryAction.key ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(primaryAction.icon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? "已复制" : "复制页面"]
161
+ }), /* @__PURE__ */ jsx(MenuButton, {
162
+ className: "clarify-content-actions-trigger inline-flex h-8 w-8 items-center justify-center border-l border-zinc-900/10 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white",
163
+ "aria-label": "选择复制选项",
164
+ children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
165
+ })]
166
+ }), /* @__PURE__ */ jsx(MenuItems, {
167
+ anchor: "bottom end",
168
+ className: "clarify-content-actions-list z-30 mt-2 w-52 origin-top-right rounded-2xl border border-zinc-900/10 bg-white p-1 text-xs shadow-md transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
169
+ children: actions.map((action) => {
170
+ const Icon = copied === action.key ? Check : action.icon;
171
+ return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
172
+ type: "button",
173
+ onClick: action.run,
174
+ className: "clarify-content-actions-item flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-zinc-600 transition data-focus:bg-zinc-100 data-focus:text-zinc-950 dark:text-zinc-300 dark:data-focus:bg-white/10 dark:data-focus:text-white",
175
+ children: [/* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: copied === action.key ? "已复制" : action.label })]
176
+ }) }, action.key);
177
+ })
178
+ })]
179
+ })
180
+ });
181
+ }
182
+ //#endregion
183
+ //#region source/components/BuiltWithClarify.tsx
184
+ function ClarifyMark(props) {
185
+ return /* @__PURE__ */ jsxs("svg", {
186
+ viewBox: "0 0 279 200",
187
+ "aria-hidden": "true",
188
+ ...props,
189
+ children: [
190
+ /* @__PURE__ */ jsx("path", {
191
+ d: "M44.867217 0.00543761C130.715579 1.00591567 200 70.9091172 200 156.994562L199.986321 155.127494C199.384888 180.009127 179.026368 199.994562 154 199.994562H46C20.5949015 199.994562 0 179.399661 0 153.994562V45.9945624C0 21.0975659 19.7793434 0.820282524 44.4815926 0.0191499894Z",
192
+ fill: "#00D492"
193
+ }),
194
+ /* @__PURE__ */ jsx("path", {
195
+ d: "M123.867217 0.00543761C209.715579 1.00591567 279 70.9091172 279 156.994562L278.986321 155.127494C278.384888 180.009127 258.026368 199.994562 233 199.994562H125C99.5949015 199.994562 79 179.399661 79 153.994562V45.9945624C79 21.0975659 98.7793434 0.820282524 123.481593 0.0191499894Z",
196
+ fill: "#00F6C9",
197
+ fillOpacity: "0.6",
198
+ transform: "rotate(-90 179 100)"
199
+ }),
200
+ /* @__PURE__ */ jsx("path", {
201
+ d: "M199.979267 154.416906L199.984438 155.157125L199.962366 155.872459C198.977251 180.406837 178.776104 199.994562 154 199.994562L124.372438 199.994125L124.249053 199.994081C99.6939678 199.603921 79.8122712 179.973634 79.01915 155.518407L79.0054376 155.132783C79.5830823 105.566626 103.129768 61.5221348 139.498462 33.1463428C175.69419 61.3871018 199.186123 105.143863 199.979267 154.416906Z",
202
+ fill: "#00F692"
203
+ })
204
+ ]
205
+ });
206
+ }
207
+ function BuiltWithClarify() {
208
+ return /* @__PURE__ */ jsxs("a", {
209
+ href: "https://clarify.pub",
210
+ target: "_blank",
211
+ rel: "noreferrer",
212
+ "aria-label": "Built with Clarify",
213
+ className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium text-zinc-500 no-underline transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-white/5 dark:hover:text-white",
214
+ children: [
215
+ /* @__PURE__ */ jsx("span", { children: "Built with" }),
216
+ /* @__PURE__ */ jsx(ClarifyMark, { className: "clarify-built-with-logo h-3.5 w-5 flex-none" }),
217
+ /* @__PURE__ */ jsx("span", {
218
+ className: "font-semibold text-zinc-700 dark:text-zinc-300",
219
+ children: "Clarify"
220
+ })
221
+ ]
222
+ });
223
+ }
224
+ //#endregion
225
+ //#region source/components/Code.tsx
226
+ var languageNames = {
227
+ js: "JavaScript",
228
+ ts: "TypeScript",
229
+ jsx: "React JSX",
230
+ tsx: "React TSX",
231
+ javascript: "JavaScript",
232
+ typescript: "TypeScript",
233
+ php: "PHP",
234
+ python: "Python",
235
+ ruby: "Ruby",
236
+ go: "Go",
237
+ bash: "Shell",
238
+ sh: "Shell",
239
+ shell: "Shell",
240
+ json: "JSON"
241
+ };
242
+ function getPanelTitle(arg0) {
243
+ const { title, language } = arg0;
244
+ if (title) return title;
245
+ if (language && language in languageNames) return languageNames[language];
246
+ return "Code";
247
+ }
248
+ function getNodeText(node) {
249
+ if (typeof node === "string" || typeof node === "number") return String(node);
250
+ if (Array.isArray(node)) return node.map(getNodeText).join("");
251
+ if (isValidElement(node)) return getNodeText(node.props.children);
252
+ return "";
253
+ }
254
+ function ClipboardIcon(props) {
255
+ return /* @__PURE__ */ jsxs("svg", {
256
+ viewBox: "0 0 20 20",
257
+ "aria-hidden": "true",
258
+ ...props,
259
+ children: [/* @__PURE__ */ jsx("path", {
260
+ strokeWidth: "0",
261
+ d: "M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
262
+ }), /* @__PURE__ */ jsx("path", {
263
+ fill: "none",
264
+ strokeLinejoin: "round",
265
+ d: "M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
266
+ })]
267
+ });
268
+ }
269
+ function CopyButton(arg0) {
270
+ const { code } = arg0;
271
+ const [copyCount, setCopyCount] = useState(0);
272
+ const copied = copyCount > 0;
273
+ useEffect(() => {
274
+ if (copyCount === 0) return void 0;
275
+ const timeout = window.setTimeout(() => setCopyCount(0), 1e3);
276
+ return () => window.clearTimeout(timeout);
277
+ }, [copyCount]);
278
+ if (!code) return null;
279
+ return /* @__PURE__ */ jsxs("button", {
280
+ type: "button",
281
+ className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
282
+ onClick: () => {
283
+ window.navigator.clipboard.writeText(code).then(() => {
284
+ setCopyCount((count) => count + 1);
285
+ });
286
+ },
287
+ children: [/* @__PURE__ */ jsxs("span", {
288
+ "aria-hidden": copied,
289
+ className: clsx("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
290
+ children: [/* @__PURE__ */ jsx(ClipboardIcon, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), "Copy"]
291
+ }), /* @__PURE__ */ jsx("span", {
292
+ "aria-hidden": !copied,
293
+ className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300", !copied && "translate-y-1.5 opacity-0"),
294
+ children: "Copied!"
295
+ })]
296
+ });
297
+ }
298
+ function CodePanelHeader(arg0) {
299
+ const { tag, label } = arg0;
300
+ if (!tag && !label) return null;
301
+ return /* @__PURE__ */ jsxs("div", {
302
+ className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
303
+ children: [
304
+ tag ? /* @__PURE__ */ jsx("span", {
305
+ className: "font-mono text-[0.625rem]/6 font-semibold text-emerald-400",
306
+ children: tag
307
+ }) : null,
308
+ tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
309
+ label ? /* @__PURE__ */ jsx("span", {
310
+ className: "font-mono text-xs text-zinc-400",
311
+ children: label
312
+ }) : null
313
+ ]
314
+ });
315
+ }
316
+ function CodePanel(arg0) {
317
+ const { children } = arg0;
318
+ let { tag, label, code } = arg0;
319
+ const child = Children.only(children);
320
+ if (isValidElement(child)) {
321
+ const props = child.props;
322
+ tag = props.tag ?? tag;
323
+ label = props.label ?? label;
324
+ code = props.code ?? code ?? getNodeText(props.children);
325
+ }
326
+ const copyText = code ?? getNodeText(children);
327
+ return /* @__PURE__ */ jsxs("div", {
328
+ className: "clarify-code-panel group dark:bg-white/2.5",
329
+ children: [/* @__PURE__ */ jsx(CodePanelHeader, {
330
+ tag,
331
+ label
332
+ }), /* @__PURE__ */ jsxs("div", {
333
+ className: "relative",
334
+ children: [/* @__PURE__ */ jsx("pre", {
335
+ className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
336
+ children
337
+ }), /* @__PURE__ */ jsx(CopyButton, { code: copyText })]
338
+ })]
339
+ });
340
+ }
341
+ function CodeGroupHeader(arg0) {
342
+ const { title, children, selectedIndex } = arg0;
343
+ const hasTabs = Children.count(children) > 1;
344
+ if (!title && !hasTabs) return null;
345
+ return /* @__PURE__ */ jsxs("div", {
346
+ className: "clarify-code-group-header flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
347
+ children: [title ? /* @__PURE__ */ jsx("h3", {
348
+ className: "mr-auto pt-3 text-xs font-semibold text-white",
349
+ children: title
350
+ }) : null, hasTabs ? /* @__PURE__ */ jsx(TabList, {
351
+ className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
352
+ children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx(Tab, {
353
+ className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-emerald-500 text-emerald-400" : "border-transparent text-zinc-400 hover:text-zinc-300"),
354
+ children: getPanelTitle(isValidElement(child) ? child.props : {})
355
+ }))
356
+ }) : null]
357
+ });
358
+ }
359
+ function CodeGroupPanels(arg0) {
360
+ const { children, ...props } = arg0;
361
+ if (Children.count(children) > 1) return /* @__PURE__ */ jsx(TabPanels, { children: Children.map(children, (child) => /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(CodePanel, {
362
+ ...props,
363
+ children: child
364
+ }) })) });
365
+ return /* @__PURE__ */ jsx(CodePanel, {
366
+ ...props,
367
+ children
368
+ });
369
+ }
370
+ function usePreventLayoutShift() {
371
+ const positionRef = useRef(null);
372
+ const rafRef = useRef(void 0);
373
+ useEffect(() => {
374
+ return () => {
375
+ if (typeof rafRef.current !== "undefined") window.cancelAnimationFrame(rafRef.current);
376
+ };
377
+ }, []);
378
+ return {
379
+ positionRef,
380
+ preventLayoutShift(callback) {
381
+ if (!positionRef.current) return;
382
+ const initialTop = positionRef.current.getBoundingClientRect().top;
383
+ callback();
384
+ rafRef.current = window.requestAnimationFrame(() => {
385
+ const newTop = positionRef.current?.getBoundingClientRect().top ?? initialTop;
386
+ window.scrollBy(0, newTop - initialTop);
387
+ });
388
+ }
389
+ };
390
+ }
391
+ var usePreferredLanguageStore = create()((set) => ({
392
+ preferredLanguages: [],
393
+ addPreferredLanguage: (language) => set((state) => ({ preferredLanguages: [...state.preferredLanguages.filter((preferredLanguage) => preferredLanguage !== language), language] }))
394
+ }));
395
+ function useTabGroupProps(availableLanguages) {
396
+ const { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore();
397
+ const [selectedIndex, setSelectedIndex] = useState(0);
398
+ const activeLanguage = [...availableLanguages].sort((a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a))[0];
399
+ const languageIndex = availableLanguages.indexOf(activeLanguage);
400
+ const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex;
401
+ if (newSelectedIndex !== selectedIndex) setSelectedIndex(newSelectedIndex);
402
+ const { positionRef, preventLayoutShift } = usePreventLayoutShift();
403
+ return {
404
+ as: "div",
405
+ ref: positionRef,
406
+ selectedIndex,
407
+ onChange: (nextSelectedIndex) => {
408
+ preventLayoutShift(() => addPreferredLanguage(availableLanguages[nextSelectedIndex]));
409
+ }
410
+ };
411
+ }
412
+ var CodeGroupContext = createContext(false);
413
+ function CodeGroup(arg0) {
414
+ const { children, title, ...props } = arg0;
415
+ const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle(isValidElement(child) ? child.props : {})) ?? []);
416
+ const hasTabs = Children.count(children) > 1;
417
+ const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
418
+ const header = /* @__PURE__ */ jsx(CodeGroupHeader, {
419
+ title,
420
+ selectedIndex: tabGroupProps.selectedIndex,
421
+ children
422
+ });
423
+ const panels = /* @__PURE__ */ jsx(CodeGroupPanels, {
424
+ ...props,
425
+ children
426
+ });
427
+ return /* @__PURE__ */ jsx(CodeGroupContext.Provider, {
428
+ value: true,
429
+ children: hasTabs ? /* @__PURE__ */ jsx(TabGroup, {
430
+ ...tabGroupProps,
431
+ className: containerClassName,
432
+ children: /* @__PURE__ */ jsxs("div", {
433
+ className: "not-prose",
434
+ children: [header, panels]
435
+ })
436
+ }) : /* @__PURE__ */ jsx("div", {
437
+ className: containerClassName,
438
+ children: /* @__PURE__ */ jsxs("div", {
439
+ className: "not-prose",
440
+ children: [header, panels]
441
+ })
442
+ })
443
+ });
444
+ }
445
+ function Code(arg0) {
446
+ const { children, ...props } = arg0;
447
+ if (useContext(CodeGroupContext) && typeof children === "string") return /* @__PURE__ */ jsx("code", {
448
+ ...props,
449
+ dangerouslySetInnerHTML: { __html: children }
450
+ });
451
+ return /* @__PURE__ */ jsx("code", {
452
+ ...props,
453
+ children
454
+ });
455
+ }
456
+ function Pre(arg0) {
457
+ const { children, ...props } = arg0;
458
+ if (useContext(CodeGroupContext)) return children;
459
+ return /* @__PURE__ */ jsx(CodeGroup, {
460
+ ...props,
461
+ children
462
+ });
463
+ }
464
+ //#endregion
465
+ //#region source/components/Feedback.tsx
466
+ function CheckIcon$1(props) {
467
+ return /* @__PURE__ */ jsxs("svg", {
468
+ viewBox: "0 0 20 20",
469
+ "aria-hidden": "true",
470
+ ...props,
471
+ children: [/* @__PURE__ */ jsx("circle", {
472
+ cx: "10",
473
+ cy: "10",
474
+ r: "10",
475
+ strokeWidth: "0"
476
+ }), /* @__PURE__ */ jsx("path", {
477
+ fill: "none",
478
+ strokeLinecap: "round",
479
+ strokeLinejoin: "round",
480
+ strokeWidth: "1.5",
481
+ d: "m6.75 10.813 2.438 2.437c1.218-4.469 4.062-6.5 4.062-6.5"
482
+ })]
483
+ });
484
+ }
485
+ function FeedbackButton(props) {
486
+ return /* @__PURE__ */ jsx("button", {
487
+ type: "submit",
488
+ className: "clarify-feedback-button px-3 text-sm font-medium text-zinc-600 transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
489
+ ...props
490
+ });
491
+ }
492
+ var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
493
+ const { onSubmit, className, ...props } = arg0;
494
+ return /* @__PURE__ */ jsxs("form", {
495
+ ...props,
496
+ ref,
497
+ onSubmit,
498
+ className: clsx(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
499
+ children: [/* @__PURE__ */ jsx("p", {
500
+ className: "text-sm text-zinc-600 dark:text-zinc-400",
501
+ children: "Was this page helpful?"
502
+ }), /* @__PURE__ */ jsxs("div", {
503
+ className: "clarify-feedback-actions group grid h-8 grid-cols-[1fr_1px_1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10",
504
+ children: [
505
+ /* @__PURE__ */ jsx(FeedbackButton, {
506
+ "data-response": "yes",
507
+ children: "Yes"
508
+ }),
509
+ /* @__PURE__ */ jsx("div", { className: "bg-zinc-900/10 dark:bg-white/10" }),
510
+ /* @__PURE__ */ jsx(FeedbackButton, {
511
+ "data-response": "no",
512
+ children: "No"
513
+ })
514
+ ]
515
+ })]
516
+ });
517
+ });
518
+ var FeedbackThanks = forwardRef(function FeedbackThanks(arg0, ref) {
519
+ const { className, ...props } = arg0;
520
+ return /* @__PURE__ */ jsx("div", {
521
+ ...props,
522
+ ref,
523
+ className: clsx(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
524
+ children: /* @__PURE__ */ jsxs("div", {
525
+ className: "flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pr-3 pl-1.5 text-sm text-emerald-900 ring-1 ring-emerald-500/20 ring-inset dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30",
526
+ children: [/* @__PURE__ */ jsx(CheckIcon$1, { className: "h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" }), "Thanks for your feedback!"]
527
+ })
528
+ });
529
+ });
530
+ function Feedback() {
531
+ const [submitted, setSubmitted] = useState(false);
532
+ function onSubmit(event) {
533
+ event.preventDefault();
534
+ setSubmitted(true);
535
+ }
536
+ return /* @__PURE__ */ jsxs("div", {
537
+ className: "clarify-feedback relative h-8",
538
+ children: [/* @__PURE__ */ jsx(Transition, {
539
+ show: !submitted,
540
+ children: /* @__PURE__ */ jsx(FeedbackForm, {
541
+ className: "duration-300 data-closed:opacity-0 data-leave:pointer-events-none",
542
+ onSubmit
543
+ })
544
+ }), /* @__PURE__ */ jsx(Transition, {
545
+ show: submitted,
546
+ children: /* @__PURE__ */ jsx(FeedbackThanks, { className: "delay-150 duration-300 data-closed:opacity-0" })
547
+ })]
548
+ });
549
+ }
550
+ //#endregion
551
+ //#region source/components/patterns.tsx
552
+ function GridPattern(arg0) {
553
+ const { width, height, x, y, squares, ...props } = arg0;
554
+ const patternId = useId();
555
+ return /* @__PURE__ */ jsxs("svg", {
556
+ "aria-hidden": "true",
557
+ ...props,
558
+ children: [
559
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
560
+ id: patternId,
561
+ width,
562
+ height,
563
+ patternUnits: "userSpaceOnUse",
564
+ x,
565
+ y,
566
+ children: /* @__PURE__ */ jsx("path", {
567
+ d: `M.5 ${height}V.5H${width}`,
568
+ fill: "none"
569
+ })
570
+ }) }),
571
+ /* @__PURE__ */ jsx("rect", {
572
+ width: "100%",
573
+ height: "100%",
574
+ strokeWidth: 0,
575
+ fill: `url(#${patternId})`
576
+ }),
577
+ squares ? /* @__PURE__ */ jsx("svg", {
578
+ x,
579
+ y,
580
+ className: "overflow-visible",
581
+ children: squares.map(([squareX, squareY]) => /* @__PURE__ */ jsx("rect", {
582
+ width: width + 1,
583
+ height: height + 1,
584
+ x: squareX * width,
585
+ y: squareY * height,
586
+ strokeWidth: "0"
587
+ }, `${squareX}-${squareY}`))
588
+ }) : null
589
+ ]
590
+ });
591
+ }
592
+ function HeroPattern() {
593
+ return /* @__PURE__ */ jsx("div", {
594
+ className: "absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden",
595
+ children: /* @__PURE__ */ jsxs("div", {
596
+ className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
597
+ children: [/* @__PURE__ */ jsx("div", {
598
+ className: "absolute inset-0 bg-linear-to-r from-[#36b49f] to-[#DBFF75] opacity-40 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100",
599
+ children: /* @__PURE__ */ jsx(GridPattern, {
600
+ width: 72,
601
+ height: 56,
602
+ x: -12,
603
+ y: 4,
604
+ squares: [
605
+ [4, 3],
606
+ [2, 1],
607
+ [7, 3],
608
+ [10, 6]
609
+ ],
610
+ className: "absolute inset-x-0 inset-y-[-50%] h-[200%] w-full -skew-y-18 fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
611
+ })
612
+ }), /* @__PURE__ */ jsx("svg", {
613
+ viewBox: "0 0 1113 440",
614
+ "aria-hidden": "true",
615
+ className: "absolute top-0 left-1/2 -ml-76 w-278.25 fill-white blur-[26px] dark:hidden",
616
+ children: /* @__PURE__ */ jsx("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
617
+ })]
618
+ })
619
+ });
620
+ }
621
+ //#endregion
622
+ //#region source/context.tsx
623
+ var ClarifyConfigContext = createContext(null);
624
+ var OpenApisContext = createContext({});
625
+ function useClarifyConfig() {
626
+ const config = useContext(ClarifyConfigContext);
627
+ if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
628
+ return config;
629
+ }
630
+ function useOpenApis() {
631
+ return useContext(OpenApisContext);
632
+ }
633
+ //#endregion
634
+ //#region source/components/PageFooter.tsx
635
+ function resolveLocalizedText$1(text, locale, fallbackLocale) {
636
+ if (typeof text === "string") return text;
637
+ return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
638
+ }
639
+ function isExternalHref$1(href) {
640
+ return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
641
+ }
642
+ function localeForPath$1(config, pathname) {
643
+ const i18n = config.i18n;
644
+ if (!i18n) return void 0;
645
+ const firstSegment = pathname.split("/").filter(Boolean)[0];
646
+ return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
647
+ }
648
+ function localizeHref$1(href, config, locale) {
649
+ if (!locale || !config.i18n || isExternalHref$1(href) || href.startsWith("#")) return href;
650
+ if (locale === config.i18n.defaultLocale) return href;
651
+ const cleanHref = href === "/" ? "" : href.replace(/^\/+/, "");
652
+ return `/${locale}${cleanHref ? `/${cleanHref}` : ""}`;
653
+ }
654
+ function FooterLink(arg0) {
655
+ const { link, locale, config } = arg0;
656
+ const external = link.external ?? isExternalHref$1(link.href);
657
+ return /* @__PURE__ */ jsx("a", {
658
+ href: external ? link.href : localizeHref$1(link.href, config, locale),
659
+ target: external ? "_blank" : void 0,
660
+ rel: external ? "noreferrer" : void 0,
661
+ className: "clarify-footer-link text-sm text-zinc-500 no-underline transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
662
+ children: resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)
663
+ });
664
+ }
665
+ function SocialLink(arg0) {
666
+ const { name, href } = arg0;
667
+ return /* @__PURE__ */ jsx("a", {
668
+ href,
669
+ target: "_blank",
670
+ rel: "noreferrer",
671
+ className: "clarify-footer-social text-sm capitalize text-zinc-500 no-underline transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
672
+ children: name
673
+ });
674
+ }
675
+ function PageFooter() {
676
+ const config = useClarifyConfig();
677
+ const locale = localeForPath$1(config, useLocation().pathname);
678
+ const footer = config.footer;
679
+ const links = footer?.links ?? [];
680
+ const socials = Object.entries(footer?.socials ?? {});
681
+ const copyright = footer?.copyright ? resolveLocalizedText$1(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
682
+ const hasCustomFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
683
+ return /* @__PURE__ */ jsxs("footer", {
684
+ className: clsx("clarify-page-footer mx-auto mt-16 flex w-full max-w-3xl flex-col items-end gap-4 border-t border-zinc-900/10 pt-8 xl:max-w-[56rem] 2xl:max-w-[64rem] dark:border-white/10", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
685
+ children: [hasCustomFooter ? /* @__PURE__ */ jsxs("div", {
686
+ className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
687
+ children: [copyright ? /* @__PURE__ */ jsx("p", {
688
+ className: "clarify-footer-copyright m-0 text-sm text-zinc-500 dark:text-zinc-400",
689
+ children: copyright
690
+ }) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ jsxs("div", {
691
+ className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
692
+ children: [links.map((link) => /* @__PURE__ */ jsx(FooterLink, {
693
+ link,
694
+ locale,
695
+ config
696
+ }, `${link.href}-${resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ jsx(SocialLink, {
697
+ name,
698
+ href
699
+ }, name))]
700
+ }) : null]
701
+ }) : null, /* @__PURE__ */ jsx("div", {
702
+ className: "clarify-footer-brand flex justify-end",
703
+ children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
704
+ })]
705
+ });
706
+ }
707
+ //#endregion
708
+ //#region source/components/ThemeProvider.tsx
709
+ var ThemeContext = createContext(null);
710
+ var storageKey = "clarify:theme";
711
+ function getSystemTheme() {
712
+ if (typeof window === "undefined") return "light";
713
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
714
+ }
715
+ function getStoredTheme() {
716
+ if (typeof window === "undefined") return "system";
717
+ const storedTheme = window.localStorage.getItem(storageKey);
718
+ return storedTheme === "light" || storedTheme === "dark" || storedTheme === "system" ? storedTheme : "system";
719
+ }
720
+ function applyTheme(resolvedTheme) {
721
+ if (typeof document === "undefined") return;
722
+ document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
723
+ document.documentElement.style.colorScheme = resolvedTheme;
724
+ }
725
+ function ThemeProvider(arg0) {
726
+ const { children } = arg0;
727
+ const [theme, setThemeState] = useState(() => getStoredTheme());
728
+ const [systemTheme, setSystemTheme] = useState(() => getSystemTheme());
729
+ const resolvedTheme = theme === "system" ? systemTheme : theme;
730
+ useEffect(() => {
731
+ applyTheme(resolvedTheme);
732
+ }, [resolvedTheme]);
733
+ useEffect(() => {
734
+ if (typeof window === "undefined") return;
735
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
736
+ function updateSystemTheme() {
737
+ setSystemTheme(mediaQuery.matches ? "dark" : "light");
738
+ }
739
+ updateSystemTheme();
740
+ mediaQuery.addEventListener("change", updateSystemTheme);
741
+ return () => mediaQuery.removeEventListener("change", updateSystemTheme);
742
+ }, []);
743
+ const value = useMemo(() => ({
744
+ theme,
745
+ resolvedTheme,
746
+ setTheme(nextTheme) {
747
+ setThemeState(nextTheme);
748
+ if (typeof window !== "undefined") window.localStorage.setItem(storageKey, nextTheme);
749
+ }
750
+ }), [resolvedTheme, theme]);
751
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, {
752
+ value,
753
+ children
754
+ });
755
+ }
756
+ function useTheme() {
757
+ const context = useContext(ThemeContext);
758
+ if (!context) throw new Error("[clarify] useTheme must be used within ThemeProvider");
759
+ return context;
760
+ }
761
+ //#endregion
762
+ //#region source/components/ThemeToggle.tsx
763
+ function SunIcon(props) {
764
+ return /* @__PURE__ */ jsxs("svg", {
765
+ viewBox: "0 0 20 20",
766
+ fill: "none",
767
+ "aria-hidden": "true",
768
+ ...props,
769
+ children: [/* @__PURE__ */ jsx("path", { d: "M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" }), /* @__PURE__ */ jsx("path", {
770
+ strokeLinecap: "round",
771
+ d: "M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
772
+ })]
773
+ });
774
+ }
775
+ function MoonIcon(props) {
776
+ return /* @__PURE__ */ jsx("svg", {
777
+ viewBox: "0 0 20 20",
778
+ fill: "none",
779
+ "aria-hidden": "true",
780
+ ...props,
781
+ children: /* @__PURE__ */ jsx("path", { d: "M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" })
782
+ });
783
+ }
784
+ function ThemeToggle() {
785
+ const { resolvedTheme, setTheme } = useTheme();
786
+ const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
787
+ return /* @__PURE__ */ jsxs("button", {
788
+ type: "button",
789
+ className: "clarify-theme-toggle flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
790
+ "aria-label": `Switch to ${otherTheme} theme`,
791
+ onClick: () => setTheme(otherTheme),
792
+ children: [
793
+ /* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
794
+ /* @__PURE__ */ jsx(SunIcon, { className: "h-5 w-5 stroke-zinc-900 dark:hidden" }),
795
+ /* @__PURE__ */ jsx(MoonIcon, { className: "hidden h-5 w-5 stroke-white dark:block" })
796
+ ]
797
+ });
798
+ }
799
+ //#endregion
800
+ //#region source/components/index.tsx
801
+ function ArrowIcon(props) {
802
+ return /* @__PURE__ */ jsx("svg", {
803
+ viewBox: "0 0 20 20",
804
+ fill: "none",
805
+ "aria-hidden": "true",
806
+ ...props,
807
+ children: /* @__PURE__ */ jsx("path", {
808
+ stroke: "currentColor",
809
+ strokeLinecap: "round",
810
+ strokeLinejoin: "round",
811
+ d: "m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
812
+ })
813
+ });
814
+ }
815
+ var buttonVariantStyles = {
816
+ primary: "rounded-full bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:text-emerald-300 dark:hover:ring-emerald-300",
817
+ secondary: "rounded-full bg-zinc-100 px-3 py-1 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
818
+ filled: "rounded-full bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:hover:bg-emerald-400",
819
+ outline: "rounded-full px-3 py-1 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
820
+ text: "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500"
821
+ };
822
+ function Button(arg0) {
823
+ const { variant = "primary", className, children, arrow, ...props } = arg0;
824
+ const classes = clsx("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
825
+ const arrowIcon = /* @__PURE__ */ jsx(ArrowIcon, { className: clsx("mt-0.5 h-5 w-5", variant === "text" && "relative top-px", arrow === "left" && "-ml-1 rotate-180", arrow === "right" && "-mr-1") });
826
+ const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
827
+ arrow === "left" ? arrowIcon : null,
828
+ children,
829
+ arrow === "right" ? arrowIcon : null
830
+ ] });
831
+ if (typeof props.href === "undefined") return /* @__PURE__ */ jsx("button", {
832
+ className: classes,
833
+ ...props,
834
+ children: inner
835
+ });
836
+ return /* @__PURE__ */ jsx("a", {
837
+ className: classes,
838
+ ...props,
839
+ children: inner
840
+ });
841
+ }
842
+ var tagVariantStyles = {
843
+ small: "",
844
+ medium: "rounded-lg px-1.5 ring-1 ring-inset"
845
+ };
846
+ var tagColorStyles = {
847
+ emerald: {
848
+ small: "text-emerald-500 dark:text-emerald-400",
849
+ medium: "bg-emerald-400/10 text-emerald-500 ring-emerald-300 dark:text-emerald-400 dark:ring-emerald-400/30"
850
+ },
851
+ sky: {
852
+ small: "text-sky-500 dark:text-sky-400",
853
+ medium: "bg-sky-400/10 text-sky-500 ring-sky-300 dark:text-sky-400 dark:ring-sky-400/30"
854
+ },
855
+ amber: {
856
+ small: "text-amber-500 dark:text-amber-400",
857
+ medium: "bg-amber-400/10 text-amber-500 ring-amber-300 dark:text-amber-400 dark:ring-amber-400/30"
858
+ },
859
+ rose: {
860
+ small: "text-red-500 dark:text-rose-500",
861
+ medium: "bg-rose-50 text-red-500 ring-rose-200 dark:bg-rose-400/10 dark:text-rose-400 dark:ring-rose-500/20"
862
+ },
863
+ zinc: {
864
+ small: "text-zinc-400 dark:text-zinc-500",
865
+ medium: "bg-zinc-50 text-zinc-500 ring-zinc-200 dark:bg-zinc-400/10 dark:text-zinc-400 dark:ring-zinc-500/20"
866
+ }
867
+ };
868
+ var tagValueColorMap = {
869
+ GET: "emerald",
870
+ POST: "sky",
871
+ PUT: "amber",
872
+ PATCH: "amber",
873
+ DELETE: "rose"
874
+ };
875
+ function Tag(arg0) {
876
+ const { children, variant = "medium", color } = arg0;
877
+ const value = typeof children === "string" ? children.toUpperCase() : "";
878
+ const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
879
+ return /* @__PURE__ */ jsx("span", {
880
+ className: clsx("clarify-tag font-mono text-[0.625rem]/6 font-semibold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
881
+ children
882
+ });
883
+ }
884
+ function Logo(props) {
885
+ return /* @__PURE__ */ jsxs("svg", {
886
+ viewBox: "0 0 99 24",
887
+ "aria-hidden": "true",
888
+ ...props,
889
+ className: clsx("clarify-logo", props.className),
890
+ children: [/* @__PURE__ */ jsx("path", {
891
+ className: "fill-emerald-400",
892
+ d: "M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
893
+ }), /* @__PURE__ */ jsx("path", {
894
+ className: "fill-zinc-900 dark:fill-white",
895
+ d: "M26.538 18h2.654v-3.999h2.576c2.672 0 4.456-1.723 4.456-4.333V9.65c0-2.61-1.784-4.333-4.456-4.333h-5.23V18Zm4.58-10.582c1.52 0 2.416.8 2.416 2.241v.018c0 1.441-.896 2.25-2.417 2.25h-1.925V7.418h1.925ZM38.051 18h2.566v-5.414c0-1.371.923-2.206 2.382-2.206.396 0 .791.061 1.178.15V8.287a3.843 3.843 0 0 0-.958-.123c-1.257 0-2.136.615-2.443 1.661h-.159V8.323h-2.566V18Zm11.55.202c2.979 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.773-5.036-2.953 0-4.772 1.916-4.772 5.036v.018c0 3.146 1.793 5.036 4.772 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.144-3.023 1.354 0 2.145 1.134 2.145 3.023v.018c0 1.907-.782 3.023-2.145 3.023Zm10.52 1.846c.492 0 .967-.053 1.283-.114v-1.907a6.057 6.057 0 0 1-.755.044c-.87 0-1.24-.387-1.24-1.257v-4.544h1.995V8.323H59.41V6.012h-2.592v2.311h-1.495v1.934h1.495v5.133c0 1.88.949 2.645 3.304 2.645Zm7.287.167c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.954 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023Zm10.767 2.013c2.522 0 4.034-1.353 4.297-3.463l.01-.053h-2.374l-.017.036c-.229.966-.853 1.467-1.908 1.467-1.37 0-2.135-1.08-2.135-3.04v-.018c0-1.934.755-3.006 2.135-3.006 1.099 0 1.74.615 1.908 1.556l.008.017h2.391v-.026c-.228-2.162-1.749-3.56-4.315-3.56-3.033 0-4.738 1.837-4.738 5.019v.017c0 3.217 1.714 5.054 4.738 5.054Zm10.257 0c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.953 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.371 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023ZM95.025 18h2.566V4.623h-2.566V18Z"
896
+ })]
897
+ });
898
+ }
899
+ function Prose(arg0) {
900
+ const { as, className, ...props } = arg0;
901
+ return /* @__PURE__ */ jsx(as ?? "div", {
902
+ className: clsx(className, "clarify-prose prose dark:prose-invert", "[html_:where(&>*)]:mx-auto [html_:where(&>*)]:w-full [html_:where(&>*)]:max-w-3xl xl:[html_:where(&>*)]:max-w-[56rem] 2xl:[html_:where(&>*)]:max-w-[64rem] [html_:where(&>.not-prose)]:max-w-5xl 2xl:[html_:where(&>.not-prose)]:max-w-[76rem]"),
903
+ ...props
904
+ });
905
+ }
906
+ function AnchorIcon(props) {
907
+ return /* @__PURE__ */ jsx("svg", {
908
+ viewBox: "0 0 20 20",
909
+ fill: "none",
910
+ strokeLinecap: "round",
911
+ "aria-hidden": "true",
912
+ ...props,
913
+ children: /* @__PURE__ */ jsx("path", { d: "m6.5 11.5-.964-.964a3.535 3.535 0 1 1 5-5l.964.964m2 2 .964.964a3.536 3.536 0 0 1-5 5L8.5 13.5m0-5 3 3" })
914
+ });
915
+ }
916
+ function Eyebrow(arg0) {
917
+ const { tag, label } = arg0;
918
+ if (!tag && !label) return null;
919
+ return /* @__PURE__ */ jsxs("div", {
920
+ className: "flex items-center gap-x-3",
921
+ children: [
922
+ tag ? /* @__PURE__ */ jsx(Tag, { children: tag }) : null,
923
+ tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" }) : null,
924
+ label ? /* @__PURE__ */ jsx("span", {
925
+ className: "font-mono text-xs text-zinc-400",
926
+ children: label
927
+ }) : null
928
+ ]
929
+ });
930
+ }
931
+ function Anchor(arg0) {
932
+ const { id, inView, children } = arg0;
933
+ return /* @__PURE__ */ jsxs("a", {
934
+ href: `#${id}`,
935
+ className: "clarify-anchor group text-inherit no-underline hover:text-inherit",
936
+ children: [inView ? /* @__PURE__ */ jsx("div", {
937
+ className: "absolute mt-1 -ml-(--width) hidden w-(--width) opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(var(--container-lg)+(--spacing(8)))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:--spacing(10)]",
938
+ children: /* @__PURE__ */ jsx("div", {
939
+ className: "group/anchor block h-5 w-5 rounded-lg bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600",
940
+ children: /* @__PURE__ */ jsx(AnchorIcon, { className: "h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" })
941
+ })
942
+ }) : null, children]
943
+ });
944
+ }
945
+ function Heading(arg0) {
946
+ const { children, tag, label, level, anchor = true, ...props } = arg0;
947
+ const resolvedLevel = level ?? 2;
948
+ const Component = `h${resolvedLevel}`;
949
+ const ref = useRef(null);
950
+ const registerHeading = useSectionStore((state) => state.registerHeading);
951
+ const inView = useInView(ref, {
952
+ margin: `${remToPx(-3.5)}px 0px 0px 0px`,
953
+ amount: "all"
954
+ });
955
+ useEffect(() => {
956
+ if (resolvedLevel === 2) registerHeading({
957
+ id: props.id,
958
+ ref,
959
+ offsetRem: tag || label ? 8 : 6
960
+ });
961
+ }, [
962
+ label,
963
+ props.id,
964
+ registerHeading,
965
+ resolvedLevel,
966
+ tag
967
+ ]);
968
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Eyebrow, {
969
+ tag,
970
+ label
971
+ }), /* @__PURE__ */ jsx(Component, {
972
+ ref,
973
+ className: clsx("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24"),
974
+ ...props,
975
+ children: anchor ? /* @__PURE__ */ jsx(Anchor, {
976
+ id: props.id,
977
+ inView,
978
+ children
979
+ }) : children
980
+ })] });
981
+ }
982
+ function DocShell(arg0) {
983
+ const { title, subtitle, children } = arg0;
984
+ return /* @__PURE__ */ jsx("main", {
985
+ className: "clarify-doc-shell min-h-screen bg-white px-6 py-10 text-zinc-900 dark:bg-zinc-950 dark:text-white md:px-10",
986
+ children: /* @__PURE__ */ jsxs("div", {
987
+ className: "mx-auto max-w-6xl",
988
+ children: [/* @__PURE__ */ jsxs("header", {
989
+ className: "mb-10",
990
+ children: [/* @__PURE__ */ jsx("h1", {
991
+ className: "text-3xl font-bold tracking-tight md:text-5xl",
992
+ children: title
993
+ }), subtitle ? /* @__PURE__ */ jsx("p", {
994
+ className: "mt-3 max-w-2xl text-zinc-600 dark:text-zinc-400",
995
+ children: subtitle
996
+ }) : null]
997
+ }), /* @__PURE__ */ jsx(Prose, { children })]
998
+ })
999
+ });
1000
+ }
1001
+ function ApiEndpointCard(arg0) {
1002
+ const { method, path, description, id } = arg0;
1003
+ return /* @__PURE__ */ jsxs("article", {
1004
+ id,
1005
+ className: "clarify-api-endpoint-card scroll-mt-20 rounded-2xl border border-zinc-900/10 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-zinc-900",
1006
+ children: [/* @__PURE__ */ jsxs("div", {
1007
+ className: "flex items-center gap-3",
1008
+ children: [/* @__PURE__ */ jsx(Tag, { children: method }), /* @__PURE__ */ jsx("code", {
1009
+ className: "text-sm font-medium text-zinc-800 dark:text-zinc-200",
1010
+ children: path
1011
+ })]
1012
+ }), description ? /* @__PURE__ */ jsx("p", {
1013
+ className: "mt-3 text-sm text-zinc-600 dark:text-zinc-400",
1014
+ children: description
1015
+ }) : null]
1016
+ });
1017
+ }
1018
+ //#endregion
1019
+ //#region source/shell/Navigation.tsx
1020
+ function NavigationIcon(arg0) {
1021
+ const { name, className } = arg0;
1022
+ if (!name) return null;
1023
+ const Icon = LucideIcons[name];
1024
+ if (!Icon) return null;
1025
+ return /* @__PURE__ */ jsx(Icon, {
1026
+ className: clsx("shrink-0 stroke-current", className),
1027
+ "aria-hidden": "true"
1028
+ });
1029
+ }
1030
+ function useInitialValue(value, condition = true) {
1031
+ const [initialValue] = useState(value);
1032
+ return condition ? initialValue : value;
1033
+ }
1034
+ function normalizePath(path) {
1035
+ return path === "" ? "/" : path;
1036
+ }
1037
+ function navigationToGroups(navigation) {
1038
+ return navigation.map((node) => {
1039
+ const children = node.children?.length ? node.children : [node];
1040
+ return {
1041
+ title: node.children?.length ? node.title : "Documentation",
1042
+ icon: node.icon,
1043
+ links: children.map((child) => ({
1044
+ title: child.title,
1045
+ href: normalizePath(child.path),
1046
+ icon: child.icon
1047
+ }))
1048
+ };
1049
+ });
1050
+ }
1051
+ function TopLevelNavItem$1(arg0) {
1052
+ const { href, children } = arg0;
1053
+ return /* @__PURE__ */ jsx("li", {
1054
+ className: "md:hidden",
1055
+ children: /* @__PURE__ */ jsx(CloseButton, {
1056
+ as: Link,
1057
+ to: href,
1058
+ className: "block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
1059
+ children
1060
+ })
1061
+ });
1062
+ }
1063
+ var sectionBadgeColorStyles = {
1064
+ GET: "text-emerald-500 dark:text-emerald-400",
1065
+ POST: "text-sky-500 dark:text-sky-400",
1066
+ PUT: "text-amber-500 dark:text-amber-400",
1067
+ PATCH: "text-amber-500 dark:text-amber-400",
1068
+ DELETE: "text-red-500 dark:text-rose-500",
1069
+ OPTIONS: "text-violet-500 dark:text-violet-400",
1070
+ HEAD: "text-zinc-500 dark:text-zinc-400",
1071
+ TRACE: "text-fuchsia-500 dark:text-fuchsia-400"
1072
+ };
1073
+ function SectionBadge(arg0) {
1074
+ const { children } = arg0;
1075
+ return /* @__PURE__ */ jsx("span", {
1076
+ className: clsx("inline-flex shrink-0 justify-end font-mono text-[0.625rem]/6 font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "text-zinc-500 dark:text-zinc-400"),
1077
+ children
1078
+ });
1079
+ }
1080
+ function NavLink(arg0) {
1081
+ const { href, children, badge, icon, tags, active = false, isAnchorLink = false } = arg0;
1082
+ function handleClick() {
1083
+ if (!isAnchorLink) return;
1084
+ const hashIndex = href.indexOf("#");
1085
+ if (hashIndex === -1) return;
1086
+ const targetId = decodeURIComponent(href.slice(hashIndex + 1));
1087
+ window.requestAnimationFrame(() => {
1088
+ document.getElementById(targetId)?.scrollIntoView();
1089
+ });
1090
+ }
1091
+ return /* @__PURE__ */ jsxs(CloseButton, {
1092
+ as: Link,
1093
+ to: href,
1094
+ "aria-current": active ? "page" : void 0,
1095
+ onClick: handleClick,
1096
+ className: clsx("clarify-navigation-link flex justify-between gap-2 py-1 pr-3 text-sm transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4", active ? "text-zinc-900 dark:text-white" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"),
1097
+ children: [/* @__PURE__ */ jsxs("span", {
1098
+ className: "flex min-w-0 flex-1 items-center gap-2",
1099
+ children: [
1100
+ icon ? /* @__PURE__ */ jsx(NavigationIcon, {
1101
+ name: icon,
1102
+ className: "h-3.5 w-3.5"
1103
+ }) : null,
1104
+ badge ? /* @__PURE__ */ jsx(SectionBadge, { children: badge }) : null,
1105
+ /* @__PURE__ */ jsx("span", {
1106
+ className: "min-w-0 truncate",
1107
+ children
1108
+ })
1109
+ ]
1110
+ }), tags?.length ? /* @__PURE__ */ jsx("span", {
1111
+ className: "flex shrink-0 gap-1",
1112
+ children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, {
1113
+ variant: "small",
1114
+ color: "zinc",
1115
+ children: tag
1116
+ }, tag))
1117
+ }) : null]
1118
+ });
1119
+ }
1120
+ function VisibleSectionHighlight(arg0) {
1121
+ const { group, pathname } = arg0;
1122
+ const [sections, visibleSections] = useInitialValue([useSectionStore((s) => s.sections), useSectionStore((s) => s.visibleSections)], useIsInsideMobileNavigation());
1123
+ const isPresent = useIsPresent();
1124
+ const firstVisibleSectionIndex = Math.max(0, [{ id: "_top" }, ...sections].findIndex((section) => section.id === visibleSections[0]));
1125
+ const itemHeight = remToPx(2);
1126
+ const height = isPresent ? Math.max(1, visibleSections.length) * itemHeight : itemHeight;
1127
+ const top = group.links.findIndex((link) => link.href === pathname) * itemHeight + firstVisibleSectionIndex * itemHeight;
1128
+ return /* @__PURE__ */ jsx(motion.div, {
1129
+ layout: true,
1130
+ initial: { opacity: 0 },
1131
+ animate: {
1132
+ opacity: 1,
1133
+ transition: { delay: .2 }
1134
+ },
1135
+ exit: { opacity: 0 },
1136
+ className: "absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5",
1137
+ style: {
1138
+ borderRadius: 8,
1139
+ height,
1140
+ top
1141
+ }
1142
+ });
1143
+ }
1144
+ function ActivePageMarker(arg0) {
1145
+ const { group, pathname } = arg0;
1146
+ const itemHeight = remToPx(2);
1147
+ const top = remToPx(.25) + group.links.findIndex((link) => link.href === pathname) * itemHeight;
1148
+ return /* @__PURE__ */ jsx(motion.div, {
1149
+ layout: true,
1150
+ className: "absolute left-2 h-6 w-px bg-emerald-500",
1151
+ initial: { opacity: 0 },
1152
+ animate: {
1153
+ opacity: 1,
1154
+ transition: { delay: .2 }
1155
+ },
1156
+ exit: { opacity: 0 },
1157
+ style: { top }
1158
+ });
1159
+ }
1160
+ function NavigationGroup(arg0) {
1161
+ const { group, className } = arg0;
1162
+ const isInsideMobileNavigation = useIsInsideMobileNavigation();
1163
+ const [pathname, sections] = useInitialValue([useLocation().pathname, useSectionStore((s) => s.sections)], isInsideMobileNavigation);
1164
+ const isActiveGroup = group.links.findIndex((link) => link.href === pathname) !== -1;
1165
+ return /* @__PURE__ */ jsxs("li", {
1166
+ className: clsx("clarify-navigation-group relative mt-6", className),
1167
+ children: [/* @__PURE__ */ jsxs(motion.h2, {
1168
+ layout: "position",
1169
+ className: "clarify-navigation-group-title flex items-center gap-2 text-xs font-semibold text-zinc-900 dark:text-white",
1170
+ children: [/* @__PURE__ */ jsx(NavigationIcon, {
1171
+ name: group.icon,
1172
+ className: "h-3.5 w-3.5"
1173
+ }), /* @__PURE__ */ jsx("span", { children: group.title })]
1174
+ }), /* @__PURE__ */ jsxs("div", {
1175
+ className: "relative mt-3 pl-2",
1176
+ children: [
1177
+ /* @__PURE__ */ jsx(AnimatePresence, {
1178
+ initial: !isInsideMobileNavigation,
1179
+ children: isActiveGroup ? /* @__PURE__ */ jsx(VisibleSectionHighlight, {
1180
+ group,
1181
+ pathname
1182
+ }) : null
1183
+ }),
1184
+ /* @__PURE__ */ jsx(motion.div, {
1185
+ layout: true,
1186
+ className: "absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
1187
+ }),
1188
+ /* @__PURE__ */ jsx(AnimatePresence, {
1189
+ initial: false,
1190
+ children: isActiveGroup ? /* @__PURE__ */ jsx(ActivePageMarker, {
1191
+ group,
1192
+ pathname
1193
+ }) : null
1194
+ }),
1195
+ /* @__PURE__ */ jsx("ul", {
1196
+ role: "list",
1197
+ className: "border-l border-transparent",
1198
+ children: group.links.map((link) => /* @__PURE__ */ jsxs(motion.li, {
1199
+ layout: "position",
1200
+ className: "relative",
1201
+ children: [/* @__PURE__ */ jsx(NavLink, {
1202
+ href: link.href,
1203
+ icon: link.icon,
1204
+ active: link.href === pathname,
1205
+ children: link.title
1206
+ }), /* @__PURE__ */ jsx(AnimatePresence, {
1207
+ mode: "popLayout",
1208
+ initial: false,
1209
+ children: link.href === pathname && sections.length > 0 ? /* @__PURE__ */ jsx(motion.ul, {
1210
+ role: "list",
1211
+ initial: { opacity: 0 },
1212
+ animate: {
1213
+ opacity: 1,
1214
+ transition: { delay: .1 }
1215
+ },
1216
+ exit: {
1217
+ opacity: 0,
1218
+ transition: { duration: .15 }
1219
+ },
1220
+ children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, {
1221
+ href: `${link.href}#${section.id}`,
1222
+ badge: section.badge,
1223
+ tags: section.tags,
1224
+ isAnchorLink: true,
1225
+ children: section.title
1226
+ }) }, section.id))
1227
+ }) : null
1228
+ })]
1229
+ }, link.href))
1230
+ })
1231
+ ]
1232
+ })]
1233
+ });
1234
+ }
1235
+ function Navigation(arg0) {
1236
+ const { navigation, className } = arg0;
1237
+ const groups = navigationToGroups(navigation);
1238
+ return /* @__PURE__ */ jsx("nav", {
1239
+ className: clsx("clarify-navigation", className),
1240
+ children: /* @__PURE__ */ jsxs("ul", {
1241
+ role: "list",
1242
+ className: "clarify-navigation-list",
1243
+ children: [/* @__PURE__ */ jsx(TopLevelNavItem$1, {
1244
+ href: "/",
1245
+ children: "Home"
1246
+ }), groups.map((group, groupIndex) => /* @__PURE__ */ jsx(NavigationGroup, {
1247
+ group,
1248
+ className: groupIndex === 0 ? "md:mt-0" : ""
1249
+ }, group.title))]
1250
+ })
1251
+ });
1252
+ }
1253
+ //#endregion
1254
+ //#region source/shell/mobile.tsx
1255
+ function MenuIcon(props) {
1256
+ return /* @__PURE__ */ jsx("svg", {
1257
+ viewBox: "0 0 10 9",
1258
+ fill: "none",
1259
+ strokeLinecap: "round",
1260
+ "aria-hidden": "true",
1261
+ ...props,
1262
+ children: /* @__PURE__ */ jsx("path", { d: "M.5 1h9M.5 8h9M.5 4.5h9" })
1263
+ });
1264
+ }
1265
+ function XIcon(props) {
1266
+ return /* @__PURE__ */ jsx("svg", {
1267
+ viewBox: "0 0 10 9",
1268
+ fill: "none",
1269
+ strokeLinecap: "round",
1270
+ "aria-hidden": "true",
1271
+ ...props,
1272
+ children: /* @__PURE__ */ jsx("path", { d: "m1.5 1 7 7M8.5 1l-7 7" })
1273
+ });
1274
+ }
1275
+ var IsInsideMobileNavigationContext = createContext(false);
1276
+ function MobileNavigationDialog(arg0) {
1277
+ const { config, isOpen, navigation, routes, currentLocale, currentRoute, close } = arg0;
1278
+ return /* @__PURE__ */ jsxs(Dialog, {
1279
+ transition: true,
1280
+ open: isOpen,
1281
+ onClose: close,
1282
+ className: "clarify-mobile-navigation-dialog fixed inset-0 z-50 lg:hidden",
1283
+ children: [/* @__PURE__ */ jsx(DialogBackdrop, {
1284
+ transition: true,
1285
+ className: "clarify-mobile-navigation-backdrop fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
1286
+ }), /* @__PURE__ */ jsxs(DialogPanel, { children: [/* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsx(Header, {
1287
+ config,
1288
+ navigation,
1289
+ routes,
1290
+ currentLocale,
1291
+ currentRoute,
1292
+ className: "data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
1293
+ }) }), /* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsx(motion.div, {
1294
+ layoutScroll: true,
1295
+ className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-white px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-zinc-900/7.5 duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
1296
+ children: /* @__PURE__ */ jsx(Navigation, { navigation })
1297
+ }) })] })]
1298
+ });
1299
+ }
1300
+ function useIsInsideMobileNavigation() {
1301
+ return useContext(IsInsideMobileNavigationContext);
1302
+ }
1303
+ var useMobileNavigationStore = create()((set) => ({
1304
+ isOpen: false,
1305
+ open: () => set({ isOpen: true }),
1306
+ close: () => set({ isOpen: false }),
1307
+ toggle: () => set((state) => ({ isOpen: !state.isOpen }))
1308
+ }));
1309
+ function MobileNavigation(arg0) {
1310
+ const { config, navigation, routes, currentLocale, currentRoute } = arg0;
1311
+ const isInsideMobileNavigation = useIsInsideMobileNavigation();
1312
+ const { isOpen, toggle, close } = useMobileNavigationStore();
1313
+ const ToggleIcon = isOpen ? XIcon : MenuIcon;
1314
+ return /* @__PURE__ */ jsxs(IsInsideMobileNavigationContext.Provider, {
1315
+ value: true,
1316
+ children: [/* @__PURE__ */ jsxs("button", {
1317
+ type: "button",
1318
+ className: "clarify-mobile-navigation-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
1319
+ "aria-label": "Toggle navigation",
1320
+ onClick: toggle,
1321
+ children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "w-2.5 stroke-zinc-900 dark:stroke-white" })]
1322
+ }), !isInsideMobileNavigation ? /* @__PURE__ */ jsx(Suspense, {
1323
+ fallback: null,
1324
+ children: /* @__PURE__ */ jsx(MobileNavigationDialog, {
1325
+ config,
1326
+ navigation,
1327
+ routes,
1328
+ currentLocale,
1329
+ currentRoute,
1330
+ isOpen,
1331
+ close
1332
+ })
1333
+ }) : null]
1334
+ });
1335
+ }
1336
+ //#endregion
1337
+ //#region source/shell/Search.tsx
1338
+ function SearchIcon(props) {
1339
+ return /* @__PURE__ */ jsx("svg", {
1340
+ viewBox: "0 0 20 20",
1341
+ fill: "none",
1342
+ "aria-hidden": "true",
1343
+ ...props,
1344
+ children: /* @__PURE__ */ jsx("path", {
1345
+ strokeLinecap: "round",
1346
+ strokeLinejoin: "round",
1347
+ d: "M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
1348
+ })
1349
+ });
1350
+ }
1351
+ function NoResultsIcon(props) {
1352
+ return /* @__PURE__ */ jsx("svg", {
1353
+ viewBox: "0 0 20 20",
1354
+ fill: "none",
1355
+ "aria-hidden": "true",
1356
+ ...props,
1357
+ children: /* @__PURE__ */ jsx("path", {
1358
+ strokeLinecap: "round",
1359
+ strokeLinejoin: "round",
1360
+ d: "M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
1361
+ })
1362
+ });
1363
+ }
1364
+ function routeGroupTitles(navigation) {
1365
+ const titles = /* @__PURE__ */ new Map();
1366
+ for (const node of navigation) if (node.children?.length) for (const child of node.children) titles.set(child.path, node.title);
1367
+ else titles.set(node.path, node.title);
1368
+ return titles;
1369
+ }
1370
+ function buildSearchItems(routes, navigation) {
1371
+ const groupTitles = routeGroupTitles(navigation);
1372
+ return routes.flatMap((route) => {
1373
+ const groupTitle = groupTitles.get(route.path);
1374
+ return [{
1375
+ title: route.title,
1376
+ pageTitle: route.title,
1377
+ sectionTitle: groupTitle,
1378
+ url: route.path,
1379
+ keywords: [
1380
+ groupTitle,
1381
+ route.title,
1382
+ route.path,
1383
+ route.kind
1384
+ ].filter(Boolean).join(" ").toLowerCase()
1385
+ }, ...route.sections?.map((section) => ({
1386
+ title: section.title,
1387
+ pageTitle: route.title,
1388
+ sectionTitle: groupTitle,
1389
+ url: `${route.path}#${section.id}`,
1390
+ keywords: [
1391
+ groupTitle,
1392
+ route.title,
1393
+ section.title,
1394
+ route.path,
1395
+ section.id
1396
+ ].filter(Boolean).join(" ").toLowerCase()
1397
+ })) ?? []];
1398
+ });
1399
+ }
1400
+ function escapeRegExp(value) {
1401
+ return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
1402
+ }
1403
+ function HighlightQuery(arg0) {
1404
+ const { text, query } = arg0;
1405
+ if (!query) return text;
1406
+ return /* @__PURE__ */ jsx(Fragment$1, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ jsx("mark", {
1407
+ className: "bg-transparent text-emerald-500 underline",
1408
+ children: part
1409
+ }, index) : /* @__PURE__ */ jsx(Fragment, { children: part }, index)) });
1410
+ }
1411
+ function SearchResult(arg0) {
1412
+ const { result, query, active, onSelect } = arg0;
1413
+ const id = useId();
1414
+ const hierarchy = [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string");
1415
+ return /* @__PURE__ */ jsxs("li", {
1416
+ id,
1417
+ className: clsx("clarify-search-result group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50", active && "bg-zinc-50 dark:bg-zinc-800/50"),
1418
+ "aria-selected": active,
1419
+ onMouseDown: (event) => {
1420
+ event.preventDefault();
1421
+ onSelect();
1422
+ },
1423
+ children: [/* @__PURE__ */ jsx("div", {
1424
+ className: "text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white",
1425
+ children: /* @__PURE__ */ jsx(HighlightQuery, {
1426
+ text: result.title,
1427
+ query
1428
+ })
1429
+ }), hierarchy.length > 0 ? /* @__PURE__ */ jsx("div", {
1430
+ className: "mt-1 truncate text-2xs whitespace-nowrap text-zinc-500",
1431
+ children: hierarchy.map((item, itemIndex, items) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HighlightQuery, {
1432
+ text: item,
1433
+ query
1434
+ }), /* @__PURE__ */ jsx("span", {
1435
+ className: itemIndex === items.length - 1 ? "sr-only" : "mx-2 text-zinc-300 dark:text-zinc-700",
1436
+ children: "/"
1437
+ })] }, `${item}-${itemIndex}`))
1438
+ }) : null]
1439
+ });
1440
+ }
1441
+ var SearchInput = forwardRef(function SearchInput(arg0, inputRef) {
1442
+ const { query, setQuery, onClose, onSubmit, activeDescendantId } = arg0;
1443
+ return /* @__PURE__ */ jsxs("div", {
1444
+ className: "clarify-search-input group relative flex h-12",
1445
+ children: [/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" }), /* @__PURE__ */ jsx("input", {
1446
+ ref: inputRef,
1447
+ "data-autofocus": true,
1448
+ role: "combobox",
1449
+ "aria-expanded": query !== "",
1450
+ "aria-controls": "clarify-search-results",
1451
+ "aria-activedescendant": activeDescendantId,
1452
+ value: query,
1453
+ onChange: (event) => setQuery(event.currentTarget.value),
1454
+ onKeyDown: (event) => {
1455
+ if (event.key === "Escape") if (query) setQuery("");
1456
+ else onClose();
1457
+ if (event.key === "Enter") {
1458
+ event.preventDefault();
1459
+ onSubmit();
1460
+ }
1461
+ },
1462
+ placeholder: "Find something...",
1463
+ className: "flex-auto appearance-none bg-transparent pr-4 pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
1464
+ })]
1465
+ });
1466
+ });
1467
+ function SearchDialog(arg0) {
1468
+ const { open, setOpen, routes, navigation, className, onNavigate = () => {} } = arg0;
1469
+ const navigate = useNavigate();
1470
+ const location = useLocation();
1471
+ const inputRef = useRef(null);
1472
+ const [query, setQuery] = useState("");
1473
+ const [activeIndex, setActiveIndex] = useState(0);
1474
+ const searchItems = useMemo(() => buildSearchItems(routes, navigation), [navigation, routes]);
1475
+ const results = useMemo(() => {
1476
+ const normalizedQuery = query.trim().toLowerCase();
1477
+ if (!normalizedQuery) return [];
1478
+ return searchItems.filter((item) => item.keywords.includes(normalizedQuery)).slice(0, 8);
1479
+ }, [query, searchItems]);
1480
+ useEffect(() => {
1481
+ setOpen(false);
1482
+ }, [
1483
+ location.pathname,
1484
+ location.search,
1485
+ location.hash,
1486
+ setOpen
1487
+ ]);
1488
+ useEffect(() => {
1489
+ if (open) return void 0;
1490
+ function onKeyDown(event) {
1491
+ if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
1492
+ event.preventDefault();
1493
+ setOpen(true);
1494
+ }
1495
+ }
1496
+ window.addEventListener("keydown", onKeyDown);
1497
+ return () => window.removeEventListener("keydown", onKeyDown);
1498
+ }, [open, setOpen]);
1499
+ const updateQuery = (value) => {
1500
+ setQuery(value);
1501
+ setActiveIndex(0);
1502
+ };
1503
+ function closeDialog() {
1504
+ updateQuery("");
1505
+ setOpen(false);
1506
+ }
1507
+ function selectResult(result = results[activeIndex]) {
1508
+ if (!result) return;
1509
+ navigate(result.url);
1510
+ onNavigate();
1511
+ closeDialog();
1512
+ }
1513
+ return /* @__PURE__ */ jsxs(Dialog, {
1514
+ open,
1515
+ onClose: closeDialog,
1516
+ className: clsx("clarify-search-dialog fixed inset-0 z-50", className),
1517
+ children: [/* @__PURE__ */ jsx(DialogBackdrop, {
1518
+ transition: true,
1519
+ className: "clarify-search-backdrop fixed inset-0 bg-zinc-400/25 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
1520
+ }), /* @__PURE__ */ jsx("div", {
1521
+ className: "fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]",
1522
+ children: /* @__PURE__ */ jsxs(DialogPanel, {
1523
+ transition: true,
1524
+ className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
1525
+ onKeyDown: (event) => {
1526
+ if (event.key === "ArrowDown") {
1527
+ event.preventDefault();
1528
+ setActiveIndex((index) => results.length ? (index + 1) % results.length : 0);
1529
+ }
1530
+ if (event.key === "ArrowUp") {
1531
+ event.preventDefault();
1532
+ setActiveIndex((index) => results.length ? (index - 1 + results.length) % results.length : 0);
1533
+ }
1534
+ },
1535
+ children: [/* @__PURE__ */ jsx(SearchInput, {
1536
+ ref: inputRef,
1537
+ query,
1538
+ setQuery: updateQuery,
1539
+ onClose: closeDialog,
1540
+ onSubmit: () => selectResult()
1541
+ }), /* @__PURE__ */ jsxs("div", {
1542
+ className: "border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
1543
+ children: [query && results.length === 0 ? /* @__PURE__ */ jsxs("div", {
1544
+ className: "p-6 text-center",
1545
+ children: [/* @__PURE__ */ jsx(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" }), /* @__PURE__ */ jsxs("p", {
1546
+ className: "mt-2 text-xs text-zinc-700 dark:text-zinc-400",
1547
+ children: [
1548
+ "Nothing found for",
1549
+ " ",
1550
+ /* @__PURE__ */ jsxs("strong", {
1551
+ className: "font-semibold wrap-break-word text-zinc-900 dark:text-white",
1552
+ children: [
1553
+ "‘",
1554
+ query,
1555
+ "’"
1556
+ ]
1557
+ }),
1558
+ "."
1559
+ ]
1560
+ })]
1561
+ }) : null, results.length ? /* @__PURE__ */ jsx("ul", {
1562
+ id: "clarify-search-results",
1563
+ className: "clarify-search-results",
1564
+ role: "listbox",
1565
+ children: results.map((result, resultIndex) => /* @__PURE__ */ jsx(SearchResult, {
1566
+ result,
1567
+ query,
1568
+ active: resultIndex === activeIndex,
1569
+ onSelect: () => selectResult(result)
1570
+ }, result.url))
1571
+ }) : null]
1572
+ })]
1573
+ })
1574
+ })]
1575
+ });
1576
+ }
1577
+ function useSearchProps() {
1578
+ const buttonRef = useRef(null);
1579
+ const [open, setOpen] = useState(false);
1580
+ return {
1581
+ buttonProps: {
1582
+ ref: buttonRef,
1583
+ onClick() {
1584
+ setOpen(true);
1585
+ }
1586
+ },
1587
+ dialogProps: {
1588
+ open,
1589
+ setOpen
1590
+ }
1591
+ };
1592
+ }
1593
+ function getModifierKey() {
1594
+ if (typeof navigator === "undefined") return "Ctrl ";
1595
+ return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
1596
+ }
1597
+ function Search(arg0) {
1598
+ const { routes, navigation } = arg0;
1599
+ const modifierKey = getModifierKey();
1600
+ const { buttonProps, dialogProps } = useSearchProps();
1601
+ return /* @__PURE__ */ jsxs("div", {
1602
+ className: "clarify-search hidden lg:block lg:max-w-md lg:flex-auto",
1603
+ children: [/* @__PURE__ */ jsxs("button", {
1604
+ type: "button",
1605
+ className: "clarify-search-button hidden h-8 w-full items-center gap-2 rounded-full bg-white pr-3 pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10 dark:ring-inset dark:hover:ring-white/20",
1606
+ ...buttonProps,
1607
+ children: [
1608
+ /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-current" }),
1609
+ "Find something...",
1610
+ /* @__PURE__ */ jsxs("kbd", {
1611
+ className: "ml-auto text-2xs text-zinc-400 dark:text-zinc-500",
1612
+ children: [/* @__PURE__ */ jsx("kbd", {
1613
+ className: "font-sans",
1614
+ children: modifierKey
1615
+ }), /* @__PURE__ */ jsx("kbd", {
1616
+ className: "font-sans",
1617
+ children: "K"
1618
+ })]
1619
+ })
1620
+ ]
1621
+ }), /* @__PURE__ */ jsx(Suspense, {
1622
+ fallback: null,
1623
+ children: /* @__PURE__ */ jsx(SearchDialog, {
1624
+ className: "hidden lg:block",
1625
+ routes,
1626
+ navigation,
1627
+ ...dialogProps
1628
+ })
1629
+ })]
1630
+ });
1631
+ }
1632
+ function MobileSearch(arg0) {
1633
+ const { routes, navigation, onNavigate } = arg0;
1634
+ const { buttonProps, dialogProps } = useSearchProps();
1635
+ return /* @__PURE__ */ jsxs("div", {
1636
+ className: "clarify-mobile-search contents lg:hidden",
1637
+ children: [/* @__PURE__ */ jsxs("button", {
1638
+ type: "button",
1639
+ className: "clarify-mobile-search-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5",
1640
+ "aria-label": "Find something...",
1641
+ ...buttonProps,
1642
+ children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-zinc-900 dark:stroke-white" })]
1643
+ }), /* @__PURE__ */ jsx(Suspense, {
1644
+ fallback: null,
1645
+ children: /* @__PURE__ */ jsx(SearchDialog, {
1646
+ className: "lg:hidden",
1647
+ routes,
1648
+ navigation,
1649
+ onNavigate,
1650
+ ...dialogProps
1651
+ })
1652
+ })]
1653
+ });
1654
+ }
1655
+ //#endregion
1656
+ //#region source/shell/Header.tsx
1657
+ function resolveLocalizedText(text, locale, fallbackLocale) {
1658
+ if (typeof text === "string") return text;
1659
+ return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
1660
+ }
1661
+ function isExternalHref(href) {
1662
+ return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
1663
+ }
1664
+ function localizeHref(href, config, locale) {
1665
+ if (!locale || !config.i18n || isExternalHref(href) || href.startsWith("#")) return href;
1666
+ if (locale === config.i18n.defaultLocale) return href;
1667
+ const cleanHref = href === "/" ? "" : href.replace(/^\/+/, "");
1668
+ return `/${locale}${cleanHref ? `/${cleanHref}` : ""}`;
1669
+ }
1670
+ function localizedRoutePath(config, locale, route) {
1671
+ const alternatePath = route?.alternates?.[locale];
1672
+ if (alternatePath) return alternatePath;
1673
+ if (route?.alternates) return void 0;
1674
+ return localizeHref(route?.basePath ?? route?.path ?? "/", config, locale);
1675
+ }
1676
+ function LanguageIcon(props) {
1677
+ return /* @__PURE__ */ jsxs("svg", {
1678
+ viewBox: "0 0 20 20",
1679
+ fill: "none",
1680
+ "aria-hidden": "true",
1681
+ ...props,
1682
+ children: [/* @__PURE__ */ jsx("path", { d: "M10 17.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z" }), /* @__PURE__ */ jsx("path", { d: "M2.5 10h15M10 2.5c2 2.05 3 4.55 3 7.5s-1 5.45-3 7.5c-2-2.05-3-4.55-3-7.5s1-5.45 3-7.5Z" })]
1683
+ });
1684
+ }
1685
+ function LanguageSwitcher(arg0) {
1686
+ const { config, currentLocale, currentRoute } = arg0;
1687
+ const location = useLocation();
1688
+ const i18n = config.i18n;
1689
+ if (!i18n || i18n.locales.length < 2) return null;
1690
+ const selectedLocale = currentLocale ?? i18n.defaultLocale;
1691
+ const selectedLocaleConfig = i18n.locales.find((locale) => locale.code === selectedLocale) ?? i18n.locales[0];
1692
+ const suffix = `${location.search}${location.hash}`;
1693
+ return /* @__PURE__ */ jsxs(Menu, {
1694
+ as: "div",
1695
+ className: "clarify-language-switcher relative",
1696
+ children: [/* @__PURE__ */ jsxs(MenuButton, {
1697
+ className: "clarify-language-switcher-button flex h-7 items-center gap-1.5 rounded-md px-1.5 text-sm/5 font-medium text-zinc-600 transition hover:bg-zinc-900/5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
1698
+ "aria-label": "Switch language",
1699
+ children: [
1700
+ /* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
1701
+ /* @__PURE__ */ jsx(LanguageIcon, { className: "h-5 w-5 stroke-current" }),
1702
+ /* @__PURE__ */ jsx("span", {
1703
+ className: "hidden sm:inline",
1704
+ children: selectedLocaleConfig?.label ?? selectedLocale
1705
+ })
1706
+ ]
1707
+ }), /* @__PURE__ */ jsx(MenuItems, {
1708
+ transition: true,
1709
+ className: "clarify-language-switcher-menu absolute right-0 z-50 mt-2 w-44 rounded-xl bg-white p-1 text-sm shadow-lg ring-1 shadow-zinc-900/5 ring-zinc-900/10 transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
1710
+ children: i18n.locales.flatMap((locale) => {
1711
+ const localizedPath = localizedRoutePath(config, locale.code, currentRoute);
1712
+ if (!localizedPath) return [];
1713
+ const selected = locale.code === selectedLocale;
1714
+ return [/* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs(Link, {
1715
+ to: `${localizedPath}${suffix}`,
1716
+ className: clsx("clarify-language-switcher-item flex items-center justify-between rounded-lg px-3 py-2 no-underline transition", focus && "bg-zinc-100 dark:bg-white/5", selected ? "text-zinc-900 dark:text-white" : "text-zinc-600 dark:text-zinc-400"),
1717
+ "aria-current": selected ? "true" : void 0,
1718
+ lang: locale.code,
1719
+ dir: locale.dir,
1720
+ children: [/* @__PURE__ */ jsx("span", { children: locale.label }), /* @__PURE__ */ jsx("span", {
1721
+ className: "text-xs text-zinc-400 dark:text-zinc-500",
1722
+ children: locale.code
1723
+ })]
1724
+ }) }, locale.code)];
1725
+ })
1726
+ })]
1727
+ });
1728
+ }
1729
+ function TopLevelNavItem(arg0) {
1730
+ const { href, children } = arg0;
1731
+ if (isExternalHref(href)) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
1732
+ href,
1733
+ className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
1734
+ target: "_blank",
1735
+ rel: "noreferrer",
1736
+ children
1737
+ }) });
1738
+ return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
1739
+ to: href,
1740
+ className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
1741
+ children
1742
+ }) });
1743
+ }
1744
+ var Header = forwardRef(function Header(arg0, ref) {
1745
+ const { config, navigation, routes, currentLocale, currentRoute, className, ...props } = arg0;
1746
+ const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
1747
+ const isInsideMobileNavigation = useIsInsideMobileNavigation();
1748
+ const { scrollY } = useScroll();
1749
+ const bgOpacityLight = useTransform(scrollY, [0, 72], ["50%", "90%"]);
1750
+ const bgOpacityDark = useTransform(scrollY, [0, 72], ["20%", "80%"]);
1751
+ return /* @__PURE__ */ jsxs(motion.div, {
1752
+ ...props,
1753
+ ref,
1754
+ className: clsx(className, "clarify-header fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80", !isInsideMobileNavigation && "backdrop-blur-xs lg:left-72 xl:left-80 dark:backdrop-blur-sm", isInsideMobileNavigation ? "bg-white dark:bg-zinc-950" : "bg-white/(--bg-opacity-light) dark:bg-zinc-950/(--bg-opacity-dark)"),
1755
+ style: {
1756
+ "--bg-opacity-light": bgOpacityLight,
1757
+ "--bg-opacity-dark": bgOpacityDark
1758
+ },
1759
+ children: [
1760
+ /* @__PURE__ */ jsx("div", { className: clsx("absolute inset-x-0 top-full h-px transition", (isInsideMobileNavigation || !mobileNavIsOpen) && "bg-zinc-900/7.5 dark:bg-white/7.5") }),
1761
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block" }),
1762
+ /* @__PURE__ */ jsxs("div", {
1763
+ className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
1764
+ children: [/* @__PURE__ */ jsx(MobileNavigation, {
1765
+ config,
1766
+ navigation,
1767
+ routes,
1768
+ currentLocale,
1769
+ currentRoute
1770
+ }), config.logo ? /* @__PURE__ */ jsxs(CloseButton, {
1771
+ as: Link,
1772
+ to: localizeHref("/", config, currentLocale),
1773
+ "aria-label": "Home",
1774
+ className: "clarify-brand flex items-center gap-2 no-underline",
1775
+ children: [/* @__PURE__ */ jsx(SiteLogo, {
1776
+ logo: config.logo,
1777
+ className: "h-6 w-6"
1778
+ }), /* @__PURE__ */ jsx("span", {
1779
+ className: "sr-only",
1780
+ children: config.title
1781
+ })]
1782
+ }) : null]
1783
+ }),
1784
+ /* @__PURE__ */ jsxs("div", {
1785
+ className: "clarify-header-actions flex items-center gap-5",
1786
+ children: [
1787
+ /* @__PURE__ */ jsx(Search, {
1788
+ routes,
1789
+ navigation
1790
+ }),
1791
+ config.navbar?.links?.length ? /* @__PURE__ */ jsx("nav", {
1792
+ className: "clarify-top-nav hidden md:block",
1793
+ children: /* @__PURE__ */ jsx("ul", {
1794
+ role: "list",
1795
+ className: "flex items-center gap-8",
1796
+ children: config.navbar.links.map((link) => /* @__PURE__ */ jsx(TopLevelNavItem, {
1797
+ href: localizeHref(link.href, config, currentLocale),
1798
+ children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
1799
+ }, link.href))
1800
+ })
1801
+ }) : null,
1802
+ config.navbar?.links?.length ? /* @__PURE__ */ jsx("div", { className: "hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" }) : null,
1803
+ /* @__PURE__ */ jsx(MobileSearch, {
1804
+ routes,
1805
+ navigation
1806
+ }),
1807
+ /* @__PURE__ */ jsx(LanguageSwitcher, {
1808
+ config,
1809
+ currentLocale,
1810
+ currentRoute
1811
+ }),
1812
+ /* @__PURE__ */ jsx(ThemeToggle, {})
1813
+ ]
1814
+ })
1815
+ ]
1816
+ });
1817
+ });
1818
+ //#endregion
1819
+ //#region source/app/AppShell.tsx
1820
+ function routeForPath(routes, pathname) {
1821
+ return routes.find((route) => route.path === pathname || `/${route.path}` === pathname);
1822
+ }
1823
+ function sectionsForRoute(route) {
1824
+ return route?.sections?.map((section) => ({
1825
+ id: section.id,
1826
+ title: section.title,
1827
+ badge: section.badge,
1828
+ tags: section.tags
1829
+ })) ?? [];
1830
+ }
1831
+ function scrollToHash(hash) {
1832
+ if (!hash) return;
1833
+ const targetId = decodeURIComponent(hash.slice(1));
1834
+ window.requestAnimationFrame(() => {
1835
+ document.getElementById(targetId)?.scrollIntoView();
1836
+ });
1837
+ }
1838
+ function localeForPath(config, pathname, route) {
1839
+ if (route?.locale) return route.locale;
1840
+ const i18n = config.i18n;
1841
+ if (!i18n) return void 0;
1842
+ const firstSegment = pathname.split("/").filter(Boolean)[0];
1843
+ return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
1844
+ }
1845
+ function navigationForLocale(navigation, locale) {
1846
+ if (Array.isArray(navigation)) return navigation;
1847
+ if (!locale) return [];
1848
+ return navigation[locale] ?? [];
1849
+ }
1850
+ function homePathForLocale(config, locale) {
1851
+ if (!locale || !config.i18n || locale === config.i18n.defaultLocale) return "/";
1852
+ return `/${locale}`;
1853
+ }
1854
+ function AppShell(arg0) {
1855
+ const { config, routes, navigation } = arg0;
1856
+ const location = useLocation();
1857
+ const currentRoute = routeForPath(routes, location.pathname);
1858
+ const currentLocale = localeForPath(config, location.pathname, currentRoute);
1859
+ const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
1860
+ const currentNavigation = navigationForLocale(navigation, currentLocale);
1861
+ const sections = sectionsForRoute(currentRoute);
1862
+ useEffect(() => {
1863
+ scrollToHash(location.hash);
1864
+ }, [location.hash, location.pathname]);
1865
+ useEffect(() => {
1866
+ if (!currentLocale) return;
1867
+ document.documentElement.lang = currentLocale;
1868
+ if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
1869
+ else document.documentElement.removeAttribute("dir");
1870
+ }, [currentLocale, currentLocaleConfig?.dir]);
1871
+ return /* @__PURE__ */ jsx(SectionProvider, {
1872
+ sections,
1873
+ children: /* @__PURE__ */ jsxs("div", {
1874
+ className: "clarify-app h-full min-h-screen bg-white lg:ml-72 xl:ml-80 dark:bg-zinc-950",
1875
+ children: [/* @__PURE__ */ jsx(motion.header, {
1876
+ layoutScroll: true,
1877
+ className: "clarify-shell contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex",
1878
+ children: /* @__PURE__ */ jsxs("div", {
1879
+ className: "clarify-sidebar contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:bg-white lg:px-6 lg:pt-4 lg:pb-8 xl:w-80 lg:dark:border-white/10 lg:dark:bg-zinc-950",
1880
+ children: [
1881
+ /* @__PURE__ */ jsx("div", {
1882
+ className: "clarify-sidebar-brand hidden lg:flex",
1883
+ children: /* @__PURE__ */ jsxs(Link, {
1884
+ to: homePathForLocale(config, currentLocale),
1885
+ "aria-label": "Home",
1886
+ className: "clarify-brand flex items-center gap-2 no-underline",
1887
+ children: [/* @__PURE__ */ jsx(SiteLogo, {
1888
+ logo: config.logo,
1889
+ className: "h-6 w-6"
1890
+ }), /* @__PURE__ */ jsx("span", {
1891
+ className: "clarify-brand-title text-sm font-semibold text-zinc-900 dark:text-white",
1892
+ children: config.title
1893
+ })]
1894
+ })
1895
+ }),
1896
+ /* @__PURE__ */ jsx(Header, {
1897
+ config,
1898
+ navigation: currentNavigation,
1899
+ routes,
1900
+ currentLocale,
1901
+ currentRoute
1902
+ }),
1903
+ /* @__PURE__ */ jsx(Navigation, {
1904
+ navigation: currentNavigation,
1905
+ className: "clarify-navigation hidden lg:mt-10 lg:block"
1906
+ })
1907
+ ]
1908
+ })
1909
+ }), /* @__PURE__ */ jsxs("div", {
1910
+ className: "clarify-content relative flex min-h-screen flex-col px-4 pt-14 sm:px-6 lg:px-8",
1911
+ children: [/* @__PURE__ */ jsx(ContentActions, {
1912
+ route: currentRoute,
1913
+ routePrefix: config.routePrefix
1914
+ }), /* @__PURE__ */ jsx("main", {
1915
+ className: "clarify-main flex-auto",
1916
+ children: /* @__PURE__ */ jsx(Routes, { children: routes.map((route) => /* @__PURE__ */ jsx(Route, {
1917
+ path: route.path,
1918
+ element: /* @__PURE__ */ jsx(route.component, {})
1919
+ }, route.path)) })
1920
+ })]
1921
+ })]
1922
+ })
1923
+ });
1924
+ }
1925
+ //#endregion
1926
+ export { BuiltWithClarify as C, remToPx as E, Pre as S, useSectionStore as T, GridPattern as _, Heading as a, Code as b, Tag as c, useTheme as d, PageFooter as f, useOpenApis as g, useClarifyConfig as h, DocShell as i, ThemeToggle as l, OpenApisContext as m, ApiEndpointCard as n, Logo as o, ClarifyConfigContext as p, Button as r, Prose as s, AppShell as t, ThemeProvider as u, HeroPattern as v, SectionProvider as w, CodeGroup as x, Feedback as y };
1927
+
1928
+ //# sourceMappingURL=AppShell-C_bj6ZhV.js.map