@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/conversations/components/chat-conversation-item.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { useConversationItem } from "../composables/conversation-item";
+const props = defineProps({
+  conversation: { type: null, required: true },
+  active: { type: Boolean, required: true },
+  draggable: { type: Boolean, required: false },
+  userImage: { type: String, required: false },
+  selectConversation: { type: Function, required: false }
+});
+const emit = defineEmits(["delete", "rename", "duplicate", "export", "dragStart", "dragEnd"]);
+const {
+  isRenamingInline,
+  renameTitle,
+  renameInputRef,
+  showDeleteModal,
+  menuButtonRef,
+  isMenuOpen,
+  conversationPath,
+  displayTitle,
+  menuItems,
+  confirmDelete,
+  cancelDelete,
+  handleConversationClick,
+  handleConversationDoubleClick,
+  handleConversationDragStart,
+  handleConversationDragEnd,
+  cancelRename,
+  submitRename,
+  handleRenameBlur
+} = useConversationItem(props, emit);
+function setRenameInputRef(element) {
+  renameInputRef.value = element;
+}
+function setMenuButtonRef(element) {
+  menuButtonRef.value = element;
+}
+</script>
+
+<template>
+    <div
+        v-if="isRenamingInline"
+        px-12px
+        h-32px
+        rounded-8px
+        :class="active ? 'bg-neutral-200' : ''"
+    >
+        <div flex items-center justify-between gap-12px h-full>
+            <div v-if="userImage" w-16px h-16px rounded-full overflow-hidden flex-shrink-0>
+                <TelaAvatar
+                    :image="userImage"
+                    alt="Usuário"
+                    size="xs"
+                />
+            </div>
+
+            <div
+                flex-1 min-w-0 flex items-center
+                text-neutral-700
+                pb-1px
+                b-b=".5px solid #A3A3A3"
+            >
+                <input
+                    :ref="setRenameInputRef"
+                    v-model="renameTitle"
+                    type="text"
+                    autocomplete="off"
+                    aria-label="Nome da conversa"
+                    w-full min-w-0
+                    bg-transparent border-none outline-none
+                    text-14px font-medium text-neutral-700 leading-18px tracking="-.15px"
+                    p-0
+                    @blur="handleRenameBlur"
+                    @keydown.enter.prevent="submitRename"
+                    @keydown.escape.prevent.stop="cancelRename"
+                >
+            </div>
+        </div>
+    </div>
+
+    <a
+        v-else
+        :href="conversationPath"
+        :draggable="draggable"
+        block
+        px-12px
+        h-32px
+        rounded-8px
+        cursor-pointer
+        transition
+        class="group"
+        :class="[
+  active ? 'bg-neutral-200' : 'hover:bg-neutral-200/50'
+]"
+        @click="handleConversationClick"
+        @dblclick.prevent.stop="handleConversationDoubleClick"
+        @dragstart="handleConversationDragStart"
+        @dragend="handleConversationDragEnd"
+    >
+        <div flex items-center justify-between gap-12px h-full>
+            <!-- User Avatar -->
+            <div v-if="userImage" w-16px h-16px rounded-full overflow-hidden flex-shrink-0>
+                <TelaAvatar
+                    :image="userImage"
+                    alt="Usuário"
+                    size="xs"
+                />
+            </div>
+
+            <div flex-1 min-w-0 flex items-center>
+                <span
+                    text-14px
+                    font-medium
+                    text-neutral-700
+                    truncate
+                    tracking="-.15px"
+                >
+                    {{ displayTitle }}
+                </span>
+            </div>
+
+            <div
+                mt-2px
+                flex
+                items-center
+                class="opacity-0 group-hover:opacity-100 transition-opacity"
+                :class="isMenuOpen && 'opacity-100'"
+            >
+                <TelaDropdownMenu :items="menuItems" content-class="chat-sidebar-floating">
+                    <button
+                        :ref="setMenuButtonRef"
+                        p-4px
+                        rounded-6px
+                        hover:bg-neutral-300
+                        transition-colors
+                        cursor-pointer
+                        :class="isMenuOpen && '!bg-neutral-300'"
+                        @click.prevent.stop
+                    >
+                        <div i-ph-dots-three-vertical text-16px text-neutral-400 />
+                    </button>
+                </TelaDropdownMenu>
+            </div>
+        </div>
+    </a>
+
+    <TelaConfirmationModal
+        v-model:open="showDeleteModal"
+        title="Excluir conversa"
+        variant="danger"
+        class="chat-sidebar-floating"
+        confirm-button-text="Excluir"
+        cancel-button-text="Cancelar"
+        @confirm="confirmDelete"
+        @cancel="cancelDelete"
+    >
+        Tem certeza que deseja excluir esta conversa? Esta ação não pode ser desfeita.
+    </TelaConfirmationModal>
+</template>

package/dist/runtime/conversations/components/chat-conversation-item.vue.d.ts

@@ -0,0 +1,26 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    conversation: DeepReadonly<Conversation>;
+    active: boolean;
+    draggable?: boolean;
+    userImage?: string;
+    selectConversation?: (id: string) => void | Promise<void>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    delete: (id: string) => any;
+    rename: (id: string, title: string) => any;
+    duplicate: (id: string) => any;
+    export: (id: string) => any;
+    dragStart: (id: string) => any;
+    dragEnd: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((id: string) => any) | undefined;
+    onRename?: ((id: string, title: string) => any) | undefined;
+    onDuplicate?: ((id: string) => any) | undefined;
+    onExport?: ((id: string) => any) | undefined;
+    onDragStart?: ((id: string) => any) | undefined;
+    onDragEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-conversation-list.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    conversations: DeepReadonly<Conversation[]>;
+    currentId?: string;
+    getMemberImage?: (userId: string) => string | undefined;
+    selectConversation?: (id: string) => void | Promise<void>;
+    resetConversation?: () => void | Promise<void>;
+    startConversation?: (groupId?: string | null) => void | Promise<void>;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-conversation-list.vue

@@ -0,0 +1,352 @@
+<script setup>
+import { useConversationList } from "../composables/conversation-list";
+const props = defineProps({
+  conversations: { type: null, required: true },
+  currentId: { type: String, required: false },
+  getMemberImage: { type: Function, required: false },
+  selectConversation: { type: Function, required: false },
+  resetConversation: { type: Function, required: false },
+  startConversation: { type: Function, required: false },
+  loading: { type: Boolean, required: false }
+});
+const {
+  conversationSearch,
+  hasConversationContent,
+  shouldShowSkeleton,
+  emptyConversationMessage,
+  skeletonRows,
+  groupItems,
+  ungroupedConversations,
+  ungroupedDropTarget,
+  ungroupedConversationLabel,
+  shouldShowUngroupedHeader,
+  showGroupCreationPrompt,
+  showDeleteGroupModal,
+  showDeleteGroupConversationsModal,
+  groupActionLoading,
+  renameGroupName,
+  renameGroupError,
+  deleteGroupConfirmationMessage,
+  deleteGroupConversationsConfirmationMessage,
+  toggleGroup,
+  clearDeleteGroupTarget,
+  clearDeleteGroupConversationsTarget,
+  confirmDeleteGroup,
+  confirmDeleteGroupConversations,
+  cancelRenameGroup,
+  submitRenameGroup,
+  handleRenameGroupBlur,
+  setRenameGroupInputRef,
+  handleDelete,
+  handleRename,
+  handleDuplicate,
+  handleExport,
+  handleConversationDragStart,
+  clearDragState,
+  handleDragEnter,
+  handleDragOver,
+  handleDragLeave,
+  getConversationItemProps,
+  handleConversationDrop,
+  startConversationInGroup
+} = useConversationList(props);
+</script>
+
+<template>
+    <div flex="~ col" gap-12px>
+        <div px-8px flex="~ col" gap-8px>
+            <ChatConversationSearch v-model="conversationSearch" />
+            <ChatConversationCreatorFilter />
+        </div>
+
+        <div v-if="shouldShowSkeleton" flex="~ col" gap-4px>
+            <div h-20px flex items-center pl-12px pr-4px mb-4px>
+                <TelaSkeleton rounded-4px bg-neutral-200 style="width: 68px; height: 12px;" />
+            </div>
+
+            <div flex="~ col" gap-1px>
+                <div
+                    v-for="row in skeletonRows"
+                    :key="row.id"
+                    flex items-center h-32px px-8px rounded-8px
+                >
+                    <TelaSkeleton rounded-6px bg-neutral-200 :style="{ width: row.width, height: '13px' }" />
+                </div>
+            </div>
+        </div>
+
+        <div v-else-if="!hasConversationContent" p-16px text-center>
+            <p text-14px text-neutral-400>
+                {{ emptyConversationMessage }}
+            </p>
+        </div>
+
+        <template v-else>
+            <div
+                v-if="showGroupCreationPrompt"
+                mx-8px
+                flex="~ col" gap-10px
+            >
+                <div h-20px flex items-center px-4px>
+                    <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
+                        PASTAS
+                    </span>
+                </div>
+                <div flex="~ col" gap-6px>
+                    <div
+                        h-36px px-10px
+                        flex items-center gap-10px
+                        rounded-8px
+                        b=".5px dashed neutral-200"
+                    >
+                        <span i-ph-folder text-16px text-neutral-400 shrink-0 />
+                        <span h-10px w-120px rounded-full bg-neutral-100 />
+                    </div>
+                    <div
+                        h-36px px-10px
+                        flex items-center gap-10px
+                        rounded-8px
+                        b=".5px dashed neutral-200"
+                    >
+                        <span i-ph-folder text-16px text-neutral-400 shrink-0 />
+                        <span h-10px w-84px rounded-full bg-neutral-100 />
+                    </div>
+                </div>
+                <p px-4px text-14px text-neutral-500 leading-20px>
+                    Suas pastas aparecem aqui. Crie uma para começar a agrupar conversas.
+                </p>
+                <ChatConversationNewGroupButton label="Criar pasta" variant="empty-state" />
+            </div>
+
+            <div v-if="groupItems.length > 0" flex="~ col" gap-2px>
+                <div
+                    v-for="groupBucket in groupItems"
+                    :key="groupBucket.group.id"
+                    flex="~ col"
+                    rounded-8px
+                    transition-colors
+                    :class="groupBucket.dropTarget ? 'bg-neutral-200' : ''"
+                    @dragenter.prevent="handleDragEnter(groupBucket.group.id)"
+                    @dragover.prevent="handleDragOver($event, groupBucket.group.id)"
+                    @dragleave="handleDragLeave($event, groupBucket.group.id)"
+                    @drop.prevent="handleConversationDrop($event, groupBucket.group.id)"
+                >
+                    <div
+                        v-if="groupBucket.isRenaming"
+                        h-32px w-full px-8px
+                        flex items-center gap-8px
+                        rounded-8px
+                        :class="groupBucket.dropTarget ? 'bg-neutral-200' : ''"
+                    >
+                        <span
+                            i-ph-caret-right
+                            text-12px text-neutral-400
+                            transition-transform
+                            :class="groupBucket.open && 'rotate-90'"
+                        />
+                        <span
+                            :class="groupBucket.folderIcon"
+                            text-16px text-neutral-500 shrink-0
+                        />
+                        <div
+                            flex-1 min-w-0 flex items-center
+                            pb-1px
+                            b-b=".5px solid #A3A3A3"
+                            :class="renameGroupError && 'border-red-500'"
+                        >
+                            <input
+                                :ref="(element) => setRenameGroupInputRef(element, groupBucket.group.id)"
+                                v-model="renameGroupName"
+                                type="text"
+                                autocomplete="off"
+                                maxlength="80"
+                                aria-label="Nome da pasta"
+                                w-full min-w-0
+                                bg-transparent border-none outline-none
+                                text-14px font-semibold text-neutral-700 leading-18px
+                                p-0
+                                :disabled="groupActionLoading"
+                                @blur="handleRenameGroupBlur"
+                                @keydown.enter.prevent="submitRenameGroup"
+                                @keydown.escape.prevent.stop="cancelRenameGroup"
+                                @click.stop
+                                @dblclick.stop
+                            >
+                        </div>
+                    </div>
+
+                    <div v-else rounded-8px class="group" :class="groupBucket.dropTarget ? '' : 'hover:bg-neutral-100'">
+                        <div h-32px w-full px-8px flex items-center gap-4px text-left>
+                            <button
+                                type="button"
+                                h-full flex-1 min-w-0
+                                flex items-center gap-8px
+                                text-left
+                                cursor-pointer
+                                @click="toggleGroup(groupBucket.group.id)"
+                            >
+                                <span
+                                    i-ph-caret-right
+                                    text-12px text-neutral-400
+                                    transition-transform
+                                    :class="groupBucket.open && 'rotate-90'"
+                                />
+                                <span
+                                    :class="groupBucket.folderIcon"
+                                    text-16px text-neutral-500 shrink-0
+                                />
+                                <span flex-1 min-w-0 truncate text-14px font-semibold text-neutral-900 leading-18px>
+                                    {{ groupBucket.group.name }}
+                                </span>
+                                <span v-if="groupBucket.conversationCountLabel" text-13px font-medium text-neutral-400 tabular-nums>
+                                    {{ groupBucket.conversationCountLabel }}
+                                </span>
+                            </button>
+
+                            <div
+                                flex items-center justify-center shrink-0
+                                class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity"
+                            >
+                                <TelaDropdownMenu
+                                    :items="groupBucket.menuItems"
+                                    align="end"
+                                    content-class="chat-sidebar-floating"
+                                >
+                                    <button
+                                        type="button"
+                                        aria-label="Ações da pasta"
+                                        p-4px
+                                        rounded-6px
+                                        hover:bg-neutral-200
+                                        transition-colors
+                                        cursor-pointer
+                                        @click.prevent.stop
+                                    >
+                                        <div i-ph-dots-three-vertical text-16px text-neutral-400 />
+                                    </button>
+                                </TelaDropdownMenu>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="groupBucket.isRenaming && renameGroupError"
+                        ml-44px mr-8px mb-4px
+                    >
+                        <span text-12px text-red-600 leading-16px aria-live="polite">
+                            {{ renameGroupError }}
+                        </span>
+                    </div>
+
+                    <Transition name="group-slide">
+                        <div v-if="groupBucket.open" class="group-slide-panel">
+                            <div class="group-slide__inner">
+                                <div flex="~ col" gap-1px ml-20px mt-1px mb-4px>
+                                    <ChatConversationItem
+                                        v-for="conversation in groupBucket.items"
+                                        :key="conversation.id"
+                                        v-bind="getConversationItemProps(conversation)"
+                                        @delete="handleDelete"
+                                        @rename="handleRename"
+                                        @duplicate="handleDuplicate"
+                                        @export="handleExport"
+                                        @drag-start="handleConversationDragStart"
+                                        @drag-end="clearDragState"
+                                    />
+                                    <button
+                                        v-if="groupBucket.showNewConversationAction"
+                                        type="button"
+                                        h-32px px-8px
+                                        flex items-center gap-8px
+                                        rounded-8px
+                                        text-left
+                                        hover:bg-neutral-100
+                                        transition-colors
+                                        cursor-pointer
+                                        @click="startConversationInGroup(groupBucket.group.id)"
+                                    >
+                                        <span i-ph-plus text-14px text-neutral-500 shrink-0 />
+                                        <span text-14px font-medium text-neutral-500 leading-18px>
+                                            Nova conversa
+                                        </span>
+                                    </button>
+                                    <div
+                                        v-else-if="groupBucket.showSearchEmpty"
+                                        h-32px px-8px flex items-center
+                                    >
+                                        <span text-13px text-neutral-400 leading-17px>
+                                            Sem resultados
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+
+            <div
+                flex="~ col" gap-4px
+                rounded-8px
+                transition-colors
+                :class="ungroupedDropTarget ? 'bg-neutral-100' : ''"
+                @dragenter.prevent="handleDragEnter(null)"
+                @dragover.prevent="handleDragOver($event, null)"
+                @dragleave="handleDragLeave($event, null)"
+                @drop.prevent="handleConversationDrop($event, null)"
+            >
+                <div v-if="shouldShowUngroupedHeader" h-20px flex items-center pl-12px pr-4px mb-4px>
+                    <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
+                        {{ ungroupedConversationLabel }}
+                    </span>
+                </div>
+
+                <div v-if="ungroupedConversations.length > 0" flex="~ col" gap-1px>
+                    <ChatConversationItem
+                        v-for="conversation in ungroupedConversations"
+                        :key="conversation.id"
+                        v-bind="getConversationItemProps(conversation)"
+                        @delete="handleDelete"
+                        @rename="handleRename"
+                        @duplicate="handleDuplicate"
+                        @export="handleExport"
+                        @drag-start="handleConversationDragStart"
+                        @drag-end="clearDragState"
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+
+    <TelaConfirmationModal
+        v-model:open="showDeleteGroupModal"
+        title="Excluir pasta"
+        variant="danger"
+        class="chat-sidebar-floating"
+        confirm-button-text="Excluir pasta"
+        cancel-button-text="Cancelar"
+        :loading="groupActionLoading"
+        @confirm="confirmDeleteGroup"
+        @cancel="clearDeleteGroupTarget"
+    >
+        {{ deleteGroupConfirmationMessage }}
+    </TelaConfirmationModal>
+
+    <TelaConfirmationModal
+        v-model:open="showDeleteGroupConversationsModal"
+        title="Excluir conversas"
+        variant="danger"
+        class="chat-sidebar-floating"
+        confirm-button-text="Excluir conversas"
+        cancel-button-text="Cancelar"
+        :loading="groupActionLoading"
+        @confirm="confirmDeleteGroupConversations"
+        @cancel="clearDeleteGroupConversationsTarget"
+    >
+        {{ deleteGroupConversationsConfirmationMessage }}
+    </TelaConfirmationModal>
+</template>
+
+<style scoped>
+.group-slide-panel{display:grid;grid-template-rows:1fr}.group-slide-enter-active,.group-slide-leave-active{overflow:hidden;transition:grid-template-rows .18s cubic-bezier(.2,.8,.2,1),opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1)}.group-slide-enter-from,.group-slide-leave-to{grid-template-rows:0fr;opacity:0;transform:translateY(-4px)}.group-slide-enter-to,.group-slide-leave-from{grid-template-rows:1fr;opacity:1;transform:translateY(0)}.group-slide__inner{min-height:0;overflow:hidden}
+</style>

package/dist/runtime/conversations/components/chat-conversation-list.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    conversations: DeepReadonly<Conversation[]>;
+    currentId?: string;
+    getMemberImage?: (userId: string) => string | undefined;
+    selectConversation?: (id: string) => void | Promise<void>;
+    resetConversation?: () => void | Promise<void>;
+    startConversation?: (groupId?: string | null) => void | Promise<void>;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-conversation-new-group-button.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { useConversationGroups } from "../composables/conversation-groups";
+import ChatConversationNewGroupPopoverContent from "./chat-conversation-new-group-popover-content.vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  variant: { type: String, required: false }
+});
+const { createGroup, error: groupCreationError } = useConversationGroups();
+const isOpen = ref(false);
+const groupName = ref("");
+const isSaving = ref(false);
+const creationErrorMessage = ref(null);
+const popoverContentRef = ref(null);
+const hasLabel = computed(() => Boolean(props.label?.trim()));
+const isEmptyState = computed(() => props.variant === "empty-state");
+const buttonClasses = computed(() => {
+  if (isEmptyState.value)
+    return "h-32px w-full gap-6px px-12px border-neutral-300 hover:bg-neutral-50";
+  if (hasLabel.value)
+    return "h-28px px-10px gap-6px self-start border-neutral-300 hover:bg-neutral-50";
+  return "h-32px w-40px border-neutral-300 hover:bg-neutral-50";
+});
+const iconClasses = computed(() => isEmptyState.value ? "text-neutral-900" : "text-neutral-700");
+const labelClasses = computed(
+  () => isEmptyState.value ? "text-14px font-semibold text-neutral-900 leading-18px" : "text-13px font-medium text-neutral-700 leading-17px"
+);
+watch(isOpen, async (open) => {
+  if (!open) {
+    creationErrorMessage.value = null;
+    return;
+  }
+  await nextTick();
+  popoverContentRef.value?.focusInput?.();
+});
+watch(groupName, () => {
+  creationErrorMessage.value = null;
+});
+async function submitGroup() {
+  const name = groupName.value.trim();
+  if (!name || isSaving.value)
+    return;
+  creationErrorMessage.value = null;
+  isSaving.value = true;
+  const group = await createGroup(name);
+  isSaving.value = false;
+  if (!group) {
+    creationErrorMessage.value = groupCreationError.value || "Erro ao criar pasta";
+    return;
+  }
+  groupName.value = "";
+  creationErrorMessage.value = null;
+  isOpen.value = false;
+}
+function cancelGroup() {
+  groupName.value = "";
+  creationErrorMessage.value = null;
+  isOpen.value = false;
+}
+</script>
+
+<template>
+    <TelaPopover v-model:open="isOpen">
+        <TelaPopoverTrigger as-child>
+            <button
+                type="button"
+                flex items-center justify-center
+                bg-white b=".5px solid"
+                rounded-10px
+                transition-colors
+                cursor-pointer
+                :class="buttonClasses"
+                :aria-label="label || 'Nova pasta'"
+                :title="label || 'Nova pasta'"
+            >
+                <span i-ph-folder-plus text-16px :class="iconClasses" />
+                <span v-if="hasLabel" :class="labelClasses">
+                    {{ label }}
+                </span>
+            </button>
+        </TelaPopoverTrigger>
+
+        <ChatConversationNewGroupPopoverContent
+            ref="popoverContentRef"
+            v-model="groupName"
+            :error-message="creationErrorMessage"
+            :saving="isSaving"
+            @submit="submitGroup"
+            @cancel="cancelGroup"
+        />
+    </TelaPopover>
+</template>

package/dist/runtime/conversations/components/chat-new-conversation-modal.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+} & {
+    create: (canvasTools: CanvasTool[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+    onCreate?: ((canvasTools: CanvasTool[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;