poe-svelte-ui-lib 1.73.0 → 1.74.1

package/dist/protocols/index.d.ts

@@ -8,5 +8,6 @@ export { crc16Kermit, crc8Rohc } from "./crc.js";
 export { BROADCAST_BUS_ID, makeCmd, splitCmd, EXTERNAL_BUS_ID, packetObjectCrc, encodePacket, decodePacket, objectsFor, createPacketStreamParser, type PacketObject, type DecodedPacketObject, type PacketParse, } from "./packet.js";
 export { createPlotGroups, debPlotValues, DEB_PLOT_ARGUMENT, type PlotPoint } from "./plotGroups.js";
 export { encodeXPoeDebugFrame, createXPoeDebugParser, xPoeDebugCmd, xPoeDebugValueFromText, type XPoeDebugItem } from "./xPoeDebug.js";
+export { formatXPoeDebugValue, formatXPoeDebugValueForTable, 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

@@ -16,6 +16,8 @@ export { BROADCAST_BUS_ID, makeCmd, splitCmd, EXTERNAL_BUS_ID, packetObjectCrc,
 export { createPlotGroups, debPlotValues, DEB_PLOT_ARGUMENT } from "./plotGroups.js";
 /* System Console over UART: CBOR [SrcID, HdrArg, Value, FHS, CRC16], plus stream parsing */
 export { encodeXPoeDebugFrame, createXPoeDebugParser, xPoeDebugCmd, xPoeDebugValueFromText } from "./xPoeDebug.js";
+/* Отображение Value xPOE-Debug в таблице/модалке и копирование Value/HEX */
+export { formatXPoeDebugValue, formatXPoeDebugValueForTable, 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";
 /* Словарь заголовков и аргументов Cmd — по умолчанию из мастер-словаря dictionary.yaml библиотеки, разбор файла словаря */

package/dist/protocols/xPoeDebug.js

@@ -19,7 +19,7 @@ const encodeUInt = (input) => {
     if (value <= 0xffffn)
         return [0x19, Number(value >> 8n), Number(value & 0xffn)];
     if (value <= 0xffffffffn)
-        return [0x1a, Number(value >> 24n), Number(value >> 16n & 0xffn), Number(value >> 8n & 0xffn), Number(value & 0xffn)];
+        return [0x1a, Number(value >> 24n), Number((value >> 16n) & 0xffn), Number((value >> 8n) & 0xffn), Number(value & 0xffn)];
     throw new Error("xPOE-Debug integer is out of range");
 };
 export const xPoeDebugCmd = (header, argument) => {
@@ -41,8 +41,13 @@ export const encodeXPoeDebugFrame = (header, argument, value, srcId = 0, freeHea
     const crc = crc16Kermit(0, prefix);
     return new Uint8Array([...prefix, ...encodeUInt(crc)]);
 };
-const textItems = (bytes) => decoder.decode(bytes).split("\n").map((line) => line.trim()).filter((line) => line && ![...line].some((char) => char.charCodeAt(0) < 0x20 && char !== "\t")).map((text) => ({ type: "raw", text }));
-const readUInt = (value) => typeof value === "number" && Number.isInteger(value) && value >= 0 && value <= 0xffff ? value : null;
+const textItems = (bytes) => decoder
+    .decode(bytes)
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line && ![...line].some((char) => char.charCodeAt(0) < 0x20 && char !== "\t"))
+    .map((text) => ({ type: "raw", text }));
+const readUInt = (value) => (typeof value === "number" && Number.isInteger(value) && value >= 0 && value <= 0xffff ? value : null);
 /* Декодирует одну definite array из начала буфера; null означает неполный или невалидный кадр. */
 const frameItem = (buffer) => {
     if (buffer[0] !== ARRAY5)
@@ -63,14 +68,27 @@ const frameItem = (buffer) => {
         const freeHeapValue = fields.decode();
         const crcStart = 1 + fields.offset;
         const crc = readUInt(fields.decode());
-        if (fields.offset !== length - 1 || crc === null || (freeHeapValue !== null && (typeof freeHeapValue !== "number" || !Number.isInteger(freeHeapValue) || freeHeapValue < 0)))
+        if (fields.offset !== length - 1 ||
+            crc === null ||
+            (freeHeapValue !== null && (typeof freeHeapValue !== "number" || !Number.isInteger(freeHeapValue) || freeHeapValue < 0)))
             return { status: "garbage" };
         const valueBytes = buffer.slice(valueStart, valueEnd);
         const { header, argument } = splitCmd(cmd);
         return {
             status: "complete",
             length,
-            item: { type: "frame", srcId, cmd, header: Object.entries(HEADER_CODES).find(([, code]) => code === header)?.[0] ?? String(header), argument: nameByCode(DEFAULT_ARGUMENT_CODES, argument), value: Array.from(valueBytes, (byte) => byte.toString(16).padStart(2, "0").toUpperCase()).join(""), valueBytes, crc: crc.toString(16).toUpperCase().padStart(4, "0"), crcOk: crc16Kermit(0, buffer.subarray(0, crcStart)) === crc, freeHeap: typeof freeHeapValue === "number" ? String(freeHeapValue) : "" },
+            item: {
+                type: "frame",
+                srcId,
+                cmd,
+                header: Object.entries(HEADER_CODES).find(([, code]) => code === header)?.[0] ?? String(header),
+                argument: nameByCode(DEFAULT_ARGUMENT_CODES, argument),
+                value: Array.from(valueBytes, (byte) => byte.toString(16).padStart(2, "0").toUpperCase()).join(""),
+                valueBytes,
+                crc: crc.toString(16).toUpperCase().padStart(4, "0"),
+                crcOk: crc16Kermit(0, buffer.subarray(0, crcStart)) === crc,
+                freeHeap: typeof freeHeapValue === "number" ? String(freeHeapValue) : "",
+            },
         };
     }
     catch (error) {
@@ -124,7 +142,9 @@ export const createXPoeDebugParser = () => {
             }
             return items;
         },
-        reset() { buffer = new Uint8Array(); },
+        reset() {
+            buffer = new Uint8Array();
+        },
     };
 };
 /* Value form input: ready CBOR hex passes through; JSON is converted to CBOR. */

package/dist/protocols/xPoeDebugView.d.ts

@@ -0,0 +1,4 @@
+export declare function formatXPoeDebugValue(rawValue: string): string;
+export declare function formatXPoeDebugValueForTable(rawValue: string, isCbor?: boolean): string;
+export declare function bindXPoeDebugCopyButtons(): () => void;
+export declare function formatXPoeDebugModal(text: string): string;

package/dist/protocols/xPoeDebugView.js

@@ -0,0 +1,125 @@
+import { cborToValue } from "./cbor/value.js";
+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(" ");
+const normalizeCborValue = (value) => {
+    if (value instanceof Uint8Array)
+        return `h'${bytesToHex(value)}'`;
+    if (Array.isArray(value))
+        return value.map(normalizeCborValue);
+    if (value && typeof value === "object")
+        return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, normalizeCborValue(item)]));
+    return value;
+};
+const compactCborValue = (value) => {
+    if (typeof value === "string")
+        return escapeHtml(value);
+    if (value instanceof Uint8Array)
+        return `bytes(${value.length}): ${escapeHtml(bytesToHex(value))}`;
+    return escapeHtml(JSON.stringify(normalizeCborValue(value)) ?? String(value));
+};
+/* Декодирует CBOR Value для таблицы; системный лог имеет вид [уровень, тег, текст]. */
+export function formatXPoeDebugValue(rawValue) {
+    const hex = rawValue.trim().replace(/\s/g, "");
+    if (!hex || hex.length % 2 !== 0 || !/^[0-9A-Fa-f]+$/.test(hex))
+        return escapeHtml(rawValue);
+    try {
+        const value = cborToValue(Uint8Array.from(hex.match(/.{2}/g), (byte) => parseInt(byte, 16)));
+        if (Array.isArray(value) &&
+            value.length === 3 &&
+            typeof value[0] === "number" &&
+            LOG_LEVELS[value[0]] &&
+            typeof value[1] === "string" &&
+            (typeof value[2] === "string" || value[2] instanceof Uint8Array)) {
+            const level = LOG_LEVELS[value[0]];
+            const detail = compactCborValue(value[2]);
+            return `<span class="font-semibold">${level}</span> · ${escapeHtml(value[1])}${detail ? ` · ${detail}` : ""}`;
+        }
+        return compactCborValue(value);
+    }
+    catch {
+        return escapeHtml(rawValue);
+    }
+}
+/* Сохраняет исходный HEX скрытым до раскрытия строки в общей таблице. */
+export function formatXPoeDebugValueForTable(rawValue, isCbor = true) {
+    if (!isCbor)
+        return escapeHtml(rawValue);
+    const formatted = formatXPoeDebugValue(rawValue);
+    return formatted === escapeHtml(rawValue) ? formatted : `${formatted}<span class="hidden">\nHEX\n${escapeHtml(rawValue)}</span>`;
+}
+const COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"/><path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3"/></g></svg>`;
+const COPIED_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+let copyBindings = 0;
+let copyObserver = null;
+const removeXPoeDebugModalFooters = () => {
+    document.querySelectorAll("[data-modal]").forEach((modal) => {
+        if (!modal.querySelector("[data-xpoe-debug-modal]"))
+            return;
+        const footer = modal.lastElementChild;
+        if (!footer || modal.children.length < 3)
+            return;
+        footer.remove();
+    });
+};
+const handleCopyClick = (event) => {
+    if (!(event.target instanceof Element))
+        return;
+    const button = event.target.closest("button[data-xpoe-copy]");
+    if (!button)
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    const value = button.closest("section")?.querySelector("pre")?.textContent ?? "";
+    const label = button.getAttribute("aria-label") ?? "Копировать";
+    navigator.clipboard
+        .writeText(value)
+        .then(() => {
+        button.innerHTML = COPIED_ICON;
+        button.setAttribute("aria-label", "Скопировано");
+        window.setTimeout(() => {
+            button.innerHTML = COPY_ICON;
+            button.setAttribute("aria-label", label);
+        }, 1300);
+    })
+        .catch(() => {
+        button.setAttribute("aria-label", "Не удалось скопировать");
+        window.setTimeout(() => button.setAttribute("aria-label", label), 1300);
+    });
+};
+/* Делегированный обработчик кнопок модального окна; возвращённую функцию вызывают при уничтожении страницы. */
+export function bindXPoeDebugCopyButtons() {
+    if (copyBindings++ === 0) {
+        document.addEventListener("click", handleCopyClick);
+        removeXPoeDebugModalFooters();
+        copyObserver = new MutationObserver(removeXPoeDebugModalFooters);
+        copyObserver.observe(document.documentElement, { childList: true, subtree: true });
+    }
+    let isBound = true;
+    return () => {
+        if (!isBound)
+            return;
+        isBound = false;
+        if (--copyBindings === 0) {
+            document.removeEventListener("click", handleCopyClick);
+            copyObserver?.disconnect();
+            copyObserver = null;
+        }
+    };
+}
+/* Две прокручиваемые секции модалки; 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 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";
+    const buttonStyle = "display:flex;flex:0 0 28px;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:.5rem;background:transparent;color:var(--faint-color);cursor:pointer";
+    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>`;
+}

package/package.json

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