@lukoweb/apitogo 0.1.0 → 0.1.2

package/src/lib/components/AiAssistantMenuItems.tsx

@@ -1,102 +1,102 @@
-import type { ReactNode } from "react";
-import { DropdownMenuItem } from "@lukoweb/apitogo/ui/DropdownMenu.js";
-import type {
-  AiAssistantCustom,
-  AiAssistantsConfig,
-} from "../../config/validators/ZudokuConfig.js";
-import { ChatGPTLogo } from "../plugins/markdown/assets/ChatGPTLogo.js";
-import { ClaudeLogo } from "../plugins/markdown/assets/ClaudeLogo.js";
-
-type AiAssistantContext = {
-  pageUrl: string;
-  type: "docs" | "openapi";
-};
-
-type ResolvedAssistant = {
-  label: string;
-  icon?: ReactNode;
-  getUrl: (context: AiAssistantContext) => string;
-};
-
-const PRESETS: Record<string, ResolvedAssistant> = {
-  claude: {
-    label: "Use in Claude",
-    icon: <ClaudeLogo className="size-4" />,
-    getUrl: ({ pageUrl, type }) => {
-      const contextText =
-        type === "openapi" ? "this API" : "this documentation page";
-      const prompt = encodeURIComponent(
-        `Help me understand ${contextText}: ${pageUrl}`,
-      );
-      return `https://claude.ai/new?q=${prompt}`;
-    },
-  },
-  chatgpt: {
-    label: "Use in ChatGPT",
-    icon: <ChatGPTLogo className="size-4" />,
-    getUrl: ({ pageUrl, type }) => {
-      const contextText =
-        type === "openapi" ? "this API" : "this documentation page";
-      const prompt = encodeURIComponent(
-        `Help me understand ${contextText}: ${pageUrl}`,
-      );
-      return `https://chatgpt.com/?q=${prompt}`;
-    },
-  },
-};
-
-const resolveAssistant = (
-  entry: string | AiAssistantCustom,
-): ResolvedAssistant | undefined => {
-  if (typeof entry === "string") {
-    return PRESETS[entry];
-  }
-
-  return {
-    label: entry.label,
-    icon: entry.icon,
-    getUrl: (context) => {
-      if (typeof entry.url === "function") {
-        return entry.url(context);
-      }
-      return entry.url.replaceAll("{pageUrl}", context.pageUrl);
-    },
-  };
-};
-
-const DEFAULT_ASSISTANTS: AiAssistantsConfig = ["claude", "chatgpt"];
-
-export const AiAssistantMenuItems = ({
-  aiAssistants,
-  getPageUrl,
-  type,
-}: {
-  aiAssistants: AiAssistantsConfig;
-  getPageUrl: () => string;
-  type: "docs" | "openapi";
-}) => {
-  const config = aiAssistants ?? DEFAULT_ASSISTANTS;
-
-  if (config === false) {
-    return null;
-  }
-
-  return config.map((entry, index) => {
-    const assistant = resolveAssistant(entry);
-    if (!assistant) return null;
-
-    return (
-      <DropdownMenuItem
-        key={typeof entry === "string" ? entry : index}
-        className="gap-2"
-        onClick={() => {
-          const url = assistant.getUrl({ pageUrl: getPageUrl(), type });
-          window.open(url, "_blank", "noopener,noreferrer");
-        }}
-      >
-        {assistant.icon}
-        {assistant.label}
-      </DropdownMenuItem>
-    );
-  });
-};
+import { DropdownMenuItem } from "@lukoweb/apitogo/ui/DropdownMenu.js";
+import type { ReactNode } from "react";
+import type {
+  AiAssistantCustom,
+  AiAssistantsConfig,
+} from "../../config/validators/ZudokuConfig.js";
+import { ChatGPTLogo } from "../plugins/markdown/assets/ChatGPTLogo.js";
+import { ClaudeLogo } from "../plugins/markdown/assets/ClaudeLogo.js";
+
+type AiAssistantContext = {
+  pageUrl: string;
+  type: "docs" | "openapi";
+};
+
+type ResolvedAssistant = {
+  label: string;
+  icon?: ReactNode;
+  getUrl: (context: AiAssistantContext) => string;
+};
+
+const PRESETS: Record<string, ResolvedAssistant> = {
+  claude: {
+    label: "Use in Claude",
+    icon: <ClaudeLogo className="size-4" />,
+    getUrl: ({ pageUrl, type }) => {
+      const contextText =
+        type === "openapi" ? "this API" : "this documentation page";
+      const prompt = encodeURIComponent(
+        `Help me understand ${contextText}: ${pageUrl}`,
+      );
+      return `https://claude.ai/new?q=${prompt}`;
+    },
+  },
+  chatgpt: {
+    label: "Use in ChatGPT",
+    icon: <ChatGPTLogo className="size-4" />,
+    getUrl: ({ pageUrl, type }) => {
+      const contextText =
+        type === "openapi" ? "this API" : "this documentation page";
+      const prompt = encodeURIComponent(
+        `Help me understand ${contextText}: ${pageUrl}`,
+      );
+      return `https://chatgpt.com/?q=${prompt}`;
+    },
+  },
+};
+
+const resolveAssistant = (
+  entry: string | AiAssistantCustom,
+): ResolvedAssistant | undefined => {
+  if (typeof entry === "string") {
+    return PRESETS[entry];
+  }
+
+  return {
+    label: entry.label,
+    icon: entry.icon,
+    getUrl: (context) => {
+      if (typeof entry.url === "function") {
+        return entry.url(context);
+      }
+      return entry.url.replaceAll("{pageUrl}", context.pageUrl);
+    },
+  };
+};
+
+const DEFAULT_ASSISTANTS: AiAssistantsConfig = ["claude", "chatgpt"];
+
+export const AiAssistantMenuItems = ({
+  aiAssistants,
+  getPageUrl,
+  type,
+}: {
+  aiAssistants: AiAssistantsConfig;
+  getPageUrl: () => string;
+  type: "docs" | "openapi";
+}) => {
+  const config = aiAssistants ?? DEFAULT_ASSISTANTS;
+
+  if (config === false) {
+    return null;
+  }
+
+  return config.map((entry, index) => {
+    const assistant = resolveAssistant(entry);
+    if (!assistant) return null;
+
+    return (
+      <DropdownMenuItem
+        key={typeof entry === "string" ? entry : index}
+        className="gap-2"
+        onClick={() => {
+          const url = assistant.getUrl({ pageUrl: getPageUrl(), type });
+          window.open(url, "_blank", "noopener,noreferrer");
+        }}
+      >
+        {assistant.icon}
+        {assistant.label}
+      </DropdownMenuItem>
+    );
+  });
+};

package/src/lib/components/Autocomplete.tsx

@@ -1,123 +1,123 @@
-import { PopoverAnchor } from "@radix-ui/react-popover";
-import { useCommandState } from "cmdk";
-import { type KeyboardEvent, type Ref, useRef, useState } from "react";
-import {
-  Command,
-  CommandInlineInput,
-  CommandItem,
-  CommandList,
-} from "@lukoweb/apitogo/ui/Command.js";
-import { Popover, PopoverContent } from "@lukoweb/apitogo/ui/Popover.js";
-import { cn } from "../util/cn.js";
-
-type AutocompleteProps = {
-  value?: string | number | readonly string[] | undefined;
-  options: readonly string[];
-  onChange: (e: string) => void;
-  onSelect?: (e: string) => void;
-  className?: string;
-  placeholder?: string;
-  onEnterPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
-  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-  ref?: Ref<HTMLInputElement>;
-  shouldFilter?: boolean;
-};
-
-const AutocompletePopover = ({
-  value,
-  options,
-  onChange,
-  className,
-  placeholder = "Value",
-  onEnterPress,
-  onKeyDown,
-  ref,
-  onSelect,
-}: AutocompleteProps) => {
-  const [open, setOpen] = useState(false);
-  const [dontClose, setDontClose] = useState(false);
-  const count = useCommandState((state) => state.filtered.count);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <Popover open={open}>
-      <PopoverAnchor>
-        <CommandInlineInput
-          autoComplete="off"
-          ref={(el) => {
-            inputRef.current = el;
-            if (typeof ref === "function") {
-              ref(el);
-            } else if (ref) {
-              ref.current = el;
-            }
-          }}
-          value={value ? String(value) : undefined}
-          placeholder={placeholder}
-          className={cn("h-9 bg-transparent", className)}
-          onFocus={() => setOpen(true)}
-          onBlur={() => {
-            if (dontClose) {
-              return;
-            }
-            setOpen(false);
-          }}
-          onKeyDown={(e) => {
-            onKeyDown?.(e);
-
-            if (e.defaultPrevented) return;
-
-            if (e.key === "Enter") {
-              setOpen(false);
-              inputRef.current?.blur();
-              onEnterPress?.(e);
-            }
-          }}
-          onValueChange={(e) => onChange(e)}
-        />
-      </PopoverAnchor>
-      <PopoverContent
-        onMouseEnter={() => setDontClose(true)}
-        onMouseLeave={() => setDontClose(false)}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        className={cn("p-0 w-(--radix-popover-trigger-width)", {
-          "border-0": count === 0,
-        })}
-        align="start"
-        side="bottom"
-        onWheel={(e) => {
-          // See: https://github.com/radix-ui/primitives/issues/1159
-          e.stopPropagation();
-        }}
-        onTouchMove={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <CommandList className="max-h-[140px]">
-          {options.map((enumValue) => (
-            <CommandItem
-              key={enumValue}
-              value={enumValue}
-              onSelect={(selected) => {
-                onSelect?.(selected);
-                onChange(selected);
-                setOpen(false);
-              }}
-              className="cursor-pointer"
-            >
-              {enumValue}
-            </CommandItem>
-          ))}
-        </CommandList>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export const Autocomplete = ({ shouldFilter, ...props }: AutocompleteProps) => {
-  return (
-    <Command className="bg-transparent" shouldFilter={shouldFilter}>
-      <AutocompletePopover {...props} />
-    </Command>
-  );
-};
+import {
+  Command,
+  CommandInlineInput,
+  CommandItem,
+  CommandList,
+} from "@lukoweb/apitogo/ui/Command.js";
+import { Popover, PopoverContent } from "@lukoweb/apitogo/ui/Popover.js";
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useCommandState } from "cmdk";
+import { type KeyboardEvent, type Ref, useRef, useState } from "react";
+import { cn } from "../util/cn.js";
+
+type AutocompleteProps = {
+  value?: string | number | readonly string[] | undefined;
+  options: readonly string[];
+  onChange: (e: string) => void;
+  onSelect?: (e: string) => void;
+  className?: string;
+  placeholder?: string;
+  onEnterPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  ref?: Ref<HTMLInputElement>;
+  shouldFilter?: boolean;
+};
+
+const AutocompletePopover = ({
+  value,
+  options,
+  onChange,
+  className,
+  placeholder = "Value",
+  onEnterPress,
+  onKeyDown,
+  ref,
+  onSelect,
+}: AutocompleteProps) => {
+  const [open, setOpen] = useState(false);
+  const [dontClose, setDontClose] = useState(false);
+  const count = useCommandState((state) => state.filtered.count);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <Popover open={open}>
+      <PopoverAnchor>
+        <CommandInlineInput
+          autoComplete="off"
+          ref={(el) => {
+            inputRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          value={value ? String(value) : undefined}
+          placeholder={placeholder}
+          className={cn("h-9 bg-transparent", className)}
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            if (dontClose) {
+              return;
+            }
+            setOpen(false);
+          }}
+          onKeyDown={(e) => {
+            onKeyDown?.(e);
+
+            if (e.defaultPrevented) return;
+
+            if (e.key === "Enter") {
+              setOpen(false);
+              inputRef.current?.blur();
+              onEnterPress?.(e);
+            }
+          }}
+          onValueChange={(e) => onChange(e)}
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        onMouseEnter={() => setDontClose(true)}
+        onMouseLeave={() => setDontClose(false)}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={cn("p-0 w-(--radix-popover-trigger-width)", {
+          "border-0": count === 0,
+        })}
+        align="start"
+        side="bottom"
+        onWheel={(e) => {
+          // See: https://github.com/radix-ui/primitives/issues/1159
+          e.stopPropagation();
+        }}
+        onTouchMove={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <CommandList className="max-h-[140px]">
+          {options.map((enumValue) => (
+            <CommandItem
+              key={enumValue}
+              value={enumValue}
+              onSelect={(selected) => {
+                onSelect?.(selected);
+                onChange(selected);
+                setOpen(false);
+              }}
+              className="cursor-pointer"
+            >
+              {enumValue}
+            </CommandItem>
+          ))}
+        </CommandList>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const Autocomplete = ({ shouldFilter, ...props }: AutocompleteProps) => {
+  return (
+    <Command className="bg-transparent" shouldFilter={shouldFilter}>
+      <AutocompletePopover {...props} />
+    </Command>
+  );
+};

package/src/lib/components/DeveloperHint.tsx

@@ -1,35 +1,39 @@
-import { InfoIcon } from "lucide-react";
-import { type ReactNode, Suspense, lazy } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-
-// Lazy: Markdown imports shiki.ts — keeping it out of the entry chunk.
-const Markdown = lazy(() =>
-  import("./Markdown.js").then((m) => ({ default: m.Markdown })),
-);
-
-export const DeveloperHint = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) => {
-  if (process.env.NODE_ENV !== "development") return null;
-
-  return (
-    <Alert variant="info" className={className}>
-      <InfoIcon />
-      <AlertTitle>Developer hint</AlertTitle>
-      <AlertDescription>
-        {typeof children === "string" ? (
-          <Suspense>
-            <Markdown content={children} />
-          </Suspense>
-        ) : (
-          <div>{children}</div>
-        )}
-        <small className="italic">Only shown in development mode.</small>
-      </AlertDescription>
-    </Alert>
-  );
-};
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { InfoIcon } from "lucide-react";
+import { type ReactNode, Suspense, lazy } from "react";
+
+// Lazy: Markdown imports shiki.ts — keeping it out of the entry chunk.
+const Markdown = lazy(() =>
+  import("./Markdown.js").then((m) => ({ default: m.Markdown })),
+);
+
+export const DeveloperHint = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  if (process.env.NODE_ENV !== "development") return null;
+
+  return (
+    <Alert variant="info" className={className}>
+      <InfoIcon />
+      <AlertTitle>Developer hint</AlertTitle>
+      <AlertDescription>
+        {typeof children === "string" ? (
+          <Suspense>
+            <Markdown content={children} />
+          </Suspense>
+        ) : (
+          <div>{children}</div>
+        )}
+        <small className="italic">Only shown in development mode.</small>
+      </AlertDescription>
+    </Alert>
+  );
+};