@shwfed/nuxt 0.10.14 → 0.10.15

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.10.14",
+  "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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     defaultOpen?: boolean;
     breakpoint?: string;
     showCloseButton?: boolean;
+    dismissible?: boolean;
 };
 declare function close(): void;
 declare var __VLS_14: {
@@ -37,9 +38,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    defaultOpen: boolean;
     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;

package/dist/runtime/components/modal.vue

@@ -28,7 +28,8 @@ 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 }
+  showCloseButton: { type: Boolean, required: false, default: true },
+  dismissible: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["update:open"]);
 const attrs = useAttrs();
@@ -81,6 +82,7 @@ function close() {
   <component
     :is="modalComponents.Root"
     v-model:open="open"
+    :dismissible="props.dismissible"
   >
     <component
       :is="modalComponents.Trigger"

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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     defaultOpen?: boolean;
     breakpoint?: string;
     showCloseButton?: boolean;
+    dismissible?: boolean;
 };
 declare function close(): void;
 declare var __VLS_14: {
@@ -37,9 +38,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    defaultOpen: boolean;
     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;

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"

package/dist/runtime/components/ui/app/App.vue.d.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/OverlayHost.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/runtime/components/ui/app/OverlayHost.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, defineComponent } from "vue";
+import ShwfedModal from "../../modal.vue";
+import { useOverlay } from "../../../composables/useOverlay";
+const overlay = useOverlay();
+const OverlayBody = defineComponent({
+  name: "OverlayBody",
+  props: {
+    render: {
+      type: Function,
+      required: true
+    },
+    slotProps: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => props.render(props.slotProps);
+  }
+});
+function handleOpenUpdate(sessionId, open) {
+  if (open) {
+    return;
+  }
+  overlay.closeSync(sessionId, {
+    _tag: "OverlayAborted",
+    reason: "dismiss"
+  });
+}
+const renderedSessions = computed(() => {
+  const nextSessions = [];
+  for (const session of overlay.sessions) {
+    const definition = overlay.definitions[session.definitionId];
+    if (!definition) {
+      continue;
+    }
+    nextSessions.push({
+      sessionId: session.sessionId,
+      definitionId: session.definitionId,
+      shell: session.shell,
+      props: session.props,
+      definition
+    });
+  }
+  return nextSessions;
+});
+</script>
+
+<template>
+  <template
+    v-for="session in renderedSessions"
+    :key="session.sessionId"
+  >
+    <ShwfedModal
+      :open="true"
+      :breakpoint="session.shell.breakpoint"
+      :show-close-button="session.shell.showCloseButton"
+      :dismissible="session.shell.dismissible"
+      @update:open="handleOpenUpdate(session.sessionId, $event)"
+    >
+      <template
+        v-if="session.shell.title"
+        #title
+      >
+        {{ session.shell.title }}
+      </template>
+
+      <template
+        v-if="session.shell.description"
+        #description
+      >
+        {{ session.shell.description }}
+      </template>
+
+      <template #default="modalSlotProps">
+        <OverlayBody
+          :render="session.definition.render"
+          :slot-props="{
+  props: session.props,
+  shell: session.shell,
+  sessionId: session.sessionId,
+  close: (value) => overlay.closeSync(session.sessionId, value),
+  patch: (nextProps) => overlay.patchSync(session.sessionId, { props: nextProps }),
+  isDesktop: modalSlotProps.isDesktop
+}"
+        />
+      </template>
+    </ShwfedModal>
+  </template>
+</template>

package/dist/runtime/components/ui/app/OverlayHost.vue.d.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;