blodemd 0.1.0 → 0.2.0

package/docs/components/ui/search-dialog.tsx

@@ -1,431 +0,0 @@
-"use client";
-
-import { SearchIcon } from "blode-icons-react";
-import { useRouter } from "next/navigation";
-import {
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from "react";
-import type {
-  ChangeEvent,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-} from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { isExternalHref, resolveHref, toDocHref } from "@/lib/routes";
-
-export interface SearchItem {
-  href?: string;
-  title: string;
-  path: string;
-}
-
-interface SearchResponse {
-  items: SearchItem[];
-}
-
-type SearchStatus = "idle" | "loading" | "ready" | "error";
-
-interface SearchState {
-  activeIndex: number;
-  items: SearchItem[];
-  query: string;
-  status: SearchStatus;
-}
-
-type SearchAction =
-  | { type: "load-error" }
-  | { type: "load-start" }
-  | { items: SearchItem[]; type: "load-success" }
-  | { type: "reset-query" }
-  | { index: number; type: "set-active-index" }
-  | { query: string; type: "set-query" };
-
-const MAX_RESULTS = 12;
-const INITIAL_SEARCH_STATE: SearchState = {
-  activeIndex: 0,
-  items: [],
-  query: "",
-  status: "idle",
-};
-
-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;
-};
-
-const searchReducer = (
-  state: SearchState,
-  action: SearchAction
-): SearchState => {
-  switch (action.type) {
-    case "load-error": {
-      return {
-        ...state,
-        status: "error",
-      };
-    }
-    case "load-start": {
-      return {
-        ...state,
-        status: "loading",
-      };
-    }
-    case "load-success": {
-      return {
-        ...state,
-        items: action.items,
-        status: "ready",
-      };
-    }
-    case "reset-query": {
-      return {
-        ...state,
-        activeIndex: 0,
-        query: "",
-      };
-    }
-    case "set-active-index": {
-      return {
-        ...state,
-        activeIndex: action.index,
-      };
-    }
-    case "set-query": {
-      return {
-        ...state,
-        activeIndex: 0,
-        query: action.query,
-      };
-    }
-    default: {
-      return state;
-    }
-  }
-};
-
-const SearchResults = ({
-  activeIndex,
-  basePath,
-  filteredItems,
-  onResultClick,
-  onResultMouseEnter,
-  status,
-}: {
-  activeIndex: number;
-  basePath: string;
-  filteredItems: SearchItem[];
-  onResultClick: (event: ReactMouseEvent<HTMLButtonElement>) => void;
-  onResultMouseEnter: (event: ReactMouseEvent<HTMLButtonElement>) => void;
-  status: SearchStatus;
-}) => {
-  if (status === "loading") {
-    return (
-      <div className="px-3 py-10 text-center text-sm text-muted-foreground">
-        Loading search index...
-      </div>
-    );
-  }
-
-  if (status === "error") {
-    return (
-      <div className="px-3 py-10 text-center text-sm text-muted-foreground">
-        Search is temporarily unavailable.
-      </div>
-    );
-  }
-
-  if (status === "ready" && filteredItems.length === 0) {
-    return (
-      <div className="px-3 py-10 text-center text-sm text-muted-foreground">
-        No results found.
-      </div>
-    );
-  }
-
-  if (status !== "ready") {
-    return null;
-  }
-
-  return (
-    <div className="grid gap-1">
-      {filteredItems.map((item, index) => {
-        const href = item.href
-          ? resolveHref(item.href, basePath)
-          : toDocHref(item.path, basePath);
-        const isActive = index === activeIndex;
-
-        return (
-          <button
-            className={
-              isActive
-                ? "grid gap-1 rounded-xl bg-accent px-3 py-2 text-left text-foreground transition-colors"
-                : "grid gap-1 rounded-xl px-3 py-2 text-left text-muted-foreground transition-colors hover:bg-accent/70 hover:text-foreground"
-            }
-            data-index={index}
-            key={`${item.path}-${item.href ?? "internal"}`}
-            onClick={onResultClick}
-            onMouseEnter={onResultMouseEnter}
-            type="button"
-          >
-            <span className="text-sm font-medium text-foreground">
-              {item.title}
-            </span>
-            <span className="text-xs">{href}</span>
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-export const SearchDialog = ({
-  basePath,
-  open,
-  onOpenChange,
-}: {
-  basePath: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}) => {
-  const router = useRouter();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const requestRef = useRef<Promise<void> | null>(null);
-  const loadedRef = useRef(false);
-  const [state, dispatch] = useReducer(searchReducer, INITIAL_SEARCH_STATE);
-  const { activeIndex, items, query, status } = state;
-
-  const deferredQuery = useDeferredValue(query.trim().toLowerCase());
-
-  const loadSearchItems = useCallback(() => {
-    if (loadedRef.current) {
-      return Promise.resolve();
-    }
-
-    if (requestRef.current) {
-      return requestRef.current;
-    }
-
-    dispatch({ type: "load-start" });
-    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(() => {
-          dispatch({ items: nextItems, type: "load-success" });
-        });
-      } catch {
-        dispatch({ type: "load-error" });
-      } finally {
-        requestRef.current = null;
-      }
-    })();
-
-    requestRef.current = request;
-    return request;
-  }, [basePath]);
-
-  // Load the search index as soon as the dialog mounts.
-  useEffect(() => {
-    const run = async () => {
-      try {
-        await loadSearchItems();
-      } catch {
-        // Errors are surfaced via the reducer's "load-error" action.
-      }
-    };
-
-    run();
-  }, [loadSearchItems]);
-
-  const filteredItems = useMemo(
-    () =>
-      items
-        .filter((item) => searchMatches(item, deferredQuery))
-        .slice(0, MAX_RESULTS),
-    [deferredQuery, items]
-  );
-
-  const closeSearch = useCallback(() => {
-    dispatch({ type: "reset-query" });
-    onOpenChange(false);
-  }, [onOpenChange]);
-
-  const runSelection = useCallback(
-    (item: SearchItem) => {
-      closeSearch();
-      const href = item.href
-        ? resolveHref(item.href, basePath)
-        : toDocHref(item.path, basePath);
-
-      if (item.href && isExternalHref(item.href)) {
-        window.open(href, "_blank", "noopener,noreferrer");
-        return;
-      }
-
-      router.push(href);
-    },
-    [basePath, closeSearch, router]
-  );
-
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (!nextOpen) {
-        closeSearch();
-      }
-    },
-    [closeSearch]
-  );
-
-  const handleQueryChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      dispatch({ query: event.target.value, type: "set-query" });
-    },
-    []
-  );
-
-  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;
-      }
-
-      dispatch({ index, type: "set-active-index" });
-    },
-    []
-  );
-
-  const handleDialogKeyDown = useCallback(
-    (event: ReactKeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        dispatch({
-          index: getWrappedNextIndex(activeIndex, filteredItems.length),
-          type: "set-active-index",
-        });
-        return;
-      }
-
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        dispatch({
-          index: getWrappedPrevIndex(activeIndex, filteredItems.length),
-          type: "set-active-index",
-        });
-        return;
-      }
-
-      if (event.key === "Enter") {
-        const activeItem = filteredItems[activeIndex];
-        if (!activeItem) {
-          return;
-        }
-
-        event.preventDefault();
-        runSelection(activeItem);
-      }
-    },
-    [activeIndex, filteredItems, runSelection]
-  );
-
-  return (
-    <Dialog onOpenChange={handleOpenChange} open={open}>
-      <DialogContent
-        className="max-w-2xl gap-0 overflow-hidden p-0"
-        onKeyDown={handleDialogKeyDown}
-        showCloseButton={false}
-      >
-        <DialogTitle className="sr-only">Search documentation</DialogTitle>
-        <DialogDescription className="sr-only">
-          Search documentation pages and jump directly to a result.
-        </DialogDescription>
-        <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">
-          <SearchResults
-            activeIndex={activeIndex}
-            basePath={basePath}
-            filteredItems={filteredItems}
-            onResultClick={handleResultClick}
-            onResultMouseEnter={handleResultMouseEnter}
-            status={status}
-          />
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};

package/docs/components/ui/search.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { SearchIcon } from "blode-icons-react";
-import dynamic from "next/dynamic";
-import { useCallback, useEffect, useState } from "react";
-
-const SearchDialog = dynamic(
-  async () => {
-    const mod = await import("@/components/ui/search-dialog");
-    return mod.SearchDialog;
-  },
-  { loading: () => null, ssr: false }
-);
-
-const preloadDialog = async () => {
-  // Eagerly fetch the dialog chunk so it's warm by the time the user opens it.
-  try {
-    await import("@/components/ui/search-dialog");
-  } catch {
-    // Ignore preload failures; the dialog will retry on open.
-  }
-};
-
-const isEditableTarget = (target: EventTarget | null) =>
-  (target instanceof HTMLElement && target.isContentEditable) ||
-  target instanceof HTMLInputElement ||
-  target instanceof HTMLTextAreaElement ||
-  target instanceof HTMLSelectElement;
-
-export const Search = ({ basePath }: { basePath: string }) => {
-  const [open, setOpen] = useState(false);
-  const [hasMounted, setHasMounted] = useState(false);
-
-  const openSearch = useCallback(() => {
-    preloadDialog();
-    setHasMounted(true);
-    setOpen(true);
-  }, []);
-
-  const handleOpenChange = useCallback((next: boolean) => {
-    setOpen(next);
-  }, []);
-
-  useEffect(() => {
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (
-        (event.key === "k" && (event.metaKey || event.ctrlKey)) ||
-        event.key === "/"
-      ) {
-        if (isEditableTarget(event.target)) {
-          return;
-        }
-
-        event.preventDefault();
-        if (open) {
-          setOpen(false);
-          return;
-        }
-
-        preloadDialog();
-        setHasMounted(true);
-        setOpen(true);
-      }
-    };
-
-    document.addEventListener("keydown", handleKeydown);
-    return () => document.removeEventListener("keydown", handleKeydown);
-  }, [open]);
-
-  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={preloadDialog}
-        onMouseEnter={preloadDialog}
-        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={preloadDialog}
-        onMouseEnter={preloadDialog}
-        type="button"
-      >
-        <span className="hidden lg:inline-flex">Search documentation...</span>
-        <span className="inline-flex lg:hidden">Search...</span>
-      </button>
-      {hasMounted ? (
-        <SearchDialog
-          basePath={basePath}
-          onOpenChange={handleOpenChange}
-          open={open}
-        />
-      ) : null}
-    </>
-  );
-};

package/docs/components/ui/separator.tsx

@@ -1,26 +0,0 @@
-"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

@@ -1,133 +0,0 @@
-"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 SheetTrigger = ({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) => (
-  <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-);
-
-const SheetClose = ({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) => (
-  <SheetPrimitive.Close data-slot="sheet-close" {...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 SheetFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
-  <div
-    data-slot="sheet-footer"
-    className={cn("mt-auto flex flex-col gap-2 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,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};