docs: mdx, light/dark mode, ask (#400)

docs/src/app/selectors/page.mdx

@@ -0,0 +1,56 @@
+export const metadata = { title: "Selectors" }
+
+# Selectors
+
+## Refs (recommended)
+
+Refs provide deterministic element selection from snapshots. Best for AI agents.
+
+```bash
+# 1. Get snapshot with refs
+agent-browser snapshot
+# Output:
+# - heading "Example Domain" [ref=e1] [level=1]
+# - button "Submit" [ref=e2]
+# - textbox "Email" [ref=e3]
+# - link "Learn more" [ref=e4]
+
+# 2. Use refs to interact
+agent-browser click @e2                   # Click the button
+agent-browser fill @e3 "test@example.com" # Fill the textbox
+agent-browser get text @e1                # Get heading text
+agent-browser hover @e4                   # Hover the link
+```
+
+### Why refs?
+
+- **Deterministic** - Ref points to exact element from snapshot
+- **Fast** - No DOM re-query needed
+- **AI-friendly** - LLMs can reliably parse and use refs
+
+## CSS selectors
+
+```bash
+agent-browser click "#id"
+agent-browser click ".class"
+agent-browser click "div > button"
+agent-browser click "[data-testid='submit']"
+```
+
+## Text & XPath
+
+```bash
+agent-browser click "text=Submit"
+agent-browser click "xpath=//button[@type='submit']"
+```
+
+## Semantic locators
+
+Find elements by role, label, or other semantic properties:
+
+```bash
+agent-browser find role button click --name "Submit"
+agent-browser find label "Email" fill "test@test.com"
+agent-browser find placeholder "Search..." fill "query"
+agent-browser find testid "submit-btn" click
+```

docs/src/app/selectors/page.tsx

@@ -1,53 +0,0 @@
-import { CodeBlock } from "@/components/code-block";
-
-export default function Selectors() {
-  return (
-    <div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
-      <div className="prose">
-        <h1>Selectors</h1>
-
-        <h2>Refs (recommended)</h2>
-        <p>
-          Refs provide deterministic element selection from snapshots. Best for AI agents.
-        </p>
-        <CodeBlock code={`# 1. Get snapshot with refs
-agent-browser snapshot
-# Output:
-# - heading "Example Domain" [ref=e1] [level=1]
-# - button "Submit" [ref=e2]
-# - textbox "Email" [ref=e3]
-# - link "Learn more" [ref=e4]
-
-# 2. Use refs to interact
-agent-browser click @e2                   # Click the button
-agent-browser fill @e3 "test@example.com" # Fill the textbox
-agent-browser get text @e1                # Get heading text
-agent-browser hover @e4                   # Hover the link`} />
-
-        <h3>Why refs?</h3>
-        <ul>
-          <li><strong>Deterministic</strong> - Ref points to exact element from snapshot</li>
-          <li><strong>Fast</strong> - No DOM re-query needed</li>
-          <li><strong>AI-friendly</strong> - LLMs can reliably parse and use refs</li>
-        </ul>
-
-        <h2>CSS selectors</h2>
-        <CodeBlock code={`agent-browser click "#id"
-agent-browser click ".class"
-agent-browser click "div > button"
-agent-browser click "[data-testid='submit']"`} />
-
-        <h2>Text & XPath</h2>
-        <CodeBlock code={`agent-browser click "text=Submit"
-agent-browser click "xpath=//button[@type='submit']"`} />
-
-        <h2>Semantic locators</h2>
-        <p>Find elements by role, label, or other semantic properties:</p>
-        <CodeBlock code={`agent-browser find role button click --name "Submit"
-agent-browser find label "Email" fill "test@test.com"
-agent-browser find placeholder "Search..." fill "query"
-agent-browser find testid "submit-btn" click`} />
-      </div>
-    </div>
-  );
-}