@kritzel/vue-engine 0.4.31

package/LICENSE.md

@@ -0,0 +1,50 @@
+# Software License Agreement
+
+**IMPORTANT NOTICE:** This is a source-available, non-commercial license. 
+* **Hobbyists & Personal Use:** 100% Free. You are welcome to use, modify, and experiment with this software for personal, hobby, or educational projects.
+* **Commercial & Professional Use:** Strictly Prohibited. If you want to use this software in a corporate environment, for professional client work, or as part of a revenue-generating product, you must obtain a commercial license.
+
+To purchase a commercial license, please visit: https://kritzel.io
+
+---
+
+## PolyForm Noncommercial License 1.0.0
+
+### Acceptance
+By using or distributing this software, you accept this license.
+
+### User
+You is the person or organization who accepts this license. You can accept this license for only yourself or for an organization.
+
+### Software
+Software is the software that includes this license text.
+
+### Practice
+Practice is to use, copy, modify, distribute, or make derivative works of the Software.
+
+### Grant
+You may Practice the Software for noncommercial purposes.
+
+### Noncommercial Purposes
+Noncommercial purposes are purposes that are not commercial purposes.
+
+### Commercial Purposes
+Commercial purposes are purposes intended for or directed toward commercial advantage or monetary compensation. Commercial purposes include, but are not limited to, using the Software to provide services to others for a fee, using the Software as part of a product sold or licensed to others, or using the Software inside a business or for professional work.
+
+### Redistribution
+You may redistribute copies of the Software, with or without modification, provided that you include this license text with every copy.
+
+### Notices
+You must ensure that any copy of the Software you distribute includes all copyright notices, trademark notices, and other legal notices included in the Software.
+
+### No Other Rights
+This license does not grant any patent rights or trademark rights.
+
+### Termination
+If you violate any term of this license, your rights under this license terminate immediately.
+
+### Defensive Patent Claims
+If you make a patent claim against anyone alleging that the Software infringes a patent, your rights under this license terminate immediately.
+
+### No Warranty
+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,95 @@
+# Kritzel Engine for Vue
+
+Build infinite canvas and collaborative whiteboard experiences in Vue with Kritzel's native wrapper and TypeScript-first API.
+
+Kritzel is a framework-agnostic infinite canvas and collaborative whiteboard engine. It provides web components that work natively in any framework, with a first-class Vue wrapper for idiomatic template integration.
+
+Kritzel handles the hard parts of canvas-based applications — infinite pan and zoom, hit-testing, CRDT-based collaboration, undo and redo, and cross-browser rendering — so you can focus on your product's domain logic.
+
+**Full documentation:** [kritzel.io/docs/vue/getting-started/quick-start](https://kritzel.io/docs/vue/getting-started/quick-start)
+
+## Installation
+
+```bash
+npm install @kritzel/vue-engine
+```
+
+## Setup
+
+Render Kritzel in your component:
+
+```html
+<script setup lang="ts">
+import { KritzelEngine } from '@kritzel/vue-engine'
+</script>
+
+<template>
+  <KritzelEngine style="display: block; width: 100%; height: 100vh" />
+</template>
+```
+
+This renders the lower-level engine canvas without the editor toolbar shell.
+
+## Optional Enhancements
+
+### Persist Canvas State
+
+By default, the engine uses an empty sync provider list, so canvas state is reset on reload. To persist objects locally across page reloads, configure `syncConfig` explicitly with `IndexedDBSyncProvider`.
+
+```html
+<script setup lang="ts">
+import { KritzelEngine, IndexedDBSyncProvider } from '@kritzel/vue-engine'
+
+const syncConfig = {
+  providers: [IndexedDBSyncProvider],
+}
+</script>
+
+<template>
+  <KritzelEngine :syncConfig="syncConfig" style="display: block; width: 100%; height: 100vh" />
+</template>
+```
+
+### Apply Full Viewport Styling
+
+To ensure the Kritzel engine occupies the entire viewport and prevents unwanted scrolling, add the following CSS to your global stylesheet (e.g. `styles.css`):
+
+```css
+html,
+body,
+#app {
+  width: 100dvw;
+  height: 100dvh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+```
+
+### Include Mobile Viewport Meta Tag
+
+For optimal rendering and responsiveness on mobile devices, add this meta tag within the `<head>` section of your `index.html`:
+
+```html
+<meta
+  name="viewport"
+  content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content"
+/>
+```
+
+## Fundamentals
+
+Kritzel is composed of a small set of core concepts that work together to power your canvas experience:
+
+- **Components** — Two entry points, a batteries-included editor and a headless engine, to match any integration style.
+- **Tools** — State-machine interaction handlers that define how users draw, select, and manipulate the canvas.
+- **Objects** — The visual building blocks on the canvas, such as paths, shapes, text, and images with shared spatial properties.
+- **Workspaces** — Containers that manage an entire canvas collection, view state, and editor configuration.
+- **Theming** — Built-in light and dark themes with full CSS variable customization to match your brand.
+- **Collaboration** — Real-time multi-user sync powered by Yjs CRDTs with pluggable transport providers.
+
+Learn more in the [full documentation](https://kritzel.io/docs/vue/getting-started/basic-usage).
+
+## License
+
+See the [Kritzel License](https://kritzel.io/license). Kritzel is free for personal, hobby, and educational use. Commercial use requires a license — visit [kritzel.io](https://kritzel.io) for details.

package/dist/components.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
+import type { JSX } from '@kritzel/engine/dist/components';
+export declare const KritzelEngine: StencilVueComponent<JSX.KritzelEngine>;

package/dist/components.js

@@ -0,0 +1,67 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from '@stencil/vue-output-target/runtime';
+import { defineCustomElement as defineKritzelEngine } from '@kritzel/engine/dist/components/kritzel-engine.js';
+export const KritzelEngine = /*@__PURE__*/ defineContainer('kritzel-engine', defineKritzelEngine, [
+    'workspaces',
+    'editorId',
+    'activeWorkspaceId',
+    'syncConfig',
+    'assetStorageConfig',
+    'user',
+    'globalContextMenuItems',
+    'objectContextMenuItems',
+    'scaleMax',
+    'scaleMin',
+    'cursorTarget',
+    'lockDrawingScale',
+    'theme',
+    'licenseKey',
+    'themes',
+    'locale',
+    'locales',
+    'fallbackLocale',
+    'viewportBoundaryLeft',
+    'viewportBoundaryRight',
+    'viewportBoundaryTop',
+    'viewportBoundaryBottom',
+    'debugInfo',
+    'isPanningEnabled',
+    'isZoomingEnabled',
+    'isEngineReady',
+    'activeToolChange',
+    'workspacesChange',
+    'activeWorkspaceChange',
+    'longpress',
+    'objectsChange',
+    'objectsAdded',
+    'objectsRemoved',
+    'objectsUpdated',
+    'objectsSelectionChange',
+    'undoStateChange',
+    'objectsInViewportChange',
+    'viewportChange',
+    'awarenessChange',
+    'notificationsChange',
+    'contextMenuStateChange',
+    'isLoadingChange'
+], [
+    'isEngineReady',
+    'activeToolChange',
+    'workspacesChange',
+    'activeWorkspaceChange',
+    'longpress',
+    'objectsChange',
+    'objectsAdded',
+    'objectsRemoved',
+    'objectsUpdated',
+    'objectsSelectionChange',
+    'undoStateChange',
+    'objectsInViewportChange',
+    'viewportChange',
+    'awarenessChange',
+    'notificationsChange',
+    'contextMenuStateChange',
+    'isLoadingChange'
+]);

package/dist/composables.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Resolves the native Kritzel engine element from a specific Vue template ref.
+ *
+ * Because `<KritzelEngine>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * engine always belongs to that exact component instance.
+ */
+export declare function getEngineRef(componentRef: string): import("vue").ComputedRef<HTMLKritzelEngineElement>;

package/dist/composables.js

@@ -0,0 +1,22 @@
+import { computed, useTemplateRef, } from "vue";
+/**
+ * Resolves the native Kritzel engine element from a specific Vue template ref.
+ *
+ * Because `<KritzelEngine>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * engine always belongs to that exact component instance.
+ */
+export function getEngineRef(componentRef) {
+    const engineComponent = useTemplateRef(componentRef);
+    return computed(() => {
+        var _a;
+        const value = engineComponent.value;
+        if (!value) {
+            return null;
+        }
+        return "$el" in value
+            ? ((_a = value.$el) !== null && _a !== void 0 ? _a : null)
+            : value;
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './composables';
+export * from './plugin';
+export * from './vue-dynamic-object-renderer';
+export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelDynamicObject, KritzelDynamicObjectRendererRegistry, KritzelFontRegistry, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, hasRemoteSyncProvider, } from '@kritzel/engine';
+export type { HTMLKritzelEngineElement, KritzelToolbarItem, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelTextConfig, KritzelShapeConfig, KritzelLineConfig, KritzelPathConfig, KritzelImageConfig, KritzelGroupConfig, KritzelDynamicObjectConfig, KritzelWorkspaceConfig, KritzelFontDefinition, KritzelFontRegistration, KritzelRegisteredFont, KritzelFontMap, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, KritzelObjectExportFormat, KritzelObjectExportContext, KritzelExportable, ThemeAwareColor, ThemeName, KritzelLocale, LocaleCode, KritzelTerms, KritzelTermKey, KritzelTermVars, KritzelLoginConfig, KritzelLoginProvider, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, ObjectsInViewportChangeEvent, KritzelUndoState, IKritzelIsPublicChangeEvent, KritzelEngineState, KritzelDebugInfo, IKritzelUser, } from '@kritzel/engine';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './composables';
+export * from './plugin';
+export * from './vue-dynamic-object-renderer';
+export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelDynamicObject, KritzelDynamicObjectRendererRegistry, KritzelFontRegistry, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, hasRemoteSyncProvider, } from '@kritzel/engine';

package/dist/plugin.d.ts

@@ -0,0 +1 @@
+export declare const ComponentLibrary: any;

package/dist/plugin.js

@@ -0,0 +1,6 @@
+import { defineCustomElements } from '@kritzel/engine/loader';
+export const ComponentLibrary = {
+    async install() {
+        defineCustomElements();
+    },
+};

package/dist/vue-component-lib/utils.d.ts

@@ -0,0 +1,16 @@
+export interface InputProps<T> {
+    modelValue?: T;
+}
+/**
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ */
+export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;

package/dist/vue-component-lib/utils.js

@@ -0,0 +1,188 @@
+// @ts-nocheck
+// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
+import { defineComponent, getCurrentInstance, h, inject, ref, withDirectives } from 'vue';
+const UPDATE_VALUE_EVENT = 'update:modelValue';
+const MODEL_VALUE = 'modelValue';
+const ROUTER_LINK_VALUE = 'routerLink';
+const NAV_MANAGER = 'navManager';
+const ROUTER_PROP_PREFIX = 'router';
+const ARIA_PROP_PREFIX = 'aria';
+/**
+ * Starting in Vue 3.1.0, all properties are
+ * added as keys to the props object, even if
+ * they are not being used. In order to correctly
+ * account for both value props and v-model props,
+ * we need to check if the key exists for Vue <3.1.0
+ * and then check if it is not undefined for Vue >= 3.1.0.
+ * See https://github.com/vuejs/vue-next/issues/3889
+ */
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const getComponentClasses = (classes) => {
+    return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
+};
+const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
+    var _a;
+    return [...Array.from(((_a = ref.value) === null || _a === void 0 ? void 0 : _a.classList) || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+};
+/**
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ */
+export const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
+    /**
+     * Create a Vue component wrapper around a Web Component.
+     * Note: The `props` here are not all properties on a component.
+     * They refer to whatever properties are set on an instance of a component.
+     */
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const Container = defineComponent((props, { attrs, slots, emit }) => {
+        var _a;
+        let modelPropValue = props[modelProp];
+        const containerRef = ref();
+        const classes = new Set(getComponentClasses(attrs.class));
+        /**
+         * This directive is responsible for updating any reactive
+         * reference associated with v-model on the component.
+         * This code must be run inside of the "created" callback.
+         * Since the following listener callbacks as well as any potential
+         * event callback defined in the developer's app are set on
+         * the same element, we need to make sure the following callbacks
+         * are set first so they fire first. If the developer's callback fires first
+         * then the reactive reference will not have been updated yet.
+         */
+        const vModelDirective = {
+            created: (el) => {
+                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+                eventsNames.forEach((eventName) => {
+                    el.addEventListener(eventName.toLowerCase(), (e) => {
+                        /**
+                         * Only update the v-model binding if the event's target is the element we are
+                         * listening on. For example, Component A could emit ionChange, but it could also
+                         * have a descendant Component B that also emits ionChange. We only want to update
+                         * the v-model for Component A when ionChange originates from that element and not
+                         * when ionChange bubbles up from Component B.
+                         */
+                        if (e.target.tagName === el.tagName) {
+                            modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
+                            emit(UPDATE_VALUE_EVENT, modelPropValue);
+                        }
+                    });
+                });
+            },
+        };
+        const currentInstance = getCurrentInstance();
+        const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
+        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
+        const handleRouterLink = (ev) => {
+            const { routerLink } = props;
+            if (routerLink === EMPTY_PROP)
+                return;
+            if (navManager !== undefined) {
+                /**
+                 * This prevents the browser from
+                 * performing a page reload when pressing
+                 * an Ionic component with routerLink.
+                 * The page reload interferes with routing
+                 * and causes ion-back-button to disappear
+                 * since the local history is wiped on reload.
+                 */
+                ev.preventDefault();
+                let navigationPayload = { event: ev };
+                for (const key in props) {
+                    const value = props[key];
+                    if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+                        navigationPayload[key] = value;
+                    }
+                }
+                navManager.navigate(navigationPayload);
+            }
+            else {
+                console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
+            }
+        };
+        return () => {
+            modelPropValue = props[modelProp];
+            getComponentClasses(attrs.class).forEach((value) => {
+                classes.add(value);
+            });
+            const oldClick = props.onClick;
+            const handleClick = (ev) => {
+                if (oldClick !== undefined) {
+                    oldClick(ev);
+                }
+                if (!ev.defaultPrevented) {
+                    handleRouterLink(ev);
+                }
+            };
+            let propsToAdd = {
+                ref: containerRef,
+                class: getElementClasses(containerRef, classes),
+                onClick: handleClick,
+            };
+            /**
+             * We can use Object.entries here
+             * to avoid the hasOwnProperty check,
+             * but that would require 2 iterations
+             * where as this only requires 1.
+             */
+            for (const key in props) {
+                const value = props[key];
+                if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
+                    propsToAdd[key] = value;
+                }
+            }
+            if (modelProp) {
+                /**
+                 * If form value property was set using v-model
+                 * then we should use that value.
+                 * Otherwise, check to see if form value property
+                 * was set as a static value (i.e. no v-model).
+                 */
+                if (props[MODEL_VALUE] !== EMPTY_PROP) {
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
+                }
+                else if (modelPropValue !== EMPTY_PROP) {
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
+                }
+            }
+            // If router link is defined, add href to props
+            // in order to properly render an anchor tag inside
+            // of components that should become activatable and
+            // focusable with router link.
+            if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+                propsToAdd = Object.assign(Object.assign({}, propsToAdd), { href: props[ROUTER_LINK_VALUE] });
+            }
+            /**
+             * vModelDirective is only needed on components that support v-model.
+             * As a result, we conditionally call withDirectives with v-model components.
+             */
+            const node = h(name, propsToAdd, slots.default && slots.default());
+            return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
+        };
+    });
+    if (typeof Container !== 'function') {
+        Container.name = name;
+        Container.props = {
+            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
+        };
+        componentProps.forEach((componentProp) => {
+            Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+        });
+        if (modelProp) {
+            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+            Container.emits = [UPDATE_VALUE_EVENT];
+        }
+    }
+    return Container;
+};

package/dist/vue-dynamic-object-renderer.d.ts

@@ -0,0 +1,14 @@
+import { type DefineComponent } from 'vue';
+import { type KritzelDynamicObjectRenderContext, type KritzelDynamicObjectRenderer } from '@kritzel/engine';
+export interface VueDynamicObjectRendererOptions<TState = unknown> {
+    tagName: string;
+    component: DefineComponent<any, any, any, any, any, any, any, any>;
+    createInitialState?: () => TState;
+    getInitialState?: (data: unknown, context: KritzelDynamicObjectRenderContext) => TState;
+    mapProps?: (state: TState | undefined, context: KritzelDynamicObjectRenderContext) => Record<string, unknown>;
+    normalizeState?: (state: unknown, context: KritzelDynamicObjectRenderContext) => TState;
+    onStateChangeProp?: string | null;
+    styles?: string;
+}
+export declare function createVueDynamicObjectRenderer<TState = unknown>(options: VueDynamicObjectRendererOptions<TState>): KritzelDynamicObjectRenderer;
+export declare function registerVueDynamicObjectRenderer<TState = unknown>(rendererKey: string, options: VueDynamicObjectRendererOptions<TState>): () => void;

package/dist/vue-dynamic-object-renderer.js

@@ -0,0 +1,75 @@
+import { defineCustomElement } from 'vue';
+import { KritzelDynamicObjectRendererRegistry, } from '@kritzel/engine';
+function setHostProps(host, props) {
+    Object.entries(props).forEach(([key, value]) => {
+        host[key] = value;
+    });
+}
+export function createVueDynamicObjectRenderer(options) {
+    const mountedElements = new Map();
+    const ensureCustomElementDefined = () => {
+        if (!customElements.get(options.tagName)) {
+            customElements.define(options.tagName, defineCustomElement(options.component));
+        }
+    };
+    return {
+        onMount: (context) => {
+            var _a, _b;
+            if (!context.container) {
+                return;
+            }
+            ensureCustomElementDefined();
+            const initialState = options.getInitialState
+                ? options.getInitialState(context.data, context)
+                : (_a = context.data) !== null && _a !== void 0 ? _a : (_b = options.createInitialState) === null || _b === void 0 ? void 0 : _b.call(options);
+            const host = document.createElement(options.tagName);
+            const mounted = {
+                host,
+                latestState: initialState,
+            };
+            const baseProps = options.mapProps
+                ? options.mapProps(initialState, context)
+                : (initialState !== undefined ? { initialState } : {});
+            const onStateChangeProp = options.onStateChangeProp === undefined ? 'onStateChange' : options.onStateChangeProp;
+            if (onStateChangeProp !== null) {
+                const existing = baseProps[onStateChangeProp];
+                baseProps[onStateChangeProp] = (nextState) => {
+                    mounted.latestState = options.normalizeState
+                        ? options.normalizeState(nextState, context)
+                        : nextState;
+                    if (typeof existing === 'function') {
+                        existing(nextState);
+                    }
+                };
+            }
+            context.container.innerHTML = '';
+            if (options.styles) {
+                const styleElement = document.createElement('style');
+                styleElement.textContent = options.styles;
+                context.container.appendChild(styleElement);
+            }
+            setHostProps(host, baseProps);
+            context.container.appendChild(host);
+            mountedElements.set(context.object.id, mounted);
+        },
+        onUnmount: (context) => {
+            const mounted = mountedElements.get(context.object.id);
+            if (!mounted) {
+                return undefined;
+            }
+            mounted.host.remove();
+            mountedElements.delete(context.object.id);
+            if (context.container) {
+                context.container.innerHTML = '';
+            }
+            return mounted.latestState;
+        },
+    };
+}
+export function registerVueDynamicObjectRenderer(rendererKey, options) {
+    const renderer = createVueDynamicObjectRenderer(options);
+    KritzelDynamicObjectRendererRegistry.register(rendererKey, renderer);
+    return () => {
+        KritzelDynamicObjectRendererRegistry.unregister(rendererKey);
+    };
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@kritzel/vue-engine",
+  "version": "0.4.31",
+  "homepage": "https://kritzel.io/",
+  "description": "Kritzel engine wrapper for Vue.",
+  "keywords": [
+    "infinite canvas",
+    "collaboration",
+    "whiteboard",
+    "drawing",
+    "vue"
+  ],
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "npm run tsc",
+    "tsc": "tsc -p . --outDir ./dist",
+    "clean": "rimraf dist node_modules",
+    "bump": "npm version patch",
+    "release": "npm publish"
+  },
+  "bugs": {
+    "url": "https://github.com/kasual1/kritzel/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@stencil/vue-output-target": "0.11.8"
+  },
+  "peerDependencies": {
+    "@kritzel/engine": "^0.4.31"
+  }
+}