@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/dist/components/dialog/search.d.ts

@@ -1,6 +1,6 @@
-import { search_d_exports } from "../../contexts/search.js";
-import * as react_jsx_runtime117 from "react/jsx-runtime";
+import { SharedProps } from "../../contexts/search.js";
 import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 import { HighlightedText, ReactSortedResult } from "@hanzo/docs-core/search";
 
@@ -13,7 +13,7 @@ type SearchItemType = (ReactSortedResult & {
   node: ReactNode;
   onSelect: () => void;
 };
-interface SearchDialogProps extends search_d_exports.SharedProps {
+interface SearchDialogProps extends SharedProps {
   search: string;
   onSearchChange: (v: string) => void;
   onSelect?: (item: SearchItemType) => void;
@@ -28,24 +28,24 @@ declare function SearchDialog({
   isLoading,
   onSelect: onSelectProp,
   children
-}: SearchDialogProps): react_jsx_runtime117.JSX.Element;
-declare function SearchDialogHeader(props: ComponentProps<'div'>): react_jsx_runtime117.JSX.Element;
-declare function SearchDialogInput(props: ComponentProps<'input'>): react_jsx_runtime117.JSX.Element;
+}: SearchDialogProps): react_jsx_runtime0.JSX.Element;
+declare function SearchDialogHeader(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function SearchDialogInput(props: ComponentProps<'input'>): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogClose({
   children,
   className,
   ...props
-}: ComponentProps<'button'>): react_jsx_runtime117.JSX.Element;
-declare function SearchDialogFooter(props: ComponentProps<'div'>): react_jsx_runtime117.JSX.Element;
+}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function SearchDialogFooter(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogOverlay({
   className,
   ...props
-}: ComponentProps<typeof Dialog.Backdrop>): react_jsx_runtime117.JSX.Element;
+}: ComponentProps<typeof Dialog.Backdrop>): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogContent({
   children,
   className,
   ...props
-}: ComponentProps<typeof Dialog.Popup>): react_jsx_runtime117.JSX.Element;
+}: ComponentProps<typeof Dialog.Popup>): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogList({
   items,
   Empty,
@@ -64,18 +64,20 @@ declare function SearchDialogList({
     item: SearchItemType;
     onClick: () => void;
   }) => ReactNode;
-}): react_jsx_runtime117.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogListItem({
   item,
   className,
   children,
-  renderHighlights: render,
+  renderMarkdown,
+  renderHighlights: _,
   ...props
 }: ComponentProps<'button'> & {
-  renderHighlights?: typeof renderHighlights;
+  renderMarkdown?: (v: string) => ReactNode; /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */
+  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;
   item: SearchItemType;
-}): react_jsx_runtime117.JSX.Element;
-declare function SearchDialogIcon(props: ComponentProps<'svg'>): react_jsx_runtime117.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
+declare function SearchDialogIcon(props: ComponentProps<'svg'>): react_jsx_runtime0.JSX.Element;
 interface TagsListProps extends ComponentProps<'div'> {
   tag?: string;
   onTagChange: (tag: string | undefined) => void;
@@ -86,15 +88,14 @@ declare function TagsList({
   onTagChange,
   allowClear,
   ...props
-}: TagsListProps): react_jsx_runtime117.JSX.Element;
+}: TagsListProps): react_jsx_runtime0.JSX.Element;
 declare function TagsListItem({
   value,
   className,
   ...props
 }: ComponentProps<'button'> & {
   value: string;
-}): react_jsx_runtime117.JSX.Element;
-declare function renderHighlights(highlights: HighlightedText<ReactNode>[]): ReactNode;
+}): react_jsx_runtime0.JSX.Element;
 declare function useSearch(): {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -112,6 +113,5 @@ declare function useSearchList(): {
   active: string | null;
   setActive: (v: string | null) => void;
 };
-type SharedProps = search_d_exports.SharedProps;
-export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, SearchDialogProps, SearchItemType, type SharedProps, TagsList, TagsListItem, TagsListProps, useSearch, useSearchList, useTagsList };
-//# sourceMappingURL=search.d.ts.map
+//#endregion
+export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, SearchDialogProps, SearchItemType, type SharedProps, TagsList, TagsListItem, TagsListProps, useSearch, useSearchList, useTagsList };

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 { i18n_exports } from "../../contexts/i18n.js";
+import { Fragment, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useRouter } from "@hanzo/docs-core/framework";
-import { cn } from "@hanzo/docs-ui/cn";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Hash, Search } from "lucide-react";
-import { Fragment as Fragment$1, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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
 			]),
@@ -54,7 +140,7 @@ function SearchDialogHeader(props) {
 	});
 }
 function SearchDialogInput(props) {
-	const { text } = (0, i18n_exports.useI18n)();
+	const { text } = useI18n();
 	const { search, onSearchChange } = useSearch();
 	return /* @__PURE__ */ jsx("input", {
 		...props,
@@ -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 } = (0, i18n_exports.useI18n)();
+	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
@@ -104,8 +191,8 @@ function SearchDialogContent({ children, className, ...props }) {
 }
 function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div", {
 	className: "py-12 text-center text-sm text-fd-muted-foreground",
-	children: /* @__PURE__ */ jsx(i18n_exports.I18nLabel, { label: "searchNoResult" })
-}), Item = (props$1) => /* @__PURE__ */ jsx(SearchDialogListItem, { ...props$1 }), ...props }) {
+	children: /* @__PURE__ */ jsx(I18nLabel, { label: "searchNoResult" })
+}), Item = (props) => /* @__PURE__ */ jsx(SearchDialogListItem, { ...props }), ...props }) {
 	const ref = useRef(null);
 	const { onSelect } = useSearch();
 	const [active, setActive] = useState(() => items && items.length > 0 ? items[0].id : null);
@@ -129,15 +216,16 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		const element = ref.current;
 		if (!element) return;
 		const observer = new ResizeObserver(() => {
-			const viewport$1 = element.firstElementChild;
-			element.style.setProperty("--fd-animated-height", `${viewport$1.clientHeight}px`);
+			const viewport = element.firstElementChild;
+			element.style.setProperty("--fd-animated-height", `${viewport.clientHeight}px`);
 		});
 		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,12 +238,12 @@ 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
 				}), [active]),
-				children: [items?.length === 0 && Empty(), items?.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: Item({
+				children: [items?.length === 0 && Empty(), items?.map((item) => /* @__PURE__ */ jsx(Fragment, { children: Item({
 					item,
 					onClick: () => onSelect(item)
 				}) }, item.id))]
@@ -163,22 +251,26 @@ 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;
-	else children ??= /* @__PURE__ */ jsxs(Fragment, { children: [
+	else children ??= /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "inline-flex items-center text-fd-muted-foreground text-xs empty:hidden",
-			children: item.breadcrumbs?.map((item$1, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }), item$1] }, i))
+			children: item.breadcrumbs?.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }), item] }, i))
 		}),
 		item.type !== "page" && /* @__PURE__ */ jsx("div", {
 			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$1, { 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

@@ -0,0 +1,35 @@
+import { CodeBlockProps } from "./codeblock.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+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;
+  /**
+   * Extra props for the underlying `<CodeBlock />` component.
+   *
+   * Ignored if you defined your own `pre` component in `options.components`.
+   */
+  codeblock?: CodeBlockProps;
+  /**
+   * Wrap in React `<Suspense />` and provide a fallback.
+   *
+   * @defaultValue true
+   */
+  wrapInSuspense?: boolean;
+  options: DistributiveOmit<UseShikiOptions, 'lang'>;
+}
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+declare function DynamicCodeBlock({
+  lang,
+  code,
+  codeblock,
+  options,
+  wrapInSuspense,
+  highlighter
+}: DynamicCodeblockProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DynamicCodeBlock, DynamicCodeblockProps };

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

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { CodeBlock, Pre } from "./codeblock.js";
+import { createContext, use, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useShikiDynamic } from "@hanzo/docs-core/highlight/shiki/react";
+//#region src/components/dynamic-codeblock.core.tsx
+const PropsContext = createContext(void 0);
+function DefaultPre(props) {
+	const extraProps = use(PropsContext);
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		...props,
+		...extraProps,
+		className: cn("my-0", props.className, extraProps?.className),
+		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+	});
+}
+function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true, highlighter }) {
+	const id = useId();
+	const shikiOptions = {
+		lang,
+		defaultColor: false,
+		...options,
+		components: {
+			pre: DefaultPre,
+			...options.components
+		}
+	};
+	let node = useShikiDynamic(highlighter, code, shikiOptions, [
+		id,
+		lang,
+		code
+	]);
+	if (wrapInSuspense) node ??= /* @__PURE__ */ jsx(Placeholder, {
+		code,
+		components: shikiOptions.components
+	});
+	return /* @__PURE__ */ jsx(PropsContext, {
+		value: codeblock,
+		children: node
+	});
+}
+function Placeholder({ code, components = {} }) {
+	const { pre: Pre = "pre", code: Code = "code" } = components;
+	return /* @__PURE__ */ jsx(Pre, { children: /* @__PURE__ */ jsx(Code, { children: code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: line
+	}, i)) }) });
+}
+//#endregion
+export { DynamicCodeBlock };

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

@@ -1,32 +1,10 @@
-import { CodeBlockProps } from "./codeblock.js";
-import * as react_jsx_runtime98 from "react/jsx-runtime";
-import { HighlightOptionsCommon, HighlightOptionsThemes } from "@hanzo/docs-core/highlight";
+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
-interface DynamicCodeblockProps {
-  lang: string;
-  code: string;
-  /**
-   * Extra props for the underlying `<CodeBlock />` component.
-   *
-   * Ignored if you defined your own `pre` component in `options.components`.
-   */
-  codeblock?: CodeBlockProps;
-  /**
-   * Wrap in React `<Suspense />` and provide a fallback.
-   *
-   * @defaultValue true
-   */
-  wrapInSuspense?: boolean;
-  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;
-}
-declare function DynamicCodeBlock({
-  lang,
-  code,
-  codeblock,
-  options,
-  wrapInSuspense
-}: DynamicCodeblockProps): react_jsx_runtime98.JSX.Element;
+type DynamicCodeblockProps = Omit<DynamicCodeblockProps$1, 'highlighter' | 'options'> & {
+  options?: DynamicCodeblockProps$1['options'];
+};
+declare function DynamicCodeBlock(props: DynamicCodeblockProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DynamicCodeBlock, DynamicCodeblockProps };
-//# sourceMappingURL=dynamic-codeblock.d.ts.map
+export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/dynamic-codeblock.js

@@ -1,66 +1,17 @@
-'use client';
-
-import { CodeBlock, Pre } from "./codeblock.js";
-import { cn } from "@hanzo/docs-ui/cn";
+"use client";
+import { DynamicCodeBlock as DynamicCodeBlock$1 } from "./dynamic-codeblock.core.js";
 import { jsx } from "react/jsx-runtime";
-import { Suspense, createContext, use, useDeferredValue, useId } from "react";
-import { useShiki } from "@hanzo/docs-core/highlight/client";
-
+import { defaultShikiFactory } from "@hanzo/docs-core/highlight/shiki/full";
 //#region src/components/dynamic-codeblock.tsx
-const PropsContext = createContext(void 0);
-function DefaultPre(props) {
-	const extraProps = use(PropsContext);
-	return /* @__PURE__ */ jsx(CodeBlock, {
-		...props,
-		...extraProps,
-		className: cn("my-0", props.className, extraProps?.className),
-		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+function DynamicCodeBlock(props) {
+	return /* @__PURE__ */ jsx(DynamicCodeBlock$1, {
+		highlighter: () => defaultShikiFactory.getOrInit(),
+		options: { themes: {
+			light: "github-light",
+			dark: "github-dark"
+		} },
+		...props
 	});
 }
-function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true }) {
-	const id = useId();
-	const shikiOptions = {
-		lang,
-		...options,
-		components: {
-			pre: DefaultPre,
-			...options?.components
-		}
-	};
-	const children = /* @__PURE__ */ jsx(PropsContext, {
-		value: codeblock,
-		children: /* @__PURE__ */ jsx(Internal, {
-			id,
-			...useDeferredValue({
-				code,
-				options: shikiOptions
-			})
-		})
-	});
-	if (wrapInSuspense) return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(Placeholder, {
-			code,
-			components: shikiOptions.components
-		}),
-		children
-	});
-	return children;
-}
-function Placeholder({ code, components = {} }) {
-	const { pre: Pre$1 = "pre", code: Code = "code" } = components;
-	return /* @__PURE__ */ jsx(Pre$1, { children: /* @__PURE__ */ jsx(Code, { children: code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", {
-		className: "line",
-		children: line
-	}, i)) }) });
-}
-function Internal({ id, code, options }) {
-	return useShiki(code, options, [
-		id,
-		options.lang,
-		code
-	]);
-}
-
 //#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 };