@moda-editor/vue 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 park-taejoon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @moda-editor/vue
+
+`@moda-editor/core`의 Vue 3 어댑터 — composable + SFC.
+
+```vue
+<script setup>
+import { WidgetView, useWidget } from "@moda-editor/vue";
+import "@moda-editor/vue/styles.css";
+const { widget } = useWidget({ items, getItemText });
+</script>
+<template><WidgetView :widget="widget" :get-item-text="getItemText" /></template>
+```

package/dist/EditorNode.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Component } from "vue";
+import { nodeViewEditable, nodeViewFor } from "@moda-editor/core";
+import type { Editor, RenderNode } from "@moda-editor/core";
+
+// 자기 참조 재귀 컴포넌트 — RenderNode 트리를 DOM으로 번역한다.
+// data-me-path가 형제 간 유일하므로 key로 쓴다.
+const props = defineProps<{
+  node: RenderNode;
+  editor: Editor;
+  nodeViews?: Record<string, Component>;
+}>();
+
+// 커스텀 노드 뷰 — .me-node-view 래퍼가 data-me-path 계약을 유지하고
+// 컴포넌트는 NodeViewProps만 받는다
+const view = computed(
+  () =>
+    nodeViewFor(props.nodeViews, props.node.source.type) as
+      | Component
+      | undefined,
+);
+const wrapperTag = computed(() =>
+  props.editor.state.schema.isInline(props.node.source.type) ? "span" : "div",
+);
+// 비-atom 노드 뷰는 편집 가능한 콘텐츠 아울렛을 받는다 — data-me-path는
+// 래퍼가 아닌 .me-node-content가 가져 컨테이너 포인트 매핑이 맞는다
+const editable = computed(() =>
+  nodeViewEditable(props.editor.state.schema, props.node.source.type),
+);
+const wrapperAttrs = computed(() => ({
+  ...(editable.value ? {} : { "data-me-path": props.node.path.join(",") }),
+  class: "me-node-view",
+  contenteditable: "false",
+}));
+</script>
+
+<template>
+  <component
+    :is="view ? wrapperTag : node.tag"
+    v-bind="view ? wrapperAttrs : (node.attrs ?? {})"
+  >
+    <component
+      v-if="view"
+      :is="view"
+      :node="node.source"
+      :editor="editor"
+    >
+      <template v-if="editable" #content>
+        <div
+          class="me-node-content"
+          contenteditable="true"
+          :data-me-path="node.path.join(',')"
+        >
+          <EditorNode
+            v-for="c in node.children ?? []"
+            :key="c.path.join(',')"
+            :node="c"
+            :editor="editor"
+            :node-views="nodeViews"
+          />
+        </div>
+      </template>
+    </component>
+    <template v-else-if="node.text != null">{{ node.text }}</template>
+    <template v-else>
+      <EditorNode
+        v-for="c in node.children ?? []"
+        :key="c.path.join(',')"
+        :node="c"
+        :editor="editor"
+        :node-views="nodeViews"
+      />
+    </template>
+  </component>
+</template>

package/dist/EditorView.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watch,
+} from "vue";
+import type { Component, PropType } from "vue";
+import { bindEditorInput, DirtyKeyMap, renderChildren } from "@moda-editor/core";
+import type {
+  DocNode,
+  Editor,
+  EditorInputBinding,
+  RenderNode,
+} from "@moda-editor/core";
+import { useEditorState } from "./useEditor.js";
+import EditorNode from "./EditorNode.vue";
+
+const props = defineProps({
+  editor: { type: Object as PropType<Editor>, required: true },
+  /** 커스텀 노드 뷰 — nodeViews[노드타입] Vue 컴포넌트 */
+  nodeViews: { type: Object as PropType<Record<string, Component>> },
+});
+
+const { state } = useEditorState(props.editor);
+
+// doc 참조가 바뀔 때만 RenderNode 배열을 재생성 — selection-only
+// 변경이면 같은 배열이라 자식 vnode가 그대로 스킵된다
+let cachedDoc: DocNode | null = null;
+let cachedNodes: RenderNode[] = [];
+const nodes = computed(() => {
+  const s = state.value;
+  if (s.doc !== cachedDoc) {
+    cachedDoc = s.doc;
+    cachedNodes = renderChildren(s.doc, s.schema);
+  }
+  return cachedNodes;
+});
+
+const editableEl = ref<HTMLElement | null>(null);
+let binding: EditorInputBinding | null = null;
+
+// IME 등이 직접 바꾼 블록은 key를 올려 리컨실 대신 리마운트시킨다 —
+// 브라우저가 변경한 DOM과 vnode가 어긋난 채 diff하면 크래시/유실이 난다
+const dirtyKeys = new DirtyKeyMap();
+const keyOf = (n: RenderNode): string =>
+  dirtyKeys.key(n.path.join(","), binding?.dirtyPaths);
+
+onMounted(() => {
+  if (editableEl.value) binding = bindEditorInput(props.editor, editableEl.value);
+});
+// 리렌더 후 DOM에 doc 셀렉션 복원.
+// 셀렉션만 바뀐 디스패치(Tab 셀 이동 등)는 nodes가 같은 배열이라
+// computed가 리렌더를 생략하고 onUpdated도 안 뜬다 — flush:post watcher로
+// 리렌더 유무와 무관하게 패치 후 복원을 보장한다.
+onUpdated(() => binding?.restoreSelection());
+watch(state, () => binding?.restoreSelection(), { flush: "post" });
+onBeforeUnmount(() => binding?.unbind());
+</script>
+
+<template>
+  <div class="me-root">
+    <div
+      ref="editableEl"
+      class="me-editor"
+      data-me-path=""
+      :contenteditable="editor.editable"
+    >
+      <EditorNode
+        v-for="n in nodes"
+        :key="keyOf(n)"
+        :node="n"
+        :editor="editor"
+        :node-views="nodeViews"
+      />
+    </div>
+  </div>
+</template>

package/dist/WidgetView.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts" generic="TData extends object = RowData">
+import { WidgetCore } from "@moda-editor/core";
+import type { RowData } from "@moda-editor/core";
+import { useWidgetState } from "./useWidget.js";
+
+const props = withDefaults(
+  defineProps<{
+    widget: WidgetCore<TData>;
+    getItemText?: (item: TData) => string;
+    searchPlaceholder?: string;
+  }>(),
+  { searchPlaceholder: "검색…" },
+);
+
+const { state } = useWidgetState(props.widget);
+const textOf = (item: TData) => props.getItemText?.(item) ?? String(item);
+</script>
+
+<template>
+  <div class="me-root">
+    <input
+      class="me-search"
+      :placeholder="searchPlaceholder"
+      :value="state.searchText"
+      @input="widget.setSearch(($event.target as HTMLInputElement).value)"
+    />
+    <ul class="me-list">
+      <li v-for="(item, i) in state.filteredItems" :key="i" class="me-item">
+        {{ textOf(item) }}
+      </li>
+    </ul>
+    <div class="me-count">
+      {{ state.filteredCount }} / {{ state.totalCount }}
+    </div>
+  </div>
+</template>

package/dist/conformance.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=conformance.test.d.ts.map

package/dist/conformance.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformance.test.d.ts","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":""}

package/dist/conformance.test.js

@@ -0,0 +1,56 @@
+import { createApp, defineComponent, h, nextTick } from "vue";
+import { runEditorConformance, runWidgetConformance } from "@moda-editor/core/conformance";
+import { WidgetCore } from "@moda-editor/core";
+import WidgetView from "./WidgetView.vue";
+import EditorView from "./EditorView.vue";
+// 컨포먼스 표준 노드 뷰 — .me-custom-view에 node.attrs.label을 출력
+const SpecNodeView = defineComponent({
+    props: { node: { type: Object, required: true } },
+    render() {
+        return h("div", { class: "me-custom-view" }, [
+            String(this.node.attrs?.["label"] ?? ""),
+            // 비-atom이면 "content" 슬롯으로 편집 아울렛을 받는다
+            ...(this.$slots["content"]?.() ?? []),
+        ]);
+    },
+});
+// Vue 3 렌더러 — createApp 마운트 후 nextTick으로 DOM 반영을 기다린다.
+runWidgetConformance("vue3", async (opts) => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const widget = new WidgetCore(opts);
+    const app = createApp(WidgetView, {
+        widget,
+        getItemText: opts.getItemText,
+    });
+    app.mount(el);
+    return {
+        el,
+        flush: () => nextTick(),
+        destroy: () => {
+            app.unmount();
+            el.remove();
+        },
+    };
+});
+// Vue 3 에디터 — createApp 마운트 후 nextTick으로 DOM 반영 대기.
+runEditorConformance("vue3", async ({ editor, nodeViews }) => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const views = nodeViews
+        ? Object.fromEntries(Object.keys(nodeViews)
+            .filter((k) => nodeViews[k])
+            .map((k) => [k, SpecNodeView]))
+        : undefined;
+    const app = createApp(EditorView, { editor, nodeViews: views });
+    app.mount(el);
+    return {
+        el,
+        flush: () => nextTick(),
+        destroy: () => {
+            app.unmount();
+            el.remove();
+        },
+    };
+});
+//# sourceMappingURL=conformance.test.js.map

package/dist/conformance.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformance.test.js","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAE1C,uDAAuD;AACvD,MAAM,YAAY,GAAG,eAAe,CAAC;IACnC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;IACjD,MAAM;QACJ,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE;YAC3C,MAAM,CAAE,IAAI,CAAC,IAAyC,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC9E,sCAAsC;YACtC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC;SACtC,CAAC,CAAC;IACL,CAAC;CACF,CAAC,CAAC;AAEH,uDAAuD;AACvD,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1C,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,MAAM,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,EAAE;QAChC,MAAM;QACN,WAAW,EAAE,IAAI,CAAC,WAAW;KACrB,CAAC,CAAC;IACZ,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACd,OAAO;QACL,EAAE;QACF,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;QACvB,OAAO,EAAE,GAAG,EAAE;YACZ,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oDAAoD;AACpD,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3D,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,SAAS;QACrB,CAAC,CAAC,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;aACnB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aAC3B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CACjC;QACH,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAW,CAAC,CAAC;IACzE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACd,OAAO;QACL,EAAE;QACF,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;QACvB,OAAO,EAAE,GAAG,EAAE;YACZ,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as EditorView } from "./EditorView.vue";
+export { useEditor, useEditorState } from "./useEditor.js";
+export type { UseEditorReturn } from "./useEditor.js";
+export { default as WidgetView } from "./WidgetView.vue";
+export { useWidget, useWidgetState } from "./useWidget.js";
+export type { UseWidgetReturn } from "./useWidget.js";
+export type { Widget, WidgetCoreOptions, WidgetEventHandlers, WidgetEventMap, WidgetEventType, WidgetSnapshot, RowData, } from "@moda-editor/core";
+export { WidgetCore } from "@moda-editor/core";
+export type { DocNode, Editor, EditorNode, EditorOptions, EditorState, Extension, InputRule, Mark, NodeViewProps, } from "@moda-editor/core";
+export { blockRule, blockTextOffset, canRedo, canUndo, createDoc, createText, isBlockActive, isInNode, isMarkActive, leafPoint, codeBracketAt, codeCaret, codeTextAt, duplicateCodeLines, moveCodeLines, toggleCodeComment, linkHrefAt, linkRangeAt, markRule, nodeAt, normalizedRange, pointEq, starterExtensions, textSelection, } from "@moda-editor/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EACV,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,cAAc,EACd,OAAO,GACR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EACV,OAAO,EACP,MAAM,EACN,UAAU,EACV,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,IAAI,EACJ,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,SAAS,EACT,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,iBAAiB,EACjB,aAAa,GACd,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export { default as EditorView } from "./EditorView.vue";
+export { useEditor, useEditorState } from "./useEditor.js";
+export { default as WidgetView } from "./WidgetView.vue";
+export { useWidget, useWidgetState } from "./useWidget.js";
+export { WidgetCore } from "@moda-editor/core";
+export { blockRule, blockTextOffset, canRedo, canUndo, createDoc, createText, isBlockActive, isInNode, isMarkActive, leafPoint, codeBracketAt, codeCaret, codeTextAt, duplicateCodeLines, moveCodeLines, toggleCodeComment, linkHrefAt, linkRangeAt, markRule, nodeAt, normalizedRange, pointEq, starterExtensions, textSelection, } from "@moda-editor/core";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAW3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAY/C,OAAO,EACL,SAAS,EACT,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,iBAAiB,EACjB,aAAa,GACd,MAAM,mBAAmB,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+@import "@moda-editor/core/styles.css";

package/dist/useEditor.d.ts

@@ -0,0 +1,20 @@
+import type { ShallowRef } from "vue";
+import type { Editor, EditorOptions, EditorState } from "@moda-editor/core";
+export interface UseEditorReturn {
+    /** 헤드리스 에디터 — commands/dispatch 호출용 */
+    editor: Editor;
+    /** 렌더용 불변 스냅샷 (ShallowRef — 통째 교체 구조) */
+    state: ShallowRef<EditorState>;
+    unsubscribe(): void;
+}
+/**
+ * Vue 3 어댑터 composable — Editor 생성 + 불변 state를 ShallowRef로 구독.
+ * 컴포넌트/이펙트 스코프 안에서 호출하면 onScopeDispose로 자동 해제된다.
+ */
+export declare function useEditor(options?: EditorOptions): UseEditorReturn;
+/** 외부에서 만든 Editor의 state만 구독한다 */
+export declare function useEditorState(editor: Editor): {
+    state: ShallowRef<EditorState>;
+    unsubscribe: () => void;
+};
+//# sourceMappingURL=useEditor.d.ts.map

package/dist/useEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EACb,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,WAAW,IAAI,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,aAAkB,GAAG,eAAe,CAItE;AAED,kCAAkC;AAClC,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG;IAC9C,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAOA"}

package/dist/useEditor.js

@@ -0,0 +1,21 @@
+import { onScopeDispose, shallowRef } from "vue";
+import { createEditor } from "@moda-editor/core";
+/**
+ * Vue 3 어댑터 composable — Editor 생성 + 불변 state를 ShallowRef로 구독.
+ * 컴포넌트/이펙트 스코프 안에서 호출하면 onScopeDispose로 자동 해제된다.
+ */
+export function useEditor(options = {}) {
+    const editor = createEditor(options);
+    const { state, unsubscribe } = useEditorState(editor);
+    return { editor, state, unsubscribe };
+}
+/** 외부에서 만든 Editor의 state만 구독한다 */
+export function useEditorState(editor) {
+    const state = shallowRef(editor.state);
+    const unsubscribe = editor.subscribe(() => {
+        state.value = editor.state;
+    });
+    onScopeDispose(unsubscribe, true);
+    return { state: state, unsubscribe };
+}
+//# sourceMappingURL=useEditor.js.map

package/dist/useEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.js","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAejD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,UAAyB,EAAE;IACnD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACtD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;AACxC,CAAC;AAED,kCAAkC;AAClC,MAAM,UAAU,cAAc,CAAC,MAAc;IAI3C,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,EAAE,KAAK,EAAE,KAAgC,EAAE,WAAW,EAAE,CAAC;AAClE,CAAC"}

package/dist/useWidget.d.ts

@@ -0,0 +1,21 @@
+import type { ShallowRef } from "vue";
+import { WidgetCore } from "@moda-editor/core";
+import type { WidgetCoreOptions, WidgetSnapshot, RowData } from "@moda-editor/core";
+export interface UseWidgetReturn<TData extends object = RowData> {
+    /** 헤드리스 코어 — 액션 호출용 */
+    widget: WidgetCore<TData>;
+    /** 렌더용 스냅샷 (ShallowRef — 통째 교체 구조) */
+    state: ShallowRef<WidgetSnapshot<TData>>;
+    unsubscribe(): void;
+}
+/**
+ * Vue 3 어댑터 composable — 코어 생성 + 스냅샷을 ShallowRef로 구독.
+ * 컴포넌트/이펙트 스코프 안에서 호출하면 onScopeDispose로 자동 해제된다.
+ */
+export declare function useWidget<TData extends object = RowData>(options: WidgetCoreOptions<TData>): UseWidgetReturn<TData>;
+/** 외부에서 만든 WidgetCore의 스냅샷만 구독한다 */
+export declare function useWidgetState<TData extends object = RowData>(widget: WidgetCore<TData>): {
+    state: ShallowRef<WidgetSnapshot<TData>>;
+    unsubscribe: () => void;
+};
+//# sourceMappingURL=useWidget.d.ts.map

package/dist/useWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidget.d.ts","sourceRoot":"","sources":["../src/useWidget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEpF,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,OAAO;IAC7D,uBAAuB;IACvB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,sCAAsC;IACtC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IACzC,WAAW,IAAI,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,SAAS,MAAM,GAAG,OAAO,EACtD,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAChC,eAAe,CAAC,KAAK,CAAC,CAQxB;AAED,oCAAoC;AACpC,wBAAgB,cAAc,CAAC,KAAK,SAAS,MAAM,GAAG,OAAO,EAC3D,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,GACxB;IAAE,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAAC,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAOvE"}

package/dist/useWidget.js

@@ -0,0 +1,25 @@
+import { onScopeDispose, shallowRef } from "vue";
+import { WidgetCore } from "@moda-editor/core";
+/**
+ * Vue 3 어댑터 composable — 코어 생성 + 스냅샷을 ShallowRef로 구독.
+ * 컴포넌트/이펙트 스코프 안에서 호출하면 onScopeDispose로 자동 해제된다.
+ */
+export function useWidget(options) {
+    const widget = new WidgetCore(options);
+    const state = shallowRef(widget.getSnapshot());
+    const unsubscribe = widget.subscribe(() => {
+        state.value = widget.getSnapshot();
+    });
+    onScopeDispose(unsubscribe, true);
+    return { widget, state: state, unsubscribe };
+}
+/** 외부에서 만든 WidgetCore의 스냅샷만 구독한다 */
+export function useWidgetState(widget) {
+    const state = shallowRef(widget.getSnapshot());
+    const unsubscribe = widget.subscribe(() => {
+        state.value = widget.getSnapshot();
+    });
+    onScopeDispose(unsubscribe, true);
+    return { state: state, unsubscribe };
+}
+//# sourceMappingURL=useWidget.js.map

package/dist/useWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidget.js","sourceRoot":"","sources":["../src/useWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW/C;;;GAGG;AACH,MAAM,UAAU,SAAS,CACvB,OAAiC;IAEjC,MAAM,MAAM,GAAG,IAAI,UAAU,CAAQ,OAAO,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAA0C,EAAE,WAAW,EAAE,CAAC;AACpF,CAAC;AAED,oCAAoC;AACpC,MAAM,UAAU,cAAc,CAC5B,MAAyB;IAEzB,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,EAAE,KAAK,EAAE,KAA0C,EAAE,WAAW,EAAE,CAAC;AAC5E,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@moda-editor/vue",
+  "version": "0.1.1",
+  "description": "Vue 3 adapter for @moda-editor — useWidget + WidgetView",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "adapter",
+    "headless",
+    "library"
+  ],
+  "dependencies": {
+    "@moda-editor/core": "0.1.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "happy-dom": "^20.14.5",
+    "typescript": "~5.9.2",
+    "vitest": "^3.2.7",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/styles.css src/*.vue dist/",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "dev": "tsc -p tsconfig.json --watch",
+    "test": "vitest run"
+  },
+  "main": "./dist/index.js"
+}