feat(cloud): port majority of mdx components without code-block

cloud/app/components/blocks/copy-markdown-button.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Button } from "@/app/components/ui/button";
+import { Clipboard, Check } from "lucide-react";
+// import analyticsManager from "@/app/lib/services/analytics";
+
+interface CopyMarkdownButtonProps {
+  content: string;
+  itemId: string;
+  contentType: "blog_markdown" | "document_markdown";
+  className?: string;
+}
+
+export function CopyMarkdownButton({
+  content,
+  className = "",
+}: CopyMarkdownButtonProps) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = () => {
+    if (!content) return;
+
+    navigator.clipboard
+      .writeText(content)
+      .then(() => {
+        setIsCopied(true);
+        setTimeout(() => {
+          setIsCopied(false);
+        }, 2000);
+
+        // analyticsManager.trackCopyEvent({
+        //   contentType,
+        //   itemId,
+        // });
+      })
+      .catch((err) => {
+        console.error("Failed to copy content: ", err);
+      });
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleCopy}
+      disabled={isCopied}
+      className={`w-full ${className}`}
+    >
+      {isCopied ? (
+        <>
+          <Check className="mr-1 h-4 w-4" />
+          Copied!
+        </>
+      ) : (
+        <>
+          <Clipboard className="mr-1 h-4 w-4" />
+          Copy as Markdown
+        </>
+      )}
+    </Button>
+  );
+}

cloud/app/components/blocks/docs/api-signature.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+/**
+ * Component to display an API function/method signature
+ */
+export default function ApiSignature({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="api-signature bg-muted my-4 overflow-x-auto rounded-md p-3 font-mono">
+      {children}
+    </div>
+  );
+}

cloud/app/components/blocks/docs/api-type.tsx

@@ -0,0 +1,33 @@
+/**
+ * Component to display the API object type within headings
+ *
+ * Renders the type as a colored label and stores metadata for documentation linking.
+ */
+export interface ApiTypeProps {
+  /** The type of API object (Module, Class, Function, Alias, Attribute) */
+  type: string;
+  /** The path to the document (e.g., "core/anthropic/call_params") */
+  path: string;
+  /** The name of the symbol (e.g., "AnthropicCallParams") */
+  symbolName: string;
+  /** The slug for this API object (used for heading IDs) */
+  slug: string;
+}
+
+export default function ApiType({
+  type,
+  path,
+  symbolName,
+  slug,
+}: ApiTypeProps) {
+  return (
+    <span
+      className="text-card-foreground bg-card mr-2 rounded-md px-2 py-1 align-middle text-sm font-medium"
+      data-path={path}
+      data-symbol={symbolName}
+      data-slug={slug}
+    >
+      {type}
+    </span>
+  );
+}

cloud/app/components/blocks/docs/attributes-table.tsx

@@ -0,0 +1,53 @@
+import { type TypeInfo, TypeLink } from "./type-link";
+
+export type Attribute = {
+  name: string;
+  type_info: TypeInfo;
+  description?: string;
+};
+
+interface AttributesTableProps {
+  attributes: Attribute[];
+}
+
+/**
+ * Component to display a table of class attributes
+ */
+export default function AttributesTable({ attributes }: AttributesTableProps) {
+  if (!attributes || attributes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="api-attributes my-6">
+      <h3 className="mb-2 text-lg font-semibold">Attributes</h3>
+      <div className="overflow-x-auto rounded-md border">
+        <table className="w-full border-collapse">
+          <thead className="bg-muted">
+            <tr>
+              <th className="border-b px-4 py-2 text-left">Name</th>
+              <th className="border-b px-4 py-2 text-left">Type</th>
+              <th className="border-b px-4 py-2 text-left">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {attributes.map((attr, index) => (
+              <tr
+                key={index}
+                className={index % 2 === 0 ? "bg-background" : "bg-muted/20"}
+              >
+                <td className="border-b px-4 py-2 font-mono">{attr.name}</td>
+                <td className="border-b px-4 py-2">
+                  <TypeLink type={attr.type_info} />
+                </td>
+                <td className="border-b px-4 py-2">
+                  {attr.description || "-"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

cloud/app/components/blocks/docs/parameters-table.tsx

@@ -0,0 +1,61 @@
+import { type TypeInfo, TypeLink } from "./type-link";
+
+export type Parameter = {
+  name: string;
+  type_info: TypeInfo;
+  description?: string;
+  default?: string;
+};
+
+interface ParametersTableProps {
+  parameters: Parameter[];
+}
+
+/**
+ * Component to display a table of parameters with their types
+ */
+export default function ParametersTable({ parameters }: ParametersTableProps) {
+  if (!parameters || parameters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="api-parameters my-6">
+      <h3 className="mb-2 text-lg font-semibold">Parameters</h3>
+      <div className="overflow-x-auto rounded-md border">
+        <table className="w-full border-collapse">
+          <thead className="bg-muted">
+            <tr>
+              <th className="border-b px-4 py-2 text-left">Name</th>
+              <th className="border-b px-4 py-2 text-left">Type</th>
+              <th className="border-b px-4 py-2 text-left">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {parameters.map((param, index) => (
+              <tr
+                key={index}
+                className={index % 2 === 0 ? "bg-background" : "bg-muted/20"}
+              >
+                <td className="border-b px-4 py-2 font-mono">
+                  {param.name}
+                  {param.default && (
+                    <span className="text-muted-foreground ml-2">
+                      = {param.default}
+                    </span>
+                  )}
+                </td>
+                <td className="border-b px-4 py-2">
+                  <TypeLink type={param.type_info} />
+                </td>
+                <td className="border-b px-4 py-2">
+                  {param.description || "-"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

cloud/app/components/blocks/docs/return-table.tsx

@@ -0,0 +1,54 @@
+import { type TypeInfo, TypeLink } from "./type-link";
+
+export type ReturnTypeInfo = {
+  name?: string;
+  type_info: TypeInfo;
+  description?: string;
+};
+
+interface ReturnTableProps {
+  returnType: ReturnTypeInfo;
+}
+
+/**
+ * Component to display a function's return type in a table format consistent with other tables
+ */
+export default function ReturnTable({ returnType }: ReturnTableProps) {
+  if (!returnType || !returnType.type_info) {
+    return null;
+  }
+
+  return (
+    <div className="api-return-type my-6">
+      <h3 className="mb-2 text-lg font-semibold">Returns</h3>
+      <div className="overflow-x-auto rounded-md border">
+        <table className="w-full border-collapse">
+          <thead className="bg-muted">
+            <tr>
+              {returnType.name && (
+                <th className="border-b px-4 py-2 text-left">Name</th>
+              )}
+              <th className="border-b px-4 py-2 text-left">Type</th>
+              <th className="border-b px-4 py-2 text-left">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-background">
+              {returnType.name && (
+                <td className="border-b px-4 py-2 font-mono">
+                  {returnType.name}
+                </td>
+              )}
+              <td className="border-b px-4 py-2">
+                <TypeLink type={returnType.type_info} />
+              </td>
+              <td className="border-b px-4 py-2">
+                {returnType.description || "-"}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}