docs: update for vnext. (#114)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: knightedcodemonkey

README.md

@@ -9,29 +9,39 @@ CDN-first UI component workbench for rapid prototyping with [`@knighted/jsx`](ht
 
 ## What it is
 
-`@knighted/develop` is a browser-native UI component workbench that demonstrates
-modern component authoring without a local bundler-first inner loop.
+`@knighted/develop` is a browser-native component editor/workbench for fast
+UI iteration without a local bundler-first inner loop.
 
 The app is designed to showcase two libraries:
 
 - [`@knighted/jsx`](https://github.com/knightedcodemonkey/jsx) for DOM-first and React-mode JSX authoring
 - [`@knighted/css`](https://github.com/knightedcodemonkey/css) for in-browser CSS compilation workflows
 
 Dependencies are delivered over CDN ESM with on-demand loading by mode, so the
-browser acts as the runtime host for render, lint, and typecheck flows.
+browser acts as the runtime host for editing, render, lint, and typecheck flows.
 
 ## Core capabilities
 
 `@knighted/develop` lets you:
 
-- write component code in the browser
-- manage dynamic workspace tabs with add, rename, remove, and entry-role protection
+- write component code in dynamic editor tabs in the browser
+- add, rename, and remove tabs with entry-role protection for required tabs
+- keep per-tab dirty/synced state while iterating across files
 - switch render mode between DOM and React
 - switch style mode between native CSS, CSS Modules, Less, and Sass
 - run in-browser lint and type diagnostics
 - open diagnostics in a shared drawer and jump to source locations
-- toggle ShadowRoot preview isolation while iterating
-- switch layout and theme while preserving fast feedback loops
+- use iframe-isolated preview style encapsulation while iterating
+- connect a GitHub repository and run Open PR / Push Commit workflows
+- use AI chat with tab-aware proposals and apply/undo controls
+- switch theme and collapse the preview panel while preserving fast feedback loops
+
+## Why this shape
+
+The app started as a focused compile-and-preview loop and has grown into a
+more complete browser-native editor surface. The goal is still fast
+experimentation, now with practical multi-file editing and repository workflows
+in the same UI.
 
 ## Try it
 

docs/article.md

@@ -1,78 +1,90 @@
-# Forget The Build Step: A Browser-Native Workbench For JSX + CSS
+# Forget The Build Step: A Browser-Native Editor For JSX + CSS
 
-Frontend tooling has become incredibly capable.
+Frontend tooling is incredibly capable.
 
-It has also become very heavy.
+It is also often front-loaded.
 
-For many UI experiments, the first thing you do is not write code. You install dependencies, run a dev server, wait for transforms, and only then start iterating.
+For many UI ideas, the first thing you do is not write code. You install,
+configure, and wait. The creative loop starts late.
 
-I wanted to try a different baseline:
+[@knighted/develop](https://github.com/knightedcodemonkey/develop) is built
+for a different default: fast prototyping from anywhere you can open a browser.
 
-What if the browser is the dev environment?
-
-That idea became [@knighted/develop](https://github.com/knightedcodemonkey/develop).
-
-It is a lightweight in-browser UI component workbench built to showcase [@knighted/jsx](https://github.com/knightedcodemonkey/jsx) and [@knighted/css](https://github.com/knightedcodemonkey/css), with dependencies delivered over CDN ESM instead of requiring a local build step in the inner loop.
+It is a browser-native editor/workbench for
+[@knighted/jsx](https://github.com/knightedcodemonkey/jsx) and
+[@knighted/css](https://github.com/knightedcodemonkey/css), delivered through
+CDN ESM with mode-aware loading.
 
 ## The Loop, In Practice
 
-Open a page, write JSX and styles, switch rendering/style modes, run lint/typecheck, and see results immediately.
+Open the app, edit multiple files in dynamic tabs, switch render/style modes,
+run lint/type diagnostics, and preview instantly.
 
-No local bundler needed for that loop.
+No local bundler is required for that inner loop.
 
-## What Makes It Fun To Use
-
-The app is intentionally practical, not just a demo shell:
+## What The App Gives You
 
+- Dynamic tabbed editing (add, rename, remove, and protect required entry tabs)
 - Render mode switch: DOM or React
 - Style mode switch: CSS, CSS Modules, Less, Sass
-- Live preview with ShadowRoot toggle
-- In-browser lint and type diagnostics
-- Diagnostics drawer with jump-to-line navigation (mouse or keyboard)
+- Live preview with iframe-isolated style encapsulation
+- In-browser lint and type diagnostics with jump-to-source navigation
+- GitHub-connected workflows for Open PR and Push Commit
+- AI chat with tab-aware edit proposals and explicit apply/undo controls
 
-So it is not only "can this compile?" It is closer to "can I actually iterate on a component quickly?"
+This is not only "can this compile?" It is about shipping the whole iteration
+loop in one place: edit, validate, preview, sync, and refine.
 
 ## Why `@knighted/jsx` + `@knighted/css` Matter Here
 
-`@knighted/develop` is primarily a showcase app.
-
-It demonstrates how these libraries behave in a real authoring environment:
+The app demonstrates both libraries in realistic authoring conditions:
 
-- `@knighted/jsx` gives you a direct path from JSX to rendered output, including DOM-first workflows.
-- `@knighted/css` handles modern style pipelines in-browser, including Modules/Less/Sass.
+- `@knighted/jsx` provides a direct path from JSX to rendered output,
+  including DOM-first workflows.
+- `@knighted/css` handles modern browser-side style compilation,
+  including Modules/Less/Sass modes.
 
-Using both together in one interface makes the bigger point obvious: modern browsers can do much more of the compile/authoring cycle than we usually ask them to.
+Together they show how much of the authoring cycle modern browsers can run
+directly.
 
-## "Compiler-as-a-Service" Without A Backend Build Farm
+## "Compiler-as-a-Service" Without A Build Farm
 
 In this project, Compiler-as-a-Service means:
 
-- CDN handles module and WASM delivery.
-- The browser tab does the actual compile, lint, typecheck, and render work.
+- CDN delivers modules and WASM artifacts.
+- The browser session performs compile, lint, typecheck, render, and editor
+  interactions locally.
 
-It is service-oriented distribution, local execution.
+It is service-oriented distribution with local execution.
 
-And because loading is mode-aware, you only pay for what you use. If you never touch Sass, you never load Sass.
+Mode-aware loading keeps costs aligned to usage: if you do not use Sass,
+Sass does not load.
 
 ## Why This Matters
 
-This is not trying to replace production pipelines.
+This does not replace production pipelines.
 
-It is about lowering the cost of exploration.
+It lowers the cost of exploration while preserving enough workflow surface to
+be useful for real component work.
 
-When the setup tax drops, you try more ideas. When feedback is instant, you discover faster. And when the browser is the platform, sharing a repro can be as easy as sharing a URL.
+When setup friction drops, teams try more ideas. When feedback is immediate,
+they converge faster. When browser-native workspaces can sync to GitHub and
+carry chat-assisted edit proposals, collaboration is lighter too.
 
-For prototyping and component iteration, that is a meaningful shift.
+For prototyping and component development, that is a meaningful shift.
 
 ## Try It
 
 - Live workbench: https://knightedcodemonkey.github.io/develop/
 - Source: https://github.com/knightedcodemonkey/develop
 
-If you are curious, start by toggling:
+If you want a fast product tour, try this sequence:
 
-1. DOM -> React render mode
-2. CSS -> Modules -> Less -> Sass style mode
-3. ShadowRoot on/off
+1. Add a new tab, rename it, and make an edit.
+2. Toggle DOM -> React render mode.
+3. Toggle CSS -> Modules -> Less -> Sass style mode.
+4. Open diagnostics and jump to a reported line.
+5. Connect BYOT (Bring Your Own Token) by adding a GitHub personal access token, then run Open PR / Push Commit.
+6. Ask chat for a targeted tab update, then apply it.
 
-That sequence tells the story better than any architecture diagram.
+That flow tells the product story better than any architecture diagram.