blodemd 0.1.0 → 0.2.0

package/docs/components/mdx/agent-instructions.tsx

@@ -1,17 +0,0 @@
-import type { ReactNode } from "react";
-
-interface AgentInstructionsProps {
-  children: ReactNode;
-}
-
-/**
- * Content inside <AgentInstructions> is hidden from human readers in the
- * rendered HTML but preserved in the raw MDX source. When pages are exported
- * as Markdown (via /{page}.md or llms-full.txt), the content is included so
- * AI agents receive it as context.
- */
-export const AgentInstructions = ({ children }: AgentInstructionsProps) => (
-  <div hidden data-agent-instructions="">
-    {children}
-  </div>
-);

package/docs/components/mdx/badge.tsx

@@ -1,79 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-const colorStyles: Record<string, string> = {
-  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
-  gray: "bg-muted text-muted-foreground",
-  green: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
-  orange:
-    "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
-  purple:
-    "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
-  red: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
-  surface: "bg-card text-card-foreground",
-  white: "bg-white text-foreground dark:bg-white dark:text-black",
-  yellow:
-    "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300",
-};
-
-const strokeStyles: Record<string, string> = {
-  blue: "border-blue-300 text-blue-700 dark:border-blue-700 dark:text-blue-300",
-  gray: "border-border text-muted-foreground",
-  green:
-    "border-green-300 text-green-700 dark:border-green-700 dark:text-green-300",
-  orange:
-    "border-orange-300 text-orange-700 dark:border-orange-700 dark:text-orange-300",
-  purple:
-    "border-purple-300 text-purple-700 dark:border-purple-700 dark:text-purple-300",
-  red: "border-red-300 text-red-700 dark:border-red-700 dark:text-red-300",
-  surface: "border-border text-card-foreground",
-  white: "border-border text-foreground",
-  yellow:
-    "border-yellow-300 text-yellow-700 dark:border-yellow-700 dark:text-yellow-300",
-};
-
-const sizeStyles: Record<string, string> = {
-  lg: "px-3 py-1.5 text-sm",
-  md: "px-2.5 py-1 text-xs",
-  sm: "px-2 py-0.5 text-xs",
-  xs: "px-1.5 py-0.5 text-[10px]",
-};
-
-interface BadgeProps {
-  color?: string;
-  size?: "xs" | "sm" | "md" | "lg";
-  shape?: "rounded" | "pill";
-  icon?: ReactNode;
-  stroke?: boolean;
-  disabled?: boolean;
-  className?: string;
-  children: ReactNode;
-}
-
-export const Badge = ({
-  color = "gray",
-  size = "md",
-  shape = "rounded",
-  icon,
-  stroke = false,
-  disabled = false,
-  className,
-  children,
-}: BadgeProps) => (
-  <span
-    className={cn(
-      "inline-flex items-center gap-1 font-medium",
-      shape === "pill" ? "rounded-full" : "rounded-md",
-      stroke
-        ? cn("border bg-transparent", strokeStyles[color] ?? strokeStyles.gray)
-        : (colorStyles[color] ?? colorStyles.gray),
-      sizeStyles[size] ?? sizeStyles.md,
-      disabled && "opacity-50",
-      className
-    )}
-  >
-    {icon ? <span className="shrink-0">{icon}</span> : null}
-    {children}
-  </span>
-);

package/docs/components/mdx/callout.tsx

@@ -1,88 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-const variantStyles: Record<string, string> = {
-  check:
-    "border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900",
-  danger: "border-red-600 bg-red-100 dark:border-red-400 dark:bg-red-900",
-  info: "bg-card border-border",
-  note: "bg-card border-border",
-  success:
-    "border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900",
-  tip: "border-blue-600 bg-blue-100 dark:border-blue-400 dark:bg-blue-900",
-  warning:
-    "border-amber-600 bg-amber-100 dark:border-amber-400 dark:bg-amber-900",
-};
-
-interface CalloutProps {
-  type?: "info" | "success" | "warning" | "danger" | "note" | "tip" | "check";
-  title?: string;
-  icon?: ReactNode;
-  color?: string;
-  children: ReactNode;
-}
-
-export const Callout = ({
-  type = "info",
-  title,
-  icon,
-  color,
-  children,
-}: CalloutProps) => (
-  <div
-    data-slot="alert"
-    role="alert"
-    data-variant="default"
-    className={cn(
-      "relative grid grid-cols-[0_1fr] items-start gap-y-0.5 rounded-xl border px-4 py-3 text-sm text-surface-foreground",
-      "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3",
-      "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-      "**:[code]:border md:-mx-1",
-      variantStyles[type]
-    )}
-    style={
-      color
-        ? {
-            backgroundColor: `${color}10`,
-            borderColor: color,
-          }
-        : undefined
-    }
-  >
-    {icon}
-    <div
-      data-slot="alert-description"
-      className="col-start-2 grid justify-items-start gap-1 text-sm text-foreground [&_p]:leading-relaxed"
-    >
-      {title ? <strong className="font-medium">{title}</strong> : null}
-      <div className="text-sm [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&_p]:leading-relaxed [&_p:not(:first-child)]:mt-6">
-        {children}
-      </div>
-    </div>
-  </div>
-);
-
-export const Note = ({ children }: { children: ReactNode }) => (
-  <Callout type="note">{children}</Callout>
-);
-
-export const Warning = ({ children }: { children: ReactNode }) => (
-  <Callout type="warning">{children}</Callout>
-);
-
-export const Info = ({ children }: { children: ReactNode }) => (
-  <Callout type="info">{children}</Callout>
-);
-
-export const Tip = ({ children }: { children: ReactNode }) => (
-  <Callout type="tip">{children}</Callout>
-);
-
-export const Check = ({ children }: { children: ReactNode }) => (
-  <Callout type="check">{children}</Callout>
-);
-
-export const Danger = ({ children }: { children: ReactNode }) => (
-  <Callout type="danger">{children}</Callout>
-);

package/docs/components/mdx/card.tsx

@@ -1,110 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import type { ReactNode } from "react";
-
-import { DocIcon } from "@/components/icons/doc-icon";
-import { cn } from "@/lib/utils";
-
-interface CardProps {
-  title?: string;
-  icon?: ReactNode;
-  color?: string;
-  href?: string;
-  horizontal?: boolean;
-  img?: string;
-  cta?: string;
-  children?: ReactNode;
-}
-
-const CardInner = ({
-  title,
-  icon,
-  color,
-  horizontal,
-  img,
-  cta,
-  href,
-  children,
-}: CardProps) => {
-  const resolvedIcon =
-    typeof icon === "string" ? <DocIcon icon={icon} size={18} /> : icon;
-
-  return (
-    <div
-      className={cn(
-        "group/card rounded-xl border border-border bg-card p-4 transition-colors",
-        href && "hover:border-primary/30 hover:bg-accent/50",
-        horizontal && "flex items-start gap-4"
-      )}
-    >
-      {img && !horizontal ? (
-        <div className="relative mb-3 aspect-video overflow-hidden rounded-lg">
-          <Image
-            alt={title ?? ""}
-            className="object-cover"
-            fill
-            sizes="(max-width: 768px) 100vw, 50vw"
-            src={img}
-            unoptimized
-          />
-        </div>
-      ) : null}
-      {resolvedIcon ? (
-        <div
-          className="mb-3 flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground"
-          style={color ? { color } : undefined}
-        >
-          {resolvedIcon}
-        </div>
-      ) : null}
-      <div className="min-w-0 flex-1">
-        {title ? (
-          <div className="mb-1 font-medium text-foreground">{title}</div>
-        ) : null}
-        {children ? (
-          <div className="text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
-            {children}
-          </div>
-        ) : null}
-        {cta ? (
-          <div className="mt-2 text-sm font-medium text-primary">{cta}</div>
-        ) : null}
-      </div>
-      {href ? (
-        <svg
-          aria-hidden
-          className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-hover/card:translate-x-0.5"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M5 12h14M12 5l7 7-7 7"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      ) : null}
-    </div>
-  );
-};
-
-export const Card = (props: CardProps) => {
-  if (props.href) {
-    const isExternal = props.href.startsWith("http");
-    if (isExternal) {
-      return (
-        <a href={props.href} rel="noopener noreferrer" target="_blank">
-          <CardInner {...props} />
-        </a>
-      );
-    }
-    return (
-      <Link href={props.href}>
-        <CardInner {...props} />
-      </Link>
-    );
-  }
-  return <CardInner {...props} />;
-};

package/docs/components/mdx/code-block.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { CheckIcon, ClipboardIcon } from "blode-icons-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-import { getTextContent } from "./get-text-content";
-
-export const CodeBlock = ({
-  children,
-  className,
-  style,
-  tabIndex,
-  ...props
-}: ComponentPropsWithoutRef<"pre"> & {
-  children: ReactNode;
-}) => {
-  const [copied, setCopied] = useState(false);
-  const code = useMemo(() => getTextContent(children), [children]);
-
-  useEffect(() => {
-    if (copied) {
-      const timer = setTimeout(() => setCopied(false), 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [copied]);
-
-  const handleCopy = useCallback(async () => {
-    if (!code) {
-      return;
-    }
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-  }, [code]);
-
-  const preStyle = style ? { ...style } : undefined;
-  if (preStyle) {
-    delete preStyle.backgroundColor;
-  }
-
-  return (
-    <figure data-rehype-pretty-code-figure="">
-      <pre
-        className={cn(
-          "no-scrollbar min-w-0 overflow-x-auto overflow-y-auto overscroll-y-auto overscroll-x-contain pl-4 pr-14 py-3.5 outline-none has-[[data-slot=tabs]]:p-0 has-[[data-highlighted-line]]:pl-0 has-[[data-line-numbers]]:pl-0",
-          className
-        )}
-        style={preStyle}
-        tabIndex={tabIndex ?? 0}
-        {...props}
-      >
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute top-0 right-0 bottom-0 z-[9] w-16 bg-gradient-to-r from-transparent to-code print:hidden"
-          data-slot="fade-overlay"
-        />
-        <Button
-          className="absolute top-3 right-2 z-10 size-7 bg-code hover:opacity-100 focus-visible:opacity-100"
-          data-copied={copied}
-          data-slot="copy-button"
-          onClick={handleCopy}
-          size="icon"
-          type="button"
-          variant="ghost"
-        >
-          <span className="sr-only">{copied ? "Copied" : "Copy"}</span>
-          {copied ? (
-            <CheckIcon aria-hidden="true" />
-          ) : (
-            <ClipboardIcon aria-hidden="true" />
-          )}
-        </Button>
-        {children}
-      </pre>
-    </figure>
-  );
-};

package/docs/components/mdx/code-group.tsx

@@ -1,203 +0,0 @@
-"use client";
-
-import { isValidElement, useCallback, useId, useMemo, useState } from "react";
-import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface CodeGroupProps {
-  children: ReactNode;
-}
-
-interface CodeGroupItemProps {
-  "data-rehype-pretty-code-title"?: string;
-  children?: ReactNode;
-}
-
-interface ResolvedCodeItem {
-  element: ReactElement<CodeGroupItemProps>;
-  key: string;
-  label: string;
-}
-
-const clampTabIndex = (index: number, total: number) => {
-  if (total <= 0) {
-    return 0;
-  }
-
-  return Math.min(Math.max(index, 0), total - 1);
-};
-
-const sanitizeDomId = (value: string) =>
-  value.replaceAll(/[^a-zA-Z0-9_-]/g, "-");
-
-const toNodeArray = (children: ReactNode): ReactNode[] =>
-  Array.isArray(children) ? children.flatMap(toNodeArray) : [children];
-
-const getCodeLabel = (
-  element: ReactElement<CodeGroupItemProps>,
-  index: number
-) => {
-  const title = element.props["data-rehype-pretty-code-title"];
-  if (title) {
-    return title;
-  }
-
-  const pre = toNodeArray(element.props.children).find(
-    (child) => isValidElement(child) && child.type === "pre"
-  );
-  if (isValidElement<{ className?: string }>(pre)) {
-    const languageClass = pre.props.className
-      ?.split(" ")
-      .find((className: string) => className.startsWith("language-"));
-    if (languageClass) {
-      return languageClass.replace("language-", "");
-    }
-  }
-
-  return `Tab ${index + 1}`;
-};
-
-const resolveCodeItems = (children: ReactNode): ResolvedCodeItem[] =>
-  toNodeArray(children)
-    .filter((child): child is ReactElement<CodeGroupItemProps> =>
-      isValidElement<CodeGroupItemProps>(child)
-    )
-    .map((element, index) => {
-      const label = getCodeLabel(element, index);
-      const key = sanitizeDomId(
-        String(
-          element.key ??
-            element.props["data-rehype-pretty-code-title"] ??
-            `code-${index + 1}`
-        )
-      );
-
-      return {
-        element,
-        key,
-        label,
-      };
-    });
-
-export const CodeGroup = ({ children }: CodeGroupProps) => {
-  const items = useMemo(() => resolveCodeItems(children), [children]);
-  const [active, setActive] = useState(0);
-  const activeIndex = clampTabIndex(active, items.length);
-  const activeItem = items[activeIndex];
-  const tabsId = useId();
-
-  const getTabId = useCallback(
-    (index: number) => `${tabsId}-${items[index]?.key ?? index}-tab`,
-    [items, tabsId]
-  );
-  const getPanelId = useCallback(
-    (index: number) => `${tabsId}-${items[index]?.key ?? index}-panel`,
-    [items, tabsId]
-  );
-  const focusTab = useCallback(
-    (index: number) => {
-      document.querySelector<HTMLElement>(`[id="${getTabId(index)}"]`)?.focus();
-    },
-    [getTabId]
-  );
-
-  const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-    const index = Number(event.currentTarget.dataset.index ?? "0");
-    setActive(index);
-  }, []);
-
-  const handleTabKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLButtonElement>) => {
-      if (!items.length) {
-        return;
-      }
-
-      const index = Number(event.currentTarget.dataset.index ?? activeIndex);
-      const lastIndex = items.length - 1;
-      let nextIndex: number | null = null;
-
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowRight": {
-          nextIndex = index === lastIndex ? 0 : index + 1;
-          break;
-        }
-        case "ArrowLeft":
-        case "ArrowUp": {
-          nextIndex = index === 0 ? lastIndex : index - 1;
-          break;
-        }
-        case "End": {
-          nextIndex = lastIndex;
-          break;
-        }
-        case "Home": {
-          nextIndex = 0;
-          break;
-        }
-        default: {
-          return;
-        }
-      }
-
-      event.preventDefault();
-      setActive(nextIndex);
-      focusTab(nextIndex);
-    },
-    [activeIndex, focusTab, items.length]
-  );
-
-  if (!activeItem) {
-    return children as ReactElement;
-  }
-
-  if (items.length === 1) {
-    return activeItem.element;
-  }
-
-  return (
-    <div className="my-4 overflow-hidden rounded-xl bg-code">
-      <div
-        aria-orientation="horizontal"
-        className="flex gap-1 border-b border-border bg-muted/50 px-2 pt-2"
-        role="tablist"
-      >
-        {items.map((item, index) => {
-          const isSelected = index === activeIndex;
-
-          return (
-            <button
-              aria-controls={getPanelId(index)}
-              aria-selected={isSelected}
-              className={cn(
-                "rounded-t-md border-b-2 px-3 py-1.5 font-mono text-xs transition-colors",
-                isSelected
-                  ? "border-primary text-foreground"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
-              )}
-              data-index={index}
-              id={getTabId(index)}
-              key={item.key}
-              onClick={handleTabClick}
-              onKeyDown={handleTabKeyDown}
-              role="tab"
-              tabIndex={isSelected ? 0 : -1}
-              type="button"
-            >
-              {item.label}
-            </button>
-          );
-        })}
-      </div>
-      <div
-        aria-labelledby={getTabId(activeIndex)}
-        id={getPanelId(activeIndex)}
-        role="tabpanel"
-        tabIndex={0}
-      >
-        {activeItem.element}
-      </div>
-    </div>
-  );
-};

package/docs/components/mdx/color.tsx

@@ -1,87 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface ColorItemProps {
-  name?: string;
-  value: string | { light: string; dark: string };
-}
-
-const ColorItem = ({ name, value }: ColorItemProps) => {
-  const lightValue = typeof value === "string" ? value : value.light;
-  const darkValue = typeof value === "string" ? value : value.dark;
-
-  return (
-    <div className="flex items-center gap-3">
-      <div
-        className="size-8 shrink-0 rounded-md border border-border"
-        style={{ backgroundColor: lightValue }}
-      >
-        {typeof value === "string" ? null : (
-          <div
-            className="hidden size-full rounded-md dark:block"
-            style={{ backgroundColor: darkValue }}
-          />
-        )}
-      </div>
-      <div className="min-w-0">
-        {name ? (
-          <div className="text-sm font-medium text-foreground">{name}</div>
-        ) : null}
-        <div className="font-mono text-xs text-muted-foreground">
-          {lightValue}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface ColorRowProps {
-  title?: string;
-  children: ReactNode;
-}
-
-const ColorRow = ({ title, children }: ColorRowProps) => (
-  <>
-    {title ? (
-      <tr>
-        <td
-          className="border-b border-border bg-muted/50 px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-          colSpan={2}
-        >
-          {title}
-        </td>
-      </tr>
-    ) : null}
-    {children}
-  </>
-);
-
-interface ColorProps {
-  variant?: "compact" | "table";
-  children: ReactNode;
-}
-
-const Color = ({ variant = "compact", children }: ColorProps) => (
-  <div
-    className={cn(
-      "my-4",
-      variant === "compact" &&
-        "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
-      variant === "table" && "overflow-hidden rounded-xl border border-border"
-    )}
-  >
-    {variant === "table" ? (
-      <table className="w-full text-sm">
-        <tbody>{children}</tbody>
-      </table>
-    ) : (
-      children
-    )}
-  </div>
-);
-
-Color.Item = ColorItem;
-Color.Row = ColorRow;
-
-export { Color };

package/docs/components/mdx/columns.tsx

@@ -1,25 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface ColumnsProps {
-  cols?: 1 | 2 | 3 | 4;
-  children: ReactNode;
-}
-
-const colStyles: Record<number, string> = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-};
-
-export const Columns = ({ cols = 2, children }: ColumnsProps) => (
-  <div className={cn("my-4 grid gap-4", colStyles[cols] ?? colStyles[2])}>
-    {children}
-  </div>
-);
-
-export const Column = ({ children }: { children: ReactNode }) => (
-  <div className="min-w-0">{children}</div>
-);