@hankchen/canvas-editor-vue 0.2.0 → 0.4.0

package/dist/property-panel.js

@@ -1,2 +1,3 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./property-panel-C2etsIhF.js";
-export { a as CANVAS_FIELD_SECTIONS, p as FIELD_SECTIONS_BY_TYPE, d as FONT_PICKER_KEY, e as IMAGE_UPLOAD_KEY, s as PropertyField, f as PropertyPanel, i as controlRegistry, n as fieldSectionsForPath, r as fieldSectionsForType, t as injectFontPicker, c as injectImageUpload, l as layerRoleAt, o as readField, u as usePropertyPanel };
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./property-panel-B32ZBQdf.js";
+import { i as f, r as p } from "./uploadFile-D1RY-ji0.js";
+export { l as CANVAS_FIELD_SECTIONS, t as FIELD_SECTIONS_BY_TYPE, p as FONT_PICKER_KEY, e as IMAGE_UPLOAD_KEY, o as PropertyField, u as PropertyPanel, i as controlRegistry, a as fieldSectionsForPath, d as fieldSectionsForType, f as injectFontPicker, s as injectImageUpload, n as layerRoleAt, r as readField, c as usePropertyPanel };

package/dist/resourceTemplate-cdcQtp9a.js

@@ -0,0 +1,246 @@
+import { l as e, r as t } from "./popupPosition-Ck5Gsvjy.js";
+import { Fragment as n, Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as ee, onScopeDispose as f, openBlock as p, ref as m, renderList as te, toDisplayString as h, watch as g, withModifiers as _ } from "vue";
+//#region ../canvas-editor/src/shared/resourcePath.ts
+function v(e, t) {
+	return {
+		kind: t,
+		start: 0,
+		end: e.length,
+		at: {
+			start: 0,
+			end: e.length
+		}
+	};
+}
+function y(t) {
+	let n = t.endsWith("\n") ? t.slice(0, -1) : t, r = /^\{\{([^{}]*)\}\}$/.exec(n);
+	if (r === null) return [v(t, "resource_not_single_ref")];
+	let i = e(r[1] ?? "");
+	return i === "" ? [v(t, "empty_fragment")] : i.includes("(") ? [v(t, "resource_function_call")] : [];
+}
+//#endregion
+//#region src/shared/pathPickerModel.ts
+function b(e, t) {
+	let n = e(t);
+	if (n === null) return [];
+	let r = [];
+	for (let t of n.candidates) t.kind === "path" && t.path !== void 0 && r.push({
+		path: t.path,
+		item: t,
+		drillable: x(e, t.path)
+	});
+	return r;
+}
+function x(e, t) {
+	let n = e(`${t}.`);
+	return n !== null && n.candidates.some((e) => e.kind === "path");
+}
+//#endregion
+//#region src/shared/ExpressionPathPicker.vue?vue&type=script&setup=true&lang.ts
+var S = ["title", "aria-label"], C = ["aria-expanded", "aria-label"], w = ["aria-label"], T = { class: "truncate font-mono" }, ne = {
+	key: 1,
+	class: "cn-pathpicker__empty px-2 py-2 text-cn-muted"
+}, E = [
+	"aria-label",
+	"title",
+	"onClick",
+	"onMousemove"
+], D = { class: "cn-pathpicker__segment min-w-0 truncate font-mono text-cn-fg" }, O = {
+	key: 0,
+	class: "shrink-0 rounded-sm bg-cn-field px-1 py-0.5 text-[9px] leading-none text-cn-muted"
+}, k = {
+	key: 1,
+	class: "min-w-0 flex-1 truncate text-[10px] leading-none text-cn-muted"
+}, A = {
+	key: 2,
+	class: "cn-pathpicker__drill ml-auto shrink-0 text-cn-muted",
+	"aria-hidden": "true"
+}, j = /* @__PURE__ */ l({
+	__name: "ExpressionPathPicker",
+	props: {
+		modelValue: {},
+		source: { type: [Function, null] },
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		placeholder: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: l }) {
+		let v = e, y = l, x = i(() => !v.disabled && v.source !== null), j = m(!1), M = m([]), N = m(0), P = i(() => M.value[M.value.length - 1] ?? null), re = i(() => {
+			let e = M.value[M.value.length - 2];
+			return e === void 0 ? "" : e.label === "" ? "根级字段" : e.label;
+		});
+		function F(e, t) {
+			return {
+				prefix: e,
+				label: t,
+				entries: v.source === null ? [] : b(v.source, e)
+			};
+		}
+		function ie() {
+			x.value && !j.value && (M.value = [F("", "")], N.value = 0, j.value = !0, u(() => {
+				Y(), K.value?.focus();
+			}));
+		}
+		function I() {
+			j.value && (L(), G.value?.focus());
+		}
+		function L() {
+			j.value = !1, M.value = [], N.value = 0;
+		}
+		function R() {
+			j.value ? I() : ie();
+		}
+		function z(e) {
+			v.source !== null && (M.value.push(F(`${e.path}.`, e.path)), N.value = 0, u(Y));
+		}
+		function B() {
+			M.value.length <= 1 || (M.value.pop(), N.value = 0, u(Y));
+		}
+		function V(e) {
+			if (e.drillable) {
+				z(e);
+				return;
+			}
+			y("update:modelValue", e.path), y("change", e.path), I();
+		}
+		function H() {
+			return P.value?.entries[N.value] ?? null;
+		}
+		function U(e) {
+			if (e.key === "Escape") {
+				e.preventDefault(), I();
+				return;
+			}
+			if (e.key === "Tab") {
+				I();
+				return;
+			}
+			let t = P.value?.entries ?? [];
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				let n = t.length;
+				n > 0 && (N.value = (N.value + (e.key === "ArrowDown" ? 1 : n - 1)) % n);
+				return;
+			}
+			if (e.key === "ArrowRight") {
+				let t = H();
+				t?.drillable && (e.preventDefault(), z(t));
+				return;
+			}
+			if (e.key === "ArrowLeft") {
+				M.value.length > 1 && (e.preventDefault(), B());
+				return;
+			}
+			if (e.key === "Enter" || e.key === " ") {
+				let t = H();
+				t !== null && (e.preventDefault(), V(t));
+			}
+		}
+		let W = m(null), G = m(null), K = m(null), q = m(0), J = m(0);
+		function Y() {
+			if (!j.value) return;
+			let e = W.value, n = K.value;
+			if (e === null) return;
+			let r = e.getBoundingClientRect(), i = t({
+				anchor: r,
+				popupWidth: n?.offsetWidth ?? 0,
+				popupHeight: n?.offsetHeight ?? 0,
+				viewportWidth: window.innerWidth,
+				viewportHeight: window.innerHeight
+			});
+			q.value = i.top, J.value = i.left;
+		}
+		function X() {
+			Y();
+		}
+		g(j, (e) => {
+			e ? (window.addEventListener("pointerdown", Z), window.addEventListener("keydown", Q), window.addEventListener("scroll", X, !0), window.addEventListener("resize", X)) : $();
+		});
+		function Z(e) {
+			let t = e.target;
+			t instanceof Node && (W.value?.contains(t) || K.value?.contains(t) || L());
+		}
+		function Q(e) {
+			e.key === "Escape" && I();
+		}
+		function $() {
+			window.removeEventListener("pointerdown", Z), window.removeEventListener("keydown", Q), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X);
+		}
+		return f($, !0), (t, i) => (p(), s("div", {
+			ref_key: "rootRef",
+			ref: W,
+			class: "cn-pathpicker flex w-full items-center gap-1.5"
+		}, [
+			c("div", {
+				class: d(["cn-pathpicker__value min-w-0 flex-1 truncate rounded-md border border-cn-field-line bg-cn-field px-2 py-1.5 font-mono text-[11px] leading-none text-cn-fg", e.modelValue === "" ? "text-cn-muted" : ""]),
+				title: e.modelValue,
+				"aria-label": e.ariaLabel
+			}, h(e.modelValue === "" ? e.placeholder ?? "点击右侧按钮选择字段" : e.modelValue), 11, S),
+			x.value ? (p(), s("button", {
+				key: 0,
+				ref_key: "toggleButton",
+				ref: G,
+				type: "button",
+				class: "cn-pathpicker__toggle h-7 shrink-0 rounded-md border border-cn-field-line bg-cn-field px-1.5 text-[11px] leading-none text-cn-muted transition-colors duration-100 hover:border-cn-muted/40 hover:text-cn-fg",
+				"aria-haspopup": "menu",
+				"aria-expanded": j.value,
+				"aria-label": e.ariaLabel === void 0 ? "选择字段路径" : `选择字段路径（${e.ariaLabel}）`,
+				title: "选择字段路径",
+				onClick: R
+			}, "▾", 8, C)) : o("", !0),
+			(p(), a(r, { to: "body" }, [j.value && P.value !== null ? (p(), s("div", {
+				key: 0,
+				ref_key: "menuRoot",
+				ref: K,
+				class: "cn-props cn-pathpicker__menu fixed z-50 max-h-[240px] min-w-[180px] max-w-[280px] overflow-y-auto rounded-md border border-cn-field-line py-1 text-[11px] leading-none",
+				style: ee({
+					top: `${q.value}px`,
+					left: `${J.value}px`
+				}),
+				role: "menu",
+				"aria-label": e.ariaLabel === void 0 ? "字段路径菜单" : `${e.ariaLabel} 字段路径菜单`,
+				tabindex: "-1",
+				onKeydown: _(U, ["stop"])
+			}, [
+				M.value.length > 1 ? (p(), s("button", {
+					key: 0,
+					type: "button",
+					role: "menuitem",
+					class: "cn-pathpicker__back flex w-full items-center gap-1 border-b border-cn-line/70 px-2 py-1.5 text-left text-cn-muted",
+					onClick: B
+				}, [i[0] ||= c("span", { "aria-hidden": "true" }, "‹", -1), c("span", T, h(re.value), 1)])) : o("", !0),
+				P.value.entries.length === 0 ? (p(), s("div", ne, "无可选字段")) : o("", !0),
+				(p(!0), s(n, null, te(P.value.entries, (e, t) => (p(), s("button", {
+					key: `${e.path}`,
+					type: "button",
+					role: "menuitem",
+					class: d(["cn-pathpicker__option flex w-full items-center gap-1.5 px-2 py-1.5 text-left", t === N.value ? "cn-pathpicker__option--active" : ""]),
+					"aria-label": e.path,
+					title: e.path,
+					onClick: (t) => V(e),
+					onMousemove: (e) => N.value = t
+				}, [
+					c("span", D, h(e.item.segment), 1),
+					e.item.type ? (p(), s("span", O, h(e.item.type), 1)) : o("", !0),
+					e.item.description ?? e.item.title ? (p(), s("span", k, h(e.item.description ?? e.item.title), 1)) : o("", !0),
+					e.drillable ? (p(), s("span", A, "›")) : o("", !0)
+				], 42, E))), 128))
+			], 44, w)) : o("", !0)]))
+		], 512));
+	}
+});
+//#endregion
+//#region src/shared/resourceTemplate.ts
+function M(t) {
+	if (y(t).length > 0) return null;
+	let n = t.endsWith("\n") ? t.slice(0, -1) : t, r = /^\{\{([^{}]*)\}\}$/.exec(n)?.[1];
+	if (r === void 0) return null;
+	let i = e(r);
+	return i === "" ? null : i;
+}
+function N(e) {
+	return `{{${e}}}`;
+}
+//#endregion
+export { y as a, b as i, M as n, j as r, N as t };

package/dist/shared/ExpressionPathPicker.d.ts

@@ -0,0 +1,25 @@
+import { CompletionSource } from './completion';
+type __VLS_Props = {
+    /** 裸点路径原文（壳已拆 `{{}}`；存量违例拆不动时壳原样透传，只读回显） */
+    modelValue: string;
+    /** 候选源（面板同款注入缝）；null = 未绑声明，不渲染菜单入口整体只读 */
+    source: CompletionSource | null;
+    /** 禁用（会话内容锁定面）：同 null 的只读呈现 */
+    disabled?: boolean;
+    /** 展示框/菜单的可访问名（字段标签透传） */
+    ariaLabel?: string;
+    /** 空值占位文案 */
+    placeholder?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (path: string) => any;
+    "update:modelValue": (path: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((path: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((path: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+    toggleButton: HTMLButtonElement;
+    menuRoot: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/shared/completion.d.ts

@@ -11,39 +11,63 @@ export interface CompletionItem {
     title?: string;
     /** 类型徽标数据（未声明为 undefined） */
     type?: string;
+    /**
+     * 插入后光标从插入文本末端回退的码元数（expression-type-methods 工单 12）：
+     * date() 调用插入 = 2（光标落引号内 format 参数占位）、函数名候选 = 1（落括号
+     * 内）；缺省 0（落插入末尾）
+     */
+    cursorBack?: number;
+    /**
+     * 接受时从光标锚位回退替换的长度（工单 12；缺省 = partial 长度）：桶候选携带
+     * 整段 expr 长度——调用插入重写「前缀 + 部分段」全量
+     */
+    replaceLen?: number;
+    /**
+     * 前缀过滤键（工单 12；缺省 = segment）：桶候选 = 字段键名——与同键路径候选
+     * 一起按 partial 过滤（segment 是整段调用文本，直接过滤永不匹配）
+     */
+    filterKey?: string;
+    /**
+     * 显式分桶判别（resource-expression-single-ref 工单 03/05，ADR 0020）：'path' =
+     * 字段/结构头路径候选，'function' = 函数名建议 + 形状分桶调用插入——资源面
+     * 选择器（ExpressionPathPicker）按 `kind === 'path'` 过滤函数桶，不用
+     * filterKey/含 ( 启发式（工单 12 内部约定不作契约）。缺省 = 两桶之外的
+     * 建议面（date 格式快捷项等）；镜像内核 ExpressionCandidate 同名字段
+     * （结构兼容面），文本浮层零感知。
+     */
+    kind?: 'path' | 'function';
 }
 /**
- * 候选源一次求值结果（工单 02 partial/candidates 契约 + 工单 10 open 信号扩展）：
- * 浮层据此开合与渲染，候选空与否和 open 信号无关（D10 语义）。
+ * 候选源一次求值结果（工单 02 partial/candidates 契约）：浮层据此开合与渲染。
+ * 开放映射信号（D10）已随契约废除移除（ADR 0020）——schema 解析边界显式拒绝后，
+ * 候选源只服务具体键声明。
  */
 export interface CompletionResult {
     /** 正在输入的未完整段（恒为 expr 的后缀，尾点态 = 空后缀） */
     partial: string;
     /** 全量合法候选（不按 partial 预过滤——前缀过滤归浮层） */
     candidates: readonly CompletionItem[];
-    /**
-     * 开放映射信号（D10）：候选来源节点标 open（additionalProperties: true）时为
-     * true，非 open 恒缺省——浮层渲染「动态字段，键由模板定义」占位提示行（不可
-     * 接受、不进导航序，仅解释无候选的原因），信号在场时候选空也不关浮层。
-     */
-    open?: boolean;
 }
 /**
  * 候选源契约（纯函数注入缝）：入参 = 光标所在片段表达式（trim 后，可能带单个
  * 补全尾点），出参 = 正在输入的 partial（恒为 expr 后缀，工单 02 契约）+ 全量
- * 合法候选（不按 partial 预过滤——前缀过滤归浮层）+ open 信号（工单 10）；
- * null = 无补全态（语法错误/无候选），浮层不开。
+ * 合法候选（不按 partial 预过滤——前缀过滤归浮层）；null = 无补全态（语法错误/
+ * 无候选），浮层不开。
  */
 export type CompletionSource = (expr: string) => CompletionResult | null;
 /** PHP trim() 默认字符集——内核 expressionScan 导出（单一事实源，勿按值复刻） */
 /**
- * 接受手术：把片段表达式末尾的 partial 换成候选 segment（工单 02 钉定的替换
- * 面——非整段重插、不包 `{{}}` 外壳）。part 是扫描产物（start/end 为码元索引，
- * end 独占），expr 物理终点 = 片段内容区终点回退 PHP trim 尾空白，partial 恒
- * 为其后缀；值与浮层状态漂移（partial 对不上）时拒绝手术返回 null，由调用方
- * 安全收口。
+ * 接受手术（工单 12 起光标锚定）：把**光标锚位前**的替换域换成候选段（工单 02
+ * 钉定的替换面——非整段重插、不包 `{{}}` 外壳）。part 是扫描产物（start/end 为
+ * 码元索引，end 独占），cursor 是刷新时的光标锚位（片段内容区内）；替换域 =
+ * [锚位 - 尾随空白 - replaceLen, 锚位 - 尾随空白)，replaceLen 缺省 = partial
+ * 长度（路径面与旧行为全等——尾随输入位锚定）、桶候选携带整段 expr 长度（调用
+ * 插入重写前缀+部分段，工单 12）。默认替换保留漂移检验（锚位文本须等于 partial，
+ * 对不上拒绝手术返回 null 由调用方安全收口）；replaceLen 面由锚位边界把守
+ * （expr 全量来自同一次刷新，漂移即越界拒绝）。返回光标 = 插入末端回退
+ * cursorBack（format 参数占位/括号内落点）。
  */
-export declare function applyCompletion(value: string, part: ExpressionScanFragment | ExpressionScanOpen, partial: string, segment: string): {
+export declare function applyCompletion(value: string, part: ExpressionScanFragment | ExpressionScanOpen, cursor: number, partial: string, item: Pick<CompletionItem, 'segment' | 'replaceLen' | 'cursorBack'>): {
     value: string;
     cursor: number;
 } | null;

package/dist/shared/expressionContext.d.ts

@@ -16,7 +16,7 @@ export declare function expressionFieldContext(schema: ExpressionSchemaNode | nu
  * 候选源适配（工单 04 注入缝）：schema null（未注入/声明被拒降级）= null 源，
  * 浮层恒闭；否则包裹内核枚举器——ok:false（语法错误/无补全态）映射 null，
  * ok:true 原样透传（ExpressionCandidate 结构兼容 CompletionItem——description/
- * title D8 分离透传、展示回落归浮层；open 信号随结果面透出供工单 10 占位提示，
- * partial/candidates 契约见 ./completion）。
+ * title D8 分离透传、展示回落归浮层；partial/candidates 契约见 ./completion）。
+ * 开放映射 open 信号透传已随契约废除移除（ADR 0020）。
  */
 export declare function expressionCompletionSource(schema: ExpressionSchemaNode | null, context: ExpressionFieldContext): CompletionSource | null;

package/dist/shared/index.d.ts

@@ -10,7 +10,13 @@
  * 02：复用同门 Popup/Anchor/applyCompletion，触发语义分轨——裸路径输入即弹）、
  * rowsPath 候选源组装 rowsPathCompletionSource（工单 03/04：「行数组」文案置入
  * 的公共合流点）与 schema 声明切片桥 useDataSourceSchema（工单 04 自 status-bar
- * 收口——状态栏读数段与建表表单两域共用）。
+ * 收口——状态栏读数段与建表表单两域共用）与字体清单注入缝 fontPicker（
+ * edit-overlay-toolbar 工单 04 自属性面板域迁入——面板字体控件与编辑浮层工具条
+ * 字体段两域共用）与字段权威写 mergeKey 约定 mergeKey（面板与工具条双入口同键
+ * 合并的格式单点）与资源表达式级联路径选择器 ExpressionPathPicker + `{{}}` 拆装
+ * 纯函数 resourceTemplate + 弹层视口定位纯函数 popupPosition（resource-expression-
+ * single-ref 工单 05/06：资源内容字段的作者面 = 纯菜单点选，垂直翻转/钳制定位
+ * 两浮层与选择器菜单共用）。
  * 这是唯一允许被各域引用的层——域间横向 import 被依赖红线
  * （editor-vue-*-isolation）禁止，跨域消费一律收口到这里。
  */
@@ -20,12 +26,17 @@ export { useDropdownMenu, type DropdownMenuController, type DropdownMenuEntry, t
 export { ARM_LAYER_CREATE_HINT, detectShortcutPlatform, shortcutActionLabel, } from './shortcutsHelp';
 export { isEditableEventTarget } from './editableTarget';
 export { default as ExpressionCompletionPopup } from './ExpressionCompletionPopup';
+export { default as ExpressionPathPicker } from './ExpressionPathPicker';
 export { applyCompletion, type CompletionItem, type CompletionResult, type CompletionSource } from './completion';
 export { measureCursorAnchor, type CompletionAnchor } from './completionAnchor';
 export { expressionCompletionSource, expressionFieldContext, type ExpressionFieldContext, } from './expressionContext';
 export { useExpressionCompletion, type ExpressionCompletionState } from './useExpressionCompletion';
+export { expressionDiagnosticHint, useExpressionDiagnostics } from './useExpressionDiagnostics';
 export { usePathCompletion } from './usePathCompletion';
 export { rowsPathCompletionSource } from './rowsPathCompletionSource';
+export { attachResourceTemplate, stripResourceTemplate } from './resourceTemplate';
+export { pathPickerEntries, type PathPickerEntry } from './pathPickerModel';
+export { placePopupInViewport, POPUP_GAP, POPUP_MARGIN, type PopupAnchorBox, type PopupViewportPosition, } from './popupPosition';
 export { useHistory, type HistoryAvailability } from './useHistory';
 export { useSelection } from './useSelection';
 export { useDataSourceSchema } from './useDataSourceSchema';
@@ -33,5 +44,7 @@ export { useShortcuts } from './useShortcuts';
 export { useShortcutsHelp, type ShortcutsHelp } from './useShortcutsHelp';
 export { useTransientFeedback, type TransientFeedback } from './useTransientFeedback';
 export { uploadFileFromDom } from './uploadFile';
+export { FONT_PICKER_KEY, injectFontPicker, type FontPickerContext } from './fontPicker';
+export { selectionFieldMergeKey } from './mergeKey';
 export { useViewport } from './useViewport';
 export { default as PanelIcon } from './PanelIcon';

package/dist/shared/mergeKey.d.ts

@@ -0,0 +1,2 @@
+import { LayerPath } from '@hankchen/canvas-editor';
+export declare function selectionFieldMergeKey(path: LayerPath, key: readonly string[]): string;

package/dist/shared/pathPickerModel.d.ts

@@ -0,0 +1,11 @@
+import { CompletionItem, CompletionSource } from './completion';
+/** 一条菜单条目：完整点路径 + 候选元信息 + 可下钻判定（drillable = 点选进入下一层，否则点选提交） */
+export interface PathPickerEntry {
+    /** 提交/下钻的完整点路径（缺 path 的候选不构成条目——选择器的 v-model 面就是它） */
+    readonly path: string;
+    /** 候选元信息（segment/type/description/title，展示回落归组件） */
+    readonly item: CompletionItem;
+    readonly drillable: boolean;
+}
+/** 取一层候选（kind 过滤后）；候选源 null 态（语法错/降级）= 空层 */
+export declare function pathPickerEntries(source: CompletionSource, prefix: string): readonly PathPickerEntry[];

package/dist/shared/popupPosition.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 弹层视口定位纯函数（resource-expression-single-ref 工单 05/06，ADR 0020 伴生
+ * 修复）：表达式补全浮层与路径选择器菜单共用的落点决策——
+ * - 垂直：锚点下方优先 → 下方放不下向上翻转 → 翻转仍不足钳制视口内（下缘贴
+ *   viewport − margin；浮层比视口还高钉在上 margin）；
+ * - 横向：右缘收口不越 viewport − margin，左缘同理（浮层比视口还宽钉左）。
+ *
+ * 实测缺陷（工单 06 背景，example 开发轨 2026-10-14）：浮层恒锚光标下方无翻转
+ * 钳制，资源字段居面板底部——候选大半截出屏鼠标不可点。两控件（useExpression
+ * Completion / usePathCompletion）的私有 clampToViewport 与本函数合并为单点，
+ * 路径选择器菜单（工单 05）同函数消费。
+ *
+ * 高/宽度量不到（0——首帧未渲染/降级）：按「放得下/原锚放」处理，不误翻转不
+ * 误收口（首开路径由调用方延一拍补量）。纯几何、零 DOM、Node 可测。
+ */
+/** 锚点盒（视口坐标；取 CompletionAnchor 同形的 top/bottom/left 三轴） */
+export interface PopupAnchorBox {
+    top: number;
+    bottom: number;
+    left: number;
+}
+/** 弹层落点（视口坐标，fixed 定位直用） */
+export interface PopupViewportPosition {
+    top: number;
+    left: number;
+}
+/** 锚缘与弹层的间隙（px；既有两控件同语常量收口至此） */
+export declare const POPUP_GAP = 4;
+/** 弹层与视口边缘的最小留白（px） */
+export declare const POPUP_MARGIN = 4;
+export declare function placePopupInViewport(options: {
+    anchor: PopupAnchorBox;
+    popupWidth: number;
+    popupHeight: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    /** 锚缘间隙；缺省 POPUP_GAP */
+    gap?: number;
+    /** 视口留白；缺省 POPUP_MARGIN */
+    margin?: number;
+}): PopupViewportPosition;

package/dist/shared/resourceTemplate.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 拆壳：合法单值引用 → 裸点路径（片段内空白按 phpTrim 收整）；违例/拆不动 →
+ * null（原文只读回显面）。
+ */
+export declare function stripResourceTemplate(template: string): string | null;
+/** 包壳：裸点路径 → 规范形态 `{{path}}`（提交面模板原文） */
+export declare function attachResourceTemplate(path: string): string;

package/dist/shared/useExpressionCompletion.d.ts

@@ -8,13 +8,6 @@ export interface ExpressionCompletionState {
     /** 视口坐标（fixed 定位；光标下缘 + 间隙） */
     top: number;
     left: number;
-    /**
-     * 开放映射占位提示（D10，工单 10）：候选来源节点标 open 时为 true——浮层渲染
-     * 「动态字段，键由模板定义」占位提示行（不可接受、不进导航序，仅解释无候选的
-     * 原因）。信号与候选空否无关（宿主合入 properties 的键照常枚举），true 时提示
-     * 行恒在场；items 导航/接受只认候选条目，提示行不在其中。
-     */
-    openMapping: boolean;
 }
 export declare function useExpressionCompletion(options: {
     /** 宿主输入元素（textarea/input），模板 ref 传入 */

package/dist/shared/useExpressionDiagnostics.d.ts

@@ -0,0 +1,15 @@
+import { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import { ExpressionFragmentDiagnostic } from '@hankchen/canvas-editor';
+/** 诊断汇总文案：多处取首条 kind 带计数；无诊断返回空串 */
+export declare function expressionDiagnosticHint(diagnostics: readonly ExpressionFragmentDiagnostic[]): string;
+export declare function useExpressionDiagnostics(options: {
+    /** 宿主输入元素（textarea/input），模板 ref 传入 */
+    target: Ref<HTMLTextAreaElement | HTMLInputElement | null>;
+    /** 表达式态开关（静态态恒空）；响应式 getter/ ref 均可 */
+    enabled: MaybeRefOrGetter<boolean>;
+}): {
+    /** 全部片段结构错诊断（模板坐标）；关闭态恒空 */
+    diagnostics: ComputedRef<readonly ExpressionFragmentDiagnostic[]>;
+    /** 程序化写值后的显式同步（初值注入等不走 input 事件的路径调用） */
+    refresh: () => void;
+};

package/dist/shared.js

@@ -1,9 +1,10 @@
-import { i as e, n as t, r as n, t as r } from "./completionAnchor-CDR5YZhu.js";
-import { c as i, i as a, n as o, s, t as c } from "./useTransientFeedback-CTjmMmFF.js";
-import { i as l, n as u, r as d, t as f } from "./uploadFile-BOfv8aLG.js";
-import { n as p, t as m } from "./usePathCompletion-uJ5c_gQ0.js";
-import { n as h, t as g } from "./useViewport-D9Ipevzs.js";
-import { n as _, r as v, t as y } from "./useDataSourceSchema-CGbldbUj.js";
-import { t as b } from "./useShortcutsHelp-CsyarO2P.js";
-import { n as x, r as S, t as C } from "./shared-wuupBoZg.js";
-export { a as ARM_LAYER_CREATE_HINT, _ as DropdownMenu, n as ExpressionCompletionPopup, S as HelpDialog, e as PanelIcon, t as applyCompletion, s as detectShortcutPlatform, d as expressionCompletionSource, l as expressionFieldContext, o as isEditableEventTarget, r as measureCursorAnchor, p as rowsPathCompletionSource, i as shortcutActionLabel, f as uploadFileFromDom, y as useDataSourceSchema, v as useDropdownMenu, u as useExpressionCompletion, x as useHistory, m as usePathCompletion, h as useSelection, C as useShortcuts, b as useShortcutsHelp, c as useTransientFeedback, g as useViewport };
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./popupPosition-Ck5Gsvjy.js";
+import { c as s, i as c, n as l, s as u, t as d } from "./useTransientFeedback-CTjmMmFF.js";
+import { a as f, c as p, i as m, l as h, n as g, o as _, r as v, s as y, t as b } from "./uploadFile-D1RY-ji0.js";
+import { i as x, n as S, r as C, t as w } from "./resourceTemplate-cdcQtp9a.js";
+import { n as T, t as E } from "./usePathCompletion-Do17CQ6l.js";
+import { n as D, t as O } from "./useViewport-D9Ipevzs.js";
+import { n as k, r as A, t as j } from "./useDataSourceSchema-CGbldbUj.js";
+import { t as M } from "./useShortcutsHelp-CsyarO2P.js";
+import { n as N, r as P, t as F } from "./shared-wuupBoZg.js";
+export { c as ARM_LAYER_CREATE_HINT, k as DropdownMenu, r as ExpressionCompletionPopup, C as ExpressionPathPicker, v as FONT_PICKER_KEY, P as HelpDialog, o as POPUP_GAP, n as POPUP_MARGIN, a as PanelIcon, e as applyCompletion, w as attachResourceTemplate, u as detectShortcutPlatform, p as expressionCompletionSource, f as expressionDiagnosticHint, h as expressionFieldContext, m as injectFontPicker, l as isEditableEventTarget, t as measureCursorAnchor, x as pathPickerEntries, i as placePopupInViewport, T as rowsPathCompletionSource, g as selectionFieldMergeKey, s as shortcutActionLabel, S as stripResourceTemplate, b as uploadFileFromDom, j as useDataSourceSchema, A as useDropdownMenu, y as useExpressionCompletion, _ as useExpressionDiagnostics, N as useHistory, E as usePathCompletion, D as useSelection, F as useShortcuts, M as useShortcutsHelp, d as useTransientFeedback, O as useViewport };

package/dist/style.css

@@ -1,2 +1,2 @@
-.cn-align-float[data-v-9a761d37]{--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-field-line:#2a3a57;--cn-accent:#38bdf8;--cn-hover:#16223a;border:1px solid var(--cn-field-line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cn-fg);-webkit-user-select:none;user-select:none;background:#0b1220eb;border-radius:9px;align-items:center;gap:4px;padding:5px 8px;display:inline-flex;box-shadow:0 10px 26px #00000073}.cn-align-float__group[data-v-9a761d37]{align-items:center;gap:2px;display:flex}.cn-align-float__divider[data-v-9a761d37]{background:var(--cn-field-line);width:1px;height:16px}.cn-align-float__key[data-v-9a761d37]{width:24px;height:24px;color:var(--cn-fg);cursor:pointer;background:0 0;border:none;border-radius:6px;place-content:center;padding:0;display:grid}.cn-align-float__key[data-v-9a761d37]:hover:not(:disabled){background:var(--cn-hover);color:var(--cn-accent)}.cn-align-float--disabled[data-v-9a761d37]{color:var(--cn-muted)}.cn-align-float--disabled .cn-align-float__key[data-v-9a761d37]{color:var(--cn-muted);cursor:not-allowed}.cn-context-menu[data-v-e554ef38]{--cn-bg:#0b1220;--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-field:#94a3b812;--cn-accent:#38bdf8;--cn-accent-soft:#38bdf81f;--cn-danger:#f87171;z-index:30;background:var(--cn-bg-elevated);border:1px solid var(--cn-line);border-radius:10px;flex-direction:column;gap:2px;min-width:120px;padding:4px;display:flex;position:absolute;box-shadow:0 12px 32px #0206178c}.cn-context-menu__item[data-v-e554ef38]{color:var(--cn-fg);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 12px;font-size:13px;line-height:1.4}.cn-context-menu__item[data-v-e554ef38]:hover:not(:disabled){background:var(--cn-accent-soft);color:var(--cn-accent)}.cn-context-menu__item[data-v-e554ef38]:disabled{color:var(--cn-muted);cursor:not-allowed}.cn-context-menu__item--delete[data-v-e554ef38]:hover:not(:disabled){color:var(--cn-danger);background:#f871711f}.cn-context-menu__form[data-v-e554ef38]{flex-direction:column;gap:6px;min-width:180px;padding:4px;display:flex}.cn-context-menu__hint[data-v-e554ef38]{color:var(--cn-muted);margin:0;padding:0 4px;font-size:11px;line-height:1.5}.cn-context-menu__hint--error[data-v-e554ef38]{color:var(--cn-danger)}.cn-context-menu__input[data-v-e554ef38]{border:1px solid var(--cn-line);background:var(--cn-field);color:var(--cn-fg);border-radius:6px;outline:none;padding:5px 8px;font-size:12px;line-height:1.4}.cn-context-menu__input[data-v-e554ef38]:focus{border-color:var(--cn-accent)}.cn-context-menu__input--invalid[data-v-e554ef38]{border-color:var(--cn-danger)}.cn-context-menu__form-actions[data-v-e554ef38]{gap:4px;display:flex}.cn-context-menu__form-actions .cn-context-menu__item[data-v-e554ef38]{text-align:center;flex:1}.cn-context-menu__item--confirm[data-v-e554ef38]{background:var(--cn-accent-soft);color:var(--cn-accent)}.cn-find-bar[data-v-71f0a3ae]{--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-field-line:#2a3a57;--cn-accent:#38bdf8;--cn-hover:#16223a;z-index:25;border:1px solid var(--cn-field-line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cn-fg);-webkit-user-select:none;user-select:none;background:#0b1220eb;border-radius:9px;align-items:center;gap:6px;padding:6px 8px;display:inline-flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 10px 26px #00000073}.cn-find-bar__input[data-v-71f0a3ae]{border:1px solid var(--cn-field-line);width:132px;color:var(--cn-fg);background:#0b1220e6;border-radius:6px;padding:4px 8px;font-size:13px;line-height:1.4}.cn-find-bar__input[data-v-71f0a3ae]::placeholder{color:var(--cn-muted)}.cn-find-bar__input[data-v-71f0a3ae]:focus{border-color:var(--cn-accent);outline:none}.cn-find-bar__count[data-v-71f0a3ae]{text-align:center;min-width:56px;color:var(--cn-muted);white-space:nowrap;font-size:12px}.cn-find-bar__note[data-v-71f0a3ae]{color:var(--cn-accent);white-space:nowrap;font-size:12px}.cn-find-bar__key[data-v-71f0a3ae]{width:24px;height:24px;color:var(--cn-fg);cursor:pointer;background:0 0;border:none;border-radius:6px;place-content:center;padding:0;display:grid}.cn-find-bar__action[data-v-71f0a3ae]{white-space:nowrap;color:var(--cn-fg);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 10px;font-size:12px;line-height:1.4}.cn-find-bar__key[data-v-71f0a3ae]:hover:not(:disabled),.cn-find-bar__action[data-v-71f0a3ae]:hover:not(:disabled){background:var(--cn-hover);color:var(--cn-accent)}.cn-find-bar__key[data-v-71f0a3ae]:disabled,.cn-find-bar__action[data-v-71f0a3ae]:disabled{color:var(--cn-muted);cursor:not-allowed}.cn-content-pill[data-v-d99d2c13]{--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-accent:#38bdf8;--cn-accent-soft:#38bdf81f;z-index:30;background:var(--cn-bg-elevated);border:1px solid var(--cn-line);pointer-events:auto;-webkit-user-select:none;user-select:none;border-radius:7px;align-items:stretch;display:inline-flex;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 8px 20px #02061773}.cn-content-pill__item[data-v-d99d2c13]{color:var(--cn-muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;padding:3px 10px;font-size:11px;line-height:1.4}.cn-content-pill__item+.cn-content-pill__item[data-v-d99d2c13]{border-left:1px solid var(--cn-line)}.cn-content-pill__item[data-v-d99d2c13]:hover{color:var(--cn-fg)}.cn-content-pill__item--active[data-v-d99d2c13]{background:var(--cn-accent-soft);color:var(--cn-accent);cursor:default}.cn-text-overlay[data-v-bc9281f8]{pointer-events:none;position:absolute;inset:0}.cn-text-overlay__textarea[data-v-bc9281f8]{resize:none;-webkit-user-select:text;user-select:text;pointer-events:auto;letter-spacing:normal;text-transform:none;background:0 0;border:0;outline:none;margin:0;padding:0;font-style:normal;font-weight:400;position:absolute;top:0;left:0;overflow:hidden}.cn-surface[data-v-f2b89db2]{touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.cn-surface__canvas[data-v-f2b89db2]{width:100%;height:100%;display:block;position:absolute;inset:0}.cn-surface__canvas--overlay[data-v-f2b89db2]{pointer-events:none}.cn-surface--pannable[data-v-f2b89db2]{cursor:grab}.cn-surface--panning[data-v-f2b89db2]{cursor:grabbing}.cn-surface__drop-hint[data-v-f2b89db2]{z-index:20;pointer-events:none;background:#38bdf814;border:2px dashed #38bdf899;border-radius:12px;justify-content:center;align-items:center;display:flex;position:absolute;inset:8px}.cn-surface__drop-hint-text[data-v-f2b89db2]{color:#38bdf8;background:#0b1220;border-radius:8px;padding:6px 14px;font-size:13px;line-height:1.4}.cn-guides[data-v-61872121]{--cn-guide-line:#38bdf8;--cn-guide-glow:#38bdf866;--cn-guide-will-delete:#f87171;--cn-guide-will-delete-glow:#f8717173;--cn-snap-line:#fb7185;--cn-snap-glow:#fb718573;--cn-snap-dash:4px;--cn-guide-hit:9px;--cn-guide-clip-radius:12px;border-radius:var(--cn-guide-clip-radius);pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.cn-guides__guide[data-v-61872121]{pointer-events:auto;touch-action:none;position:absolute}.cn-guides__guide--vertical[data-v-61872121]{width:var(--cn-guide-hit);cursor:ew-resize;transform:translate(-50%)}.cn-guides__guide--horizontal[data-v-61872121]{height:var(--cn-guide-hit);cursor:ns-resize;transform:translateY(-50%)}.cn-guides__guide--vertical[data-v-61872121]:after,.cn-guides__guide--horizontal[data-v-61872121]:after{content:"";background:var(--cn-guide-line);box-shadow:0 0 6px var(--cn-guide-glow);position:absolute}.cn-guides__guide--vertical[data-v-61872121]:after{width:1px;top:0;bottom:0;left:calc(50% - .5px)}.cn-guides__guide--horizontal[data-v-61872121]:after{height:1px;top:calc(50% - .5px);left:0;right:0}.cn-guides__guide--preview[data-v-61872121]{pointer-events:none}.cn-guides__guide--preview[data-v-61872121]:after{opacity:.85}.cn-guides__guide--grabbed[data-v-61872121]:after{opacity:.75}.cn-guides__guide--will-delete[data-v-61872121]:after{background:var(--cn-guide-will-delete);box-shadow:0 0 6px var(--cn-guide-will-delete-glow)}.cn-guides__snap[data-v-61872121]{pointer-events:none;filter:drop-shadow(0 0 3px var(--cn-snap-glow));position:absolute}.cn-guides__snap--vertical[data-v-61872121]{background-image:repeating-linear-gradient(to bottom, var(--cn-snap-line) 0 var(--cn-snap-dash), transparent var(--cn-snap-dash) calc(var(--cn-snap-dash) * 2));width:1px}.cn-guides__snap--horizontal[data-v-61872121]{background-image:repeating-linear-gradient(to right, var(--cn-snap-line) 0 var(--cn-snap-dash), transparent var(--cn-snap-dash) calc(var(--cn-snap-dash) * 2));height:1px}.cn-ruler[data-v-5bd7248c]{--cn-ruler-thickness:20px;--cn-ruler-bg:#0b1220eb;--cn-ruler-line:#1e2a40;--cn-ruler-tick:#7c8ca5;--cn-ruler-label:#aab6c8;--cn-ruler-font:"SF Mono", Menlo, Consolas, monospace;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;font-family:var(--cn-ruler-font);position:relative}.cn-ruler__bar[data-v-5bd7248c]{pointer-events:auto;touch-action:none;background:var(--cn-ruler-bg);position:absolute;top:0;left:0;overflow:hidden}.cn-ruler__bar--top[data-v-5bd7248c]{height:var(--cn-ruler-thickness);border-bottom:1px solid var(--cn-ruler-line);right:0}.cn-ruler__bar--left[data-v-5bd7248c]{width:var(--cn-ruler-thickness);border-right:1px solid var(--cn-ruler-line);bottom:0}.cn-ruler__corner[data-v-5bd7248c]{z-index:1;width:var(--cn-ruler-thickness);height:var(--cn-ruler-thickness);background:var(--cn-ruler-bg);border-right:1px solid var(--cn-ruler-line);border-bottom:1px solid var(--cn-ruler-line);position:absolute;top:0;left:0}.cn-ruler__tick[data-v-5bd7248c]{background:var(--cn-ruler-tick);position:absolute}.cn-ruler__bar--top .cn-ruler__tick[data-v-5bd7248c]{width:1px;height:4px;bottom:0}.cn-ruler__bar--top .cn-ruler__tick--major[data-v-5bd7248c]{height:8px}.cn-ruler__bar--left .cn-ruler__tick[data-v-5bd7248c]{width:4px;height:1px;right:0}.cn-ruler__bar--left .cn-ruler__tick--major[data-v-5bd7248c]{width:8px}.cn-ruler__label[data-v-5bd7248c]{white-space:nowrap;color:var(--cn-ruler-label);font-size:9px;line-height:1;position:absolute}.cn-ruler__bar--top .cn-ruler__label[data-v-5bd7248c]{bottom:9px;left:3px}.cn-ruler__bar--left .cn-ruler__label[data-v-5bd7248c]{writing-mode:vertical-rl;top:2px;right:10px}.cn-dropdown[data-v-ec8a19c1]{--cn-fg:#e6edf7;--cn-fg-2:#c3cddd;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-bg-elevated:#101a2e;--cn-hover:#16223a;--cn-accent:#38bdf8;--cn-accent-soft:#38bdf81f;display:inline-flex;position:relative}.cn-dropdown__trigger[data-v-ec8a19c1]{white-space:nowrap;color:var(--cn-fg-2);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:3px;padding:5px 9px;font-size:13px;display:inline-flex}.cn-dropdown__trigger[data-v-ec8a19c1]:hover{background:var(--cn-hover);color:var(--cn-fg)}.cn-dropdown__caret[data-v-ec8a19c1]{color:var(--cn-muted);font-size:10px;line-height:1}.cn-dropdown__menu[data-v-ec8a19c1]{z-index:40;background:var(--cn-bg-elevated);border:1px solid var(--cn-line);border-radius:10px;flex-direction:column;gap:2px;min-width:148px;padding:4px;display:flex;position:fixed;box-shadow:0 12px 32px #0206178c}.cn-dropdown__item[data-v-ec8a19c1]{color:var(--cn-fg);text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:14px;padding:6px 12px;font-size:12px;line-height:1.4;display:flex}.cn-dropdown__item[data-v-ec8a19c1]:hover:not(:disabled){background:var(--cn-accent-soft);color:var(--cn-accent)}.cn-dropdown__item[data-v-ec8a19c1]:disabled{color:var(--cn-muted);cursor:not-allowed}.cn-dropdown__shortcut[data-v-ec8a19c1]{color:var(--cn-muted);font-variant-numeric:tabular-nums;flex:none;font-size:11px;line-height:1.4}.cn-dropdown__separator[data-v-ec8a19c1]{background:var(--cn-line);flex:none;height:1px;margin:3px 6px}.cn-statusbar[data-v-040479fb]{--cn-bg:#0b1220;--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-accent:#38bdf8;background-color:var(--cn-bg);color:var(--cn-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:6px 12px;font-size:12px;line-height:1.4;display:flex}.cn-statusbar__segment[data-v-040479fb]{white-space:nowrap}.cn-statusbar__zoom-trigger[data-v-040479fb]{font:inherit;color:inherit;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;padding:0}.cn-statusbar__zoom-trigger[data-v-040479fb]:hover{color:var(--cn-accent)}.cn-statusbar__help[data-v-040479fb]{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.cn-statusbar__help[data-v-040479fb]:hover,.cn-statusbar__segment--pending[data-v-040479fb]{color:var(--cn-accent)}.cn-statusbar__divider[data-v-040479fb]{background:var(--cn-line);width:1px;height:12px}.cn-help[data-v-486e5be3]{--cn-bg:#0b1220;--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-accent:#38bdf8;z-index:50;background:#0206178c;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.cn-help__panel[data-v-486e5be3]{background:var(--cn-bg-elevated);border:1px solid var(--cn-line);border-radius:12px;flex-direction:column;min-width:320px;max-width:480px;max-height:100%;display:flex;box-shadow:0 24px 64px #02061799}.cn-help__header[data-v-486e5be3]{border-bottom:1px solid var(--cn-line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.cn-help__title[data-v-486e5be3]{color:var(--cn-fg);margin:0;font-size:14px;font-weight:600;line-height:1.4}.cn-help__close[data-v-486e5be3]{color:var(--cn-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:2px 8px;font-size:13px;line-height:1.4}.cn-help__close[data-v-486e5be3]:hover{color:var(--cn-fg);background:#94a3b812}.cn-help__body[data-v-486e5be3]{padding:8px 16px 16px;overflow-y:auto}.cn-help__section[data-v-486e5be3]{margin-top:12px}.cn-help__section[data-v-486e5be3]:first-child{margin-top:8px}.cn-help__section-title[data-v-486e5be3]{color:var(--cn-accent);margin:0 0 4px;font-size:11px;font-weight:600;line-height:1.4}.cn-help__list[data-v-486e5be3]{margin:0;padding:0;list-style:none}.cn-help__row[data-v-486e5be3]{justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0;display:flex}.cn-help__label[data-v-486e5be3]{color:var(--cn-fg);font-size:12px;line-height:1.5}.cn-help__keys[data-v-486e5be3]{border:1px solid var(--cn-line);color:var(--cn-muted);white-space:nowrap;background:#94a3b812;border-radius:5px;flex-shrink:0;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4}
+.cn-align-float[data-v-9a761d37]{--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-field-line:#2a3a57;--cn-accent:#38bdf8;--cn-hover:#16223a;border:1px solid var(--cn-field-line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cn-fg);-webkit-user-select:none;user-select:none;background:#0b1220eb;border-radius:9px;align-items:center;gap:4px;padding:5px 8px;display:inline-flex;box-shadow:0 10px 26px #00000073}.cn-align-float__group[data-v-9a761d37]{align-items:center;gap:2px;display:flex}.cn-align-float__divider[data-v-9a761d37]{background:var(--cn-field-line);width:1px;height:16px}.cn-align-float__key[data-v-9a761d37]{width:24px;height:24px;color:var(--cn-fg);cursor:pointer;background:0 0;border:none;border-radius:6px;place-content:center;padding:0;display:grid}.cn-align-float__key[data-v-9a761d37]:hover:not(:disabled){background:var(--cn-hover);color:var(--cn-accent)}.cn-align-float--disabled[data-v-9a761d37]{color:var(--cn-muted)}.cn-align-float--disabled .cn-align-float__key[data-v-9a761d37]{color:var(--cn-muted);cursor:not-allowed}.cn-context-menu[data-v-e554ef38]{--cn-bg:#0b1220;--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-field:#94a3b812;--cn-accent:#38bdf8;--cn-accent-soft:#38bdf81f;--cn-danger:#f87171;z-index:30;background:var(--cn-bg-elevated);border:1px solid var(--cn-line);border-radius:10px;flex-direction:column;gap:2px;min-width:120px;padding:4px;display:flex;position:absolute;box-shadow:0 12px 32px #0206178c}.cn-context-menu__item[data-v-e554ef38]{color:var(--cn-fg);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 12px;font-size:13px;line-height:1.4}.cn-context-menu__item[data-v-e554ef38]:hover:not(:disabled){background:var(--cn-accent-soft);color:var(--cn-accent)}.cn-context-menu__item[data-v-e554ef38]:disabled{color:var(--cn-muted);cursor:not-allowed}.cn-context-menu__item--delete[data-v-e554ef38]:hover:not(:disabled){color:var(--cn-danger);background:#f871711f}.cn-context-menu__form[data-v-e554ef38]{flex-direction:column;gap:6px;min-width:180px;padding:4px;display:flex}.cn-context-menu__hint[data-v-e554ef38]{color:var(--cn-muted);margin:0;padding:0 4px;font-size:11px;line-height:1.5}.cn-context-menu__hint--error[data-v-e554ef38]{color:var(--cn-danger)}.cn-context-menu__input[data-v-e554ef38]{border:1px solid var(--cn-line);background:var(--cn-field);color:var(--cn-fg);border-radius:6px;outline:none;padding:5px 8px;font-size:12px;line-height:1.4}.cn-context-menu__input[data-v-e554ef38]:focus{border-color:var(--cn-accent)}.cn-context-menu__input--invalid[data-v-e554ef38]{border-color:var(--cn-danger)}.cn-context-menu__form-actions[data-v-e554ef38]{gap:4px;display:flex}.cn-context-menu__form-actions .cn-context-menu__item[data-v-e554ef38]{text-align:center;flex:1}.cn-context-menu__item--confirm[data-v-e554ef38]{background:var(--cn-accent-soft);color:var(--cn-accent)}.cn-find-bar[data-v-71f0a3ae]{--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-field-line:#2a3a57;--cn-accent:#38bdf8;--cn-hover:#16223a;z-index:25;border:1px solid var(--cn-field-line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cn-fg);-webkit-user-select:none;user-select:none;background:#0b1220eb;border-radius:9px;align-items:center;gap:6px;padding:6px 8px;display:inline-flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 10px 26px #00000073}.cn-find-bar__input[data-v-71f0a3ae]{border:1px solid var(--cn-field-line);width:132px;color:var(--cn-fg);background:#0b1220e6;border-radius:6px;padding:4px 8px;font-size:13px;line-height:1.4}.cn-find-bar__input[data-v-71f0a3ae]::placeholder{color:var(--cn-muted)}.cn-find-bar__input[data-v-71f0a3ae]:focus{border-color:var(--cn-accent);outline:none}.cn-find-bar__count[data-v-71f0a3ae]{text-align:center;min-width:56px;color:var(--cn-muted);white-space:nowrap;font-size:12px}.cn-find-bar__note[data-v-71f0a3ae]{color:var(--cn-accent);white-space:nowrap;font-size:12px}.cn-find-bar__key[data-v-71f0a3ae]{width:24px;height:24px;color:var(--cn-fg);cursor:pointer;background:0 0;border:none;border-radius:6px;place-content:center;padding:0;display:grid}.cn-find-bar__action[data-v-71f0a3ae]{white-space:nowrap;color:var(--cn-fg);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 10px;font-size:12px;line-height:1.4}.cn-find-bar__key[data-v-71f0a3ae]:hover:not(:disabled),.cn-find-bar__action[data-v-71f0a3ae]:hover:not(:disabled){background:var(--cn-hover);color:var(--cn-accent)}.cn-find-bar__key[data-v-71f0a3ae]:disabled,.cn-find-bar__action[data-v-71f0a3ae]:disabled{color:var(--cn-muted);cursor:not-allowed}.cn-edit-toolbar[data-v-dcead501]{--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-accent:#38bdf8;--cn-accent-soft:#38bdf81f;z-index:30;background:var(--cn-bg-elevated);border:1px solid var(--cn-line);pointer-events:auto;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:stretch;gap:2px;padding:3px;display:inline-flex;position:absolute;top:0;left:0;box-shadow:0 8px 20px #02061773}.cn-edit-toolbar__segment+.cn-edit-toolbar__segment[data-v-dcead501]{border-left:1px solid var(--cn-line);margin-left:2px;padding-left:3px}.cn-edit-toolbar__segment[data-v-dcead501]{border-radius:5px;align-items:center;display:inline-flex;overflow:hidden}.cn-edit-toolbar__item[data-v-dcead501]{color:var(--cn-muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;padding:3px 10px;font-size:11px;line-height:1.4}.cn-edit-toolbar__item+.cn-edit-toolbar__item[data-v-dcead501]{border-left:1px solid var(--cn-line)}.cn-edit-toolbar__item[data-v-dcead501]:hover{color:var(--cn-fg)}.cn-edit-toolbar__item--active[data-v-dcead501]{background:var(--cn-accent-soft);color:var(--cn-accent);cursor:default}.cn-edit-toolbar__icon-item[data-v-dcead501]{justify-content:center;align-items:center;padding:3px 6px;display:inline-flex}.cn-edit-toolbar__font[data-v-dcead501]{max-width:110px;height:22px;color:var(--cn-fg);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:0 2px;font-size:11px;line-height:1.4}.cn-edit-toolbar__font[data-v-dcead501]:focus-visible{outline:1px solid var(--cn-accent)}.cn-edit-toolbar__font option[data-v-dcead501]{background:var(--cn-bg-elevated);color:var(--cn-fg)}.cn-edit-toolbar__mini[data-v-dcead501]{color:var(--cn-muted);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:3px 4px;display:inline-flex}.cn-edit-toolbar__mini[data-v-dcead501]:hover{color:var(--cn-fg)}.cn-edit-toolbar__size[data-v-dcead501]{border:1px solid var(--cn-line);width:34px;height:20px;color:var(--cn-fg);text-align:center;appearance:textfield;background:0 0;border-radius:4px;padding:0 2px;font-size:11px;line-height:1.4}.cn-edit-toolbar__size[data-v-dcead501]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cn-edit-toolbar__size[data-v-dcead501]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cn-edit-toolbar__size[data-v-dcead501]:focus-visible{outline:1px solid var(--cn-accent)}.cn-edit-toolbar__color[data-v-dcead501]{border:1px solid var(--cn-line);cursor:pointer;background:0 0;border-radius:4px;width:24px;height:20px;padding:0}.cn-edit-toolbar__color[data-v-dcead501]:focus-visible{outline:1px solid var(--cn-accent)}.cn-text-overlay[data-v-9e96d660]{pointer-events:none;position:absolute;inset:0}.cn-text-overlay__textarea[data-v-9e96d660]{resize:none;-webkit-user-select:text;user-select:text;pointer-events:auto;letter-spacing:normal;text-transform:none;background:0 0;border:0;outline:none;margin:0;padding:0;font-style:normal;font-weight:400;position:absolute;top:0;left:0;overflow:hidden}.cn-text-overlay__diagnostic[data-v-9e96d660]{text-overflow:ellipsis;white-space:nowrap;color:#f87171;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0b1220e0;border:1px solid #f8717166;border-radius:4px;max-width:240px;padding:2px 6px;font-size:12px;line-height:16px;position:absolute;top:0;left:0;overflow:hidden}.cn-surface[data-v-f2b89db2]{touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.cn-surface__canvas[data-v-f2b89db2]{width:100%;height:100%;display:block;position:absolute;inset:0}.cn-surface__canvas--overlay[data-v-f2b89db2]{pointer-events:none}.cn-surface--pannable[data-v-f2b89db2]{cursor:grab}.cn-surface--panning[data-v-f2b89db2]{cursor:grabbing}.cn-surface__drop-hint[data-v-f2b89db2]{z-index:20;pointer-events:none;background:#38bdf814;border:2px dashed #38bdf899;border-radius:12px;justify-content:center;align-items:center;display:flex;position:absolute;inset:8px}.cn-surface__drop-hint-text[data-v-f2b89db2]{color:#38bdf8;background:#0b1220;border-radius:8px;padding:6px 14px;font-size:13px;line-height:1.4}.cn-guides[data-v-61872121]{--cn-guide-line:#38bdf8;--cn-guide-glow:#38bdf866;--cn-guide-will-delete:#f87171;--cn-guide-will-delete-glow:#f8717173;--cn-snap-line:#fb7185;--cn-snap-glow:#fb718573;--cn-snap-dash:4px;--cn-guide-hit:9px;--cn-guide-clip-radius:12px;border-radius:var(--cn-guide-clip-radius);pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.cn-guides__guide[data-v-61872121]{pointer-events:auto;touch-action:none;position:absolute}.cn-guides__guide--vertical[data-v-61872121]{width:var(--cn-guide-hit);cursor:ew-resize;transform:translate(-50%)}.cn-guides__guide--horizontal[data-v-61872121]{height:var(--cn-guide-hit);cursor:ns-resize;transform:translateY(-50%)}.cn-guides__guide--vertical[data-v-61872121]:after,.cn-guides__guide--horizontal[data-v-61872121]:after{content:"";background:var(--cn-guide-line);box-shadow:0 0 6px var(--cn-guide-glow);position:absolute}.cn-guides__guide--vertical[data-v-61872121]:after{width:1px;top:0;bottom:0;left:calc(50% - .5px)}.cn-guides__guide--horizontal[data-v-61872121]:after{height:1px;top:calc(50% - .5px);left:0;right:0}.cn-guides__guide--preview[data-v-61872121]{pointer-events:none}.cn-guides__guide--preview[data-v-61872121]:after{opacity:.85}.cn-guides__guide--grabbed[data-v-61872121]:after{opacity:.75}.cn-guides__guide--will-delete[data-v-61872121]:after{background:var(--cn-guide-will-delete);box-shadow:0 0 6px var(--cn-guide-will-delete-glow)}.cn-guides__snap[data-v-61872121]{pointer-events:none;filter:drop-shadow(0 0 3px var(--cn-snap-glow));position:absolute}.cn-guides__snap--vertical[data-v-61872121]{background-image:repeating-linear-gradient(to bottom, var(--cn-snap-line) 0 var(--cn-snap-dash), transparent var(--cn-snap-dash) calc(var(--cn-snap-dash) * 2));width:1px}.cn-guides__snap--horizontal[data-v-61872121]{background-image:repeating-linear-gradient(to right, var(--cn-snap-line) 0 var(--cn-snap-dash), transparent var(--cn-snap-dash) calc(var(--cn-snap-dash) * 2));height:1px}.cn-ruler[data-v-5bd7248c]{--cn-ruler-thickness:20px;--cn-ruler-bg:#0b1220eb;--cn-ruler-line:#1e2a40;--cn-ruler-tick:#7c8ca5;--cn-ruler-label:#aab6c8;--cn-ruler-font:"SF Mono", Menlo, Consolas, monospace;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;font-family:var(--cn-ruler-font);position:relative}.cn-ruler__bar[data-v-5bd7248c]{pointer-events:auto;touch-action:none;background:var(--cn-ruler-bg);position:absolute;top:0;left:0;overflow:hidden}.cn-ruler__bar--top[data-v-5bd7248c]{height:var(--cn-ruler-thickness);border-bottom:1px solid var(--cn-ruler-line);right:0}.cn-ruler__bar--left[data-v-5bd7248c]{width:var(--cn-ruler-thickness);border-right:1px solid var(--cn-ruler-line);bottom:0}.cn-ruler__corner[data-v-5bd7248c]{z-index:1;width:var(--cn-ruler-thickness);height:var(--cn-ruler-thickness);background:var(--cn-ruler-bg);border-right:1px solid var(--cn-ruler-line);border-bottom:1px solid var(--cn-ruler-line);position:absolute;top:0;left:0}.cn-ruler__tick[data-v-5bd7248c]{background:var(--cn-ruler-tick);position:absolute}.cn-ruler__bar--top .cn-ruler__tick[data-v-5bd7248c]{width:1px;height:4px;bottom:0}.cn-ruler__bar--top .cn-ruler__tick--major[data-v-5bd7248c]{height:8px}.cn-ruler__bar--left .cn-ruler__tick[data-v-5bd7248c]{width:4px;height:1px;right:0}.cn-ruler__bar--left .cn-ruler__tick--major[data-v-5bd7248c]{width:8px}.cn-ruler__label[data-v-5bd7248c]{white-space:nowrap;color:var(--cn-ruler-label);font-size:9px;line-height:1;position:absolute}.cn-ruler__bar--top .cn-ruler__label[data-v-5bd7248c]{bottom:9px;left:3px}.cn-ruler__bar--left .cn-ruler__label[data-v-5bd7248c]{writing-mode:vertical-rl;top:2px;right:10px}.cn-dropdown[data-v-ec8a19c1]{--cn-fg:#e6edf7;--cn-fg-2:#c3cddd;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-bg-elevated:#101a2e;--cn-hover:#16223a;--cn-accent:#38bdf8;--cn-accent-soft:#38bdf81f;display:inline-flex;position:relative}.cn-dropdown__trigger[data-v-ec8a19c1]{white-space:nowrap;color:var(--cn-fg-2);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:3px;padding:5px 9px;font-size:13px;display:inline-flex}.cn-dropdown__trigger[data-v-ec8a19c1]:hover{background:var(--cn-hover);color:var(--cn-fg)}.cn-dropdown__caret[data-v-ec8a19c1]{color:var(--cn-muted);font-size:10px;line-height:1}.cn-dropdown__menu[data-v-ec8a19c1]{z-index:40;background:var(--cn-bg-elevated);border:1px solid var(--cn-line);border-radius:10px;flex-direction:column;gap:2px;min-width:148px;padding:4px;display:flex;position:fixed;box-shadow:0 12px 32px #0206178c}.cn-dropdown__item[data-v-ec8a19c1]{color:var(--cn-fg);text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:14px;padding:6px 12px;font-size:12px;line-height:1.4;display:flex}.cn-dropdown__item[data-v-ec8a19c1]:hover:not(:disabled){background:var(--cn-accent-soft);color:var(--cn-accent)}.cn-dropdown__item[data-v-ec8a19c1]:disabled{color:var(--cn-muted);cursor:not-allowed}.cn-dropdown__shortcut[data-v-ec8a19c1]{color:var(--cn-muted);font-variant-numeric:tabular-nums;flex:none;font-size:11px;line-height:1.4}.cn-dropdown__separator[data-v-ec8a19c1]{background:var(--cn-line);flex:none;height:1px;margin:3px 6px}.cn-statusbar[data-v-040479fb]{--cn-bg:#0b1220;--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-accent:#38bdf8;background-color:var(--cn-bg);color:var(--cn-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:6px 12px;font-size:12px;line-height:1.4;display:flex}.cn-statusbar__segment[data-v-040479fb]{white-space:nowrap}.cn-statusbar__zoom-trigger[data-v-040479fb]{font:inherit;color:inherit;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;padding:0}.cn-statusbar__zoom-trigger[data-v-040479fb]:hover{color:var(--cn-accent)}.cn-statusbar__help[data-v-040479fb]{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.cn-statusbar__help[data-v-040479fb]:hover,.cn-statusbar__segment--pending[data-v-040479fb]{color:var(--cn-accent)}.cn-statusbar__divider[data-v-040479fb]{background:var(--cn-line);width:1px;height:12px}.cn-help[data-v-486e5be3]{--cn-bg:#0b1220;--cn-bg-elevated:#101a2e;--cn-fg:#e6edf7;--cn-muted:#7c8ca5;--cn-line:#1e2a40;--cn-accent:#38bdf8;z-index:50;background:#0206178c;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.cn-help__panel[data-v-486e5be3]{background:var(--cn-bg-elevated);border:1px solid var(--cn-line);border-radius:12px;flex-direction:column;min-width:320px;max-width:480px;max-height:100%;display:flex;box-shadow:0 24px 64px #02061799}.cn-help__header[data-v-486e5be3]{border-bottom:1px solid var(--cn-line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.cn-help__title[data-v-486e5be3]{color:var(--cn-fg);margin:0;font-size:14px;font-weight:600;line-height:1.4}.cn-help__close[data-v-486e5be3]{color:var(--cn-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:2px 8px;font-size:13px;line-height:1.4}.cn-help__close[data-v-486e5be3]:hover{color:var(--cn-fg);background:#94a3b812}.cn-help__body[data-v-486e5be3]{padding:8px 16px 16px;overflow-y:auto}.cn-help__section[data-v-486e5be3]{margin-top:12px}.cn-help__section[data-v-486e5be3]:first-child{margin-top:8px}.cn-help__section-title[data-v-486e5be3]{color:var(--cn-accent);margin:0 0 4px;font-size:11px;font-weight:600;line-height:1.4}.cn-help__list[data-v-486e5be3]{margin:0;padding:0;list-style:none}.cn-help__row[data-v-486e5be3]{justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0;display:flex}.cn-help__label[data-v-486e5be3]{color:var(--cn-fg);font-size:12px;line-height:1.5}.cn-help__keys[data-v-486e5be3]{border:1px solid var(--cn-line);color:var(--cn-muted);white-space:nowrap;background:#94a3b812;border-radius:5px;flex-shrink:0;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4}
 /*$vite$:1*/