fix: update playground link in editor playground tutorial

refactor: modify React widget to use new wasm options structure

style: adjust button styles and colors in home page and run example component

feat: add LayerDiagram component to visualize architecture layers

style: enhance tooltip styling for CodeMirror in both light and dark modes

fix: improve theme handling in RunExample component for better UI consistency

chore: update tokyo night light theme colors for better syntax highlighting

Author: rbbydotdev

.github/workflows/pages.yml

@@ -1,4 +1,4 @@
-name: Deploy Playground to GitHub Pages
+name: Deploy to GitHub Pages
 on:
   push:
     branches: [main]
@@ -23,23 +23,56 @@ jobs:
         with:
           go-version-file: go.mod
 
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
       - name: Install TinyGo
         run: |
           wget -q https://github.com/tinygo-org/tinygo/releases/download/v0.40.1/tinygo_0.40.1_amd64.deb -O /tmp/tinygo.deb
           sudo dpkg -i /tmp/tinygo.deb
 
-      - name: Build WASM artifacts
+      - name: Build WASM
         run: |
           GOOS=js GOARCH=wasm go build -ldflags="-s -w" -trimpath -o gnata.wasm ./wasm/
           cp "$(go env GOROOT)/lib/wasm/wasm_exec.js" wasm_exec.js
           tinygo build -o gnata-lsp.wasm -no-debug -gc=conservative -target wasm ./editor/
           cp "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" lsp-wasm_exec.js
 
-      - name: Prepare site
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build React widget
+        run: cd react && pnpm run build
+
+      # Build docs site (Fumadocs static export)
+      - name: Copy WASM to website
+        run: cp gnata.wasm gnata-lsp.wasm wasm_exec.js lsp-wasm_exec.js website/public/
+
+      - name: Build website
+        run: cd website && pnpm build
+        env:
+          GITHUB_PAGES: true
+
+      # Build playground (Vite static build)
+      - name: Copy WASM to playground
+        run: cp gnata.wasm gnata-lsp.wasm wasm_exec.js lsp-wasm_exec.js playground/public/
+
+      - name: Build playground
+        run: cd playground && pnpm build
+        env:
+          GITHUB_PAGES: true
+
+      # Combine: docs site at root, playground nested at /playground/
+      - name: Assemble site
         run: |
           mkdir -p _site
-          cp playground.html _site/index.html
-          cp gnata.wasm gnata-lsp.wasm wasm_exec.js lsp-wasm_exec.js _site/
+          cp -r website/out/* _site/
+          mkdir -p _site/playground
+          cp -r playground/dist/* _site/playground/
 
       - uses: actions/upload-pages-artifact@v3
 

README.md

@@ -1,81 +1,136 @@
 # gnata-sqlite
 
-End-to-end [JSONata 2.x](https://jsonata.org) in Go — from a loadable SQLite extension to a composable React editor with context-aware autocomplete, everything needed to run, write, and edit JSONata expressions.
+End-to-end [JSONata 2.x](https://jsonata.org) in Go — let end users write their own JSONata expressions against SQLite data, with a composable React editor that provides autocomplete, hover docs, and live diagnostics out of the box.
 
 [![CI](https://github.com/rbbydotdev/gnata-sqlite/actions/workflows/ci.yml/badge.svg)](https://github.com/rbbydotdev/gnata-sqlite/actions/workflows/ci.yml)
 [![Go Reference](https://pkg.go.dev/badge/github.com/rbbydotdev/gnata-sqlite.svg)](https://pkg.go.dev/github.com/rbbydotdev/gnata-sqlite)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![Go 1.25](https://img.shields.io/badge/Go-1.25-00ADD8.svg)](https://go.dev)
 
-## Highlights
+**[Docs](https://rbby.dev/gnata-sqlite/)** · **[Playground](https://rbby.dev/gnata-sqlite/playground)** · **[Getting Started](https://rbby.dev/gnata-sqlite/docs/tutorials/getting-started)** · **[React Widget](https://rbby.dev/gnata-sqlite/docs/tutorials/react-widget)** · **[Architecture](https://rbby.dev/gnata-sqlite/docs/explanation/architecture)**
 
-- **Full JSONata 2.x spec** — paths, wildcards, lambdas, closures, higher-order functions, 50+ stdlib functions. 1,778 conformance tests, 0 failures
-- **SQLite extension** — `jsonata()`, `jsonata_query()`, `jsonata_each()` as loadable functions with a built-in query planner that matches native SQL performance
-- **React editor widget** — composable hooks and components (`@gnata-sqlite/react`) for embedding a JSONata editor in any app, with autocomplete, hover docs, and live diagnostics
-- **85KB WASM LSP** — TinyGo-compiled language server powering in-browser editor features from the same Go codebase as the native LSP
-- **Context-aware autocomplete** — the editor evaluates prefix expressions against live data to suggest nested keys, enabling end users to explore and write expressions without knowing the schema upfront
-- **5M+ eval ops/sec** — two-tier evaluator with GJSON fast path hitting 10M+ ops/sec for simple paths
+---
 
-## Quick Start
+## The Problem
 
-```go
-import "github.com/rbbydotdev/gnata-sqlite"
+Applications store JSON in SQLite. Querying and transforming that data requires custom code for every new report, filter, or dashboard widget. End users can't explore the data themselves — they depend on developers to write each query.
 
-expr, _ := gnata.Compile(`Account.Order.Product.Price`)
-result, _ := expr.Eval(context.Background(), data)
-fmt.Println(result) // [34.45 21.67]
-```
+## The Solution
+
+gnata-sqlite makes SQLite JSON data queryable with [JSONata](https://jsonata.org) — a lightweight, expressive language end users can learn — and provides everything needed to embed an expression editor in any app:
+
+1. **Load the SQLite extension** → JSON columns become queryable with JSONata
+2. **Embed the React editor** → end users write expressions with autocomplete and live feedback
+3. **Connect via schema** → the editor suggests fields from the actual database structure
+
+No custom query builder UI. No hardcoded report logic. End users write expressions; the extension runs them.
 
 ## SQLite Extension
 
+A loadable extension that brings JSONata into SQL queries. Install once, use from any SQLite client.
+
+<img src="assets/playground-sqlite-dashboard.png" alt="SQLite dashboard query" width="720" />
+
 ```sql
 .load ./gnata_jsonata sqlite3_jsonata_init
 
-SELECT jsonata(data, 'Account.Name') FROM events;
--- "Firefly"
+-- Per-row: extract, transform, filter
+SELECT jsonata('items[price > 100].name', data) FROM orders;
 
-SELECT jsonata_query('$sum(amount)', data) FROM orders;
--- 4250
+-- Aggregate: build a full report in one expression
+SELECT jsonata_query('{
+  "revenue":  $sum($filter($, function($v){ $v.status = "shipped" }).total),
+  "orders":   $count($),
+  "avg":      $round($average(total), 2)
+}', data) FROM orders;
 ```
 
-| Function | Description |
-|----------|-------------|
-| `jsonata(json, expr)` | Evaluate expression against JSON |
-| `jsonata_query(expr, json)` | Expression-first argument order |
-| `jsonata_each(expr, json)` | Expand results into rows (table-valued) |
+The query planner decomposes complex expressions into streaming accumulators — matching hand-tuned SQL performance on 100K+ rows. See [sqlite/OPTIMIZATION.md](sqlite/OPTIMIZATION.md).
+
+| Function | Purpose |
+|----------|---------|
+| `jsonata(json, expr)` | Evaluate per row |
+| `jsonata_query(expr, json)` | Aggregate across rows |
+| `jsonata_each(expr, json)` | Expand results into rows |
 | `jsonata_set(json, path, val)` | Set a value at a path |
 | `jsonata_delete(json, path)` | Delete a value at a path |
 
-See [sqlite/README.md](sqlite/README.md) for full docs. Query optimization details in [sqlite/OPTIMIZATION.md](sqlite/OPTIMIZATION.md).
+## React Editor
+
+A composable React package (`@gnata-sqlite/react`) for embedding a JSONata expression editor. Developers ship the editor; end users write expressions.
+
+### Hover Documentation
+
+<img src="assets/playground-gnata-hover.png" alt="Hover documentation showing $sum function" width="720" />
+
+Hover over any function to see its signature, description, and examples — powered by the 85KB TinyGo WASM LSP.
+
+### Context-Aware Autocomplete
 
-## Benchmarks
+<img src="assets/playground-gnata-autocomplete.png" alt="Autocomplete suggesting Account.Name and Account.Order" width="720" />
 
-![Eval Performance](assets/benchmark-eval.png)
+Type `Account.` and the editor evaluates the prefix expression against the input data to discover available keys — suggesting `Name`, `Order`, etc. with types.
 
-![GJSON Fast Path](assets/benchmark-fastpath.png)
+### Expression Editor
 
-<details>
-<summary>Raw numbers (Apple M1)</summary>
+<img src="assets/playground-gnata-transform.png" alt="JSONata transform expression with syntax highlighting" width="720" />
 
-| Benchmark | ops/sec | ns/op | allocs/op |
-|-----------|---------|-------|-----------|
-| Eval `Account.Name` | **5,037,783** | 198 | 4 |
-| Eval `Order.Product.SKU` | 2,160,554 | 463 | 10 |
-| Eval `Product[Price>50].SKU` | 895,255 | 1,117 | 26 |
-| Eval `$sum(Product.*)` | 654,006 | 1,529 | 44 |
-| EvalBytes `Account.Name` | **10,280,965** | 97 | 2 |
-| Compile `Account.Name` | 1,757,469 | 569 | 13 |
+Full JSONata syntax highlighting, live evaluation, and diagnostics (red underlines on errors).
 
-</details>
+### Quick Start
+
+```tsx
+import { useJsonataLsp, JsonataEditor } from '@gnata-sqlite/react'
+import '@gnata-sqlite/react/tooltips.css'
+
+function ExpressionBuilder() {
+  const lsp = useJsonataLsp({
+    lspWasmUrl: '/gnata-lsp.wasm',
+    lspExecUrl: '/lsp-wasm_exec.js',
+  })
+
+  return (
+    <JsonataEditor
+      value={expression}
+      onChange={setExpression}
+      schema={schemaFromBackend}
+      gnataDiagnostics={lsp.gnataDiagnostics}
+      gnataCompletions={lsp.gnataCompletions}
+      gnataHover={lsp.gnataHover}
+    />
+  )
+}
+```
+
+**What end users get:** autocomplete, hover docs, live diagnostics, syntax highlighting
+
+**What developers get:** 85KB WASM LSP, hooks-first API, no eval required, schema-driven
+
+## How It Fits Together
+
+The SQLite extension runs expressions on the backend. The React editor lets end users write those expressions in the browser. The schema protocol connects them.
+
+```
+Backend                          Frontend
+┌──────────────────┐            ┌──────────────────────────┐
+│ SQLite + gnata   │            │ @gnata-sqlite/react      │
+│ extension        │  schema →  │ CodeMirror 6 editor      │
+│                  │            │ + 85KB WASM LSP          │
+│ Runs expressions │  ← expr   │ Autocomplete, hover,     │
+│ against JSON data│            │ diagnostics              │
+└──────────────────┘            └──────────────────────────┘
+```
 
 ## Packages
 
 | Package | Description |
 |---------|-------------|
-| `gnata` (root) | Core JSONata 2.x engine — full spec, two-tier eval, streaming |
-| [`sqlite/`](sqlite/README.md) | SQLite extension — loadable functions, query planner, mutations |
+| `gnata` (root) | Core JSONata 2.x engine — 1,778 conformance tests, 0 failures |
+| [`sqlite/`](sqlite/README.md) | Loadable SQLite extension with streaming query planner |
 | [`editor/`](editor/README.md) | CodeMirror 6 language support + TinyGo WASM LSP |
-| [`react/`](react/README.md) | Composable React widget — hooks, components, and full playground |
+| [`react/`](react/README.md) | Composable React hooks and components |
+| [`playground/`](playground/) | Interactive playground (Vite + React) |
+| [`website/`](website/) | Documentation site (Fumadocs) |
 
 ## Building
 
@@ -88,11 +143,9 @@ make playground   # Build WASM + start playground dev server
 make website      # Start docs site dev server
 ```
 
-See `Makefile` for all targets.
-
 ## Playground
 
-Visit the [live playground](https://rbbydotdev.github.io/gnata-sqlite/) for interactive testing of JSONata expressions and the SQLite extension. To run locally:
+Visit the [live playground](https://rbby.dev/gnata-sqlite/playground) to try JSONata expressions against SQLite data in the browser. To run locally:
 
 ```bash
 cd playground && pnpm install && pnpm dev
@@ -104,7 +157,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
 
 ## Fork Notice
 
-Forked from [RecoLabs/gnata](https://github.com/RecoLabs/gnata), which provides a production-grade JSONata 2.x engine in pure Go. This project extends the core engine with a SQLite extension, editor tooling, and query optimizer.
+Forked from [RecoLabs/gnata](https://github.com/RecoLabs/gnata), a JSONata 2.x engine in pure Go. This project extends it with a SQLite extension, query planner, TinyGo WASM LSP, CodeMirror editor, and composable React package.
 
 ## License