feat: added syntax highlighting; updated the docs

examples/cyberpunk-standalone/src/components/docs-section.tsx

@@ -1,30 +1,57 @@
-"use client"
+"use client";
 
-import type React from "react"
-import { Book, Code2, Terminal, Copy, Check } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { useState } from "react"
+import type React from "react";
+import { Book, Code2, Terminal, Copy, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-const CodeBlock = ({ children }: { children: React.ReactNode }) => {
-  const [copied, setCopied] = useState(false)
+const CodeBlock = ({
+  children,
+  language = "typescript",
+}: {
+  children: React.ReactNode;
+  language?: string;
+}) => {
+  const [copied, setCopied] = useState(false);
 
   const copyToClipboard = async (text: string) => {
     try {
-      await navigator.clipboard.writeText(text)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error("Failed to copy:", err)
+      console.error("Failed to copy:", err);
     }
-  }
+  };
 
-  const codeText = typeof children === "string" ? children : children?.toString() || ""
+  const codeText =
+    typeof children === "string" ? children : children?.toString() || "";
 
   return (
     <div className="bg-muted/50 dark:bg-black/40 border border-border dark:border-white/10 rounded-md overflow-hidden my-4 relative">
-      <pre className="p-4 text-sm overflow-x-auto">
-        <code>{children}</code>
-      </pre>
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{
+          margin: 0,
+          padding: "1rem",
+          fontSize: "0.875rem",
+          background: "transparent",
+          backgroundColor: "transparent",
+        }}
+        wrapLines={true}
+        wrapLongLines={true}
+        codeTagProps={{
+          style: {
+            background: "transparent",
+            backgroundColor: "transparent",
+          },
+        }}
+      >
+        {codeText}
+      </SyntaxHighlighter>
       <Button
         variant="outline"
         size="sm"
@@ -34,8 +61,8 @@ const CodeBlock = ({ children }: { children: React.ReactNode }) => {
         {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
       </Button>
     </div>
-  )
-}
+  );
+};
 
 export function DocsSection() {
   return (
@@ -45,7 +72,9 @@ export function DocsSection() {
           <Book className="w-6 h-6" />
           Docs
         </h2>
-        <p className="text-sm text-muted-foreground">A quick guide to get started with the @lerobot/web API.</p>
+        <p className="text-sm text-muted-foreground">
+          Complete API reference for @lerobot/web robotics library.
+        </p>
       </div>
 
       <div className="bg-muted/40 dark:bg-black/30 border-l-4 border-cyan-500 dark:border-accent-cyan p-6 md:p-8 rounded-r-lg space-y-8">
@@ -56,22 +85,60 @@ export function DocsSection() {
             Getting Started
           </h3>
           <p className="text-muted-foreground text-sm mt-2 mb-4">
-            First, import the API from the library. Then you can call its methods to find and control your robot.
+            Complete workflow from discovery to teleoperation.
           </p>
           <CodeBlock>
-            {`import { lerobot } from '@lerobot/web';
-
-async function connectToRobot() {
-  const { result } = await lerobot.findPort({
-    onMessage: (message) => console.log('Status:', message),
-  });
-  
-  const robots = await result;
-  console.log('Found robots:', robots);
-}`}
+            {`import { findPort, releaseMotors, calibrate, teleoperate } from "@lerobot/web";
+
+// 1. find and connect to hardware like a robot arm
+const findProcess = await findPort();
+const robots = await findProcess.result;
+const robot = robots[0];
+
+// 2. release the motors and put them into the homing position
+await releaseMotors(robot);
+
+// 3. calibrate the motors by moving each motor through its full range of motion
+const calibrationProcess = await calibrate({
+  robot,
+  onProgress: (message) => console.log(message),
+  onLiveUpdate: (data) => console.log("Live positions:", data),
+});
+
+// when done, stop calibration and get the min/max ranges for each motor
+calibrationProcess.stop();
+const calibrationData = await calibrationProcess.result;
+
+// 4. start controlling the robot arm with your keyboard
+const teleop = await teleoperate({
+  robot,
+  calibrationData,
+  teleop: { type: "keyboard" },
+});
+teleop.start();`}
           </CodeBlock>
         </div>
 
+        {/* Browser Requirements */}
+        <div>
+          <h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase">
+            Browser Requirements
+          </h3>
+          <div className="mt-4 space-y-2 text-sm">
+            <div>
+              • <strong>Chromium 89+</strong> with WebSerial and WebUSB API
+              support
+            </div>
+            <div>
+              • <strong>HTTPS or localhost</strong>
+            </div>
+            <div>
+              • <strong>User gesture</strong> required for initial port
+              selection
+            </div>
+          </div>
+        </div>
+
         {/* API Reference */}
         <div>
           <h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase flex items-center gap-2">
@@ -81,70 +148,122 @@ async function connectToRobot() {
           <div className="space-y-6 mt-4">
             {/* findPort */}
             <div>
-              <h4 className="font-bold text-primary">lerobot.findPort(options)</h4>
-              <p className="text-muted-foreground text-sm mt-1">Scans for available robot connections via WebSerial.</p>
+              <h4 className="font-bold text-primary">findPort(config?)</h4>
+              <p className="text-muted-foreground text-sm mt-1">
+                Discovers and connects to robotics hardware using WebSerial API.
+              </p>
               <CodeBlock>
-                {`// Options
-{
-  robotConfigs?: RobotConfig[], // Optional: Saved configs to try reconnecting
-  onMessage?: (msg: string) => void // Callback for status updates
-}
+                {`// Interactive Mode (Default) - Shows port dialog
+const findProcess = await findPort();
+const robots = await findProcess.result; // RobotConnection[]
 
-// Returns
+// Auto-Connect Mode - Reconnects to known robots
+const findProcess = await findPort({
+  robotConfigs: [
+    { robotType: "so100_follower", robotId: "left_arm", serialNumber: "USB123" }
+  ],
+  onMessage: (msg) => console.log(msg),
+});
+
+// Returns: FindPortProcess
 {
-  result: Promise<RobotConnection[]> // A promise that resolves with found robots
+  result: Promise<RobotConnection[]>, // Array of robot connections
+  stop(): void // Cancel discovery process
 }`}
               </CodeBlock>
             </div>
 
             {/* calibrate */}
             <div>
-              <h4 className="font-bold text-primary">lerobot.calibrate(robot, options)</h4>
-              <p className="text-muted-foreground text-sm mt-1">Starts the calibration process for a specific robot.</p>
+              <h4 className="font-bold text-primary">calibrate(config)</h4>
+              <p className="text-muted-foreground text-sm mt-1">
+                Calibrates motor homing offsets and records range of motion.
+              </p>
               <CodeBlock>
-                {`// Parameters
-robot: RobotConnection // The robot instance to calibrate
+                {`const calibrationProcess = await calibrate({
+  robot,
+  onProgress: (message) => {
+    console.log(message); // "⚙️ Setting motor homing offsets"
+  },
+  onLiveUpdate: (data) => {
+    // Real-time motor positions during range recording
+    Object.entries(data).forEach(([motor, info]) => {
+      console.log(\`\${motor}: \${info.current} (range: \${info.range})\`);
+    });
+  },
+});
 
-// Options
-{
-  onLiveUpdate: (data: LiveCalibrationData) => void, // Callback for real-time joint data
-  onProgress: (msg: string) => void // Callback for status messages
-}
+// Move robot through full range of motion...
+calibrationProcess.stop(); // Stop range recording
+const calibrationData = await calibrationProcess.result;
 
-// Returns
+// Returns: CalibrationProcess
 {
-  result: Promise<WebCalibrationResults>, // A promise that resolves with final calibration
-  stop: () => void // Function to stop the calibration recording
+  result: Promise<WebCalibrationResults>, // Python-compatible format
+  stop(): void // Stop calibration process
 }`}
               </CodeBlock>
             </div>
 
             {/* teleoperate */}
             <div>
-              <h4 className="font-bold text-primary">lerobot.teleoperate(robot, options)</h4>
-              <p className="text-muted-foreground text-sm mt-1">Initializes the teleoperation interface for a robot.</p>
+              <h4 className="font-bold text-primary">teleoperate(config)</h4>
+              <p className="text-muted-foreground text-sm mt-1">
+                Enables real-time robot control with extensible input devices.
+              </p>
               <CodeBlock>
-                {`// Parameters
-robot: RobotConnection,
-calibrationData: WebCalibrationResults
+                {`// Keyboard Teleoperation
+const keyboardTeleop = await teleoperate({
+  robot,
+  calibrationData: savedCalibrationData,
+  teleop: { type: "keyboard" },
+  onStateUpdate: (state) => {
+    console.log(\`Active: \${state.isActive}\`);
+    console.log(\`Motors:\`, state.motorConfigs);
+  },
+});
 
-// Options
-{
-  onStateUpdate: (state: TeleoperationState) => void // Callback for real-time state updates
-}
+// Direct Teleoperation
+const directTeleop = await teleoperate({
+  robot,
+  calibrationData: savedCalibrationData,
+  teleop: { type: "direct" },
+});
 
-// Returns
+// Returns: TeleoperationProcess
 {
-  start: () => void,
-  stop: () => void,
-  updateKeyState: (key: string, pressed: boolean) => void,
-  moveMotor: (motorName: string, position: number) => void
+  start(): void, // Begin teleoperation
+  stop(): void, // Stop teleoperation and clear states
+  getState(): TeleoperationState, // Current state and motor positions
+  teleoperator: BaseWebTeleoperator, // Access teleoperator-specific methods
+  disconnect(): Promise<void> // Stop and disconnect
 }`}
               </CodeBlock>
             </div>
+
+            {/* releaseMotors */}
+            <div>
+              <h4 className="font-bold text-primary">
+                releaseMotors(robot, motorIds?)
+              </h4>
+              <p className="text-muted-foreground text-sm mt-1">
+                Releases motor torque so robot can be moved freely by hand.
+              </p>
+              <CodeBlock>
+                {`// Release all motors for calibration
+await releaseMotors(robot);
+
+// Release specific motors only
+await releaseMotors(robot, [1, 2, 3]);
+
+// Parameters
+robot: RobotConnection // Connected robot
+motorIds?: number[] // Specific motor IDs (default: all motors for robot type)`}
+              </CodeBlock>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }