@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/utils/override-detection.ts

@@ -14,6 +14,7 @@ import type {
   ComponentInstance,
   OverridableProperties,
 } from '../../types/editor-components';
+import { debugLog } from './debug';
 
 /**
  * Find an element within the ComponentElement tree by ID
@@ -148,7 +149,7 @@ function detectSinglePropertyOverride(
   switch (type) {
     case 'text': {
       // Debug: Log text comparison attempt
-      console.log('[detectOverrides] Text comparison for element:', {
+      debugLog('[detectOverrides] Text comparison for element:', {
         elementId,
         masterHasInnerHTML: masterElement.innerHTML !== undefined,
         masterChildrenCount: masterElement.children.length,
@@ -160,7 +161,7 @@ function detectSinglePropertyOverride(
       // Skip text comparison for elements that use innerHTML (mixed content)
       // because the text is embedded in the HTML structure
       if (masterElement.innerHTML !== undefined) {
-        console.log('[detectOverrides] Skipping: element uses innerHTML');
+        debugLog('[detectOverrides] Skipping: element uses innerHTML');
         return null;
       }
 
@@ -171,7 +172,7 @@ function detectSinglePropertyOverride(
       if (masterElement.children.length === 0) {
         const masterText = masterElement.textContent || '';
 
-        console.log('[detectOverrides] Comparing text (leaf element):', {
+        debugLog('[detectOverrides] Comparing text (leaf element):', {
           elementId,
           instanceText,
           masterText,
@@ -179,7 +180,7 @@ function detectSinglePropertyOverride(
         });
 
         if (instanceText !== masterText) {
-          console.log('[detectOverrides] Text override detected:', {
+          debugLog('[detectOverrides] Text override detected:', {
             elementId,
             instanceText: instanceText.substring(0, 50),
             masterText: masterText.substring(0, 50),
@@ -196,7 +197,7 @@ function detectSinglePropertyOverride(
         // Text overrides should only be created at leaf elements (no children)
         // Creating a parent-level text override would destroy the child structure
         // when the override is applied (textContent replaces all children)
-        console.log('[detectOverrides] Skipping text override for element with children:', {
+        debugLog('[detectOverrides] Skipping text override for element with children:', {
           elementId,
           childrenCount: masterElement.children.length,
           reason: 'Text overrides at parent level would destroy child structure',
@@ -351,7 +352,7 @@ export function detectOverrides(
 
     // Debug: Log child matching
     if (componentElement.children.length > 0 || domChildren.length > 0) {
-      console.log('[detectOverrides] Child matching:', {
+      debugLog('[detectOverrides] Child matching:', {
         parentId: componentElement.id,
         domChildrenCount: domChildren.length,
         domChildrenIds: domChildren.map(dc => dc.getAttribute('data-element-id')),
@@ -375,7 +376,7 @@ export function detectOverrides(
       if (matchingDomChild) {
         processElement(matchingDomChild, componentChild);
       } else {
-        console.log('[detectOverrides] No matching DOM child for component child:', {
+        debugLog('[detectOverrides] No matching DOM child for component child:', {
           componentChildId: componentChild.id,
           componentChildTagName: componentChild.tagName,
           availableDomIds: domChildren.map(dc => dc.getAttribute('data-element-id')),
@@ -387,10 +388,10 @@ export function detectOverrides(
 
   processElement(instanceElement, masterElement);
 
-  console.log('[detectOverrides] ========== FINAL RESULT ==========');
-  console.log('[detectOverrides] Total overrides detected:', overrides.length);
+  debugLog('[detectOverrides] ========== FINAL RESULT ==========');
+  debugLog('[detectOverrides] Total overrides detected:', overrides.length);
   if (overrides.length > 0) {
-    console.log('[detectOverrides] Detected overrides:', overrides.map(o => ({
+    debugLog('[detectOverrides] Detected overrides:', overrides.map(o => ({
       type: o.type,
       targetElementId: o.targetElementId,
       value: typeof o.value === 'string' ? o.value.substring(0, 50) : o.value,

package/src/editor/utils/tailwind-utils.ts

@@ -5,6 +5,7 @@
  */
 
 import { twMerge } from 'tailwind-merge';
+import { debugLog } from './debug';
 import {
   TAILWIND_CONFLICT_GROUPS,
   ENUM_MAPPINGS,
@@ -63,7 +64,7 @@ export function cssToTailwindClass(
   // CSS変数参照はstyle属性に直接設定
   if (value.startsWith('var(')) {
     // DEBUG: var() を検出した時のログ
-    console.log('[DEBUG tailwind-utils] cssToTailwindClass detected var():', {
+    debugLog('[DEBUG tailwind-utils] cssToTailwindClass detected var():', {
       property,
       value,
       result: { className: null, styleValue: value },
@@ -421,7 +422,7 @@ export function applyTailwindStyles(
   styles: Record<string, string>
 ): void {
   // DEBUG: applyTailwindStyles 開始時のログ
-  console.log('[DEBUG tailwind-utils] applyTailwindStyles called:', {
+  debugLog('[DEBUG tailwind-utils] applyTailwindStyles called:', {
     elementId: element.id,
     elementTagName: element.tagName,
     inputStyles: styles,
@@ -492,7 +493,7 @@ export function applyTailwindStyles(
   });
 
   // DEBUG: applyTailwindStyles 最終適用結果のログ
-  console.log('[DEBUG tailwind-utils] applyTailwindStyles completed:', {
+  debugLog('[DEBUG tailwind-utils] applyTailwindStyles completed:', {
     elementId: element.id,
     classesToAdd,
     stylesToApply,

package/src/index.ts

@@ -22,11 +22,16 @@ export type { FrontendVisualEditorProps } from "./editor/FrontendVisualEditor";
 
 export { EditorProvider, useEditorContext } from "./editor/EditorContext";
 export type { ContentListItem, EditorMode } from "./editor/EditorContext";
+export type { DocumentAttributes } from "./editor/contexts/EditorArtboardContext";
+export { computeContentDepths } from "./editor/contexts/EditorArtboardContext";
 
 export { WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT, SLIDE_WIDTH, SLIDE_HEIGHT, BREAKPOINT_PRESETS } from "./editor/constants";
 
 export { registerAutoSaveFlush, flushAutoSave } from "./editor/autosave";
 
+/** パッケージの版。利用側が dev サーバーの束ねたコードと node_modules の食い違い(再起動漏れ)を検出するのに使う */
+export { EDITOR_VERSION } from "./version";
+
 /**
  * コメントの一覧(カンバン)。エディタとは別の画面に単独で置ける。
  *

package/src/io.ts

@@ -36,15 +36,36 @@ export type EditorContent = {
   comments?: EditorComment[];
 };
 
+/**
+ * 範囲アンカー。紙面(`#artboard`)の左上を原点にした px。
+ * `ref` は投稿したときの紙面の大きさ。紙面の幅が変わったら(ノート欄の有無など)
+ * 横方向だけ幅の比で補正する。縦は内容が増減すると動くので補正しない。
+ * width / height が 0 のときは「点」(クリックで置いたピン)。
+ */
+export type CommentRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ref?: { width: number; height: number };
+};
+
 export type EditorComment = {
   id: string;
   author: string;
   text: string;
   createdAt: string;
   resolved?: boolean;
+  /**
+   * ページ内の通し番号(投稿順)。削除しても振り直さないので、返信で「#3 の件」と
+   * 書いても指す先が変わらない。ホストが採番する(無いホストでは付かない)
+   */
+  seq?: number;
   /** 要素アンカー。無ければ全体へのコメント */
   anchorSrc?: string;
   anchorLabel?: string;
+  /** 範囲アンカー(紙面の px)。要素アンカーより優先して表示する */
+  anchorRect?: CommentRect;
   replies?: { id: string; author: string; text: string; createdAt: string }[];
 };
 
@@ -55,7 +76,7 @@ export type EditorDeck = {
 };
 
 export type CommentAction =
-  | { action: "add"; author: string; text: string; anchorSrc?: string; anchorLabel?: string }
+  | { action: "add"; author: string; text: string; anchorSrc?: string; anchorLabel?: string; anchorRect?: CommentRect }
   | { action: "reply"; commentId: string; author: string; text: string }
   | { action: "resolve"; commentId: string; resolved: boolean }
   | { action: "delete"; commentId: string };

package/src/lib/firebase/css-variables.ts

@@ -17,6 +17,7 @@ import type {
   CSSVariableDefinition,
   CSSVariableCollection,
 } from '../../types/css-variables';
+import { debugLog } from '../../editor/utils/debug';
 
 // ============================================
 // スコープタイプ定義
@@ -184,7 +185,7 @@ export async function getCSSVariables(
     const data = readDoc(key);
 
     if (!data) {
-      console.log(`[CSSVariables] No variables found for ${scope}:`, resourceId);
+      debugLog(`[CSSVariables] No variables found for ${scope}:`, resourceId);
       return null;
     }
 
@@ -240,7 +241,7 @@ export async function saveCSSVariables(
     };
 
     writeDoc(key, data);
-    console.log(`[CSSVariables] Saved variables for ${scope}:`, resourceId, 'count:', variables.length);
+    debugLog(`[CSSVariables] Saved variables for ${scope}:`, resourceId, 'count:', variables.length);
   } catch (error) {
     console.error('[CSSVariables] Error saving variables:', error);
     throw error;
@@ -298,7 +299,7 @@ export async function deleteCSSVariablesCollection(websiteId: string): Promise<v
     const key = getCSSVariablesKey(websiteId);
     const store = getStore();
     if (store) store.removeItem(key);
-    console.log('[CSSVariables] Deleted variables for website:', websiteId);
+    debugLog('[CSSVariables] Deleted variables for website:', websiteId);
   } catch (error) {
     console.error('[CSSVariables] Error deleting variables:', error);
     throw error;

package/src/lib/firebase/storage.ts

@@ -42,6 +42,7 @@ async function persistDataUrl(dataUrl: string, fileName: string): Promise<string
 }
 
 import type { PageResourceUpload } from '../../types/page';
+import { debugLog } from '../../editor/utils/debug';
 
 // ============================================
 // 内部ヘルパー
@@ -161,7 +162,7 @@ export async function uploadPageResource(
 
 // ファイル削除（ローカルではリモート実体が無いため no-op）
 export async function deletePageResource(storagePath: string): Promise<void> {
-  console.log('[storage] deletePageResource is a no-op in local mode:', storagePath);
+  debugLog('[storage] deletePageResource is a no-op in local mode:', storagePath);
 }
 
 // ファイル情報取得（ローカルではメタデータを保持しないためスタブを返す）
@@ -264,7 +265,7 @@ export async function uploadFigmaImage(
 // コンポーネントの画像ファイルを削除（ローカルでは no-op）
 export async function deleteFigmaComponentImages(componentId: string): Promise<void> {
   const basePath = `components/${componentId}/figma-images/`;
-  console.log(`[storage] deleteFigmaComponentImages is a no-op in local mode: ${basePath}`);
+  debugLog(`[storage] deleteFigmaComponentImages is a no-op in local mode: ${basePath}`);
 }
 
 // 画像ファイルサイズの推定（Base64から）

package/src/styles/skin.css

@@ -258,9 +258,46 @@
 .gg-editor-ui .ed-resize-handle:hover, .gg-editor-ui .ed-resize-handle:focus-visible { background-color: var(--ed-accent); }
 .gg-editor-ui .ed-layer-selected { box-shadow: inset 3px 0 var(--ed-accent); }
 .gg-editor-ui .ed-layer-selected :is(.text-white, .text-blue-100, .text-blue-200) { color: var(--ed-accent); }
-.gg-editor-ui [data-property-panel] input:not([type="color"]), .gg-editor-ui [data-property-panel] select { min-height: 28px; }
-.gg-editor-ui [data-property-panel] button[data-state] { min-height: 32px; }
+/* ── 右のプロパティパネル(Figma UI3 の寸法に寄せる) ──────────────
+   節は 1px の罫線で区切り、見出しは 13px/600・高さ 40px、中身は左右 16px。
+   入力は高さ 32px・角丸 6px・面の色(枠線は無し。ホバーで枠、フォーカスでアクセント)。
+   ラベルは 11px の補助色。数値の小さな入力(十字のパディング等)は 28px */
 .gg-editor-ui [data-property-panel] .ed-panel-heading { position: sticky; top: 0; z-index: 1; }
+.gg-editor-ui [data-property-panel] .p-3 { padding: 0; }
+.gg-editor-ui [data-property-panel] .p-3 > * { padding-left: 16px; padding-right: 16px; }
+.gg-editor-ui [data-property-panel] .p-3 > .mb-3 { min-height: 44px; margin-bottom: 0; }
+.gg-editor-ui [data-property-panel] .p-3 > [data-state] { border-top: 1px solid var(--ed-line); }
+.gg-editor-ui [data-property-panel] .p-3 > .ed-part-card { margin: 0 16px 12px; padding: 10px 12px; }
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state] {
+  min-height: 40px; padding: 0; border-top: 0; font-size: 13px; font-weight: 600; color: var(--ed-text); border-radius: 0;
+}
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state]:hover { background: transparent; color: var(--ed-text); }
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state] > span:first-child > svg { width: 14px; height: 14px; color: var(--ed-muted); }
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state] > svg:last-child { width: 14px; height: 14px; color: var(--ed-muted); }
+.gg-editor-ui [data-property-panel] [data-state] > div[data-state="open"] { padding-bottom: 16px; }
+.gg-editor-ui [data-property-panel] label, .gg-editor-ui [data-property-panel] .ed-prop-label { font-size: 11px; line-height: 1.4; color: var(--ed-muted); font-weight: 500; }
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *) {
+  min-height: 32px; height: 32px; border-radius: 6px; background: var(--ed-surface); border: 1px solid transparent !important;
+  color: var(--ed-text); font-size: 12px; padding-left: 8px; padding-right: 8px; box-shadow: none;
+}
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *):hover { border-color: var(--ed-line-strong) !important; }
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *):focus-visible,
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *):focus-within { border-color: var(--ed-accent) !important; outline: none; box-shadow: none; }
+/* 数値のスクラブ入力(CompactNumberInput。器 .group が枠) */
+.gg-editor-ui [data-property-panel] .group.h-5 { height: 28px; min-width: 40px; border-radius: 6px; background: var(--ed-surface); border-color: transparent; }
+.gg-editor-ui [data-property-panel] .group.h-5:hover { border-color: var(--ed-line-strong); }
+.gg-editor-ui [data-property-panel] .group.h-5:focus-within { border-color: var(--ed-accent); }
+.gg-editor-ui [data-property-panel] .group.h-5 input { font-size: 12px; color: var(--ed-text); }
+.gg-editor-ui [data-property-panel] .group.h-5 input:focus { box-shadow: none; }
+/* 配置・書式のトグル(h-7 w-7)は 32px の角丸 6px。押下は面の色で示す */
+.gg-editor-ui [data-property-panel] button.h-7.w-7, .gg-editor-ui [data-property-panel] button.h-7 { height: 32px; min-width: 32px; border-radius: 6px; }
+.gg-editor-ui [data-property-panel] button.h-7.w-7 svg { width: 14px; height: 14px; }
+.gg-editor-ui [data-property-panel] button[data-state]:not([role="checkbox"]):not([role="switch"]) { min-height: 32px; }
+.gg-editor-ui [data-property-panel] button[role="checkbox"] { width: 16px; height: 16px; min-height: 16px; border-radius: 4px; border: 1px solid var(--ed-line-strong); background: var(--ed-surface); }
+.gg-editor-ui [data-property-panel] button[role="checkbox"][data-state="checked"] { background: var(--ed-accent-strong); border-color: var(--ed-accent-strong); color: #fff; }
+.gg-editor-ui [data-property-panel] input[type="color"] { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--ed-line-strong); padding: 0; }
+.gg-editor-ui [data-property-panel] .grid.grid-cols-2 { gap: 8px; }
+.gg-editor-ui [data-property-panel] .space-y-2 > * + *, .gg-editor-ui [data-property-panel] .space-y-3 > * + * { margin-top: 10px; }
 /* ポータル自身も配色スコープ。利用側にToasterがある場合もその設定を奪わない。 */
 .gg-editor-ui[data-editor-surface="popup"], .gg-editor-ui[data-editor-surface="dialog"], .gg-editor-ui[data-editor-surface="tooltip"] {
   color: var(--ed-text); background-color: var(--ed-panel-raised); border-color: var(--ed-line); border-radius: 12px; box-shadow: var(--ed-shadow); z-index: 10000;
@@ -288,13 +325,31 @@
 .gg-editor-ui :is(input:not([type="color"]), textarea, select):not([data-editor-preview] *) { border-color: var(--ed-line-strong) !important; }
 
 /* ── マルチフレームのキャンバス(Figma 風) ──────────────
-   フレーム名とリングは画面座標に置く(倍率に関係なく同じ太さ・同じ文字サイズ)。
+   フレーム名とリングはオーバーレイの中で scale(1/倍率) を掛けて画面上の大きさに戻す
+   (倍率に関係なく同じ太さ・同じ文字サイズ)。
    見るだけの紙面の骨組み(スケルトン)だけは転写層の中にあるので、フレームの寸法に対する % で描く */
+/* フレームの白地だけ。枠線と階層の線は画面の座標の canvas(CanvasFrameDecor)が描く。
+   転写層の中に枠線を持たせると、倍率が変わるたびに転写層まるごとが塗り直される(実測) */
+.gg-editor-ui .ed-frame-shell { background: #fff; }
+.gg-editor-ui .ed-frame-label-row { position: absolute; left: 0; height: 20px; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
 .gg-editor-ui .ed-frame-label {
-  position: absolute; left: 0; height: 20px; display: inline-flex; align-items: center; gap: 6px;
+  height: 20px; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
   padding: 0 6px 0 4px; border-radius: 4px; font-size: 11px; line-height: 1; white-space: nowrap;
   color: var(--ed-muted); pointer-events: auto; cursor: pointer; overflow: hidden; text-overflow: ellipsis;
 }
+/* 別タブで開く(編集しない表示)。名前の右。ホバー・編集中のときだけ見せる */
+.gg-editor-ui .ed-frame-label-link {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px;
+  border-radius: 4px; color: var(--ed-muted); pointer-events: auto; opacity: 0; transition: opacity .12s;
+}
+.gg-editor-ui .ed-frame-label-link svg { width: 12px; height: 12px; }
+.gg-editor-ui .ed-frame-label-row:hover .ed-frame-label-link, .gg-editor-ui .ed-frame-label-active + .ed-frame-label-link, .gg-editor-ui .ed-frame-label-link:focus-visible { opacity: 1; }
+.gg-editor-ui .ed-frame-label-link:hover { color: var(--ed-text); background: var(--ed-panel); box-shadow: 0 0 0 1px var(--ed-line); }
+/* 部品(data-part)のカード。紙面の紫の選択枠と同じ色 */
+.gg-editor-ui .ed-part-card { border: 1px solid color-mix(in srgb, #7b61ff 45%, var(--ed-line)); background: color-mix(in srgb, #7b61ff 8%, var(--ed-panel)); color: var(--ed-text); }
+.gg-editor-ui .ed-part-accent { color: #7b61ff; }
+.gg-editor-ui[data-editor-theme="dark"] .ed-part-accent { color: #a99cff; }
+.gg-editor-ui .ed-part-note { color: var(--ed-muted); }
 .gg-editor-ui .ed-frame-label:hover { color: var(--ed-text); background: var(--ed-panel); box-shadow: 0 0 0 1px var(--ed-line); }
 .gg-editor-ui .ed-frame-label-active, .gg-editor-ui .ed-frame-label-active:hover { color: var(--ed-accent); font-weight: 600; }
 .gg-editor-ui .ed-frame-label-index { font-variant-numeric: tabular-nums; opacity: 0.7; }
@@ -306,6 +361,10 @@
 .gg-editor-ui .ed-canvas-marquee { position: absolute; z-index: 20; pointer-events: none; border: 1px solid var(--ed-accent); background: color-mix(in srgb, var(--ed-accent) 12%, transparent); }
 .gg-editor-ui .ed-frame-ring-active { box-shadow: 0 0 0 1.5px var(--ed-accent-strong); }
 .gg-editor-ui .ed-frame-ring-hover { box-shadow: 0 0 0 1px var(--ed-accent-strong); opacity: 0.55; }
+/* 縮小の途中(倍率 0.4 未満)は、画像が読めている紙面の iframe を止めて、下に敷いた画像を見せる。
+   iframe を外して(メモリを返して)しまうのは操作が止まってから ── その間もラスタは止まっている。
+   属性 1 つ(キャンバスの容器の data-canvas-preview-image)の書き換えで 26 枚がいっぺんに切り替わる */
+.gg-editor-ui [data-canvas-preview-image="1"] [data-page-preview][data-image-ready="1"] iframe { visibility: hidden; }
 .gg-editor-ui .ed-frame-skeleton { position: absolute; inset: 0; padding: 6% 8%; display: flex; flex-direction: column; gap: 3%; background: #fff; }
 .gg-editor-ui .ed-frame-skeleton-bar { display: block; height: 2.5%; min-height: 8px; border-radius: 999px; background: #eceff3; }
 .gg-editor-ui .ed-frame-skeleton-note { font-size: 40px; color: #9aa3b2; }

package/src/types/editor.ts

@@ -16,7 +16,8 @@ export type EditorTool =
   | 'text'        // T - Text tool
   | 'scale'       // K - Scale tool
   | 'eraser'      // E - Eraser (ペン/鉛筆ストロークを消す)
-  | 'shape';      // 図形ギャラリーで選んだ図形(ドラッグでサイズ指定)
+  | 'shape'       // 図形ギャラリーで選んだ図形(ドラッグでサイズ指定)
+  | 'comment';    // C - コメント(紙面をドラッグして範囲を指定。クリックで点)
 
 // Shape types that can be drawn
 export type ShapeType = 'rectangle' | 'ellipse' | 'line' | 'arrow' | 'text' | 'pen' | 'pencil' | 'frame';
@@ -101,6 +102,7 @@ export type ShortcutAction =
   | 'text'
   | 'frame'
   | 'scale'
+  | 'comment'
   // Edit operations
   | 'undo'
   | 'redo'
@@ -189,7 +191,7 @@ export interface ToolConfig {
   label: string;
   shortcut: string;
   icon: string; // Lucide icon name
-  group: 'selection' | 'shapes' | 'drawing' | 'text' | 'frame';
+  group: 'selection' | 'shapes' | 'drawing' | 'text' | 'frame' | 'comment';
 }
 
 // Default tool configurations
@@ -205,6 +207,7 @@ export const TOOL_CONFIGS: ToolConfig[] = [
   { id: 'pen', label: 'ペン', shortcut: 'P', icon: 'Pen', group: 'drawing' },
   { id: 'pencil', label: 'フリーハンド', shortcut: '⇧P', icon: 'Pencil', group: 'drawing' },
   { id: 'text', label: 'テキスト', shortcut: 'T', icon: 'Type', group: 'text' },
+  { id: 'comment', label: 'コメント（範囲を指定）', shortcut: 'C', icon: 'MessageSquare', group: 'comment' },
 ];
 
 /**
@@ -232,6 +235,7 @@ export const KEYBOARD_SHORTCUTS: Record<string, ShortcutAction> = {
   'shift+p': 'pencil',
   't': 'text',
   'f': 'frame',
+  'c': 'comment',
 
   // Edit operations (Cmd/Ctrl + key)
   'meta+z': 'undo',

package/src/version.ts

@@ -0,0 +1,9 @@
+/**
+ * パッケージの版(package.json の version と同じ値。scripts/check-version.mjs が一致を検査する)。
+ *
+ * 利用側が「いま動いているエディタの版」を知るために使う。dev サーバー(Vite)は起動時に
+ * node_modules を束ねるので、パッケージを更新しても再起動するまで古いコードが動く。
+ * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
+ * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
+ */
+export const EDITOR_VERSION = '0.4.0';