poe-svelte-ui-lib 1.73.0 → 1.74.0

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/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,107 @@
+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;
+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);
+    let isBound = true;
+    return () => {
+        if (!isBound)
+            return;
+        isBound = false;
+        if (--copyBindings === 0)
+            document.removeEventListener("click", handleCopyClick);
+    };
+}
+/* Две прокручиваемые секции модалки; 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 `<style>[data-modal]:has([data-xpoe-debug-modal])>div:last-child{display:none!important}</style><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.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"