@shwfed/nuxt 0.10.14 → 0.11.0

package/dist/runtime/components/menu-tabs.d.vue.ts

@@ -1,7 +1,7 @@
 import { Effect } from 'effect';
 import type { MenuTabsConfigInput } from './ui/menu-tabs/schema.js';
-export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from './ui/menu-tabs/schema.js';
-export type { MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem } from './ui/menu-tabs/schema.js';
+export { CURRENT_COMPATIBILITY_DATE, KIND, MenuTabsBodyC, MenuTabsBodyInputC, MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC, SUPPORTED_COMPATIBILITY_DATES, createMenuTabsConfig, } from './ui/menu-tabs/schema.js';
+export type { MenuTabsBody, MenuTabsBodyInput, MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem, } from './ui/menu-tabs/schema.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
@@ -11,9 +11,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:config": (args_0: Readonly<{
         menus: readonly Readonly<{
             id: string;
-            title: import("../utils/coders.js").LocaleValue;
+            title: readonly {
+                locale: "zh" | "ja" | "en" | "ko";
+                message: string;
+            }[];
             to: string;
         }>[];
+        kind: string;
+        compatibilityDate: string;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
     config?: MenuTabsConfigInput | Effect.Effect<MenuTabsConfigInput | undefined>;
@@ -22,8 +27,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:config"?: ((args_0: Readonly<{
         menus: readonly Readonly<{
             id: string;
-            title: import("../utils/coders.js").LocaleValue;
+            title: readonly {
+                locale: "zh" | "ja" | "en" | "ko";
+                message: string;
+            }[];
             to: string;
         }>[];
+        kind: string;
+        compatibilityDate: string;
     }>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/menu-tabs.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { Effect } from "effect";
+import { createMenuTabsConfig } from "./ui/menu-tabs/schema";
 import UiMenuTabs from "./ui/menu-tabs/MenuTabs.vue";
 defineOptions({
   inheritAttrs: false
@@ -9,9 +10,9 @@ const props = defineProps({
   context: { type: Object, required: false }
 });
 const emit = defineEmits(["update:config"]);
-const defaultConfig = {
+const defaultConfig = createMenuTabsConfig({
   menus: []
-};
+});
 function isEffectConfig(value) {
   return typeof value === "object" && value !== null && "pipe" in value && typeof Reflect.get(value, "pipe") === "function";
 }
@@ -27,7 +28,18 @@ function handleConfigUpdate(config) {
 </script>
 
 <script>
-export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from "./ui/menu-tabs/schema";
+export {
+  CURRENT_COMPATIBILITY_DATE,
+  KIND,
+  MenuTabsBodyC,
+  MenuTabsBodyInputC,
+  MenuTabsConfigC,
+  MenuTabsConfigInputC,
+  MenuTabsItemC,
+  MenuTabsItemToC,
+  SUPPORTED_COMPATIBILITY_DATES,
+  createMenuTabsConfig
+} from "./ui/menu-tabs/schema";
 </script>
 
 <template>

package/dist/runtime/components/menu-tabs.vue.d.ts

@@ -1,7 +1,7 @@
 import { Effect } from 'effect';
 import type { MenuTabsConfigInput } from './ui/menu-tabs/schema.js';
-export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from './ui/menu-tabs/schema.js';
-export type { MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem } from './ui/menu-tabs/schema.js';
+export { CURRENT_COMPATIBILITY_DATE, KIND, MenuTabsBodyC, MenuTabsBodyInputC, MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC, SUPPORTED_COMPATIBILITY_DATES, createMenuTabsConfig, } from './ui/menu-tabs/schema.js';
+export type { MenuTabsBody, MenuTabsBodyInput, MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem, } from './ui/menu-tabs/schema.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
@@ -11,9 +11,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:config": (args_0: Readonly<{
         menus: readonly Readonly<{
             id: string;
-            title: import("../utils/coders.js").LocaleValue;
+            title: readonly {
+                locale: "zh" | "ja" | "en" | "ko";
+                message: string;
+            }[];
             to: string;
         }>[];
+        kind: string;
+        compatibilityDate: string;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
     config?: MenuTabsConfigInput | Effect.Effect<MenuTabsConfigInput | undefined>;
@@ -22,8 +27,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:config"?: ((args_0: Readonly<{
         menus: readonly Readonly<{
             id: string;
-            title: import("../utils/coders.js").LocaleValue;
+            title: readonly {
+                locale: "zh" | "ja" | "en" | "ko";
+                message: string;
+            }[];
             to: string;
         }>[];
+        kind: string;
+        compatibilityDate: string;
     }>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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/table.d.vue.ts

@@ -1,7 +1,8 @@
+import { Effect } from 'effect';
 import type { TableConfigInput } from './ui/table/schema.js';
 export type { Accessor, Column, Expression, Markdown, Render, TableConfig, TableConfigInput } from './ui/table/schema.js';
 export type { TableInstance } from './ui/table/Table.vue.js';
-export { AccessorC, ColumnC, RenderC, TableConfigC } from './ui/table/schema.js';
+export { AccessorC, ColumnC, CURRENT_COMPATIBILITY_DATE, KIND, RenderC, SUPPORTED_COMPATIBILITY_DATES, TableBodyC, TableBodyInputC, TableConfigC, TableConfigInputC, createTableConfig, } from './ui/table/schema.js';
 declare module '@tanstack/vue-table' {
     interface ColumnMeta<TData extends import('@tanstack/vue-table').RowData, TValue> {
         tooltip?: string;
@@ -13,11 +14,13 @@ declare module '@tanstack/vue-table' {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    config?: TableConfigInput | import("effect").Effect.Effect<TableConfigInput | undefined>;
+    config?: TableConfigInput | Effect.Effect<TableConfigInput | undefined>;
     data: Array<unknown>;
     rowCount?: number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (args_0: Readonly<{
+        kind: string;
+        compatibilityDate: string;
         getRowId?: import("./table.vue.js").Expression;
         getSubRows?: import("./table.vue.js").Expression;
         enableRowSelection?: import("./table.vue.js").Expression;
@@ -74,11 +77,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         paginationPageSizes?: ReadonlyArray<number>;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    config?: TableConfigInput | import("effect").Effect.Effect<TableConfigInput | undefined>;
+    config?: TableConfigInput | Effect.Effect<TableConfigInput | undefined>;
     data: Array<unknown>;
     rowCount?: number;
 }> & Readonly<{
     "onUpdate:config"?: ((args_0: Readonly<{
+        kind: string;
+        compatibilityDate: string;
         getRowId?: import("./table.vue.js").Expression;
         getSubRows?: import("./table.vue.js").Expression;
         enableRowSelection?: import("./table.vue.js").Expression;

package/dist/runtime/components/table.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { Effect } from "effect";
 import { ref } from "vue";
+import { createTableConfig } from "./ui/table/schema";
 import UiTable from "./ui/table/Table.vue";
 defineOptions({
   inheritAttrs: false
@@ -10,6 +12,18 @@ const props = defineProps({
   rowCount: { type: Number, required: false }
 });
 const emit = defineEmits(["update:config"]);
+const defaultConfig = createTableConfig({
+  columns: []
+});
+function isTableConfigEffect(value) {
+  return typeof value === "object" && value !== null && "pipe" in value && typeof value.pipe === "function";
+}
+function resolveConfig() {
+  if (isTableConfigEffect(props.config)) {
+    return props.config.pipe(Effect.map((value) => value ?? defaultConfig));
+  }
+  return props.config ?? defaultConfig;
+}
 function handleConfigUpdate(config) {
   emit("update:config", config);
 }
@@ -43,13 +57,25 @@ defineExpose(new Proxy({}, {
 </script>
 
 <script>
-export { AccessorC, ColumnC, RenderC, TableConfigC } from "./ui/table/schema";
+export {
+  AccessorC,
+  ColumnC,
+  CURRENT_COMPATIBILITY_DATE,
+  KIND,
+  RenderC,
+  SUPPORTED_COMPATIBILITY_DATES,
+  TableBodyC,
+  TableBodyInputC,
+  TableConfigC,
+  TableConfigInputC,
+  createTableConfig
+} from "./ui/table/schema";
 </script>
 
 <template>
   <UiTable
     ref="tableRef"
-    :config="props.config"
+    :config="resolveConfig()"
     :data="props.data"
     :row-count="props.rowCount"
     @update:config="handleConfigUpdate"

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

@@ -1,7 +1,8 @@
+import { Effect } from 'effect';
 import type { TableConfigInput } from './ui/table/schema.js';
 export type { Accessor, Column, Expression, Markdown, Render, TableConfig, TableConfigInput } from './ui/table/schema.js';
 export type { TableInstance } from './ui/table/Table.vue.js';
-export { AccessorC, ColumnC, RenderC, TableConfigC } from './ui/table/schema.js';
+export { AccessorC, ColumnC, CURRENT_COMPATIBILITY_DATE, KIND, RenderC, SUPPORTED_COMPATIBILITY_DATES, TableBodyC, TableBodyInputC, TableConfigC, TableConfigInputC, createTableConfig, } from './ui/table/schema.js';
 declare module '@tanstack/vue-table' {
     interface ColumnMeta<TData extends import('@tanstack/vue-table').RowData, TValue> {
         tooltip?: string;
@@ -13,11 +14,13 @@ declare module '@tanstack/vue-table' {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    config?: TableConfigInput | import("effect").Effect.Effect<TableConfigInput | undefined>;
+    config?: TableConfigInput | Effect.Effect<TableConfigInput | undefined>;
     data: Array<unknown>;
     rowCount?: number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (args_0: Readonly<{
+        kind: string;
+        compatibilityDate: string;
         getRowId?: import("./table.vue.js").Expression;
         getSubRows?: import("./table.vue.js").Expression;
         enableRowSelection?: import("./table.vue.js").Expression;
@@ -74,11 +77,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         paginationPageSizes?: ReadonlyArray<number>;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    config?: TableConfigInput | import("effect").Effect.Effect<TableConfigInput | undefined>;
+    config?: TableConfigInput | Effect.Effect<TableConfigInput | undefined>;
     data: Array<unknown>;
     rowCount?: number;
 }> & Readonly<{
     "onUpdate:config"?: ((args_0: Readonly<{
+        kind: string;
+        compatibilityDate: string;
         getRowId?: import("./table.vue.js").Expression;
         getSubRows?: import("./table.vue.js").Expression;
         enableRowSelection?: import("./table.vue.js").Expression;

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;

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.d.vue.ts

@@ -24,6 +24,19 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 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 {
@@ -42,10 +55,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                     }[] | 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;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any;
@@ -67,6 +95,19 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 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,10 +126,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                     }[] | 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;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any) | undefined;