@hanzo/docs-base-ui 16.5.3 → 16.7.5

package/dist/components/dialog/search.js

@@ -1,45 +1,131 @@
-'use client';
-
+"use client";
 import { I18nLabel, useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { buttonVariants } from "../ui/button.js";
 import { Fragment, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useRouter } from "@hanzo/docs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Hash, Search } from "lucide-react";
+import { ChevronRight, Hash, SearchIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { Dialog } from "@base-ui/react/dialog";
-
+import { createMarkdownRenderer } from "@hanzo/docs-core/content/md";
+import rehypeRaw from "rehype-raw";
+import { visit } from "unist-util-visit";
 //#region src/components/dialog/search.tsx
-const Context = createContext(null);
+const RootContext = createContext(null);
 const ListContext = createContext(null);
 const TagsListContext = createContext(null);
+const PreContext = createContext(false);
+const mdRenderer = createMarkdownRenderer({
+	remarkRehypeOptions: { allowDangerousHtml: true },
+	rehypePlugins: [rehypeRaw, rehypeCustomElements]
+});
+const mdComponents = {
+	mark(props) {
+		return /* @__PURE__ */ jsx("span", {
+			...props,
+			className: "text-fd-primary underline"
+		});
+	},
+	a: "span",
+	p(props) {
+		return /* @__PURE__ */ jsx("p", {
+			...props,
+			className: "min-w-0"
+		});
+	},
+	strong(props) {
+		return /* @__PURE__ */ jsx("strong", {
+			...props,
+			className: "text-fd-accent-foreground font-medium"
+		});
+	},
+	code(props) {
+		if (use(PreContext)) return /* @__PURE__ */ jsx("code", {
+			...props,
+			className: "mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]"
+		});
+		return /* @__PURE__ */ jsx("code", {
+			...props,
+			className: "border rounded-md px-px bg-fd-secondary text-fd-secondary-foreground"
+		});
+	},
+	custom({ _tagName = "fragment", children, ...rest }) {
+		return /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex max-w-full items-center border p-0.5 rounded-md bg-fd-card text-fd-card-foreground divide-x divide-fd-border",
+			children: [
+				/* @__PURE__ */ jsx("code", {
+					className: "rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground border-none",
+					children: _tagName
+				}),
+				Object.entries(rest).map(([k, v]) => {
+					if (typeof v !== "string") return;
+					return /* @__PURE__ */ jsxs("code", {
+						className: "truncate text-xs text-fd-muted-foreground px-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-fd-card-foreground",
+							children: [k, ": "]
+						}), v]
+					}, k);
+				}),
+				children && /* @__PURE__ */ jsx("span", {
+					className: "ps-1",
+					children
+				})
+			]
+		});
+	},
+	pre(props) {
+		return /* @__PURE__ */ jsx("pre", {
+			...props,
+			className: cn("flex flex-col border rounded-md my-0.5 p-2 bg-fd-secondary text-fd-secondary-foreground max-h-20 overflow-hidden", props.className),
+			children: /* @__PURE__ */ jsx(PreContext, {
+				value: true,
+				children: props.children
+			})
+		});
+	}
+};
+function rehypeCustomElements() {
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type === "element" && document.createElement(node.tagName) instanceof HTMLUnknownElement) {
+				node.properties._tagName = node.tagName;
+				node.tagName = "custom";
+			}
+		});
+	};
+}
 function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading = false, onSelect: onSelectProp, children }) {
 	const router = useRouter();
-	const onSelect = useEffectEvent((item) => {
+	const onOpenChangeCallback = useRef(onOpenChange);
+	onOpenChangeCallback.current = onOpenChange;
+	const onSearchChangeCallback = useRef(onSearchChange);
+	onSearchChangeCallback.current = onSearchChange;
+	const onSelect = (item) => {
 		if (item.type === "action") item.onSelect();
 		else if (item.external) window.open(item.url, "_blank")?.focus();
 		else router.push(item.url);
 		onOpenChange(false);
 		onSelectProp?.(item);
-	});
+	};
+	const onSelectCallback = useRef(onSelect);
+	onSelectCallback.current = onSelect;
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange,
-		children: /* @__PURE__ */ jsx(Context.Provider, {
+		children: /* @__PURE__ */ jsx(RootContext, {
 			value: useMemo(() => ({
 				open,
-				onOpenChange,
 				search,
-				onSearchChange,
-				onSelect,
-				isLoading
+				isLoading,
+				onOpenChange: (v) => onOpenChangeCallback.current(v),
+				onSearchChange: (v) => onSearchChangeCallback.current(v),
+				onSelect: (v) => onSelectCallback.current(v)
 			}), [
 				isLoading,
-				onOpenChange,
-				onSearchChange,
 				open,
 				search
 			]),
@@ -87,15 +173,16 @@ function SearchDialogFooter(props) {
 function SearchDialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		...props,
-		className: (s) => cn("fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-[open]:animate-fd-fade-in data-[closed]:animate-fd-fade-out", typeof className === "function" ? className(s) : className)
+		className: (s) => cn("fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-open:animate-fd-fade-in data-closed:animate-fd-fade-out", typeof className === "function" ? className(s) : className)
 	});
 }
 function SearchDialogContent({ children, className, ...props }) {
 	const { text } = useI18n();
 	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+		id: "fd-search-dialog-content",
 		"aria-describedby": void 0,
 		...props,
-		className: (s) => cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-[closed]:animate-fd-dialog-out data-[open]:animate-fd-dialog-in", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", typeof className === "function" ? className(s) : className),
+		className: (s) => cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl overflow-hidden data-closed:animate-fd-dialog-out data-open:animate-fd-dialog-in focus-visible:outline-none", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", typeof className === "function" ? className(s) : className),
 		children: [/* @__PURE__ */ jsx(Dialog.Title, {
 			className: "hidden",
 			children: text.search
@@ -134,10 +221,11 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		});
 		const viewport = element.firstElementChild;
 		if (viewport) observer.observe(viewport);
-		window.addEventListener("keydown", onKey);
+		const content = document.getElementById("fd-search-dialog-content") ?? window;
+		content.addEventListener("keydown", onKey);
 		return () => {
 			observer.disconnect();
-			window.removeEventListener("keydown", onKey);
+			content.removeEventListener("keydown", onKey);
 		};
 	}, []);
 	useOnChange(items, () => {
@@ -150,7 +238,7 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		className: cn("overflow-hidden h-(--fd-animated-height) transition-[height]", props.className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("w-full flex flex-col overflow-y-auto max-h-[460px] p-1", !items && "hidden"),
-			children: /* @__PURE__ */ jsxs(ListContext.Provider, {
+			children: /* @__PURE__ */ jsxs(ListContext, {
 				value: useMemo(() => ({
 					active,
 					setActive
@@ -163,7 +251,10 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		})
 	});
 }
-function SearchDialogListItem({ item, className, children, renderHighlights: render = renderHighlights, ...props }) {
+function SearchDialogListItem({ item, className, children, renderMarkdown = (s) => /* @__PURE__ */ jsx(mdRenderer.Markdown, {
+	components: mdComponents,
+	children: s
+}), renderHighlights: _, ...props }) {
 	const { active: activeId, setActive } = useSearchList();
 	const active = item.id === activeId;
 	if (item.type === "action") children ??= item.node;
@@ -176,9 +267,10 @@ function SearchDialogListItem({ item, className, children, renderHighlights: ren
 			role: "none",
 			className: "absolute start-3 inset-y-0 w-px bg-fd-border"
 		}),
-		/* @__PURE__ */ jsxs("p", {
-			className: cn("min-w-0 truncate", item.type !== "page" && "ps-4", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
-			children: [item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "inline me-1 size-4 text-fd-muted-foreground" }), item.contentWithHighlights ? render(item.contentWithHighlights) : item.content]
+		item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "absolute start-6 top-2.5 size-4 text-fd-muted-foreground" }),
+		/* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", item.type === "text" && "ps-4", item.type === "heading" && "ps-8", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
+			children: typeof item.content === "string" ? renderMarkdown(item.content) : item.content
 		})
 	] });
 	return /* @__PURE__ */ jsx("button", {
@@ -191,7 +283,7 @@ function SearchDialogListItem({ item, className, children, renderHighlights: ren
 			});
 		}, [active]),
 		"aria-selected": active,
-		className: cn("relative select-none px-2.5 py-2 text-start text-sm rounded-lg", active && "bg-fd-accent text-fd-accent-foreground", className),
+		className: cn("relative select-none shrink-0 px-2.5 py-2 text-start text-sm overflow-hidden rounded-lg", active && "bg-fd-accent text-fd-accent-foreground", className),
 		onPointerMove: () => setActive(item.id),
 		...props,
 		children
@@ -199,26 +291,24 @@ function SearchDialogListItem({ item, className, children, renderHighlights: ren
 }
 function SearchDialogIcon(props) {
 	const { isLoading } = useSearch();
-	return /* @__PURE__ */ jsx(Search, {
+	return /* @__PURE__ */ jsx(SearchIcon, {
 		...props,
 		className: cn("size-5 text-fd-muted-foreground", isLoading && "animate-pulse duration-400", props.className)
 	});
 }
 const itemVariants = cva("rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors", { variants: { active: { true: "bg-fd-accent text-fd-accent-foreground" } } });
 function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
+	const onTagChangeCallback = useRef(onTagChange);
+	onTagChangeCallback.current = onTagChange;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className: cn("flex items-center gap-1 flex-wrap", props.className),
-		children: /* @__PURE__ */ jsx(TagsListContext.Provider, {
+		children: /* @__PURE__ */ jsx(TagsListContext, {
 			value: useMemo(() => ({
 				value: tag,
-				onValueChange: onTagChange,
+				onValueChange: (v) => onTagChangeCallback.current(v),
 				allowClear
-			}), [
-				allowClear,
-				onTagChange,
-				tag
-			]),
+			}), [allowClear, tag]),
 			children: props.children
 		})
 	});
@@ -233,25 +323,14 @@ function TagsListItem({ value, className, ...props }) {
 			active: selected,
 			className
 		})),
-		onClick: () => {
-			onValueChange(selected && allowClear ? void 0 : value);
-		},
+		onClick: () => onValueChange(selected && allowClear ? void 0 : value),
 		tabIndex: -1,
 		...props,
 		children: props.children
 	});
 }
-function renderHighlights(highlights) {
-	return highlights.map((node, i) => {
-		if (node.styles?.highlight) return /* @__PURE__ */ jsx("span", {
-			className: "text-fd-primary underline",
-			children: node.content
-		}, i);
-		return /* @__PURE__ */ jsx(Fragment, { children: node.content }, i);
-	});
-}
 function useSearch() {
-	const ctx = use(Context);
+	const ctx = use(RootContext);
 	if (!ctx) throw new Error("Missing <SearchDialog />");
 	return ctx;
 }
@@ -265,7 +344,5 @@ function useSearchList() {
 	if (!ctx) throw new Error("Missing <SearchDialogList />");
 	return ctx;
 }
-
 //#endregion
 export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, TagsList, TagsListItem, useSearch, useSearchList, useTagsList };
-//# sourceMappingURL=search.js.map

package/dist/components/dynamic-codeblock.core.d.ts

@@ -1,9 +1,11 @@
 import { CodeBlockProps } from "./codeblock.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { UseShikiOptions } from "@hanzo/docs-core/highlight/core/client";
+import { UseShikiOptions } from "@hanzo/docs-core/highlight/shiki/react";
+import { HighlighterCore } from "shiki";
 
 //#region src/components/dynamic-codeblock.core.d.ts
 interface DynamicCodeblockProps {
+  highlighter: HighlighterCore | (() => HighlighterCore | PromiseLike<HighlighterCore>);
   lang: string;
   code: string;
   /**
@@ -18,7 +20,7 @@ interface DynamicCodeblockProps {
    * @defaultValue true
    */
   wrapInSuspense?: boolean;
-  options?: DistributiveOmit<UseShikiOptions, 'lang'>;
+  options: DistributiveOmit<UseShikiOptions, 'lang'>;
 }
 type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
 declare function DynamicCodeBlock({
@@ -26,8 +28,8 @@ declare function DynamicCodeBlock({
   code,
   codeblock,
   options,
-  wrapInSuspense
+  wrapInSuspense,
+  highlighter
 }: DynamicCodeblockProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DynamicCodeBlock, DynamicCodeblockProps };
-//# sourceMappingURL=dynamic-codeblock.core.d.ts.map
+export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/dynamic-codeblock.core.js

@@ -1,11 +1,9 @@
-'use client';
-
+"use client";
 import { cn } from "../utils/cn.js";
 import { CodeBlock, Pre } from "./codeblock.js";
-import { Suspense, createContext, use, useDeferredValue, useId } from "react";
+import { createContext, use, useId } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useShiki } from "@hanzo/docs-core/highlight/core/client";
-
+import { useShikiDynamic } from "@hanzo/docs-core/highlight/shiki/react";
 //#region src/components/dynamic-codeblock.core.tsx
 const PropsContext = createContext(void 0);
 function DefaultPre(props) {
@@ -17,34 +15,30 @@ function DefaultPre(props) {
 		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
 	});
 }
-function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true }) {
+function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true, highlighter }) {
 	const id = useId();
 	const shikiOptions = {
 		lang,
+		defaultColor: false,
 		...options,
 		components: {
 			pre: DefaultPre,
-			...options?.components
+			...options.components
 		}
 	};
-	const children = /* @__PURE__ */ jsx(PropsContext, {
-		value: codeblock,
-		children: /* @__PURE__ */ jsx(Internal, {
-			id,
-			...useDeferredValue({
-				code,
-				options: shikiOptions
-			})
-		})
+	let node = useShikiDynamic(highlighter, code, shikiOptions, [
+		id,
+		lang,
+		code
+	]);
+	if (wrapInSuspense) node ??= /* @__PURE__ */ jsx(Placeholder, {
+		code,
+		components: shikiOptions.components
 	});
-	if (wrapInSuspense) return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(Placeholder, {
-			code,
-			components: shikiOptions.components
-		}),
-		children
+	return /* @__PURE__ */ jsx(PropsContext, {
+		value: codeblock,
+		children: node
 	});
-	return children;
 }
 function Placeholder({ code, components = {} }) {
 	const { pre: Pre = "pre", code: Code = "code" } = components;
@@ -53,14 +47,5 @@ function Placeholder({ code, components = {} }) {
 		children: line
 	}, i)) }) });
 }
-function Internal({ id, code, options }) {
-	return useShiki(code, options, [
-		id,
-		options.lang,
-		code
-	]);
-}
-
 //#endregion
 export { DynamicCodeBlock };
-//# sourceMappingURL=dynamic-codeblock.core.js.map

package/dist/components/dynamic-codeblock.d.ts

@@ -1,8 +1,10 @@
-import { DynamicCodeblockProps } from "./dynamic-codeblock.core.js";
+import { DynamicCodeblockProps as DynamicCodeblockProps$1 } from "./dynamic-codeblock.core.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/dynamic-codeblock.d.ts
+type DynamicCodeblockProps = Omit<DynamicCodeblockProps$1, 'highlighter' | 'options'> & {
+  options?: DynamicCodeblockProps$1['options'];
+};
 declare function DynamicCodeBlock(props: DynamicCodeblockProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DynamicCodeBlock, type DynamicCodeblockProps };
-//# sourceMappingURL=dynamic-codeblock.d.ts.map
+export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/dynamic-codeblock.js

@@ -1,22 +1,17 @@
-'use client';
-
+"use client";
 import { DynamicCodeBlock as DynamicCodeBlock$1 } from "./dynamic-codeblock.core.js";
 import { jsx } from "react/jsx-runtime";
-import { useShikiConfigOptional } from "@hanzo/docs-core/highlight/core/client";
-import { configDefault } from "@hanzo/docs-core/highlight";
-
+import { defaultShikiFactory } from "@hanzo/docs-core/highlight/shiki/full";
 //#region src/components/dynamic-codeblock.tsx
 function DynamicCodeBlock(props) {
-	const config = useShikiConfigOptional() ?? configDefault;
 	return /* @__PURE__ */ jsx(DynamicCodeBlock$1, {
-		...props,
-		options: {
-			config,
-			...props.options
-		}
+		highlighter: () => defaultShikiFactory.getOrInit(),
+		options: { themes: {
+			light: "github-light",
+			dark: "github-dark"
+		} },
+		...props
 	});
 }
-
 //#endregion
 export { DynamicCodeBlock };
-//# sourceMappingURL=dynamic-codeblock.js.map

package/dist/components/files.d.ts

@@ -31,5 +31,4 @@ declare function Folder({
   ...props
 }: FolderProps): React.ReactElement;
 //#endregion
-export { File, FileProps, Files, Folder, FolderProps };
-//# sourceMappingURL=files.d.ts.map
+export { File, FileProps, Files, Folder, FolderProps };

package/dist/components/files.js

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { File as File$1, Folder as Folder$1, FolderOpen } from "lucide-react";
+import { FileIcon, FolderIcon, FolderOpen } from "lucide-react";
 import { cva } from "class-variance-authority";
-
 //#region src/components/files.tsx
 const itemVariants = cva("flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4");
 function Files({ className, ...props }) {
@@ -16,7 +14,7 @@ function Files({ className, ...props }) {
 		children: props.children
 	});
 }
-function File({ name, icon = /* @__PURE__ */ jsx(File$1, {}), className, ...rest }) {
+function File({ name, icon = /* @__PURE__ */ jsx(FileIcon, {}), className, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(itemVariants({ className })),
 		...rest,
@@ -31,14 +29,12 @@ function Folder({ name, defaultOpen = false, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
 			className: cn(itemVariants({ className: "w-full" })),
-			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder$1, {}), name]
+			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(FolderIcon, {}), name]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
 			className: "ms-2 flex flex-col border-l ps-2",
 			children: props.children
 		}) })]
 	});
 }
-
 //#endregion
 export { File, Files, Folder };
-//# sourceMappingURL=files.js.map

package/dist/components/github-info.d.ts

@@ -1,19 +1,32 @@
-import { AnchorHTMLAttributes } from "react";
+import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/github-info.d.ts
+interface FetchRepositoryInfoOptions {
+  owner: string;
+  repo: string;
+  baseUrl?: string;
+  token?: string;
+  fetchOptions?: RequestInit;
+}
+interface RepositoryInfo {
+  stars: number;
+  forks: number;
+}
+declare function fetchRepositoryInfo({
+  owner,
+  repo,
+  token,
+  baseUrl,
+  fetchOptions
+}: FetchRepositoryInfoOptions): Promise<RepositoryInfo>;
 declare function GithubInfo({
   repo,
   owner,
   token,
   baseUrl,
+  fetchOptions,
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & {
-  owner: string;
-  repo: string;
-  token?: string;
-  baseUrl?: string;
-}): Promise<react_jsx_runtime0.JSX.Element>;
+}: ComponentProps<'a'> & FetchRepositoryInfoOptions): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { GithubInfo };
-//# sourceMappingURL=github-info.d.ts.map
+export { FetchRepositoryInfoOptions, GithubInfo, RepositoryInfo, fetchRepositoryInfo };

package/dist/components/github-info.js

@@ -1,15 +1,16 @@
 import { cn } from "../utils/cn.js";
+import { use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Star } from "lucide-react";
-
+import { GitFork, Star } from "lucide-react";
 //#region src/components/github-info.tsx
-async function getRepoStarsAndForks(owner, repo, token, baseUrl = "https://api.github.com") {
+async function fetchRepositoryInfo({ owner, repo, token, baseUrl = "https://api.github.com", fetchOptions = { next: { revalidate: 60 } } }) {
 	const endpoint = `${baseUrl}/repos/${owner}/${repo}`;
-	const headers = new Headers({ "Content-Type": "application/json" });
+	const headers = new Headers(fetchOptions.headers);
+	headers.set("Content-Type", "application/json");
 	if (token) headers.set("Authorization", `Bearer ${token}`);
 	const response = await fetch(endpoint, {
-		headers,
-		next: { revalidate: 60 }
+		...fetchOptions,
+		headers
 	});
 	if (!response.ok) {
 		const message = await response.text();
@@ -21,15 +22,29 @@ async function getRepoStarsAndForks(owner, repo, token, baseUrl = "https://api.g
 		forks: data.forks_count
 	};
 }
-async function GithubInfo({ repo, owner, token, baseUrl, ...props }) {
-	const { stars } = await getRepoStarsAndForks(owner, repo, token, baseUrl);
-	const humanizedStars = humanizeNumber(stars);
+/**
+* Uses compact notation (e.g., 1.5K, 2.3M).
+*/
+const defaultFormatter = new Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const promises = {};
+function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, ...props }) {
+	const options = {
+		repo,
+		owner,
+		token,
+		baseUrl,
+		fetchOptions
+	};
+	const { stars, forks } = use(promises[JSON.stringify(options)] ??= fetchRepositoryInfo(options));
 	return /* @__PURE__ */ jsxs("a", {
 		href: `https://github.com/${owner}/${repo}`,
 		rel: "noreferrer noopener",
 		target: "_blank",
 		...props,
-		className: cn("flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent", props.className),
+		className: cn("flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors hover:text-fd-accent-foreground hover:bg-fd-accent", props.className),
 		children: [/* @__PURE__ */ jsxs("p", {
 			className: "flex items-center gap-2 truncate",
 			children: [
@@ -43,26 +58,16 @@ async function GithubInfo({ repo, owner, token, baseUrl, ...props }) {
 				"/",
 				repo
 			]
-		}), /* @__PURE__ */ jsxs("p", {
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex text-xs items-center gap-1 text-fd-muted-foreground",
-			children: [/* @__PURE__ */ jsx(Star, { className: "size-3" }), humanizedStars]
+			children: [
+				/* @__PURE__ */ jsx(Star, { className: "size-3" }),
+				/* @__PURE__ */ jsx("span", { children: defaultFormatter.format(stars) }),
+				/* @__PURE__ */ jsx(GitFork, { className: "size-3 ms-2" }),
+				/* @__PURE__ */ jsx("span", { children: defaultFormatter.format(forks) })
+			]
 		})]
 	});
 }
-/**
-* Converts a number to a human-readable string with K suffix for thousands
-* @example 1500 -> "1.5K", 1000000 -> "1000000"
-*/
-function humanizeNumber(num) {
-	if (num < 1e3) return num.toString();
-	if (num < 1e5) {
-		const value = (num / 1e3).toFixed(1);
-		return `${value.endsWith(".0") ? value.slice(0, -2) : value}K`;
-	}
-	if (num < 1e6) return `${Math.floor(num / 1e3)}K`;
-	return num.toString();
-}
-
 //#endregion
-export { GithubInfo };
-//# sourceMappingURL=github-info.js.map
+export { GithubInfo, fetchRepositoryInfo };

package/dist/components/heading.d.ts

@@ -11,5 +11,4 @@ declare function Heading<T extends Types = 'h1'>({
   ...props
 }: HeadingProps<T>): React.ReactElement;
 //#endregion
-export { Heading };
-//# sourceMappingURL=heading.d.ts.map
+export { Heading };

package/dist/components/heading.js

@@ -1,7 +1,6 @@
 import { cn } from "../utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "lucide-react";
-
+import { LinkIcon } from "lucide-react";
 //#region src/components/heading.tsx
 function Heading({ as, className, ...props }) {
 	const As = as ?? "h1";
@@ -17,13 +16,11 @@ function Heading({ as, className, ...props }) {
 			href: `#${props.id}`,
 			className: "peer",
 			children: props.children
-		}), /* @__PURE__ */ jsx(Link, {
+		}), /* @__PURE__ */ jsx(LinkIcon, {
 			"aria-hidden": true,
 			className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
 		})]
 	});
 }
-
 //#endregion
 export { Heading };
-//# sourceMappingURL=heading.js.map