docs: vendor the documentation site into the monorepo

Fold the standalone 3x-ui-docs project (Next.js 16 + Fumadocs, deployed to
docs.sanaei.dev) into docs/ so the panel and its documentation share a single
source of truth, the way sing-box keeps its docs in-tree. The old repo becomes
redundant and can be retired.

- Import the full site under docs/ (app, components, content, lib, public,
  scripts, config). The self-contained pnpm project sits alongside the existing
  engineering notes with no filename collisions.
- Re-point "Edit on GitHub" links from MHSanaei/3x-ui-docs to this repo's
  docs/content/docs path (docs/lib/shared.ts, docs/app/.../page.tsx).
- Add docs-ci.yml and docs-deploy.yml under .github/workflows/, scoped to
  docs/** and run with working-directory: docs, since GitHub only runs
  workflows from the repo-root .github/. deploy-static.yml's GitHub Pages
  publish (CNAME docs.sanaei.dev) carries over unchanged.

Follow-up (outside this commit): attach the docs.sanaei.dev custom domain to
this repository's Pages (or set the Vercel project's root directory to docs),
confirm the site is live from the monorepo, then delete MHSanaei/3x-ui-docs.

docs/components/tools/shared/copy-button.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '@/lib/cn';
+
+export function CopyButton({
+  value,
+  label = 'Copy',
+  className,
+}: {
+  value: string;
+  label?: string;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard unavailable (insecure context) — ignore.
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      aria-label={copied ? 'Copied' : label}
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-2 focus-visible:outline-fd-ring',
+        className,
+      )}
+    >
+      {copied ? (
+        <Check className="size-3.5 text-brand" aria-hidden />
+      ) : (
+        <Copy className="size-3.5" aria-hidden />
+      )}
+      <span>{copied ? 'Copied' : label}</span>
+    </button>
+  );
+}

docs/components/tools/shared/fields.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useId } from 'react';
+
+const inputClass =
+  'rounded-lg border bg-fd-background px-3 py-2 text-sm outline-none transition-colors focus-visible:border-fd-primary focus-visible:ring-2 focus-visible:ring-fd-ring/30';
+
+export function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  hint,
+  inputMode,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  hint?: string;
+  inputMode?: 'numeric' | 'text';
+}) {
+  const id = useId();
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={id} className="text-sm font-medium">
+        {label}
+      </label>
+      {/* Values are technical (hosts, links) and stay LTR even on RTL pages. */}
+      <input
+        id={id}
+        dir="ltr"
+        inputMode={inputMode}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        className={inputClass}
+      />
+      {hint ? <span className="text-xs text-fd-muted-foreground">{hint}</span> : null}
+    </div>
+  );
+}
+
+export function CheckboxField({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  const id = useId();
+  return (
+    <label htmlFor={id} className="inline-flex cursor-pointer items-center gap-2 text-sm">
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="size-4 accent-fd-primary"
+      />
+      {label}
+    </label>
+  );
+}
+
+export function SelectField({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: readonly string[];
+}) {
+  const id = useId();
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={id} className="text-sm font-medium">
+        {label}
+      </label>
+      <select
+        id={id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className={inputClass}
+      >
+        {options.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

docs/components/tools/shared/output-block.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import QRCode from 'react-qr-code';
+import { CopyButton } from './copy-button';
+
+export function OutputBlock({
+  label,
+  value,
+  qr = false,
+}: {
+  label: string;
+  value: string;
+  qr?: boolean;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border">
+      <div className="flex items-center justify-between gap-2 border-b bg-fd-muted/40 px-3 py-2">
+        <span className="text-xs font-medium text-fd-muted-foreground">{label}</span>
+        <CopyButton value={value} />
+      </div>
+      <pre dir="ltr" className="max-h-80 overflow-auto p-3 text-start text-xs leading-relaxed">
+        <code>{value}</code>
+      </pre>
+      {qr && value ? (
+        <div className="flex justify-center border-t bg-white p-4">
+          <QRCode value={value} size={180} />
+        </div>
+      ) : null}
+    </div>
+  );
+}