blodemd 0.0.13 → 0.0.15

package/docs/components/ui/search.tsx

@@ -1,66 +1,24 @@
 "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[];
-  open: boolean;
-  query: string;
-  status: SearchStatus;
-}
-
-type SearchAction =
-  | { type: "close" }
-  | { type: "load-error" }
-  | { type: "load-start" }
-  | { items: SearchItem[]; type: "load-success" }
-  | { type: "open" }
-  | { index: number; type: "set-active-index" }
-  | { query: string; type: "set-query" };
-
-const MAX_RESULTS = 12;
-const INITIAL_SEARCH_STATE: SearchState = {
-  activeIndex: 0,
-  items: [],
-  open: false,
-  query: "",
-  status: "idle",
+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) =>
@@ -69,298 +27,22 @@ const isEditableTarget = (target: EventTarget | null) =>
   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;
-};
-
-const searchReducer = (
-  state: SearchState,
-  action: SearchAction
-): SearchState => {
-  switch (action.type) {
-    case "close": {
-      return {
-        ...state,
-        activeIndex: 0,
-        open: false,
-        query: "",
-      };
-    }
-    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 "open": {
-      return {
-        ...state,
-        open: true,
-      };
-    }
-    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 Search = ({ basePath }: { basePath: string }) => {
-  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, open, 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",
-          },
-        });
+  const [open, setOpen] = useState(false);
+  const [hasMounted, setHasMounted] = useState(false);
 
-        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]);
-
-  const filteredItems = useMemo(
-    () =>
-      items
-        .filter((item) => searchMatches(item, deferredQuery))
-        .slice(0, MAX_RESULTS),
-    [deferredQuery, items]
-  );
-
-  const closeSearch = useCallback(() => {
-    dispatch({ type: "close" });
+  const openSearch = useCallback(() => {
+    preloadDialog();
+    setHasMounted(true);
+    setOpen(true);
   }, []);
 
-  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 openSearch = useCallback(async () => {
-    dispatch({ type: "open" });
-    await loadSearchItems();
-  }, [loadSearchItems]);
-
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (!nextOpen) {
-        closeSearch();
-      }
-    },
-    [closeSearch]
-  );
-
-  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>) => {
-      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 handleOpenChange = useCallback((next: boolean) => {
+    setOpen(next);
+  }, []);
 
   useEffect(() => {
-    const handleKeydown = async (event: KeyboardEvent) => {
+    const handleKeydown = (event: KeyboardEvent) => {
       if (
         (event.key === "k" && (event.metaKey || event.ctrlKey)) ||
         event.key === "/"
@@ -371,50 +53,19 @@ export const Search = ({ basePath }: { basePath: string }) => {
 
         event.preventDefault();
         if (open) {
-          closeSearch();
+          setOpen(false);
           return;
         }
 
-        await openSearch();
+        preloadDialog();
+        setHasMounted(true);
+        setOpen(true);
       }
     };
 
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
-  }, [closeSearch, open, openSearch]);
-
-  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]
-  );
+  }, [open]);
 
   return (
     <>
@@ -422,8 +73,8 @@ export const Search = ({ basePath }: { basePath: string }) => {
         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}
+        onFocus={preloadDialog}
+        onMouseEnter={preloadDialog}
         type="button"
       >
         <SearchIcon className="size-4.5" />
@@ -431,54 +82,20 @@ export const Search = ({ basePath }: { basePath: string }) => {
       <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}
+        onFocus={preloadDialog}
+        onMouseEnter={preloadDialog}
         type="button"
       >
         <span className="hidden lg:inline-flex">Search documentation...</span>
         <span className="inline-flex lg:hidden">Search...</span>
       </button>
-      <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>
+      {hasMounted ? (
+        <SearchDialog
+          basePath={basePath}
+          onOpenChange={handleOpenChange}
+          open={open}
+        />
+      ) : null}
     </>
   );
 };

package/docs/components/web-mcp.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+// oxlint-disable require-await -- execute signatures must return Promise for WebMCP
+// oxlint-disable func-style -- exported component uses function-declaration style
+// oxlint-disable no-void -- provideContext returns a promise we intentionally discard
+
+import { useEffect } from "react";
+
+interface JSONSchemaObject {
+  type: string;
+  properties?: Record<string, unknown>;
+  required?: string[];
+  description?: string;
+  additionalProperties?: boolean;
+}
+
+interface WebMCPTool {
+  name: string;
+  description: string;
+  inputSchema: JSONSchemaObject;
+  execute: (args: Record<string, unknown>) => Promise<unknown>;
+}
+
+interface NavigatorModelContext {
+  provideContext?: (context: { tools: WebMCPTool[] }) => void | Promise<void>;
+}
+
+const buildTools = (): WebMCPTool[] => [
+  {
+    description:
+      "Return the shell command that scaffolds a new Blode.md docs site with the given project slug.",
+    execute: async ({ slug, template }) => {
+      const projectSlug = typeof slug === "string" && slug ? slug : "my-docs";
+      const variant =
+        template === "starter" || template === "minimal" ? template : "minimal";
+      return {
+        command: `npx blodemd new docs --slug ${projectSlug} --template ${variant} -y`,
+      };
+    },
+    inputSchema: {
+      additionalProperties: false,
+      properties: {
+        slug: {
+          description: "Project slug (lowercase, hyphen-separated).",
+          type: "string",
+        },
+        template: {
+          description: "Template to use: 'minimal' or 'starter'.",
+          type: "string",
+        },
+      },
+      required: ["slug"],
+      type: "object",
+    },
+    name: "blodemd_scaffold_command",
+  },
+  {
+    description:
+      "Return the shell command that deploys a local Blode.md docs directory to the given project.",
+    execute: async ({ directory, project }) => {
+      const dir =
+        typeof directory === "string" && directory ? directory : "docs";
+      const projectSlug =
+        typeof project === "string" && project ? project : "my-docs";
+      return {
+        command: `npx blodemd push ${dir} --project ${projectSlug}`,
+      };
+    },
+    inputSchema: {
+      additionalProperties: false,
+      properties: {
+        directory: {
+          description: "Local directory containing the docs.",
+          type: "string",
+        },
+        project: {
+          description: "Target Blode.md project slug.",
+          type: "string",
+        },
+      },
+      required: ["project"],
+      type: "object",
+    },
+    name: "blodemd_deploy_command",
+  },
+  {
+    description: "Open the Blode.md dashboard in the current tab.",
+    execute: async () => {
+      if (typeof window !== "undefined") {
+        window.location.assign("/app");
+      }
+      return { ok: true };
+    },
+    inputSchema: {
+      additionalProperties: false,
+      properties: {},
+      type: "object",
+    },
+    name: "blodemd_open_dashboard",
+  },
+];
+
+export function WebMcpTools() {
+  useEffect(() => {
+    const nav = navigator as Navigator & {
+      modelContext?: NavigatorModelContext;
+    };
+    if (!nav.modelContext?.provideContext) {
+      return;
+    }
+    void nav.modelContext.provideContext({ tools: buildTools() });
+  }, []);
+
+  return null;
+}

package/docs/lib/agent-skills.ts

@@ -0,0 +1,48 @@
+import { createHash } from "node:crypto";
+
+export const BLODEMD_SKILL_CONTENT = `---
+name: blodemd
+description: Scaffold, preview, and deploy beautiful MDX documentation sites with Blode.md. Use when the user wants to create a new docs site, validate their docs config, preview locally, or deploy to Blode.md. Triggers include "create docs", "deploy docs", "push docs", "preview docs", "scaffold a docs site", "set up documentation", "validate docs.json", or any task involving MDX documentation deployment.
+user-invocable: true
+argument-hint: <command> [options]
+allowed-tools: Bash(npx blodemd *), Bash(blodemd *)
+---
+
+# Blode.md
+
+Scaffold, preview, and deploy MDX documentation sites from the terminal. Write locally, ship with one command. Sign in once with GitHub in your browser, no API keys ever.
+
+## Commands
+
+- \`npx blodemd login\` - Browser sign-in with GitHub
+- \`npx blodemd whoami\` - Show current authentication status
+- \`npx blodemd new [directory] --slug <project-slug> --template <minimal|starter> -y\` - Scaffold a new docs site
+- \`npx blodemd validate [dir]\` - Validate docs.json against the schema
+- \`npx blodemd dev --dir <dir> --port 3030\` - Preview locally with hot reload
+- \`npx blodemd push [dir] --project <slug>\` - Deploy a docs site
+
+## Workflow
+
+1. Verify auth with \`npx blodemd whoami\`
+2. Scaffold or locate the docs directory
+3. Validate the configuration
+4. Preview locally
+5. Deploy to Blode.md
+
+## docs.json
+
+The \`docs.json\` file is the config for a Blode.md site. It must include a \`slug\` field:
+
+\`\`\`json
+{
+  "slug": "my-project",
+  "name": "My Project"
+}
+\`\`\`
+`;
+
+export const BLODEMD_SKILL_DESCRIPTION =
+  "Scaffold, preview, and deploy beautiful MDX documentation sites with Blode.md from the CLI.";
+
+export const sha256Hex = (input: string) =>
+  createHash("sha256").update(input, "utf8").digest("hex");

package/docs/lib/config.ts

@@ -1,7 +1,6 @@
+// Kept for server-side consumers in apps/docs that need platform-wide metadata
+// (e.g. MCP server card). The richer marketing config lives in apps/web.
+
 export const siteConfig = {
-  links: {
-    author: "https://matthewblode.com",
-    github: "https://github.com/mblode/blodemd",
-  },
   version: "0.0.9",
-};
+} as const;