cx-viewer 1.0.2 → 1.0.4

package/src/components/common/FeishuIcon.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+// Feishu/Lark brand glyph — the real logo silhouette (the three brand swooshes combined into one
+// monochrome shape via fill=currentColor, so it adapts to theme / the surrounding text color).
+// Single-color by design: the status chip conveys connection state via this glyph's color.
+export default function FeishuIcon({ size = 16, className, style }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      className={className}
+      style={style}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M738.59 406.66c-2.37 0.13-2.94-0.96-3.2-3.2-0.26-2.37-0.13-5.18-1.28-7.04-2.24-3.52-1.6-7.68-3.52-11.33a20.1 20.1 0 0 1-2.24-6.21c-0.13-1.28 0.19-3.07-0.7-3.78-2.05-1.47-1.28-3.84-2.56-5.76-1.41-2.05-1.47-5.06-2.56-7.55-1.09-2.62-2.43-5.44-2.69-8.32-0.13-1.41-1.73-1.47-1.66-2.88 0.13-2.37-1.6-4.29-2.18-6.53-0.77-3.01-2.43-5.89-3.58-8.83-0.9-2.37-1.86-4.8-2.94-6.91-1.6-3.2-2.94-6.46-4.8-9.6-1.79-2.75-2.3-6.34-4.22-9.34a52.29 52.29 0 0 1-4.1-7.87c-1.86-4.35-4.54-8.13-6.66-12.29a169.53 169.53 0 0 0-6.59-12.1c-2.24-3.78-4.22-7.74-6.85-11.39-1.02-1.47-2.69-2.94-2.94-4.61-0.38-2.43-2.24-4.16-3.39-5.57-1.6-1.92-1.66-5.31-4.8-6.02 0 0-0.13-0.32-0.06-0.45 0.26-2.56-3.33-3.26-3.01-5.89-2.75-0.96-1.98-4.99-5.12-5.76 0 0-0.13-0.26-0.06-0.38 0.26-2.56-2.24-3.97-3.33-5.63a43.2 43.2 0 0 0-4.8-6.02c-0.83-0.9-2.24-1.66-2.56-2.75-1.09-3.84-4.74-5.76-6.59-9.09-1.73-3.07-4.74-5.12-7.1-7.68a24.58 24.58 0 0 0-8.32-6.4c-3.01-1.15-5.38-3.58-8.96-3.78-3.71-0.19-7.23-2.37-11.14-2.24 0-0.83-0.26-1.47-1.28-1.47H214.88c-1.02 0-1.28 0.64-1.28 1.47-2.56-0.19-3.97 1.92-4.8 3.46-1.92 3.39 0.83 9.6 4.54 11.07 1.54 0.58 2.37 1.66 3.46 2.69 0.58 0.58 1.09 1.47 1.92 1.34 1.54-0.13 2.24 0.96 2.69 1.86 0.58 1.22 1.66 1.66 2.56 2.11a32.51 32.51 0 0 1 7.42 5.31c3.33 3.07 7.04 5.57 10.62 8.19 3.01 2.18 5.44 5.06 8.7 6.85 2.5 1.28 3.84 4.16 6.21 5.31 3.33 1.66 5.18 4.86 8.38 6.53 1.98 1.02 3.52 2.69 4.93 4.35 1.28 1.47 3.58 1.54 4.61 3.01 3.01 4.48 8.13 6.53 11.65 10.56 3.46 3.9 8.32 6.27 11.9 10.37 4.22 4.93 9.98 8.45 14.59 13.06 3.2 3.2 6.46 6.21 9.73 9.28 2.56 2.37 5.12 4.74 7.55 7.23 1.79 1.79 4.1 3.2 5.76 4.8 4.16 4.03 8.96 7.62 11.84 12.8l0.64 0.77c3.2 3.01 6.4 6.02 9.47 9.09 3.84 3.84 7.55 7.94 11.71 11.58a15.74 15.74 0 0 1 4.22 4.74c0.83 1.92 2.3 3.2 3.58 4.42 3.52 3.46 7.36 6.66 9.86 11.01 1.02 1.79 3.14 2.43 4.22 4.16 1.41 2.18 3.52 3.71 4.93 6.02 2.05 3.39 5.57 5.76 7.94 9.28 2.3 3.46 5.38 6.78 8.32 9.73 3.33 3.33 5.63 7.42 9.15 10.43 1.86 1.54 2.05 4.48 4.42 5.44 1.22 0.51 1.6 1.54 1.92 2.37 1.28 2.75 3.65 4.67 5.12 7.23 1.47 2.56 3.97 4.16 5.63 6.66 3.07 4.74 6.59 9.28 10.43 13.44 1.22 1.41 1.09 3.58 2.88 4.29 2.69 1.09 3.14 3.97 4.54 5.89 1.79 2.5 4.22 4.61 5.57 7.36 1.41 2.94 3.84 5.12 5.38 7.81 1.41 2.43 3.2 4.61 4.67 7.04 1.09 1.86 2.11 3.97 3.71 5.57 1.73 1.73 2.24 4.35 4.22 5.95 1.79 1.47 2.18 3.84 3.84 5.5 1.73 1.92 2.43 4.74 4.35 6.59 1.66 1.6 2.5 3.78 3.65 5.63 0.83 1.28 2.56 2.05 2.75 3.78 0.19 1.92 1.66 3.07 2.62 4.48 1.47 2.18 3.39 4.35 4.22 6.4 1.54 3.84 4.16 6.78 6.02 10.24 2.18 3.84 4.86 7.68 7.04 11.65 1.66 2.88 3.33 5.76 5.12 8.45 0.77 1.34 0.64 3.14 2.11 4.16 1.79 1.28 2.18 3.46 3.2 5.25 0.9 1.6 1.54 3.52 2.82 4.61 1.02 0.9 1.02 1.73 1.22 2.75 1.54 0.64 2.3-0.58 3.2-1.41l7.17-7.1 14.78-14.59c4.22-4.16 8.13-8.58 12.48-12.61 7.68-7.04 14.72-14.59 22.4-21.7 4.99-4.67 9.47-9.79 14.98-13.95 4.8-3.71 8.83-8.32 13.18-12.61l9.66-9.6c3.33-3.33 7.68-5.5 10.75-9.09a2.69 2.69 0 0 1 0.96-0.83c3.2-1.28 5.44-3.9 8.13-5.89 3.14-2.24 6.27-4.48 9.34-6.85 1.54-1.22 3.52-1.79 4.86-3.14 3.84-3.84 8.96-5.57 13.44-8.26 4.74-2.82 9.6-5.57 14.59-7.94 3.52-1.66 6.66-4.35 10.5-5.12 4.42-0.9 7.68-3.9 11.84-5.18 1.28-0.38 2.88-0.51 4.03-1.41 2.43-1.92 5.7-1.92 8.45-3.2 1.28-0.64 2.69-1.47 4.16-1.66 3.33-0.45 6.27-1.98 9.47-2.82 0.9-0.19 1.6-0.7 0.83-1.79z" />
+      <path d="M830.75 641.16c-0.96-0.64-1.54 0.19-2.11 0.77-1.73 1.54-2.94 3.58-4.42 5.38l-7.36 8.58c-5.06 5.57-10.5 10.88-16 15.87-4.29 3.9-9.09 7.23-13.7 10.75-1.73 1.28-3.46 2.69-5.25 3.84-1.92 1.34-3.65 3.14-5.76 4.03-4.03 1.73-7.62 4.22-11.33 6.4a167.04 167.04 0 0 1-20.22 9.41c-3.9 1.6-7.74 3.33-11.78 4.61-3.2 1.02-6.34 2.37-9.6 3.2-1.09 0.26-2.24 0.13-3.26 0.51-3.2 1.22-6.59 1.92-9.92 2.75-2.88 0.77-6.02 0.13-8.51 1.28-3.84 1.79-8.19 0.13-11.78 2.56-5.57-0.06-11.14 0.58-16.7 1.02-9.86 0.77-19.71-0.64-29.57-0.9-4.48-0.13-8.7-2.37-13.25-1.73-0.26 0-0.51-0.06-0.7-0.26-1.47-1.15-3.2-1.09-4.86-1.09-3.46 0-6.78-0.77-10.05-1.41-3.2-0.64-6.46-1.86-9.6-2.94-1.86-0.64-3.84-0.26-5.5-1.09a28.61 28.61 0 0 0-7.68-2.43c-6.14-1.28-11.84-3.84-18.05-4.86-4.1-0.7-7.68-3.01-11.78-3.84-2.88-0.64-5.7-1.66-8.45-2.56-3.52-1.15-7.04-2.37-10.62-3.26-5.7-1.54-10.94-3.97-16.51-5.76-6.66-2.18-13.12-4.8-19.78-7.04-3.9-1.28-7.42-3.65-11.65-4.29a14.59 14.59 0 0 1-5.12-1.92c-3.14-1.79-6.66-2.43-9.86-3.97-2.69-1.28-5.7-1.92-8.32-3.2-4.35-2.24-9.41-2.94-13.38-6.08-0.26-0.19-0.64-0.26-0.96-0.26-3.2-0.32-6.08-1.79-8.83-3.2-6.08-2.94-12.61-4.93-18.56-8.19-4.74-2.62-9.98-4.1-14.72-6.66-1.09-0.26-2.05-0.06-3.2-0.64-1.98-0.96-3.84-2.56-5.89-3.07-3.9-1.09-6.85-3.9-10.69-5.06-2.18-0.64-3.84-2.56-5.89-3.07-2.56-0.64-4.67-1.92-6.72-3.07-3.39-1.92-7.04-3.2-10.43-5.31-1.86-1.15-4.29-1.54-5.89-2.88-2.43-2.05-6.21-1.92-7.87-4.99-4.1-0.32-6.85-3.46-10.37-4.93-4.16-1.73-7.94-4.35-11.9-6.59-1.66-0.96-3.2-2.69-4.8-3.01-4.35-0.9-7.3-3.97-10.88-5.89a124.41 124.41 0 0 1-12.16-7.3c-0.64-0.38-1.6-0.32-2.05-0.83-2.56-2.88-6.21-4.35-9.34-6.27a424.19 424.19 0 0 1-9.28-5.63c-3.78-2.37-7.68-4.74-11.26-7.3-2.37-1.73-5.38-2.75-7.42-4.74-1.54-1.41-3.39-1.92-4.93-3.2-2.82-2.3-6.08-4.16-9.15-6.27-1.41-0.96-3.26-1.86-4.22-2.88-1.86-2.05-4.35-3.07-6.34-4.74-2.94-2.5-6.66-4.22-9.6-6.85-1.73-1.54-4.29-1.79-5.57-3.97-0.45-0.83-1.28-1.41-2.43-1.73-1.92-0.51-3.26-2.11-4.86-3.2-2.37-1.6-4.48-3.78-6.91-5.44-2.94-1.98-5.5-4.61-8.51-6.4-3.26-1.98-5.57-5.06-8.83-6.91-1.98-1.22-3.2-3.46-5.12-4.35-3.46-1.54-5.5-4.54-8.64-6.4-2.43-1.54-4.1-4.42-6.66-5.76-3.01-1.6-4.8-4.42-7.49-6.27-0.77-0.58-1.66-0.64-2.37-1.54-1.73-2.11-4.1-3.65-6.08-5.5-2.11-1.92-4.74-3.2-6.66-5.5-1.54-1.66-3.2-3.9-5.12-4.67-2.94-1.09-4.22-3.71-6.53-5.38-2.88-2.05-4.99-4.99-7.81-7.23-1.79-1.41-3.84-2.56-5.25-4.35C128.04 453.38 125.35 451.14 122.92 448.84 119.72 445.7 116.64 442.44 113.32 439.43 110.76 437.13 108.39 434.57 105.76 432.26 103.33 430.09 101.16 427.66 98.72 425.48 95.52 422.54 92.58 419.21 89.51 416.07 86.5 412.87 83.24 409.93 80.29 406.66 77.73 403.78 75.17 400.26 70.18 401.35 67.75 401.86 66.6 403.4 65.7 405.38 63.2 405.64 64.23 407.56 64.23 408.65V771.08c0 1.47 0.13 2.88 0.06 4.29 0 1.09 0.38 1.6 1.41 1.66-0.64 3.33 1.6 6.02 2.11 9.09 0.32 2.18 1.73 4.03 2.56 6.08 1.22 2.82 3.58 5.18 5.25 7.87a21.82 21.82 0 0 0 5.63 5.82c2.3 1.66 4.67 3.46 7.17 4.93 2.94 1.66 5.76 3.78 8.51 5.7 0.83 0.51 1.79 0.64 2.69 1.47 2.56 2.3 5.82 4.03 8.96 5.63 2.11 1.09 4.1 2.56 6.4 3.52 5.12 2.11 9.47 5.95 14.72 8 2.94 1.09 5.18 3.2 8.19 4.1 0.7 0.26 1.54 0.32 2.11 0.7 4.22 2.94 9.02 4.61 13.57 6.91 0.96 0.51 2.18 0.51 2.94 1.15a18.82 18.82 0 0 0 8.32 3.71c0.51 0.13 1.02 0.19 1.6 0.64 1.28 0.96 2.88 1.66 4.35 2.5 1.66 0.96 3.84 0.38 5.38 2.05 0.58 0.64 1.92 1.47 3.01 1.66 4.48 0.83 8.64 2.94 12.8 4.61 1.28 0.51 2.94 0 3.84 0.96 1.66 1.73 4.03 1.66 5.95 2.56 2.82 1.22 5.76 2.18 8.9 2.94 1.34 0.32 3.2 0.06 4.03 0.96 1.6 1.79 4.03 1.92 5.76 2.37 4.61 1.09 9.09 2.56 13.57 4.1 3.58 1.28 7.62 1.54 11.39 2.69 3.2 0.9 6.4 1.92 9.6 2.5 1.47 0.26 3.65-0.32 4.48 0.45 2.43 2.43 5.76 1.02 8.51 2.37 2.69 1.28 6.4 1.79 9.86 1.54 0.64-0.06 1.6-0.19 1.92 0.13 2.56 2.56 6.53 0 8.96 2.62 5.76 0.51 11.52 0.77 17.15 2.43 3.65 1.09 7.68 0.51 11.52 1.41 4.67 1.09 9.73 0.77 14.59 1.28 3.2 0.26 6.34 0.13 9.47 0.19 0 1.02 0.58 1.41 1.6 1.34h69.12c1.02 0 1.6-0.32 1.6-1.34 7.68 0.38 15.23-1.41 22.85-1.15h4.22c1.02 0.06 1.6-0.32 1.54-1.41a78.08 78.08 0 0 0 10.24-1.28c5.38-1.09 11.01-0.83 16.38-2.56 2.69-0.9 5.76-0.77 8.64-1.47 3.33-0.77 6.85-1.66 10.5-1.41 0.38 0 1.02 0 1.22-0.19 1.79-2.37 4.8-1.28 7.17-2.37a18.5 18.5 0 0 1 8.32-1.47c0.38 0 0.9 0 1.28-0.19a20.48 20.48 0 0 1 8.19-2.62 54.4 54.4 0 0 0 11.33-2.94 49.98 49.98 0 0 1 8.38-2.24c0.64-0.13 1.34-0.13 1.66-0.51 1.6-1.66 3.97-1.73 5.76-2.24 3.71-0.96 7.23-2.37 10.88-3.46 1.22-0.32 2.62 0.06 3.65-0.64a22.53 22.53 0 0 1 9.47-3.84c0.58-0.06 1.09-0.13 1.6-0.51 1.66-1.02 3.2-2.24 5.31-2.5 2.94-0.32 5.76-1.79 8.32-3.07 2.18-1.09 4.61-1.92 6.85-3.07 1.73-0.9 3.58-1.98 5.7-2.37 3.01-0.51 4.99-3.14 8.06-3.78a22.72 22.72 0 0 0 6.53-2.75c3.26-1.86 6.66-3.39 9.98-4.99 2.11-1.09 4.54-1.98 6.27-3.26a47.87 47.87 0 0 1 8.32-4.61c3.71-1.66 6.98-4.03 10.69-5.63 3.2-1.47 6.08-3.84 9.28-5.63 1.6-0.9 3.07-2.3 4.61-3.07a63.81 63.81 0 0 0 5.12-3.01c2.18-1.47 4.74-2.37 6.59-4.22 1.66-1.66 3.9-2.24 5.63-3.78 2.05-1.73 4.8-2.56 6.72-4.48 0.64-0.64 1.02-1.28 1.92-1.28a3.07 3.07 0 0 0 2.37-1.6 5.5 5.5 0 0 1 2.56-2.18c3.01-1.09 4.61-3.97 7.42-5.38 1.73-0.83 3.2-2.43 4.8-3.58 2.75-1.92 5.38-3.97 8-6.02 1.47-1.15 2.75-3.14 4.22-3.58 3.2-1.02 4.16-4.48 7.17-5.76a9.92 9.92 0 0 0 2.75-2.05c2.3-2.56 5.12-4.61 7.68-7.1 1.6-1.66 3.78-2.43 5.31-4.22a46.21 46.21 0 0 1 6.02-6.08c1.92-1.54 3.71-3.33 5.38-5.12l9.6-9.54c3.2-3.07 6.21-6.21 9.41-9.22a40.32 40.32 0 0 0 5.12-6.02 32.26 32.26 0 0 1 5.76-6.08c1.66-1.34 2.18-3.39 3.71-4.8a27.14 27.14 0 0 0 5.82-6.59c1.73-2.94 4.67-4.8 6.27-7.81 1.15-2.18 3.39-3.58 4.74-5.76 1.34-2.3 3.2-4.35 4.93-6.4 1.92-2.3 4.1-4.74 5.38-7.3 1.34-2.75 3.78-4.48 5.12-7.23a43.52 43.52 0 0 1 4.93-7.1c1.28-1.6 2.05-3.39 3.14-5.06 1.66-2.56 3.46-5.06 5.25-7.55 0.7-1.09 0.83-2.24 1.79-3.33 1.73-1.79 3.65-3.97 3.2-6.91z" />
+      <path d="M958.75 423.24c-0.38-0.45-0.77-0.45-1.28-0.58-1.41-0.45-3.01-0.77-4.29-1.54a26.37 26.37 0 0 0-4.48-2.56c-2.37-0.96-5.12-1.28-7.1-2.69-2.75-2.11-6.21-2.05-9.15-3.58a22.78 22.78 0 0 0-6.66-2.37c-1.79-0.32-3.65-1.15-5.38-1.66-2.37-0.77-4.86-1.6-7.3-2.24a143.81 143.81 0 0 1-11.33-3.26 19.97 19.97 0 0 0-8.06-1.34c-0.64-2.62-2.75-1.09-4.22-1.41-1.92 0-3.71-0.96-5.5-1.28-5.82-1.02-11.78-1.22-17.66-2.56-4.67-1.02-9.73-0.45-14.59-1.15-2.88-0.38-5.76-0.13-8.7-0.19 0-1.15-0.58-1.41-1.6-1.41h-28.1c-1.02 0-1.6 0.32-1.6 1.41-7.17-0.38-14.21 1.22-21.38 1.15h-4.22c-1.02-0.06-1.47 0.38-1.54 1.34-4.1-0.38-7.94 1.41-12.03 1.15a1.28 1.28 0 0 0-0.7 0.19c-3.14 2.18-6.98 1.41-10.37 2.56-2.69 0.9-5.95 0.77-8.51 1.73-2.05 0.7-4.35 1.28-6.4 2.11a18.62 18.62 0 0 1-8 1.6c0.06 0.51 0.19 1.15-0.51 1.22-1.6 0.13-3.07 0.96-4.48 1.28-4.22 1.09-8.19 2.69-12.29 4.1-3.58 1.28-6.91 3.2-10.43 4.03-4.03 0.96-6.85 4.16-11.07 4.67a7.1 7.1 0 0 0-3.65 1.28 13.12 13.12 0 0 1-3.9 2.37 26.37 26.37 0 0 0-6.4 3.14c-2.94 1.92-6.14 3.2-8.96 5.12-1.09 0.77-2.88 0.45-3.39 1.28-2.05 3.58-6.27 3.65-9.15 5.89-3.07 2.37-6.72 4.16-9.79 6.46-2.56 1.92-5.25 3.71-7.68 5.76-3.2 2.75-6.66 5.25-10.05 7.68-1.79 1.28-2.88 3.65-4.74 4.22-2.94 1.02-4.48 3.46-6.4 5.25-1.92 1.92-4.1 3.9-6.02 5.95-2.94 3.01-6.08 5.82-9.15 8.77-2.3 2.18-4.29 4.93-6.85 6.59-3.84 2.56-6.66 5.95-9.86 8.96-3.2 3.01-6.4 6.14-9.47 9.28-3.58 3.65-7.55 6.91-10.94 10.69-2.94 3.33-6.34 6.21-9.47 9.28-3.2 3.14-6.21 6.46-9.6 9.47a155.97 155.97 0 0 0-9.47 9.47c-2.43 2.56-4.99 5.06-7.55 7.49-2.56 2.43-4.74 5.31-7.94 7.04-0.32 1.54-1.6 2.18-2.75 2.94-3.33 2.11-5.95 4.99-8.83 7.68-1.92 1.73-3.46 4.03-5.63 5.25-3.58 1.92-6.14 5.12-9.34 7.42-3.84 2.82-7.81 5.7-11.2 9.09-1.66 1.6-4.22 1.86-5.31 3.97-0.9 1.79-3.2 1.41-4.29 2.82-2.24 3.01-5.89 4.22-8.58 6.66-1.6 1.47-3.84 2.69-5.76 3.84-1.22 0.64-2.56 1.09-3.58 2.05a41.6 41.6 0 0 1-8.26 5.76c-1.28 0.77-3.01 1.28-3.97 2.37-1.79 1.92-4.29 2.82-6.34 4.48a25.73 25.73 0 0 1-6.78 4.1c-3.2 1.22-5.63 3.46-8.58 4.93-3.97 1.92-7.68 4.29-11.58 6.21-1.02 0.51-2.75 0.83-3.33 2.24 0 0.9 0.38 1.15 1.15 1.6 1.73 1.02 3.65 1.28 5.38 1.98 2.82 1.28 5.5 2.88 8.32 4.03 2.69 1.09 4.93 2.94 8.13 3.2a8 8 0 0 1 3.9 1.92c1.92 1.66 4.35 2.3 6.4 3.07 1.79 0.64 3.52 1.79 5.57 2.18 1.28 0.26 3.01 0.19 4.03 0.96 1.79 1.41 3.84 2.18 5.76 3.33 1.28 0.77 3.01-0.26 3.78 0.9 1.09 1.6 3.07 1.86 4.29 2.3 3.65 1.28 7.04 2.75 10.62 4.22 3.07 1.28 6.21 2.18 9.22 3.84 2.5 1.34 5.82 1.41 8.7 2.62 1.09 0.51 1.66 1.54 2.88 1.66a18.05 18.05 0 0 1 7.87 2.37c0.77 0.51 1.6 1.41 2.56 1.6 2.82 0.58 5.57 1.28 8.32 2.43 2.56 1.02 5.25 2.18 7.94 2.56 1.47 0.19 1.79 1.66 3.2 1.66 2.5 0 4.48 1.6 6.85 2.11 3.2 0.77 6.34 1.92 9.47 2.88 0.7 0.19 1.92-0.13 2.24 0.26 1.92 2.56 5.12 1.28 7.68 2.56 2.75 1.41 6.4 2.05 9.6 3.14 2.88 1.02 5.76 2.11 8.83 2.24 0.51 0 0.96 0.13 1.41 0.45 2.05 1.28 4.42 1.98 6.78 2.56a50.75 50.75 0 0 0 3.39 0.58c2.05 0.32 3.71 1.73 5.7 1.86 2.94 0.13 5.44 1.92 8.51 2.05 1.15 0.06 3.07-0.13 4.03 0.83 1.98 1.98 4.8 1.86 7.04 2.43 4.86 1.28 10.05 0.96 15.04 2.62 2.88 1.02 6.14 0.64 9.34 1.41 5.12 1.15 10.69 0.77 16.13 1.09 10.05 0.64 20.16 0.38 30.14-0.77 2.56-0.32 4.93-0.45 7.42-1.09a62.4 62.4 0 0 1 10.88-1.79c3.14-0.26 6.02-1.6 9.22-1.28a1.22 1.22 0 0 0 0.64-0.19c2.75-1.73 5.95-1.73 8.83-2.69 2.05-0.64 4.48-0.58 6.21-1.6a17.66 17.66 0 0 1 5.82-2.24c3.2-0.51 5.44-3.2 8.7-2.94 0.13 0 0.26-0.19 0.38-0.26 2.18-1.66 4.86-2.56 7.3-3.39a68.48 68.48 0 0 0 7.74-3.2c3.33-1.66 6.53-3.84 9.79-5.76 0.96-0.58 2.37 0.26 3.07-1.28 0.51-1.28 1.73-1.92 3.2-2.24 1.66-0.45 3.58-1.09 4.29-3.01 0.32-0.83 0.96-0.9 1.6-0.83a2.43 2.43 0 0 0 2.18-1.22c2.05-3.07 5.57-4.48 8.38-6.53 2.94-2.05 5.25-4.8 8.32-6.66 3.65-2.11 6.27-5.5 9.22-8.45 2.5-2.56 4.86-5.18 7.49-7.49 2.05-1.79 3.01-4.22 5.06-6.02 1.41-1.28 3.65-2.56 4.22-4.48 0.9-3.01 3.33-4.22 5.38-6.08a11.71 11.71 0 0 1 3.14-4.03l0.77-1.22c1.09-0.64 0.51-2.24 1.66-2.94 2.05-1.34 2.82-3.84 3.71-5.76 1.41-2.94 3.14-5.82 4.8-8.58 1.79-3.01 2.88-6.34 5.12-9.15 1.66-2.18 2.75-5.06 3.97-7.62 2.18-4.48 4.42-8.9 6.78-13.25 1.41-2.56 2.75-5.25 3.97-7.94 1.22-2.82 2.82-5.44 4.1-8.13 1.28-2.82 3.07-5.38 4.1-8.13 1.28-3.39 3.2-6.27 4.67-9.54 0.45-1.15 0.32-2.56 1.15-3.39a16.38 16.38 0 0 0 3.58-6.27c1.28-3.39 4.16-6.02 4.48-9.79l0.26-0.13c1.28-0.96 1.73-2.56 2.43-3.9 1.15-2.11 1.66-4.61 3.07-6.53 2.18-3.07 3.46-6.53 5.12-9.79 1.09-2.05 1.92-4.35 3.07-6.21 1.92-3.01 3.2-6.4 4.99-9.41a38.46 38.46 0 0 0 3.2-6.72c0.58-1.54 1.66-3.07 2.62-4.48 1.73-2.69 2.94-5.76 5.18-8.13 0.96-1.02 0.9-2.43 2.05-3.58 1.92-1.92 2.94-4.48 4.48-6.72 1.15-1.66 1.92-3.71 3.26-4.99 2.56-2.43 4.48-5.44 6.21-8.19 1.73-2.75 3.97-5.25 5.95-7.62 3.26-3.97 6.78-7.87 10.37-11.71a4652.74 4652.74 0 0 0 9.73-10.37c1.92-1.98 1.41-2.43 0-3.84z" />
+    </svg>
+  );
+}

package/src/components/common/HoverPreviewTip.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useCallback, useLayoutEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './HoverPreviewTip.module.css';
+
+// 单实例预览浮层：createPortal 到 body + position:fixed，绕开祖先 overflow 裁剪与原生 title 失效
+// （甘特菱形 :hover scale 会重置浏览器原生 title 计时器、且会与自渲浮层双重弹出，故统一改自渲）。
+// useLayoutEffect 测真实尺寸做视口 clamp（上方放不下翻下方），paint 前定位、visibility 防首帧闪。
+function PreviewTip({ text, x, y }) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState({ left: x, top: y, visible: false });
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const w = node.offsetWidth;
+    const h = node.offsetHeight;
+    const M = 8, GAP = 10;
+    const left = Math.max(M, Math.min(x - w / 2, window.innerWidth - w - M));
+    let top = y - h - GAP;                 // 优先菱形上方
+    if (top < M) top = y + GAP + 14;       // 不够则放下方（+14 ≈ 菱形高）
+    top = Math.min(top, window.innerHeight - h - M);
+    setPos({ left, top, visible: true });
+  }, [text, x, y]);
+  return (
+    <div
+      ref={ref}
+      className={styles.previewTip}
+      style={{ left: pos.left, top: pos.top, visibility: pos.visible ? 'visible' : 'hidden' }}
+      role="tooltip"
+    >
+      {text}
+    </div>
+  );
+}
+
+/**
+ * 甘特/时间轴菱形的悬停预览：事件委托读元素的 `data-preview` 属性（零 per-marker 组件开销，
+ * 适配 live 每秒重渲、一行可 100+ 菱形的场景），单实例浮层 portal 渲出。
+ *
+ * 用法：
+ *   const { previewHandlers, previewNode } = usePreviewTip();
+ *   <div {...previewHandlers}>…内部带 data-preview 的菱形/元素…</div>
+ *   {previewNode}
+ */
+export function usePreviewTip() {
+  const [tip, setTip] = useState(null); // { text, x, y } | null
+  const onMouseOver = useCallback((e) => {
+    const el = e.target.closest('[data-preview]');
+    if (!el || !el.dataset.preview) return;
+    const r = el.getBoundingClientRect();
+    setTip({ text: el.dataset.preview, x: r.left + r.width / 2, y: r.top });
+  }, []);
+  const onMouseOut = useCallback((e) => {
+    // 只在真正离开所有菱形时清除：移到相邻菱形 / 菱形内部移动不清，避免 null→tip 闪烁。
+    const to = e.relatedTarget;
+    if (!to || typeof to.closest !== 'function' || !to.closest('[data-preview]')) setTip(null);
+  }, []);
+  const onMouseLeave = useCallback(() => setTip(null), []);
+  const previewNode = tip
+    ? ReactDOM.createPortal(<PreviewTip text={tip.text} x={tip.x} y={tip.y} />, document.body)
+    : null;
+  return { previewHandlers: { onMouseOver, onMouseOut, onMouseLeave }, previewNode };
+}

package/src/components/common/HoverPreviewTip.module.css

@@ -0,0 +1,21 @@
+/* 单实例预览浮层：createPortal 到 body + position:fixed，绕开甘特祖先 overflow 裁剪与原生
+   title 失效。z-index 只需压过 antd Modal(1000，面板可能在 Modal 内)，刻意低于审批面板(99999)
+   以免盖住它；pointer-events:none 防浮层吃鼠标导致菱形 mouseout 闪烁。 */
+.previewTip {
+  position: fixed;
+  z-index: 1100;
+  max-width: 380px;
+  max-height: 460px;
+  overflow: hidden;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px var(--overlay-dark);
+  white-space: pre-wrap;
+  word-break: break-word;
+  pointer-events: none;
+}

package/src/components/common/ImageLightbox.jsx

@@ -0,0 +1,244 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { t as i18n } from '../../i18n';
+import styles from './ImageLightbox.module.css';
+
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 10;
+const FADE_MS = 150;
+
+export default function ImageLightbox({ src, alt, onClose, zIndex }) {
+  const [zoom, setZoom] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const dragRef = useRef(null);
+  const imgRef = useRef(null);
+  const touchRef = useRef(null);
+  const overlayRef = useRef(null);
+  const stateRef = useRef({ zoom: 1, offset: { x: 0, y: 0 } });
+  const fitZoomRef = useRef(1);
+  const mountedRef = useRef(true);
+
+  const clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));
+
+  useEffect(() => { stateRef.current.zoom = zoom; }, [zoom]);
+  useEffect(() => { stateRef.current.offset = offset; }, [offset]);
+  useEffect(() => () => { mountedRef.current = false; }, []);
+
+  // Animated close — set closing state, useEffect handles the delayed onClose
+  const doClose = useCallback(() => {
+    setClosing(true);
+  }, []);
+
+  // Fade-out timer: fires onClose after animation, cleaned up on unmount
+  useEffect(() => {
+    if (!closing) return;
+    const id = setTimeout(() => {
+      if (mountedRef.current) onClose();
+    }, FADE_MS);
+    return () => clearTimeout(id);
+  }, [closing, onClose]);
+
+  // ESC to close + body scroll lock with scrollbar-gutter
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') doClose(); };
+    window.addEventListener('keydown', onKey);
+    const prevOverflow = document.body.style.overflow;
+    const prevScrollbarGutter = document.body.style.scrollbarGutter;
+    document.body.style.overflow = 'hidden';
+    document.body.style.scrollbarGutter = 'stable';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prevOverflow;
+      document.body.style.scrollbarGutter = prevScrollbarGutter;
+    };
+  }, [doClose]);
+
+  // Auto-fit image to viewport on load
+  const handleImageLoad = useCallback((e) => {
+    setLoaded(true);
+    const img = e.target;
+    const vw = window.innerWidth * 0.9;
+    const vh = window.innerHeight * 0.9;
+    // 用 CSS 渲染后的实际尺寸计算，避免与 max-width/max-height 冲突
+    const renderedW = img.clientWidth;
+    const renderedH = img.clientHeight;
+    const fit = Math.min(vw / renderedW, vh / renderedH);
+    fitZoomRef.current = fit;
+    if (fit > 1.05) {
+      setZoom(fit);
+    }
+  }, []);
+
+  // Mouse wheel zoom
+  const handleWheel = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setZoom(prev => {
+      const next = clampZoom(prev * (e.deltaY < 0 ? 1.06 : 1 / 1.06));
+      const ratio = next / prev;
+      setOffset(o => ({ x: o.x * ratio, y: o.y * ratio }));
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const el = overlayRef.current;
+    if (!el) return;
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [handleWheel]);
+
+  // Mouse drag pan
+  const handleMouseDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const { offset: cur } = stateRef.current;
+    dragRef.current = { startX: e.clientX, startY: e.clientY, ox: cur.x, oy: cur.y };
+    setDragging(true);
+
+    const onMove = (ev) => {
+      if (!dragRef.current) return;
+      setOffset({
+        x: dragRef.current.ox + ev.clientX - dragRef.current.startX,
+        y: dragRef.current.oy + ev.clientY - dragRef.current.startY,
+      });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      if (mountedRef.current) setDragging(false);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, []);
+
+  // Touch: pinch-to-zoom + single-finger pan
+  const handleTouchStart = useCallback((e) => {
+    const { zoom: z, offset: o } = stateRef.current;
+    if (e.touches.length === 2) {
+      const dx = e.touches[0].clientX - e.touches[1].clientX;
+      const dy = e.touches[0].clientY - e.touches[1].clientY;
+      touchRef.current = { dist: Math.hypot(dx, dy), zoom: z, ox: o.x, oy: o.y, isPinch: true };
+    } else if (e.touches.length === 1) {
+      touchRef.current = { startX: e.touches[0].clientX, startY: e.touches[0].clientY, ox: o.x, oy: o.y, isPinch: false, moved: false };
+    }
+  }, []);
+
+  const handleTouchMove = useCallback((e) => {
+    if (!touchRef.current) return;
+    e.preventDefault();
+    if (touchRef.current.isPinch && e.touches.length === 2) {
+      const dx = e.touches[0].clientX - e.touches[1].clientX;
+      const dy = e.touches[0].clientY - e.touches[1].clientY;
+      const dist = Math.hypot(dx, dy);
+      const scale = dist / touchRef.current.dist;
+      setZoom(clampZoom(touchRef.current.zoom * scale));
+    } else if (e.touches.length === 1) {
+      if (touchRef.current.isPinch) {
+        const { offset: o } = stateRef.current;
+        touchRef.current = { startX: e.touches[0].clientX, startY: e.touches[0].clientY, ox: o.x, oy: o.y, isPinch: false, moved: false };
+        return;
+      }
+      const dx = e.touches[0].clientX - touchRef.current.startX;
+      const dy = e.touches[0].clientY - touchRef.current.startY;
+      if (Math.abs(dx) > 5 || Math.abs(dy) > 5) touchRef.current.moved = true;
+      setOffset({ x: touchRef.current.ox + dx, y: touchRef.current.oy + dy });
+    }
+  }, []);
+
+  const handleTouchEnd = useCallback((e) => {
+    if (!touchRef.current) return;
+    if (e.touches.length > 0) {
+      touchRef.current = null;
+      return;
+    }
+    if (!touchRef.current.isPinch && !touchRef.current.moved && e.changedTouches.length === 1) {
+      const target = e.target;
+      if (target === overlayRef.current || target.classList.contains(styles.imageArea)) {
+        doClose();
+      }
+    }
+    touchRef.current = null;
+  }, [doClose]);
+
+  const handleOverlayClick = useCallback((e) => {
+    if (e.target === overlayRef.current || e.target.classList.contains(styles.imageArea)) {
+      doClose();
+    }
+  }, [doClose]);
+
+  // Double-click to toggle between fit-to-screen and natural size
+  const handleDoubleClick = useCallback((e) => {
+    e.stopPropagation();
+    setZoom(prev => {
+      setOffset({ x: 0, y: 0 });
+      const fitZ = fitZoomRef.current;
+      return Math.abs(prev - fitZ) < 0.05 ? 1 : fitZ;
+    });
+  }, []);
+
+  const closeLabel = i18n('ui.imageLightbox.close');
+
+  const overlayClass = [
+    styles.overlay,
+    dragging && styles.dragging,
+    closing && styles.closing,
+  ].filter(Boolean).join(' ');
+
+  const content = (
+    <div
+      className={overlayClass}
+      ref={overlayRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label={alt || 'Image preview'}
+      style={zIndex != null ? { zIndex } : undefined}
+      onClick={handleOverlayClick}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      <button className={styles.closeBtn} onClick={doClose} title={closeLabel} aria-label={closeLabel}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+
+      <div className={styles.imageArea}>
+        {error ? (
+          <div className={styles.errorMsg}>Failed to load image</div>
+        ) : (
+          <>
+            {!loaded && <div className={styles.spinner} />}
+            <img
+              ref={imgRef}
+              className={styles.image}
+              src={src}
+              alt={alt || ''}
+              draggable={false}
+              onLoad={handleImageLoad}
+              onError={() => setError(true)}
+              onMouseDown={handleMouseDown}
+              onDoubleClick={handleDoubleClick}
+              style={{
+                transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+                opacity: loaded ? 1 : 0,
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {zoom !== 1 && (
+        <div className={styles.zoomLabel}>{Math.round(zoom * 100)}%</div>
+      )}
+    </div>
+  );
+
+  return ReactDOM.createPortal(content, document.body);
+}

package/src/components/common/ImageLightbox.module.css

@@ -0,0 +1,120 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  background: var(--overlay-dark-strong);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+  animation: fadeIn 0.15s ease-out;
+  /* iOS safe area */
+  padding:
+    env(safe-area-inset-top)
+    env(safe-area-inset-right)
+    env(safe-area-inset-bottom)
+    env(safe-area-inset-left);
+  box-sizing: border-box;
+}
+.overlay.dragging { cursor: grabbing; }
+.overlay.closing { animation: fadeOut 0.15s ease-in forwards; pointer-events: none; }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Close button */
+.closeBtn {
+  position: absolute;
+  top: max(12px, env(safe-area-inset-top));
+  right: max(12px, env(safe-area-inset-right));
+  z-index: 2;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--overlay-dark-light);
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.closeBtn:hover { background: var(--overlay-light-strong); }
+
+/* Image area */
+.imageArea {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.image {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  cursor: grab;
+  transform-origin: center center;
+  transition: opacity 0.2s;
+  border-radius: 4px;
+}
+.overlay.dragging .image { cursor: grabbing; }
+
+.image:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.6);
+  outline-offset: 2px;
+}
+
+/* Loading spinner */
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--overlay-light-medium);
+  border-top-color: var(--overlay-light-bright);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Zoom label */
+.zoomLabel {
+  position: absolute;
+  bottom: max(16px, env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 12px;
+  background: var(--overlay-dark-medium);
+  color: var(--text-white);
+  font-size: 13px;
+  border-radius: 12px;
+  pointer-events: none;
+}
+
+/* Error message */
+.errorMsg {
+  color: var(--text-tertiary);
+  font-size: 15px;
+  text-align: center;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .closeBtn {
+    top: max(8px, env(safe-area-inset-top));
+    right: max(8px, env(safe-area-inset-right));
+  }
+}

package/src/components/common/MemoryDetailModal.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Modal } from 'antd';
+import { t } from '../../i18n';
+import { renderMarkdown } from '../../utils/markdown';
+import { parseMemoryLink } from '../../utils/memoryLinkParser';
+import styles from './sharedChrome.module.css';
+
+// 持久记忆条目明细 Modal（PC + iPad + 手机三处都需要 mount 一份）。
+// zIndex 1100 跨过 popover 的 1030 —— 不需要先关 popover。
+// 内容里点其它 .md 链接通过 onOpenMemoryDetail(name) 回到父级 loadMemoryDetail，
+// 父级负责 seq 防快慢回包乱序、setState 切换当前 detail。
+//
+// linkMode:
+//   'memory'      (默认) → 用 parseMemoryLink 拦截：命中 .md basename 切明细，其他一律 preventDefault。
+//   'passthrough' → 不拦截，浏览器原生处理（AGENTS.md 等场景需要 https:// / 相对链接正常打开）。
+export default function MemoryDetailModal({ detail, onClose, onOpenMemoryDetail, linkMode = 'memory' }) {
+  if (!detail) return null;
+  const { name, content, error, loading } = detail;
+
+  // 链接拦截：规则统一在 parseMemoryLink；命中 .md basename 切到对应明细。
+  // passthrough 模式（AGENTS.md 视图）：外链在新 tab 打开（noopener），其他链接吃掉防止 SPA 误导航。
+  // 安全：协议白名单(^https?://)是 utils/markdown.js 里 DOMPurify 之外的第二道闸 ——
+  // DOMPurify 默认会剥 javascript:/data: URL，但若未来 markdown pipeline 替换/降级，
+  // 这里仍是底线防御。切勿移除此白名单。
+  const handleLinkClick = (e) => {
+    const a = e.target.closest('a');
+    if (!a) return;
+    const hrefRaw = a.getAttribute('href') || '';
+    if (linkMode === 'passthrough') {
+      e.preventDefault();
+      if (/^https?:\/\//i.test(hrefRaw)) {
+        // SSR 守卫: typeof window 检查避免 server render / 测试场景下 window 未定义即崩
+        if (typeof window !== 'undefined') {
+          try { window.open(hrefRaw, '_blank', 'noopener,noreferrer'); } catch {}
+        }
+      }
+      // 相对路径 / 其它协议 → 阻止默认行为（不在 SPA 内做 routing），不打开
+      return;
+    }
+    const r = parseMemoryLink(hrefRaw);
+    if (r.allow) return;
+    e.preventDefault();
+    if (r.open) onOpenMemoryDetail?.(r.open);
+  };
+
+  let body;
+  if (loading) {
+    body = <div className={styles.cachePopoverEmpty}>{t('ui.memoryLoading')}</div>;
+  } else if (error) {
+    body = <div className={styles.cachePopoverEmpty}>{t('ui.memoryLoadError')}: {error}</div>;
+  } else if (!content || !content.trim()) {
+    body = <div className={styles.cachePopoverEmpty}>{t('ui.memoryEmpty')}</div>;
+  } else {
+    body = (
+      <div
+        className={`${styles.detailMarkdownCard} ${styles.memoryMarkdown}`}
+        onClick={handleLinkClick}
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
+      />
+    );
+  }
+  return (
+    <Modal
+      open={true}
+      title={name}
+      onCancel={onClose}
+      footer={null}
+      width={720}
+      zIndex={1100}
+      destroyOnClose
+    >
+      {body}
+    </Modal>
+  );
+}

package/src/components/common/OpenFolderIcon.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import styles from './OpenFolderIcon.module.css';
+
+/**
+ * Folder icon that changes to a yellow open-folder on hover.
+ * onClick calls the provided apiEndpoint via POST to open the directory in OS file manager.
+ */
+export default function OpenFolderIcon({ apiEndpoint, title, size = 16 }) {
+  const [hovered, setHovered] = useState(false);
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    fetch(apiEndpoint, { method: 'POST' }).catch(() => {});
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick(e);
+    }
+  };
+
+  // Closed folder (stroke outline, like the original log manager icon)
+  const closedFolder = (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+
+  // Open folder (yellow filled)
+  const openFolder = (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="var(--color-accent-yellow)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M5 19a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4l2 2h5a2 2 0 0 1 2 2v1" fill="none" />
+      <path d="M20 10H8.5A2.5 2.5 0 0 0 6 12.5L5 19h13.5a2 2 0 0 0 2-1.75l1-6.25A1 1 0 0 0 20.5 10z" fill="var(--color-accent-yellow)" stroke="var(--color-accent-yellow)" />
+    </svg>
+  );
+
+  return (
+    <span
+      role="button"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      title={title}
+      className={styles.iconBtn}
+      style={{ opacity: hovered ? 1 : 0.7 }}
+    >
+      {hovered ? openFolder : closedFolder}
+    </span>
+  );
+}

package/src/components/common/OpenFolderIcon.module.css

@@ -0,0 +1,7 @@
+.iconBtn {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}

package/src/components/common/PanelResizer.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './PanelResizer.module.css';
+
+class PanelResizer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+  }
+
+  handleMouseDown(e) {
+    e.preventDefault();
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+  }
+
+  handleMouseMove(e) {
+    if (this.props.onResize) {
+      this.props.onResize(e.clientX);
+    }
+  }
+
+  handleMouseUp() {
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  render() {
+    return (
+      <div
+        onMouseDown={this.handleMouseDown}
+        className={styles.resizer}
+      />
+    );
+  }
+}
+
+export default PanelResizer;