docs: media.

Author: knightedcodemonkey

README.md

@@ -1,60 +1,38 @@
-# @knighted/develop
+# <img src="src/logo.svg" alt="@knighted/develop logo" width="36" height="36" style="vertical-align: middle;" /> <span style="vertical-align: middle;"><code>@knighted/develop</code></span>
 
-Compiler-as-a-Service (at the edge of your browser) with `@knighted/jsx` and `@knighted/css`.
+CDN-first browser IDE for building UI components with [`@knighted/jsx`](https://github.com/knightedcodemonkey/jsx) and [`@knighted/css`](https://github.com/knightedcodemonkey/css).
 
-> ⚠️ Early project status: this package is pre-`1.0.0` and still actively evolving.
+![Animated flow showing editing, diagnostics, jump-to-source, and fix loop](docs/media/develop-ide-flow.gif)
 
 ## What it is
 
-`@knighted/develop` is a lightweight dev app that lets you:
+`@knighted/develop` is a browser-native IDE that demonstrates modern component
+authoring without a local bundler-first inner loop.
 
-- write component code in the browser
-- switch render mode between DOM and React
-- switch style mode between native CSS, CSS Modules, Less, and Sass
-- preview results immediately
-
-## Local development
-
-```bash
-npm install
-npm run dev
-```
-
-Then open the URL printed by the dev server (it should open `src/index.html`).
-
-## End-to-end tests
+The app is designed to showcase two libraries:
 
-Install Playwright browsers once before your first local run:
+- [`@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
 
-```bash
-npx playwright install
-```
+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.
 
-If your environment needs system dependencies too (for example Linux CI-like containers), use:
+## Core capabilities
 
-```bash
-npx playwright install --with-deps
-```
+`@knighted/develop` lets you:
 
-Run local Playwright tests (Chromium):
-
-```bash
-npm run test:e2e
-```
-
-Run locally with headed browser:
-
-```bash
-npm run test:e2e:headed
-```
-
-CI runs Playwright on Chromium and WebKit.
+- write component code in the browser
+- 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
 
-## Notes
+## Try it
 
-- This is currently a development playground, not a stable product.
-- Expect breaking changes while APIs and UX are still being shaped.
-- Documentation will expand closer to `1.0.0`.
+- Live IDE: https://knightedcodemonkey.github.io/develop/
+- Source repository: https://github.com/knightedcodemonkey/develop
 
 ## License
 

docs/contributing.md

@@ -0,0 +1,120 @@
+# Contributing
+
+Thanks for contributing to `@knighted/develop`.
+
+This project is a CDN-first browser IDE for showcasing `@knighted/jsx` and
+`@knighted/css`, so local workflows should preserve browser execution behavior
+and avoid bundler-only assumptions in `src/` runtime code.
+
+## Project docs
+
+- Type checking notes: `docs/type-checking.md`
+- Build and deploy notes: `docs/build-and-deploy.md`
+- CodeMirror integration notes: `docs/code-mirror.md`
+- Roadmap: `docs/next-steps.md`
+- Article draft: `docs/article.md`
+
+## Prerequisites
+
+- Node.js `>= 22.22.1`
+- npm
+
+## Install
+
+```bash
+npm install
+```
+
+## Local development
+
+Start the local app:
+
+```bash
+npm run dev
+```
+
+The local server opens `src/index.html`.
+
+## Build commands
+
+Build prep + CSS + import map generation:
+
+```bash
+npm run build
+```
+
+Build with explicit primary CDN modes:
+
+```bash
+npm run build:esm
+npm run build:jspm
+npm run build:importmap-mode
+```
+
+Preview generated dist output:
+
+```bash
+npm run preview
+```
+
+## Validation commands
+
+Lint source and Playwright files:
+
+```bash
+npm run lint
+```
+
+Type check TS tooling files:
+
+```bash
+npm run check-types
+```
+
+## Playwright end-to-end tests
+
+Install browser binaries once:
+
+```bash
+npx playwright install
+```
+
+If your environment also needs system deps (for example CI-like Linux
+containers):
+
+```bash
+npx playwright install --with-deps
+```
+
+Run preview-mode E2E suite:
+
+```bash
+npm run test:e2e
+```
+
+Run dev-mode E2E suite:
+
+```bash
+npm run test:e2e:dev
+```
+
+Run preview-mode suite headed:
+
+```bash
+npm run test:e2e:headed
+```
+
+## Contributor checklist
+
+Before opening a PR:
+
+1. Run `npm run lint`.
+2. Run `npm run build:esm` for runtime/build changes.
+3. Run relevant Playwright tests for UI/runtime changes.
+4. Update docs when user-facing behavior or workflows change.
+
+## Scope guidance
+
+- Keep changes focused to `@knighted/develop`.
+- Preserve CDN-first loading and fallback behavior.
+- Avoid editing generated output unless explicitly required.

docs/media/develop-ide-flow.gif

@@ -399,8 +399,10 @@ <h3>Styles</h3>
 
     <footer class="app-footer">
       <div>
-        Uses @knighted/jsx runtime with browser WASM parser from CDN and
-        @knighted/css/browser for in-browser CSS, CSS Modules, Less, and Sass.
+        Powered by
+        <a href="https://github.com/knightedcodemonkey/jsx">@knighted/jsx</a>,
+        <a href="https://github.com/knightedcodemonkey/css">@knighted/css</a>, and
+        CDN-delivered runtimes and compilers.
       </div>
     </footer>