@coding-script/script-engine 0.0.1

package/dist/components/expand-sidebar-button.js

@@ -0,0 +1,27 @@
+import react, { useState } from "react";
+const ExpandSidebarButton = ({ borderColor, expandBtnColor, expandBtnBg, onClick })=>{
+    const [hovered, setHovered] = useState(false);
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: onClick,
+        onMouseEnter: ()=>setHovered(true),
+        onMouseLeave: ()=>setHovered(false),
+        style: {
+            position: 'absolute',
+            top: 4,
+            right: 4,
+            zIndex: 10,
+            background: hovered ? expandBtnBg : 'transparent',
+            border: `1px solid ${borderColor}`,
+            color: expandBtnColor,
+            cursor: 'pointer',
+            fontSize: 12,
+            padding: '3px 6px',
+            borderRadius: 3,
+            lineHeight: 1,
+            opacity: hovered ? 1 : 0.6,
+            transition: 'opacity 0.2s, background 0.2s'
+        },
+        title: "展开属性面板"
+    }, "属性面板 ◀");
+};
+export { ExpandSidebarButton };

package/dist/components/field-row.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ScriptFieldInfo } from '../types';
+import type { ThemeColors } from './theme-colors';
+export interface FieldRowProps {
+    field: ScriptFieldInfo;
+    colors: ThemeColors;
+}
+export declare const FieldRow: React.FC<FieldRowProps>;

package/dist/components/field-row.js

@@ -0,0 +1,46 @@
+import react, { useState } from "react";
+const FieldRow = ({ field, colors })=>{
+    const [hovered, setHovered] = useState(false);
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '4px 12px 4px 28px',
+            cursor: 'default',
+            backgroundColor: hovered ? colors.hover : 'transparent'
+        },
+        onMouseEnter: ()=>setHovered(true),
+        onMouseLeave: ()=>setHovered(false),
+        title: field.description ? `${field.name}: ${field.dataType} — ${field.description}` : `${field.name}: ${field.dataType}`
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 12
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.fieldColor,
+            fontSize: 10,
+            flexShrink: 0
+        }
+    }, "◇"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.text,
+            fontWeight: 500
+        }
+    }, field.name), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.typeColor,
+            fontSize: 11,
+            marginLeft: 'auto'
+        }
+    }, field.dataType)), field.description && /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: colors.textSecondary,
+            marginTop: 2,
+            paddingLeft: 16
+        }
+    }, field.description));
+};
+export { FieldRow };

package/dist/components/function-row.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ScriptFunctionInfo } from '../types';
+import type { ThemeColors } from './theme-colors';
+export interface FunctionRowProps {
+    func: ScriptFunctionInfo;
+    colors: ThemeColors;
+}
+export declare const FunctionRow: React.FC<FunctionRowProps>;

package/dist/components/function-row.js

@@ -0,0 +1,47 @@
+import react, { useState } from "react";
+const FunctionRow = ({ func, colors })=>{
+    const [hovered, setHovered] = useState(false);
+    const params = func.parameters.map((p)=>`${p.name}: ${p.dataType}`).join(', ');
+    const sig = `${func.name}(${params})`;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '4px 12px 4px 28px',
+            cursor: 'default',
+            backgroundColor: hovered ? colors.hover : 'transparent'
+        },
+        onMouseEnter: ()=>setHovered(true),
+        onMouseLeave: ()=>setHovered(false),
+        title: func.description ? `${sig} — ${func.description}` : sig
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 12
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.methodColor,
+            fontSize: 11,
+            flexShrink: 0
+        }
+    }, "ƒ"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.text,
+            fontWeight: 500
+        }
+    }, func.name), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.textSecondary,
+            fontSize: 11
+        }
+    }, "(", params, ")")), func.description && /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: colors.textSecondary,
+            marginTop: 2,
+            paddingLeft: 16
+        }
+    }, func.description));
+};
+export { FunctionRow };

package/dist/components/index.d.ts

@@ -0,0 +1,28 @@
+export { themes, SCROLL_CLASS, ensureScrollbarStyle } from './theme-colors';
+export type { ThemeColors } from './theme-colors';
+export { ToolbarButton } from './toolbar-button';
+export type { ToolbarButtonProps } from './toolbar-button';
+export { Toolbar } from './toolbar';
+export type { ToolbarProps } from './toolbar';
+export { ExpandSidebarButton } from './expand-sidebar-button';
+export type { ExpandSidebarButtonProps } from './expand-sidebar-button';
+export { DragHandle } from './drag-handle';
+export type { DragHandleProps } from './drag-handle';
+export { PanelHeader } from './panel-header';
+export type { PanelHeaderProps } from './panel-header';
+export { SectionHeader } from './section-header';
+export type { SectionHeaderProps } from './section-header';
+export { VariableRow } from './variable-row';
+export type { VariableRowProps } from './variable-row';
+export { FieldRow } from './field-row';
+export type { FieldRowProps } from './field-row';
+export { FunctionRow } from './function-row';
+export type { FunctionRowProps } from './function-row';
+export { TypeSection } from './type-section';
+export type { TypeSectionProps } from './type-section';
+export { MainFunctionSection } from './main-function-section';
+export type { MainFunctionSectionProps } from './main-function-section';
+export { VariablesSection } from './variables-section';
+export type { VariablesSectionProps } from './variables-section';
+export { DataTypesSection } from './data-types-section';
+export type { DataTypesSectionProps } from './data-types-section';

package/dist/components/index.js

@@ -0,0 +1,14 @@
+export { SCROLL_CLASS, ensureScrollbarStyle, themes } from "./theme-colors.js";
+export { ToolbarButton } from "./toolbar-button.js";
+export { Toolbar } from "./toolbar.js";
+export { ExpandSidebarButton } from "./expand-sidebar-button.js";
+export { DragHandle } from "./drag-handle.js";
+export { PanelHeader } from "./panel-header.js";
+export { SectionHeader } from "./section-header.js";
+export { VariableRow } from "./variable-row.js";
+export { FieldRow } from "./field-row.js";
+export { FunctionRow } from "./function-row.js";
+export { TypeSection } from "./type-section.js";
+export { MainFunctionSection } from "./main-function-section.js";
+export { VariablesSection } from "./variables-section.js";
+export { DataTypesSection } from "./data-types-section.js";

package/dist/components/main-function-section.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ScriptMetadata } from '../types';
+import type { ThemeColors } from './theme-colors';
+export interface MainFunctionSectionProps {
+    metadata: ScriptMetadata;
+    colors: ThemeColors;
+}
+export declare const MainFunctionSection: React.FC<MainFunctionSectionProps>;

package/dist/components/main-function-section.js

@@ -0,0 +1,40 @@
+import react from "react";
+import { SectionHeader } from "./section-header.js";
+const MainFunctionSection = ({ metadata, colors })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(SectionHeader, {
+        colors: colors,
+        label: "主函数"
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '4px 12px 4px 20px'
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 12
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.methodColor,
+            fontSize: 11,
+            flexShrink: 0
+        }
+    }, "ƒ"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.text,
+            fontWeight: 500
+        }
+    }, metadata.mainMethod), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.textSecondary,
+            fontSize: 11
+        }
+    }, "(", metadata.requests.map((r)=>`${r.name}: ${r.dataType}`).join(', '), ")"), metadata.returnType && /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.typeColor,
+            fontSize: 11,
+            marginLeft: 'auto'
+        }
+    }, "→ ", metadata.returnType))));
+export { MainFunctionSection };

package/dist/components/panel-header.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ThemeColors } from './theme-colors';
+export interface PanelHeaderProps {
+    colors: ThemeColors;
+    onCollapse: () => void;
+}
+export declare const PanelHeader: React.FC<PanelHeaderProps>;

package/dist/components/panel-header.js

@@ -0,0 +1,33 @@
+import react, { useState } from "react";
+const PanelHeader = ({ colors, onCollapse })=>{
+    const [collapseHovered, setCollapseHovered] = useState(false);
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '8px 12px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            borderBottom: `1px solid ${colors.border}`,
+            backgroundColor: colors.headerBg,
+            fontWeight: 600,
+            fontSize: 13,
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement("span", null, "\uD83D\uDCCB 属性面板"), /*#__PURE__*/ react.createElement("button", {
+        onClick: onCollapse,
+        onMouseEnter: ()=>setCollapseHovered(true),
+        onMouseLeave: ()=>setCollapseHovered(false),
+        style: {
+            background: collapseHovered ? colors.hover : 'none',
+            border: 'none',
+            color: colors.textSecondary,
+            cursor: 'pointer',
+            fontSize: 14,
+            padding: '2px 6px',
+            borderRadius: 3,
+            lineHeight: 1
+        },
+        title: "收起属性面板"
+    }, "▶"));
+};
+export { PanelHeader };

package/dist/components/section-header.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ThemeColors } from './theme-colors';
+export interface SectionHeaderProps {
+    colors: ThemeColors;
+    label: string;
+}
+export declare const SectionHeader: React.FC<SectionHeaderProps>;

package/dist/components/section-header.js

@@ -0,0 +1,12 @@
+import react from "react";
+const SectionHeader = ({ colors, label })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '6px 12px 4px',
+            fontSize: 11,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color: colors.textSecondary,
+            fontWeight: 600
+        }
+    }, label);
+export { SectionHeader };

package/dist/components/theme-colors.d.ts

@@ -0,0 +1,46 @@
+export declare const themes: {
+    readonly dark: {
+        readonly bg: "#21252b";
+        readonly text: "#abb2bf";
+        readonly textSecondary: "#7f848e";
+        readonly border: "#434343";
+        readonly hover: "#2c313a";
+        readonly accent: "#61afef";
+        readonly headerBg: "#282c34";
+        readonly variableBg: "#2c313a";
+        readonly fieldColor: "#61afef";
+        readonly methodColor: "#c678dd";
+        readonly typeColor: "#e5c07b";
+        readonly scrollThumb: "#4b5263";
+    };
+    readonly light: {
+        readonly bg: "#ffffff";
+        readonly text: "#333333";
+        readonly textSecondary: "#888888";
+        readonly border: "#d9d9d9";
+        readonly hover: "#f0f0f0";
+        readonly accent: "#1677ff";
+        readonly headerBg: "#fafafa";
+        readonly variableBg: "#f5f5f5";
+        readonly fieldColor: "#1677ff";
+        readonly methodColor: "#722ed1";
+        readonly typeColor: "#d48806";
+        readonly scrollThumb: "#c1c1c1";
+    };
+};
+export interface ThemeColors {
+    bg: string;
+    text: string;
+    textSecondary: string;
+    border: string;
+    hover: string;
+    accent: string;
+    headerBg: string;
+    variableBg: string;
+    fieldColor: string;
+    methodColor: string;
+    typeColor: string;
+    scrollThumb: string;
+}
+export declare const SCROLL_CLASS = "se-type-panel-scroll";
+export declare function ensureScrollbarStyle(): void;

package/dist/components/theme-colors.js

@@ -0,0 +1,47 @@
+const themes = {
+    dark: {
+        bg: '#21252b',
+        text: '#abb2bf',
+        textSecondary: '#7f848e',
+        border: '#434343',
+        hover: '#2c313a',
+        accent: '#61afef',
+        headerBg: '#282c34',
+        variableBg: '#2c313a',
+        fieldColor: '#61afef',
+        methodColor: '#c678dd',
+        typeColor: '#e5c07b',
+        scrollThumb: '#4b5263'
+    },
+    light: {
+        bg: '#ffffff',
+        text: '#333333',
+        textSecondary: '#888888',
+        border: '#d9d9d9',
+        hover: '#f0f0f0',
+        accent: '#1677ff',
+        headerBg: '#fafafa',
+        variableBg: '#f5f5f5',
+        fieldColor: '#1677ff',
+        methodColor: '#722ed1',
+        typeColor: '#d48806',
+        scrollThumb: '#c1c1c1'
+    }
+};
+const SCROLL_CLASS = 'se-type-panel-scroll';
+const STYLE_ID = "script-engine-type-panel-style";
+function ensureScrollbarStyle() {
+    if ("u" < typeof document) return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+    .${SCROLL_CLASS}::-webkit-scrollbar { width: 6px; }
+    .${SCROLL_CLASS}::-webkit-scrollbar-thumb { background: #4b5263; border-radius: 3px; }
+    .${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; }
+  `;
+    document.head.appendChild(style);
+}
+export { SCROLL_CLASS, ensureScrollbarStyle, themes };

package/dist/components/toolbar-button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ToolbarButtonProps {
+    label: React.ReactNode;
+    title: string;
+    bg: string;
+    hoverBg: string;
+    color: string;
+    border: string;
+    onClick: () => void;
+}
+export declare const ToolbarButton: React.FC<ToolbarButtonProps>;

package/dist/components/toolbar-button.js

@@ -0,0 +1,26 @@
+import react, { useState } from "react";
+const ToolbarButton = ({ label, title, bg, hoverBg, color, border, onClick })=>{
+    const [hovered, setHovered] = useState(false);
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: onClick,
+        onMouseEnter: ()=>setHovered(true),
+        onMouseLeave: ()=>setHovered(false),
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 4,
+            background: hovered ? hoverBg : bg,
+            border: `1px solid ${border}`,
+            color,
+            cursor: 'pointer',
+            fontSize: 12,
+            padding: '4px 10px',
+            borderRadius: 4,
+            lineHeight: 1.4,
+            whiteSpace: 'nowrap',
+            transition: 'background 0.15s'
+        },
+        title: title
+    }, label);
+};
+export { ToolbarButton };

package/dist/components/toolbar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ToolbarProps {
+    title?: string;
+    theme: 'dark' | 'light';
+    onThemeChange?: (theme: 'dark' | 'light') => void;
+    onCompile?: () => void;
+}
+export declare const Toolbar: React.FC<ToolbarProps>;

package/dist/components/toolbar.js

@@ -0,0 +1,85 @@
+import react from "react";
+import { ToolbarButton } from "./toolbar-button.js";
+const HammerIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        style: {
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement("rect", {
+        x: "3",
+        y: "6",
+        width: "12",
+        height: "5",
+        rx: "1",
+        fill: color,
+        transform: "rotate(-25 9 8.5)"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "11",
+        y: "9",
+        width: "2.5",
+        height: "11",
+        rx: "1",
+        fill: color,
+        opacity: 0.8,
+        transform: "rotate(-25 12.25 14.5)"
+    }));
+const Toolbar = ({ title, theme, onThemeChange, onCompile })=>{
+    const isDark = 'dark' === theme;
+    const borderColor = isDark ? '#434343' : '#d9d9d9';
+    const toolbarBg = isDark ? '#282c34' : '#fafafa';
+    const toolbarText = isDark ? '#abb2bf' : '#333';
+    const btnBg = isDark ? '#2c313a' : '#f0f0f0';
+    const btnHoverBg = isDark ? '#3e4451' : '#e0e0e0';
+    const handleThemeToggle = ()=>{
+        const next = isDark ? 'light' : 'dark';
+        onThemeChange?.(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '6px 12px',
+            backgroundColor: toolbarBg,
+            borderBottom: `1px solid ${borderColor}`,
+            borderRadius: '6px 6px 0 0',
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            fontSize: 13
+        }
+    }, title && /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: toolbarText,
+            fontWeight: 600,
+            marginRight: 'auto',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }
+    }, title), !title && /*#__PURE__*/ react.createElement("span", {
+        style: {
+            marginRight: 'auto'
+        }
+    }), /*#__PURE__*/ react.createElement(ToolbarButton, {
+        label: isDark ? '🌞 浅色模式' : '🌙 深色模式',
+        title: isDark ? '切换到浅色主题' : '切换到深色主题',
+        bg: btnBg,
+        hoverBg: btnHoverBg,
+        color: toolbarText,
+        border: borderColor,
+        onClick: handleThemeToggle
+    }), onCompile && /*#__PURE__*/ react.createElement(ToolbarButton, {
+        label: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(HammerIcon, {
+            color: isDark ? '#98c379' : '#389e0d'
+        }), "编译验证"),
+        title: "编译并验证脚本",
+        bg: isDark ? '#2d5a27' : '#e6f4e5',
+        hoverBg: isDark ? '#3a7033' : '#d4ecd3',
+        color: isDark ? '#98c379' : '#389e0d',
+        border: isDark ? '#2d5a27' : '#b7eb8f',
+        onClick: onCompile
+    }));
+};
+export { Toolbar };

package/dist/components/type-section.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ScriptTypeInfo } from '../types';
+import type { ThemeColors } from './theme-colors';
+export interface TypeSectionProps {
+    typeInfo: ScriptTypeInfo;
+    expanded: boolean;
+    onToggle: () => void;
+    colors: ThemeColors;
+}
+export declare const TypeSection: React.FC<TypeSectionProps>;

package/dist/components/type-section.js

@@ -0,0 +1,58 @@
+import react, { useState } from "react";
+import { FieldRow } from "./field-row.js";
+import { FunctionRow } from "./function-row.js";
+const TypeSection = ({ typeInfo, expanded, onToggle, colors })=>{
+    const [hovered, setHovered] = useState(false);
+    const hasMembers = typeInfo.fields.length > 0 || typeInfo.functions.length > 0;
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '5px 12px',
+            cursor: hasMembers ? 'pointer' : 'default',
+            userSelect: 'none',
+            backgroundColor: hovered ? colors.hover : 'transparent'
+        },
+        onClick: hasMembers ? onToggle : void 0,
+        onMouseEnter: ()=>setHovered(true),
+        onMouseLeave: ()=>setHovered(false),
+        title: typeInfo.description || typeInfo.dataType
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 13
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 10,
+            width: 12,
+            textAlign: 'center',
+            flexShrink: 0
+        }
+    }, hasMembers ? expanded ? '▼' : '▶' : ''), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.typeColor,
+            fontWeight: 600
+        }
+    }, typeInfo.dataType)), typeInfo.description && /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: colors.textSecondary,
+            marginTop: 2,
+            paddingLeft: 18
+        }
+    }, typeInfo.description)), expanded && /*#__PURE__*/ react.createElement("div", null, [
+        ...typeInfo.fields
+    ].sort((a, b)=>a.name.localeCompare(b.name)).map((field)=>/*#__PURE__*/ react.createElement(FieldRow, {
+            key: field.name,
+            field: field,
+            colors: colors
+        })), [
+        ...typeInfo.functions
+    ].sort((a, b)=>a.name.localeCompare(b.name)).map((func)=>/*#__PURE__*/ react.createElement(FunctionRow, {
+            key: func.name,
+            func: func,
+            colors: colors
+        }))));
+};
+export { TypeSection };

package/dist/components/variable-row.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ThemeColors } from './theme-colors';
+export interface VariableRowProps {
+    name: string;
+    dataType: string;
+    description?: string;
+    colors: ThemeColors;
+}
+export declare const VariableRow: React.FC<VariableRowProps>;

package/dist/components/variable-row.js

@@ -0,0 +1,38 @@
+import react from "react";
+const VariableRow = ({ name, dataType, description, colors })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: '4px 12px 4px 20px'
+        },
+        title: `${name}: ${dataType}${description ? ` — ${description}` : ''}`
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 12
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.accent,
+            fontSize: 10
+        }
+    }, "◆"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.text,
+            fontWeight: 500
+        }
+    }, name), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            color: colors.typeColor,
+            marginLeft: 'auto',
+            fontSize: 11
+        }
+    }, dataType)), description && /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: colors.textSecondary,
+            marginTop: 2,
+            paddingLeft: 16
+        }
+    }, description));
+export { VariableRow };

package/dist/components/variables-section.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ScriptBindInfo, ScriptRequestInfo } from '../types';
+import type { ThemeColors } from './theme-colors';
+export interface VariablesSectionProps {
+    sortedBinds: ScriptBindInfo[];
+    sortedRequests: ScriptRequestInfo[];
+    colors: ThemeColors;
+}
+export declare const VariablesSection: React.FC<VariablesSectionProps>;