@jxsuite/studio 0.10.2 → 0.13.0

package/README.md

@@ -0,0 +1,82 @@
+# `@jxsuite/studio`
+
+> Visual builder for Jx documents.
+
+## Overview
+
+Jx Studio is a browser-based visual IDE for Jx applications. It renders a live canvas via `@jxsuite/runtime`, provides a layer tree for structural editing, an inspector for property/style/state management, and a Monaco-powered code editor for function bodies. The UI is built with [Adobe Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/).
+
+At the site level, Studio acts as a CMS — providing a project explorer, content collection browser, schema-driven entry editors, and media management.
+
+## Development usage
+
+Studio is served by `@jxsuite/server` during development:
+
+```bash
+bun run dev   # starts dev server + Studio at http://localhost:3000
+```
+
+## Architecture
+
+Three-column layout:
+
+| Column | Content                                                 |
+| ------ | ------------------------------------------------------- |
+| Left   | Activity bar + panel (layers, files, content, settings) |
+| Center | Canvas (live preview) + toolbar                         |
+| Right  | Inspector (properties, style, state, code)              |
+
+### Data flow
+
+```
+.json file → Studio state (immutable) → Canvas (runtime render)
+                    ↓
+            Inspector panels → mutation → new state → write .json
+```
+
+### State model
+
+Immutable state tree with 100-entry undo/redo history. All mutations produce a new state object. Key operations:
+
+| Operation                             | Description                         |
+| ------------------------------------- | ----------------------------------- |
+| `selectNode(path)`                    | Select element by path              |
+| `insertNode(path, def)`               | Add child element                   |
+| `removeNode(path)`                    | Delete element                      |
+| `moveNode(from, to)`                  | Reorder or reparent                 |
+| `updateProperty(path, key, value)`    | Set element property                |
+| `updateStyle(path, prop, value)`      | Set style property                  |
+| `updateDef(key, value)`               | Update state entry                  |
+| `pushDocument(doc)` / `popDocument()` | Navigate into/out of sub-components |
+| `undo()` / `redo()`                   | History navigation                  |
+
+### Platform Abstraction Layer (PAL)
+
+Studio is backend-agnostic. Platform bindings (filesystem access, native dialogs, Git, package management) are injected at startup via `registerPlatform()`. Three targets share a single codebase:
+
+| Target               | Backend                        |
+| -------------------- | ------------------------------ |
+| Desktop (Electrobun) | `@jxsuite/desktop` Bun process |
+| Dev mode (Chrome)    | `@jxsuite/server` (localhost)  |
+| SaaS                 | Cloud API (future)             |
+
+## API
+
+```js
+import { createStudio } from "@jxsuite/studio";
+import { registerPlatform } from "@jxsuite/studio/platform.js";
+
+registerPlatform(myPlatform);
+createStudio(document.getElementById("root"));
+```
+
+## Design principles
+
+1. **JSON is the source of truth** — Studio reads and writes `.json` files directly.
+2. **Canvas is the runtime** — Preview renders via `@jxsuite/runtime`, pixel-identical to production.
+3. **Zero lock-in** — Studio edits produce standard Jx files that any editor can open.
+4. **Self-hosting** — Studio is itself a Jx application.
+
+## License
+
+MIT