blodemd 0.1.0 → 0.2.0

package/docs/components/mdx/expandable.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface ExpandableProps {
-  title?: string;
-  defaultOpen?: boolean;
-  children: ReactNode;
-}
-
-export const Expandable = ({
-  title = "properties",
-  defaultOpen = false,
-  children,
-}: ExpandableProps) => {
-  const [open, setOpen] = useState(defaultOpen);
-  const toggle = useCallback(() => setOpen((prev) => !prev), []);
-
-  return (
-    <div className="mt-2 ml-4 border-l border-border pl-4">
-      <button
-        className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground"
-        onClick={toggle}
-        type="button"
-      >
-        <svg
-          aria-hidden
-          className={cn(
-            "size-3 transition-transform duration-150",
-            open && "rotate-90"
-          )}
-          fill="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path d="m9 18 6-6-6-6" />
-        </svg>
-        {open ? "Hide" : "Show"} {title}
-      </button>
-      {open ? <div className="mt-2">{children}</div> : null}
-    </div>
-  );
-};

package/docs/components/mdx/field-layout.tsx

@@ -1,77 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface FieldBadge {
-  label: string;
-  className?: string;
-}
-
-interface FieldLayoutProps {
-  name: string;
-  type?: string;
-  required?: boolean;
-  deprecated?: boolean;
-  defaultValue?: string;
-  badges?: FieldBadge[];
-  children?: ReactNode;
-}
-
-export const FieldLayout = ({
-  name,
-  type,
-  required,
-  deprecated,
-  defaultValue,
-  badges,
-  children,
-}: FieldLayoutProps) => (
-  <div className="border-b border-border py-4 first:pt-0 last:border-b-0">
-    <div className="flex flex-wrap items-center gap-2">
-      {badges
-        ?.filter((b) => b.label)
-        .map((badge) => (
-          <span
-            className={cn(
-              "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground",
-              badge.className
-            )}
-            key={badge.label}
-          >
-            {badge.label}
-          </span>
-        ))}
-      <code className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-sm font-medium">
-        {name}
-      </code>
-      {type ? (
-        <span className="text-xs text-muted-foreground">{type}</span>
-      ) : null}
-      {required ? (
-        <span className="text-xs font-medium text-red-600 dark:text-red-400">
-          required
-        </span>
-      ) : null}
-      {deprecated ? (
-        <span
-          className={cn(
-            "rounded-full bg-amber-100 px-2 py-0.5 text-xs text-amber-700",
-            "dark:bg-amber-900/40 dark:text-amber-300"
-          )}
-        >
-          deprecated
-        </span>
-      ) : null}
-      {defaultValue ? (
-        <span className="text-xs text-muted-foreground">
-          Default: <code className="font-mono">{defaultValue}</code>
-        </span>
-      ) : null}
-    </div>
-    {children ? (
-      <div className="mt-2 text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
-        {children}
-      </div>
-    ) : null}
-  </div>
-);

package/docs/components/mdx/frame.tsx

@@ -1,23 +0,0 @@
-import type { ReactNode } from "react";
-
-interface FrameProps {
-  caption?: string;
-  hint?: string;
-  children: ReactNode;
-}
-
-export const Frame = ({ caption, hint, children }: FrameProps) => (
-  <figure className="my-4">
-    {hint ? (
-      <div className="mb-2 text-sm text-muted-foreground">{hint}</div>
-    ) : null}
-    <div className="overflow-hidden rounded-xl border border-border bg-card">
-      {children}
-    </div>
-    {caption ? (
-      <figcaption className="mt-2 text-center text-sm text-muted-foreground">
-        {caption}
-      </figcaption>
-    ) : null}
-  </figure>
-);

package/docs/components/mdx/get-text-content.ts

@@ -1,18 +0,0 @@
-import { isValidElement } from "react";
-import type { ReactNode } from "react";
-
-export const getTextContent = (node: ReactNode): string => {
-  if (typeof node === "string") {
-    return node;
-  }
-  if (typeof node === "number") {
-    return String(node);
-  }
-  if (Array.isArray(node)) {
-    return node.map(getTextContent).join("");
-  }
-  if (isValidElement<{ children?: ReactNode }>(node)) {
-    return getTextContent(node.props.children);
-  }
-  return "";
-};

package/docs/components/mdx/icon.tsx

@@ -1,12 +0,0 @@
-import { DocIcon } from "@/components/icons/doc-icon";
-
-interface IconProps {
-  icon: string;
-  color?: string;
-  size?: number;
-  className?: string;
-}
-
-export const Icon = ({ icon, color, size = 16, className }: IconProps) => (
-  <DocIcon className={className} color={color} icon={icon} size={size} />
-);

package/docs/components/mdx/iframe.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface IframeProps {
-  src: string;
-  height: number;
-  title?: string;
-  allowResize?: boolean;
-  className?: string;
-}
-
-export const Iframe = ({
-  src,
-  height,
-  title = "Embedded content",
-  allowResize = false,
-  className,
-}: IframeProps) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [dynamicHeight, setDynamicHeight] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (!allowResize) {
-      return;
-    }
-
-    const handleMessage = (event: MessageEvent) => {
-      if (
-        event.data?.type === "resize" &&
-        typeof event.data?.height === "number"
-      ) {
-        setDynamicHeight(event.data.height);
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [allowResize]);
-
-  const resolvedHeight = dynamicHeight ?? height;
-
-  return (
-    <div
-      className={cn(
-        "relative overflow-hidden rounded-xl border border-border bg-card",
-        className
-      )}
-      style={{ height: `${resolvedHeight}px` }}
-    >
-      <iframe
-        ref={iframeRef}
-        className="h-full w-full border-0"
-        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-        src={src}
-        title={title}
-      />
-    </div>
-  );
-};

package/docs/components/mdx/index.tsx

@@ -1,121 +0,0 @@
-import type { MDXComponents } from "mdx/types";
-import Link from "next/link";
-import type { ComponentProps } from "react";
-
-import { isExternalHref, resolveHref } from "@/lib/routes";
-
-import { Accordion, AccordionGroup } from "./accordion";
-import { AgentInstructions } from "./agent-instructions";
-import { Badge } from "./badge";
-import { Callout, Check, Danger, Info, Note, Tip, Warning } from "./callout";
-import { Card } from "./card";
-import { CodeBlock } from "./code-block";
-import { CodeGroup } from "./code-group";
-import { Color } from "./color";
-import { Column, Columns } from "./columns";
-import { Expandable } from "./expandable";
-import { Frame } from "./frame";
-import { Icon } from "./icon";
-import { Iframe } from "./iframe";
-import { Installer } from "./installer";
-import { Panel } from "./panel";
-import { ParamField } from "./param-field";
-import { Preview } from "./preview";
-import { Prompt } from "./prompt";
-import { RequestExample, ResponseExample } from "./request-example";
-import { ResponseField } from "./response-field";
-import { Step, Steps } from "./steps";
-import { Tab, Tabs } from "./tabs";
-import { Tile } from "./tile";
-import { Tooltip } from "./tooltip";
-import { Tree as TreeRoot, TreeFile, TreeFolder } from "./tree";
-import { TypeTable } from "./type-table";
-import { Update } from "./update";
-import { Video } from "./video";
-import { View, ViewGroup } from "./view";
-
-// Rebuild dotted MDX exports in the server module so Next's client references
-// still expose `Tree.Folder` and `Tree.File` during MDX evaluation.
-const Tree = Object.assign(
-  (props: ComponentProps<typeof TreeRoot>) => <TreeRoot {...props} />,
-  {
-    File: TreeFile,
-    Folder: TreeFolder,
-  }
-);
-
-const createMdxLink = (basePath: string, currentPath: string) => {
-  const MdxLink = ({
-    href,
-    children,
-    ...props
-  }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-    if (!href) {
-      return <a {...props}>{children}</a>;
-    }
-    if (isExternalHref(href)) {
-      return (
-        <a {...props} href={href} rel="noopener noreferrer" target="_blank">
-          {children}
-        </a>
-      );
-    }
-    return (
-      <Link href={resolveHref(href, basePath, currentPath)} {...props}>
-        {children}
-      </Link>
-    );
-  };
-  MdxLink.displayName = "MdxLink";
-  return MdxLink;
-};
-
-export const createMdxComponents = (
-  basePath = "",
-  currentPath = ""
-): MDXComponents => ({
-  Accordion,
-  AccordionGroup,
-  AgentInstructions,
-  Badge,
-  Callout,
-  Card,
-  Check,
-  CodeGroup,
-  Color,
-  Column,
-  Columns,
-  Danger,
-  Expandable,
-  Frame,
-  Icon,
-  Iframe,
-  Info,
-  Installer,
-  Note,
-  Panel,
-  ParamField,
-  Preview,
-  Prompt,
-  RequestExample,
-  ResponseExample,
-  ResponseField,
-  Step,
-  Steps,
-  Tab,
-  Tabs,
-  Tile,
-  Tip,
-  Tooltip,
-  Tree,
-  TypeTable,
-  Update,
-  Video,
-  View,
-  ViewGroup,
-  Warning,
-  a: createMdxLink(basePath, currentPath),
-  pre: CodeBlock,
-});
-
-export const mdxComponents: MDXComponents = createMdxComponents();

package/docs/components/mdx/installer.tsx

@@ -1,20 +0,0 @@
-export const Installer = ({
-  path,
-  command,
-}: {
-  path: string;
-  command?: string;
-}) => {
-  const resolvedCommand =
-    command ?? `npx @vercel/platform-elements@latest ${path}`;
-  return (
-    <div className="my-4 grid gap-2.5 rounded-xl border border-border bg-background/70 p-3.5">
-      <div className="text-xs uppercase tracking-widest text-muted-foreground">
-        Install
-      </div>
-      <pre className="m-0 overflow-x-auto rounded-lg bg-code p-3 font-mono text-sm text-code-foreground">
-        <code>{resolvedCommand}</code>
-      </pre>
-    </div>
-  );
-};

package/docs/components/mdx/panel.tsx

@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-
-interface PanelProps {
-  children: ReactNode;
-}
-
-export const Panel = ({ children }: PanelProps) => (
-  <aside className="my-4 rounded-xl border border-border bg-card p-4">
-    {children}
-  </aside>
-);

package/docs/components/mdx/param-field.tsx

@@ -1,56 +0,0 @@
-import type { ReactNode } from "react";
-
-import { FieldLayout } from "./field-layout";
-
-interface ParamFieldProps {
-  path?: string;
-  query?: string;
-  body?: string;
-  header?: string;
-  type?: string;
-  required?: boolean;
-  deprecated?: boolean;
-  default?: string;
-  placeholder?: string;
-  children?: ReactNode;
-}
-
-export const ParamField = ({
-  path,
-  query,
-  body,
-  header,
-  type,
-  required,
-  deprecated,
-  default: defaultValue,
-  children,
-}: ParamFieldProps) => {
-  const name = path ?? query ?? body ?? header ?? "";
-
-  let location: string | undefined;
-  if (path) {
-    location = "path";
-  } else if (query) {
-    location = "query";
-  } else if (body) {
-    location = "body";
-  } else if (header) {
-    location = "header";
-  }
-
-  const badges = location ? [{ label: location }] : undefined;
-
-  return (
-    <FieldLayout
-      badges={badges}
-      defaultValue={defaultValue}
-      deprecated={deprecated}
-      name={name}
-      required={required}
-      type={type}
-    >
-      {children}
-    </FieldLayout>
-  );
-};

package/docs/components/mdx/preview.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode } from "react";
-
-export const Preview = ({
-  example,
-  source,
-  title = "Preview",
-  children,
-}: {
-  example?: string;
-  source?: string;
-  title?: string;
-  children?: ReactNode;
-}) => (
-  <div className="my-4 grid gap-3 rounded-xl border border-border bg-surface p-4">
-    <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
-      <span className="font-semibold">{title}</span>
-      {example ? (
-        <span className="rounded-full border border-border bg-accent px-2.5 py-1 text-primary">
-          {example}
-        </span>
-      ) : null}
-      {source ? (
-        <span className="rounded-full border border-border bg-accent px-2.5 py-1 text-primary">
-          {source}
-        </span>
-      ) : null}
-    </div>
-    <div className="rounded-xl border border-dashed border-border bg-gradient-to-br from-primary/15 to-primary/5 p-4.5">
-      {children ?? (
-        <div className="text-sm text-muted-foreground">
-          Interactive preview placeholder
-        </div>
-      )}
-    </div>
-  </div>
-);

package/docs/components/mdx/prompt.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { CheckIcon, ClipboardIcon } from "blode-icons-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-
-import { getTextContent } from "./get-text-content";
-
-interface PromptProps {
-  description: string;
-  icon?: ReactNode;
-  children: ReactNode;
-}
-
-export const Prompt = ({ description, icon, children }: PromptProps) => {
-  const [copied, setCopied] = useState(false);
-  const text = useMemo(() => getTextContent(children), [children]);
-
-  useEffect(() => {
-    if (copied) {
-      const timer = setTimeout(() => setCopied(false), 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [copied]);
-
-  const handleCopy = useCallback(async () => {
-    if (!text) {
-      return;
-    }
-    await navigator.clipboard.writeText(text);
-    setCopied(true);
-  }, [text]);
-
-  return (
-    <div className="my-4 rounded-xl border border-border bg-card">
-      <div className="flex items-start gap-3 border-b border-border p-4">
-        {icon ? (
-          <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground">
-            {icon}
-          </span>
-        ) : null}
-        <div className="min-w-0 flex-1 text-sm text-foreground">
-          {description}
-        </div>
-        <button
-          className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-          onClick={handleCopy}
-          type="button"
-        >
-          <span className="sr-only">{copied ? "Copied" : "Copy prompt"}</span>
-          {copied ? (
-            <CheckIcon aria-hidden className="size-3.5" />
-          ) : (
-            <ClipboardIcon aria-hidden className="size-3.5" />
-          )}
-        </button>
-      </div>
-      <div className="p-4 text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
-        {children}
-      </div>
-    </div>
-  );
-};

package/docs/components/mdx/request-example.tsx

@@ -1,27 +0,0 @@
-import type { ReactNode } from "react";
-
-interface RequestExampleProps {
-  children: ReactNode;
-}
-
-export const RequestExample = ({ children }: RequestExampleProps) => (
-  <div className="my-4">
-    <div className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-      Request
-    </div>
-    <div className="[&>pre]:mt-0 [&>[data-rehype-pretty-code-figure]]:mt-0">
-      {children}
-    </div>
-  </div>
-);
-
-export const ResponseExample = ({ children }: RequestExampleProps) => (
-  <div className="my-4">
-    <div className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-      Response
-    </div>
-    <div className="[&>pre]:mt-0 [&>[data-rehype-pretty-code-figure]]:mt-0">
-      {children}
-    </div>
-  </div>
-);

package/docs/components/mdx/response-field.tsx

@@ -1,42 +0,0 @@
-import type { ReactNode } from "react";
-
-import { FieldLayout } from "./field-layout";
-
-interface ResponseFieldProps {
-  name: string;
-  type: string;
-  default?: string;
-  required?: boolean;
-  deprecated?: boolean;
-  pre?: string[];
-  post?: string[];
-  children?: ReactNode;
-}
-
-export const ResponseField = ({
-  name,
-  type,
-  default: defaultValue,
-  required,
-  deprecated,
-  pre,
-  post,
-  children,
-}: ResponseFieldProps) => {
-  const preBadges = pre?.map((label) => ({ label })) ?? [];
-  const postBadges = post?.map((label) => ({ label })) ?? [];
-  const badges = [...preBadges, ...postBadges];
-
-  return (
-    <FieldLayout
-      badges={badges.length > 0 ? badges : undefined}
-      defaultValue={defaultValue}
-      deprecated={deprecated}
-      name={name}
-      required={required}
-      type={type}
-    >
-      {children}
-    </FieldLayout>
-  );
-};