@doxsync/core 0.1.0-alpha.1

package/dist/wasm/doxsync.js

@@ -0,0 +1,520 @@
+/* @ts-self-types="./doxsync.d.ts" */
+
+export class Consumer {
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        ConsumerFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_consumer_free(ptr, 0);
+    }
+    /**
+     * @param {any} bytes
+     */
+    consumeDiff(bytes) {
+        const ret = wasm.consumer_consumeDiff(this.__wbg_ptr, bytes);
+        if (ret[1]) {
+            throw takeFromExternrefTable0(ret[0]);
+        }
+    }
+    /**
+     * @returns {any}
+     */
+    document() {
+        const ret = wasm.consumer_document(this.__wbg_ptr);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return takeFromExternrefTable0(ret[0]);
+    }
+    constructor() {
+        const ret = wasm.consumer_new();
+        this.__wbg_ptr = ret;
+        ConsumerFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+}
+if (Symbol.dispose) Consumer.prototype[Symbol.dispose] = Consumer.prototype.free;
+
+export class Producer {
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        ProducerFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_producer_free(ptr, 0);
+    }
+    /**
+     * @param {any} value
+     * @param {any} protocols
+     */
+    constructor(value, protocols) {
+        const ret = wasm.producer_new(value, protocols);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        this.__wbg_ptr = ret[0];
+        ProducerFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+    /**
+     * @returns {any}
+     */
+    produceDiff() {
+        const ret = wasm.producer_produceDiff(this.__wbg_ptr);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return takeFromExternrefTable0(ret[0]);
+    }
+    /**
+     * @param {any} value
+     */
+    replace(value) {
+        const ret = wasm.producer_replace(this.__wbg_ptr, value);
+        if (ret[1]) {
+            throw takeFromExternrefTable0(ret[0]);
+        }
+    }
+}
+if (Symbol.dispose) Producer.prototype[Symbol.dispose] = Producer.prototype.free;
+function __wbg_get_imports() {
+    const import0 = {
+        __proto__: null,
+        __wbg___wbindgen_bigint_get_as_i64_b482365c149396c8: function(arg0, arg1) {
+            const v = arg1;
+            const ret = typeof(v) === 'bigint' ? v : undefined;
+            getDataViewMemory0().setBigInt64(arg0 + 8 * 1, isLikeNone(ret) ? BigInt(0) : ret, true);
+            getDataViewMemory0().setInt32(arg0 + 4 * 0, !isLikeNone(ret), true);
+        },
+        __wbg___wbindgen_boolean_get_7a12af2b3f899c5a: function(arg0) {
+            const v = arg0;
+            const ret = typeof(v) === 'boolean' ? v : undefined;
+            return isLikeNone(ret) ? 0xFFFFFF : ret ? 1 : 0;
+        },
+        __wbg___wbindgen_is_bigint_60fc0336cb14f5d7: function(arg0) {
+            const ret = typeof(arg0) === 'bigint';
+            return ret;
+        },
+        __wbg___wbindgen_is_null_5160b3e381865372: function(arg0) {
+            const ret = arg0 === null;
+            return ret;
+        },
+        __wbg___wbindgen_is_object_edb6b15aa3afe12e: function(arg0) {
+            const val = arg0;
+            const ret = typeof(val) === 'object' && val !== null;
+            return ret;
+        },
+        __wbg___wbindgen_is_string_c4f7cb494a2a21f1: function(arg0) {
+            const ret = typeof(arg0) === 'string';
+            return ret;
+        },
+        __wbg___wbindgen_is_undefined_8c687d0b90d5b524: function(arg0) {
+            const ret = arg0 === undefined;
+            return ret;
+        },
+        __wbg___wbindgen_jsval_eq_9fdcd3c0a860dd3b: function(arg0, arg1) {
+            const ret = arg0 === arg1;
+            return ret;
+        },
+        __wbg___wbindgen_number_get_1dc732b810cb937c: function(arg0, arg1) {
+            const obj = arg1;
+            const ret = typeof(obj) === 'number' ? obj : undefined;
+            getDataViewMemory0().setFloat64(arg0 + 8 * 1, isLikeNone(ret) ? 0 : ret, true);
+            getDataViewMemory0().setInt32(arg0 + 4 * 0, !isLikeNone(ret), true);
+        },
+        __wbg___wbindgen_shr_56cae1eadababcab: function(arg0, arg1) {
+            const ret = arg0 >> arg1;
+            return ret;
+        },
+        __wbg___wbindgen_string_get_92ab86bb19cbc12f: function(arg0, arg1) {
+            const obj = arg1;
+            const ret = typeof(obj) === 'string' ? obj : undefined;
+            var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+            var len1 = WASM_VECTOR_LEN;
+            getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+            getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+        },
+        __wbg___wbindgen_throw_5d9e815e6fdf150f: function(arg0, arg1) {
+            throw new Error(getStringFromWasm0(arg0, arg1));
+        },
+        __wbg_add_8a5c57dd2c815678: function(arg0, arg1) {
+            const ret = arg0.add(arg1);
+            return ret;
+        },
+        __wbg_charCodeAt_90635349fbda9f5f: function(arg0, arg1) {
+            const ret = arg0.charCodeAt(arg1 >>> 0);
+            return ret;
+        },
+        __wbg_defineProperty_8a37abacf958bd67: function() { return handleError(function (arg0, arg1, arg2) {
+            const ret = Reflect.defineProperty(arg0, arg1, arg2);
+            return ret;
+        }, arguments); },
+        __wbg_delete_3b9bb6fcd83f823a: function(arg0, arg1) {
+            const ret = arg0.delete(arg1);
+            return ret;
+        },
+        __wbg_from_a39669ce566077da: function(arg0) {
+            const ret = Array.from(arg0);
+            return ret;
+        },
+        __wbg_getOwnPropertyDescriptor_5f6b7f5440aa87c2: function() { return handleError(function (arg0, arg1) {
+            const ret = Reflect.getOwnPropertyDescriptor(arg0, arg1);
+            return ret;
+        }, arguments); },
+        __wbg_getPrototypeOf_5c4b9dbbf25290de: function(arg0) {
+            const ret = Object.getPrototypeOf(arg0);
+            return ret;
+        },
+        __wbg_getPrototypeOf_7370acb5ea67b92d: function() { return handleError(function (arg0) {
+            const ret = Reflect.getPrototypeOf(arg0);
+            return ret;
+        }, arguments); },
+        __wbg_get_989d0a1309644f2b: function() { return handleError(function (arg0, arg1) {
+            const ret = Reflect.get(arg0, arg1);
+            return ret;
+        }, arguments); },
+        __wbg_get_unchecked_363572bdd397d473: function(arg0, arg1) {
+            const ret = arg0[arg1 >>> 0];
+            return ret;
+        },
+        __wbg_has_464f8b9416279d65: function() { return handleError(function (arg0, arg1) {
+            const ret = Reflect.has(arg0, arg1);
+            return ret;
+        }, arguments); },
+        __wbg_has_894984e1f2f8792a: function(arg0, arg1) {
+            const ret = arg0.has(arg1);
+            return ret;
+        },
+        __wbg_instanceof_Uint8Array_598adc0fef426aa8: function(arg0) {
+            let result;
+            try {
+                result = arg0 instanceof Uint8Array;
+            } catch (_) {
+                result = false;
+            }
+            const ret = result;
+            return ret;
+        },
+        __wbg_isArray_5674713bb7b79043: function(arg0) {
+            const ret = Array.isArray(arg0);
+            return ret;
+        },
+        __wbg_is_61443cc073056436: function(arg0, arg1) {
+            const ret = Object.is(arg0, arg1);
+            return ret;
+        },
+        __wbg_length_31bdaf014f5fbde2: function(arg0) {
+            const ret = arg0.length;
+            return ret;
+        },
+        __wbg_length_4e1adc0d42e23620: function(arg0) {
+            const ret = arg0.length;
+            return ret;
+        },
+        __wbg_length_d52ee452c5be0c99: function(arg0) {
+            const ret = arg0.length;
+            return ret;
+        },
+        __wbg_new_5d3e59ef841aa96f: function(arg0) {
+            const ret = new Set(arg0);
+            return ret;
+        },
+        __wbg_new_a32a1ab6c6655abe: function(arg0, arg1) {
+            const ret = new Error(getStringFromWasm0(arg0, arg1));
+            return ret;
+        },
+        __wbg_new_bebc3f4757acf305: function() {
+            const ret = new Object();
+            return ret;
+        },
+        __wbg_new_ffa92086ea89f79c: function() {
+            const ret = new Array();
+            return ret;
+        },
+        __wbg_new_from_slice_4ee02165f9de919e: function(arg0, arg1) {
+            const ret = new Uint8Array(getArrayU8FromWasm0(arg0, arg1));
+            return ret;
+        },
+        __wbg_ownKeys_2fa7299880410d24: function() { return handleError(function (arg0) {
+            const ret = Reflect.ownKeys(arg0);
+            return ret;
+        }, arguments); },
+        __wbg_prototypesetcall_ae9f5e7459250748: function(arg0, arg1, arg2) {
+            Uint8Array.prototype.set.call(getArrayU8FromWasm0(arg0, arg1), arg2);
+        },
+        __wbg_push_bfdf956ba476f65b: function(arg0, arg1) {
+            const ret = arg0.push(arg1);
+            return ret;
+        },
+        __wbg_set_a377297433dfea63: function() { return handleError(function (arg0, arg1, arg2) {
+            const ret = Reflect.set(arg0, arg1, arg2);
+            return ret;
+        }, arguments); },
+        __wbindgen_generic_0000000000000001: function(arg0) {
+            // Cast intrinsic for `F64 -> Externref`.
+            const ret = arg0;
+            return ret;
+        },
+        __wbindgen_generic_0000000000000002: function(arg0, arg1) {
+            // Cast intrinsic for `I128 -> Externref`.
+            const ret = (BigInt.asUintN(64, arg0) | (arg1 << BigInt(64)));
+            return ret;
+        },
+        __wbindgen_generic_0000000000000003: function(arg0) {
+            // Cast intrinsic for `I64 -> Externref`.
+            const ret = arg0;
+            return ret;
+        },
+        __wbindgen_generic_0000000000000004: function(arg0, arg1) {
+            // Cast intrinsic for `Ref(String) -> Externref`.
+            const ret = getStringFromWasm0(arg0, arg1);
+            return ret;
+        },
+        __wbindgen_generic_0000000000000005: function(arg0) {
+            // Cast intrinsic for `U64 -> Externref`.
+            const ret = BigInt.asUintN(64, arg0);
+            return ret;
+        },
+        __wbindgen_init_externref_table: function() {
+            const table = wasm.__wbindgen_externrefs;
+            const offset = table.grow(4);
+            table.set(0, undefined);
+            table.set(offset + 0, undefined);
+            table.set(offset + 1, null);
+            table.set(offset + 2, true);
+            table.set(offset + 3, false);
+        },
+    };
+    return {
+        __proto__: null,
+        "./doxsync_bg.js": import0,
+    };
+}
+
+const ConsumerFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_consumer_free(ptr, 1));
+const ProducerFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_producer_free(ptr, 1));
+
+function addToExternrefTable0(obj) {
+    const idx = wasm.__externref_table_alloc();
+    wasm.__wbindgen_externrefs.set(idx, obj);
+    return idx;
+}
+
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
+let cachedDataViewMemory0 = null;
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    return decodeText(ptr >>> 0, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function handleError(f, args) {
+    try {
+        return f.apply(this, args);
+    } catch (e) {
+        const idx = addToExternrefTable0(e);
+        wasm.__wbindgen_exn_store(idx);
+    }
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function takeFromExternrefTable0(idx) {
+    const value = wasm.__wbindgen_externrefs.get(idx);
+    wasm.__externref_table_dealloc(idx);
+    return value;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+let wasmModule, wasmInstance, wasm;
+function __wbg_finalize_init(instance, module) {
+    wasmInstance = instance;
+    wasm = instance.exports;
+    wasmModule = module;
+    cachedDataViewMemory0 = null;
+    cachedUint8ArrayMemory0 = null;
+    wasm.__wbindgen_start();
+    return wasm;
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (!module.ok) {
+            throw new Error(`failed to fetch Wasm: ${module.status} ${module.statusText} fetching '${module.url}'`);
+        }
+
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+            } catch (e) {
+                const validResponse = expectedResponseType(module.type);
+
+                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else { throw e; }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+        } else {
+            return instance;
+        }
+    }
+
+    function expectedResponseType(type) {
+        switch (type) {
+            case 'basic': case 'cors': case 'default': return true;
+        }
+        return false;
+    }
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module !== undefined) {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+    const instance = new WebAssembly.Instance(module, imports);
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module_or_path !== undefined) {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (module_or_path === undefined) {
+        module_or_path = new URL('doxsync_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync, __wbg_init as default };

package/dist/wasm/doxsync_bg.wasm.d.ts

@@ -0,0 +1,18 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const __wbg_consumer_free: (a: number, b: number) => void;
+export const __wbg_producer_free: (a: number, b: number) => void;
+export const consumer_consumeDiff: (a: number, b: any) => [number, number];
+export const consumer_document: (a: number) => [number, number, number];
+export const consumer_new: () => number;
+export const producer_new: (a: any, b: any) => [number, number, number];
+export const producer_produceDiff: (a: number) => [number, number, number];
+export const producer_replace: (a: number, b: any) => [number, number];
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __wbindgen_exn_store: (a: number) => void;
+export const __externref_table_alloc: () => number;
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_start: () => void;

package/examples/browser.css

@@ -0,0 +1,110 @@
+:root {
+  color-scheme: light;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
+  color: #243348;
+  background: #f5f7f9;
+  font-synthesis: none;
+  --border: #dce2e9;
+  --muted: #627085;
+  --blue: #245ccc;
+  --green: #12765b;
+  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+* { box-sizing: border-box; }
+body { margin: 0; }
+main { max-width: 1380px; margin: 0 auto; padding: 38px 32px 24px; }
+h1, h2, h3, p { margin: 0; }
+button, input, select { font: inherit; }
+button, select, input[type="number"] { min-height: 38px; border: 1px solid #cbd3de; border-radius: 6px; background: #fff; color: inherit; }
+button { padding: 8px 13px; cursor: pointer; white-space: nowrap; }
+button:hover:not(:disabled) { background: #edf2f8; border-color: #a6b5ca; }
+button:disabled, input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
+:focus-visible { outline: 3px solid #83adff; outline-offset: 3px; }
+button.primary { background: var(--blue); color: white; border-color: var(--blue); }
+button.primary:hover:not(:disabled) { background: #194bb0; }
+.page-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 27px; }
+.brand { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-bottom: 16px; }
+.brand span { font-weight: 400; color: var(--muted); font-size: 13px; }
+h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.04em; font-weight: 650; }
+.intro { color: var(--muted); font-size: 14px; margin-top: 9px; line-height: 1.6; }
+.sync-state { font-size: 13px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 6px; background: white; white-space: nowrap; }
+.sync-state[data-state="pending"] { color: #875719; background: #fff9ed; border-color: #ecdbb7; }
+.sync-state[data-state="synced"] { color: var(--green); background: #edf8f2; border-color: #c9e5d5; }
+.sync-state[data-state="error"] { color: #a32c30; background: #fff1f1; border-color: #ebc4c5; }
+.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 13px; }
+.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
+.controls label { display: flex; align-items: center; gap: 9px; color: var(--muted); }
+select { padding: 0 28px 0 10px; }
+.delay-input { display: flex; align-items: center; gap: 6px; }
+.delay-input input { width: 92px; padding: 8px 9px; font-family: var(--mono); }
+.delay-input span { font-family: var(--mono); font-size: 12px; }
+.control-note { margin: 11px 0 21px; color: var(--muted); font-size: 12px; line-height: 1.6; }
+.error { padding: 14px; border: 1px solid #ebc4c5; background: #fff1f1; color: #a32c30; margin-bottom: 16px; border-radius: 6px; white-space: pre-wrap; font-size: 13px; }
+.documents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+.document-panel { min-width: 0; background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.panel-header { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
+.panel-header > div { display: flex; align-items: center; gap: 10px; }
+h2 { font-size: 15px; font-weight: 650; }
+.subtle { color: var(--muted); font-size: 12px; font-weight: 400; }
+.role-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
+.consumer-panel .role-dot { background: var(--green); }
+.version { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
+.document-code { margin: 0; padding: 15px 0; height: 410px; overflow: auto; tab-size: 2; font: 12px/1.85 var(--mono); }
+.document-code > code { display: block; min-width: max-content; }
+.code-line { display: block; padding: 0 20px 0 50px; position: relative; min-height: 22px; }
+.code-line::before { content: attr(data-line); color: #8b97a7; position: absolute; left: 0; width: 33px; text-align: right; user-select: none; font-size: 11px; }
+.code-line.changed { background: #fff6db; box-shadow: inset 2px 0 #dbb14e; }
+.token-key { color: #3e526f; }
+.token-string { color: #16734e; }
+.token-number { color: #255fc1; }
+.token-literal { color: #995221; }
+.document-footer { padding: 12px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; min-height: 43px; overflow-wrap: anywhere; }
+.transport { margin-top: 26px; }
+.transport-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
+.transport-header > div { display: flex; align-items: center; gap: 16px; }
+#metrics { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.message-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.message-history { min-width: 0; border-right: 1px solid var(--border); }
+.history-heading { display: flex; justify-content: space-between; padding: 13px 18px; background: #fafbfd; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--border); }
+#message-list { list-style: none; margin: 0; padding: 5px; height: 270px; overflow: auto; }
+.message-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 5px; padding: 10px 11px; min-height: 55px; white-space: normal; }
+.message-row[aria-pressed="true"] { background: #edf3ff; border-color: #c9d9f9; }
+.message-row .message-id { font: 12px var(--mono); color: var(--muted); }
+.message-summary { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.message-size { display: block; font: 11px var(--mono); margin-bottom: 4px; text-align: right; }
+.message-state { display: block; font-size: 11px; color: #875719; text-align: right; }
+.message-row[data-status="delivered"] .message-state { color: var(--green); }
+.message-row[data-status="failed"] .message-state { color: #a32c30; }
+.history-note { padding: 11px 18px; font-size: 11px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--border); }
+.message-detail { padding: 18px 20px; min-width: 0; }
+.detail-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
+h3 { font: 600 14px var(--mono); }
+.follow { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
+.follow input { accent-color: var(--blue); }
+.message-description { margin-top: 10px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.message-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
+.message-facts dt { color: var(--muted); font-size: 11px; margin-bottom: 7px; }
+.message-facts dd { margin: 0; font: 12px var(--mono); }
+.bytes-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
+.message-bytes { margin: 8px 0 0; padding: 13px; background: #f5f7fa; border: 1px solid #e7ebf0; border-radius: 5px; font: 11px/1.9 var(--mono); height: 139px; overflow: auto; color: #425570; }
+.page-footer { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; line-height: 1.6; padding-top: 20px; }
+@media (max-width: 850px) {
+  main { padding: 25px 18px; }
+  .page-header { align-items: flex-start; }
+  .message-workspace { grid-template-columns: 1fr; }
+  .message-history { border-right: 0; border-bottom: 1px solid var(--border); }
+  #message-list { height: 190px; }
+  .controls { gap: 12px 20px; }
+  .buttons { width: 100%; }
+}
+@media (max-width: 600px) {
+  main { padding: 22px 14px; }
+  .page-header { flex-direction: column; gap: 15px; }
+  .documents { grid-template-columns: 1fr; gap: 14px; }
+  .document-code { height: 350px; }
+  .transport-header { align-items: flex-start; flex-direction: column; }
+  .page-footer { flex-direction: column; gap: 5px; }
+  .panel-header { padding: 14px; }
+  .message-detail { padding: 16px 14px; }
+  .message-facts { gap: 8px; }
+}