poe-svelte-ui-lib 1.77.0 → 1.79.0

package/README.md

@@ -61,7 +61,7 @@ npm install poe-svelte-ui-lib
 
 **Битовые поля конфигурации** — `bitFieldGet(word, start, end)`/`bitFieldSet(word, start, end, value)`: поле `start..end` 32-битного слова `{GROUP}.Cfg` (Select/Input с `bitMode`) обычной арифметикой, без знаковых 32-битных операций JS — бит 31 разбирается и собирается корректно, результат всегда 0..2³²−1; тест против эталона на BigInt — `tests/bitField.test.mjs`.
 
-**Ядро протоколов** — `poe-svelte-ui-lib/protocols`, описание протокола — [`src/lib/protocols/PROTOCOL.md`](src/lib/protocols/PROTOCOL.md) (без Svelte, работает и под Node без Vite): общий для DevCloud, WebApp и SYP-DevTerminal CBOR-кодек (RFC 8949); `valueToCbor`/`cborToValue` — обычные значения, двоичные данные как `Uint8Array` (WebSocket, хранилище, телеметрия); `jsonToCbor` — JSON-совместимое значение в CBOR, строки base64 под ключами с `BIN` — байты (поля ввода терминала и отладки). Пакет `poe_cbor_pkt` — indefinite-массив объектов `[[TrgBusID, SrcBusID, HAR, Payload, CRC16], …]` (CAN, RS485, UART-консоль), `Payload` — одно CBOR item (сырые данные — `encodePacketBytesPayload`, пустой массив — `null`): `encodePacket`/`decodePacket` (разбор с начала буфера — `complete` с длиной, `incomplete` для потока или `garbage`; объекты одному адресату не склеиваются, порядок сохраняется, неверный CRC — флаг `crcOk`), `BUS_ID_REGEXP`/`parseBusId`/`formatBusId` — поля BusID в HEX и вывод `0x0000`, `makeHar(header, argument, reply = true)`/`splitHar` — `HAR`: заголовок в битах 14-15, аргумент в битах 1-13 (0..8191), флаг ответа в бите 0 (как `HAR`/`HAR_NR` прошивки), `packetObjectCrc`; контрольная сумма `crc16Kermit` — строго побайтная, как в `common.c` прошивок. Байты совпадают с `poe_cbor_pkt.c` прошивки — проверка `npm run TestProtocols` (`tests/protocols.test.mjs`, эталонные пакеты собраны прошивочным кодом). Протокол xPOE-Debug (UART-консоль `system_console`) — тот же пакет `poe_cbor_pkt` вперемешку с текстом загрузчика: `encodeXPoeDebugFrame(header, argument, payload, srcId, trgId, reply)` кодирует запрос, `xPoeDebugHar` — HAR по именам словаря, `createXPoeDebugParser().push(байты)` разбирает поток пакетов (каждая запись — отдельный элемент) и внешний текст (`raw`), логи `OK! DebugLog` — `[уровень, тег, текст, FHS]` (`DEBUG_LOG_ARGUMENT`, FHS — в `freeHeap`). Строка таблицы — `xPoeDebugRow`, колонки — `xPoeDebugTableColumns` (основной вход библиотеки): общие для отладки облака и терминала. CAN/CAN FD через slcan-адаптер (`can_service` прошивки): `canFragments`/`encodeCanPacket` — нарезка пакета на кадры как `CAN_Send` (бит 10 ID — «последний», биты 0..9 — `packetId`, по 8 / 64 байта), `encodeSlcanFrame`, `createCanParser().push(байты)` — разбор кадров slcan со сборкой фрагментов и обрезкой паддинга CAN FD. RS485 — сырой поток пакетов: `createPacketStreamParser().push(байты)` (пауза обрывает недособранное, мусор пропускается по байту). Открытие slcan-адаптера — `slcanOpenCommands(скорость, скоростьДанных?)`. Поле Value команды xPOE-Debug из ввода — `xPoeDebugValueFromText` (hex как есть, JSON → CBOR, пусто — пустой Payload). Графики отладки — пакет `OK! DebugPlot` (`LOG_PLOT` прошивки, `DEBUG_PLOT_ARGUMENT`): `debugPlotValues(value)` — пары `[имя, число]` из HEX CBOR-карты `Payload`, `createPlotGroups().update(пары)` раскладывает по группам (префикс до точки) в порядке карты и возвращает обновлённые группы, `data(группа)` — последние значения. Словарь протокола — `HEADER_CODES`, `DEFAULT_ARGUMENT_CODES` (генерируется из мастер-словаря `src/lib/protocols/dictionary.yaml` — `npm run Dictionary`, перед упаковкой автоматически; сам файл поставляется как `poe-svelte-ui-lib/protocols/dictionary.yaml`, `.framework/Dictionary.yaml` прошивок — его справочные копии, сборка прошивок сверяет с ними `api_har.h`), `parseArgumentDictionary` (строки `- [Строка, Enum, Число]`), `nameByCode`. Своих копий протоколов и словаря в приложениях не держим: терминал и отладка облака читают и пишут порт сырыми байтами, разбор и сборка — здесь.
+**Ядро протоколов** — `poe-svelte-ui-lib/protocols`, описание протокола — [`src/lib/protocols/PROTOCOL.md`](src/lib/protocols/PROTOCOL.md) (без Svelte, работает и под Node без Vite): общий для DevCloud, WebApp и SYP-DevTerminal CBOR-кодек (RFC 8949); `valueToCbor`/`cborToValue` — обычные значения, двоичные данные как `Uint8Array` (WebSocket, хранилище, телеметрия); `jsonToCbor` — JSON-совместимое значение в CBOR, строки base64 под ключами с `BIN` — байты (поля ввода терминала и отладки). Пакет `poe_cbor_pkt` — indefinite-массив объектов `[[TrgBusID, SrcBusID, HAR, Payload, CRC16], …]` (CAN, RS485, UART-консоль), `Payload` — одно CBOR item (сырые данные — `encodePacketBytesPayload`, пустой массив — `null`): `encodePacket`/`decodePacket` (разбор с начала буфера — `complete` с длиной, `incomplete` для потока или `garbage`; объекты одному адресату не склеиваются, порядок сохраняется, неверный CRC — флаг `crcOk`), `BUS_ID_REGEXP`/`parseBusId`/`formatBusId` — поля BusID в HEX и вывод `0x0000`, `makeHar(header, argument, reply = true)`/`splitHar` — `HAR`: заголовок в битах 14-15, аргумент в битах 1-13 (0..8191), флаг ответа в бите 0 (как `HAR`/`HAR_NR` прошивки), `packetObjectCrc`; контрольная сумма `crc16Kermit` — строго побайтная, как в `common.c` прошивок. Байты совпадают с `poe_cbor_pkt.c` прошивки — проверка `npm run TestProtocols` (`tests/protocols.test.mjs`, эталонные пакеты собраны прошивочным кодом). Протокол xPOE-Debug (UART-консоль `system_console`) — тот же пакет `poe_cbor_pkt` вперемешку с текстом загрузчика: `encodeXPoeDebugFrame(header, argument, payload, srcId, trgId, reply)` кодирует запрос, `xPoeDebugHar` — HAR по именам словаря, `createXPoeDebugParser().push(байты)` разбирает поток пакетов (каждая запись — отдельный элемент) и внешний текст (`raw`), логи `OK! DebugLog` — `[уровень, тег, текст, FHS]` (`DEBUG_LOG_ARGUMENT`, FHS — в `freeHeap`). Строка таблицы — `xPoeDebugRow`, колонки — `xPoeDebugTableColumns` (основной вход библиотеки): общие для отладки облака и терминала. Ячейка Value — `formatXPoeDebugValue` (CBOR одной строкой, `DebugLog` — уровень · тег · текст), окно по клику — `formatXPoeDebugModal`: Value в развёрнутом виде (`formatXPoeDebugPretty` — то же чистым текстом; карты и массивы с отступами, `DebugLog` — уровень и тег, ниже текст или дамп и FHS) в цветах палитры темы — ключи `--pink-color`, строки `--purple-color`, числа `--red-color`, логические `--orange-color`, `null` — `--cyan-color`, байты `--green-color`, HEX — байты `Payload` по 16 в строке; числа float32 выводятся кратчайшей записью (`0.12`). CAN/CAN FD через slcan-адаптер (`can_service` прошивки): `canFragments`/`encodeCanPacket` — нарезка пакета на кадры как `CAN_Send` (бит 10 ID — «последний», биты 0..9 — `packetId`, по 8 / 64 байта), `encodeSlcanFrame`, `createCanParser().push(байты)` — разбор кадров slcan со сборкой фрагментов и обрезкой паддинга CAN FD. RS485 — сырой поток пакетов: `createPacketStreamParser().push(байты)` (пауза обрывает недособранное, мусор пропускается по байту). Открытие slcan-адаптера — `slcanOpenCommands(скорость, скоростьДанных?)`. Поле Value команды xPOE-Debug из ввода — `xPoeDebugValueFromText` (hex как есть, JSON → CBOR, пусто — пустой Payload). Графики отладки — пакет `OK! DebugPlot` (`LOG_PLOT` прошивки, `DEBUG_PLOT_ARGUMENT`): `debugPlotValues(value)` — пары `[имя, число]` из HEX CBOR-карты `Payload`, `createPlotGroups().update(пары)` раскладывает по группам (префикс до точки) в порядке карты и возвращает обновлённые группы, `data(группа)` — последние значения. Словарь протокола — `HEADER_CODES`, `DEFAULT_ARGUMENT_CODES` (генерируется из мастер-словаря `src/lib/protocols/dictionary.yaml` — `npm run Dictionary`, перед упаковкой автоматически; сам файл поставляется как `poe-svelte-ui-lib/protocols/dictionary.yaml`, `.framework/Dictionary.yaml` прошивок — его справочные копии, сборка прошивок сверяет с ними `api_har.h`), `parseArgumentDictionary` (строки `- [Строка, Enum, Число]`), `nameByCode`. Своих копий протоколов и словаря в приложениях не держим: терминал и отладка облака читают и пишут порт сырыми байтами, разбор и сборка — здесь.
 
 **Шапка смарт-виджета** (`WidgetHeader`): значок, заголовок и сворачивание слева, «?» в правом краю; правая часть (режимы, «Обновить» и т. п.) стоит в той же строке, а если не помещается — уходит второй строкой под заголовок и там переносится.
 

package/dist/protocols/index.d.ts

@@ -6,6 +6,6 @@ export { crc16Kermit } from "./crc.js";
 export { BUS_ID_REGEXP, parseBusId, formatBusId, makeHar, splitHar, packetObjectCrc, encodePacketBytesPayload, encodePacket, decodePacket, createPacketStreamParser, type PacketObject, type DecodedPacketObject, type PacketParse, } from "./packet.js";
 export { createPlotGroups, debugPlotValues, DEBUG_PLOT_ARGUMENT, type PlotPoint } from "./plotGroups.js";
 export { encodeXPoeDebugFrame, createXPoeDebugParser, xPoeDebugHar, xPoeDebugValueFromText, xPoeDebugRow, DEBUG_LOG_ARGUMENT, type XPoeDebugItem, type XPoeDebugRow, } from "./xPoeDebug.js";
-export { formatXPoeDebugValue, formatXPoeDebugValueForTable, formatXPoeDebugModal, bindXPoeDebugCopyButtons } from "./xPoeDebugView.js";
+export { formatXPoeDebugValue, formatXPoeDebugValueForTable, formatXPoeDebugPretty, formatXPoeDebugModal, bindXPoeDebugCopyButtons } from "./xPoeDebugView.js";
 export { CAN_FINAL_BIT, CAN_PACKET_ID_MASK, canFragments, encodeSlcanFrame, encodeCanPacket, createCanParser, slcanOpenCommands, type CanFrame, type CanMessage, } from "./can.js";
 export { HEADER_CODES, DEFAULT_ARGUMENT_CODES, parseArgumentDictionary, nameByCode } from "./dictionary.js";

package/dist/protocols/index.js

@@ -15,7 +15,7 @@ export { createPlotGroups, debugPlotValues, DEBUG_PLOT_ARGUMENT } from "./plotGr
 /* xPOE-Debug — UART-консоль как шина: пакеты вперемешку с текстом загрузчика, логи OK! DebugLog */
 export { encodeXPoeDebugFrame, createXPoeDebugParser, xPoeDebugHar, xPoeDebugValueFromText, xPoeDebugRow, DEBUG_LOG_ARGUMENT, } from "./xPoeDebug.js";
 /* Отображение Value xPOE-Debug в таблице/модалке и копирование Value/HEX */
-export { formatXPoeDebugValue, formatXPoeDebugValueForTable, formatXPoeDebugModal, bindXPoeDebugCopyButtons } from "./xPoeDebugView.js";
+export { formatXPoeDebugValue, formatXPoeDebugValueForTable, formatXPoeDebugPretty, formatXPoeDebugModal, bindXPoeDebugCopyButtons } from "./xPoeDebugView.js";
 /* CAN/CAN FD через slcan-адаптер: нарезка пакета на кадры как в can_service прошивки, кадры slcan, потоковый разбор со сборкой фрагментов */
 export { CAN_FINAL_BIT, CAN_PACKET_ID_MASK, canFragments, encodeSlcanFrame, encodeCanPacket, createCanParser, slcanOpenCommands, } from "./can.js";
 /* Словарь заголовков и аргументов HAR — по умолчанию из мастер-словаря dictionary.yaml библиотеки, разбор файла словаря */

package/dist/protocols/xPoeDebugView.d.ts

@@ -1,3 +1,4 @@
+export declare function formatXPoeDebugPretty(hex: string): string | null;
 export declare function formatXPoeDebugValue(rawValue: string): string;
 export declare function formatXPoeDebugValueForTable(rawValue: string, isCbor?: boolean): string;
 export declare function bindXPoeDebugCopyButtons(): () => void;

package/dist/protocols/xPoeDebugView.js

@@ -3,7 +3,20 @@ const LOG_LEVELS = { 1: "🔴", 2: "🟡", 3: "🟢", 4: "🔵" };
 const HTML_ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
 const escapeHtml = (value) => value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
 const bytesToHex = (bytes) => Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0").toUpperCase()).join(" ");
+/* float32 с провода — кратчайшая запись, дающая то же float32 (0.12, а не 0.12000000476837158); double и целые — как есть */
+const shortNumber = (value) => {
+    if (Number.isInteger(value) || !Number.isFinite(value) || Math.fround(value) !== value)
+        return value;
+    for (let digits = 1; digits <= 9; digits++) {
+        const short = Number(value.toPrecision(digits));
+        if (Math.fround(short) === value)
+            return short;
+    }
+    return value;
+};
 const normalizeCborValue = (value) => {
+    if (typeof value === "number")
+        return shortNumber(value);
     if (value instanceof Uint8Array)
         return `h'${bytesToHex(value)}'`;
     if (Array.isArray(value))
@@ -19,6 +32,91 @@ const compactCborValue = (value) => {
         return `bytes(${value.length}): ${escapeHtml(bytesToHex(value))}`;
     return escapeHtml(JSON.stringify(normalizeCborValue(value)) ?? String(value));
 };
+const hexToBytes = (hex) => {
+    const clean = hex.replace(/\s/g, "");
+    if (!clean || clean.length % 2 !== 0 || !/^[0-9A-Fa-f]+$/.test(clean))
+        return null;
+    return Uint8Array.from(clean.match(/.{2}/g), (byte) => parseInt(byte, 16));
+};
+const isDebugLog = (value) => Array.isArray(value) &&
+    value.length === 4 &&
+    typeof value[0] === "number" &&
+    !!LOG_LEVELS[value[0]] &&
+    typeof value[1] === "string" &&
+    (typeof value[2] === "string" || value[2] instanceof Uint8Array);
+/* Байты строками по 16 — для дампов DebugLog и раздела HEX */
+const hexRows = (bytes) => (bytesToHex(bytes).match(/.{1,48}/g) ?? []).map((row) => row.trim()).join("\n");
+const PRETTY_COLORS = {
+    key: "--pink-color",
+    string: "--purple-color",
+    number: "--red-color",
+    boolean: "--orange-color",
+    null: "--cyan-color",
+    bytes: "--green-color",
+};
+const plain = (_kind, text) => text;
+const colored = (kind, text) => `<span style="color:var(${PRETTY_COLORS[kind]})">${escapeHtml(text)}</span>`;
+/* Карты и массивы с отступом 2, по одному элементу на строку; скобки и запятые — без цвета */
+const prettyValue = (value, paint, indent = "") => {
+    if (value === null || value === undefined)
+        return paint("null", "null");
+    if (typeof value === "string")
+        return paint("string", JSON.stringify(value));
+    if (typeof value === "number")
+        return paint("number", String(shortNumber(value)));
+    if (typeof value === "bigint")
+        return paint("number", String(value));
+    if (typeof value === "boolean")
+        return paint("boolean", String(value));
+    if (value instanceof Uint8Array)
+        return paint("bytes", `h'${bytesToHex(value)}'`);
+    const inner = `${indent}  `;
+    if (Array.isArray(value)) {
+        if (!value.length)
+            return "[]";
+        return `[\n${value.map((item) => inner + prettyValue(item, paint, inner)).join(",\n")}\n${indent}]`;
+    }
+    const entries = value instanceof Map ? [...value.entries()] : Object.entries(value);
+    if (!entries.length)
+        return "{}";
+    return `{\n${entries.map(([key, item]) => `${inner}${paint("key", `${JSON.stringify(String(key))}:`)} ${prettyValue(item, paint, inner)}`).join(",\n")}\n${indent}}`;
+};
+/* DebugLog — уровень и тег, ниже текст или дамп по 16 байт и FHS; остальное — prettyValue */
+const prettyPayload = (value, paint, html) => {
+    const raw = (text) => (html ? escapeHtml(text) : text);
+    if (isDebugLog(value)) {
+        const [level, tag, detail, fhs] = value;
+        const body = detail instanceof Uint8Array ? `${raw(`bytes(${detail.length}):`)}\n${paint("bytes", hexRows(detail))}` : raw(detail);
+        return [`${LOG_LEVELS[level]} ${paint("key", tag)}`, body, typeof fhs === "number" ? `FHS: ${paint("number", String(fhs))}` : ""].filter(Boolean).join("\n");
+    }
+    if (typeof value === "string")
+        return raw(value);
+    return prettyValue(value, paint);
+};
+/* Payload в развёрнутом виде, чистый текст: карты и массивы с отступами, DebugLog — уровень и тег, ниже текст или дамп и FHS; не CBOR — null */
+export function formatXPoeDebugPretty(hex) {
+    const bytes = hexToBytes(hex);
+    if (!bytes)
+        return null;
+    try {
+        return prettyPayload(cborToValue(bytes), plain, false);
+    }
+    catch {
+        return null;
+    }
+}
+/* То же в HTML с цветами палитры темы — для модалки */
+const formatXPoeDebugPrettyHtml = (hex) => {
+    const bytes = hexToBytes(hex);
+    if (!bytes)
+        return null;
+    try {
+        return prettyPayload(cborToValue(bytes), colored, true);
+    }
+    catch {
+        return null;
+    }
+};
 /* Payload в таблицу: CBOR как JSON, лог DebugLog [уровень, тег, текст|байты, FHS] — уровень · тег · текст */
 export function formatXPoeDebugValue(rawValue) {
     const hex = rawValue.trim().replace(/\s/g, "");
@@ -26,12 +124,7 @@ export function formatXPoeDebugValue(rawValue) {
         return escapeHtml(rawValue);
     try {
         const value = cborToValue(Uint8Array.from(hex.match(/.{2}/g), (byte) => parseInt(byte, 16)));
-        if (Array.isArray(value) &&
-            value.length === 4 &&
-            typeof value[0] === "number" &&
-            LOG_LEVELS[value[0]] &&
-            typeof value[1] === "string" &&
-            (typeof value[2] === "string" || value[2] instanceof Uint8Array)) {
+        if (isDebugLog(value)) {
             const level = LOG_LEVELS[value[0]];
             const detail = compactCborValue(value[2]);
             return `<span class="font-semibold">${level}</span> · ${escapeHtml(value[1])}${detail ? ` · ${detail}` : ""}`;
@@ -108,12 +201,15 @@ export function bindXPoeDebugCopyButtons() {
         }
     };
 }
-/* Две прокручиваемые секции модалки; HEX-раздел появляется, если форматтер таблицы добавил исходные байты. */
+/* Две прокручиваемые секции модалки: Value — развёрнутый вид Payload в цветах палитры темы, HEX — байты Payload по 16 в строке; HEX-раздел есть, если форматтер таблицы добавил исходные байты */
 export function formatXPoeDebugModal(text) {
     const separator = "\nHEX\n";
     const hexIndex = text.lastIndexOf(separator);
-    const decoded = hexIndex < 0 ? text : text.slice(0, hexIndex);
     const hex = hexIndex < 0 ? "" : text.slice(hexIndex + separator.length);
+    const pretty = hex ? formatXPoeDebugPrettyHtml(hex) : null;
+    const bytes = pretty === null ? null : hexToBytes(hex);
+    const decoded = pretty === null ? (hexIndex < 0 ? text : text.slice(0, hexIndex)) : pretty;
+    const hexText = bytes ? hexRows(bytes) : hex;
     const modalStyle = "display:flex;flex-direction:column;gap:.75rem;max-height:80vh;min-width:0;overflow-y:auto;overflow-x:hidden";
     const sectionStyle = "min-width:0;padding:.25rem 0 .75rem";
     const headingStyle = "display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .5rem;font-weight:600";
@@ -121,5 +217,5 @@ export function formatXPoeDebugModal(text) {
     const buttonClass = "flex size-7 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-(--faint-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color)";
     const textStyle = "display:block;min-width:0;max-width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:inherit";
     const pane = (title, target, value) => `<section style="${sectionStyle}"><div style="${headingStyle}"><span>${title}</span><button type="button" class="${buttonClass}" data-xpoe-copy="${target}" aria-label="Копировать ${title}" style="${buttonStyle}">${COPY_ICON}</button></div><pre style="${textStyle}">${value}</pre></section>`;
-    return `<div data-xpoe-debug-modal style="${modalStyle}">${pane("Value", "value", decoded)}${hexIndex < 0 ? "" : pane("HEX", "hex", hex)}</div>`;
+    return `<div data-xpoe-debug-modal style="${modalStyle}">${pane("Value", "value", decoded)}${hexIndex < 0 ? "" : pane("HEX", "hex", hexText)}</div>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.77.0",
+  "version": "1.79.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"