@ptengine/inline-editor 0.0.0-stage → 0.1.0

package/dist/locales.js

@@ -0,0 +1,545 @@
+export const zhCN = {
+    inlineCanvas: {
+        action: {
+            title: '点击动作',
+            enable: '启用点击动作',
+            type: '动作类型',
+            link: '打开链接',
+            line: 'LINE',
+            tel: '拨打电话',
+            openPopup: '打开弹窗',
+            copiedText: '复制文本',
+            downloadFile: '下载文件',
+            runCode: '执行代码',
+            linkUrl: '链接地址',
+            lineUrl: 'LINE 地址',
+            openNewTab: '新标签页打开',
+            phone: '电话号码',
+            popupId: '弹窗 ID',
+            copyText: '要复制的文本',
+            fileUrl: '文件地址',
+            code: '代码'
+        },
+        video: {
+            title: '替换视频',
+            url: '视频地址',
+            hint: '支持 <video> 与 YouTube 内嵌 iframe'
+        },
+        insert: {
+            title: '插入元素',
+            html: 'HTML',
+            position: '插入位置'
+        },
+        image: {
+            replaceTitle: '替换图片',
+            settingTitle: '图片设置',
+            url: '图片地址',
+            upload: '上传图片',
+            uploading: '上传中…',
+            alt: '替代文本（alt）',
+            insertPosition: '插入位置'
+        },
+        move: {
+            title: '移动元素',
+            pickTarget: '在画布里点选目标元素',
+            cancel: '取消移动',
+            position: '相对目标的位置',
+            top: '移入开头',
+            bottom: '移入末尾',
+            before: '移到前面',
+            after: '移到后面'
+        },
+        clipboard: {
+            copied: '已复制',
+            nothingToPaste: '剪贴板为空',
+            pastePosition: '粘贴位置',
+            insert: '内部开头',
+            append: '内部末尾',
+            before: '之前',
+            after: '之后'
+        },
+        chrome: {
+            exit: '退出',
+            close: '关闭',
+            save: '保存',
+            preview: '预览',
+            changeList: '改动清单',
+            ai: 'AI 助手',
+            variant: '版本 {{name}}',
+            addVersion: '新增版本',
+            renameVersion: '重命名',
+            renameEmpty: '名字不能为空',
+            renameDuplicate: '已有同名版本',
+            renameSeparator: '名字里不能有「|」',
+            renameTooLong: '名字最多 40 个字',
+            version: '版本',
+            undo: '撤销',
+            redo: '重做',
+            pc: 'PC',
+            mobile: '移动'
+        },
+        version: {
+            switching: '正在切换版本，请稍候'
+        },
+        preview: {
+            loading: '正在加载页面…',
+            ready: '页面已就绪',
+            failed: '页面加载失败',
+            failedHint: '请确认已安装并启用 Ptengine 插件，且该页面允许被嵌入',
+            blockCount: '{{count}} 个区块'
+        },
+        html: {
+            title: '编辑 HTML',
+            tip: '编辑的是整个元素（outerHTML）。保存后 SDK 会用它整体替换原元素。',
+            scriptStripped: '其中 {{count}} 段 script/noscript 会被移除',
+            errorEmpty: '内容不能为空',
+            errorNoElement: '需要一个完整的元素标签，纯文本请用「编辑文字」',
+            errorMultipleRoots: '只能有一个根元素，多个根元素会让后续选择器错位'
+        },
+        text: {
+            title: '编辑文字',
+            tip: '只替换元素内部内容，元素本身与它的样式保持不变。可保留 <br>、<strong> 等内联标记。'
+        },
+        style: {
+            footnote: '每次改动都会记入改动清单，可单条撤销',
+            size: '尺寸',
+            width: '宽',
+            height: '高',
+            typography: '文字',
+            fontFamily: '字体',
+            fontSize: '字号',
+            fontWeight: '字重',
+            lineHeight: '行高',
+            textAlign: '对齐',
+            color: '颜色',
+            background: '背景',
+            backgroundColor: '背景色',
+            spacing: '间距',
+            padding: '内边距',
+            margin: '外边距',
+            border: '边框',
+            borderAll: '边框',
+            borderRadius: '圆角'
+        },
+        toolbar: {
+            screenshot: '截图',
+            replaceVideo: '替换视频',
+            insert: '插入元素',
+            replaceImage: '替换图片',
+            imageSetting: '图片设置',
+            clickAction: '点击动作',
+            move: '移动',
+            copy: '复制',
+            paste: '粘贴',
+            editText: '编辑文字',
+            editStyle: '编辑样式',
+            editHtml: '编辑 HTML',
+            delete: '删除',
+            askAi: '问 AI'
+        },
+        selectorPath: {
+            label: '元素路径'
+        }
+    },
+    taginfo: {
+        A: '链接',
+        B: '粗体',
+        BODY: '正文',
+        BUTTON: '按钮',
+        CAPTION: '图片说明',
+        DIV: '容器',
+        FORM: '表单',
+        H1: '标题 1',
+        H2: '标题 2',
+        H3: '标题 3',
+        I: '斜体',
+        IFRAME: '内嵌框架',
+        IMG: '图片',
+        INPUT: '输入',
+        LABEL: '标签',
+        LI: '列表项',
+        NAV: '导航',
+        OL: '有序列表',
+        OPTION: '选项',
+        P: '段落',
+        PRE: '预定义格式',
+        SELECT: '选择',
+        SPAN: '内嵌容器',
+        TABLE: '表格',
+        TBODY: '表格主体',
+        TD: '表格单元格',
+        TEXTAREA: '文本区域',
+        TFOOT: '表格尾',
+        TH: '表格标题',
+        THEAD: '表格头',
+        TR: '表格行',
+        U: '下划线',
+        UL: '无序列表',
+        VIDEO: '视频'
+    }
+};
+export const enUS = {
+    inlineCanvas: {
+        action: {
+            title: 'Click action',
+            enable: 'Enable click action',
+            type: 'Action type',
+            link: 'Open link',
+            line: 'LINE',
+            tel: 'Call',
+            openPopup: 'Open popup',
+            copiedText: 'Copy text',
+            downloadFile: 'Download file',
+            runCode: 'Run code',
+            linkUrl: 'Link URL',
+            lineUrl: 'LINE URL',
+            openNewTab: 'Open in new tab',
+            phone: 'Phone number',
+            popupId: 'Popup ID',
+            copyText: 'Text to copy',
+            fileUrl: 'File URL',
+            code: 'Code'
+        },
+        video: {
+            title: 'Replace video',
+            url: 'Video URL',
+            hint: 'Supports <video> and embedded YouTube iframes'
+        },
+        insert: {
+            title: 'Insert element',
+            html: 'HTML',
+            position: 'Insert position'
+        },
+        image: {
+            replaceTitle: 'Replace image',
+            settingTitle: 'Image settings',
+            url: 'Image URL',
+            upload: 'Upload image',
+            uploading: 'Uploading…',
+            alt: 'Alternative text (alt)',
+            insertPosition: 'Insert position'
+        },
+        move: {
+            title: 'Move element',
+            pickTarget: 'Pick a target element on the canvas',
+            cancel: 'Cancel move',
+            position: 'Position relative to target',
+            top: 'Inside, first',
+            bottom: 'Inside, last',
+            before: 'Before',
+            after: 'After'
+        },
+        clipboard: {
+            copied: 'Copied',
+            nothingToPaste: 'Clipboard is empty',
+            pastePosition: 'Paste position',
+            insert: 'Inside, first',
+            append: 'Inside, last',
+            before: 'Before',
+            after: 'After'
+        },
+        chrome: {
+            exit: 'Exit',
+            close: 'Close',
+            save: 'Save',
+            preview: 'Preview',
+            changeList: 'Changes',
+            ai: 'AI assistant',
+            variant: 'Variant {{name}}',
+            addVersion: 'Add version',
+            renameVersion: 'Rename',
+            renameEmpty: 'Name cannot be empty',
+            renameDuplicate: 'Another version already has this name',
+            renameSeparator: 'Name cannot contain "|"',
+            renameTooLong: 'Name is limited to 40 characters',
+            version: 'Version',
+            undo: 'Undo',
+            redo: 'Redo',
+            pc: 'Desktop',
+            mobile: 'Mobile'
+        },
+        version: {
+            switching: 'Switching version, please wait'
+        },
+        preview: {
+            loading: 'Loading page…',
+            ready: 'Page ready',
+            failed: 'Failed to load the page',
+            failedHint: 'Make sure the Ptengine extension is installed and enabled, and that this page allows embedding',
+            blockCount: '{{count}} blocks'
+        },
+        html: {
+            title: 'Edit HTML',
+            tip: 'You are editing the whole element (outerHTML). The SDK replaces the original element with it.',
+            scriptStripped: '{{count}} script/noscript block(s) will be removed',
+            errorEmpty: 'Content cannot be empty',
+            errorNoElement: 'A complete element tag is required; use Edit text for plain text',
+            errorMultipleRoots: 'Only one root element is allowed — multiple roots break later selectors'
+        },
+        text: {
+            title: 'Edit text',
+            tip: 'Replaces only the inner content. The element and its styles stay unchanged. Inline tags like <br> and <strong> are kept.'
+        },
+        style: {
+            footnote: 'Every change is recorded in the change list and can be reverted individually',
+            size: 'Size',
+            width: 'Width',
+            height: 'Height',
+            typography: 'Typography',
+            fontFamily: 'Font family',
+            fontSize: 'Font size',
+            fontWeight: 'Font weight',
+            lineHeight: 'Line height',
+            textAlign: 'Align',
+            color: 'Color',
+            background: 'Background',
+            backgroundColor: 'Background color',
+            spacing: 'Spacing',
+            padding: 'Padding',
+            margin: 'Margin',
+            border: 'Border',
+            borderAll: 'Border',
+            borderRadius: 'Corner radius'
+        },
+        toolbar: {
+            screenshot: 'Screenshot',
+            replaceVideo: 'Replace video',
+            insert: 'Insert element',
+            replaceImage: 'Replace image',
+            imageSetting: 'Image settings',
+            clickAction: 'Click action',
+            move: 'Move',
+            copy: 'Copy',
+            paste: 'Paste',
+            editText: 'Edit text',
+            editStyle: 'Edit style',
+            editHtml: 'Edit HTML',
+            delete: 'Delete',
+            askAi: 'Ask AI'
+        },
+        selectorPath: {
+            label: 'Element path'
+        }
+    },
+    taginfo: {
+        A: 'Link',
+        B: 'Bold',
+        BODY: 'Body',
+        BUTTON: 'Button',
+        CAPTION: 'Caption',
+        DIV: 'Container',
+        FORM: 'Form',
+        H1: 'Heading 1',
+        H2: 'Heading 2',
+        H3: 'Heading 3',
+        I: 'Italic',
+        IFRAME: 'Inline frame',
+        IMG: 'Image',
+        INPUT: 'Input',
+        LABEL: 'Label',
+        LI: 'List item',
+        NAV: 'Navigation',
+        OL: 'Ordered list',
+        OPTION: 'Option',
+        P: 'Paragraph',
+        PRE: 'Preformatted',
+        SELECT: 'Select',
+        SPAN: 'Inline container',
+        TABLE: 'Table',
+        TBODY: 'Table body',
+        TD: 'Table cell',
+        TEXTAREA: 'Textarea',
+        TFOOT: 'Table footer',
+        TH: 'Table header cell',
+        THEAD: 'Table header',
+        TR: 'Table row',
+        U: 'Underline',
+        UL: 'Unordered list',
+        VIDEO: 'Video'
+    }
+};
+export const jaJP = {
+    inlineCanvas: {
+        action: {
+            title: 'クリックアクション',
+            enable: 'クリックアクションを有効化',
+            type: 'アクション種別',
+            link: 'リンクを開く',
+            line: 'LINE',
+            tel: '電話をかける',
+            openPopup: 'ポップアップを開く',
+            copiedText: 'テキストをコピー',
+            downloadFile: 'ファイルをダウンロード',
+            runCode: 'コードを実行',
+            linkUrl: 'リンク URL',
+            lineUrl: 'LINE URL',
+            openNewTab: '新しいタブで開く',
+            phone: '電話番号',
+            popupId: 'ポップアップ ID',
+            copyText: 'コピーするテキスト',
+            fileUrl: 'ファイル URL',
+            code: 'コード'
+        },
+        video: {
+            title: '動画を差し替え',
+            url: '動画 URL',
+            hint: '<video> と YouTube 埋め込み iframe に対応'
+        },
+        insert: {
+            title: '要素を挿入',
+            html: 'HTML',
+            position: '挿入位置'
+        },
+        image: {
+            replaceTitle: '画像を差し替え',
+            settingTitle: '画像設定',
+            url: '画像 URL',
+            upload: '画像をアップロード',
+            uploading: 'アップロード中…',
+            alt: '代替テキスト（alt）',
+            insertPosition: '挿入位置'
+        },
+        move: {
+            title: '要素を移動',
+            pickTarget: 'キャンバスで対象要素を選択',
+            cancel: '移動をキャンセル',
+            position: '対象に対する位置',
+            top: '内側の先頭',
+            bottom: '内側の末尾',
+            before: '前',
+            after: '後'
+        },
+        clipboard: {
+            copied: 'コピーしました',
+            nothingToPaste: 'クリップボードが空です',
+            pastePosition: '貼り付け位置',
+            insert: '内側の先頭',
+            append: '内側の末尾',
+            before: '前',
+            after: '後'
+        },
+        chrome: {
+            exit: '終了',
+            close: '閉じる',
+            save: '保存',
+            preview: 'プレビュー',
+            changeList: '変更リスト',
+            ai: 'AI アシスタント',
+            variant: 'バリアント {{name}}',
+            addVersion: 'バージョンを追加',
+            renameVersion: '名前を変更',
+            renameEmpty: '名前を入力してください',
+            renameDuplicate: '同じ名前のバージョンがあります',
+            renameSeparator: '名前に「|」は使えません',
+            renameTooLong: '名前は 40 文字までです',
+            version: 'バージョン',
+            undo: '元に戻す',
+            redo: 'やり直す',
+            pc: 'PC',
+            mobile: 'モバイル'
+        },
+        version: {
+            switching: 'バージョンを切り替えています。しばらくお待ちください'
+        },
+        preview: {
+            loading: 'ページを読み込んでいます…',
+            ready: 'ページの準備ができました',
+            failed: 'ページの読み込みに失敗しました',
+            failedHint: 'Ptengine 拡張機能が有効か、このページが埋め込みを許可しているかをご確認ください',
+            blockCount: '{{count}} ブロック'
+        },
+        html: {
+            title: 'HTML を編集',
+            tip: '要素全体（outerHTML）を編集します。保存後、SDK が元の要素をこれで置き換えます。',
+            scriptStripped: 'うち {{count}} 個の script/noscript は削除されます',
+            errorEmpty: '内容を入力してください',
+            errorNoElement: '完全な要素タグが必要です。プレーンテキストは「テキストを編集」をご利用ください',
+            errorMultipleRoots: 'ルート要素は 1 つだけです。複数あると後続のセレクターがずれます'
+        },
+        text: {
+            title: 'テキストを編集',
+            tip: '要素の中身だけを置き換えます。要素自体とスタイルは変わりません。<br> や <strong> などのインラインタグは保持されます。'
+        },
+        style: {
+            footnote: '変更はすべて変更リストに記録され、個別に取り消せます',
+            size: 'サイズ',
+            width: '幅',
+            height: '高さ',
+            typography: 'テキスト',
+            fontFamily: 'フォント',
+            fontSize: '文字サイズ',
+            fontWeight: '太さ',
+            lineHeight: '行の高さ',
+            textAlign: '揃え',
+            color: '文字色',
+            background: '背景',
+            backgroundColor: '背景色',
+            spacing: '余白',
+            padding: '内側の余白',
+            margin: '外側の余白',
+            border: '枠線',
+            borderAll: '枠線',
+            borderRadius: '角丸'
+        },
+        toolbar: {
+            screenshot: 'スクリーンショット',
+            replaceVideo: '動画を差し替え',
+            insert: '要素を挿入',
+            replaceImage: '画像を差し替え',
+            imageSetting: '画像設定',
+            clickAction: 'クリックアクション',
+            move: '移動',
+            copy: 'コピー',
+            paste: '貼り付け',
+            editText: 'テキストを編集',
+            editStyle: 'スタイルを編集',
+            editHtml: 'HTML を編集',
+            delete: '削除',
+            askAi: 'AI に聞く'
+        },
+        selectorPath: {
+            label: '要素パス'
+        }
+    },
+    taginfo: {
+        A: 'リンク',
+        B: '太字',
+        BODY: '本文',
+        BUTTON: 'ボタン',
+        CAPTION: 'キャプション',
+        DIV: 'コンテナ',
+        FORM: 'フォーム',
+        H1: '見出し 1',
+        H2: '見出し 2',
+        H3: '見出し 3',
+        I: '斜体',
+        IFRAME: 'インラインフレーム',
+        IMG: '画像',
+        INPUT: '入力',
+        LABEL: 'ラベル',
+        LI: 'リスト項目',
+        NAV: 'ナビゲーション',
+        OL: '順序付きリスト',
+        OPTION: '選択肢',
+        P: '段落',
+        PRE: '整形済みテキスト',
+        SELECT: 'セレクト',
+        SPAN: 'インラインコンテナ',
+        TABLE: 'テーブル',
+        TBODY: 'テーブル本体',
+        TD: 'テーブルセル',
+        TEXTAREA: 'テキストエリア',
+        TFOOT: 'テーブルフッター',
+        TH: 'テーブル見出しセル',
+        THEAD: 'テーブルヘッダー',
+        TR: 'テーブル行',
+        U: '下線',
+        UL: '順序なしリスト',
+        VIDEO: '動画'
+    }
+};
+export const inlineEditorLocales = {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+    'ja-JP': jaJP
+};

package/dist/panels/StylePanel.d.ts

@@ -0,0 +1,24 @@
+import type { ElementCapabilities } from '@ptengine/inline-core/protocol';
+/**
+ * 样式面板 —— 替掉画布调试页里那三个 `window.prompt` 之一。
+ *
+ * 分区与字段来自 `styleFields.ts`（与现役 engage-editor 的
+ * `components/context-menu/sections/` 一一对应），本组件只负责渲染与提交。
+ *
+ * **做成浮层而不是常驻右栏**：现役是双层顶栏 + 固定右栏，横向空间被吃掉很多，
+ * 而客户页按 1440 设计、画布本身要尽量宽。浮层只在选中时出现。
+ *
+ * ⚠️ **提交时机是 blur / 回车，不是每次按键**：每次按键提交会让一次「把 18 改成 180」
+ * 的输入产生 `1`→`18`→`180` 三条 change（虽然会被覆盖去重合成一条，但中间两次都
+ * 真的打到了客户页 DOM 上，还各发了一次跨三跳的命令）。
+ */
+export interface StylePanelProps {
+    tag: string;
+    capabilities: ElementCapabilities | null;
+    /** 元素当前的 author 层声明，用作输入框初值。 */
+    declaredStyles?: Record<string, string>;
+    /** 提交一条样式改动。由宿主接到 `changeList.addStyle`。 */
+    onApply: (property: string, value: string) => void | Promise<unknown>;
+    onClose: () => void;
+}
+export declare function StylePanel({ tag, capabilities, declaredStyles, onApply, onClose }: StylePanelProps): import("react").JSX.Element | null;

package/dist/panels/StylePanel.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
+import { Button, Input, Label, NativeSelect, Separator } from '@ptengine/design-components';
+import { composeStyleValue, visibleSections } from './styleFields.js';
+export function StylePanel({ tag, capabilities, declaredStyles = {}, onApply, onClose }) {
+    const { t } = useTranslation();
+    const sections = visibleSections(capabilities);
+    if (sections.length === 0)
+        return null;
+    return (_jsxs("div", { "data-testid": "inline-style-panel", className: "flex w-80 flex-col overflow-hidden rounded-lg border border-[#DFE1E6]\n                bg-white shadow-lg", children: [_jsxs("header", { className: "flex h-11 shrink-0 items-center justify-between border-b\n                border-[#EBECF0] bg-[#F4F5F7] px-3.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("code", { className: "text-xs text-[#6B778C]", children: ["<", tag, ">"] }), _jsx("span", { className: "text-[13px] font-semibold text-[#091E42]", children: t(`taginfo.${tag.toUpperCase()}`, tag) })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('common.close', '关闭'), "data-testid": "inline-style-panel-close", onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "flex max-h-[520px] flex-col overflow-y-auto", children: sections.map((section, index) => (_jsxs("section", { "data-testid": `style-section-${section.id}`, className: "flex flex-col gap-3 px-3.5 py-3.5", children: [index > 0 && _jsx(Separator, { className: "-mt-3.5 mb-0.5" }), _jsx("p", { className: "text-xs font-semibold text-[#091E42]", children: t(section.labelKey) }), _jsx("div", { className: "grid grid-cols-2 gap-2.5", children: section.fields.map(field => (_jsx(StyleFieldInput, { field: field, initial: declaredStyles[field.property] ?? '', onApply: onApply }, field.property))) })] }, section.id))) }), _jsx("footer", { className: "shrink-0 bg-[#F7F8F9] px-3.5 py-3 text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.style.footnote', '每次改动都会记入改动清单，可单条撤销') })] }));
+}
+function StyleFieldInput({ field, initial, onApply }) {
+    const { t } = useTranslation();
+    const [value, setValue] = useState(initial);
+    const [committed, setCommitted] = useState(initial);
+    const commit = () => {
+        const composed = composeStyleValue(field, value);
+        if (!composed || composed === committed)
+            return;
+        setCommitted(composed);
+        void onApply(field.property, composed);
+    };
+    const label = t(field.labelKey);
+    const id = `style-${field.property}`;
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, className: "text-xs font-normal text-[#6B778C]", children: label }), field.kind === 'select' ? (_jsxs(NativeSelect, { id: id, "data-testid": id, value: value, onChange: e => {
+                    const next = e.target.value;
+                    setValue(next);
+                    if (next && next !== committed) {
+                        setCommitted(next);
+                        void onApply(field.property, next);
+                    }
+                }, children: [_jsx("option", { value: "", children: "--" }), field.options?.map(o => (_jsx("option", { value: o, children: o }, o)))] })) : (_jsx(Input, { id: id, "data-testid": id, value: value, type: field.kind === 'color' ? 'text' : 'text', placeholder: field.unit ? field.unit : undefined, onChange: e => setValue(e.target.value), onBlur: commit, onKeyDown: e => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        commit();
+                    }
+                } }))] }));
+}

package/dist/panels/styleFields.d.ts

@@ -0,0 +1,39 @@
+import type { ElementCapabilities } from '@ptengine/inline-core/protocol';
+/**
+ * 样式面板的字段定义 —— **分区与现役 engage-editor 一一对应**
+ * （`components/context-menu/sections/`：Size / Typography / Background / Border /
+ * Margin / Padding / Position / Alignment / SourceAttribute）。
+ *
+ * 做成**数据表**而不是写死在组件里，理由与工具条按钮表相同：分区与字段是**策略**，
+ * 会随产品迭代增减；写成 JSX 分支的话每加一个字段都要改渲染逻辑。
+ *
+ * ⚠️ 每个字段最终产出一条 `elementStyle`(53)，`property` 就是这里的 `property`。
+ * 所以字段名必须是**合法 CSS 属性名** —— 拼错不会报错，只会产出一条 SDK 应用不上的
+ * change（画布里可能因为浏览器容错看起来"生效"了，上线后没效果）。
+ */
+export type StyleFieldKind = 'length' | 'text' | 'color' | 'select';
+export interface StyleField {
+    /** CSS 属性名，直接进 `elementStyle.property`。 */
+    property: string;
+    labelKey: string;
+    kind: StyleFieldKind;
+    /** `length` 类的单位后缀，仅用于输入框展示；写进 change 的是「值+单位」。 */
+    unit?: string;
+    /** `select` 类的候选值。 */
+    options?: string[];
+}
+export interface StyleSection {
+    id: string;
+    labelKey: string;
+    fields: StyleField[];
+    /**
+     * 该分区是否对当前元素可见。省略 = 恒可见。
+     * ⚠️ 判据只用**能力位**（DEC-14 一次往返批量拿到的），不要在这里发新的探测命令
+     * —— 那正是现役 `usesStyleProperty` 往客户页插临时元素的老路（C5）。
+     */
+    visible?: (caps: ElementCapabilities) => boolean;
+}
+export declare const STYLE_SECTIONS: StyleSection[];
+/** 按能力位过滤出该元素可见的分区。 */
+export declare function visibleSections(caps: ElementCapabilities | null): StyleSection[];
+export declare function composeStyleValue(field: StyleField, raw: string): string;