@midscene/visualizer 0.0.1

package/dist/es/utils.js

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import dayjs from "dayjs";
+function insightDumpToExecutionDump(insightDump) {
+  const insightToTask = (insightDump2) => {
+    var _a, _b;
+    const task = {
+      type: "Insight",
+      subType: insightDump2.type === "locate" ? "Locate" : "Query",
+      status: insightDump2.error ? "fail" : "success",
+      param: __spreadProps(__spreadValues(__spreadValues({}, insightDump2.userQuery.element ? { query: insightDump2.userQuery } : {}), insightDump2.userQuery.dataDemand ? { dataDemand: insightDump2.userQuery.dataDemand } : {}), {
+        insight: {}
+      }),
+      log: {
+        dump: insightDump2
+      },
+      timing: {
+        end: insightDump2.logTime,
+        cost: (_a = insightDump2.taskInfo) == null ? void 0 : _a.durationMs,
+        start: insightDump2.logTime - ((_b = insightDump2.taskInfo) == null ? void 0 : _b.durationMs)
+      },
+      executor: () => {
+      }
+    };
+    return task;
+  };
+  if (!Array.isArray(insightDump)) {
+    const result = {
+      sdkVersion: insightDump.sdkVersion,
+      logTime: insightDump.logTime,
+      name: "Insight",
+      tasks: [insightToTask(insightDump)]
+    };
+    return result;
+  } else {
+    const result = {
+      sdkVersion: insightDump[0].sdkVersion,
+      logTime: insightDump[0].logTime,
+      name: "Insight",
+      tasks: insightDump.map(insightToTask)
+    };
+    return result;
+  }
+}
+function timeStr(timestamp) {
+  return timestamp ? dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss") : "-";
+}
+function typeStr(task) {
+  return task.subType ? `${task.type} / ${task.subType || ""}` : task.type;
+}
+function filterBase64Value(input) {
+  return input.replace(/data:image\/[^"]+"/g, 'data:image..."');
+}
+export {
+  filterBase64Value,
+  insightDumpToExecutionDump,
+  timeStr,
+  typeStr
+};

package/dist/lib/assets/logo-plain.16842bbc.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="141.563mm" height="53.8692mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16897.65 6430.11"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .str0 {stroke:#E62129;stroke-width:23.87;stroke-miterlimit:22.9256}
+    .str1 {stroke:#06B1AB;stroke-width:9.1;stroke-miterlimit:22.9256}
+    .fil0 {fill:none}
+    .fil8 {fill:#FEFEFE}
+    .fil1 {fill:#332C2B}
+    .fil12 {fill:#F7B873}
+    .fil5 {fill:#F3A04E}
+    .fil9 {fill:#52C2F1}
+    .fil13 {fill:#06B1AB}
+    .fil2 {fill:#F63D55}
+    .fil11 {fill:#F9483E}
+    .fil6 {fill:url(#id0)}
+    .fil4 {fill:url(#id1)}
+    .fil10 {fill:url(#id2)}
+    .fil3 {fill:url(#id3)}
+    .fil7 {fill:url(#id4)}
+   ]]>
+  </style>
+  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="11103.21" y1="5027.34" x2="10930.41" y2="1211.98">
+   <stop offset="0" style="stop-opacity:1; stop-color:#0A77D4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#00B1E0"/>
+  </linearGradient>
+  <linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0" x1="11407.32" y1="5023.83" x2="11286.4" y2="1215.5">
+  </linearGradient>
+  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="6311.87" y1="4699.25" x2="3547.5" y2="1677.39">
+   <stop offset="0" style="stop-opacity:1; stop-color:#F65926"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#F0AB1F"/>
+  </linearGradient>
+  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="3105.35" y1="5075.61" x2="2612.67" y2="1311.04">
+   <stop offset="0" style="stop-opacity:1; stop-color:#E52652"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#FF4956"/>
+  </linearGradient>
+  <linearGradient id="id4" gradientUnits="userSpaceOnUse" x1="14599.77" y1="4808.34" x2="12000" y2="1573.25">
+   <stop offset="0" style="stop-opacity:1; stop-color:#02C0A7"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#02E097"/>
+  </linearGradient>
+ </defs>
+ <g id="图层_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1978240863120">
+   <path class="fil0 str0" d="M2921.92 814.37l2943.46 0c660.05,0 1200.11,540.04 1200.11,1200.11l0 669.56c-180.23,1562.84 -842.69,2686.31 -2539.2,2867.65l-656.9 0c-1403.42,-112.59 -2125.37,-923.3 -2147.58,-2450.77l0 -1086.44c0,-660.07 540.04,-1200.11 1200.11,-1200.11z"/>
+   <path class="fil1" d="M908.05 649.1c172.38,0 312.1,139.73 312.1,312.1 0,172.38 -139.73,312.1 -312.1,312.1 -172.38,0 -312.1,-139.73 -312.1,-312.1 0,-172.38 139.73,-312.1 312.1,-312.1zm15081.56 0c-172.38,0 -312.1,139.73 -312.1,312.1 0,172.38 139.73,312.1 312.1,312.1 172.38,0 312.1,-139.73 312.1,-312.1 0,-172.38 -139.73,-312.1 -312.1,-312.1zm315.15 -649.07l-4739.56 0c-332.34,-0.73 -635.61,30.83 -892.17,114.33 -1164.61,314.95 -1684.86,539.69 -2204.5,542.55 -529.24,2.92 -1057.71,-221.77 -2243.89,-542.55 -256.56,-83.5 -559.83,-115.06 -892.17,-114.33l-4739.56 0c-326.11,0 -592.9,266.79 -592.9,592.9l0 727.65c0,326.11 262.25,574.15 588.16,562.9 244.44,-8.44 379.43,161.6 368.56,407.41l0 1401.3c844.04,3884.05 6459.63,3705.54 6872.25,-983.68 37.55,-479.97 225.37,-745.7 619.85,-795.03 394.48,49.33 582.3,315.06 619.85,795.03 221.1,2512.67 1570.99,3564.6 3624.76,3705.62 1575.25,-121.99 2822.57,-766.6 3247.49,-2721.94l0 -1401.3c-10.86,-245.81 124.13,-415.84 368.56,-407.41 325.91,11.24 588.16,-236.8 588.16,-562.9l0 -727.65c0,-326.11 -266.79,-592.9 -592.9,-592.9z"/>
+   <path class="fil2" d="M4404.53 5551.69l138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0 -682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0z"/>
+   <path class="fil3" d="M2884.03 3833.6c-562.03,-552.91 337.59,-1229.84 756.52,-784.77l-668.1 -718.53c-248.45,-631.92 -96.85,-1153.5 631.64,-1515.94l-682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0c447.09,-261.52 828.85,-610.16 1124.32,-1073.8 -192.91,108.48 -371.35,123.1 -530.58,12.63 -269.77,225.61 -533.22,868.1 -809.3,676.82l-1287.75 -1333.74z"/>
+   <path class="fil4" d="M12967.79 5585.01c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0 -669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l645.03 0z"/>
+   <circle class="fil5" cx="3266.42" cy="4767.17" r="119.53"/>
+   <path class="fil6 str1" d="M11243.45 3832.57c-587.85,-563.96 251.45,-1254.43 691.78,-800.45l-702.77 -732.9c-285.07,-644.56 -170.14,-1176.57 521.59,-1546.26l-669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l508.57 0c422,-266.75 774.17,-622.36 1034.13,-1095.27 -182.37,110.65 -356.62,125.56 -520.16,12.88 -250.21,230.12 -467.1,885.46 -750.63,690.36l-1351.23 -1360.42z"/>
+   <path class="fil7" d="M11754.05 752.96c-691.73,369.69 -806.66,901.7 -521.59,1546.26l702.77 732.9c-440.33,-453.98 -1279.63,236.49 -691.78,800.45 1571.66,1582.35 780.78,887.85 1587.88,1752.45l136.46 0c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0z"/>
+   <circle class="fil8" cx="13725.89" cy="2247.09" r="867.65"/>
+   <circle class="fil9" cx="11745.99" cy="4944.33" r="119.53"/>
+   <path class="fil10" d="M3604.1 814.37c-728.5,362.44 -880.09,884.02 -631.64,1515.94l668.1 718.53c-418.94,-445.08 -1318.56,231.85 -756.52,784.77l1503.3 1718.08 138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0z"/>
+   <path class="fil11" d="M3602.42 3012.57l-2.01 -1.79 -1.22 -1c-433.3,-363.07 -1259.33,288.49 -715.16,823.82l1503.3 1718.08 138.96 0c366.16,-39.14 684.05,-122.25 959.42,-244.11l-1883.3 -2295z"/>
+   <circle class="fil8" cx="5652.09" cy="2247.09" r="867.65"/>
+   <circle class="fil12" cx="5669.32" cy="4261.82" r="86.65"/>
+   <circle class="fil8" cx="3775.08" cy="4120.55" r="174.77"/>
+   <path class="fil13" d="M11770.33 2919.17l123.64 74.69c7.2,5.99 14.32,12.27 21.35,18.8l1988.29 2318.88c-264.55,126.79 -574.49,213.07 -935.82,253.47l-136.46 0c-807.1,-864.6 -16.22,-170.1 -1587.88,-1752.45 -520.29,-499.15 77.34,-1097.23 526.88,-913.39z"/>
+   <circle class="fil8" cx="12254.65" cy="4297.71" r="174.77"/>
+  </g>
+ </g>
+</svg>

package/dist/lib/assets/logo-plain2.16842bbc.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="141.563mm" height="53.8692mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16897.65 6430.11"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .str0 {stroke:#E62129;stroke-width:23.87;stroke-miterlimit:22.9256}
+    .str1 {stroke:#06B1AB;stroke-width:9.1;stroke-miterlimit:22.9256}
+    .fil0 {fill:none}
+    .fil8 {fill:#FEFEFE}
+    .fil1 {fill:#332C2B}
+    .fil12 {fill:#F7B873}
+    .fil5 {fill:#F3A04E}
+    .fil9 {fill:#52C2F1}
+    .fil13 {fill:#06B1AB}
+    .fil2 {fill:#F63D55}
+    .fil11 {fill:#F9483E}
+    .fil6 {fill:url(#id0)}
+    .fil4 {fill:url(#id1)}
+    .fil10 {fill:url(#id2)}
+    .fil3 {fill:url(#id3)}
+    .fil7 {fill:url(#id4)}
+   ]]>
+  </style>
+  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="11103.21" y1="5027.34" x2="10930.41" y2="1211.98">
+   <stop offset="0" style="stop-opacity:1; stop-color:#0A77D4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#00B1E0"/>
+  </linearGradient>
+  <linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0" x1="11407.32" y1="5023.83" x2="11286.4" y2="1215.5">
+  </linearGradient>
+  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="6311.87" y1="4699.25" x2="3547.5" y2="1677.39">
+   <stop offset="0" style="stop-opacity:1; stop-color:#F65926"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#F0AB1F"/>
+  </linearGradient>
+  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="3105.35" y1="5075.61" x2="2612.67" y2="1311.04">
+   <stop offset="0" style="stop-opacity:1; stop-color:#E52652"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#FF4956"/>
+  </linearGradient>
+  <linearGradient id="id4" gradientUnits="userSpaceOnUse" x1="14599.77" y1="4808.34" x2="12000" y2="1573.25">
+   <stop offset="0" style="stop-opacity:1; stop-color:#02C0A7"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#02E097"/>
+  </linearGradient>
+ </defs>
+ <g id="图层_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1978240863120">
+   <path class="fil0 str0" d="M2921.92 814.37l2943.46 0c660.05,0 1200.11,540.04 1200.11,1200.11l0 669.56c-180.23,1562.84 -842.69,2686.31 -2539.2,2867.65l-656.9 0c-1403.42,-112.59 -2125.37,-923.3 -2147.58,-2450.77l0 -1086.44c0,-660.07 540.04,-1200.11 1200.11,-1200.11z"/>
+   <path class="fil1" d="M908.05 649.1c172.38,0 312.1,139.73 312.1,312.1 0,172.38 -139.73,312.1 -312.1,312.1 -172.38,0 -312.1,-139.73 -312.1,-312.1 0,-172.38 139.73,-312.1 312.1,-312.1zm15081.56 0c-172.38,0 -312.1,139.73 -312.1,312.1 0,172.38 139.73,312.1 312.1,312.1 172.38,0 312.1,-139.73 312.1,-312.1 0,-172.38 -139.73,-312.1 -312.1,-312.1zm315.15 -649.07l-4739.56 0c-332.34,-0.73 -635.61,30.83 -892.17,114.33 -1164.61,314.95 -1684.86,539.69 -2204.5,542.55 -529.24,2.92 -1057.71,-221.77 -2243.89,-542.55 -256.56,-83.5 -559.83,-115.06 -892.17,-114.33l-4739.56 0c-326.11,0 -592.9,266.79 -592.9,592.9l0 727.65c0,326.11 262.25,574.15 588.16,562.9 244.44,-8.44 379.43,161.6 368.56,407.41l0 1401.3c844.04,3884.05 6459.63,3705.54 6872.25,-983.68 37.55,-479.97 225.37,-745.7 619.85,-795.03 394.48,49.33 582.3,315.06 619.85,795.03 221.1,2512.67 1570.99,3564.6 3624.76,3705.62 1575.25,-121.99 2822.57,-766.6 3247.49,-2721.94l0 -1401.3c-10.86,-245.81 124.13,-415.84 368.56,-407.41 325.91,11.24 588.16,-236.8 588.16,-562.9l0 -727.65c0,-326.11 -266.79,-592.9 -592.9,-592.9z"/>
+   <path class="fil2" d="M4404.53 5551.69l138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0 -682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0z"/>
+   <path class="fil3" d="M2884.03 3833.6c-562.03,-552.91 337.59,-1229.84 756.52,-784.77l-668.1 -718.53c-248.45,-631.92 -96.85,-1153.5 631.64,-1515.94l-682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0c447.09,-261.52 828.85,-610.16 1124.32,-1073.8 -192.91,108.48 -371.35,123.1 -530.58,12.63 -269.77,225.61 -533.22,868.1 -809.3,676.82l-1287.75 -1333.74z"/>
+   <path class="fil4" d="M12967.79 5585.01c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0 -669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l645.03 0z"/>
+   <circle class="fil5" cx="3266.42" cy="4767.17" r="119.53"/>
+   <path class="fil6 str1" d="M11243.45 3832.57c-587.85,-563.96 251.45,-1254.43 691.78,-800.45l-702.77 -732.9c-285.07,-644.56 -170.14,-1176.57 521.59,-1546.26l-669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l508.57 0c422,-266.75 774.17,-622.36 1034.13,-1095.27 -182.37,110.65 -356.62,125.56 -520.16,12.88 -250.21,230.12 -467.1,885.46 -750.63,690.36l-1351.23 -1360.42z"/>
+   <path class="fil7" d="M11754.05 752.96c-691.73,369.69 -806.66,901.7 -521.59,1546.26l702.77 732.9c-440.33,-453.98 -1279.63,236.49 -691.78,800.45 1571.66,1582.35 780.78,887.85 1587.88,1752.45l136.46 0c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0z"/>
+   <circle class="fil8" cx="13725.89" cy="2247.09" r="867.65"/>
+   <circle class="fil9" cx="11745.99" cy="4944.33" r="119.53"/>
+   <path class="fil10" d="M3604.1 814.37c-728.5,362.44 -880.09,884.02 -631.64,1515.94l668.1 718.53c-418.94,-445.08 -1318.56,231.85 -756.52,784.77l1503.3 1718.08 138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0z"/>
+   <path class="fil11" d="M3602.42 3012.57l-2.01 -1.79 -1.22 -1c-433.3,-363.07 -1259.33,288.49 -715.16,823.82l1503.3 1718.08 138.96 0c366.16,-39.14 684.05,-122.25 959.42,-244.11l-1883.3 -2295z"/>
+   <circle class="fil8" cx="5652.09" cy="2247.09" r="867.65"/>
+   <circle class="fil12" cx="5669.32" cy="4261.82" r="86.65"/>
+   <circle class="fil8" cx="3775.08" cy="4120.55" r="174.77"/>
+   <path class="fil13" d="M11770.33 2919.17l123.64 74.69c7.2,5.99 14.32,12.27 21.35,18.8l1988.29 2318.88c-264.55,126.79 -574.49,213.07 -935.82,253.47l-136.46 0c-807.1,-864.6 -16.22,-170.1 -1587.88,-1752.45 -520.29,-499.15 77.34,-1097.23 526.88,-913.39z"/>
+   <circle class="fil8" cx="12254.65" cy="4297.71" r="174.77"/>
+  </g>
+ </g>
+</svg>

package/dist/lib/component/blackboard.css

@@ -0,0 +1,25 @@
+.blackboard .footer {
+  color: #aaa;
+}
+.blackboard ul {
+  padding-left: 0px;
+}
+.blackboard li {
+  list-style: none;
+}
+.blackboard .bottom-tip {
+  height: 30px;
+}
+.blackboard .bottom-tip-item {
+  max-width: 500px;
+  color: #AAA;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
+.blackboard-filter {
+  margin: 10px 0;
+}
+.blackboard-main-content canvas {
+  width: 100%;
+  border: 1px solid #888;
+}

package/dist/lib/component/blackboard.js

@@ -0,0 +1,286 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var blackboard_exports = {};
+__export(blackboard_exports, {
+  default: () => blackboard_default
+});
+module.exports = __toCommonJS(blackboard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var PIXI = __toESM(require("pixi.js"));
+var import_react = require("react");
+var import_antd = require("antd");
+var import_color = require("./color");
+var import_blackboard = require("./blackboard.css");
+var import_store = require("./store");
+const itemFillAlpha = 0.3;
+const bgOnAlpha = 0.8;
+const bgOffAlpha = 0.3;
+const noop = () => {
+};
+const BlackBoard = () => {
+  const dump = (0, import_store.useInsightDump)((store) => store.data);
+  const setHighlightSectionNames = (0, import_store.useInsightDump)((store) => store.setHighlightSectionNames);
+  const setHighlightElements = (0, import_store.useInsightDump)((store) => store.setHighlightElements);
+  const highlightSectionNames = (0, import_store.useInsightDump)((store) => store.highlightSectionNames);
+  const highlightElements = (0, import_store.useInsightDump)((store) => store.highlightElements);
+  const { context, matchedSection: sections, matchedElement: elements } = dump;
+  const { size, screenshotBase64 } = context;
+  const screenWidth = size.width;
+  const screenHeight = size.height;
+  const domRef = (0, import_react.useRef)(null);
+  const app = (0, import_react.useMemo)(() => new PIXI.Application(), []);
+  const [appInitialed, setAppInitialed] = (0, import_react.useState)(false);
+  const itemMarkContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
+  const textContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
+  const pixiBgRef = (0, import_react.useRef)();
+  const { bgVisible, setBgVisible, textsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
+  (0, import_react.useEffect)(() => {
+    Promise.resolve(
+      (() => __async(void 0, null, function* () {
+        if (!domRef.current || !screenWidth) {
+          return;
+        }
+        yield app.init({ width: screenWidth, height: screenHeight, background: 16777215 });
+        const canvasEl = domRef.current;
+        domRef.current.appendChild(app.canvas);
+        const { clientWidth } = domRef.current.parentElement;
+        const targetHeight = window.innerHeight * 0.7;
+        const viewportRatio = clientWidth / targetHeight;
+        if (screenWidth / screenHeight <= viewportRatio) {
+          const ratio = targetHeight / screenHeight;
+          canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
+          canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
+        }
+        app.stage.addChild(itemMarkContainer);
+        app.stage.addChild(textContainer);
+        setAppInitialed(true);
+      }))()
+    );
+    return () => {
+      console.log("will destroy");
+      app == null ? void 0 : app.destroy(true, { children: true, texture: true });
+    };
+  }, [app, screenWidth, screenHeight]);
+  (0, import_react.useEffect)(() => {
+    if (!appInitialed) {
+      return;
+    }
+    const img = new Image();
+    img.src = screenshotBase64;
+    img.onload = () => {
+      const screenshotTexture = PIXI.Texture.from(img);
+      const screenshotSprite = new PIXI.Sprite(screenshotTexture);
+      screenshotSprite.x = 0;
+      screenshotSprite.y = 0;
+      screenshotSprite.width = screenWidth;
+      screenshotSprite.height = screenHeight;
+      app.stage.addChildAt(screenshotSprite, 0);
+      pixiBgRef.current = screenshotSprite;
+      screenshotSprite.alpha = bgVisible ? bgOnAlpha : bgOffAlpha;
+    };
+  }, [app.stage, appInitialed]);
+  const rectMarkForItem = (rect, name, themeColor, alpha, onPointOver, onPointerOut) => {
+    const { left, top, width, height } = rect;
+    const graphics = new PIXI.Graphics();
+    graphics.beginFill(themeColor, alpha);
+    graphics.lineStyle(1, themeColor, 1);
+    graphics.drawRect(left, top, width, height);
+    graphics.endFill();
+    graphics.interactive = true;
+    graphics.on("pointerover", onPointOver);
+    graphics.on("pointerout", onPointerOut);
+    const nameFontSize = 18;
+    const texts = new PIXI.Text(name, {
+      fontSize: nameFontSize,
+      fill: 0
+    });
+    texts.x = left;
+    texts.y = Math.max(top - (nameFontSize + 4), 0);
+    return [graphics, texts];
+  };
+  const { highlightSectionRects, highlightElementRects } = (0, import_react.useMemo)(() => {
+    const highlightSectionRects2 = [];
+    const highlightElementRects2 = [];
+    itemMarkContainer.removeChildren();
+    textContainer.removeChildren();
+    sections.forEach((section) => {
+      const ifHighlight = highlightSectionNames.includes(section.name);
+      if (ifHighlight) {
+        highlightSectionRects2.push(section.rect);
+      }
+      const [graphics, texts] = rectMarkForItem(
+        section.rect,
+        section.name,
+        ifHighlight ? (0, import_color.highlightColorForType)("section") : (0, import_color.colorForName)("section", section.name),
+        ifHighlight ? 1 : itemFillAlpha,
+        () => {
+          setHighlightSectionNames([section.name]);
+        },
+        () => {
+          setHighlightSectionNames([]);
+        }
+      );
+      itemMarkContainer.addChild(graphics);
+      textContainer.addChild(texts);
+    });
+    highlightElements.forEach((element) => {
+      const { rect } = element;
+      highlightElementRects2.push(rect);
+      if (elements.includes(element)) {
+        return;
+      }
+      const [graphics, texts] = rectMarkForItem(rect, "", (0, import_color.highlightColorForType)("element"), 1, noop, noop);
+      itemMarkContainer.addChild(graphics);
+      textContainer.addChild(texts);
+    });
+    elements.forEach((element) => {
+      const { rect, content } = element;
+      const ifHighlight = highlightElements.includes(element);
+      const [graphics, texts] = rectMarkForItem(
+        rect,
+        content,
+        ifHighlight ? (0, import_color.highlightColorForType)("element") : (0, import_color.colorForName)("element", content),
+        ifHighlight ? 1 : itemFillAlpha,
+        () => {
+          setHighlightElements([element]);
+        },
+        () => {
+          setHighlightElements([]);
+        }
+      );
+      itemMarkContainer.addChild(graphics);
+      textContainer.addChild(texts);
+    });
+    sections.forEach((section) => {
+      const { content } = section;
+      const ifHighlight = highlightSectionNames.includes(section.name);
+      const sectionTheme = ifHighlight ? "#FFFFFF" : (0, import_color.colorForName)("section", section.name);
+      content.forEach((text) => {
+        const { content: content2, rect } = text;
+        const { left, top } = rect;
+        const style = new PIXI.TextStyle({
+          wordWrap: true,
+          wordWrapWidth: rect.width,
+          fontSize: 18,
+          fill: sectionTheme
+        });
+        const textElement = new PIXI.Text(content2, style);
+        textElement.x = left;
+        textElement.y = top;
+        textContainer.addChild(textElement);
+        const textBorder = new PIXI.Graphics();
+        textBorder.beginFill(11184810, 0.2);
+        textBorder.lineStyle(1, 0, 1);
+        textBorder.drawRect(left, top, rect.width, rect.height);
+        textBorder.endFill();
+        textContainer.addChild(textBorder);
+      });
+    });
+    textContainer.visible = textsVisible;
+    return {
+      highlightSectionRects: highlightSectionRects2,
+      highlightElementRects: highlightElementRects2
+    };
+  }, [
+    app,
+    appInitialed,
+    sections,
+    highlightSectionNames,
+    highlightElements
+    // bgVisible,
+    // textsVisible,
+  ]);
+  const onSetBg = (e) => {
+    setBgVisible(e.target.checked);
+    if (pixiBgRef.current) {
+      pixiBgRef.current.alpha = e.target.checked ? bgOnAlpha : bgOffAlpha;
+    }
+  };
+  const onSetTextsVisible = (e) => {
+    setTextsVisible(e.target.checked);
+    textContainer.visible = e.target.checked;
+  };
+  let bottomTipA = null;
+  if (highlightElementRects.length === 1) {
+    bottomTipA = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip-item", children: [
+      "Element: ",
+      JSON.stringify(highlightElementRects[0])
+    ] }) });
+  } else if (highlightElementRects.length > 1) {
+    bottomTipA = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip-item", children: [
+      "Element: ",
+      JSON.stringify(highlightElementRects)
+    ] }) });
+  }
+  let bottomTipB = null;
+  if (highlightSectionRects.length === 1) {
+    bottomTipB = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip-item", children: [
+      "Section: ",
+      JSON.stringify(highlightSectionRects[0])
+    ] }) });
+  } else if (highlightSectionRects.length > 1) {
+    bottomTipB = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip-item", children: [
+      "Sections: ",
+      JSON.stringify(highlightSectionRects)
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blackboard", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-main-content", style: { width: "100%" }, ref: domRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-filter", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overlay-control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: textsVisible, onChange: onSetTextsVisible, children: "Text Mark" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip", children: [
+      bottomTipA,
+      bottomTipB
+    ] })
+  ] });
+};
+var blackboard_default = BlackBoard;

package/dist/lib/component/color.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_exports = {};
+__export(color_exports, {
+  colorForName: () => colorForName,
+  highlightColorForType: () => highlightColorForType
+});
+module.exports = __toCommonJS(color_exports);
+const sectionColor = ["#028391"];
+const elementColor = ["#fb6107"];
+const highlightColorForSection = "#01204E";
+const highlightColorForElement = "#F56824";
+function djb2Hash(str) {
+  if (!str) {
+    console.warn("djb2Hash: empty string");
+    str = "unnamed";
+  }
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i);
+  }
+  return hash >>> 0;
+}
+function colorForName(type, name) {
+  const hashNumber = djb2Hash(name);
+  if (type === "section") {
+    return sectionColor[hashNumber % sectionColor.length];
+  } else {
+    return elementColor[hashNumber % elementColor.length];
+  }
+}
+function highlightColorForType(type) {
+  if (type === "section") {
+    return highlightColorForSection;
+  } else {
+    return highlightColorForElement;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colorForName,
+  highlightColorForType
+});

package/dist/lib/component/detail-panel.css

@@ -0,0 +1,34 @@
+.detail-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px;
+  background: #FFF;
+}
+.detail-panel .ant-segmented {
+  padding: 0;
+}
+.detail-panel .view-switcher {
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+.detail-panel .detail-content {
+  box-sizing: border-box;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  flex-grow: 1;
+}
+.detail-panel .blackboard {
+  margin: 0 auto;
+}
+.detail-panel .screenshot-item {
+  margin-bottom: 10px;
+}
+.detail-panel .screenshot-item .screenshot-item-title {
+  margin-bottom: 5px;
+}
+.detail-panel .screenshot-item img {
+  border: 1px solid #888;
+  max-width: 100%;
+}