fix(docs): normalize OpenClaw OS route

docs/components/site-primary-nav.tsx

@@ -9,7 +9,7 @@ export const PRIMARY_SITE_NAV_ITEMS = [
   { title: "Playground", href: "/playground", newTab: false },
   { title: "Demo", href: "/demo/github", newTab: true },
   { title: "Blogs", href: "/blog", newTab: false },
-  { title: "OpenClaw OS", href: "/Openclaw-OS", newTab: false, badge: "New" },
+  { title: "OpenClaw OS", href: "/openclaw-os", newTab: false, badge: "New" },
 ] as const;
 
 export function SitePrimaryNav() {

docs/generated/chat-system-prompt.txt

@@ -31,7 +31,7 @@ Separator(orientation?: "horizontal" | "vertical", decorative?: boolean) — Vis
 
 ### Tables
 Table(columns: Col[]) — Data table — column-oriented. Each Col holds its own data array.
-Col(label: string, data, type?: "string" | "number" | "action") — Column definition — holds label + data array
+Col(label: string, data: any, type?: "string" | "number" | "action") — Column definition — holds label + data array
 
 ### Charts (2D)
 BarChart(labels: string[], series: Series[], variant?: "grouped" | "stacked", xLabel?: string, yLabel?: string) — Vertical bars; use for comparing values across categories with one or more series
@@ -53,20 +53,20 @@ ScatterSeries(name: string, points: Point[]) — Named dataset
 Point(x: number, y: number, z?: number) — Data point with numeric coordinates
 
 ### Forms
-Form(name: string, buttons: Buttons, fields) — Form container with fields and explicit action buttons
+Form(name: string, buttons: Buttons, fields?: FormControl[]) — Form container with fields and explicit action buttons
 FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slider | CheckBoxGroup | RadioGroup, hint?: string) — Field with label, input component, and optional hint text
 Label(text: string) — Text label
 Input(name: string, placeholder?: string, type?: "text" | "email" | "password" | "number" | "url", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 SelectItem(value: string, label: string) — Option for Select
-DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)
 Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>) — Numeric slider input; supports continuous and discrete (stepped) variants
-CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)
 CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)
 RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 RadioItem(label: string, description: string, value: string)
-SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?) — Group of switch toggles
+SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?: $binding<Record<string, boolean>>) — Group of switch toggles
 SwitchItem(label?: string, description?: string, name: string, defaultChecked?: boolean) — Individual switch toggle
 - Define EACH FormControl as its own reference — do NOT inline all controls in one array.
 - NEVER nest Form inside Form.

docs/generated/playground-component-spec.json

@@ -46,7 +46,7 @@
       "description": "Data table — column-oriented. Each Col holds its own data array."
     },
     "Col": {
-      "signature": "Col(label: string, data, type?: \"string\" | \"number\" | \"action\")",
+      "signature": "Col(label: string, data: any, type?: \"string\" | \"number\" | \"action\")",
       "description": "Column definition — holds label + data array"
     },
     "BarChart": {
@@ -102,7 +102,7 @@
       "description": "Data point with numeric coordinates"
     },
     "Form": {
-      "signature": "Form(name: string, buttons: Buttons, fields)",
+      "signature": "Form(name: string, buttons: Buttons, fields?: FormControl[])",
       "description": "Form container with fields and explicit action buttons"
     },
     "FormControl": {
@@ -130,15 +130,15 @@
       "description": "Option for Select"
     },
     "DatePicker": {
-      "signature": "DatePicker(name: string, mode?: \"single\" | \"range\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)",
+      "signature": "DatePicker(name: string, mode?: \"single\" | \"range\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)",
       "description": ""
     },
     "Slider": {
       "signature": "Slider(name: string, variant: \"continuous\" | \"discrete\", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>)",
       "description": "Numeric slider input; supports continuous and discrete (stepped) variants"
     },
     "CheckBoxGroup": {
-      "signature": "CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)",
+      "signature": "CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)",
       "description": ""
     },
     "CheckBoxItem": {
@@ -154,7 +154,7 @@
       "description": ""
     },
     "SwitchGroup": {
-      "signature": "SwitchGroup(name: string, items: SwitchItem[], variant?: \"clear\" | \"card\" | \"sunk\", value?)",
+      "signature": "SwitchGroup(name: string, items: SwitchItem[], variant?: \"clear\" | \"card\" | \"sunk\", value?: $binding<Record<string, boolean>>)",
       "description": "Group of switch toggles"
     },
     "SwitchItem": {
@@ -170,7 +170,7 @@
       "description": "Group of Button components. direction: \"row\" (default) | \"column\"."
     },
     "Stack": {
-      "signature": "Stack([children], direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)",
+      "signature": "Stack(children: any[], direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)",
       "description": "Flex container. direction: \"row\"|\"column\" (default \"column\"). gap: \"none\"|\"xs\"|\"s\"|\"m\"|\"l\"|\"xl\"|\"2xl\" (default \"m\"). align: \"start\"|\"center\"|\"end\"|\"stretch\"|\"baseline\". justify: \"start\"|\"center\"|\"end\"|\"between\"|\"around\"|\"evenly\"."
     },
     "Tabs": {
@@ -265,7 +265,10 @@
     },
     {
       "name": "Tables",
-      "components": ["Table", "Col"],
+      "components": [
+        "Table",
+        "Col"
+      ],
       "notes": [
         "- Table is COLUMN-oriented: Table([Col(\"Label\", dataArray), Col(\"Count\", countArray, \"number\")]). Use array pluck for data: data.rows.fieldName",
         "- Col data can be component arrays for styled cells: Col(\"Status\", @Each(data.rows, \"item\", Tag(item.status, null, \"sm\", item.status == \"open\" ? \"success\" : \"danger\")))",
@@ -295,7 +298,12 @@
     },
     {
       "name": "Charts (1D)",
-      "components": ["PieChart", "RadialChart", "SingleStackedBarChart", "Slice"],
+      "components": [
+        "PieChart",
+        "RadialChart",
+        "SingleStackedBarChart",
+        "Slice"
+      ],
       "notes": [
         "- PieChart and BarChart need NUMBERS, not objects. For list data, use @Count(@Filter(...)) to aggregate:",
         "- PieChart from list: `PieChart([\"Low\", \"Med\", \"High\"], [@Count(@Filter(data.rows, \"priority\", \"==\", \"low\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"medium\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"high\"))], \"donut\")`",
@@ -304,7 +312,11 @@
     },
     {
       "name": "Charts (Scatter)",
-      "components": ["ScatterChart", "ScatterSeries", "Point"]
+      "components": [
+        "ScatterChart",
+        "ScatterSeries",
+        "Point"
+      ]
     },
     {
       "name": "Forms",
@@ -338,14 +350,20 @@
     },
     {
       "name": "Buttons",
-      "components": ["Button", "Buttons"],
+      "components": [
+        "Button",
+        "Buttons"
+      ],
       "notes": [
         "- Toggle in @Each: @Each(rows, \"t\", Button(t.status == \"open\" ? \"Close\" : \"Reopen\", Action([...])))"
       ]
     },
     {
       "name": "Data Display",
-      "components": ["TagBlock", "Tag"],
+      "components": [
+        "TagBlock",
+        "Tag"
+      ],
       "notes": [
         "- Color-mapped Tag: Tag(value, null, \"sm\", value == \"high\" ? \"danger\" : value == \"medium\" ? \"warning\" : \"neutral\")"
       ]

docs/generated/playground-system-prompt.txt

@@ -18,7 +18,7 @@ Props typed `ActionExpression` accept an Action([@steps...]) expression. See the
 Props marked `$binding<type>` accept a `$variable` reference for two-way binding.
 
 ### Layout
-Stack([children], direction?: "row" | "column", gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | "2xl", align?: "start" | "center" | "end" | "stretch" | "baseline", justify?: "start" | "center" | "end" | "between" | "around" | "evenly", wrap?: boolean) — Flex container. direction: "row"|"column" (default "column"). gap: "none"|"xs"|"s"|"m"|"l"|"xl"|"2xl" (default "m"). align: "start"|"center"|"end"|"stretch"|"baseline". justify: "start"|"center"|"end"|"between"|"around"|"evenly".
+Stack(children: any[], direction?: "row" | "column", gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | "2xl", align?: "start" | "center" | "end" | "stretch" | "baseline", justify?: "start" | "center" | "end" | "between" | "around" | "evenly", wrap?: boolean) — Flex container. direction: "row"|"column" (default "column"). gap: "none"|"xs"|"s"|"m"|"l"|"xl"|"2xl" (default "m"). align: "start"|"center"|"end"|"stretch"|"baseline". justify: "start"|"center"|"end"|"between"|"around"|"evenly".
 Tabs(items: TabItem[]) — Tabbed container
 TabItem(value: string, trigger: string, content: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | Steps)[]) — value is unique id, trigger is tab label, content is array of components
 Accordion(items: AccordionItem[]) — Collapsible sections
@@ -53,7 +53,7 @@ CodeBlock(language: string, codeString: string) — Syntax-highlighted code bloc
 
 ### Tables
 Table(columns: Col[]) — Data table — column-oriented. Each Col holds its own data array.
-Col(label: string, data, type?: "string" | "number" | "action") — Column definition — holds label + data array
+Col(label: string, data: any, type?: "string" | "number" | "action") — Column definition — holds label + data array
 - Table is COLUMN-oriented: Table([Col("Label", dataArray), Col("Count", countArray, "number")]). Use array pluck for data: data.rows.fieldName
 - Col data can be component arrays for styled cells: Col("Status", @Each(data.rows, "item", Tag(item.status, null, "sm", item.status == "open" ? "success" : "danger")))
 - Row actions: Col("Actions", @Each(data.rows, "t", Button("Edit", Action([@Set($showEdit, true), @Set($editId, t.id)]))))
@@ -89,20 +89,20 @@ ScatterSeries(name: string, points: Point[]) — Named dataset
 Point(x: number, y: number, z?: number) — Data point with numeric coordinates
 
 ### Forms
-Form(name: string, buttons: Buttons, fields) — Form container with fields and explicit action buttons
+Form(name: string, buttons: Buttons, fields?: FormControl[]) — Form container with fields and explicit action buttons
 FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slider | CheckBoxGroup | RadioGroup, hint?: string) — Field with label, input component, and optional hint text
 Label(text: string) — Text label
 Input(name: string, placeholder?: string, type?: "text" | "email" | "password" | "number" | "url", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 SelectItem(value: string, label: string) — Option for Select
-DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)
 Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>) — Numeric slider input; supports continuous and discrete (stepped) variants
-CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)
 CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)
 RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 RadioItem(label: string, description: string, value: string)
-SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?) — Group of switch toggles
+SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?: $binding<Record<string, boolean>>) — Group of switch toggles
 SwitchItem(label?: string, description?: string, name: string, defaultChecked?: boolean) — Individual switch toggle
 - For Form fields, define EACH FormControl as its own reference — do NOT inline all controls in one array. This allows progressive field-by-field streaming.
 - NEVER nest Form inside Form — each Form should be a standalone container.