redweb 0.11.0 → 0.13.0

package/docs/snippets/room-access.tsx

@@ -0,0 +1,51 @@
+import { randomBytes } from 'node:crypto';
+import { page, start, BaseHandler, SocketRoute, RedWebSocket, RedWebRequest, LivePageRequestContext } from 'redweb';
+
+// A runnable local demonstration, not a production credential store.
+export function createApp(port = 8181) {
+    const token = randomBytes(32).toString('base64url');
+    let enabled = true;
+    const authenticate = (request: Pick<RedWebRequest, 'headers'>) =>
+        enabled && request.headers.authorization === `Bearer ${token}` ? 'alice' : false;
+
+    @page('/', { authorize: context => context.principal === 'alice' })
+    class Home {
+        render({ principal }: LivePageRequestContext) { return <main><h1>Private workspace</h1><p>{principal}</p></main>; }
+    }
+
+    class Join extends BaseHandler {
+        constructor() { super('join'); }
+        async onMessage(socket: RedWebSocket) {
+            socket.sendJson({ joined: await socket.enterRoom!('team'), principal: socket.context!.principal });
+        }
+    }
+    class Team extends SocketRoute {
+        constructor() {
+            super({ path: '/team', handlers: [Join], allowDuplicateConnections: true, logger: null,
+                admission: { authenticate },
+                rooms: { authorize: (context, roomId) => enabled && context.principal === 'alice' && roomId === 'team' },
+            });
+        }
+    }
+
+    const app = start(Home, { listen: false, authenticate, logger: null });
+    const team = app.sockets!.addRoute(Team);
+    app.server.listen(port, '127.0.0.1');
+    return {
+        app, team, token,
+        async revoke() {
+            enabled = false; // Invalidate credentials and future permissions first.
+            team.clients.forEach(socket => team.rooms!.leaveAll(socket));
+            await app.revoke('alice');
+        },
+        shutdown: () => app.shutdown(),
+    };
+}
+
+if (require.main === module) {
+    const demo = createApp();
+    console.log('Local demo: http://127.0.0.1:8181/ and ws://127.0.0.1:8181/team');
+    console.log(`Authorization: Bearer ${demo.token}`); // One fresh local-demo credential per run.
+    process.once('SIGTERM', () => void demo.shutdown().catch(console.error));
+    process.once('SIGINT', () => void demo.shutdown().catch(console.error));
+}

package/docs/topics.json

@@ -0,0 +1,21 @@
+[
+  { "id": "getting-started", "title": "Choose a starter and build a working app", "summary": "Requirements, fit, development, tests, and production boundaries.", "source": "docs/GETTING_STARTED.md" },
+  { "id": "guides/realtime-dashboard", "title": "Build a private realtime dashboard", "summary": "Persistent SQLite cards, account-private updates and sign-out across tabs, with explicit single-process limits.", "source": "docs/guides/realtime-dashboard.md", "recipe": { "template": "dashboard", "file": "src/cards.tsx" } },
+  { "id": "guides/jsx-without-react", "title": "Render JSX without React", "summary": "TypeScript pages, a shared layout and external CSS, rendered on the server without browser framework code.", "source": "docs/guides/jsx-without-react.md", "recipe": { "template": "site", "file": "src/app.tsx" } },
+  { "id": "guides/chatroom", "title": "Build a chatroom with live presence", "summary": "Reusable server-side components, validated forms and disconnect-aware presence, without custom browser socket glue.", "source": "docs/guides/chatroom.md", "recipe": { "template": "chat", "file": "src/chatroom.tsx" } },
+  { "id": "guides/typed-websockets", "title": "Share typed WebSocket contracts", "summary": "One match route, separate join/move/resume handlers and validated client/server payloads from the same schema.", "source": "docs/guides/typed-websockets.md", "recipe": { "template": "socket", "file": "src/handlers.ts" } },
+  { "id": "guides/http-websocket", "title": "Serve HTTP and WebSockets on one port", "summary": "An Express endpoint and raw socket route share one listener with one explicit shutdown owner.", "source": "docs/guides/http-websocket.md", "recipe": { "template": "http-ws", "file": "src/app.tsx" } },
+  { "id": "migration", "title": "Upgrade an existing Redweb application", "summary": "Historical socket defaults, asynchronous ownership, HTML migration and version-matched verification.", "source": "docs/MIGRATION.md" },
+  { "id": "cli", "title": "Initialization and diagnostics", "summary": "Noninteractive setup, safe existing-project adoption, and structured repair guidance.", "source": "docs/CLI.md" },
+  { "id": "development", "title": "Develop with browser refresh and safe inspection", "summary": "Loopback-only refresh with an explicit edit guard, plus bounded metadata and reactive update inspection without application values.", "source": "docs/DEVELOPMENT.md" },
+  { "id": "runtime-diagnostics", "title": "Understand runtime failures before retrying", "summary": "Safe authentication, authorization, validation and application errors, with actual retry and cancellation guarantees.", "source": "docs/RUNTIME_DIAGNOSTICS.md" },
+  { "id": "agent-access", "title": "Optional read-only agent documentation access", "summary": "Configure local MCP search and exact recipe retrieval without adding dependencies to Redweb servers.", "source": "docs/AGENT_ACCESS.md" },
+  { "id": "live-html", "title": "Pages, components, state, actions, and CSS", "summary": "Server-side TSX, automatic updates, keyed lists, lifecycle, and static export.", "source": "docs/LIVE_HTML.md" },
+  { "id": "socket-contracts", "title": "Typed socket routes and handlers", "summary": "Shared validation, client/server types, protocol errors, and join/move/resume.", "source": "docs/SOCKET_CONTRACTS.md" },
+  { "id": "room-authorization", "title": "Private rooms and shared request identity", "summary": "Explicit entry policies, bounded authorization, trusted context, publication and revocation.", "source": "docs/ROOM_AUTHORIZATION.md" },
+  { "id": "operations", "title": "Deploy and operate socket services", "summary": "Readiness, shutdown, capacity, reconnection, and distributed boundaries.", "source": "docs/MULTIPLAYER_OPERATIONS.md" },
+  { "id": "production-contract", "title": "Production guarantees and limits", "summary": "Resource ownership, delivery semantics, compatibility, and release gates.", "source": "docs/PRODUCTION_READINESS.md" },
+  { "id": "verification", "title": "Recorded verification evidence", "summary": "Historical measurements and their exact scope; not proof of a newer release.", "source": "docs/VERIFICATION_EVIDENCE.md" },
+  { "id": "release-status", "title": "Development release status", "summary": "Acceptance checklist, completed increments, and unfinished release gates.", "source": "docs/AGENT_READY_ACCEPTANCE.md" },
+  { "id": "release-trust", "title": "Choose and verify a release", "summary": "Maintained runtimes, compiler/browser verification boundaries, pinned packages, registry signatures, provenance and support limits.", "source": "docs/RELEASE_TRUST.md" }
+]

package/examples/live-html/chatroom.js

@@ -1,268 +1,207 @@
-"use strict";
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatroomComponent = void 0;
-exports.createChatroomPage = createChatroomPage;
-const redweb_1 = require('../..');
-const MAX_VISIBLE_MEMBERS = 100;
-const UNSAFE_TEXT = /[\p{Cc}\p{Cf}]/u;
-function messageView(messages) {
-    return messages.length
-        ? (0, redweb_1.each)([...messages], entry => (0, redweb_1.html) `<li><strong>${entry.sender}</strong><p>${entry.text}</p></li>`)
-        : (0, redweb_1.html) `<li class="empty-message">No messages yet. Say hello.</li>`;
-}
-function presenceView(members) {
-    const visible = members.slice(0, MAX_VISIBLE_MEMBERS);
-    const remaining = members.length - visible.length;
-    return (0, redweb_1.html) `
-        <p class="eyebrow">Online · ${members.length}</p>
-        <ul>
-            ${(0, redweb_1.each)([...visible], member => (0, redweb_1.html) `<li>${member}</li>`)}
-            ${remaining ? (0, redweb_1.html) `<li class="more-members">+${remaining} more</li>` : (0, redweb_1.html) ``}
-        </ul>
-    `;
-}
-class ChatRoom {
-    history = [];
-    participants = new Set();
-    online = new Set();
-    join(participant) {
-        const name = participant.displayName.toLocaleLowerCase();
-        if ([...this.participants].some(member => member !== participant && member.displayName.toLocaleLowerCase() === name)) {
-            return false;
-        }
-        this.participants.add(participant);
-        this.online.add(participant);
-        participant.updateMessages(messageView(this.history));
-        this.publishPresence();
-        return true;
-    }
-    disconnect(participant) {
-        if (!this.online.delete(participant))
-            return;
-        this.publishPresence();
-    }
-    leave(participant) {
-        this.online.delete(participant);
-        if (!this.participants.delete(participant))
-            return;
-        this.publishPresence();
-    }
-    send(participant, text) {
-        if (!this.online.has(participant))
-            return false;
-        this.history = [...this.history, { sender: participant.displayName, text }].slice(-100);
-        const messages = messageView(this.history);
-        for (const member of this.participants)
-            member.updateMessages(messages);
-        return true;
-    }
-    publishPresence() {
-        const members = [...this.online].map(participant => participant.displayName);
-        const presence = presenceView(members);
-        for (const participant of this.participants)
-            participant.updatePresence(presence);
-    }
-}
-let ChatroomComponent = (() => {
-    let _classDecorators = [(0, redweb_1.component)()];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _instanceExtraInitializers = [];
-    let _screen_decorators;
-    let _screen_initializers = [];
-    let _screen_extraInitializers = [];
-    let _messages_decorators;
-    let _messages_initializers = [];
-    let _messages_extraInitializers = [];
-    let _presence_decorators;
-    let _presence_initializers = [];
-    let _presence_extraInitializers = [];
-    let _join_decorators;
-    let _send_decorators;
-    let _leave_decorators;
-    var ChatroomComponent = class {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _screen_decorators = [(0, redweb_1.state)()];
-            _messages_decorators = [(0, redweb_1.state)()];
-            _presence_decorators = [(0, redweb_1.state)()];
-            _join_decorators = [(0, redweb_1.action)()];
-            _send_decorators = [(0, redweb_1.action)()];
-            _leave_decorators = [(0, redweb_1.action)()];
-            __esDecorate(this, null, _join_decorators, { kind: "method", name: "join", static: false, private: false, access: { has: obj => "join" in obj, get: obj => obj.join }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _send_decorators, { kind: "method", name: "send", static: false, private: false, access: { has: obj => "send" in obj, get: obj => obj.send }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _leave_decorators, { kind: "method", name: "leave", static: false, private: false, access: { has: obj => "leave" in obj, get: obj => obj.leave }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _screen_decorators, { kind: "field", name: "screen", static: false, private: false, access: { has: obj => "screen" in obj, get: obj => obj.screen, set: (obj, value) => { obj.screen = value; } }, metadata: _metadata }, _screen_initializers, _screen_extraInitializers);
-            __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
-            __esDecorate(null, null, _presence_decorators, { kind: "field", name: "presence", static: false, private: false, access: { has: obj => "presence" in obj, get: obj => obj.presence, set: (obj, value) => { obj.presence = value; } }, metadata: _metadata }, _presence_initializers, _presence_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            ChatroomComponent = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        room = __runInitializers(this, _instanceExtraInitializers);
-        displayName = '';
-        screen = __runInitializers(this, _screen_initializers, this.joinScreen());
-        messages = (__runInitializers(this, _screen_extraInitializers), __runInitializers(this, _messages_initializers, messageView([])));
-        presence = (__runInitializers(this, _messages_extraInitializers), __runInitializers(this, _presence_initializers, presenceView([])));
-        constructor(room) {
-            __runInitializers(this, _presence_extraInitializers);
-            this.room = room;
-        }
-        connected() {
-            if (this.displayName)
-                this.room.join(this);
-        }
-        disconnected() {
-            this.room.disconnect(this);
-        }
-        disposed() {
-            this.room.leave(this);
-        }
-        join({ name }) {
-            if (this.displayName)
-                return false;
-            if (typeof name !== 'string') {
-                this.screen = this.joinScreen('Display name must be text.');
-                return false;
-            }
-            const displayName = name.normalize('NFKC').trim();
-            if (!displayName || displayName.length > 40 || UNSAFE_TEXT.test(displayName)) {
-                this.screen = this.joinScreen('Choose a visible display name of at most 40 characters.');
-                return false;
-            }
-            this.displayName = displayName;
-            if (this.room.join(this)) {
-                this.screen = this.roomScreen();
-                return true;
-            }
-            this.displayName = '';
-            this.screen = this.joinScreen('That display name is already in use.');
-            return false;
-        }
-        send({ message }) {
-            if (typeof message !== 'string')
-                return false;
-            const text = message.normalize('NFKC').trim();
-            if (!text || text.length > 500 || UNSAFE_TEXT.test(text))
-                return false;
-            return this.room.send(this, text);
-        }
-        leave() {
-            this.room.leave(this);
-            this.displayName = '';
-            this.screen = this.joinScreen();
-        }
-        updateMessages(messages) {
-            this.messages = messages;
-        }
-        updatePresence(presence) {
-            this.presence = presence;
-        }
-        render() {
-            return (0, redweb_1.html) `<section class="chatroom" data-rw-state="screen">${this.screen}</section>`;
-        }
-        joinScreen(error = '') {
-            const feedback = error ? (0, redweb_1.html) `<p class="form-error" role="alert">${error}</p>` : (0, redweb_1.html) ``;
-            return (0, redweb_1.html) `
-            <section class="join-panel">
-                <p class="eyebrow">Live room</p>
-                <h1>Join the chatroom</h1>
-                <p>Choose a name once, then chat in realtime with everyone currently in the room.</p>
-                ${feedback}
-                <form rw-submit="join" class="join-form">
-                    <label for="display-name">Display name</label>
-                    <div class="input-row">
-                        <input id="display-name" name="name" maxlength="40" autocomplete="nickname" required autofocus>
-                        <button type="submit">Join room</button>
-                    </div>
-                </form>
-            </section>
-        `;
-        }
-        roomScreen() {
-            return (0, redweb_1.html) `
-            <div class="room-layout">
-                <section class="conversation">
-                    <header class="room-header">
-                        <div><p class="eyebrow">Connected as</p><h1>${this.displayName}</h1></div>
-                        <button type="button" class="quiet-button" rw-click="leave">Leave</button>
-                    </header>
-                    <ol class="message-list" aria-live="polite" data-rw-state="messages">${this.messages}</ol>
-                    <form rw-submit="send" class="composer">
-                        <label class="sr-only" for="chat-message">Message</label>
-                        <input id="chat-message" name="message" maxlength="500" autocomplete="off" placeholder="Message the room…" required autofocus>
-                        <button type="submit">Send</button>
-                    </form>
-                </section>
-                <aside class="presence" aria-label="People in the room" data-rw-state="presence">${this.presence}</aside>
-            </div>
-        `;
-        }
-    };
-    return ChatroomComponent = _classThis;
-})();
-exports.ChatroomComponent = ChatroomComponent;
-function createChatroomPage() {
-    const room = new ChatRoom();
-    let ChatroomPage = (() => {
-        let _classDecorators = [(0, redweb_1.page)('/', { css: 'chatroom.css' })];
-        let _classDescriptor;
-        let _classExtraInitializers = [];
-        let _classThis;
-        var ChatroomPage = class {
-            static { _classThis = this; }
-            static {
-                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                ChatroomPage = _classThis = _classDescriptor.value;
-                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                __runInitializers(_classThis, _classExtraInitializers);
-            }
-            chat = new ChatroomComponent(room);
-            render() {
-                return (0, redweb_1.html) `<main>${this.chat}</main>`;
-            }
-        };
-        return ChatroomPage = _classThis;
-    })();
-    return ChatroomPage;
-}
-if (require.main === module)
-    (0, redweb_1.start)(createChatroomPage(), { port: 8080 });
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatroomComponent = exports.chatInputs = void 0;
+exports.createChatroomPage = createChatroomPage;
+const jsx_runtime_1 = require('../../jsx-runtime');
+const redweb_1 = require('../..');
+const zod_1 = require("zod");
+const MAX_VISIBLE_MEMBERS = 100;
+const visibleText = (maximum) => zod_1.z.string()
+    .transform(value => value.normalize('NFKC').trim())
+    .pipe(zod_1.z.string().min(1).max(maximum).regex(/^[^\p{Cc}\p{Cf}]+$/u));
+exports.chatInputs = {
+    join: zod_1.z.object({ name: visibleText(40) }).strict(),
+    send: zod_1.z.object({ message: visibleText(500) }).strict(),
+};
+class ChatRoom {
+    history = [];
+    nextMessageId = 0;
+    participants = new Set();
+    online = new Set();
+    join(participant) {
+        const name = participant.displayName.toLocaleLowerCase();
+        if ([...this.participants].some(member => member !== participant && member.displayName.toLocaleLowerCase() === name))
+            return false;
+        this.participants.add(participant);
+        this.online.add(participant);
+        participant.updateMessages(this.history);
+        this.publishPresence();
+        return true;
+    }
+    disconnect(participant) {
+        if (this.online.delete(participant))
+            this.publishPresence();
+    }
+    leave(participant) {
+        this.online.delete(participant);
+        if (this.participants.delete(participant))
+            this.publishPresence();
+    }
+    send(participant, text) {
+        if (!this.online.has(participant))
+            return false;
+        this.history = [...this.history, { id: ++this.nextMessageId, sender: participant.displayName, text }].slice(-100);
+        for (const member of this.participants)
+            member.updateMessages(this.history);
+        return true;
+    }
+    publishPresence() {
+        const members = [...this.online].map(participant => participant.displayName);
+        for (const participant of this.participants)
+            participant.updatePresence(members);
+    }
+}
+let ChatroomComponent = (() => {
+    let _classDecorators = [(0, redweb_1.component)()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _instanceExtraInitializers = [];
+    let _displayName_decorators;
+    let _displayName_initializers = [];
+    let _displayName_extraInitializers = [];
+    let _feedback_decorators;
+    let _feedback_initializers = [];
+    let _feedback_extraInitializers = [];
+    let _messages_decorators;
+    let _messages_initializers = [];
+    let _messages_extraInitializers = [];
+    let _members_decorators;
+    let _members_initializers = [];
+    let _members_extraInitializers = [];
+    let _join_decorators;
+    let _send_decorators;
+    let _leave_decorators;
+    var ChatroomComponent = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _displayName_decorators = [(0, redweb_1.state)()];
+            _feedback_decorators = [(0, redweb_1.state)()];
+            _messages_decorators = [(0, redweb_1.state)()];
+            _members_decorators = [(0, redweb_1.state)()];
+            _join_decorators = [(0, redweb_1.action)({ input: exports.chatInputs.join })];
+            _send_decorators = [(0, redweb_1.action)({ input: exports.chatInputs.send })];
+            _leave_decorators = [(0, redweb_1.action)()];
+            __esDecorate(this, null, _join_decorators, { kind: "method", name: "join", static: false, private: false, access: { has: obj => "join" in obj, get: obj => obj.join }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _send_decorators, { kind: "method", name: "send", static: false, private: false, access: { has: obj => "send" in obj, get: obj => obj.send }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _leave_decorators, { kind: "method", name: "leave", static: false, private: false, access: { has: obj => "leave" in obj, get: obj => obj.leave }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _displayName_decorators, { kind: "field", name: "displayName", static: false, private: false, access: { has: obj => "displayName" in obj, get: obj => obj.displayName, set: (obj, value) => { obj.displayName = value; } }, metadata: _metadata }, _displayName_initializers, _displayName_extraInitializers);
+            __esDecorate(null, null, _feedback_decorators, { kind: "field", name: "feedback", static: false, private: false, access: { has: obj => "feedback" in obj, get: obj => obj.feedback, set: (obj, value) => { obj.feedback = value; } }, metadata: _metadata }, _feedback_initializers, _feedback_extraInitializers);
+            __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
+            __esDecorate(null, null, _members_decorators, { kind: "field", name: "members", static: false, private: false, access: { has: obj => "members" in obj, get: obj => obj.members, set: (obj, value) => { obj.members = value; } }, metadata: _metadata }, _members_initializers, _members_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ChatroomComponent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        room = __runInitializers(this, _instanceExtraInitializers);
+        displayName = __runInitializers(this, _displayName_initializers, '');
+        feedback = (__runInitializers(this, _displayName_extraInitializers), __runInitializers(this, _feedback_initializers, ''));
+        messages = (__runInitializers(this, _feedback_extraInitializers), __runInitializers(this, _messages_initializers, []));
+        members = (__runInitializers(this, _messages_extraInitializers), __runInitializers(this, _members_initializers, []));
+        constructor(room) {
+            __runInitializers(this, _members_extraInitializers);
+            this.room = room;
+        }
+        connected() { if (this.displayName)
+            this.room.join(this); }
+        disconnected() { this.room.disconnect(this); }
+        disposed() { this.room.leave(this); }
+        join({ name }) {
+            if (this.displayName)
+                return false;
+            this.displayName = name;
+            if (!this.room.join(this)) {
+                this.displayName = '';
+                this.feedback = 'That display name is already in use.';
+                return false;
+            }
+            this.feedback = '';
+            return true;
+        }
+        send({ message }) {
+            return this.room.send(this, message);
+        }
+        leave() {
+            this.room.leave(this);
+            this.displayName = '';
+            this.feedback = '';
+            this.messages = [];
+            this.members = [];
+        }
+        updateMessages(messages) { this.messages = messages; }
+        updatePresence(members) { this.members = members; }
+        render() {
+            return (0, jsx_runtime_1.jsx)("section", { class: "chatroom", children: this.displayName ? this.roomScreen() : this.joinScreen() });
+        }
+        joinScreen() {
+            return ((0, jsx_runtime_1.jsxs)("section", { class: "join-panel", children: [(0, jsx_runtime_1.jsx)("p", { class: "eyebrow", children: "Live room" }), (0, jsx_runtime_1.jsx)("h1", { children: "Join the chatroom" }), (0, jsx_runtime_1.jsx)("p", { children: "Choose a name once, then chat in realtime with everyone currently in the room." }), this.feedback && (0, jsx_runtime_1.jsx)("p", { class: "form-error", role: "alert", children: this.feedback }), (0, jsx_runtime_1.jsxs)("form", { "rw-submit": "join", class: "join-form", children: [(0, jsx_runtime_1.jsx)("label", { for: "display-name", children: "Display name" }), (0, jsx_runtime_1.jsxs)("div", { class: "input-row", children: [(0, jsx_runtime_1.jsx)("input", { id: "display-name", name: "name", maxlength: "40", autocomplete: "nickname", required: true, autofocus: true }), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Join room" })] })] })] }));
+        }
+        roomScreen() {
+            const remaining = this.members.length - MAX_VISIBLE_MEMBERS;
+            return ((0, jsx_runtime_1.jsxs)("div", { class: "room-layout", children: [(0, jsx_runtime_1.jsxs)("section", { class: "conversation", children: [(0, jsx_runtime_1.jsxs)("header", { class: "room-header", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { class: "eyebrow", children: "Connected as" }), (0, jsx_runtime_1.jsx)("h1", { children: this.displayName })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", class: "quiet-button", "rw-click": "leave", children: "Leave" })] }), (0, jsx_runtime_1.jsx)("ol", { class: "message-list", "aria-live": "polite", children: this.messages.length ? this.messages.map(entry => ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: entry.sender }), (0, jsx_runtime_1.jsx)("p", { children: entry.text })] }, entry.id))) : (0, jsx_runtime_1.jsx)("li", { class: "empty-message", children: "No messages yet. Say hello." }) }), (0, jsx_runtime_1.jsxs)("form", { "rw-submit": "send", class: "composer", children: [(0, jsx_runtime_1.jsx)("label", { class: "sr-only", for: "chat-message", children: "Message" }), (0, jsx_runtime_1.jsx)("input", { id: "chat-message", name: "message", maxlength: "500", autocomplete: "off", placeholder: "Message the room\u2026", required: true, autofocus: true }), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Send" })] })] }), (0, jsx_runtime_1.jsxs)("aside", { class: "presence", "aria-label": "People in the room", children: [(0, jsx_runtime_1.jsxs)("p", { class: "eyebrow", children: ["Online \u00B7 ", this.members.length] }), (0, jsx_runtime_1.jsxs)("ul", { children: [this.members.slice(0, MAX_VISIBLE_MEMBERS).map(member => (0, jsx_runtime_1.jsx)("li", { children: member }, member)), remaining > 0 && (0, jsx_runtime_1.jsxs)("li", { class: "more-members", children: ["+", remaining, " more"] })] })] })] }));
+        }
+    };
+    return ChatroomComponent = _classThis;
+})();
+exports.ChatroomComponent = ChatroomComponent;
+function createChatroomPage() {
+    const room = new ChatRoom();
+    let ChatroomPage = (() => {
+        let _classDecorators = [(0, redweb_1.page)('/', { css: 'chatroom.css' })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        var ChatroomPage = class {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                ChatroomPage = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            chat = new ChatroomComponent(room);
+            render() { return (0, jsx_runtime_1.jsx)("main", { children: this.chat }); }
+        };
+        return ChatroomPage = _classThis;
+    })();
+    return ChatroomPage;
+}
+if (require.main === module)
+    (0, redweb_1.start)(createChatroomPage(), { port: 8080 });