@hankchen/canvas-editor-vue 0.4.0 → 0.5.0

package/dist/{canvas-DqQislJ_.js → canvas-CX1RdlFC.js}

@@ -1469,10 +1469,10 @@ var ht = ["wrap"], gt = /*#__PURE__*/ x(/* @__PURE__ */ z({
 					};
 					else if (N.mode === "resize") {
 						let t = F(e);
-						y.resizeTo(t.x, t.y);
+						y.resizeTo(t.x, t.y, e.shiftKey);
 					} else if (N.mode === "create") {
 						let t = F(e);
-						y.createTo(t.x, t.y);
+						y.createTo(t.x, t.y, e.shiftKey);
 					} else {
 						let t = F(e);
 						y.dragTo(t.x, t.y);
@@ -1626,7 +1626,7 @@ var ht = ["wrap"], gt = /*#__PURE__*/ x(/* @__PURE__ */ z({
 			x.value ? (K(), I("div", _t, [...n[0] ||= [L("span", { class: "cn-surface__drop-hint-text" }, "松开以上传图片", -1)]])) : F("", !0)
 		], 6));
 	}
-}), [["__scopeId", "data-v-f2b89db2"]]);
+}), [["__scopeId", "data-v-2327ee46"]]);
 //#endregion
 //#region src/canvas/guideSnap.ts
 function bt(e, t, n, r) {

package/dist/canvas.js

@@ -1,2 +1,2 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./canvas-DqQislJ_.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./canvas-CX1RdlFC.js";
 export { e as AlignFloatBar, n as CanvasSurface, a as ContextMenu, f as EditOverlayToolbar, l as FindBar, m as GuidesOverlay, d as Ruler, c as TextEditingOverlay, u as createGizmoOverlayPainter, h as createRafScheduler, t as drawCreateRubberBand, s as drawFindMatches, p as drawSelectionGizmo, r as useDpr, o as useFindSession, g as useTextEditing, i as watchDprChanges };

package/dist/index.js

@@ -1,17 +1,17 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./canvas-DqQislJ_.js";
-import { a as _, i as v, n as y, o as b, r as x, s as S, t as C } from "./layer-panel-DskyCgF5.js";
-import { a as w, c as T, d as E, f as D, i as O, l as k, n as A, o as j, r as M, s as N, t as P, u as F } from "./property-panel-B32ZBQdf.js";
-import { a as I, i as L, n as R, o as z, r as B, s as V, t as H } from "./popupPosition-Ck5Gsvjy.js";
-import { c as U, i as W, n as G, s as K, t as q } from "./useTransientFeedback-CTjmMmFF.js";
-import { a as J, c as Y, i as X, l as Z, n as Q, o as $, r as ee, s as te, t as ne } from "./uploadFile-D1RY-ji0.js";
-import { i as re, n as ie, r as ae, t as oe } from "./resourceTemplate-cdcQtp9a.js";
-import { n as se, t as ce } from "./usePathCompletion-Do17CQ6l.js";
-import { n as le, t as ue } from "./useViewport-D9Ipevzs.js";
-import { n as de, r as fe, t as pe } from "./useDataSourceSchema-CGbldbUj.js";
-import { n as me, r as he, t as ge } from "./status-bar-_PvEXyq8.js";
-import { t as _e } from "./useShortcutsHelp-CsyarO2P.js";
-import { n as ve, r as ye, t as be } from "./shared-wuupBoZg.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./canvas-CX1RdlFC.js";
+import { a as _, c as v, i as y, l as b, n as x, o as S, r as C, s as w, t as T } from "./layer-panel-kOceTf8H.js";
+import { a as E, c as D, d as O, f as k, i as A, l as j, n as M, o as N, r as P, s as F, t as I, u as L } from "./property-panel-B32ZBQdf.js";
+import { a as R, i as z, n as B, o as V, r as H, s as U, t as W } from "./popupPosition-Ck5Gsvjy.js";
+import { c as G, i as K, n as q, s as J, t as Y } from "./useTransientFeedback-CTjmMmFF.js";
+import { a as X, c as Z, i as Q, l as $, n as ee, o as te, r as ne, s as re, t as ie } from "./uploadFile-D1RY-ji0.js";
+import { i as ae, n as oe, r as se, t as ce } from "./resourceTemplate-cdcQtp9a.js";
+import { n as le, t as ue } from "./usePathCompletion-Do17CQ6l.js";
+import { n as de, t as fe } from "./useViewport-D9Ipevzs.js";
+import { n as pe, r as me, t as he } from "./useDataSourceSchema-CGbldbUj.js";
+import { n as ge, r as _e, t as ve } from "./status-bar-_PvEXyq8.js";
+import { t as ye } from "./useShortcutsHelp-CsyarO2P.js";
+import { n as be, r as xe, t as Se } from "./shared-wuupBoZg.js";
 //#region src/index.ts
-var xe = "@hankchen/canvas-editor-vue";
+var Ce = "@hankchen/canvas-editor-vue";
 //#endregion
-export { v as ADD_LAYER_MENU, _ as ADD_MENU, b as ADD_TEXT_PRESET_MENU, W as ARM_LAYER_CREATE_HINT, e as AlignFloatBar, N as CANVAS_FIELD_SECTIONS, n as CanvasSurface, a as ContextMenu, de as DropdownMenu, f as EditOverlayToolbar, z as ExpressionCompletionPopup, ae as ExpressionPathPicker, T as FIELD_SECTIONS_BY_TYPE, ee as FONT_PICKER_KEY, l as FindBar, m as GuidesOverlay, ye as HelpDialog, w as IMAGE_UPLOAD_KEY, C as LayerPanel, xe as PACKAGE_NAME, S as PANEL_ADD_MENU, H as POPUP_GAP, R as POPUP_MARGIN, V as PanelIcon, A as PropertyField, P as PropertyPanel, d as Ruler, ge as StatusBar, c as TextEditingOverlay, I as applyCompletion, oe as attachResourceTemplate, O as controlRegistry, u as createGizmoOverlayPainter, h as createRafScheduler, K as detectShortcutPlatform, t as drawCreateRubberBand, s as drawFindMatches, p as drawSelectionGizmo, Y as expressionCompletionSource, J as expressionDiagnosticHint, Z as expressionFieldContext, k as fieldSectionsForPath, F as fieldSectionsForType, me as formatLayerGeometry, he as formatLayerPath, X as injectFontPicker, j as injectImageUpload, G as isEditableEventTarget, y as isUpperHalf, E as layerRoleAt, L as measureCursorAnchor, re as pathPickerEntries, B as placePopupInViewport, D as readField, se as rowsPathCompletionSource, Q as selectionFieldMergeKey, U as shortcutActionLabel, ie as stripResourceTemplate, ne as uploadFileFromDom, pe as useDataSourceSchema, r as useDpr, fe as useDropdownMenu, te as useExpressionCompletion, $ as useExpressionDiagnostics, o as useFindSession, ve as useHistory, x as useLayerPanel, ce as usePathCompletion, M as usePropertyPanel, le as useSelection, be as useShortcuts, _e as useShortcutsHelp, g as useTextEditing, q as useTransientFeedback, ue as useViewport, i as watchDprChanges };
+export { _ as ADD_LAYER_MENU, S as ADD_MENU, w as ADD_RATIO_PRESET_MENU, v as ADD_TEXT_PRESET_MENU, K as ARM_LAYER_CREATE_HINT, e as AlignFloatBar, F as CANVAS_FIELD_SECTIONS, n as CanvasSurface, a as ContextMenu, pe as DropdownMenu, f as EditOverlayToolbar, V as ExpressionCompletionPopup, se as ExpressionPathPicker, D as FIELD_SECTIONS_BY_TYPE, ne as FONT_PICKER_KEY, l as FindBar, m as GuidesOverlay, xe as HelpDialog, E as IMAGE_UPLOAD_KEY, T as LayerPanel, Ce as PACKAGE_NAME, b as PANEL_ADD_MENU, W as POPUP_GAP, B as POPUP_MARGIN, U as PanelIcon, M as PropertyField, I as PropertyPanel, d as Ruler, ve as StatusBar, y as TemplateTableForm, c as TextEditingOverlay, R as applyCompletion, ce as attachResourceTemplate, A as controlRegistry, u as createGizmoOverlayPainter, h as createRafScheduler, J as detectShortcutPlatform, t as drawCreateRubberBand, s as drawFindMatches, p as drawSelectionGizmo, Z as expressionCompletionSource, X as expressionDiagnosticHint, $ as expressionFieldContext, j as fieldSectionsForPath, L as fieldSectionsForType, ge as formatLayerGeometry, _e as formatLayerPath, Q as injectFontPicker, N as injectImageUpload, q as isEditableEventTarget, x as isUpperHalf, O as layerRoleAt, z as measureCursorAnchor, ae as pathPickerEntries, H as placePopupInViewport, k as readField, le as rowsPathCompletionSource, ee as selectionFieldMergeKey, G as shortcutActionLabel, oe as stripResourceTemplate, ie as uploadFileFromDom, he as useDataSourceSchema, r as useDpr, me as useDropdownMenu, re as useExpressionCompletion, te as useExpressionDiagnostics, o as useFindSession, be as useHistory, C as useLayerPanel, ue as usePathCompletion, P as usePropertyPanel, de as useSelection, Se as useShortcuts, ye as useShortcutsHelp, g as useTextEditing, Y as useTransientFeedback, fe as useViewport, i as watchDprChanges };

package/dist/layer-panel/LayerPanel.d.ts

@@ -2,31 +2,5 @@ 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, {
-    rowsPathInputEl: HTMLInputElement;
-    pathPopupRef: 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;
-}, HTMLElement>;
+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/layer-panel/TemplateTableForm.d.ts

@@ -0,0 +1,38 @@
+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, {} & {
+    cancel: () => any;
+    confirm: (rowsPath: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((rowsPath: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rowsPathInputEl: HTMLInputElement;
+    pathPopupRef: 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;
+}, HTMLDivElement>;
+export default _default;

package/dist/layer-panel/addMenu.d.ts

@@ -1,4 +1,4 @@
-import { LayerType, TextPresetId } from '@hankchen/canvas-editor';
+import { LayerType, RatioPresetId, TextPresetId } from '@hankchen/canvas-editor';
 /** 新增菜单项（spec §2.1）：四类图层武装画拉（drag-create 工单 03）；模板表带 rowsPath 必填表单 */
 export type AddMenuKind = {
     kind: 'layer';
@@ -17,15 +17,27 @@ export type AddTextPresetKind = {
     label: string;
     title: string;
 };
+/** 比例预设项（image-ratio-preset 工单 02，spec 决策 2）：面板专用入口——应用即写建层比例槽 + 武装画拉 */
+export type AddRatioPresetKind = {
+    kind: 'ratio-preset';
+    preset: RatioPresetId;
+    label: string;
+    title: string;
+};
 export declare const ADD_MENU: readonly AddMenuKind[];
 /** 文本预设三项（text-defaults 工单 02，spec 决策 4）：从内核 TEXT_PRESETS 派生
  *  （字号单一事实源，内核改档位文案自动跟随），v1 只定字号——字体缺口由新层样式槽补 */
 export declare const ADD_TEXT_PRESET_MENU: readonly AddTextPresetKind[];
-/** 面板「＋」完整序（text-defaults 工单 02，spec 决策 5）：文本预设三项插在「文本层」之后；
- *  工具栏派生视图 ADD_LAYER_MENU 不含预设（预设只属面板） */
-export declare const PANEL_ADD_MENU: readonly (AddMenuKind | AddTextPresetKind)[];
+/** 比例预设六档（image-ratio-preset 工单 02，spec 决策 2）：从内核 RATIO_PRESETS
+ *  派生（比例与顺序单一事实源）。title 带比例说明与画拉提示；Shift 手势瞬时反转
+ *  槽态随档位给反向提示——具名档按 Shift 临时自由、自由档按 Shift 临时钳 1:1 */
+export declare const ADD_RATIO_PRESET_MENU: readonly AddRatioPresetKind[];
+/** 面板「＋」完整序（text-defaults 工单 02 + image-ratio-preset 工单 02，spec 决策 2/5）：
+ *  文本预设三项插在「文本层」之后、比例六档平铺在「图片层」之后；工具栏派生视图
+ *  ADD_LAYER_MENU 不含预设（预设只属面板） */
+export declare const PANEL_ADD_MENU: readonly (AddMenuKind | AddTextPresetKind | AddRatioPresetKind)[];
 /** 层型项视图（工具栏「＋插入▾」消费，editor-top-toolbar 工单 03）：ADD_MENU 的
- *  四类图层项，模板表项不进工具栏 */
-export declare const ADD_LAYER_MENU: readonly Extract<AddMenuKind, {
-    kind: 'layer';
-}>[];
+ *  四类图层项。template-table-drag-create 工单 03 起模板表项同序收入（spec 决策
+ *  5，四图层项后收尾）——视图 = ADD_MENU 全量恒等派生，工具栏与面板同序同文案；
+ *  分发差异（模板表项弹层表单、四图层项直接武装）归消费面（LayerPanel / 宿主） */
+export declare const ADD_LAYER_MENU: readonly AddMenuKind[];

package/dist/layer-panel/index.d.ts

@@ -1,7 +1,10 @@
 /**
- * 图层面板域出口：图层面板组件、订阅切片桥（useLayerPanel）与新增菜单数据面
- * （ADD_MENU/ADD_LAYER_MENU——工具栏「＋插入▾」同源消费，editor-top-toolbar 工单 03）。
+ * 图层面板域出口：图层面板组件、共享模板行路径表单（TemplateTableForm——面板菜单
+ * 与工具栏弹层共用，template-table-drag-create 工单 02）、订阅切片桥（useLayerPanel）
+ * 与新增菜单数据面（ADD_MENU/ADD_LAYER_MENU——工具栏「＋插入▾」同源消费，
+ * editor-top-toolbar 工单 03；两族预设清单面板专用，image-ratio-preset 工单 02 起含比例档位）。
  */
 export { default as LayerPanel } from './LayerPanel';
+export { default as TemplateTableForm } from './TemplateTableForm';
 export { isUpperHalf, useLayerPanel, type LayerPanelBinding } from './useLayerPanel';
-export { ADD_LAYER_MENU, ADD_MENU, ADD_TEXT_PRESET_MENU, PANEL_ADD_MENU, type AddMenuKind, type AddTextPresetKind, } from './addMenu';
+export { ADD_LAYER_MENU, ADD_MENU, ADD_RATIO_PRESET_MENU, ADD_TEXT_PRESET_MENU, PANEL_ADD_MENU, type AddMenuKind, type AddRatioPresetKind, type AddTextPresetKind, } from './addMenu';

package/dist/{layer-panel-DskyCgF5.js → layer-panel-kOceTf8H.js}

@@ -2,10 +2,10 @@ import { t as e } from "./createLucideIcon-SCvtEGVf.js";
 import { i as t, r as n, t as r } from "./layerPath-uy2ywyld.js";
 import { o as i, s as a, u as o } from "./popupPosition-Ck5Gsvjy.js";
 import { c as s, i as c, s as l, t as u } from "./useTransientFeedback-CTjmMmFF.js";
-import { n as ee, t as te } from "./usePathCompletion-Do17CQ6l.js";
-import { n as ne, t as re } from "./useDataSourceSchema-CGbldbUj.js";
-import { Fragment as d, computed as f, createBlock as ie, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, nextTick as ae, normalizeClass as v, normalizeStyle as oe, onScopeDispose as y, openBlock as b, ref as x, renderList as se, shallowRef as S, toDisplayString as ce, unref as C, vModelText as w, watch as le, withCtx as T, withDirectives as E, withKeys as D, withModifiers as O } from "vue";
-var ue = e({
+import { n as d, t as f } from "./usePathCompletion-Do17CQ6l.js";
+import { n as p, t as m } from "./useDataSourceSchema-CGbldbUj.js";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, nextTick as ee, normalizeClass as C, normalizeStyle as te, onScopeDispose as ne, openBlock as w, ref as T, renderList as re, shallowRef as E, toDisplayString as D, unref as O, vModelText as k, watch as ie, withCtx as A, withDirectives as j, withKeys as ae, withModifiers as M } from "vue";
+var oe = e({
 	name: "eye-off",
 	size: 24,
 	node: [
@@ -26,7 +26,7 @@ var ue = e({
 			key: "1ooewy"
 		}]
 	]
-}), de = e({
+}), se = e({
 	name: "eye",
 	size: 24,
 	node: [["path", {
@@ -38,7 +38,7 @@ var ue = e({
 		r: "3",
 		key: "1v7zrd"
 	}]]
-}), fe = e({
+}), ce = e({
 	name: "grip-vertical",
 	size: 24,
 	node: [
@@ -79,7 +79,7 @@ var ue = e({
 			key: "f4zoj3"
 		}]
 	]
-}), pe = e({
+}), le = e({
 	name: "lock-open",
 	size: 24,
 	node: [["rect", {
@@ -95,7 +95,7 @@ var ue = e({
 		key: "1mm8w8"
 	}]],
 	aliases: ["unlock"]
-}), me = e({
+}), ue = e({
 	name: "lock",
 	size: 24,
 	node: [["rect", {
@@ -110,7 +110,7 @@ var ue = e({
 		d: "M7 11V7a5 5 0 0 1 10 0v4",
 		key: "fwvmzm"
 	}]]
-}), he = e({
+}), de = e({
 	name: "pencil",
 	size: 24,
 	node: [["path", {
@@ -123,7 +123,7 @@ var ue = e({
 });
 //#endregion
 //#region ../canvas-editor/src/editing/layerPanel.ts
-function k(e) {
+function N(e) {
 	switch (e.type) {
 		case "TableLayer": return e.template === null ? [{
 			key: "rows",
@@ -149,7 +149,7 @@ function k(e) {
 		}];
 	}
 }
-function A(e) {
+function P(e) {
 	switch (e.type) {
 		case "TextLayer":
 		case "ImageLayer":
@@ -157,22 +157,22 @@ function A(e) {
 		default: return null;
 	}
 }
-var j = "{{…}}";
-function M(e) {
-	let t = A(e);
+var F = "{{…}}";
+function I(e) {
+	let t = P(e);
 	if (t === null) return "";
 	let n = o(t).parts.flatMap((e) => e.kind === "fragment" && e.expr !== "" ? [e.expr] : []);
-	return n.length === 0 ? j : n.map((e) => `{{${e}}}`).join(" ");
+	return n.length === 0 ? F : n.map((e) => `{{${e}}}`).join(" ");
 }
-function N(e, t, n, i) {
+function L(e, t, n, i) {
 	let a = [];
-	for (let { key: n, layers: r } of k(e)) for (let e = 0; e < r.length; e += 1) {
+	for (let { key: n, layers: r } of N(e)) for (let e = 0; e < r.length; e += 1) {
 		let o = n === "rows" ? "row" : n === "cells" ? "cell" : n === "template" ? "templateRow" : "content", s = n === "content" ? [...t, "content"] : n === "template" ? [...t, "template"] : [
 			...t,
 			n,
 			e
 		];
-		a.push(N(r[e], s, o, i));
+		a.push(L(r[e], s, o, i));
 	}
 	return {
 		type: e.type,
@@ -181,17 +181,17 @@ function N(e, t, n, i) {
 		name: e.name,
 		visible: e.visible,
 		locked: r(t, i),
-		expressionPrefix: M(e),
+		expressionPrefix: I(e),
 		...e.type === "TableLayer" ? { templated: e.template !== null } : null,
 		children: a
 	};
 }
-function P(e, t = []) {
+function R(e, t = []) {
 	let n = [];
-	for (let r = e.layers.length - 1; r >= 0; --r) n.push(N(e.layers[r], ["layers", r], "root", t));
+	for (let r = e.layers.length - 1; r >= 0; --r) n.push(L(e.layers[r], ["layers", r], "root", t));
 	return n;
 }
-var F = [
+var z = [
 	{
 		id: "heading",
 		fontSize: 40
@@ -204,7 +204,47 @@ var F = [
 		id: "body",
 		fontSize: 16
 	}
-], I = [
+], B = [
+	{
+		id: "free",
+		ratio: null
+	},
+	{
+		id: "1:1",
+		ratio: {
+			w: 1,
+			h: 1
+		}
+	},
+	{
+		id: "4:3",
+		ratio: {
+			w: 4,
+			h: 3
+		}
+	},
+	{
+		id: "3:4",
+		ratio: {
+			w: 3,
+			h: 4
+		}
+	},
+	{
+		id: "16:9",
+		ratio: {
+			w: 16,
+			h: 9
+		}
+	},
+	{
+		id: "9:16",
+		ratio: {
+			w: 9,
+			h: 16
+		}
+	}
+], V = [
 	{
 		kind: "layer",
 		type: "TextLayer",
@@ -234,52 +274,131 @@ var F = [
 		label: "模板表",
 		title: "新增模板表（行模板 + 数据行展开）"
 	}
-], L = {
+], H = {
 	heading: "标题",
 	subheading: "副标题",
 	body: "正文"
-}, R = F.map(({ id: e, fontSize: t }) => ({
+}, U = z.map(({ id: e, fontSize: t }) => ({
 	kind: "text-preset",
 	preset: e,
-	label: L[e],
-	title: `画拉建${L[e]}文本层（字号 ${t}，点击后在画布拖拽定落位与尺寸，Esc 取消）`
-})), z = (() => {
-	let e = I.findIndex((e) => e.kind === "layer" && e.type === "TextLayer");
+	label: H[e],
+	title: `画拉建${H[e]}文本层（字号 ${t}，点击后在画布拖拽定落位与尺寸，Esc 取消）`
+})), W = {
+	free: "自由",
+	"1:1": "1:1",
+	"4:3": "4:3",
+	"3:4": "3:4",
+	"16:9": "16:9",
+	"9:16": "9:16"
+};
+function G(e) {
+	return e === null ? "任意宽高" : e.w === e.h ? "正方形" : e.w > e.h ? "横向" : "纵向";
+}
+var K = B.map(({ id: e, ratio: t }) => ({
+	kind: "ratio-preset",
+	preset: e,
+	label: W[e],
+	title: e === "free" ? "画拉建自由比例图片层（任意宽高，画拉中按住 Shift 临时锁 1:1；点击后在画布拖拽定落位与尺寸，Esc 取消）" : `画拉建 ${e} 图片层（${G(t)}，画拉中按住 Shift 临时自由；点击后在画布拖拽定落位与尺寸，Esc 取消）`
+}));
+function q(e, t, n) {
+	let r = e.findIndex(n);
 	return [
-		...I.slice(0, e + 1),
-		...R,
-		...I.slice(e + 1)
+		...e.slice(0, r + 1),
+		...t,
+		...e.slice(r + 1)
 	];
-})(), B = I.filter((e) => e.kind === "layer");
+}
+var J = (e) => (t) => t.kind === "layer" && t.type === e, Y = q(q(V, U, J("TextLayer")), K, J("ImageLayer")), fe = V, pe = {
+	key: 0,
+	class: "px-2 pb-1 text-[11px] text-cn-danger"
+}, me = { class: "flex gap-1 p-1" }, he = /* @__PURE__ */ S({
+	__name: "TemplateTableForm",
+	props: { editor: {} },
+	emits: ["confirm", "cancel"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = T(""), o = T(!1);
+		function s() {
+			let e = a.value.trim();
+			if (e === "") {
+				o.value = !0;
+				return;
+			}
+			r("confirm", e);
+		}
+		let c = m(n.editor), l = g(() => d(c.value)), u = T(null), p = T(null), { popup: h, accept: _ } = f({
+			target: u,
+			enabled: () => !0,
+			resolve: (e) => l.value?.(e) ?? null,
+			popupEl: g(() => p.value?.rootEl ?? null)
+		});
+		function S(e) {
+			if (e.key === "Enter") {
+				if (h.open && h.items.length > 0) return;
+				e.preventDefault(), s();
+				return;
+			}
+			e.key === "Escape" && (h.open ? e.stopPropagation() : r("cancel"));
+		}
+		return (e, t) => (w(), y("div", null, [
+			t[3] ||= b("p", { class: "px-2 pt-1 text-[11px] leading-4 text-cn-muted" }, "模板行按数据行路径展开成表", -1),
+			j(b("input", {
+				ref_key: "rowsPathInputEl",
+				ref: u,
+				"onUpdate:modelValue": t[0] ||= (e) => a.value = e,
+				"data-template-rows-path": "",
+				type: "text",
+				placeholder: "如 order.items",
+				class: C(["mx-1 my-1 w-[calc(100%-8px)] rounded border bg-cn-field px-2 py-1 text-[12px] text-cn-fg outline-none focus:border-cn-accent/60", o.value ? "border-cn-danger" : "border-cn-field-line"]),
+				onInput: t[1] ||= (e) => o.value = !1,
+				onKeydown: S
+			}, null, 34), [[k, a.value]]),
+			o.value ? (w(), y("p", pe, "rowsPath 必填")) : v("", !0),
+			b("div", me, [b("button", {
+				type: "button",
+				"data-template-confirm": "",
+				class: "flex-1 rounded bg-cn-accent/20 px-2 py-1 text-[12px] text-cn-accent hover:bg-cn-accent/30",
+				onClick: s
+			}, " 创建 "), b("button", {
+				type: "button",
+				"data-template-cancel": "",
+				class: "flex-1 rounded px-2 py-1 text-[12px] text-cn-muted hover:text-cn-fg",
+				onClick: t[2] ||= (e) => r("cancel")
+			}, " 取消 ")]),
+			x(i, {
+				ref_key: "pathPopupRef",
+				ref: p,
+				state: O(h),
+				onSelect: O(_)
+			}, null, 8, ["state", "onSelect"])
+		]));
+	}
+});
 //#endregion
 //#region src/layer-panel/useLayerPanel.ts
-function V(e) {
-	let t = S(e.store.doc), n = S(e.store.ui.selection), r = S(e.store.ui.hovered), i = S(e.store.ui.renaming), a = S(e.store.ui.lockedPaths), o = e.subscribe((o) => {
+function ge(e) {
+	let t = E(e.store.doc), n = E(e.store.ui.selection), r = E(e.store.ui.hovered), i = E(e.store.ui.renaming), a = E(e.store.ui.lockedPaths), o = e.subscribe((o) => {
 		o.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, r.value = e.store.ui.hovered, i.value = e.store.ui.renaming, a.value = e.store.ui.lockedPaths) : o.branch === "selection" ? n.value = e.store.ui.selection : o.branch === "hovered" ? r.value = e.store.ui.hovered : o.branch === "renaming" ? i.value = e.store.ui.renaming : o.branch === "lockedPaths" && (a.value = e.store.ui.lockedPaths);
 	});
-	return y(o, !0), {
-		outline: f(() => t.value ? P(t.value, a.value) : []),
-		selection: f(() => n.value),
-		hovered: f(() => r.value),
-		renaming: f(() => i.value)
+	return ne(o, !0), {
+		outline: g(() => t.value ? R(t.value, a.value) : []),
+		selection: g(() => n.value),
+		hovered: g(() => r.value),
+		renaming: g(() => i.value)
 	};
 }
-function H(e, t) {
+function _e(e, t) {
 	return t > 0 && e < t / 2;
 }
 //#endregion
 //#region src/layer-panel/LayerPanel.vue?vue&type=script&setup=true&lang.ts
-var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rounded-xl border border-cn-line bg-cn-bg text-cn-fg shadow-[0_16px_40px_-12px_rgba(2,6,23,0.55)]" }, _e = { class: "sticky top-0 z-10 flex items-center justify-between border-b border-cn-line bg-cn-bg-elevated/95 px-3.5 py-2.5" }, ve = { class: "flex items-center gap-1" }, ye = [
+var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rounded-xl border border-cn-line bg-cn-bg text-cn-fg shadow-[0_16px_40px_-12px_rgba(2,6,23,0.55)]" }, ye = { class: "sticky top-0 z-10 flex items-center justify-between border-b border-cn-line bg-cn-bg-elevated/95 px-3.5 py-2.5" }, be = { class: "flex items-center gap-1" }, xe = [
 	"aria-expanded",
 	"onClick",
 	"onKeydown"
-], be = ["onKeydown"], xe = {
-	key: 0,
-	class: "px-2 pb-1 text-[11px] text-cn-danger"
-}, Se = { class: "flex gap-1 p-1" }, Ce = ["onClick"], we = ["onClick"], Te = {
+], Se = {
 	key: 0,
 	class: "mx-3.5 my-4 rounded-lg border border-dashed border-cn-line px-3 py-6 text-center text-[11px] leading-5 text-cn-muted"
-}, Ee = [
+}, Ce = [
 	"data-key",
 	"draggable",
 	"onClick",
@@ -287,31 +406,27 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 	"onDragstart",
 	"onDragover",
 	"onDrop"
-], De = ["onDragstart"], Oe = ["title"], ke = ["onDblclick"], Ae = [
+], we = ["onDragstart"], Te = ["title"], Ee = ["onDblclick"], De = [
 	"title",
 	"aria-pressed",
 	"onClick"
-], je = [
+], Oe = [
 	"title",
 	"aria-pressed",
 	"onClick"
-], Me = ["onClick"], Ne = [
+], ke = ["onClick"], Ae = [
 	"disabled",
 	"title",
 	"onClick"
-], Pe = ["onClick"], Fe = ["onClick"], Ie = [
+], je = ["onClick"], Me = ["onClick"], Ne = [
 	"disabled",
 	"title",
 	"onClick"
-], U = /* @__PURE__ */ _({
+], X = /* @__PURE__ */ S({
 	__name: "LayerPanel",
 	props: { editor: {} },
 	setup(e) {
-		let r = e, o = `解锁图层（${s("toggleLayerLock", l())}）`, _ = `图层已锁定（${s("toggleLayerLock", l())} 解锁后可删除）`, y = V(r.editor), S = x(!1), k = x(""), A = x(!1);
-		function j() {
-			S.value = !1, k.value = "", A.value = !1;
-		}
-		let M = f(() => S.value ? [] : z.map((e) => e.kind === "layer" ? {
+		let r = e, i = `解锁图层（${s("toggleLayerLock", l())}）`, o = `图层已锁定（${s("toggleLayerLock", l())} 解锁后可删除）`, d = ge(r.editor), f = T(!1), m = g(() => f.value ? [] : Y.map((e) => e.kind === "layer" ? {
 			label: e.label,
 			title: e.title,
 			dataAttrs: { "data-add-layer": e.type },
@@ -328,44 +443,35 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 			run: () => {
 				r.editor.armLayerCreate("TextLayer", e.preset), u().show(c);
 			}
+		} : e.kind === "ratio-preset" ? {
+			label: e.label,
+			title: e.title,
+			dataAttrs: {
+				"data-add-layer": "ImageLayer",
+				"data-ratio-preset": e.preset
+			},
+			run: () => {
+				r.editor.armLayerCreate("ImageLayer", e.preset), u().show(c);
+			}
 		} : {
 			label: e.label,
 			title: e.title,
 			dataAttrs: { "data-add-layer": "template-table" },
 			keepsOpen: !0,
 			run: () => {
-				S.value = !0;
+				f.value = !0;
 			}
 		}));
-		function N(e) {
-			let t = k.value.trim();
-			if (t === "") {
-				A.value = !0;
-				return;
-			}
-			r.editor.addTemplateTable(t), j(), e();
-		}
-		function P(e) {
-			j(), e();
+		function S(e, t) {
+			r.editor.armTemplateTableCreate(e), u().show(c), t();
 		}
-		function F() {
-			j();
+		function ne(e) {
+			f.value = !1, e();
 		}
-		let I = re(r.editor), L = f(() => ee(I.value)), R = x(null), B = x(null), { popup: U, accept: Le } = te({
-			target: R,
-			enabled: () => S.value,
-			resolve: (e) => L.value?.(e) ?? null,
-			popupEl: f(() => B.value?.rootEl ?? null)
-		});
-		function Re(e, t) {
-			if (e.key === "Enter") {
-				if (U.open && U.items.length > 0) return;
-				e.preventDefault(), N(t);
-				return;
-			}
-			e.key === "Escape" && U.open && e.stopPropagation();
+		function E() {
+			f.value = !1;
 		}
-		function ze(e, t) {
+		function N(e, t) {
 			switch (e.role) {
 				case "root": return e.name === "" ? `${e.type} ${t}` : e.name;
 				case "row": return `行 ${Number(e.path[e.path.length - 1]) + 1}`;
@@ -374,7 +480,7 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 				case "content": return e.type;
 			}
 		}
-		let W = f(() => {
+		let P = g(() => {
 			let e = [], t = /* @__PURE__ */ new Map();
 			function r(i, a, o, s) {
 				let c = i.role === "row" ? i.path.slice(0, -2) : i.role === "templateRow" ? i.path.slice(0, -1) : s, l = 0;
@@ -382,42 +488,42 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 					key: i.path.join("."),
 					node: i,
 					indentLevel: a,
-					label: ze(i, l),
+					label: N(i, l),
 					indexInGroup: o,
 					tablePath: c,
 					inTemplate: n(i.path),
 					draggable: i.role === "root" || i.role === "row" || i.role === "cell"
 				}), i.children.forEach((e, t) => r(e, a + 1, t, c));
 			}
-			return y.outline.value.forEach((e, t) => r(e, 0, t, null)), e;
-		}), Be = f(() => W.value.length > 0);
-		function Ve(e) {
+			return d.outline.value.forEach((e, t) => r(e, 0, t, null)), e;
+		}), F = g(() => P.value.length > 0);
+		function I(e) {
 			r.editor.setSelection(e.node.path);
 		}
-		function G(e) {
+		function L(e) {
 			r.editor.setHovered(e === null ? null : e.node.path);
 		}
-		function He(e) {
+		function R(e) {
 			r.editor.addTableRow(e.node.path);
 		}
-		function Ue(e) {
+		function z(e) {
 			r.editor.addTableCell(e.node.path);
 		}
-		function We(e) {
+		function B(e) {
 			r.editor.addTemplateCell(e.node.path.slice(0, -1));
 		}
-		function Ge(e) {
+		function V(e) {
 			r.editor.deleteLayer(e.node.path);
 		}
-		function Ke(e) {
+		function H(e) {
 			r.editor.toggleLayerVisibility(e.node.path);
 		}
-		function qe(e) {
+		function U(e) {
 			r.editor.toggleLayerLock(e.node.path);
 		}
-		let K = x(null), q = x(null);
-		function J(e) {
-			let r = K.value;
+		let W = T(null), G = T(null);
+		function K(e) {
+			let r = W.value;
 			if (!r) return !1;
 			if (r.kind === "root") return e.node.role === "root";
 			if (r.kind === "row") return e.node.role === "row";
@@ -425,11 +531,11 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 			let i = n(r.cellPath);
 			return i === e.inTemplate ? !i || t(r.cellPath.slice(0, -2), e.node.path.slice(0, -2)) : !1;
 		}
-		function Y(e) {
+		function q(e) {
 			return e.node.role === "root";
 		}
-		function X(e, t) {
-			e.draggable && (K.value = e.node.role === "root" ? {
+		function J(e, t) {
+			e.draggable && (W.value = e.node.role === "root" ? {
 				kind: "root",
 				from: e.indexInGroup
 			} : e.node.role === "row" ? {
@@ -443,74 +549,74 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 				cellPath: e.node.path
 			}, t.dataTransfer?.setData("text/plain", e.key), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"));
 		}
-		function Je(e, t) {
-			Y(e) || X(e, t);
+		function fe(e, t) {
+			q(e) || J(e, t);
 		}
-		function Ye(e) {
-			if (!Y(e)) return e.draggable || void 0;
+		function pe(e) {
+			if (!q(e)) return e.draggable || void 0;
 		}
-		function Xe(e, t) {
-			if (!J(e)) return;
-			let n = t.currentTarget.getBoundingClientRect(), r = H(t.clientY - n.top, n.height);
-			t.preventDefault(), q.value = {
+		function me(e, t) {
+			if (!K(e)) return;
+			let n = t.currentTarget.getBoundingClientRect(), r = _e(t.clientY - n.top, n.height);
+			t.preventDefault(), G.value = {
 				key: e.key,
 				edge: r ? "before" : "after"
 			};
 		}
-		function Ze(e, t) {
-			if (!J(e)) return;
-			let n = q.value, i = K.value;
+		function X(e, t) {
+			if (!K(e)) return;
+			let n = G.value, i = W.value;
 			if (!i || !n || n.key !== e.key) return;
 			t.preventDefault();
 			let a = n.edge === "before" ? e.indexInGroup : e.indexInGroup + 1;
-			i.kind === "root" ? r.editor.moveRootLayer(i.from, a) : i.kind === "row" ? e.tablePath !== null && e.tablePath.join(".") === i.tablePath.join(".") ? r.editor.moveTableRow(i.tablePath, i.from, a) : r.editor.moveTableRowToTable(i.rowPath, e.tablePath, a) : r.editor.moveTableCellToRow(i.cellPath, e.node.path.slice(0, -2), a), K.value = null, q.value = null;
+			i.kind === "root" ? r.editor.moveRootLayer(i.from, a) : i.kind === "row" ? e.tablePath !== null && e.tablePath.join(".") === i.tablePath.join(".") ? r.editor.moveTableRow(i.tablePath, i.from, a) : r.editor.moveTableRowToTable(i.rowPath, e.tablePath, a) : r.editor.moveTableCellToRow(i.cellPath, e.node.path.slice(0, -2), a), W.value = null, G.value = null;
 		}
-		function Qe() {
-			K.value = null, q.value = null;
+		function Pe() {
+			W.value = null, G.value = null;
 		}
-		function Z(e) {
-			return t(y.selection.value, e.node.path);
+		function Fe(e) {
+			return t(d.selection.value, e.node.path);
 		}
-		function $e(e) {
-			return t(y.hovered.value, e.node.path);
+		function Ie(e) {
+			return t(d.hovered.value, e.node.path);
 		}
-		let Q = x(""), $ = null, et = null;
-		function tt(e) {
-			et = e instanceof HTMLInputElement ? e : null;
+		let Z = T(""), Q = null, Le = null;
+		function Re(e) {
+			Le = e instanceof HTMLInputElement ? e : null;
 		}
-		function nt(e) {
-			return t(y.renaming.value, e.node.path);
+		function ze(e) {
+			return t(d.renaming.value, e.node.path);
 		}
-		function rt(e) {
-			Y(e) && r.editor.beginRename(e.node.path);
+		function Be(e) {
+			q(e) && r.editor.beginRename(e.node.path);
 		}
-		function it() {
-			let e = Q.value.trim();
-			if ($ !== null && e === $.trim()) {
+		function $() {
+			let e = Z.value.trim();
+			if (Q !== null && e === Q.trim()) {
 				r.editor.cancelRename();
 				return;
 			}
 			r.editor.commitRename(e);
 		}
-		function at() {
+		function Ve() {
 			r.editor.cancelRename();
 		}
-		return le(y.renaming, async (e) => {
+		return ie(d.renaming, async (e) => {
 			if (e === null) {
-				$ = null;
+				Q = null;
 				return;
 			}
-			let n = W.value.find((n) => t(n.node.path, e));
-			Q.value = n?.label ?? "", $ = Q.value, await ae();
-			let r = et;
+			let n = P.value.find((n) => t(n.node.path, e));
+			Z.value = n?.label ?? "", Q = Z.value, await ee();
+			let r = Le;
 			r && (r.focus({ preventScroll: !0 }), r.select());
-		}), (e, t) => (b(), m("aside", ge, [
-			h("header", _e, [t[9] ||= h("span", { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, "图层", -1), h("div", ve, [g(ne, {
+		}), (e, t) => (w(), y("aside", ve, [
+			b("header", ye, [t[7] ||= b("span", { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, "图层", -1), b("div", be, [x(p, {
 				label: "新增图层",
-				items: M.value,
-				onClosed: F
+				items: m.value,
+				onClosed: E
 			}, {
-				trigger: T(({ open: e, toggle: t, triggerRef: n, onKeydown: r }) => [h("button", {
+				trigger: A(({ open: e, toggle: t, triggerRef: n, onKeydown: r }) => [b("button", {
 					ref: n,
 					type: "button",
 					"data-add-menu": "",
@@ -520,171 +626,151 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 					class: "flex size-6 items-center justify-center rounded border border-cn-field-line bg-cn-field text-[13px] leading-none text-cn-fg/80 hover:border-cn-accent/40 hover:text-cn-accent",
 					onClick: t,
 					onKeydown: r
-				}, " + ", 40, ye)]),
-				body: T(({ closeMenu: e }) => [S.value ? (b(), m(d, { key: 0 }, [
-					t[8] ||= h("p", { class: "px-2 pt-1 text-[11px] leading-4 text-cn-muted" }, "模板行按数据行路径展开成表", -1),
-					E(h("input", {
-						ref_key: "rowsPathInputEl",
-						ref: R,
-						"onUpdate:modelValue": t[0] ||= (e) => k.value = e,
-						"data-template-rows-path": "",
-						type: "text",
-						placeholder: "如 order.items",
-						class: v(["mx-1 my-1 w-[calc(100%-8px)] rounded border bg-cn-field px-2 py-1 text-[12px] text-cn-fg outline-none focus:border-cn-accent/60", A.value ? "border-cn-danger" : "border-cn-field-line"]),
-						onKeydown: (t) => Re(t, e)
-					}, null, 42, be), [[w, k.value]]),
-					A.value ? (b(), m("p", xe, "rowsPath 必填")) : p("", !0),
-					h("div", Se, [h("button", {
-						type: "button",
-						"data-template-confirm": "",
-						class: "flex-1 rounded bg-cn-accent/20 px-2 py-1 text-[12px] text-cn-accent hover:bg-cn-accent/30",
-						onClick: (t) => N(e)
-					}, " 创建 ", 8, Ce), h("button", {
-						type: "button",
-						class: "flex-1 rounded px-2 py-1 text-[12px] text-cn-muted hover:text-cn-fg",
-						onClick: (t) => P(e)
-					}, " 取消 ", 8, we)])
-				], 64)) : p("", !0)]),
+				}, " + ", 40, xe)]),
+				body: A(({ closeMenu: e }) => [f.value ? (w(), _(he, {
+					key: 0,
+					editor: r.editor,
+					onConfirm: (t) => S(t, e),
+					onCancel: (t) => ne(e)
+				}, null, 8, [
+					"editor",
+					"onConfirm",
+					"onCancel"
+				])) : v("", !0)]),
 				_: 1
-			}, 8, ["items"]), S.value ? (b(), ie(i, {
-				key: 0,
-				ref_key: "pathPopupRef",
-				ref: B,
-				state: C(U),
-				onSelect: C(Le)
-			}, null, 8, ["state", "onSelect"])) : p("", !0)])]),
-			Be.value ? p("", !0) : (b(), m("p", Te, " 画布还没有图层，用上方按钮新增 ")),
-			h("ul", {
+			}, 8, ["items"])])]),
+			F.value ? v("", !0) : (w(), y("p", Se, " 画布还没有图层，用上方按钮新增 ")),
+			b("ul", {
 				class: "cn-layers__tree flex flex-col gap-0.5 px-1.5 py-1",
-				onDragend: Qe
-			}, [(b(!0), m(d, null, se(W.value, (e) => (b(), m("li", {
+				onDragend: Pe
+			}, [(w(!0), y(h, null, re(P.value, (e) => (w(), y("li", {
 				key: e.key,
 				"data-key": e.key,
-				draggable: Ye(e),
-				class: v(["cn-layers__row group flex cursor-default select-none items-center gap-1 py-1 pr-1 text-[12px]", {
-					"cn-layers__row--selected": Z(e),
-					"cn-layers__row--hovered": $e(e) && !Z(e),
-					"cn-layers__row--hidden": Y(e) && !e.node.visible,
+				draggable: pe(e),
+				class: C(["cn-layers__row group flex cursor-default select-none items-center gap-1 py-1 pr-1 text-[12px]", {
+					"cn-layers__row--selected": Fe(e),
+					"cn-layers__row--hovered": Ie(e) && !Fe(e),
+					"cn-layers__row--hidden": q(e) && !e.node.visible,
 					"cn-layers__row--template": e.inTemplate,
-					"cursor-grab": e.draggable && !Y(e),
-					"cn-layers__row--drop-before": q.value?.key === e.key && q.value?.edge === "before",
-					"cn-layers__row--drop-after": q.value?.key === e.key && q.value?.edge === "after"
+					"cursor-grab": e.draggable && !q(e),
+					"cn-layers__row--drop-before": G.value?.key === e.key && G.value?.edge === "before",
+					"cn-layers__row--drop-after": G.value?.key === e.key && G.value?.edge === "after"
 				}]),
-				style: oe({ paddingLeft: `${4 + e.indentLevel * 14}px` }),
-				onClick: (t) => Ve(e),
-				onMouseenter: (t) => G(e),
-				onMouseleave: t[7] ||= (e) => G(null),
-				onDragstart: (t) => Je(e, t),
-				onDragover: (t) => Xe(e, t),
-				onDrop: (t) => Ze(e, t)
+				style: te({ paddingLeft: `${4 + e.indentLevel * 14}px` }),
+				onClick: (t) => I(e),
+				onMouseenter: (t) => L(e),
+				onMouseleave: t[6] ||= (e) => L(null),
+				onDragstart: (t) => fe(e, t),
+				onDragover: (t) => me(e, t),
+				onDrop: (t) => X(e, t)
 			}, [
-				Y(e) ? (b(), m("span", {
+				q(e) ? (w(), y("span", {
 					key: 0,
 					"data-drag-handle": "",
 					draggable: "true",
 					title: "拖动排序",
 					class: "cn-layers__handle shrink-0",
-					onDragstart: (t) => X(e, t)
-				}, [g(a, {
-					icon: C(fe),
+					onDragstart: (t) => J(e, t)
+				}, [x(a, {
+					icon: O(ce),
 					size: 12,
 					"stroke-width": 2.5
-				}, null, 8, ["icon"])], 40, De)) : p("", !0),
-				e.node.expressionPrefix === "" ? p("", !0) : (b(), m("span", {
+				}, null, 8, ["icon"])], 40, we)) : v("", !0),
+				e.node.expressionPrefix === "" ? v("", !0) : (w(), y("span", {
 					key: 1,
 					class: "cn-layers__prefix",
 					title: e.node.expressionPrefix
-				}, ce(e.node.expressionPrefix), 9, Oe)),
-				nt(e) ? E((b(), m("input", {
+				}, D(e.node.expressionPrefix), 9, Te)),
+				ze(e) ? j((w(), y("input", {
 					key: 2,
 					ref_for: !0,
-					ref: tt,
-					"onUpdate:modelValue": t[1] ||= (e) => Q.value = e,
+					ref: Re,
+					"onUpdate:modelValue": t[0] ||= (e) => Z.value = e,
 					"data-rename-input": "",
 					"aria-label": "图层重命名",
 					class: "cn-layers__rename-input min-w-0 flex-1",
-					onClick: t[2] ||= O(() => {}, ["stop"]),
-					onDblclick: t[3] ||= O(() => {}, ["stop"]),
-					onKeydown: [t[4] ||= D(O((e) => it(), ["prevent"]), ["enter"]), t[5] ||= D(O((e) => at(), ["prevent"]), ["esc"])],
-					onBlur: t[6] ||= (e) => it()
-				}, null, 544)), [[w, Q.value]]) : (b(), m("span", {
+					onClick: t[1] ||= M(() => {}, ["stop"]),
+					onDblclick: t[2] ||= M(() => {}, ["stop"]),
+					onKeydown: [t[3] ||= ae(M((e) => $(), ["prevent"]), ["enter"]), t[4] ||= ae(M((e) => Ve(), ["prevent"]), ["esc"])],
+					onBlur: t[5] ||= (e) => $()
+				}, null, 544)), [[k, Z.value]]) : (w(), y("span", {
 					key: 3,
 					class: "cn-layers__label min-w-0 flex-1 truncate font-mono text-[11px] leading-4",
-					onDblclick: (t) => rt(e)
-				}, ce(e.label), 41, ke)),
-				Y(e) ? (b(), m("button", {
+					onDblclick: (t) => Be(e)
+				}, D(e.label), 41, Ee)),
+				q(e) ? (w(), y("button", {
 					key: 4,
 					type: "button",
 					"data-visibility": "",
-					class: v(["cn-layers__eye size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.visible ? "hidden group-hover:flex" : "flex"]),
+					class: C(["cn-layers__eye size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.visible ? "hidden group-hover:flex" : "flex"]),
 					title: e.node.visible ? "隐藏图层（最终输出不含该层）" : "显示图层",
 					"aria-pressed": !e.node.visible,
-					onClick: O((t) => Ke(e), ["stop"])
-				}, [g(a, {
-					icon: e.node.visible ? C(de) : C(ue),
+					onClick: M((t) => H(e), ["stop"])
+				}, [x(a, {
+					icon: e.node.visible ? O(se) : O(oe),
 					size: 11,
 					"stroke-width": 2
-				}, null, 8, ["icon"])], 10, Ae)) : p("", !0),
-				Y(e) ? (b(), m("button", {
+				}, null, 8, ["icon"])], 10, De)) : v("", !0),
+				q(e) ? (w(), y("button", {
 					key: 5,
 					type: "button",
 					"data-lock": "",
-					class: v(["cn-layers__lock size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.locked ? "flex" : "hidden group-hover:flex"]),
-					title: e.node.locked ? o : "锁定图层（画布不可点选/拖动/删除，渲染照常）",
+					class: C(["cn-layers__lock size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.locked ? "flex" : "hidden group-hover:flex"]),
+					title: e.node.locked ? i : "锁定图层（画布不可点选/拖动/删除，渲染照常）",
 					"aria-pressed": e.node.locked,
-					onClick: O((t) => qe(e), ["stop"])
-				}, [g(a, {
-					icon: e.node.locked ? C(me) : C(pe),
+					onClick: M((t) => U(e), ["stop"])
+				}, [x(a, {
+					icon: e.node.locked ? O(ue) : O(le),
 					size: 11,
 					"stroke-width": 2
-				}, null, 8, ["icon"])], 10, je)) : p("", !0),
-				Y(e) ? (b(), m("button", {
+				}, null, 8, ["icon"])], 10, Oe)) : v("", !0),
+				q(e) ? (w(), y("button", {
 					key: 6,
 					type: "button",
 					"data-rename": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
 					title: "重命名（双击名称或 F2）",
-					onClick: O((t) => rt(e), ["stop"])
-				}, [g(a, {
-					icon: C(he),
+					onClick: M((t) => Be(e), ["stop"])
+				}, [x(a, {
+					icon: O(de),
 					size: 11,
 					"stroke-width": 2
-				}, null, 8, ["icon"])], 8, Me)) : p("", !0),
-				e.node.role === "root" && e.node.type === "TableLayer" ? (b(), m("button", {
+				}, null, 8, ["icon"])], 8, ke)) : v("", !0),
+				e.node.role === "root" && e.node.type === "TableLayer" ? (w(), y("button", {
 					key: 7,
 					type: "button",
 					"data-add-row": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex disabled:cursor-not-allowed disabled:text-cn-muted/50 disabled:hover:bg-transparent",
 					disabled: e.node.templated === !0,
 					title: e.node.templated === !0 ? "模板态不可加行——行由数据展开" : "加行（缺省行 + 缺省格与文本，行宽=表宽）",
-					onClick: O((t) => He(e), ["stop"])
-				}, " +行 ", 8, Ne)) : p("", !0),
-				e.node.role === "row" ? (b(), m("button", {
+					onClick: M((t) => R(e), ["stop"])
+				}, " +行 ", 8, Ae)) : v("", !0),
+				e.node.role === "row" ? (w(), y("button", {
 					key: 8,
 					type: "button",
 					"data-add-cell": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
 					title: "加格（缺省格 + 文本内容，行高取最高格）",
-					onClick: O((t) => Ue(e), ["stop"])
-				}, " +格 ", 8, Pe)) : p("", !0),
-				e.node.role === "templateRow" ? (b(), m("button", {
+					onClick: M((t) => z(e), ["stop"])
+				}, " +格 ", 8, je)) : v("", !0),
+				e.node.role === "templateRow" ? (w(), y("button", {
 					key: 9,
 					type: "button",
 					"data-add-template-cell": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
 					title: "加格（缺省格 + 文本内容，零高度耦合——行高由数据展开定稿）",
-					onClick: O((t) => We(e), ["stop"])
-				}, " +格 ", 8, Fe)) : p("", !0),
-				h("button", {
+					onClick: M((t) => B(e), ["stop"])
+				}, " +格 ", 8, Me)) : v("", !0),
+				b("button", {
 					type: "button",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-danger/15 hover:text-cn-danger group-hover:flex disabled:cursor-not-allowed disabled:text-cn-muted/50 disabled:hover:bg-transparent disabled:hover:text-cn-muted/50",
 					disabled: e.node.role === "templateRow" || e.node.locked,
-					title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ? _ : "删除（含子层）",
-					onClick: O((t) => Ge(e), ["stop"])
-				}, " ✕ ", 8, Ie)
-			], 46, Ee))), 128))], 32)
+					title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ? o : "删除（含子层）",
+					onClick: M((t) => V(e), ["stop"])
+				}, " ✕ ", 8, Ne)
+			], 46, Ce))), 128))], 32)
 		]));
 	}
 });
 //#endregion
-export { I as a, B as i, H as n, R as o, V as r, z as s, U as t };
+export { fe as a, U as c, he as i, Y as l, _e as n, V as o, ge as r, K as s, X as t };

package/dist/layer-panel.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./layer-panel-DskyCgF5.js";
-export { t as ADD_LAYER_MENU, e as ADD_MENU, r as ADD_TEXT_PRESET_MENU, o as LayerPanel, a as PANEL_ADD_MENU, n as isUpperHalf, i as useLayerPanel };
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./layer-panel-kOceTf8H.js";
+export { e as ADD_LAYER_MENU, a as ADD_MENU, s as ADD_RATIO_PRESET_MENU, t as ADD_TEXT_PRESET_MENU, c as LayerPanel, r as PANEL_ADD_MENU, n as TemplateTableForm, i as isUpperHalf, o as useLayerPanel };

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-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}
+.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-2327ee46]{touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.cn-surface__canvas[data-v-2327ee46]{width:100%;height:100%;display:block;position:absolute;inset:0}.cn-surface__canvas--overlay[data-v-2327ee46]{pointer-events:none}.cn-surface--pannable[data-v-2327ee46]{cursor:grab}.cn-surface--panning[data-v-2327ee46]{cursor:grabbing}.cn-surface__drop-hint[data-v-2327ee46]{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-2327ee46]{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*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hankchen/canvas-editor-vue",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "Vue 3 薄绑定：响应式桥、composables、画布表面组件、textarea 文本编辑 overlay、schema 驱动属性面板注册表",
   "type": "module",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@lucide/vue": "^1.48.0",
-    "@hankchen/canvas-editor": "0.5.0"
+    "@hankchen/canvas-editor": "0.6.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"