@hankchen/canvas-editor-vue 0.0.0-stage → 0.1.1

package/dist/panel-theme.css

@@ -0,0 +1,254 @@
+/**
+ * 属性面板设计令牌（shadcn/ui 语义令牌的面板命名空间版）。
+ *
+ * 纯 CSS、零构建：令牌全部作用域在面板根 .cn-props 上——面板自带主题、
+ * 不向宿主页面渗漏（宿主无需全局变量）。Tailwind 工具类（组件模板内）由
+ * 宿主的 tailwind 编译器经 @source 扫描本包源码生成，@theme inline 把下面的
+ * --cn-* 映射成 --color-cn-* 颜色族（见 playground/src/style.css 的接线样例）。
+ *
+ * 宿主接入三步：
+ *   1. devDeps 加 tailwindcss + @tailwindcss/vite，vite 插件启用；
+ *   2. 应用 css：@import "tailwindcss"; @source "<本包 src 路径>";
+ *   3. import '@hankchen/canvas-editor-vue/panel-theme.css'
+ *
+ * 主题方向：暗色检视面板（precision-instrument）——深蓝灰底、发丝线分隔、
+ * 天蓝 accent、表格数字。宿主可覆盖 .cn-props 上的 --cn-* 变量换肤。
+ */
+.cn-props {
+    /* 表面与文字 */
+    --cn-bg: #0b1220;
+    --cn-bg-elevated: #101a2e;
+    --cn-fg: #e6edf7;
+    --cn-muted: #7c8ca5;
+
+    /* 边界：容器发丝线 / 输入框描边 */
+    --cn-line: #1e2a40;
+    --cn-field-line: #2a3a57;
+
+    /* 图层行卡片描边（工单 08）：行级独立卡片的发丝线，介于容器线与输入框线
+       之间——只增不改，既有令牌值不动（两板共用本命名空间） */
+    --cn-card-line: #23324d;
+
+    /* 输入底（半透明石板，叠在面板底色上） */
+    --cn-field: rgba(148, 163, 184, 0.07);
+
+    /* accent（天蓝）与其上的可读前景 */
+    --cn-accent: #38bdf8;
+    --cn-accent-soft: rgba(56, 189, 248, 0.12);
+    --cn-on-accent: #06283d;
+
+    /* 表达式前置色（layer-panel-expression-prefix 工单 02）：带标记内容层行内
+       片段串的用色（图层面板 .cn-layers__prefix 消费）；原型 .ex 色值为参考值 */
+    --cn-expression: #5dd3b0;
+
+    /* 危险/告警（预留） */
+    --cn-danger: #f87171;
+
+    /* 数字/代码用等宽字族（面板的「仪器刻度」字形） */
+    --cn-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
+        monospace;
+
+    /* 原生控件（number 步进器、color、checkbox）走暗色渲染 */
+    color-scheme: dark;
+
+    background-color: var(--cn-bg);
+    color: var(--cn-fg);
+}
+
+/* SelectField 的自绘箭头（appearance-none 后由背景 svg 补上指示） */
+.cn-props .cn-select {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8ca5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    background-size: 10px;
+}
+
+.cn-props .cn-select option {
+    background-color: var(--cn-bg-elevated);
+    color: var(--cn-fg);
+}
+
+/* 数据字段表达式态输入框描边（工单 02 落地、工单 06 保留）：取值方式切换已
+   升级为分段选择器（ValueTypeSegmented，tailwind 配方在组件模板），原 {{ }}
+   徽章令牌随控件退役。双类名选择器压过控件上的单类 tailwind border 色 */
+.cn-props .cn-field--expression {
+    border-color: var(--cn-accent);
+}
+
+/* pair 自适应 prefix 切换钮（工票 03）：徽章方钮视觉语言（原 {{ }} 徽章钮同族，
+   该钮已于工单 06 升级为分段选择器）的「自」字徽章。
+   双类名选择器压过控件上的单类 tailwind border 色，无需 !important */
+.cn-props .cn-props__auto-toggle {
+    font-size: 9px;
+    line-height: 1;
+    padding: 3px 3px;
+    border-radius: 4px;
+    border: 1px solid var(--cn-field-line);
+    color: var(--cn-muted);
+    background: transparent;
+    cursor: pointer;
+}
+
+.cn-props .cn-props__auto-toggle:hover {
+    color: var(--cn-fg);
+    border-color: var(--cn-muted);
+}
+
+.cn-props .cn-props__auto-toggle--active {
+    border-color: var(--cn-accent);
+    color: var(--cn-accent);
+    background: var(--cn-accent-soft);
+}
+
+/* 简写控件的模式循环钮（工单 04）：1/2/4 值模式单按钮循环，徽章方钮视觉语言
+   的图标方钮。双类名选择器压过控件上的单类 tailwind
+   border 色，无需 !important */
+.cn-props .cn-props__mode-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border-radius: 4px;
+    border: 1px solid var(--cn-field-line);
+    color: var(--cn-muted);
+    background: transparent;
+    cursor: pointer;
+}
+
+.cn-props .cn-props__mode-toggle:hover {
+    color: var(--cn-fg);
+    border-color: var(--cn-muted);
+}
+
+/* 自适应禁用态的预览值区分展示（工票 03）：模板子树的解析盒非文档权威值，
+   斜体 + 弱化提示（悬停有完整说明），与声明值一眼可辨 */
+.cn-props .cn-field--preview {
+    font-style: italic;
+}
+
+/* ---- 图层行卡片 + 根层拖拽把手（工单 08）----
+   行 = 独立描边卡片条目（非行间分隔线）；描边走新增令牌 --cn-card-line，
+   既有令牌值不动。行卡片的选中/悬停/落点提示状态与把手样式收口在本文件
+   （类名由 LayerPanel.vue 按 ui 分支绑定），不依赖宿主 tailwind 令牌映射；
+   行的几何（内距/字号/行距 gap）仍以 tailwind utility 留在组件模板。 */
+.cn-props .cn-layers__row {
+    border: 1px solid var(--cn-card-line);
+    border-radius: 6px;
+}
+
+.cn-props .cn-layers__row--hovered {
+    border-color: var(--cn-field-line);
+    background-color: var(--cn-field);
+}
+
+.cn-props .cn-layers__row--selected {
+    border-color: var(--cn-accent);
+    background-color: var(--cn-accent-soft);
+    color: var(--cn-accent);
+}
+
+/* 拖放落点提示：插入边点亮（行上半 = 顶边 before，下半 = 底边 after） */
+.cn-props .cn-layers__row--drop-before {
+    border-top-color: var(--cn-accent);
+}
+
+.cn-props .cn-layers__row--drop-after {
+    border-bottom-color: var(--cn-accent);
+}
+
+/* 六点把手：根层行常显（非 hover 门控），拖拽仅从此处发起；行/格不加把手 */
+.cn-props .cn-layers__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 20px;
+    border-radius: 3px;
+    color: var(--cn-muted);
+    cursor: grab;
+}
+
+.cn-props .cn-layers__handle:hover {
+    color: var(--cn-fg);
+    background-color: var(--cn-field);
+}
+
+.cn-props .cn-layers__handle:active {
+    cursor: grabbing;
+}
+
+/* 行内重命名输入框（工单 09）：覆盖行标签同槽（flex-1 由模板 utility 承担）——
+   accent 描边 + 抬升底色标识编辑态，字号/字族与 .cn-layers__label 对齐 */
+.cn-props .cn-layers__rename-input {
+    padding: 0 3px;
+    font-family: var(--cn-font-mono);
+    font-size: 11px;
+    line-height: 16px;
+    color: var(--cn-fg);
+    background-color: var(--cn-bg-elevated);
+    border: 1px solid var(--cn-accent);
+    border-radius: 3px;
+    outline: none;
+}
+
+/* 表达式前置（layer-panel-expression-prefix 工单 02）：带标记内容层行内、拖柄
+   与标签之间的等宽小字片段串（内容与全文提示都由内核投影携带，面板零计算）。
+   溢出契约（spec 决策 7）：名称 flex-1 truncate 先截，前置 flex:none + max-width
+   封顶后自身省略——title 提示完整片段串。字号 10.5px 为原型 .ex 参考值，
+   line-height 对齐行标签 leading-4，行高不因前置变化 */
+.cn-props .cn-layers__prefix {
+    flex: none;
+    max-width: 96px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--cn-font-mono);
+    font-size: 10.5px;
+    line-height: 16px;
+    color: var(--cn-expression);
+}
+
+/* 隐藏行（layer-panel-ux 工单 10）：降不透明度示意不可见态（与闭眼钮常显同源），
+   约 50%——选中/悬停描边保持可辨（隐藏 ≠ 不可操作，显隐/属性编辑照常） */
+.cn-props .cn-layers__row--hidden {
+    opacity: 0.5;
+}
+
+/* 模板子树行（模板创作 spec §2.2 D1）：虚线描边卡片区分「声明态结构」与实体
+   行/格——选中/悬停态换 accent 虚线（意图锁定，具体令牌与 layer-panel-ux 协调） */
+.cn-props .cn-layers__row--template {
+    border-style: dashed;
+    border-color: var(--cn-field-line);
+}
+
+.cn-props .cn-layers__row--template.cn-layers__row--hovered {
+    border-color: var(--cn-accent);
+    border-style: dashed;
+    background-color: var(--cn-field);
+}
+
+.cn-props .cn-layers__row--template.cn-layers__row--selected {
+    border-color: var(--cn-accent);
+    border-style: dashed;
+}
+
+/* 非空校验标错（模板创作 spec §2.4 P4）：拦截期红框——空串永不落库 */
+.cn-props .cn-field--invalid {
+    border-color: var(--cn-danger);
+}
+
+/* ---- 表达式补全浮层（content-completion 工单 04）----
+   portal 到 body（躲 288px 面板 overflow 裁剪）后脱离面板 DOM 子树，根元素
+   自带 .cn-props 重建令牌命名空间；此处只收抬升底色/投影与高亮态（option
+   几何以 tailwind utility 留在组件模板）。 */
+.cn-props.cn-completion {
+    background-color: var(--cn-bg-elevated);
+    box-shadow: 0 16px 40px -12px rgba(2, 6, 23, 0.55);
+}
+
+.cn-props .cn-completion__option--active {
+    background-color: var(--cn-accent-soft);
+    color: var(--cn-accent);
+}

package/dist/property-panel/PropertyField.d.ts

@@ -0,0 +1,65 @@
+import { ResourceStatus } from '@hankchen/canvas-editor';
+import { FieldDef, FieldDisplay } from './fieldSchema';
+import { CompletionSource } from '../shared/completion';
+type __VLS_Props = {
+    field: FieldDef;
+    /** 字段当前值（面板已用 readField 解析，ok:false 的字段不会渲染到这） */
+    value: unknown;
+    /** 数据字段取值方式；undefined = 非 data 字段（无切换钮） */
+    dataMode?: 'static' | 'expression';
+    /**
+     * 补全候选源（面板按字段分发：data 门字段 = 表达式源，rowsPath 标记字段 =
+     * 行相对源，工单 03）；null = 未注入/无接线/降级（浮层恒闭）。
+     */
+    completion?: CompletionSource | null;
+    /** pair 子字段的禁用态替代显示（键 = 子字段绝对键）；其他控件不传 */
+    displays?: Record<string, FieldDisplay>;
+    /**
+     * 行级动态可见提示（placeholder-padding-hint 工单 02）：面板按 schema hint
+     * 谓词求值下发（占位态图片层的 padding 行）；undefined = 无提示行。
+     */
+    hint?: string;
+    /**
+     * 字段值的物化态（面板按当前值查 ui 切片解析）：仅 imageSrc 控件消费
+     * （缩略图角标，与画布失败标识同源）；undefined = 无记录/不适用。
+     */
+    resourceStatus?: ResourceStatus;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: unknown) => any;
+    change: (value: unknown) => any;
+    "sub-commit": (field: FieldDef, value: unknown, final: boolean) => any;
+    "toggle-mode": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: unknown) => any) | undefined;
+    onChange?: ((value: unknown) => any) | undefined;
+    "onSub-commit"?: ((field: FieldDef, value: unknown, final: boolean) => any) | undefined;
+    "onToggle-mode"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    controlRef: unknown;
+    popupRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        state: import('..').ExpressionCompletionState;
+    }> & Readonly<{
+        onSelect?: ((index: number) => any) | undefined;
+    }>, {
+        rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        select: (index: number) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        state: import('..').ExpressionCompletionState;
+    }> & Readonly<{
+        onSelect?: ((index: number) => any) | undefined;
+    }>, {
+        rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }, {}, {}, {}, {}> | null;
+}, any>;
+export default _default;

package/dist/property-panel/PropertyPanel.d.ts

@@ -0,0 +1,6 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/property-panel/controlStyles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 面板控件的 shadcn anatomy 配方（暗色面板命名空间）。
+ *
+ * Tailwind 按文本扫描类名，跨 SFC 复用的配方收口在这里——避免九个控件各写
+ * 一遍 input 样式串。令牌语义见 panel-theme.css（--cn-* → @theme inline →
+ * --color-cn-* → bg-cn-field 等工具类）。
+ */
+/** 文本/数值输入的共有配方：h-7、圆角、发丝描边、focus 天蓝内环；flex-1 撑满行 */
+export declare const fieldBase: string;
+/** 数值输入：右对齐 + 等宽表格数字（仪器刻度） */
+export declare const numberField = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-field text-[11.5px] leading-none text-cn-fg outline-none transition-[border-color,box-shadow,background-color] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-cn-field-line text-right font-mono tabular-nums";
+/** 文本输入：左对齐 */
+export declare const textField: string;
+/** 多行文本：同配方，改为块级纵向 */
+export declare const textareaField: string;
+/** 原生取色器（type=color）：贴边的圆形色票 */
+export declare const colorSwatch: string;

package/dist/property-panel/controls.d.ts

@@ -0,0 +1,3 @@
+import { Component } from 'vue';
+import { FieldControl } from './fieldSchema';
+export declare const controlRegistry: Record<FieldControl, Component>;

package/dist/property-panel/fieldSchema.d.ts

@@ -0,0 +1,116 @@
+import { Layer, LayerPath, LayerType, ResourceStatusMap } from '@hankchen/canvas-editor';
+/** 控件种类（与 controls.ts 的组件注册表一一对应） */
+export type FieldControl = 'number' | 'text' | 'textarea' | 'color' | 'select' | 'boolean' | 'pair' | 'anchor' | 'align' | 'padding' | 'border' | 'font' | 'imageSrc';
+/**
+ * 自适应 prefix 钮描述（pair 子字段用）：key 相对 pair 值对象上的布尔键；
+ * 开启 → 本输入禁用。placeholder 是禁用态兜底占位（盒未解析时；正常路径面板
+ * 传 layerBoxAt 解析值，宽列随自然宽求值落地与高列同源，autowidth 工单 04）。
+ */
+export interface FieldAutoToggle {
+    readonly key: readonly string[];
+    readonly placeholder?: string;
+}
+/**
+ * 禁用态替代显示（pair 自适应列，面板计算后经 PropertyField 下发）：
+ * value 为展示数值（面板侧已做浮点噪声收整）；preview = 模板子树的预览盒
+ * 值（非文档权威值），控件据此做区分展示（斜体 + 悬停说明）。
+ */
+export interface FieldDisplay {
+    readonly value: number;
+    readonly preview: boolean;
+}
+export interface FieldDef {
+    /** 图层内字段路径（领域形态）；画布级字段相对画布根 */
+    readonly key: readonly string[];
+    readonly label: string;
+    readonly control: FieldControl;
+    /**
+     * 两列语义行（control:'pair' 专用）：子字段清单，key 相对 pair 值对象
+     * （如 position/shape 对象），数值行内列自描述
+     */
+    readonly items?: readonly FieldDef[];
+    /** 自适应 prefix 钮（pair 子字段用）；缺省 = 无 prefix 的普通数值列 */
+    readonly auto?: FieldAutoToggle;
+    /** 数据字段：提交走 updateData（按 type 分派到 text/src/value），其余走 updateSpec */
+    readonly data?: boolean;
+    /**
+     * 补全标记门（rows-path-completion 工单 03，D6）：'rowsPath' = 裸路径补全
+     * （usePathCompletion，候选源 = 面板 rowsPathSource）——不走 data 门
+     * （rowsPath 是结构语义，表达式补全门不适用）；缺省 = 无标记（data 门字段
+     * 照走 useExpressionCompletion）。
+     */
+    readonly completion?: 'rowsPath';
+    /** 输入框占位文案（text 控件透传） */
+    readonly placeholder?: string;
+    /**
+     * 标签悬停提示（原生 title 属性，placeholder-padding-hint 工单 01）：标签列
+     * 定宽截断不占版面，语义预期差类静态文案挂这里（首个消费方 = padding 行
+     * 「作用于内容盒」）；缺省 = 无
+     */
+    readonly title?: string;
+    /**
+     * 行级动态可见提示（placeholder-padding-hint 工单 02）：按选中层与内核资源态
+     * 切片求值，非 null 时在行下渲染可见提示行——占位态图片层的 padding 语义
+     * （工单 01 悬停 title 的可见性补强面）。纯函数（与内核判定同源），仅图层级
+     * 目标求值；缺省 = 无。文案常量 UNDRAWN_CONTENT_HINT 供测试同源断言。
+     */
+    readonly hint?: (layer: Layer, statuses: ResourceStatusMap) => string | null;
+    /** 非空校验（text 控件）：空提交被控件拦截并标错、不落库（spec §2.4 P4） */
+    readonly nonEmpty?: boolean;
+    /** select 取值域（领域常量原样引用，不自创缩写） */
+    readonly domain?: readonly string[];
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    /** 数值提交向零截断（PHP intval 同门）；padding/lineHeight 等浮点字段不开 */
+    readonly integer?: boolean;
+    /** 颜色字段允许 null（如背景色 = 无填充） */
+    readonly nullable?: boolean;
+    /** 权威字段过滤：谓词为假不渲染（不告警）；pair 子字段同款语义 */
+    readonly visibleWhen?: (layer: Layer) => boolean;
+}
+export interface FieldSection {
+    readonly title: string;
+    readonly fields: readonly FieldDef[];
+}
+/**
+ * 占位态图片层的 padding 行提示文案（placeholder-padding-hint 工单 02，工单
+ * 原文全角逗号）：三种占位态（表达式标记/物化未达 done/内容盒 ≤0）命中即渲染。
+ * 导出供消费方与测试同源断言，避免文案字面漂移。
+ */
+export declare const UNDRAWN_CONTENT_HINT = "\u5F53\u524D\u5C42\u5185\u5BB9\u672A\u7ED8\u5236\uFF0Cpadding \u4E0D\u5F71\u54CD\u9884\u89C8";
+/**
+ * type → 字段组注册表。结构编辑（行列增删/重排）在图层面板（工单 10/12 与
+ * 模板创作 spec §2.2），此处只暴露形状/位置/对齐与数据。
+ */
+export declare const FIELD_SECTIONS_BY_TYPE: Record<LayerType, readonly FieldSection[]>;
+/** 注册表查找的宽容口：白名单之外的 type 串返回空清单（不抛、不告警） */
+export declare function fieldSectionsForType(type: string): readonly FieldSection[];
+/** 图层在容器树里的角色（由路径尾段判定，纯函数） */
+export type LayerRole = 'root' | 'row' | 'cell' | 'content' | 'templateContent';
+export declare function layerRoleAt(path: LayerPath): LayerRole;
+/**
+ * pair 子字段的图层根绝对键（code-review 整改：提交折算、禁用态显示键、
+ * 角色过滤三处共用这一条规则，防键拼接约定漂移）。
+ */
+export declare function pairItemKey(field: FieldDef, item: FieldDef): readonly string[];
+/**
+ * 面板实际渲染的字段组：type 注册表 ∩ 角色权威过滤 ∩ visibleWhen。
+ * pair 行按子字段的绝对键（pairItemKey）逐列过滤——部分隐藏 = 行内少一列，
+ * 全部隐藏才整行不输出；普通字段过滤后为空即不渲染。过滤后为空的 section
+ * 不输出（不渲染空标题）。
+ */
+export declare function fieldSectionsForPath(path: LayerPath, layer: Layer): readonly FieldSection[];
+/** 画布级字段组（未选中图层时）：宽/高 */
+export declare const CANVAS_FIELD_SECTIONS: readonly FieldSection[];
+export type FieldReadResult = {
+    ok: true;
+    value: unknown;
+} | {
+    ok: false;
+};
+/**
+ * 沿字段路径读值。严格领域模型字段全定义，undefined 即路径未命中——
+ * 面板据此跳过渲染且不告警（未知字段过滤的读侧依据）。
+ */
+export declare function readField(target: unknown, key: readonly string[]): FieldReadResult;

package/dist/property-panel/fields/AlignField.d.ts

@@ -0,0 +1,11 @@
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/property-panel/fields/AnchorDisclosureField.d.ts

@@ -0,0 +1,16 @@
+import { Anchor } from '@hankchen/canvas-editor';
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: Anchor;
+    /** 开合状态（store ui 分支的投影）；本组件只上报 toggle，不自持状态 */
+    expanded: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: "left" | "center" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") => any;
+    toggle: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: "left" | "center" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") => any) | undefined;
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/property-panel/fields/BooleanField.d.ts

@@ -0,0 +1,13 @@
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, HTMLLabelElement>;
+export default _default;

package/dist/property-panel/fields/BorderField.d.ts

@@ -0,0 +1,14 @@
+import { Border } from '@hankchen/canvas-editor';
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: Border;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: Border) => any;
+    change: (value: Border) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: Border) => any) | undefined;
+    onChange?: ((value: Border) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/property-panel/fields/BorderWidthInput.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    /** 代表边的当前宽度；null = 关（空显示） */
+    value: number | null;
+    /** 无障碍标签（框语义如 上下/左右/上…） */
+    label: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: number) => any;
+    change: (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: number) => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/property-panel/fields/ColorField.d.ts

@@ -0,0 +1,13 @@
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: string | null;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: string | null) => any;
+    change: (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: string | null) => any) | undefined;
+    onChange?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/property-panel/fields/FontField.d.ts

@@ -0,0 +1,15 @@
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: string) => any;
+    change: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    fileInput: HTMLInputElement;
+}, any>;
+export default _default;

package/dist/property-panel/fields/ImageSrcField.d.ts

@@ -0,0 +1,20 @@
+import { ResourceStatus } from '@hankchen/canvas-editor';
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: string | null;
+    /** 取值方式（面板按 expression 标记派生）：表达式态走表达式视觉与退化面 */
+    dataMode?: 'static' | 'expression';
+    /** 当前 src 的物化态（面板从 ui.resourceStatuses 切片解析下发）：角标与画布失败标识同源 */
+    resourceStatus?: ResourceStatus;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: string) => any;
+    change: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    fileInput: HTMLInputElement;
+}, any>;
+export default _default;

package/dist/property-panel/fields/NumberField.d.ts

@@ -0,0 +1,13 @@
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: number) => any;
+    change: (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: number) => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/property-panel/fields/PaddingField.d.ts

@@ -0,0 +1,14 @@
+import { Padding } from '@hankchen/canvas-editor';
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: Padding;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: Padding) => any;
+    change: (value: Padding) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: Padding) => any) | undefined;
+    onChange?: ((value: Padding) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/property-panel/fields/PairField.d.ts

@@ -0,0 +1,19 @@
+import { FieldDef, FieldDisplay } from '../fieldSchema';
+type __VLS_Props = {
+    /** 行级标签在本控件外由 PropertyField 渲染；items 自描述列含义 */
+    field: FieldDef;
+    /** pair 值对象切片（position/shape 等父对象），子字段按相对键读值 */
+    modelValue: Record<string, unknown>;
+    /** 禁用态替代显示（键 = pairItemKey 的点串）；无显示值的禁用列显 auto 占位 */
+    displays?: Record<string, FieldDisplay>;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: unknown) => any;
+    change: (value: unknown) => any;
+    "sub-commit": (field: FieldDef, value: unknown, final: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((value: unknown) => any) | undefined;
+    onChange?: ((value: unknown) => any) | undefined;
+    "onSub-commit"?: ((field: FieldDef, value: unknown, final: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/property-panel/fields/SelectField.d.ts

@@ -0,0 +1,11 @@
+import { FieldDef } from '../fieldSchema';
+type __VLS_Props = {
+    field: FieldDef;
+    modelValue: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSelectElement>;
+export default _default;