blodemd 0.0.5 → 0.0.6

package/docs/components/ui/search.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import { SearchIcon } from "blode-icons-react";
+import { useRouter } from "next/navigation";
+import {
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type {
+  ChangeEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+} from "react";
+
+import { toDocHref } from "@/lib/routes";
+
+export interface SearchItem {
+  href?: string;
+  title: string;
+  path: string;
+}
+
+interface SearchResponse {
+  items: SearchItem[];
+}
+
+const MAX_RESULTS = 12;
+
+const isEditableTarget = (target: EventTarget | null) =>
+  (target instanceof HTMLElement && target.isContentEditable) ||
+  target instanceof HTMLInputElement ||
+  target instanceof HTMLTextAreaElement ||
+  target instanceof HTMLSelectElement;
+
+const searchMatches = (item: SearchItem, query: string) => {
+  if (!query) {
+    return true;
+  }
+
+  const haystack =
+    `${item.title} ${item.path} ${item.href ?? ""}`.toLowerCase();
+  return haystack.includes(query);
+};
+
+const getWrappedNextIndex = (current: number, length: number) => {
+  if (length === 0 || current >= length - 1) {
+    return 0;
+  }
+
+  return current + 1;
+};
+
+const getWrappedPrevIndex = (current: number, length: number) => {
+  if (length === 0 || current <= 0) {
+    return length - 1;
+  }
+
+  return current - 1;
+};
+
+export const Search = ({ basePath }: { basePath: string }) => {
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const requestRef = useRef<Promise<void> | null>(null);
+  const loadedRef = useRef(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [items, setItems] = useState<SearchItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<"idle" | "loading" | "ready" | "error">(
+    "idle"
+  );
+
+  const deferredQuery = useDeferredValue(query.trim().toLowerCase());
+
+  const loadSearchItems = useCallback(() => {
+    if (loadedRef.current) {
+      return Promise.resolve();
+    }
+    if (requestRef.current) {
+      return requestRef.current;
+    }
+
+    setStatus("loading");
+    const request = (async () => {
+      try {
+        const response = await fetch(toDocHref("search", basePath), {
+          headers: {
+            accept: "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to load search index: ${response.status}`);
+        }
+
+        const payload = (await response.json()) as SearchResponse;
+        const nextItems = Array.isArray(payload.items) ? payload.items : [];
+        loadedRef.current = true;
+        startTransition(() => {
+          setItems(nextItems);
+          setStatus("ready");
+        });
+      } catch {
+        setStatus("error");
+      } finally {
+        requestRef.current = null;
+      }
+    })();
+
+    requestRef.current = request;
+    return request;
+  }, [basePath]);
+
+  const filteredItems = useMemo(
+    () =>
+      items
+        .filter((item) => searchMatches(item, deferredQuery))
+        .slice(0, MAX_RESULTS),
+    [deferredQuery, items]
+  );
+
+  const closeSearch = useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setActiveIndex(0);
+  }, []);
+
+  const runSelection = useCallback(
+    (item: SearchItem) => {
+      closeSearch();
+      if (item.href) {
+        window.open(item.href, "_blank", "noopener,noreferrer");
+        return;
+      }
+      router.push(toDocHref(item.path, basePath));
+    },
+    [basePath, closeSearch, router]
+  );
+
+  const openSearch = useCallback(async () => {
+    setOpen(true);
+    await loadSearchItems();
+  }, [loadSearchItems]);
+
+  const warmSearch = useCallback(async () => {
+    try {
+      await loadSearchItems();
+    } catch {
+      // Ignore warm-up failures and let the explicit open path show the error state.
+    }
+  }, [loadSearchItems]);
+
+  const handleQueryChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value);
+    },
+    []
+  );
+
+  const handleResultClick = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      const index = Number(event.currentTarget.dataset.index);
+      const item = filteredItems[index];
+      if (!item) {
+        return;
+      }
+
+      runSelection(item);
+    },
+    [filteredItems, runSelection]
+  );
+
+  const handleResultMouseEnter = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      const index = Number(event.currentTarget.dataset.index);
+      if (Number.isNaN(index)) {
+        return;
+      }
+
+      setActiveIndex(index);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    inputRef.current?.focus();
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [deferredQuery, open]);
+
+  useEffect(() => {
+    const handleKeydown = async (event: KeyboardEvent) => {
+      if (
+        (event.key === "k" && (event.metaKey || event.ctrlKey)) ||
+        event.key === "/"
+      ) {
+        if (isEditableTarget(event.target)) {
+          return;
+        }
+
+        event.preventDefault();
+        if (open) {
+          closeSearch();
+          return;
+        }
+        await openSearch();
+        return;
+      }
+
+      if (!open || event.key !== "Escape") {
+        return;
+      }
+
+      event.preventDefault();
+      closeSearch();
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [closeSearch, open, openSearch]);
+
+  const handleDialogKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActiveIndex((current) =>
+          getWrappedNextIndex(current, filteredItems.length)
+        );
+        return;
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActiveIndex((current) =>
+          getWrappedPrevIndex(current, filteredItems.length)
+        );
+        return;
+      }
+
+      if (event.key === "Enter") {
+        const activeItem = filteredItems[activeIndex];
+        if (!activeItem) {
+          return;
+        }
+
+        event.preventDefault();
+        runSelection(activeItem);
+      }
+    },
+    [activeIndex, filteredItems, runSelection]
+  );
+
+  return (
+    <>
+      <button
+        aria-label="Search documentation"
+        className="inline-flex size-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground md:hidden"
+        onClick={openSearch}
+        onFocus={warmSearch}
+        onMouseEnter={warmSearch}
+        type="button"
+      >
+        <SearchIcon className="size-4.5" />
+      </button>
+      <button
+        className="relative hidden h-8 w-full items-center justify-start rounded-lg border border-border bg-muted/50 pl-3 text-sm font-normal text-foreground shadow-none transition-colors hover:bg-muted/80 md:flex md:w-48 lg:w-56 xl:w-64 dark:bg-card"
+        onClick={openSearch}
+        onFocus={warmSearch}
+        onMouseEnter={warmSearch}
+        type="button"
+      >
+        <span className="hidden lg:inline-flex">Search documentation...</span>
+        <span className="inline-flex lg:hidden">Search...</span>
+        <span className="ml-auto hidden pr-3 text-[11px] text-muted-foreground sm:inline-flex">
+          Cmd K
+        </span>
+      </button>
+      {open ? (
+        <div className="fixed inset-0 z-50">
+          <button
+            aria-label="Close search"
+            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+            onClick={closeSearch}
+            type="button"
+          />
+          <div
+            aria-modal="true"
+            className="relative mx-auto mt-[10vh] flex w-[calc(100%-2rem)] max-w-2xl flex-col overflow-hidden rounded-2xl border border-border bg-background shadow-2xl"
+            onKeyDown={handleDialogKeyDown}
+            role="dialog"
+          >
+            <div className="flex items-center gap-3 border-b border-border px-4 py-3">
+              <SearchIcon className="size-4 text-muted-foreground" />
+              <input
+                aria-label="Search documentation"
+                className="w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+                onChange={handleQueryChange}
+                placeholder="Search docs..."
+                ref={inputRef}
+                type="text"
+                value={query}
+              />
+              <button
+                className="rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground"
+                onClick={closeSearch}
+                type="button"
+              >
+                Esc
+              </button>
+            </div>
+            <div className="max-h-[min(70vh,32rem)] overflow-y-auto p-2">
+              {status === "loading" ? (
+                <div className="px-3 py-10 text-center text-sm text-muted-foreground">
+                  Loading search index...
+                </div>
+              ) : null}
+              {status === "error" ? (
+                <div className="px-3 py-10 text-center text-sm text-muted-foreground">
+                  Search is temporarily unavailable.
+                </div>
+              ) : null}
+              {status === "ready" && filteredItems.length === 0 ? (
+                <div className="px-3 py-10 text-center text-sm text-muted-foreground">
+                  No results found.
+                </div>
+              ) : null}
+              {status === "ready" && filteredItems.length > 0 ? (
+                <div className="grid gap-1">
+                  {filteredItems.map((item, index) => {
+                    const isActive = index === activeIndex;
+
+                    return (
+                      <button
+                        className={`grid gap-1 rounded-xl px-3 py-2 text-left transition-colors ${
+                          isActive
+                            ? "bg-accent text-foreground"
+                            : "text-muted-foreground hover:bg-accent/70 hover:text-foreground"
+                        }`}
+                        data-index={index}
+                        key={`${item.path}-${item.href ?? "internal"}`}
+                        onClick={handleResultClick}
+                        onMouseEnter={handleResultMouseEnter}
+                        type="button"
+                      >
+                        <span className="text-sm font-medium text-foreground">
+                          {item.title}
+                        </span>
+                        <span className="text-xs">
+                          {item.href ?? toDocHref(item.path, basePath)}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};

package/docs/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Separator = ({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) => (
+  <SeparatorPrimitive.Root
+    data-slot="separator"
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+      className
+    )}
+    {...props}
+  />
+);
+
+export { Separator };

package/docs/components/ui/sheet.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { XIcon } from "blode-icons-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = ({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Root>) => (
+  <SheetPrimitive.Root data-slot="sheet" {...props} />
+);
+
+const SheetPortal = ({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) => (
+  <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+);
+
+const SheetOverlay = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) => (
+  <SheetPrimitive.Overlay
+    data-slot="sheet-overlay"
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+);
+
+const SheetContent = ({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      data-slot="sheet-content"
+      className={cn(
+        "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+        side === "right" &&
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        side === "left" &&
+          "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        side === "top" &&
+          "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        side === "bottom" &&
+          "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+);
+
+const SheetHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    data-slot="sheet-header"
+    className={cn("flex flex-col gap-1.5 p-4", className)}
+    {...props}
+  />
+);
+
+const SheetTitle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) => (
+  <SheetPrimitive.Title
+    data-slot="sheet-title"
+    className={cn("font-semibold text-foreground", className)}
+    {...props}
+  />
+);
+
+const SheetDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) => (
+  <SheetPrimitive.Description
+    data-slot="sheet-description"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+);
+
+export { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription };