@coding-script/script-engine 0.0.5 → 0.0.7

package/dist/components/theme-colors.js

@@ -41,6 +41,9 @@ function ensureScrollbarStyle() {
     .${SCROLL_CLASS}::-webkit-scrollbar-track { background: transparent; }
     body.se-panel-resizing { cursor: col-resize !important; user-select: none !important; }
     body.se-panel-resizing * { cursor: col-resize !important; user-select: none !important; }
+    .se-desc-tip p { margin: 0 0 4px 0; }
+    .se-desc-tip p:last-child { margin-bottom: 0; }
+    .se-desc-tip code { font-family: Menlo, Consolas, monospace; font-size: 11px; }
   `;
     document.head.appendChild(style);
 }

package/dist/components/toolbar.js

@@ -2,7 +2,7 @@ import react, { useCallback, useEffect, useRef, useState } from "react";
 import { ToolbarButton } from "./toolbar-button.js";
 import { FormatIcon } from "./format-icon.js";
 import { MaximizeIcon, MinimizeIcon } from "./fullscreen-icon.js";
-import { themes } from "./theme-colors.js";
+import { ensureScrollbarStyle, themes } from "./theme-colors.js";
 const HammerIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
         width: "14",
         height: "14",
@@ -51,17 +51,6 @@ function calcTooltipPos(anchorRect, el) {
         maxHeight: Math.max(maxHeight, 80)
     };
 }
-const KV_RE = /^([^:]+):\s*([\s\S]+)$/;
-function renderDescLine(line, accent) {
-    const m = line.match(KV_RE);
-    if (m) return /*#__PURE__*/ react.createElement("span", null, /*#__PURE__*/ react.createElement("span", {
-        style: {
-            color: accent,
-            fontWeight: 600
-        }
-    }, m[1]), /*#__PURE__*/ react.createElement("span", null, ": ", m[2]));
-    return line;
-}
 const QuestionIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
         width: "13",
         height: "13",
@@ -104,6 +93,7 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
     }, []);
     useEffect(()=>{
         if (!showDesc) return;
+        ensureScrollbarStyle();
         updateTipPos();
         window.addEventListener('scroll', updateTipPos, true);
         window.addEventListener('resize', updateTipPos);
@@ -125,7 +115,7 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
     }, [
         description
     ]);
-    const descLines = description ? description.replace(/\\n/g, '\n').split('\n').filter((l)=>l.trim()) : [];
+    const descHtml = description ? description.replace(/\\n/g, '\n').replace(/\n/g, '<br>') : '';
     const handleThemeToggle = ()=>{
         const next = isDark ? 'light' : 'dark';
         onThemeChange?.(next);
@@ -155,7 +145,7 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
         style: {
             marginRight: 'auto'
         }
-    }), descLines.length > 0 && /*#__PURE__*/ react.createElement(ToolbarButton, {
+    }), descHtml && /*#__PURE__*/ react.createElement(ToolbarButton, {
         ref: descBtnRef,
         label: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(QuestionIcon, {
             color: "currentColor"
@@ -216,8 +206,9 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
             textColor: item.textColor,
             borderColor: item.borderColor,
             onClick: item.onClick
-        })), toolbarExtra, showDesc && tipPos && descLines.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        })), toolbarExtra, showDesc && tipPos && descHtml && /*#__PURE__*/ react.createElement("div", {
         ref: tipRef,
+        className: "se-desc-tip",
         style: {
             position: 'fixed',
             top: tipPos.top,
@@ -231,17 +222,15 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
             borderRadius: 6,
             color: colors.text,
             fontSize: 12,
-            lineHeight: 1.65,
+            lineHeight: 1.5,
             wordBreak: 'break-word',
             zIndex: 9999,
             boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
             pointerEvents: 'auto'
+        },
+        dangerouslySetInnerHTML: {
+            __html: descHtml
         }
-    }, descLines.map((line, i)=>/*#__PURE__*/ react.createElement("div", {
-            key: i,
-            style: {
-                marginBottom: i < descLines.length - 1 ? 4 : 0
-            }
-        }, renderDescLine(line, colors.accent)))));
+    }));
 };
 export { Toolbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-script/script-engine",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "script-engine components",
   "keywords": [
     "coding-script",