@shwfed/nuxt 0.10.13 → 0.10.15

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.10.13",
+  "version": "0.10.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -57,6 +57,7 @@ const module$1 = defineNuxtModule({
     addVitePlugin(TailwindCSS());
     addPlugin(resolver.resolve("runtime/plugins/i18n/index"));
     addPlugin(resolver.resolve("runtime/plugins/cel/index"));
+    addPlugin(resolver.resolve("runtime/plugins/overlay/index"));
     addPlugin(resolver.resolve("runtime/plugins/markdown/index"));
     addPlugin(resolver.resolve("runtime/plugins/api/index"));
     addPlugin({

package/dist/runtime/components/app.d.vue.ts

@@ -1,6 +1,7 @@
 import type { Scope } from 'effect';
+import type { OverlayService as OverlayRuntimeService } from '../composables/useOverlay.js';
 import type { Sidebar as SidebarType } from '../composables/useNavigationTabs.js';
-type CommandEffect = import('effect').Effect.Effect<void>;
+type CommandEffect = import('effect').Effect.Effect<void, never, Scope.Scope | OverlayRuntimeService>;
 type DslEffect = import('effect').Effect.Effect<Record<string, unknown>, never, Scope.Scope>;
 type ProfileCommandInputItem = Readonly<{
     id: string | number;

package/dist/runtime/components/app.vue.d.ts

@@ -1,6 +1,7 @@
 import type { Scope } from 'effect';
+import type { OverlayService as OverlayRuntimeService } from '../composables/useOverlay.js';
 import type { Sidebar as SidebarType } from '../composables/useNavigationTabs.js';
-type CommandEffect = import('effect').Effect.Effect<void>;
+type CommandEffect = import('effect').Effect.Effect<void, never, Scope.Scope | OverlayRuntimeService>;
 type DslEffect = import('effect').Effect.Effect<Record<string, unknown>, never, Scope.Scope>;
 type ProfileCommandInputItem = Readonly<{
     id: string | number;

package/dist/runtime/components/button.d.vue.ts

@@ -1,10 +1,10 @@
 import { Effect } from 'effect';
 import type { ButtonConfigInput } from './ui/buttons/schema.js';
-export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from './ui/buttons/schema.js';
-export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonGroup, ButtonGroupItem } from './ui/buttons/schema.js';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from './ui/buttons/schema.js';
+export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonDropdownAction, ButtonGroup, ButtonGroupItem, ButtonModal } from './ui/buttons/schema.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     config?: ButtonConfigInput | Effect.Effect<ButtonConfigInput | undefined>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (args_0: Readonly<{
@@ -23,6 +23,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -41,6 +54,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
@@ -67,6 +93,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -85,6 +124,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
@@ -92,4 +144,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/button.vue

@@ -27,7 +27,7 @@ function handleConfigUpdate(config) {
 </script>
 
 <script>
-export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from "./ui/buttons/schema";
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from "./ui/buttons/schema";
 </script>
 
 <template>
@@ -35,5 +35,15 @@ export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, Butt
     v-bind="$attrs"
     :config="resolveConfig()"
     @update:config="handleConfigUpdate"
-  />
+  >
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+  </UiButtons>
 </template>

package/dist/runtime/components/button.vue.d.ts

@@ -1,10 +1,10 @@
 import { Effect } from 'effect';
 import type { ButtonConfigInput } from './ui/buttons/schema.js';
-export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from './ui/buttons/schema.js';
-export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonGroup, ButtonGroupItem } from './ui/buttons/schema.js';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from './ui/buttons/schema.js';
+export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonDropdownAction, ButtonGroup, ButtonGroupItem, ButtonModal } from './ui/buttons/schema.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     config?: ButtonConfigInput | Effect.Effect<ButtonConfigInput | undefined>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (args_0: Readonly<{
@@ -23,6 +23,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -41,6 +54,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
@@ -67,6 +93,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -85,6 +124,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
@@ -92,4 +144,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/modal.d.vue.ts

@@ -0,0 +1,53 @@
+type __VLS_Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    breakpoint?: string;
+    showCloseButton?: boolean;
+    dismissible?: boolean;
+};
+declare function close(): void;
+declare var __VLS_14: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_34: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_42: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_44: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_52: {
+    close: typeof close;
+    isDesktop: boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    title?: (props: typeof __VLS_34) => any;
+} & {
+    description?: (props: typeof __VLS_42) => any;
+} & {
+    default?: (props: typeof __VLS_44) => any;
+} & {
+    footer?: (props: typeof __VLS_52) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    showCloseButton: boolean;
+    breakpoint: string;
+    dismissible: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, 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/runtime/components/modal.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { useMediaQuery } from "@vueuse/core";
+import { computed, ref, useAttrs, useSlots } from "vue";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "./ui/dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "./ui/drawer";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  breakpoint: { type: String, required: false, default: "(min-width: 640px)" },
+  showCloseButton: { type: Boolean, required: false, default: true },
+  dismissible: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:open"]);
+const attrs = useAttrs();
+const slots = useSlots();
+const uncontrolledOpen = ref(props.defaultOpen);
+const isDesktop = useMediaQuery(props.breakpoint);
+const desktopComponents = {
+  Root: Dialog,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Close: DialogClose
+};
+const mobileComponents = {
+  Root: Drawer,
+  Trigger: DrawerTrigger,
+  Content: DrawerContent,
+  Header: DrawerHeader,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Footer: DrawerFooter,
+  Close: DrawerClose
+};
+const modalComponents = computed(() => isDesktop.value ? desktopComponents : mobileComponents);
+const hasTrigger = computed(() => slots.trigger !== void 0);
+const hasTitle = computed(() => slots.title !== void 0);
+const hasDescription = computed(() => slots.description !== void 0);
+const hasHeader = computed(() => hasTitle.value || hasDescription.value);
+const hasFooter = computed(() => slots.footer !== void 0);
+const open = computed({
+  get() {
+    return props.open ?? uncontrolledOpen.value;
+  },
+  set(value) {
+    if (props.open === void 0) {
+      uncontrolledOpen.value = value;
+    }
+    emit("update:open", value);
+  }
+});
+function close() {
+  open.value = false;
+}
+</script>
+
+<template>
+  <component
+    :is="modalComponents.Root"
+    v-model:open="open"
+    :dismissible="props.dismissible"
+  >
+    <component
+      :is="modalComponents.Trigger"
+      v-if="hasTrigger"
+      as-child
+    >
+      <slot
+        name="trigger"
+        v-bind="{ close, isDesktop }"
+      />
+    </component>
+
+    <component
+      :is="modalComponents.Content"
+      v-bind="attrs"
+      :show-close-button="props.showCloseButton"
+    >
+      <component
+        :is="modalComponents.Header"
+        v-if="hasHeader"
+      >
+        <component
+          :is="modalComponents.Title"
+          v-if="hasTitle"
+        >
+          <slot
+            name="title"
+            v-bind="{ close, isDesktop }"
+          />
+        </component>
+
+        <component
+          :is="modalComponents.Description"
+          v-if="hasDescription"
+        >
+          <slot
+            name="description"
+            v-bind="{ close, isDesktop }"
+          />
+        </component>
+      </component>
+
+      <slot v-bind="{ close, isDesktop }" />
+
+      <component
+        :is="modalComponents.Footer"
+        v-if="hasFooter"
+      >
+        <slot
+          name="footer"
+          v-bind="{ close, isDesktop }"
+        />
+      </component>
+    </component>
+  </component>
+</template>

package/dist/runtime/components/modal.vue.d.ts

@@ -0,0 +1,53 @@
+type __VLS_Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    breakpoint?: string;
+    showCloseButton?: boolean;
+    dismissible?: boolean;
+};
+declare function close(): void;
+declare var __VLS_14: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_34: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_42: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_44: {
+    close: typeof close;
+    isDesktop: boolean;
+}, __VLS_52: {
+    close: typeof close;
+    isDesktop: boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    title?: (props: typeof __VLS_34) => any;
+} & {
+    description?: (props: typeof __VLS_42) => any;
+} & {
+    default?: (props: typeof __VLS_44) => any;
+} & {
+    footer?: (props: typeof __VLS_52) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    showCloseButton: boolean;
+    breakpoint: string;
+    dismissible: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, 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/runtime/components/ui/app/App.d.vue.ts

@@ -1,13 +1,15 @@
 import type { Scope } from 'effect';
 import { Effect } from 'effect';
+import { type OverlayService as OverlayRuntimeService } from '../../../composables/useOverlay.js';
 import { type Sidebar as SidebarType } from '../../../composables/useNavigationTabs.js';
+type UiCommandEffect = Effect.Effect<void, never, Scope.Scope | OverlayRuntimeService>;
 type ProfileCommandInputItem = Readonly<{
     id: string | number;
     title: string;
     icon?: string;
     hidden?: boolean;
     disabled?: boolean;
-    effect?: Effect.Effect<void>;
+    effect?: UiCommandEffect;
     keywords?: Array<string>;
 }>;
 type ProfileCommandInputGroup = Readonly<{
@@ -67,13 +69,13 @@ type __VLS_Props = {
      */
     commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
 };
-declare var __VLS_108: {}, __VLS_124: {}, __VLS_347: {};
+declare var __VLS_113: {}, __VLS_129: {}, __VLS_352: {};
 type __VLS_Slots = {} & {
-    menu?: (props: typeof __VLS_108) => any;
+    menu?: (props: typeof __VLS_113) => any;
 } & {
-    profile?: (props: typeof __VLS_124) => any;
+    profile?: (props: typeof __VLS_129) => any;
 } & {
-    default?: (props: typeof __VLS_347) => any;
+    default?: (props: typeof __VLS_352) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/app/App.vue

@@ -8,6 +8,8 @@ import { useMagicKeys, useTimeoutFn, whenever } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
+import OverlayHost from "./OverlayHost.vue";
+import { provideOverlay, useOverlay } from "../../../composables/useOverlay";
 import { setGlobalDslContext } from "../../../plugins/cel/context";
 import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "../sidebar";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
@@ -22,6 +24,7 @@ const {
 } = useRuntimeConfig();
 const { $dsl } = useNuxtApp();
 const { t } = useI18n();
+const overlay = useOverlay();
 const props = defineProps({
   dsl: { type: null, required: false },
   sidebar: { type: Array, required: false },
@@ -59,12 +62,28 @@ const logout = () => {
   }
   return Effect.void;
 };
+function runUiEffect(effect) {
+  if (!effect) {
+    return Promise.resolve();
+  }
+  return Effect.runPromise(Effect.scoped(provideOverlay(effect, overlay)));
+}
+function runPaletteEffect(effect) {
+  if (!effect) {
+    return Promise.resolve();
+  }
+  const effectWithClose = effect.pipe(Effect.tap(() => {
+    ui.isCommandPaletteOpen = false;
+  }));
+  return Effect.runPromise(Effect.scoped(provideOverlay(effectWithClose, overlay)));
+}
 </script>
 
 <template>
   <TooltipProvider>
     <ClientOnly>
       <Toaster />
+      <OverlayHost />
       <CommandDialog
         v-model:open="ui.isCommandPaletteOpen"
       >
@@ -95,9 +114,7 @@ const logout = () => {
                 :key="child.id"
                 :value="child.id"
                 :disabled="child.disabled"
-                @select="child.effect?.pipe(Effect.tap(() => {
-  ui.isCommandPaletteOpen = false;
-})).pipe(Effect.runPromise)"
+                @select="void runPaletteEffect(child.effect)"
               >
                 <span>{{ child.title }}</span>
                 <span class="sr-only">
@@ -109,9 +126,7 @@ const logout = () => {
               <CommandItem
                 :value="command.id"
                 :disabled="command.disabled"
-                @select="command.effect?.pipe(Effect.tap(() => {
-  ui.isCommandPaletteOpen = false;
-})).pipe(Effect.runPromise)"
+                @select="void runPaletteEffect(command.effect)"
               >
                 <span>{{ command.title }}</span>
                 <span class="sr-only">
@@ -198,7 +213,7 @@ const logout = () => {
                     <DropdownMenuItem
                       v-if="!child.hidden"
                       :disabled="child.disabled"
-                      @select="child.effect?.pipe(Effect.runPromise)"
+                      @select="void runUiEffect(child.effect)"
                     >
                       <Icon
                         v-if="child.icon"
@@ -213,7 +228,7 @@ const logout = () => {
               <DropdownMenuItem
                 v-else-if="!('children' in command) && !command.hidden"
                 :disabled="command.disabled"
-                @select="command.effect?.pipe(Effect.runPromise)"
+                @select="void runUiEffect(command.effect)"
               >
                 <Icon
                   v-if="command.icon"