@shwfed/config 2.9.4 → 2.9.5

package/dist/runtime/components/actions/config.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed, inject, onBeforeUnmount, provide, ref, watch } from "vue";
 import { Icon } from "@iconify/vue";
+import { Effect } from "effect";
+import { toast } from "vue-sonner";
 import {
   ActionSchemaFields,
   ActionsConfig,
@@ -8,7 +10,8 @@ import {
   getStructFieldTitle
 } from "./schema";
 import { Environment } from "../../vendor/cel-js/lib/index";
-import { provideCELContext } from "../../utils/cel-context";
+import { cel as rawCel } from "../../utils/cel";
+import { celBindings, injectCELContext, provideCELContext } from "../../utils/cel-context";
 import { BUTTONS, findButton, ITEMS, findItem } from "./utils/resolve";
 import { SIDEBAR_TAKEOVER_KEY } from "../sidebar-takeover";
 import { BREADCRUMB_EXTENSION_KEY } from "../config/breadcrumb-extension";
@@ -18,6 +21,7 @@ import { Textarea } from "../ui/textarea";
 import { ExpressionEditor } from "../ui/expression-editor";
 import { Switch } from "../ui/switch";
 import { Separator } from "../ui/separator";
+import { Button } from "../ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Locale as LocaleField } from "../ui/locale";
 import { IconPicker } from "../ui/icon-picker";
@@ -303,6 +307,47 @@ function getButtonDeprecationNote(action) {
   if (!entry?.deprecated) return void 0;
   return entry.deprecationNote ?? "\u6B64\u6309\u94AE\u7C7B\u578B\u5DF2\u5F03\u7528\u3002";
 }
+const inheritedCEL = injectCELContext();
+function celForMigration(expression, context) {
+  return rawCel(expression, { ...celBindings(inheritedCEL), ...context });
+}
+const migrationContext = { $cel: celForMigration };
+function migrationTargetFor(action) {
+  const entry = findButton(action.type, action.compatibilityDate);
+  if (!entry?.deprecated || !entry.supersededBy) return null;
+  return findButton(entry.supersededBy.type, entry.supersededBy.compatibilityDate) ?? null;
+}
+function canMigrateAction(action) {
+  return !!migrationTargetFor(action)?.migrate;
+}
+async function runActionMigration(action, apply) {
+  const target = migrationTargetFor(action);
+  if (!target?.migrate) return;
+  try {
+    const next = await Effect.runPromise(target.migrate(action, migrationContext));
+    apply(next);
+    toast.success(
+      target.type === action.type ? `\u5DF2\u8FC1\u79FB\u5230 ${target.compatibilityDate} \u7248\u672C` : `\u5DF2\u8FC1\u79FB\u5230 ${target.type}@${target.compatibilityDate}`
+    );
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    toast.error("\u8FC1\u79FB\u5931\u8D25", { description: message });
+  }
+}
+function migrateSelectedActionItem() {
+  const it = selectedActionItem.value;
+  if (!it?.action) return;
+  void runActionMigration(it.action, (next) => patchSelectedActionItem((x) => {
+    x.action = next;
+  }));
+}
+function migrateSelectedSub() {
+  const sub = selectedSubRef.value;
+  if (!sub?.action) return;
+  void runActionMigration(sub.action, (next) => patchSelectedSub((s) => {
+    s.action = next;
+  }));
+}
 function patchSelectedGroup(mutate) {
   const sel = selected.value;
   if (sel?.kind !== "group") return;
@@ -1581,6 +1626,17 @@ const newGroupZoneId = (insertIndex) => `new-group-${insertIndex}`;
                     class="mt-px size-4 shrink-0"
                   />
                   <span class="flex-1">{{ getButtonDeprecationNote(selectedActionItem.action) }}</span>
+                  <Button
+                    v-if="canMigrateAction(selectedActionItem.action)"
+                    variant="ghost"
+                    size="sm"
+                    class="-my-1 text-amber-800 hover:bg-amber-100 hover:text-amber-900"
+                    data-slot="action-migrate"
+                    @click="migrateSelectedActionItem"
+                  >
+                    <Icon icon="fluent:arrow-sync-20-regular" />
+                    迁移
+                  </Button>
                 </div>
               </template>
 
@@ -1768,6 +1824,17 @@ const newGroupZoneId = (insertIndex) => `new-group-${insertIndex}`;
                     class="mt-px size-4 shrink-0"
                   />
                   <span class="flex-1">{{ getButtonDeprecationNote(selectedSubRef.action) }}</span>
+                  <Button
+                    v-if="canMigrateAction(selectedSubRef.action)"
+                    variant="ghost"
+                    size="sm"
+                    class="-my-1 text-amber-800 hover:bg-amber-100 hover:text-amber-900"
+                    data-slot="action-migrate"
+                    @click="migrateSelectedSub"
+                  >
+                    <Icon icon="fluent:arrow-sync-20-regular" />
+                    迁移
+                  </Button>
                 </div>
               </template>
 

package/dist/runtime/components/actions/utils/resolve.d.ts

@@ -7,6 +7,33 @@ import type { EventChannel, OperationDescriptor, TriggerValue } from '../../../s
 type CelEvaluator = <T>(expression: string, context?: Record<string, unknown>) => Effect.Effect<T, any>;
 type AnySchema = Schema.Schema<any, any, never>;
 type SchemaFactory = (configure: (env: Environment) => void) => AnySchema;
+/**
+ * Capabilities a button-migration function may need from the host. Mirrors the
+ * form / table hosts' `MigrationContext` so cross-host migrations share one
+ * signature; extend additively rather than introducing a parallel context.
+ */
+export type MigrationContext = Readonly<{
+    $cel: <T>(expression: string, context?: Record<string, unknown>) => Effect.Effect<T, unknown>;
+}>;
+/**
+ * Migrates a value of a *source* button schema to this entry's schema. Lives on
+ * the *target* (newer / replacement) entry. The target is picked by one of two
+ * rules: (a) same `type` with a strictly newer `compatibilityDate`; (b) an
+ * explicit `migrateFrom` declaration on the target naming this source. Failures
+ * surface to the host as a toast — see `actions/config.vue`'s migrate handler.
+ */
+export type MigrateFn = (prev: unknown, ctx: MigrationContext) => Effect.Effect<unknown, Error>;
+/**
+ * Identifies a button entry by `(type, compatibilityDate)`. Used for both
+ * `migrateFrom` declarations and the cross-type form of `supersededBy`.
+ *
+ * Migration declarations only ever live on the *new* (target) code — old
+ * folders are never modified to announce that they have been superseded.
+ */
+export type MigrateSource = Readonly<{
+    type: string;
+    compatibilityDate: string;
+}>;
 export type ButtonMetadata = Readonly<{
     name: string;
     icon: string;
@@ -21,12 +48,34 @@ export type ButtonEntry = Readonly<{
     schema: SchemaFactory;
     config: Component;
     runtime: Component;
-    /** True when this button type is deprecated — explicit flag or newer date. */
+    /** True when this button type is deprecated — explicit flag, newer date, or `migrateFrom`. */
     deprecated: boolean;
     /** Migration guidance shown in the inspector when `deprecated`. */
     deprecationNote?: string;
+    /**
+     * Identifies the entry that supersedes this one. Same `type` for the
+     * date-versioned rule; a different `type` for declared cross-type migrations.
+     * Absent for entries deprecated only via a free-text `metadata.deprecated`.
+     */
+    supersededBy?: MigrateSource;
+    /** Migration from a recognized source schema to this entry's schema. */
+    migrate?: MigrateFn;
+    /** Source schemas this entry accepts migration from. See module field. */
+    migrateFrom?: ReadonlyArray<MigrateSource>;
 }>;
 export declare const BUTTONS: ReadonlyArray<ButtonEntry>;
+/**
+ * Finds the entry that declared `(type, compatibilityDate)` as a `migrateFrom`
+ * source. Use when a stored button's identity no longer matches any registry
+ * entry (the old folder was removed) — a present return means the value is
+ * still migratable via the target's `migrate`.
+ *
+ * For sources whose folder was kept (the usual case — see "never delete a
+ * superseded block folder"), the entry itself is in `BUTTONS`, tagged
+ * `deprecated`/`supersededBy`; reach the target via
+ * `findButton(supersededBy.type, …)` instead.
+ */
+export declare function findMigrationTarget(type: string, compatibilityDate: string): ButtonEntry | undefined;
 export declare function allButtonSchemas(configure: (env: Environment) => void): ReadonlyArray<AnySchema>;
 export declare function findButton(type: string, compatibilityDate: string): ButtonEntry | undefined;
 export type ItemMetadata = Readonly<{
@@ -44,7 +93,7 @@ export type ItemEntry = Readonly<{
 export declare const ITEMS: ReadonlyArray<ItemEntry>;
 export declare function allItemSchemas(configure: (env: Environment) => void): ReadonlyArray<AnySchema>;
 export declare function findItem(type: string, compatibilityDate: string): ItemEntry | undefined;
-export declare function interpolateMarkdown(source: string, $cel: CelEvaluator): string;
+export declare function interpolateMarkdown(source: string, $cel: CelEvaluator, context?: Record<string, unknown>): string;
 type ToastStyle = 'success' | 'error' | 'warning' | 'info';
 /**
  * Post-completion behaviour shared by the HTTP-request buttons. Once the
@@ -63,4 +112,38 @@ export type HttpRequestOutcome = {
     triggers?: Partial<Record<ToastStyle, ReadonlyArray<TriggerValue>>>;
 };
 export declare function executeHttpRequest(expression: string, $cel: CelEvaluator, outcome?: HttpRequestOutcome): Effect.Effect<unknown, any, Fetch.Fetch>;
+/**
+ * Batch sibling of {@link executeHttpRequest}. The expression evaluates to a
+ * list of `HttpRequestBuilder`s, sent strictly one-by-one behind a live
+ * progress dialog. Each response is judged individually:
+ *
+ *   - `resultExpression` (per response) is evaluated against that one response
+ *     body `json`, returning a `bool` — `true` means the response succeeded.
+ *     Absent ⇒ any non-erroring response counts as a success.
+ *   - `continueOnError` — when false (default) the first failure (a transport
+ *     error or a `resultExpression` that returned false) stops the batch. When
+ *     true, the loop carries on past failures.
+ *
+ * The dialog always shows a Stop button; the loop polls `handle.isCancelled`
+ * between requests and stops the remaining ones (already-sent requests stand).
+ *
+ * The dialog never closes on its own — `handle.finish` flips it to a closeable
+ * state and the user dismisses it. The post-completion `messageExpression` (if
+ * any) is evaluated once against `jsons` — the list of **succeeded** response
+ * bodies — and shown as a toast, styled `success` when nothing failed and
+ * `error` otherwise.
+ *
+ * `markdown`, if given, is the dialog body: localized markdown re-interpolated
+ * after every request against the live counters `total` / `succeeded` /
+ * `failure`, so the message tracks progress.
+ */
+export type HttpRequestBatchOutcome = {
+    /** Toast message expression, evaluated once against `jsons`. No toast when absent. */
+    messageExpression?: string;
+    /** Per-response success predicate, evaluated against `json`. Absent ⇒ always succeeds. */
+    resultExpression?: string;
+    continueOnError?: boolean;
+    markdown?: string;
+};
+export declare function executeHttpRequestBatch(expression: string, $cel: CelEvaluator, outcome?: HttpRequestBatchOutcome): Effect.Effect<unknown, any, Fetch.Fetch>;
 export {};

package/dist/runtime/components/actions/utils/resolve.js

@@ -1,8 +1,10 @@
 import { defineAsyncComponent } from "vue";
-import { Effect } from "effect";
+import { Effect, Either } from "effect";
 import { toast } from "vue-sonner";
+import { useOverlay } from "../../../composables/useOverlay.js";
 import { defineRegistry } from "../../../share/define-registry.js";
 import { dispatchTriggers } from "../../../share/event-bus.js";
+const sourceKey = (type, compatibilityDate) => `${type}@${compatibilityDate}`;
 const schemaModules = import.meta.glob(
   "../buttons/*/*/schema.{ts,js}",
   { eager: true, exhaustive: true }
@@ -33,23 +35,55 @@ const registry = defineRegistry({
   schemaModules,
   configModules,
   runtimeModules,
-  // A button is deprecated when its schema declares `metadata.deprecated`
-  // (an explicit, possibly cross-type replacement note), or when a newer
-  // `compatibilityDate` of the same `type` exists (the date-versioned rule
-  // shared with form). Either way the inspector shows the migration hint.
+  // A button is deprecated by one of three rules, in precedence order:
+  //   (1) another entry declares this one in its `migrateFrom` — explicit
+  //       cross-type supersession with a structured `supersededBy` target the
+  //       inspector can offer a one-click 「迁移」 against;
+  //   (2) its schema declares a free-text `metadata.deprecated` note — the
+  //       escape hatch for a replacement with no structured migrate target;
+  //   (3) a newer `compatibilityDate` of the same `type` exists — the
+  //       date-versioned rule shared with form / table.
+  // `migrateFrom` wins over the date rule: a kept-around stub of an old type
+  // points at exactly which target it migrates to, so trust it over the
+  // implicit "any older same-type date is the same component upgraded" guess.
   deriveEntryExtras: (drafts) => {
     const latestByType = /* @__PURE__ */ new Map();
     for (const d of drafts) {
       const prev = latestByType.get(d.type);
       if (!prev || d.compatibilityDate > prev) latestByType.set(d.type, d.compatibilityDate);
     }
+    const migrationTargets = /* @__PURE__ */ new Map();
+    for (const d of drafts) {
+      const sources = d.module.migrateFrom;
+      if (!sources || sources.length === 0) continue;
+      for (const src of sources) {
+        const key = sourceKey(src.type, src.compatibilityDate);
+        const existing = migrationTargets.get(key);
+        if (existing) {
+          throw new Error(
+            `[shwfed-actions] migrateFrom collision: source "${key}" is claimed by both "${sourceKey(existing.type, existing.compatibilityDate)}" and "${sourceKey(d.type, d.compatibilityDate)}"`
+          );
+        }
+        migrationTargets.set(key, { type: d.type, compatibilityDate: d.compatibilityDate });
+      }
+    }
     return (draft) => {
+      const declared = migrationTargets.get(sourceKey(draft.type, draft.compatibilityDate));
+      if (declared) {
+        return {
+          deprecated: true,
+          supersededBy: declared,
+          deprecationNote: declared.type === draft.type ? `\u5DF2\u88AB\u66F4\u65B0\u7248\u672C ${declared.compatibilityDate} \u53D6\u4EE3\u3002` : `\u5DF2\u88AB ${declared.type}@${declared.compatibilityDate} \u53D6\u4EE3\u3002`
+        };
+      }
       const note = draft.module.metadata.deprecated;
       if (note) return { deprecated: true, deprecationNote: note };
-      if (draft.compatibilityDate < latestByType.get(draft.type)) {
+      const latest = latestByType.get(draft.type);
+      if (draft.compatibilityDate < latest) {
         return {
           deprecated: true,
-          deprecationNote: `\u5DF2\u88AB\u66F4\u65B0\u7248\u672C ${latestByType.get(draft.type)} \u53D6\u4EE3\u3002`
+          supersededBy: { type: draft.type, compatibilityDate: latest },
+          deprecationNote: `\u5DF2\u88AB\u66F4\u65B0\u7248\u672C ${latest} \u53D6\u4EE3\u3002`
         };
       }
       return { deprecated: false };
@@ -64,8 +98,32 @@ export const BUTTONS = registry.ENTRIES.map((e) => ({
   config: e.config,
   runtime: e.runtime,
   deprecated: e.deprecated,
-  ...e.deprecationNote !== void 0 ? { deprecationNote: e.deprecationNote } : {}
+  ...e.deprecationNote !== void 0 ? { deprecationNote: e.deprecationNote } : {},
+  ...e.supersededBy !== void 0 ? { supersededBy: e.supersededBy } : {},
+  migrate: e.module.migrate,
+  ...e.module.migrateFrom !== void 0 ? { migrateFrom: e.module.migrateFrom } : {}
 }));
+let _migrationTargets = null;
+function getMigrationTargets() {
+  if (_migrationTargets) return _migrationTargets;
+  const map = /* @__PURE__ */ new Map();
+  for (const entry of BUTTONS) {
+    if (!entry.migrateFrom) continue;
+    for (const src of entry.migrateFrom) {
+      map.set(sourceKey(src.type, src.compatibilityDate), {
+        type: entry.type,
+        compatibilityDate: entry.compatibilityDate
+      });
+    }
+  }
+  _migrationTargets = map;
+  return map;
+}
+export function findMigrationTarget(type, compatibilityDate) {
+  const target = getMigrationTargets().get(sourceKey(type, compatibilityDate));
+  if (!target) return void 0;
+  return findButton(target.type, target.compatibilityDate);
+}
 export function allButtonSchemas(configure) {
   return BUTTONS.map((entry) => entry.schema(configure).annotations({
     identifier: `${entry.type}@${entry.compatibilityDate}`
@@ -122,12 +180,12 @@ export function findItem(type, compatibilityDate) {
   return ITEMS.find((i) => i.type === type && i.compatibilityDate === compatibilityDate);
 }
 const INTERPOLATION_RE = /\{\{(.*?)\}\}/gs;
-export function interpolateMarkdown(source, $cel) {
+export function interpolateMarkdown(source, $cel, context) {
   return source.replace(INTERPOLATION_RE, (_, expr) => {
     const trimmed = expr.trim();
     if (trimmed.length === 0) return "{{ }}";
     try {
-      return stringifyCelResult(Effect.runSync($cel(trimmed)));
+      return stringifyCelResult(Effect.runSync($cel(trimmed, context)));
     } catch {
       return `{{${expr}}}`;
     }
@@ -139,21 +197,64 @@ function stringifyCelResult(value) {
   return String(value);
 }
 const TOAST_STYLES = /* @__PURE__ */ new Set(["success", "error", "warning", "info"]);
-export function executeHttpRequest(expression, $cel, outcome = {}) {
+function classifyAndDispatch($cel, context, outcome) {
   const { messageExpression, resultExpression, channel, triggers } = outcome;
+  const result = resultExpression === void 0 ? Effect.succeed("success") : Effect.map($cel(resultExpression, context), (s) => TOAST_STYLES.has(s) ? s : "success");
+  return Effect.flatMap(result, (kind) => {
+    const toasted = messageExpression === void 0 ? Effect.void : Effect.flatMap(
+      $cel(messageExpression, context),
+      (message) => Effect.sync(() => toast[kind](message))
+    );
+    return Effect.andThen(toasted, dispatchTriggers(channel, triggers?.[kind]));
+  });
+}
+export function executeHttpRequest(expression, $cel, outcome = {}) {
   const request = Effect.flatMap(
     $cel(expression),
     (builder) => builder.json()
   );
-  return Effect.flatMap(request, (body) => {
-    const context = { json: body };
-    const result = resultExpression === void 0 ? Effect.succeed("success") : Effect.map($cel(resultExpression, context), (s) => TOAST_STYLES.has(s) ? s : "success");
-    return Effect.flatMap(result, (kind) => {
-      const toasted = messageExpression === void 0 ? Effect.void : Effect.flatMap(
-        $cel(messageExpression, context),
-        (message) => Effect.sync(() => toast[kind](message))
-      );
-      return Effect.andThen(toasted, dispatchTriggers(channel, triggers?.[kind]));
-    });
+  return Effect.flatMap(request, (body) => classifyAndDispatch($cel, { json: body }, outcome));
+}
+export function executeHttpRequestBatch(expression, $cel, outcome = {}) {
+  const { continueOnError = false, markdown, messageExpression, resultExpression } = outcome;
+  return Effect.gen(function* () {
+    const builders = yield* $cel(expression);
+    const total = builders.length;
+    let succeeded = 0;
+    let failure = 0;
+    const hasMarkdown = markdown !== void 0 && markdown.length > 0;
+    const render = () => hasMarkdown ? interpolateMarkdown(markdown, $cel, { total, succeeded, failure }) : "";
+    const handle = yield* useOverlay().openProgress({ total, cancellable: true, content: render() });
+    const jsons = [];
+    yield* Effect.ensuring(
+      Effect.gen(function* () {
+        for (const builder of builders) {
+          if (yield* handle.isCancelled) break;
+          const response = yield* Effect.either(builder.json());
+          let ok = false;
+          if (Either.isRight(response)) {
+            const json = response.right;
+            ok = resultExpression === void 0 ? true : yield* $cel(resultExpression, { json });
+            if (ok) {
+              jsons.push(json);
+              succeeded += 1;
+            } else {
+              failure += 1;
+            }
+          } else {
+            failure += 1;
+          }
+          if (!ok) yield* handle.markFailed;
+          yield* handle.advance;
+          if (hasMarkdown) yield* handle.setContent(render());
+          if (!ok && !continueOnError) break;
+        }
+      }),
+      handle.finish
+    );
+    if (messageExpression !== void 0) {
+      const message = yield* $cel(messageExpression, { jsons });
+      yield* Effect.sync(() => toast[failure === 0 ? "success" : "error"](message));
+    }
   });
 }

package/dist/runtime/components/app.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, defineComponent } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { Effect } from "effect";
 import { Icon } from "@iconify/vue";
 import { ConfigProvider, TooltipProvider } from "reka-ui";
@@ -16,19 +17,27 @@ import {
   AlertDialogHeader,
   AlertDialogTitle
 } from "./ui/alert-dialog";
+import { Button } from "./ui/button";
 import { Markdown } from "./ui/markdown";
+import { Progress } from "./ui/progress";
 import { useOverlay } from "../composables/useOverlay";
 import { useHead } from "#app";
 defineOptions({
   name: "ShwfedApp"
 });
 const overlay = useOverlay();
+useEventListener("beforeunload", (event) => {
+  if (overlay.progress.some((p) => !p.finished)) {
+    event.preventDefault();
+    event.returnValue = "";
+  }
+});
 const { t } = useI18n({
   messages: {
-    zh: { cancel: "\u53D6\u6D88", confirm: "\u786E\u8BA4" },
-    en: { cancel: "Cancel", confirm: "Confirm" },
-    ja: { cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB", confirm: "\u78BA\u8A8D" },
-    ko: { cancel: "\uCDE8\uC18C", confirm: "\uD655\uC778" }
+    zh: { cancel: "\u53D6\u6D88", confirm: "\u786E\u8BA4", stop: "\u505C\u6B62", close: "\u5173\u95ED", processing: "\u5904\u7406\u4E2D\u2026" },
+    en: { cancel: "Cancel", confirm: "Confirm", stop: "Stop", close: "Close", processing: "Processing\u2026" },
+    ja: { cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB", confirm: "\u78BA\u8A8D", stop: "\u505C\u6B62", close: "\u9589\u3058\u308B", processing: "\u51E6\u7406\u4E2D\u2026" },
+    ko: { cancel: "\uCDE8\uC18C", confirm: "\uD655\uC778", stop: "\uC911\uC9C0", close: "\uB2EB\uAE30", processing: "\uCC98\uB9AC \uC911\u2026" }
   }
 });
 const OverlayBody = defineComponent({
@@ -196,6 +205,52 @@ useHead({
             </AlertDialogContent>
           </AlertDialog>
         </template>
+
+        <template
+          v-for="p in overlay.progress"
+          :key="p.progressId"
+        >
+          <AlertDialog :open="p.open">
+            <AlertDialogContent class="sm:px-12 sm:py-8 flex flex-col gap-6">
+              <AlertDialogHeader class="sr-only">
+                <AlertDialogTitle>{{ t("processing") }}</AlertDialogTitle>
+                <AlertDialogDescription>Progress dialog</AlertDialogDescription>
+              </AlertDialogHeader>
+              <Markdown
+                v-if="p.content"
+                :source="p.content"
+                block
+                class="prose prose-zinc text-sm text-center text-zinc-700"
+              />
+              <Progress
+                :model-value="p.total ? p.done / p.total * 100 : 0"
+                :indicator-class="p.failed ? 'bg-red-500' : void 0"
+              />
+              <AlertDialogFooter v-if="p.finished || p.cancellable">
+                <Button
+                  v-if="p.finished"
+                  variant="default"
+                  @click="overlay.closeProgress(p.progressId)"
+                >
+                  <Icon icon="fluent:dismiss-20-regular" />
+                  {{ t("close") }}
+                </Button>
+                <Button
+                  v-else
+                  variant="default"
+                  :disabled="p.cancelled"
+                  @click="overlay.cancelProgress(p.progressId)"
+                >
+                  <Icon
+                    :icon="p.cancelled ? 'fluent:spinner-ios-20-regular' : 'fluent:stop-20-regular'"
+                    :class="p.cancelled ? 'animate-spin' : ''"
+                  />
+                  {{ t("stop") }}
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </template>
       </ClientOnly>
     </TooltipProvider>
   </ConfigProvider>

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.table/config.d.vue.ts

@@ -65,8 +65,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";
@@ -246,8 +246,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.table/config.vue.d.ts

@@ -65,8 +65,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";
@@ -246,8 +246,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.table/runtime.d.vue.ts

@@ -60,8 +60,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";
@@ -241,8 +241,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.table/runtime.vue.d.ts

@@ -60,8 +60,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";
@@ -241,8 +241,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             } | undefined;
             readonly dataSource?: {
                 readonly data: string;
-                readonly request?: string | undefined;
                 readonly total?: string | undefined;
+                readonly request?: string | undefined;
             } | undefined;
             readonly actions?: {
                 readonly size: "default" | "sm" | "xs";

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.table/schema.d.ts

@@ -75,8 +75,8 @@ export declare function schema(configure: (env: Environment) => void, _blockRef:
         } | undefined;
         readonly dataSource?: {
             readonly data: string;
-            readonly request?: string | undefined;
             readonly total?: string | undefined;
+            readonly request?: string | undefined;
         } | undefined;
         readonly actions?: {
             readonly size: "default" | "sm" | "xs";

package/dist/runtime/components/config/index.vue

@@ -13,6 +13,8 @@ import EditorBody from "./config.vue";
 import EditorBreadcrumb from "./breadcrumb.vue";
 import EditorFooter from "./footer.vue";
 import { provideEventTarget } from "../../share/event-bus";
+import { operationHandlers } from "../operations/utils/resolve";
+import * as alertOperation from "../operations/2026-06-09/com.shwfed.operation.alert/schema";
 import { PAGE_TARGET_ID, createPageConfig } from "./schema";
 import { useConfigEditor } from "./use-editor";
 import { findBlock } from "./utils/resolve";
@@ -42,11 +44,17 @@ const mergedConfigure = (env) => {
 class PageClosed {
   _tag = "PageClosed";
 }
+const { locale } = useI18n({ useScope: "global", inheritLocale: true });
+const $cel = (expression, context) => cel(expression, { ...celBindings(inheritedCEL), ...context });
 provideEventTarget(PAGE_TARGET_ID, {
   close: () => Effect.gen(function* () {
     window.close();
     return yield* Effect.die(new PageClosed());
-  })
+  }),
+  ...operationHandlers(
+    [{ type: alertOperation.type, compatibilityDate: alertOperation.compatibilityDate }],
+    { cel: $cel, locale: () => locale.value }
+  )
 });
 const editorOpen = ref(false);
 const editorState = useConfigEditor(config, {
@@ -81,7 +89,6 @@ const pageStyle = computed(() => {
     return void 0;
   }
 });
-const { locale } = useI18n({ useScope: "global", inheritLocale: true });
 useHead(() => {
   const title = getLocalizedText(config.value.title, locale.value);
   return title ? { title } : {};