jsgui3-server 0.0.145 → 0.0.147

package/README.md

@@ -72,6 +72,22 @@ Server.serve({
 });
 ```
 
+### Real-time SSE Streams
+
+```javascript
+const { observable } = require('fnl');
+// Create an infinite stream that ticks every second
+const obs = observable(next => {
+    setInterval(() => next({ tick: Date.now() }), 1000);
+});
+
+// Start server and publish stream
+const server = await Server.serve(MyControl);
+server.publish_observable('/api/stream', obs);
+// Server publishes SSE stream at http://localhost:3000/api/stream
+// Client connects via EventSource or Remote_Observable
+```
+
 > **Note:** The new `Server.serve()` API is the recommended approach for most use cases. See [Simple Server API Design](docs/simple-server-api-design.md) for complete documentation and advanced features.
 
 ## Architecture Overview

package/docs/agent-development-guide.md

@@ -26,14 +26,97 @@ This document is specifically for AI agents working on the JSGUI3 Server codebas
 - Include comprehensive error handling and logging
 - Add JSDoc comments for public APIs
 
-### Development Workflow
-1. **Analyze the task** and understand requirements
-2. **Check existing code** for patterns and conventions
-3. **Implement changes** following established patterns
-4. **Test thoroughly** and document any issues found
-5. **Update documentation** including this guide
-
-## Codebase Structure Overview
+### Development Workflow
+1. **Analyze the task** and understand requirements
+2. **Check existing code** for patterns and conventions
+3. **Implement changes** following established patterns
+4. **Test thoroughly** and document any issues found
+5. **Update documentation** including this guide
+
+## Quick Start for AI Agents (Low Thinking Time)
+
+Use this section when you need to act fast with minimal deliberation. It is a short, repeatable workflow designed to reduce cognitive overhead.
+
+### Fast Lane Checklist (5 Minutes)
+1. **Read the task** and extract the target file, example, or subsystem.
+2. **Locate the target** with `rg` or `rg --files`.
+3. **Open the closest reference doc** from the map below.
+4. **Make a minimal, reversible change** that addresses the task.
+5. **Run the narrowest test** that validates the change.
+6. **Log any gaps** in "Known Issues" below if you find a blocker.
+
+### Quick Doc Map
+- **Repo overview**: `README.md`
+- **Testing workflow**: `tests/README.md`
+- **Bundling & assets**: `docs/bundling-system-deep-dive.md`
+- **Server publishing**: `docs/publishers-guide.md`
+- **Troubleshooting**: `docs/troubleshooting.md`
+- **MVVM + full-stack controls**: `docs/books/jsgui3-mvvm-fullstack/README.md`
+- **Agent workflow depth**: `docs/GUIDE_TO_AGENTIC_WORKFLOWS_BY_GROK.md`
+
+### Common Task Playbooks
+
+#### 1) Fix an Example or Control
+**Goal**: Example renders correctly with expected controls.
+1. Open `examples/.../client.js` and check for `Active_HTML_Document`.
+2. Ensure composition is inside `if (!spec.el)`.
+3. Confirm the control is exported: `controls.Demo_UI = Demo_UI`.
+4. Run the focused test: `node tests/test-runner.js --test=examples-controls.e2e.test.js`.
+5. If the error is render-time, reproduce with `Server_Static_Page_Context`.
+
+**Quick probe**:
+```js
+const Server_Static_Page_Context = require('./static-page-context');
+const jsgui = require('./examples/controls/1) window/client.js');
+const Ctrl = jsgui.controls.Demo_UI;
+const ctrl = new Ctrl({ context: new Server_Static_Page_Context() });
+const html = ctrl.all_html_render();
+```
+
+#### 2) Investigate a Bundling Failure
+**Goal**: Bundler completes and emits JS/CSS routes.
+1. Find bundler class in `resources/processors/bundlers`.
+2. Verify `complete(...)` is called on success and error paths.
+3. Run: `node tests/test-runner.js --test=bundlers.test.js`.
+4. If compression fails, check `docs/troubleshooting.md`.
+
+#### 3) Add or Extend Tests
+**Goal**: Increase coverage without breaking existing flows.
+1. Add new tests under `tests/` with smallest scope.
+2. Use snake_case names and minimal fixtures.
+3. Run only the new test: `node tests/test-runner.js --test=your-test-file.test.js`.
+4. Update `tests/README.md` if workflow changes.
+
+#### 4) Update or Add Documentation
+**Goal**: Keep agents and developers aligned on current behavior.
+1. Add short, high-signal sections (avoid large rewrites).
+2. Include commands and file paths.
+3. For broken behavior, add a "Known Issues" entry here.
+
+#### 5) MVVM Binding and Full-Stack Control Usage
+**Goal**: Wire data models to controls and serve them end to end.
+1. Build controls under `client.js` using `Active_HTML_Document`.
+2. Compose controls only when `!spec.el`.
+3. Use `this.data.model` and `this.view.data.model` plus `watch` and `computed`.
+4. Render server-side with `Server_Static_Page_Context` for quick validation.
+5. Serve with `Server.serve` and run `examples-controls.e2e.test.js`.
+
+### Rapid Triage Checklist (When Tests Fail)
+1. Identify whether the failure is **render**, **bundle**, **runtime**, or **assertion**.
+2. If render: instantiate with `Server_Static_Page_Context`.
+3. If bundle: inspect esbuild logs and `resources/processors/bundlers/...`.
+4. If runtime: open the example in a browser or puppeteer.
+5. If assertion: validate expected output and update fixtures.
+
+### Suggested Minimal Command Set
+```bash
+rg -n "needle" path/
+rg --files path/
+node tests/test-runner.js --test=examples-controls.e2e.test.js
+node tests/test-runner.js --test=window-examples.puppeteer.test.js
+```
+
+## Codebase Structure Overview
 
 ### Core Architecture
 
@@ -487,4 +570,4 @@ If you discover critical issues:
 
 ---
 
-**Remember**: This guide is the central place for agents to document broken functionality and implementation gaps. If you find something broken or incomplete, document it here immediately with details about location, impact, and status.
+**Remember**: This guide is the central place for agents to document broken functionality and implementation gaps. If you find something broken or incomplete, document it here immediately with details about location, impact, and status.

package/docs/books/jsgui3-mvvm-fullstack/00-overview.md

@@ -0,0 +1,17 @@
+# Overview
+
+JSGUI3 uses a shared control model across server and client. The server renders HTML, bundles JS and CSS, and the client activates controls for interactivity.
+
+## Core Ideas
+- Controls are composed on the server, activated in the browser.
+- MVVM is supported via data and view models plus watchers and computed fields.
+- CSS can live alongside controls and is extracted by the bundler.
+
+## Minimal Vocabulary
+- **Control**: UI building block.
+- **Active_HTML_Document**: top-level page control for full HTML.
+- **Server_Static_Page_Context**: server-side render context for fast validation.
+- **Publisher**: serves HTML/JS/CSS to the browser.
+
+## Quick Win
+If you only need rendering verification, instantiate a control with `Server_Static_Page_Context` and call `all_html_render()`.

package/docs/books/jsgui3-mvvm-fullstack/01-stack-map.md

@@ -0,0 +1,25 @@
+# Stack Map
+
+This chapter gives a quick map of the JSGUI3 stack and the files you touch most often.
+
+## Modules
+| Module | Role | Typical Entry |
+| --- | --- | --- |
+| jsgui3-html | core controls and rendering | `controls/` |
+| jsgui3-client | browser activation | `client.js` |
+| jsgui3-server | bundling + publishing | `server.js` |
+
+## Key Files
+- `server.js`: main server class, publisher wiring
+- `static-page-context.js`: server render context
+- `controls/Active_HTML_Document.js`: HTML doc wrapper
+- `resources/processors/bundlers/`: JS and CSS bundlers
+- `publishers/http-webpage-publisher.js`: HTML render + static routes
+
+## Flow Sketch
+```
+client.js -> JS bundler -> JS/CSS routes -> HTTP_Webpage_Publisher -> browser
+   |                |
+   |                +-> CSS extraction from control static css
+   +-> Active_HTML_Document render on server
+```

package/docs/books/jsgui3-mvvm-fullstack/02-control-lifecycle.md

@@ -0,0 +1,32 @@
+# Control Lifecycle
+
+## Compose vs Activate
+- **Compose**: build child controls and layout in the constructor.
+- **Activate**: bind DOM events and runtime logic after client load.
+
+## Composition Rule
+Only compose when `!spec.el`. This avoids double composition during client activation.
+
+## Minimal Pattern
+```javascript
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const { context } = this;
+        if (!spec.el) {
+            const window_ctrl = new controls.Window({ context, title: 'Demo' });
+            this.body.add(window_ctrl);
+        }
+    }
+}
+```
+
+## Server Render Quick Check
+```javascript
+const Server_Static_Page_Context = require('./static-page-context');
+const jsgui = require('./examples/controls/1) window/client.js');
+const Demo_UI = jsgui.controls.Demo_UI;
+const demo_ui = new Demo_UI({ context: new Server_Static_Page_Context() });
+const html = demo_ui.all_html_render();
+```

package/docs/books/jsgui3-mvvm-fullstack/03-mvvm-basics.md

@@ -0,0 +1,57 @@
+# MVVM Basics
+
+JSGUI3 controls support data and view models. Use `watch` for updates and `computed` for derived values.
+
+## Minimal MVVM Skeleton
+```javascript
+const jsgui = require('jsgui3-client');
+const { controls, Control } = jsgui;
+
+const set_model_value = (model, name, value) => {
+    if (!model) return;
+    if (typeof model.set === 'function') {
+        model.set(name, value);
+    } else {
+        model[name] = value;
+    }
+};
+
+class Profile_Panel extends Control {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'profile_panel';
+        super(spec);
+        if (!spec.el) {
+            const { context } = this;
+            const name_input = new controls.Text_Input({ context });
+            this.add(name_input);
+            this.name_input = name_input;
+        }
+        this.setup_bindings();
+    }
+
+    setup_bindings() {
+        const data_model = this.data && this.data.model;
+        if (!data_model || !this.name_input) return;
+        this.watch(data_model, 'full_name', value => {
+            this.name_input.set_value(value || '');
+        });
+        this.name_input.on('input', () => {
+            set_model_value(data_model, 'full_name', this.name_input.get_value());
+        });
+    }
+}
+```
+
+## Computed Fields
+```javascript
+this.computed(
+    view_model,
+    ['first_name', 'last_name'],
+    (first_name, last_name) => {
+        const safe_first = (first_name || '').trim();
+        const safe_last = (last_name || '').trim();
+        return `${safe_first} ${safe_last}`.trim();
+    },
+    { propertyName: 'full_name' }
+);
+```

package/docs/books/jsgui3-mvvm-fullstack/04-bindings-and-validation.md

@@ -0,0 +1,51 @@
+# Bindings and Validation
+
+Use `Form_Container` for form layouts and built-in validation messaging. Pair it with `Alert_Banner` for high-level status.
+
+## Form_Container Example
+```javascript
+const jsgui = require('jsgui3-client');
+const { controls, Control } = jsgui;
+const Active_HTML_Document = require('jsgui3-server/controls/Active_HTML_Document');
+
+const validate_email = value => {
+    const trimmed = String(value || '').trim();
+    if (!trimmed) return 'Email is required.';
+    if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(trimmed)) return 'Enter a valid email.';
+    return true;
+};
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const { context } = this;
+        if (!spec.el) {
+            const window_ctrl = new controls.Window({ context, title: 'Form Demo' });
+            const alert_banner = new controls.Alert_Banner({
+                context,
+                status: 'info',
+                message: 'Complete the form.'
+            });
+            const form_container = new controls.Form_Container({
+                context,
+                fields: [
+                    { name: 'email', label: 'Email', required: true, validator: validate_email }
+                ],
+                show_status_badge: true
+            });
+            form_container.on('submit', () => {
+                alert_banner.set_status('success');
+                alert_banner.set_message('Submitted.');
+            });
+            form_container.on('invalid', () => {
+                alert_banner.set_status('error');
+                alert_banner.set_message('Fix errors.');
+            });
+            window_ctrl.inner.add(alert_banner);
+            window_ctrl.inner.add(form_container);
+            this.body.add(window_ctrl);
+        }
+    }
+}
+```

package/docs/books/jsgui3-mvvm-fullstack/05-full-stack-example.md

@@ -0,0 +1,50 @@
+# Full-Stack Example
+
+This is the minimal end-to-end setup: a control, server entry, and a quick render check.
+
+## client.js
+```javascript
+const jsgui = require('jsgui3-client');
+const { controls } = jsgui;
+const Active_HTML_Document = require('jsgui3-server/controls/Active_HTML_Document');
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const { context } = this;
+        if (!spec.el) {
+            const window_ctrl = new controls.Window({
+                context,
+                title: 'Full Stack Demo',
+                pos: [12, 12]
+            });
+            this.body.add(window_ctrl);
+        }
+    }
+}
+
+controls.Demo_UI = Demo_UI;
+module.exports = jsgui;
+```
+
+## server.js
+```javascript
+const Server = require('jsgui3-server');
+const { Demo_UI } = require('./client').controls;
+
+Server.serve({
+    ctrl: Demo_UI,
+    src_path_client_js: require.resolve('./client.js'),
+    port: 3000
+});
+```
+
+## Render Check
+```javascript
+const Server_Static_Page_Context = require('jsgui3-server/static-page-context');
+const jsgui = require('./client');
+const Demo_UI = jsgui.controls.Demo_UI;
+const demo_ui = new Demo_UI({ context: new Server_Static_Page_Context() });
+const html = demo_ui.all_html_render();
+```

package/docs/books/jsgui3-mvvm-fullstack/06-testing.md

@@ -0,0 +1,23 @@
+# Testing
+
+Use the smallest test that validates your change.
+
+## Focused Commands
+```bash
+node tests/test-runner.js --test=examples-controls.e2e.test.js
+node tests/test-runner.js --test=window-examples.puppeteer.test.js
+node tests/test-runner.js --test=sass-controls.e2e.test.js
+```
+
+## Server Render Probe
+```javascript
+const Server_Static_Page_Context = require('jsgui3-server/static-page-context');
+const jsgui = require('./client');
+const Demo_UI = jsgui.controls.Demo_UI;
+const demo_ui = new Demo_UI({ context: new Server_Static_Page_Context() });
+const html = demo_ui.all_html_render();
+```
+
+## When To Expand Coverage
+- Add an e2e test if the change affects bundling or HTML delivery.
+- Add a puppeteer story if the change impacts window interactions.

package/docs/books/jsgui3-mvvm-fullstack/07-troubleshooting.md

@@ -0,0 +1,20 @@
+# Troubleshooting
+
+## Render Errors
+- Use `Server_Static_Page_Context` to reproduce server-side render failures.
+- Ensure controls are composed only when `!spec.el`.
+- Check that `jsgui.controls` exports your control.
+
+## Bundler Errors
+- Verify bundlers call `complete(...)` on both success and error paths.
+- Confirm `src_path_client_js` points to `client.js`.
+- Review `docs/troubleshooting.md` for known issues.
+
+## Missing Controls
+- Confirm the control is exported from `jsgui3-html/controls/controls.js`.
+- Verify `jsgui3-client` is using the linked `jsgui3-html`.
+
+## MVVM Binding Not Updating
+- Ensure `this.data.model` and `this.view.data.model` are present.
+- Confirm `watch` and `computed` are wired after composition.
+- Check that input controls use `set_value` and `get_value`.

package/docs/books/jsgui3-mvvm-fullstack/08-agent-playbooks.md

@@ -0,0 +1,30 @@
+# Agent Playbooks
+
+These playbooks are optimized for low thinking time execution.
+
+## Playbook: Add a MVVM Binding
+**Goal**: Wire model values to inputs and derived UI.
+1. Confirm `this.data.model` and `this.view.data.model` exist.
+2. Add `watch` handlers for input controls.
+3. Add `computed` fields for derived labels.
+4. Verify with a server render probe.
+
+## Playbook: Build a New Control Example
+**Goal**: Add a new example with end-to-end delivery.
+1. Create `examples/.../client.js`.
+2. Extend `Active_HTML_Document` and compose under `!spec.el`.
+3. Export control in `jsgui.controls`.
+4. Add to `tests/examples-controls.e2e.test.js`.
+5. Run the targeted test.
+
+## Playbook: Fix a Bundler Failure
+**Goal**: Ensure bundler completes and static routes are available.
+1. Inspect `resources/processors/bundlers/...` for early exits.
+2. Ensure errors call `complete(...)` with a bundle object.
+3. Run `tests/bundlers.test.js`.
+
+## Playbook: Improve Full-Stack Control Usage
+**Goal**: Ensure controls render and activate correctly.
+1. Validate `Active_HTML_Document` composition and CSS.
+2. Confirm JS/CSS routes exist via `HTTP_Webpage_Publisher`.
+3. Run the e2e and puppeteer tests.

package/docs/books/jsgui3-mvvm-fullstack/README.md

@@ -0,0 +1,30 @@
+# JSGUI3 MVVM and Full-Stack Controls Book
+
+This book is a fast, focused guide to MVVM binding and end-to-end control delivery in the JSGUI3 stack.
+
+## Who This Is For
+- AI agents that need low thinking time workflows.
+- Developers wiring controls across server and client.
+- Anyone troubleshooting binding, rendering, or bundling issues.
+
+## How To Read
+- Start with the overview and lifecycle chapters.
+- Use the playbooks for task execution.
+- Jump to testing and troubleshooting as soon as you hit a blocker.
+
+## Chapter Index
+1. [Overview](00-overview.md)
+2. [Stack Map](01-stack-map.md)
+3. [Control Lifecycle](02-control-lifecycle.md)
+4. [MVVM Basics](03-mvvm-basics.md)
+5. [Bindings and Validation](04-bindings-and-validation.md)
+6. [Full-Stack Example](05-full-stack-example.md)
+7. [Testing](06-testing.md)
+8. [Troubleshooting](07-troubleshooting.md)
+9. [Agent Playbooks](08-agent-playbooks.md)
+
+## Fast Lane Summary
+- Controls live in `client.js` and export to `jsgui.controls`.
+- Compose UI in `constructor` only when `!spec.el`.
+- Use `Server_Static_Page_Context` to validate server-side render quickly.
+- Use `Server.serve` for end-to-end delivery.

package/docs/comprehensive-documentation.md

@@ -27,22 +27,24 @@ The server acts as a bridge between server-side JavaScript applications and brow
 
 ## Table of Contents
 
-1. [Quick Start](#quick-start)
-2. [Architecture Overview](#architecture-overview)
-3. [Core Components](#core-components)
-4. [Installation and Setup](#installation-and-setup)
-5. [Configuration](#configuration)
-6. [API Reference](#api-reference)
-7. [Examples](#examples)
-8. [Development](#development)
-9. [Troubleshooting](#troubleshooting)
-10. [Deployment & Production](#deployment--production)
-11. [Contributing](#contributing)
-12. [Code Style Guidelines](#code-style-guidelines)
-13. [License](#license)
-14. [Changelog](#changelog)
-15. [Support](#support)
-16. [Roadmap](#roadmap)
+1. [Quick Start](#quick-start)
+2. [AI Agent Fast Start](#ai-agent-fast-start)
+3. [Architecture Overview](#architecture-overview)
+4. [Core Components](#core-components)
+5. [Installation and Setup](#installation-and-setup)
+6. [Configuration](#configuration)
+7. [API Reference](#api-reference)
+8. [Examples](#examples)
+9. [Development](#development)
+10. [Troubleshooting](#troubleshooting)
+11. [Deployment & Production](#deployment--production)
+12. [Contributing](#contributing)
+13. [Code Style Guidelines](#code-style-guidelines)
+14. [License](#license)
+15. [Changelog](#changelog)
+16. [Support](#support)
+17. [Roadmap](#roadmap)
+18. [MVVM and Full-Stack Controls](#mvvm-and-full-stack-controls)
 
 ## Quick Start
 
@@ -97,19 +99,42 @@ Server.serve({
 
 ### With API Endpoints
 
-```javascript
-Server.serve({
-    ctrl: DashboardControl,
-    src_path_client_js: require.resolve('./client.js'),
-    api: {
-        'metrics': () => ({ users: 1234, revenue: 56789 }),
-        'data': async ({ range }) => await fetchAnalytics(range)
-    },
-    port: 3000
-});
-```
-
-## Architecture Overview
+```javascript
+Server.serve({
+    ctrl: DashboardControl,
+    src_path_client_js: require.resolve('./client.js'),
+    api: {
+        'metrics': () => ({ users: 1234, revenue: 56789 }),
+        'data': async ({ range }) => await fetchAnalytics(range)
+    },
+    port: 3000
+});
+```
+
+## AI Agent Fast Start
+
+This section is a short, task-oriented runway for AI agents that need to act quickly with minimal overhead.
+
+**Start here:**
+1. Identify the target subsystem: examples, bundlers, publishers, or controls.
+2. Jump to the focused guide: `docs/books/jsgui3-mvvm-fullstack/README.md`.
+3. Make the smallest change that can pass a targeted test.
+4. Run the narrow test file first, then widen if needed.
+
+**Minimal commands:**
+```bash
+rg -n "needle" path/
+rg --files path/
+node tests/test-runner.js --test=examples-controls.e2e.test.js
+node tests/test-runner.js --test=window-examples.puppeteer.test.js
+```
+
+**Known fast checks:**
+- Render server-side quickly with `Server_Static_Page_Context`.
+- Confirm a control is exported under `jsgui.controls`.
+- Ensure composition happens only when `!spec.el`.
+
+## Architecture Overview
 
 ### Core Architecture
 
@@ -212,11 +237,97 @@ JSGUI3 provides a rich set of UI controls:
 - **Button**: Interactive button control
 - **Text_Input**: Text input field
 - **Checkbox**: Boolean input control
-- **Date_Picker**: Date selection control
-- **Month_View**: Calendar display
-- **Menu**: Dropdown menu control
-
-## Installation and Setup
+- **Date_Picker**: Date selection control
+- **Month_View**: Calendar display
+- **Menu**: Dropdown menu control
+
+## MVVM and Full-Stack Controls
+
+For a complete, step-by-step walkthrough of MVVM binding and full-stack control usage, use:
+`docs/books/jsgui3-mvvm-fullstack/README.md`
+
+### Minimal Full-Stack Control Example
+
+```javascript
+const jsgui = require('jsgui3-client');
+const { controls } = jsgui;
+const Active_HTML_Document = require('jsgui3-server/controls/Active_HTML_Document');
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const { context } = this;
+        if (!spec.el) {
+            const window_ctrl = new controls.Window({
+                context,
+                title: 'Hello JSGUI3'
+            });
+            this.body.add(window_ctrl);
+        }
+    }
+}
+
+controls.Demo_UI = Demo_UI;
+module.exports = jsgui;
+```
+
+```javascript
+const Server = require('jsgui3-server');
+const { Demo_UI } = require('./client').controls;
+
+Server.serve({
+    ctrl: Demo_UI,
+    src_path_client_js: require.resolve('./client.js'),
+    port: 3000
+});
+```
+
+### MVVM Binding Skeleton
+
+```javascript
+const jsgui = require('jsgui3-client');
+const { controls, Control } = jsgui;
+
+const set_model_value = (model, name, value) => {
+    if (!model) return;
+    if (typeof model.set === 'function') {
+        model.set(name, value);
+    } else {
+        model[name] = value;
+    }
+};
+
+class Profile_Panel extends Control {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'profile_panel';
+        super(spec);
+        if (!spec.el) {
+            const { context } = this;
+            const name_input = new controls.Text_Input({ context });
+            this.add(name_input);
+            this.name_input = name_input;
+        }
+        this.setup_bindings();
+    }
+
+    setup_bindings() {
+        const data_model = this.data && this.data.model;
+        if (!data_model || !this.name_input) return;
+        this.watch(data_model, 'full_name', value => {
+            this.name_input.set_value(value || '');
+        });
+        this.name_input.on('input', () => {
+            set_model_value(data_model, 'full_name', this.name_input.get_value());
+        });
+    }
+}
+
+controls.Profile_Panel = Profile_Panel;
+module.exports = jsgui;
+```
+
+## Installation and Setup
 
 ### Prerequisites