@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.40

package/dist/plugins/MagicCommand/src/components/MagicCommandProvider.vue.d.ts

@@ -5,65 +5,15 @@ interface MagicCommandProviderProps {
     asChild?: boolean;
     options?: MagicCommandOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, {}, {}, {}, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> | null;
-    };
-    rootEl: any;
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandProviderProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandProviderProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicCommand/src/components/MagicCommandRenderer.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/plugins/MagicCommand/src/components/MagicCommandRenderer.vue

@@ -1,48 +1,38 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, onBeforeUnmount } from "vue";
+<template>
+  <div ref="el" class="magic-command-renderer" />
+</template>
+
+<script setup>
+import { inject, onBeforeUnmount, useTemplateRef } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import {
   useMagicEmitter
-} from "@maas/vue-equipment/plugins";
+} from "@maas/vue-equipment/plugins/MagicEmitter";
 import { MagicCommandInstanceId } from "./../symbols";
 import { useCommandState } from "../composables/private/useCommandState";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCommandRenderer",
-  setup(__props) {
-    const instanceId = inject(MagicCommandInstanceId, "");
-    const emitter = useMagicEmitter();
-    if (!instanceId) {
-      throw new Error(
-        "MagicCommandRenderer must be nested inside MagicCommandProvider"
-      );
-    }
-    const elRef = ref(void 0);
-    const { initializeState } = useCommandState(instanceId);
-    const state = initializeState();
-    function enterCallback(payload) {
-      if (typeof payload === "string" && payload === instanceId) {
-        state.renderer = elRef.value;
-      }
-    }
-    emitter.on("enter", enterCallback);
-    onBeforeUnmount(() => {
-      emitter.off("enter", enterCallback);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-command-renderer"
-        },
-        null,
-        512
-        /* NEED_PATCH */
-      );
-    };
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommand"
+});
+const instanceId = inject(MagicCommandInstanceId, "");
+const emitter = useMagicEmitter();
+magicError.assert(instanceId, {
+  message: "MagicCommandRenderer must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+const elRef = useTemplateRef("el");
+const { initializeState } = useCommandState(instanceId);
+const state = initializeState();
+function enterCallback(payload) {
+  if (typeof payload === "string" && payload === instanceId) {
+    state.renderer = elRef.value;
   }
+}
+emitter.on("enter", enterCallback);
+onBeforeUnmount(() => {
+  emitter.off("enter", enterCallback);
 });
 </script>
 

package/dist/plugins/MagicCommand/src/components/MagicCommandRenderer.vue.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.d.vue.ts

@@ -0,0 +1,24 @@
+import type { Interaction, Action } from '../types/index.js';
+interface MagicCommandTriggerProps {
+    viewId?: string;
+    disabled?: boolean;
+    action?: Action;
+    trigger?: Interaction[];
+    asChild?: boolean;
+}
+declare var __VLS_12: {
+    viewActive: boolean | undefined;
+    triggerDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue

@@ -1,8 +1,24 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
-import { computed, inject, ref, toValue, watch } from "vue";
+<template>
+  <primitive
+    ref="el"
+    :data-id="`${mappedViewId}-trigger`"
+    :data-active="mappedActive"
+    :data-disabled="mappedDisabled"
+    :as-child="asChild"
+    class="magic-command-trigger"
+    @click="onClick"
+    @mouseenter="onMouseenter"
+  >
+    <slot :view-active="view?.active" :trigger-disabled="mappedDisabled" />
+  </primitive>
+</template>
+
+<script setup>
+import { computed, inject, useTemplateRef, toValue, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandView } from "../composables/private/useCommandView";
 import { useCommandTrigger } from "../composables/private/useCommandTrigger";
 import {
@@ -13,90 +29,77 @@ import {
   MagicCommandProviderOptions
 } from "../symbols";
 import { useMagicKeys } from "@vueuse/core";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCommandTrigger",
-  props: {
-    viewId: { type: String, required: false },
-    active: { type: Boolean, required: false, default: () => void 0 },
-    disabled: { type: Boolean, required: false, default: () => void 0 },
-    action: { type: String, required: false, default: "open" },
-    trigger: { type: Array, required: false, default: () => ["click"] },
-    asChild: { type: Boolean, required: false }
-  },
-  setup(__props) {
-    const elRef = ref(void 0);
-    const instanceId = inject(MagicCommandInstanceId, void 0);
-    const itemActive = inject(MagicCommandItemActive, void 0);
-    const itemDisabled = inject(MagicCommandItemDisabled, void 0);
-    const injectedViewId = inject(MagicCommandViewId, void 0);
-    const mappedViewId = computed(() => __props.viewId ?? injectedViewId);
-    if (!instanceId) {
-      throw new Error(
-        "MagicCommandTrigger must be nested inside MagicCommandProvider"
-      );
+const {
+  viewId,
+  disabled = void 0,
+  action = "open",
+  trigger = ["click"]
+} = defineProps({
+  viewId: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  action: { type: String, required: false },
+  trigger: { type: Array, required: false },
+  asChild: { type: Boolean, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandTrigger"
+});
+const elRef = useTemplateRef("el");
+const instanceId = inject(MagicCommandInstanceId, void 0);
+const itemActive = inject(MagicCommandItemActive, void 0);
+const itemDisabled = inject(MagicCommandItemDisabled, void 0);
+const injectedViewId = inject(MagicCommandViewId, void 0);
+const mappedViewId = computed(() => viewId ?? injectedViewId);
+magicError.assert(instanceId, {
+  message: "MagicCommandTrigger must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicCommandTrigger must be nested inside MagicCommandView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
+const { getView } = useCommandView(instanceId);
+const view = getView(mappedViewId.value);
+const mappedActive = computed(() => toValue(itemActive) ?? false);
+const mappedDisabled = computed(
+  () => disabled ?? toValue(itemDisabled) ?? false
+);
+const options = inject(MagicCommandProviderOptions, void 0);
+const { onMouseenter, onClick, onKeypress } = useCommandTrigger({
+  instanceId,
+  viewId: mappedViewId.value,
+  mappedActive,
+  mappedDisabled,
+  trigger,
+  action,
+  elRef
+});
+watch(
+  () => view?.active,
+  async (value) => {
+    if (value) {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      toValue(elRef)?.$el?.blur();
     }
-    if (!mappedViewId.value) {
-      throw new Error("MagicCommandTrigger must be nested inside MagicCommandView");
+  }
+);
+const keys = useMagicKeys();
+const { logWarning } = magicError;
+if (options?.keyListener?.enter) {
+  for (const key of options.keyListener.enter) {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
     }
-    const { getView } = useCommandView(instanceId);
-    const view = getView(mappedViewId.value);
-    const mappedActive = computed(() => __props.active ?? toValue(itemActive) ?? false);
-    const mappedDisabled = computed(
-      () => __props.disabled ?? toValue(itemDisabled) ?? false
-    );
-    const options = inject(MagicCommandProviderOptions, void 0);
-    const { onMouseenter, onClick, onEnter } = useCommandTrigger({
-      instanceId,
-      viewId: mappedViewId.value,
-      mappedActive,
-      mappedDisabled,
-      trigger: __props.trigger,
-      action: __props.action,
-      elRef
-    });
-    watch(
-      () => view?.active,
-      async (value) => {
-        if (value) {
-          await new Promise((resolve) => requestAnimationFrame(resolve));
-          toValue(elRef)?.$el?.blur();
-        }
+    watch(mappedKey, (value) => {
+      if (value) {
+        onKeypress();
       }
-    );
-    const keys = useMagicKeys();
-    if (options?.keyListener?.enter) {
-      for (const key of options.keyListener.enter) {
-        watch(keys[key], (value) => {
-          if (value) {
-            onEnter();
-          }
-        });
-      }
-    }
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
-        "data-id": `${mappedViewId.value}-trigger`,
-        "data-active": mappedActive.value,
-        "data-disabled": mappedDisabled.value,
-        "as-child": _ctx.asChild,
-        class: "magic-command-trigger",
-        onClick: _unref(onClick),
-        onMouseenter: _unref(onMouseenter)
-      }, {
-        default: _withCtx(() => [
-          _renderSlot(_ctx.$slots, "default", {
-            viewActive: _unref(view)?.active,
-            triggerDisabled: mappedDisabled.value
-          })
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["data-id", "data-active", "data-disabled", "as-child", "onClick", "onMouseenter"]);
-    };
+    });
   }
-});
+}
 </script>
 
 <style>
@@ -104,7 +107,7 @@ export default /* @__PURE__ */ _defineComponent({
   cursor: var(--magic-command-trigger-cursor, pointer);
 }
 
-.magic-menu-trigger.-disabled {
+.magic-menu-trigger[data-disabled='true'] {
   pointer-events: none;
 }
 </style>

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue.d.ts

@@ -1,74 +1,23 @@
 import type { Interaction, Action } from '../types/index.js';
 interface MagicCommandTriggerProps {
     viewId?: string;
-    active?: boolean;
     disabled?: boolean;
     action?: Action;
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            viewActive: boolean | undefined;
-            triggerDisabled: boolean;
-        }): any;
-    };
-    refs: {
-        elRef: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, {}, {}, {}, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> | null;
-    };
-    rootEl: any;
+declare var __VLS_12: {
+    viewActive: boolean | undefined;
+    triggerDisabled: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandTriggerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandTriggerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicCommand/src/components/MagicCommandView.d.vue.ts

@@ -0,0 +1,19 @@
+interface MagicCommandViewProps {
+    id?: string;
+    initial?: boolean;
+}
+declare var __VLS_1: {
+    viewActive: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue

@@ -1,8 +1,14 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["id"];
+<template>
+  <div :data-id="mappedId" class="magic-menu-view">
+    <slot :view-active="view.active" />
+  </div>
+</template>
+
+<script setup>
 import { computed, inject, onBeforeUnmount, provide, useId, watch } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandView } from "../composables/private/useCommandView";
 import {
   MagicCommandInstanceId,
@@ -11,50 +17,40 @@ import {
   MagicCommandItemId,
   MagicCommandViewActive
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCommandView",
-  props: {
-    id: { type: String, required: false },
-    initial: { type: Boolean, required: false, default: false }
-  },
-  setup(__props) {
-    const parentTree = inject(MagicCommandParentTree, []);
-    const instanceId = inject(MagicCommandInstanceId, void 0);
-    const itemId = inject(MagicCommandItemId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicCommandView must be nested inside MagicCommandProvider");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-command-view-${useId()}`);
-    const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
-    const mappedActive = computed(() => view.active);
-    const { initializeView, deleteView, sortViewItems } = useCommandView(instanceId);
-    const view = initializeView({
-      id: mappedId.value,
-      parent: { views: parentTree, item: itemId ?? "" },
-      initial: __props.initial
-    });
-    provide(MagicCommandViewId, mappedId.value);
-    provide(MagicCommandViewActive, mappedActive);
-    provide(MagicCommandParentTree, mappedParentTree.value);
-    watch(
-      () => view?.items,
-      () => {
-        sortViewItems(mappedId.value);
-      }
-    );
-    onBeforeUnmount(() => {
-      deleteView(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        id: mappedId.value,
-        class: "magic-menu-view"
-      }, [
-        _renderSlot(_ctx.$slots, "default", {
-          viewActive: _unref(view).active
-        })
-      ], 8, _hoisted_1);
-    };
+const { id, initial = false } = defineProps({
+  id: { type: String, required: false },
+  initial: { type: Boolean, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandView"
+});
+const parentTree = inject(MagicCommandParentTree, []);
+const instanceId = inject(MagicCommandInstanceId, void 0);
+const itemId = inject(MagicCommandItemId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicCommandView must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+const mappedId = computed(() => id ?? `magic-command-view-${useId()}`);
+const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
+const mappedActive = computed(() => view.active);
+const { initializeView, deleteView, sortViewItems } = useCommandView(instanceId);
+const view = initializeView({
+  id: mappedId.value,
+  parent: { views: parentTree, item: itemId ?? "" },
+  initial
+});
+provide(MagicCommandViewId, mappedId.value);
+provide(MagicCommandViewActive, mappedActive);
+provide(MagicCommandParentTree, mappedParentTree.value);
+watch(
+  () => view?.items,
+  () => {
+    sortViewItems(mappedId.value);
   }
+);
+onBeforeUnmount(() => {
+  deleteView(mappedId.value);
 });
 </script>

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue.d.ts

@@ -2,30 +2,17 @@ interface MagicCommandViewProps {
     id?: string;
     initial?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            viewActive: boolean;
-        }): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {
+    viewActive: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandViewProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandViewProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicCommand/src/composables/private/useCommandCallback.mjs

@@ -1,5 +1,5 @@
 import { toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useCommandCallback(args) {
   const { instanceId, viewId } = args;
   const emitter = useMagicEmitter();