redweb 0.13.2 → 0.13.5

package/examples/live-html/chatroom.js

@@ -1,207 +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 = 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 });
+"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 });

package/examples/live-html/jsx-page.js

@@ -67,7 +67,7 @@ let JsxPage = (() => {
             this.count += 1;
         }
         render() {
-            return ((0, jsx_runtime_1.jsxs)("main", { class: "page-shell", children: [(0, jsx_runtime_1.jsx)("h1", { children: "Redweb JSX" }), (0, jsx_runtime_1.jsxs)(Card, { title: "Server rendered", children: [(0, jsx_runtime_1.jsx)("p", { children: "Plain TSX, escaped by default, with no browser framework." }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "rw-click": "increment", children: ["Count ", (0, jsx_runtime_1.jsx)("output", { children: this.count })] })] })] }));
+            return ((0, jsx_runtime_1.jsxs)("main", { class: "page-shell", children: [(0, jsx_runtime_1.jsx)("h1", { children: "Redweb JSX" }), (0, jsx_runtime_1.jsxs)(Card, { title: "Server rendered", children: [(0, jsx_runtime_1.jsx)("p", { children: "Plain TSX, escaped by default, with no browser framework." }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "rw-click": "increment", children: ["Count ", this.count] })] })] }));
         }
         constructor() {
             super(...arguments);

package/examples/live-html/jsx-page.tsx

@@ -30,7 +30,7 @@ export class JsxPage extends LivePage {
                 <Card title="Server rendered">
                     <p>Plain TSX, escaped by default, with no browser framework.</p>
                     <button type="button" rw-click="increment">
-                        Count <output>{this.count}</output>
+                        Count {this.count}
                     </button>
                 </Card>
             </main>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redweb",
-  "version": "0.13.2",
+  "version": "0.13.5",
   "description": "A small Node.js foundation for HTTP, WebSockets, multiplayer services, and server-rendered HTML",
   "main": "index.js",
   "types": "index.d.ts",
@@ -83,6 +83,7 @@
     "verify:live-html:browser": "node scripts/build-live-html-examples.js --check && node scripts/verify-live-html-browser.js",
     "verify:browser:supplements": "node node_modules/jest/bin/jest.js tests/unit/browser-supplements.unit.test.js tests/integration/browser-supplements.integration.test.js --runInBand --coverage --collectCoverageFrom=scripts/lib/verify-live-page-ownership.js --collectCoverageFrom=scripts/lib/verify-runtime-browser.js --coverageDirectory=coverage/browser-supplements-authored",
     "verify:dashboard:coverage": "node node_modules/jest/bin/jest.js tests/unit/dashboard-verifier.unit.test.js tests/integration/dashboard-verifier.integration.test.js --runInBand --coverage --collectCoverageFrom=scripts/lib/verify-dashboard-browser.js --coverageDirectory=coverage/dashboard-verifier",
+    "verify:starter:browser:coverage": "node node_modules/jest/bin/jest.js tests/unit/browser-acceptance.unit.test.js tests/unit/browser-handle-release.unit.test.js tests/unit/starter-browser.unit.test.js tests/integration/starter-browser.integration.test.js --runInBand --coverage --collectCoverageFrom=scripts/lib/BrowserAcceptance.js --collectCoverageFrom=scripts/lib/releaseBrowserHandles.js --collectCoverageFrom=scripts/lib/verify-starter-browser.js --coverageDirectory=coverage/starter-browser",
     "verify:refresh:coverage": "node node_modules/jest/bin/jest.js tests/unit/refresh-controls-failures.unit.test.js tests/unit/refresh-observation.unit.test.js tests/unit/heading-readiness.unit.test.js tests/integration/refresh-observation.integration.test.js tests/integration/refresh-coverage.integration.test.js --runInBand --coverage --collectCoverageFrom=scripts/lib/verify-refresh-controls.js --collectCoverageFrom=scripts/lib/verify-refresh-coverage.js --coverageDirectory=coverage/refresh-verifier",
     "verify:browser:coverage": "node node_modules/jest/bin/jest.js tests/unit/browser-coverage.unit.test.js tests/unit/application-coverage.unit.test.js tests/unit/packed-browser-harness.unit.test.js --runInBand --coverage --collectCoverageFrom=scripts/lib/BrowserCoverage.js --collectCoverageFrom=scripts/lib/ApplicationCoverage.js --collectCoverageFrom=scripts/lib/assertCoverageFile.js --coverageDirectory=coverage/browser-collector && npm run verify:browser:coordinator:coverage",
     "verify:browser:coordinator:coverage": "node node_modules/jest/bin/jest.js tests/unit/browser-coordinator-report.unit.test.js tests/unit/browser-coordinator-lifecycle.unit.test.js tests/unit/browser-coverage-cleanup.unit.test.js tests/unit/browser-supplements.unit.test.js tests/unit/refresh-controls-failures.unit.test.js tests/unit/refresh-observation.unit.test.js tests/unit/heading-readiness.unit.test.js tests/integration/browser-coordinator.integration.test.js tests/integration/browser-supplements.integration.test.js tests/integration/refresh-observation.integration.test.js tests/integration/refresh-coverage.integration.test.js --runInBand --coverage --collectCoverageFrom=scripts/verify-browser-coverage.js --collectCoverageFrom=scripts/lib/verify-live-page-ownership.js --collectCoverageFrom=scripts/lib/verify-runtime-browser.js --collectCoverageFrom=scripts/lib/verify-refresh-controls.js --collectCoverageFrom=scripts/lib/verify-refresh-coverage.js --coverageDirectory=coverage/browser-coordinator",
@@ -107,7 +108,7 @@
     "verify:package:examples:coverage": "node node_modules/jest/bin/jest.js tests/unit/packed-action.unit.test.js tests/unit/example-dependencies.unit.test.js tests/unit/example-probe.unit.test.js tests/integration/packed-action.integration.test.js tests/integration/example-dependencies.integration.test.js --runInBand --coverage --collectCoverageFrom=scripts/lib/performProbeAction.js --collectCoverageFrom=scripts/lib/verify-example-dependencies.js --collectCoverageFrom=scripts/lib/example-dependency-probe.cjs --coverageDirectory=coverage/example-dependency-tools",
     "verify:package:browser:coverage": "node node_modules/jest/bin/jest.js tests/unit/browser-pages.unit.test.js tests/unit/packed-browser-verifier.unit.test.js tests/unit/browser-coverage-cleanup.unit.test.js tests/integration/packed-browser-verifier.integration.test.js --runInBand --silent --coverage --collectCoverageFrom=scripts/lib/verify-packed-browser.js --collectCoverageFrom=scripts/lib/BrowserPages.js --coverageDirectory=coverage/packed-browser-verifier",
     "verify:client:link": "node --test tests/integration/npm-link.integration.test.cjs",
-    "test": "npx jest"
+    "test": "npx jest --testPathIgnorePatterns=soak-.*[.]test[.]js$ --testPathIgnorePatterns=benchmark-measurement[.]integration[.]test[.]js$"
   },
   "files": [
     "bin",

package/recipes/add/artifact.test.cjs

@@ -32,7 +32,7 @@ test('__NAME__ generated __KIND__ works over the network', { timeout: 10000 }, a
         const response = await fetch(`${origin}${'__KIND__' === 'page' ? '/__NAME__' : '/'}`);
         assert.equal(response.status, 200);
         const document = await response.text();
-        assert.match(document, /<output>0<\/output>/);
+        assert.match(document, /Count 0/);
         config = JSON.parse(document.match(/id="__redweb_page">([^<]+)</)[1]);
     }
     const endpoint = config
@@ -49,7 +49,7 @@ test('__NAME__ generated __KIND__ works over the network', { timeout: 10000 }, a
         } }));
     } else await artifact.contract.client(socket).send('ping', { text: 'Hello' }, { requestId: 'probe' });
     const success = message => config
-        ? message.type === 'redweb:patch' && message.payload.patches.some(patch => patch.html?.includes('<output>1</output>'))
+        ? message.type === 'redweb:patch' && message.payload.patches.some(patch => patch.html?.includes('Count 1'))
         : message.type === 'pong' && message.payload.text === 'Hello' && message.requestId === 'probe';
     const deadline = Date.now() + 3000;
     while (!received.some(success) && Date.now() < deadline) await new Promise(resolve => setTimeout(resolve, 10));

package/recipes/add/live.tsx

@@ -11,7 +11,7 @@ export class __CLASS__ {
         return (
             <section>
                 <h1>__TITLE__</h1>
-                <button rw-click="increment">Count <output>{this.count}</output></button>
+                <button rw-click="increment">Count {this.count}</button>
             </section>
         );
     }

package/recipes/dashboard/README.md

@@ -14,11 +14,11 @@ npm test
 npm run dev
 ```
 
-The provisioning command displays a randomly generated password once. Save it securely; there are no default accounts or passwords. Open **http://127.0.0.1:8181/login**, sign in, and add a card. A second signed-in tab updates immediately. Restart the app: your cards and unexpired credentials remain valid. Sign out all sessions to close every connected tab for that account and invalidate all its cookies.
+The provisioning command displays a randomly generated password once. Save it securely; there are no default accounts or passwords. Open **http://127.0.0.1:8181/login** or **http://localhost:8181/login**, sign in, and add a card. A second signed-in tab updates immediately. Restart the app: your cards and unexpired credentials remain valid. Sign out all sessions to close every connected tab for that account and invalidate all its cookies.
 
-`npm test` provisions temporary test accounts and a real temporary database, then exercises HTTP, WebSockets, isolation, restart, and session expiry. It never modifies your application database. Integration tests use no mocks. A separately labelled unit test injects a cleanup error after closing a real SQLite database to verify rejection handling; it does not simulate a real operating-system failure.
+`npm test` provisions temporary test accounts and a real temporary database, then exercises HTTP, WebSockets, isolation, restart, and session expiry. It never modifies your application database. Integration tests use no mocks, including hostile cross-loopback form and socket origins. Redweb's release gate also signs in with both valid and invalid credentials through a visible Chromium window, using `localhost` so synthetic request headers cannot hide browser-origin bugs. CI supplies a virtual display for that same headed test. A separately labelled unit test injects a cleanup error after closing a real SQLite database to verify rejection handling; it does not simulate a real operating-system failure.
 
-`npm run test:coverage` measures the TypeScript application through source maps, separately from Redweb's own instrumented-library coverage. It also waits through the actual one-minute login admission window without mocking the clock. The report includes TypeScript-generated decorator accessor functions; inspect that distinction rather than assuming a library coverage figure applies to this recipe. The generated npm configuration enforces this recipe's Node engine requirement before installation.
+`npm run test:coverage` measures the TypeScript application through source maps, separately from Redweb's own instrumented-library coverage. Login-window expiry uses the same real limiter with an explicitly short test configuration; it never waits through the production one-minute default. The report includes TypeScript-generated decorator accessor functions; inspect that distinction rather than assuming a library coverage figure applies to this recipe. The generated npm configuration enforces this recipe's Node engine requirement before installation.
 
 ## Where the behavior lives
 

package/recipes/dashboard/app.test.cjs

@@ -8,7 +8,7 @@ const { DatabaseSync } = require('node:sqlite');
 const { spawn, spawnSync } = require('node:child_process');
 const net = require('node:net');
 const { WebSocketServer, WebSocket } = require('ws');
-const { createApp, databasePath } = require('../dist/app');
+const { allowsDashboardOrigin, createApp, databasePath } = require('../dist/app');
 const { DashboardStore } = require('../dist/store');
 const { DashboardAuth, credentials, sessionToken } = require('../dist/auth');
 const { PrivateCards } = require('../dist/cards');
@@ -70,9 +70,12 @@ async function cardClient(t, origin, cookie) {
 test('private live cards: real HTTP, sockets, isolation, reconnect, sign-out and durable restart', async t => {
     const fixtureApp = await fixture(t);
     let { origin } = fixtureApp;
+    const localhost = origin.replace('127.0.0.1', 'localhost');
     assert.equal((await fetch(`${origin}/login`)).status, 200);
     assert.equal((await fetch(origin)).status, 401);
     assert.equal((await post(origin, '/login', { account: 'alice', password }, '', 'https://foreign.example')).status, 403);
+    assert.equal((await post(origin, '/login', { account: 'alice', password }, '', localhost)).status, 403);
+    assert.equal((await post(localhost, '/login', { account: 'alice', password: 'wrong-password-at-least-16' })).status, 401);
     assert.equal((await post(origin, '/login', { account: 'alice', password: 'wrong-password-at-least-16' })).status, 401);
     const alice = await login(origin);
     const alice2 = await login(origin);
@@ -80,6 +83,14 @@ test('private live cards: real HTTP, sockets, isolation, reconnect, sign-out and
     const page = await fetch(origin, { headers: { Cookie: alice } });
     assert.match(page.headers.get('cache-control'), /private.*no-store/);
     assert.equal(page.headers.get('etag'), null);
+    const document = await page.text();
+    const pageConfig = JSON.parse(document.match(/id="__redweb_page">([^<]+)/)[1]);
+    const hostile = new WebSocket(`${origin.replace('http:', 'ws:')}${pageConfig.socketPath}?pageId=${pageConfig.pageId}&redwebVersion=${encodeURIComponent(pageConfig.version)}`,
+        { headers: { Cookie: alice, Origin: localhost } });
+    hostile.on('error', () => {});
+    const [, rejection] = await once(hostile, 'unexpected-response');
+    assert.equal(rejection.statusCode, 403);
+    rejection.resume();
     const first = await cardClient(t, origin, alice);
     const second = await cardClient(t, origin, alice2);
     const other = await cardClient(t, origin, bob);
@@ -124,6 +135,23 @@ test('private live cards: real HTTP, sockets, isolation, reconnect, sign-out and
     await client.items(value => value.length === 1);
 });
 
+test('unit: development accepts only equivalent loopback browser origins on the listening port', () => {
+    const expected = 'http://127.0.0.1:8181';
+    assert.equal(allowsDashboardOrigin('http://localhost:8181', expected, false, 'localhost:8181'), true);
+    assert.equal(allowsDashboardOrigin('http://127.0.0.1:8181', expected, false, '127.0.0.1:8181'), true);
+    assert.equal(allowsDashboardOrigin('http://[::1]:8181', expected, false, '[::1]:8181'), true);
+    assert.equal(allowsDashboardOrigin('http://localhost:8181', expected, false, '127.0.0.1:8181'), false);
+    assert.equal(allowsDashboardOrigin('https://localhost:8181', expected, false, 'localhost:8181'), false);
+    assert.equal(allowsDashboardOrigin('http://localhost:8182', expected, false, 'localhost:8182'), false);
+    assert.equal(allowsDashboardOrigin('http://localhost:8181/path', expected, false, 'localhost:8181'), false);
+    assert.equal(allowsDashboardOrigin('not an origin', expected, false, 'localhost:8181'), false);
+    assert.equal(allowsDashboardOrigin(undefined, expected, false, 'localhost:8181'), false);
+    assert.equal(allowsDashboardOrigin('http://localhost:8181', expected, false), false);
+    assert.equal(allowsDashboardOrigin('http://localhost:8181', expected, false, 'localhost:8181/path'), false);
+    assert.equal(allowsDashboardOrigin('https://dashboard.example', 'https://dashboard.example', true), true);
+    assert.equal(allowsDashboardOrigin('http://localhost:8181', 'https://dashboard.example', true), false);
+});
+
 test('session expiry closes idle sockets and rejects later HTTP access', async t => {
     const { origin } = await fixture(t, { sessionLifetimeMs: 1200 });
     const cookie = await login(origin);
@@ -200,6 +228,8 @@ test('logout fences password checks in flight; close and admission bounds stop n
     assert.equal(await closing, undefined);
     assert.equal(await auth.login('peer', 'alice', password), undefined);
     assert.throws(() => new DashboardAuth(store, 0));
+    assert.throws(() => new DashboardAuth(store, 3600000, 19));
+    assert.throws(() => new DashboardAuth(store, 3600000, 60001));
     const limited = new DashboardAuth(store);
     const concurrent = Array.from({ length: 5 }, (_, index) => limited.login(`peer-${index}`, 'alice', password));
     assert.equal(await concurrent[4], undefined);