@love-rox/kumihimo-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SASAGAWA Kiyoshi
+
+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,36 @@
+# @love-rox/kumihimo-vue
+
+Vue 3 component and composable for [kumihimo](https://github.com/Love-Rox/kumihimo) — AV signal flow diagrams
+(系統図) written as text.
+
+```bash
+pnpm add @love-rox/kumihimo-vue
+```
+
+```vue
+<script setup>
+import { Kumihimo } from '@love-rox/kumihimo-vue';
+</script>
+
+<template>
+  <Kumihimo :source="src" theme="dark" @diagnostics="report">
+    <template #fallback>読み込み中…</template>
+  </Kumihimo>
+</template>
+```
+
+```ts
+import { useKumihimo } from '@love-rox/kumihimo-vue';
+
+const { svg, diagram, diagnostics, pending, error } = useKumihimo(() => src.value);
+```
+
+Accepts values, refs or getters, and keeps the previous diagram on screen through a
+recompile.
+
+See the [project README](https://github.com/Love-Rox/kumihimo#readme) for the language and
+the other packages.
+
+## License
+
+MIT © SASAGAWA Kiyoshi

package/dist/Kumihimo.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Vue component rendering a kumihimo diagram.
+ */
+import type { PropType, VNode } from 'vue';
+import type { CompileOptions, Diagnostic } from '@love-rox/kumihimo-core';
+/**
+ * Draw a kumihimo diagram.
+ *
+ * The SVG is generated by this package from the caller's source, and every text value in
+ * it is escaped by the renderer, so it is inlined with `v-html` rather than parsed again.
+ *
+ * @example
+ * ```vue
+ * <Kumihimo :source="src" theme="dark" @diagnostics="onDiagnostics" />
+ * ```
+ */
+export declare const Kumihimo: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** The `.khm` source to draw. */
+    source: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Colour theme name. */
+    theme: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Any other compile option. */
+    options: {
+        type: PropType<CompileOptions>;
+        default: () => {};
+    };
+    /** Class applied to the wrapper element. */
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** Fired whenever a compile produces diagnostics. */
+    diagnostics: (value: readonly Diagnostic[]) => value is any[];
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** The `.khm` source to draw. */
+    source: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Colour theme name. */
+    theme: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Any other compile option. */
+    options: {
+        type: PropType<CompileOptions>;
+        default: () => {};
+    };
+    /** Class applied to the wrapper element. */
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onDiagnostics?: (value: readonly Diagnostic[]) => any;
+}>, {
+    theme: string;
+    options: CompileOptions;
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default Kumihimo;
+//# sourceMappingURL=Kumihimo.d.ts.map

package/dist/Kumihimo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kumihimo.d.ts","sourceRoot":"","sources":["../src/Kumihimo.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ;IAGjB,iCAAiC;;;;;IAEjC,yBAAyB;;;;;IAEzB,gCAAgC;;cACL,QAAQ,CAAC,cAAc,CAAC;;;IACnD,4CAA4C;;;;;UAiBjC,KAAK;IAbhB,qDAAqD;yBAChC,SAAS,UAAU,EAAE;;IAX1C,iCAAiC;;;;;IAEjC,yBAAyB;;;;;IAEzB,gCAAgC;;cACL,QAAQ,CAAC,cAAc,CAAC;;;IACnD,4CAA4C;;;;;;;;;;;4EA6B9C,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/Kumihimo.js

@@ -0,0 +1,54 @@
+/**
+ * Vue component rendering a kumihimo diagram.
+ */
+import { computed, defineComponent, h, watch } from 'vue';
+import { useKumihimo } from './useKumihimo.js';
+/**
+ * Draw a kumihimo diagram.
+ *
+ * The SVG is generated by this package from the caller's source, and every text value in
+ * it is escaped by the renderer, so it is inlined with `v-html` rather than parsed again.
+ *
+ * @example
+ * ```vue
+ * <Kumihimo :source="src" theme="dark" @diagnostics="onDiagnostics" />
+ * ```
+ */
+export const Kumihimo = defineComponent({
+    name: 'Kumihimo',
+    props: {
+        /** The `.khm` source to draw. */
+        source: { type: String, required: true },
+        /** Colour theme name. */
+        theme: { type: String, default: undefined },
+        /** Any other compile option. */
+        options: { type: Object, default: () => ({}) },
+        /** Class applied to the wrapper element. */
+        className: { type: String, default: undefined },
+    },
+    emits: {
+        /** Fired whenever a compile produces diagnostics. */
+        diagnostics: (value) => Array.isArray(value),
+    },
+    setup(props, { emit, slots }) {
+        const config = computed(() => props.theme === undefined ? props.options : { ...props.options, theme: props.theme });
+        const { svg, diagnostics, pending, error } = useKumihimo(() => props.source, config);
+        watch(diagnostics, (value) => {
+            if (value.length > 0)
+                emit('diagnostics', value);
+        });
+        return () => {
+            if (error.value) {
+                return h('div', { class: props.className, role: 'alert' }, error.value.message);
+            }
+            // Only fall back before anything has ever been drawn. Keeping the previous diagram
+            // on screen through a recompile is what makes live editing bearable.
+            if (pending.value && !svg.value) {
+                return h('div', { class: props.className }, slots['fallback']?.());
+            }
+            return h('div', { class: props.className, innerHTML: svg.value });
+        };
+    },
+});
+export default Kumihimo;
+//# sourceMappingURL=Kumihimo.js.map

package/dist/Kumihimo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kumihimo.js","sourceRoot":"","sources":["../src/Kumihimo.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE;QACL,iCAAiC;QACjC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACxC,yBAAyB;QACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,gCAAgC;QAChC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAkC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;QAC1E,4CAA4C;QAC5C,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAChD;IACD,KAAK,EAAE;QACL,qDAAqD;QACrD,WAAW,EAAE,CAAC,KAA4B,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;KACpE;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,MAAM,MAAM,GAAG,QAAQ,CAAiB,GAAG,EAAE,CAC3C,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CACrF,CAAC;QACF,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAErF,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YAC3B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,OAAO,GAAU,EAAE;YACjB,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAClF,CAAC;YACD,mFAAmF;YACnF,qEAAqE;YACrE,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;gBAChC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC;YACrE,CAAC;YACD,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;QACpE,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Public API of `@love-rox/kumihimo-vue`.
+ *
+ * A component for the common case and a composable for everything else.
+ */
+export type { UseKumihimoResult } from './useKumihimo.js';
+export { useKumihimo } from './useKumihimo.js';
+export { Kumihimo, default } from './Kumihimo.js';
+//# 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;;;;GAIG;AAEH,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * Public API of `@love-rox/kumihimo-vue`.
+ *
+ * A component for the common case and a composable for everything else.
+ */
+export { useKumihimo } from './useKumihimo.js';
+export { Kumihimo, default } from './Kumihimo.js';
+//# 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;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/useKumihimo.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Vue composable compiling kumihimo source into SVG.
+ *
+ * Compiling is asynchronous — the layout engine is — so the last good SVG is kept on
+ * screen while a new one is produced. Typing in an editor should not make the diagram
+ * flash away and back.
+ */
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { CompileOptions, Diagnostic, Diagram } from '@love-rox/kumihimo-core';
+/** What {@link useKumihimo} returns. */
+export interface UseKumihimoResult {
+    /** The rendered SVG, empty until the first compile finishes. */
+    svg: Ref<string>;
+    /** The resolved diagram, for callers that want the model as well as the picture. */
+    diagram: Ref<Diagram | undefined>;
+    /** Everything the compile had to say about the wiring. */
+    diagnostics: Ref<readonly Diagnostic[]>;
+    /** Whether a compile is in flight. The previous `svg` stays available meanwhile. */
+    pending: Ref<boolean>;
+    /** Set when compiling threw, which should not happen for source-level problems. */
+    error: Ref<Error | undefined>;
+}
+/**
+ * Compile kumihimo source, re-running whenever it or the options change.
+ *
+ * @param source - The `.khm` text, as a value, ref or getter.
+ * @param options - Compile options, as a value, ref or getter.
+ * @returns Reactive SVG, model, diagnostics and progress state.
+ */
+export declare function useKumihimo(source: MaybeRefOrGetter<string>, options?: MaybeRefOrGetter<CompileOptions>): UseKumihimoResult;
+//# sourceMappingURL=useKumihimo.d.ts.map

package/dist/useKumihimo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKumihimo.d.ts","sourceRoot":"","sources":["../src/useKumihimo.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAGjD,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGnF,wCAAwC;AACxC,MAAM,WAAW,iBAAiB;IAChC,gEAAgE;IAChE,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACjB,oFAAoF;IACpF,OAAO,EAAE,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAClC,0DAA0D;IAC1D,WAAW,EAAE,GAAG,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC;IACxC,oFAAoF;IACpF,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,mFAAmF;IACnF,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAChC,OAAO,GAAE,gBAAgB,CAAC,cAAc,CAAM,GAC7C,iBAAiB,CAkCnB"}

package/dist/useKumihimo.js

@@ -0,0 +1,51 @@
+/**
+ * Vue composable compiling kumihimo source into SVG.
+ *
+ * Compiling is asynchronous — the layout engine is — so the last good SVG is kept on
+ * screen while a new one is produced. Typing in an editor should not make the diagram
+ * flash away and back.
+ */
+import { ref, toValue, watchEffect } from 'vue';
+import { compile } from '@love-rox/kumihimo-core';
+/**
+ * Compile kumihimo source, re-running whenever it or the options change.
+ *
+ * @param source - The `.khm` text, as a value, ref or getter.
+ * @param options - Compile options, as a value, ref or getter.
+ * @returns Reactive SVG, model, diagnostics and progress state.
+ */
+export function useKumihimo(source, options = {}) {
+    const svg = ref('');
+    const diagram = ref(undefined);
+    const diagnostics = ref([]);
+    const pending = ref(true);
+    const error = ref(undefined);
+    let latest = 0;
+    watchEffect(() => {
+        const text = toValue(source);
+        const config = toValue(options);
+        const run = ++latest;
+        pending.value = true;
+        compile(text, config)
+            .then((result) => {
+            // A slower earlier compile must never overwrite a newer one.
+            if (run !== latest)
+                return;
+            svg.value = result.svg;
+            diagram.value = result.diagram;
+            diagnostics.value = result.diagnostics;
+            error.value = undefined;
+        })
+            .catch((cause) => {
+            if (run !== latest)
+                return;
+            error.value = cause instanceof Error ? cause : new Error(String(cause));
+        })
+            .finally(() => {
+            if (run === latest)
+                pending.value = false;
+        });
+    });
+    return { svg, diagram, diagnostics, pending, error };
+}
+//# sourceMappingURL=useKumihimo.js.map

package/dist/useKumihimo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKumihimo.js","sourceRoot":"","sources":["../src/useKumihimo.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAgBlD;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,MAAgC,EAChC,UAA4C,EAAE;IAE9C,MAAM,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;IACpB,MAAM,OAAO,GAAG,GAAG,CAAsB,SAAS,CAA6B,CAAC;IAChF,MAAM,WAAW,GAAG,GAAG,CAAwB,EAAE,CAA+B,CAAC;IACjF,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,KAAK,GAAG,GAAG,CAAoB,SAAS,CAAC,CAAC;IAEhD,IAAI,MAAM,GAAG,CAAC,CAAC;IAEf,WAAW,CAAC,GAAG,EAAE;QACf,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;QAChC,MAAM,GAAG,GAAG,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QAErB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;aAClB,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACf,6DAA6D;YAC7D,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO;YAC3B,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC;YACvB,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC;YAC/B,WAAW,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;YACvC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;QAC1B,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE;YACxB,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO;YAC3B,KAAK,CAAC,KAAK,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1E,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QAC5C,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACvD,CAAC"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@love-rox/kumihimo-vue",
+  "version": "0.1.0",
+  "description": "Vue 3 component and composable rendering kumihimo AV signal flow diagrams (系統図)",
+  "keywords": [
+    "av",
+    "diagram",
+    "signal-flow",
+    "svg",
+    "vue",
+    "wiring",
+    "系統図"
+  ],
+  "homepage": "https://github.com/Love-Rox/kumihimo#readme",
+  "bugs": {
+    "url": "https://github.com/Love-Rox/kumihimo/issues"
+  },
+  "license": "MIT",
+  "author": "SASAGAWA Kiyoshi <dev@love-rox.cc>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Love-Rox/kumihimo.git",
+    "directory": "packages/vue"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@love-rox/kumihimo-core": "0.1.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.0.0",
+    "vue": "^3.5.40"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/Kumihimo.ts

@@ -0,0 +1,63 @@
+/**
+ * Vue component rendering a kumihimo diagram.
+ */
+
+import type { PropType, VNode } from 'vue';
+import { computed, defineComponent, h, watch } from 'vue';
+
+import type { CompileOptions, Diagnostic } from '@love-rox/kumihimo-core';
+
+import { useKumihimo } from './useKumihimo.js';
+
+/**
+ * Draw a kumihimo diagram.
+ *
+ * The SVG is generated by this package from the caller's source, and every text value in
+ * it is escaped by the renderer, so it is inlined with `v-html` rather than parsed again.
+ *
+ * @example
+ * ```vue
+ * <Kumihimo :source="src" theme="dark" @diagnostics="onDiagnostics" />
+ * ```
+ */
+export const Kumihimo = defineComponent({
+  name: 'Kumihimo',
+  props: {
+    /** The `.khm` source to draw. */
+    source: { type: String, required: true },
+    /** Colour theme name. */
+    theme: { type: String, default: undefined },
+    /** Any other compile option. */
+    options: { type: Object as PropType<CompileOptions>, default: () => ({}) },
+    /** Class applied to the wrapper element. */
+    className: { type: String, default: undefined },
+  },
+  emits: {
+    /** Fired whenever a compile produces diagnostics. */
+    diagnostics: (value: readonly Diagnostic[]) => Array.isArray(value),
+  },
+  setup(props, { emit, slots }) {
+    const config = computed<CompileOptions>(() =>
+      props.theme === undefined ? props.options : { ...props.options, theme: props.theme },
+    );
+    const { svg, diagnostics, pending, error } = useKumihimo(() => props.source, config);
+
+    watch(diagnostics, (value) => {
+      if (value.length > 0) emit('diagnostics', value);
+    });
+
+    return (): VNode => {
+      if (error.value) {
+        return h('div', { class: props.className, role: 'alert' }, error.value.message);
+      }
+      // Only fall back before anything has ever been drawn. Keeping the previous diagram
+      // on screen through a recompile is what makes live editing bearable.
+      if (pending.value && !svg.value) {
+        return h('div', { class: props.className }, slots['fallback']?.());
+      }
+      return h('div', { class: props.className, innerHTML: svg.value });
+    };
+  },
+});
+
+export default Kumihimo;

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Public API of `@love-rox/kumihimo-vue`.
+ *
+ * A component for the common case and a composable for everything else.
+ */
+
+export type { UseKumihimoResult } from './useKumihimo.js';
+export { useKumihimo } from './useKumihimo.js';
+
+export { Kumihimo, default } from './Kumihimo.js';

package/src/useKumihimo.ts

@@ -0,0 +1,73 @@
+/**
+ * Vue composable compiling kumihimo source into SVG.
+ *
+ * Compiling is asynchronous — the layout engine is — so the last good SVG is kept on
+ * screen while a new one is produced. Typing in an editor should not make the diagram
+ * flash away and back.
+ */
+
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { ref, toValue, watchEffect } from 'vue';
+
+import type { CompileOptions, Diagnostic, Diagram } from '@love-rox/kumihimo-core';
+import { compile } from '@love-rox/kumihimo-core';
+
+/** What {@link useKumihimo} returns. */
+export interface UseKumihimoResult {
+  /** The rendered SVG, empty until the first compile finishes. */
+  svg: Ref<string>;
+  /** The resolved diagram, for callers that want the model as well as the picture. */
+  diagram: Ref<Diagram | undefined>;
+  /** Everything the compile had to say about the wiring. */
+  diagnostics: Ref<readonly Diagnostic[]>;
+  /** Whether a compile is in flight. The previous `svg` stays available meanwhile. */
+  pending: Ref<boolean>;
+  /** Set when compiling threw, which should not happen for source-level problems. */
+  error: Ref<Error | undefined>;
+}
+
+/**
+ * Compile kumihimo source, re-running whenever it or the options change.
+ *
+ * @param source - The `.khm` text, as a value, ref or getter.
+ * @param options - Compile options, as a value, ref or getter.
+ * @returns Reactive SVG, model, diagnostics and progress state.
+ */
+export function useKumihimo(
+  source: MaybeRefOrGetter<string>,
+  options: MaybeRefOrGetter<CompileOptions> = {},
+): UseKumihimoResult {
+  const svg = ref('');
+  const diagram = ref<Diagram | undefined>(undefined) as Ref<Diagram | undefined>;
+  const diagnostics = ref<readonly Diagnostic[]>([]) as Ref<readonly Diagnostic[]>;
+  const pending = ref(true);
+  const error = ref<Error | undefined>(undefined);
+
+  let latest = 0;
+
+  watchEffect(() => {
+    const text = toValue(source);
+    const config = toValue(options);
+    const run = ++latest;
+    pending.value = true;
+
+    compile(text, config)
+      .then((result) => {
+        // A slower earlier compile must never overwrite a newer one.
+        if (run !== latest) return;
+        svg.value = result.svg;
+        diagram.value = result.diagram;
+        diagnostics.value = result.diagnostics;
+        error.value = undefined;
+      })
+      .catch((cause: unknown) => {
+        if (run !== latest) return;
+        error.value = cause instanceof Error ? cause : new Error(String(cause));
+      })
+      .finally(() => {
+        if (run === latest) pending.value = false;
+      });
+  });
+
+  return { svg, diagram, diagnostics, pending, error };
+}