@antelopejs/dms 0.9.8 → 0.10.0

package/frontend-vue/layers/dms-layout/app/build/utils/modules-catalog.ts

@@ -1,9 +1,30 @@
 import type {
   ModuleCatalogEntry,
   ModuleStatus,
+  ModuleWithAccess,
   PageInfo,
   SiteLayout,
+  SiteLayoutTree,
 } from "../../types/page";
+import { resolveModuleLandingSlug } from "../../utils/moduleLanding";
+
+/** The Modules page, which lists and manages the installed modules. */
+export const MODULES_PAGE_PATH = "/modules";
+/** The module store, its own view under the Modules page. */
+export const MODULE_STORE_PATH = `${MODULES_PAGE_PATH}/store`;
+
+/**
+ * The grid of both module views, installed and store: three columns on a
+ * laptop, so a tile's description, readout and footer line have room. The
+ * min() keeps one column from overflowing a phone.
+ */
+export const MODULE_TILE_GRID_CLASS =
+  "grid grid-cols-[repeat(auto-fill,minmax(min(340px,100%),1fr))] gap-4";
+
+/** Where an installed module's tile is, the one that manages it. */
+export function installedModuleLink(moduleId: string): string {
+  return `${MODULES_PAGE_PATH}#module-${moduleId}`;
+}
 
 /** Category of the modules that declare none. */
 export const MODULE_CATEGORY_OTHER = "$modules.category_other";
@@ -12,6 +33,18 @@ export const MODULE_CATEGORY_ALL = "";
 
 export type ModuleSortMode = "recent" | "name";
 
+/** The order the installed modules open in until the user picks another. */
+export const DEFAULT_MODULE_SORT_MODE: ModuleSortMode = "name";
+
+const MODULE_SORT_MODES: readonly ModuleSortMode[] = ["name", "recent"];
+
+/** A remembered sort mode, or the default when it is missing or unknown. */
+export function parseModuleSortMode(value: unknown): ModuleSortMode {
+  return (
+    MODULE_SORT_MODES.find((mode) => mode === value) ?? DEFAULT_MODULE_SORT_MODE
+  );
+}
+
 /** Turns a display string (possibly a `$i18n.key`) into the shown text. */
 export type DisplayResolver = (value: string) => string;
 
@@ -78,23 +111,28 @@ export function summarizeModules(
 /**
  * Category filter options: the categories present, alphabetical, with
  * "Other" last. The "All" option is the caller's to add.
+ *
+ * Categories are told apart by their shown name: two modules that each name
+ * "Content" through their own i18n key share one option, whose value is the
+ * first key met.
  */
 export function moduleCategoryOptions(
   entries: readonly FilterableModule[],
   resolve: DisplayResolver,
 ): ModuleCategoryOption[] {
-  const counts = new Map<string, number>();
+  const byLabel = new Map<string, ModuleCategoryOption>();
   for (const entry of entries) {
-    const category = moduleCategory(entry);
-    counts.set(category, (counts.get(category) ?? 0) + 1);
+    const value = moduleCategory(entry);
+    const label = resolve(value);
+    const option = byLabel.get(label);
+    if (option) option.count += 1;
+    else byLabel.set(label, { value, label, count: 1 });
   }
-  return [...counts.entries()]
-    .map(([value, count]) => ({ value, label: resolve(value), count }))
-    .sort((a, b) => {
-      if (a.value === MODULE_CATEGORY_OTHER) return 1;
-      if (b.value === MODULE_CATEGORY_OTHER) return -1;
-      return a.label.localeCompare(b.label);
-    });
+  return [...byLabel.values()].sort((a, b) => {
+    if (a.value === MODULE_CATEGORY_OTHER) return 1;
+    if (b.value === MODULE_CATEGORY_OTHER) return -1;
+    return a.label.localeCompare(b.label);
+  });
 }
 
 function normalizeQuery(query: string): string {
@@ -106,10 +144,14 @@ export function filterModules<T extends FilterableModule>(
   options: { query: string; category: string; resolve: DisplayResolver },
 ): T[] {
   const query = normalizeQuery(options.query);
+  const category =
+    options.category === MODULE_CATEGORY_ALL
+      ? undefined
+      : options.resolve(options.category);
   return entries.filter((entry) => {
     if (
-      options.category !== MODULE_CATEGORY_ALL &&
-      moduleCategory(entry) !== options.category
+      category !== undefined &&
+      options.resolve(moduleCategory(entry)) !== category
     ) {
       return false;
     }
@@ -126,18 +168,36 @@ export function filterModules<T extends FilterableModule>(
   });
 }
 
+/**
+ * Compares shown names as `locale` orders them: accents and case only break
+ * ties ("Mailing", "Marketing", "Médiathèque"), and digits read as numbers.
+ * An unknown locale falls back to the runtime's own.
+ */
+export function compareDisplayNames(
+  locale?: string,
+): (a: string, b: string) => number {
+  const options: Intl.CollatorOptions = { numeric: true };
+  try {
+    return new Intl.Collator(locale, options).compare;
+  } catch {
+    return new Intl.Collator(undefined, options).compare;
+  }
+}
+
 /**
  * `recent`: most recently opened first, never-opened modules after them by
- * name. `name`: alphabetical.
+ * name. `name`: alphabetical by shown name, in `locale`'s order.
  */
 export function sortModules(
   entries: readonly ModuleCatalogEntry[],
   mode: ModuleSortMode,
   visitedAt: ReadonlyMap<string, number>,
   resolve: DisplayResolver,
+  locale?: string,
 ): ModuleCatalogEntry[] {
+  const compare = compareDisplayNames(locale);
   const byName = (a: ModuleCatalogEntry, b: ModuleCatalogEntry) =>
-    resolve(a.title).localeCompare(resolve(b.title));
+    compare(resolve(a.title), resolve(b.title));
   return [...entries].sort((a, b) => {
     if (mode === "recent") {
       const delta = (visitedAt.get(b.id) ?? -1) - (visitedAt.get(a.id) ?? -1);
@@ -197,3 +257,51 @@ export function findModulePageMatch(
   }
   return null;
 }
+
+/** A visited module as the command palette's recent modules list it. */
+export interface RecentModule {
+  moduleId: string;
+  /** Display name, possibly a `$i18n.key`. */
+  title: string;
+  icon: string;
+  /** The module's landing page, never the page it was left on. */
+  to: string;
+}
+
+/** A visit of the module history, oldest first as it keeps them. */
+export interface ModuleVisit {
+  moduleId: string;
+}
+
+/**
+ * The visited modules the caller may still open, most recent first, each
+ * leading to its landing page: every way into a module lands there. A module
+ * with no page the caller may open is left out.
+ */
+export function recentModules(
+  visits: readonly ModuleVisit[],
+  modules: Readonly<Record<string, ModuleWithAccess>> | undefined,
+  tree: SiteLayoutTree | undefined,
+): RecentModule[] {
+  return visits
+    .slice()
+    .reverse()
+    .flatMap((visit) => {
+      const module = modules?.[visit.moduleId];
+      if (!module?.hasAccess) return [];
+      const to = resolveModuleLandingSlug(
+        tree,
+        visit.moduleId,
+        module.landingPage,
+      );
+      if (!to) return [];
+      return [
+        {
+          moduleId: visit.moduleId,
+          title: module.title,
+          icon: module.icon,
+          to,
+        },
+      ];
+    });
+}

package/frontend-vue/layers/dms-layout/app/composables/layout/useLayoutBanners.ts

@@ -27,11 +27,37 @@ export const resolveLayoutBannerPresentation = (
   return { ...presentation, icon: banner.icon ?? presentation.icon };
 };
 
+/**
+ * Whether a path is in the module area: the modules page, the module store
+ * and every module's own pages, all under `MODULE_URL_PREFIX`.
+ */
+export const isModuleAreaPath = (path: string): boolean =>
+  path === MODULE_URL_PREFIX || path.startsWith(`${MODULE_URL_PREFIX}/`);
+
+const SCOPE_MATCHERS: Record<
+  LayoutBannerScope,
+  (isModuleArea: boolean) => boolean
+> = {
+  app: (isModuleArea) => !isModuleArea,
+  modules: (isModuleArea) => isModuleArea,
+  everywhere: () => true,
+};
+
+/** Whether a banner's scope, as the backend serves it, covers a page. */
+export const isLayoutBannerInScope = (
+  banner: LayoutBanner,
+  path: string,
+): boolean => SCOPE_MATCHERS[banner.scope](isModuleAreaPath(path));
+
 /**
  * The global banners rendered under the dashboard header, as resolved by the
  * server for this request (see `RegisterLayoutBanner` in
- * `@antelopejs/interface-dms/layout-banners`), minus the ones the user
- * dismissed.
+ * `@antelopejs/interface-dms/layout-banners`), keeping the ones whose scope
+ * covers the current route, minus the ones the user dismissed.
+ *
+ * The site layout is shared by every page, so the scope is applied here
+ * against the route: on the server-rendered page and again on each
+ * client-side navigation, without re-fetching the layout.
  *
  * Dismissals are kept in a session cookie rather than in local storage so the
  * server-rendered page already leaves a dismissed banner out, instead of
@@ -39,6 +65,7 @@ export const resolveLayoutBannerPresentation = (
  */
 export const useLayoutBanners = () => {
   const { siteLayout } = useSiteLayout();
+  const route = useDmsRoute();
   const dismissed = useDmsCookie<string[]>(DISMISSED_BANNERS_COOKIE, {
     default: () => [],
     sameSite: "lax",
@@ -46,7 +73,9 @@ export const useLayoutBanners = () => {
 
   const banners = computed<LayoutBanner[]>(() =>
     (siteLayout.value?.banners ?? []).filter(
-      (banner) => !banner.dismissible || !dismissed.value.includes(banner.key),
+      (banner) =>
+        isLayoutBannerInScope(banner, route.path) &&
+        (!banner.dismissible || !dismissed.value.includes(banner.key)),
     ),
   );
 

package/frontend-vue/layers/dms-layout/app/composables/layout/usePageRecord.ts

@@ -0,0 +1,50 @@
+import { computed, type ComputedRef } from "vue";
+import { resolveUrlVariables } from "#dms-ui/app/build/utils/urlVariables";
+import type { PageRecord } from "../../utils/pageRecord";
+
+/** The record a page shows, as the layout declares it (`record`). */
+export interface PageRecordSource {
+  /** `{{params.X}}` and `{{query.X}}` are filled in from the page URL. */
+  fetchUrl: string;
+}
+
+/**
+ * The record the page shows, for the header buttons acting on it: loading
+ * until it answers, missing when it does not, or when its URL names a value
+ * the page does not carry. Undefined for a page declaring no record.
+ *
+ * It is read through `useApiData`, keyed on its URL like a block's
+ * `fetchUrl`: a block of the page reading the same URL shares the one
+ * request, and a server render hands the record to the browser with the page.
+ */
+export function usePageRecord(
+  source: () => PageRecordSource | undefined,
+): ComputedRef<PageRecord | undefined> {
+  const route = useDmsRoute();
+  const siteLayout = useSiteLayout();
+
+  // Null while the URL names a value the page does not carry.
+  const url = computed(() => {
+    const declared = source();
+    if (!declared) return undefined;
+    return (
+      resolveUrlVariables(declared.fetchUrl, {
+        routeParams: siteLayout.findMatchingRoute(route.path)?.params,
+        routeQuery: route.query as Record<string, unknown>,
+      }) ?? null
+    );
+  });
+  // The options a block's read takes (`useChartFetch`): a block never holds
+  // a navigation, and neither does the header.
+  const { data, error } = useApiData<Record<string, unknown>>(
+    () => url.value ?? null,
+    { lazy: true },
+  );
+
+  return computed<PageRecord | undefined>(() => {
+    if (url.value === undefined) return undefined;
+    if (url.value === null || error.value) return { status: "missing" };
+    if (data.value) return { status: "loaded", values: data.value };
+    return { status: "loading" };
+  });
+}

package/frontend-vue/layers/dms-layout/app/composables/layout/useServedHeaderActions.ts

@@ -3,6 +3,8 @@ import type { LayoutHeaderAction } from "../../build/components/layout/PageHeade
 import type { PageLayout } from "../../types/page";
 import {
   isSamePageQuery,
+  isSameRouteParams,
+  fillRouteParams,
   layoutUrlWithQuery,
   pageQueryValues,
 } from "../../utils/pageQuery";
@@ -15,6 +17,8 @@ interface ServedHeaderActionsOptions {
    * declares an `availability` (`headerActionsQuery`).
    */
   servedQuery: () => Record<string, string> | undefined;
+  /** The route parameters (`:id`) their availability was resolved for. */
+  servedParams?: () => Record<string, string> | undefined;
 }
 
 /**
@@ -22,20 +26,22 @@ interface ServedHeaderActionsOptions {
  * `availability` depends on the query (`?workspace=` names the record the
  * page acts on) was resolved for the query the layout was loaded with: when
  * the URL's query moves away from it, the header asks the page layout again
- * for that query and takes its buttons, keeping the last ones meanwhile.
+ * for that query and takes its buttons, keeping the last ones meanwhile. The
+ * same goes for the route parameters: the layout of `/projects/project/:id`
+ * is cached once for the page, whichever record it was first served for.
  * Buttons without an availability never cause a request.
  */
 export function useServedHeaderActions({
   actions,
   servedQuery,
+  servedParams = () => undefined,
 }: ServedHeaderActionsOptions): ComputedRef<LayoutHeaderAction[]> {
   const route = useDmsRoute();
   const siteLayout = useSiteLayout();
   const refreshed = shallowRef<LayoutHeaderAction[] | null>(null);
   let latestRequest = 0;
 
-  const layoutUrl = () =>
-    siteLayout.findMatchingRoute(route.path)?.metadata?.layoutUrl;
+  const pageRoute = () => siteLayout.findMatchingRoute(route.path);
 
   async function askFor(url: string, query: Record<string, string>) {
     const request = ++latestRequest;
@@ -58,17 +64,29 @@ export function useServedHeaderActions({
   function follow() {
     const served = servedQuery();
     const current = pageQueryValues(route.query as Record<string, unknown>);
-    const url = layoutUrl();
-    if (!served || !url || isSamePageQuery(served, current)) {
+    const match = pageRoute();
+    const layoutUrl = match?.metadata?.layoutUrl;
+    const params = match?.params ?? {};
+    const paramsServed = servedParams();
+    if (
+      !served ||
+      !layoutUrl ||
+      (isSamePageQuery(served, current) &&
+        (!paramsServed || isSameRouteParams(paramsServed, params)))
+    ) {
       latestRequest++;
       refreshed.value = null;
       return;
     }
-    void askFor(url, current);
+    void askFor(fillRouteParams(layoutUrl, params), current);
   }
 
   if (!import.meta.env.SSR) {
-    watch([() => route.query, servedQuery], follow, { immediate: true });
+    watch(
+      [() => route.query, () => route.path, servedQuery, servedParams],
+      follow,
+      { immediate: true },
+    );
   }
 
   return computed(() => refreshed.value ?? actions());

package/frontend-vue/layers/dms-layout/app/composables/page/useModuleHistory.ts

@@ -44,8 +44,9 @@ function normalizeHistory(raw: unknown): StoredHistory {
 
 /**
  * Last page visited in each module, kept in a cookie so it survives reloads
- * and the server renders the same catalog links and "recently used" order as
- * the browser.
+ * and the server renders the same "recently used" order as the browser. It
+ * feeds that order and the command palette's recent modules; it never decides
+ * where entering a module lands, which is always the module's landing page.
  */
 export const useModuleHistory = (): ModuleHistoryApi => {
   const cookie = useDmsCookie<StoredHistory>(MODULE_HISTORY_COOKIE, {

package/frontend-vue/layers/dms-layout/app/composables/page/useModuleStore.ts

@@ -16,13 +16,35 @@ const FOLLOW_INTERVAL_MS = 1000;
  * follow-up that reads the listing again while something moves. An operation
  * the owner started here reloads the page once the frontend serves its
  * result, so a new module's pages appear without a manual refresh.
+ *
+ * The first read comes with the page (`useApiData`): a server render waits
+ * for it and hands it over, so the tiles render with their store details and
+ * never move once mounted.
  */
 export const useModuleStore = () => {
   // Taken once, in setup: the follow-up reads the listing from a timer,
   // outside any component context.
   const { $authFetch } = useAuthFetch();
-  const listing = ref<StoreListing | undefined>(undefined);
-  const loadingError = ref<unknown>(null);
+  const isOwner = useIsOwner();
+  // Platform owners only: a member's read would be refused.
+  const initial = useApiData<StoreListing>(() =>
+    isOwner.value ? ENDPOINT_STORE_LISTING : null,
+  );
+  // The follow-up reads write into the same data, so a later visit shows
+  // the latest listing at once.
+  const listing = computed<StoreListing | undefined>({
+    get: () => initial.data.value ?? undefined,
+    set: (value) => {
+      initial.data.value = value ?? null;
+    },
+  });
+  /** The last follow-up read's failure; `null` once one succeeds. */
+  const followError = ref<unknown>(undefined);
+  const loadingError = computed<unknown>(() =>
+    followError.value === undefined
+      ? (initial.error.value ?? null)
+      : followError.value,
+  );
   /** Modules an operation from this page changed, until the frontend follows. */
   const awaitingReload = ref(new Set<string>());
   let followTimer: ReturnType<typeof setTimeout> | undefined;
@@ -38,9 +60,32 @@ export const useModuleStore = () => {
   async function load(): Promise<void> {
     try {
       listing.value = await $authFetch<StoreListing>(ENDPOINT_STORE_LISTING);
-      loadingError.value = null;
+      followError.value = null;
     } catch (error) {
-      loadingError.value = error;
+      followError.value = error;
+    }
+    reloadWhenServed();
+    scheduleFollow();
+  }
+
+  let isStopped = false;
+
+  /**
+   * Starts following once mounted: reads again only when the first read
+   * failed, or something moves; a listing already on screen stays as is.
+   * A first read still in flight (a client navigation) is waited for.
+   */
+  function start(): void {
+    isStopped = false;
+    if (initial.pending.value) {
+      void Promise.resolve(initial).then(() => {
+        if (!isStopped) start();
+      });
+      return;
+    }
+    if (!listing.value) {
+      void load();
+      return;
     }
     reloadWhenServed();
     scheduleFollow();
@@ -93,6 +138,7 @@ export const useModuleStore = () => {
   }
 
   function stop(): void {
+    isStopped = true;
     if (followTimer) clearTimeout(followTimer);
     followTimer = undefined;
   }
@@ -103,6 +149,7 @@ export const useModuleStore = () => {
     isFollowing,
     awaitingReload,
     load,
+    start,
     run,
     stop,
   };

package/frontend-vue/layers/dms-layout/app/composables/page/useModuleStoreActions.ts

@@ -0,0 +1,194 @@
+import type { Ref, VNode } from "vue";
+import ModuleStoreDependencyPicker from "../../build/components/pages/modules/ModuleStoreDependencyPicker.vue";
+import {
+  ConfirmActionError,
+  useConfirm,
+} from "#dms-ui/app/composables/confirm";
+import {
+  type ModuleStoreEntry,
+  isAwaitingFrontend,
+  needsDependencyChoice,
+} from "../../build/utils/module-store-catalog";
+import {
+  type DependencyDraft,
+  areDependencyDraftsValid,
+  buildInstallBody,
+  createDependencyDrafts,
+} from "../../build/utils/module-store-install";
+import type {
+  StoreActionBody,
+  StoreOperationKind,
+} from "../../types/module-store";
+import type { useModuleStore } from "./useModuleStore";
+
+/** What a refused store request carries: the server's error key, if any. */
+interface StoreRequestError {
+  data?: unknown;
+  message?: string;
+}
+
+/** What the frontend banner says while it lags behind the backend. */
+export interface StoreFrontendNotice {
+  key: "dev" | "production" | "unknown";
+  names: string;
+}
+
+type ModuleStore = ReturnType<typeof useModuleStore>;
+
+/**
+ * The store's actions as both Modules views run them: the confirmations,
+ * the install dialog that picks the modules for missing interfaces, and a
+ * refusal worded from the server's error key. Also what the frontend banner
+ * says while the interface lags behind the backend.
+ */
+export const useModuleStoreActions = (
+  moduleStore: ModuleStore,
+  entries: Ref<ModuleStoreEntry[]>,
+) => {
+  const { t } = useI18n();
+  const { processI18n } = useTranslation();
+  const toast = useToast();
+  const { confirm } = useConfirm();
+
+  function resolveStoreError(error: unknown): string {
+    const details = error as StoreRequestError | undefined;
+    const key = typeof details?.data === "string" ? details.data : undefined;
+    if (!key) return details?.message ?? "";
+    return t(`modules.store.errors.${key.replace("error.", "")}`);
+  }
+
+  /**
+   * Runs `kind` from a dialog: a refusal is worded as the toast words it and
+   * shown in the dialog, which stays open.
+   */
+  async function runFromDialog(
+    kind: StoreOperationKind,
+    entry: ModuleStoreEntry,
+    body?: StoreActionBody,
+  ): Promise<void> {
+    try {
+      await moduleStore.run(kind, entry, body);
+    } catch (error) {
+      throw new ConfirmActionError({
+        title: t("modules.store.action_failed", {
+          module: processI18n(entry.title),
+        }),
+        description: resolveStoreError(error),
+      });
+    }
+  }
+
+  /** What the owner last picked in a module's install dialog, for a retry. */
+  const lastDependencyDrafts = new Map<string, DependencyDraft[]>();
+
+  function renderDependencyPicker(
+    entry: ModuleStoreEntry,
+    drafts: Ref<DependencyDraft[]>,
+    showErrors: boolean,
+  ): VNode {
+    return h(ModuleStoreDependencyPicker, {
+      missing: entry.missingInterfaces,
+      drafts: drafts.value,
+      showErrors,
+      onUpdate: (index: number, patch: Partial<DependencyDraft>) => {
+        drafts.value = drafts.value.map((draft, position) =>
+          position === index ? { ...draft, ...patch } : draft,
+        );
+      },
+    });
+  }
+
+  /**
+   * Asks which modules implement the interfaces the release misses, then
+   * installs them with it. A refusal shows in the dialog, kept open.
+   */
+  async function installWithDependencies(
+    entry: ModuleStoreEntry,
+  ): Promise<void> {
+    const title = processI18n(entry.title);
+    const drafts = ref(
+      createDependencyDrafts(
+        entry.missingInterfaces,
+        lastDependencyDrafts.get(entry.id),
+      ),
+    );
+    const showErrors = ref(false);
+    await confirm({
+      title: t("modules.store.install_dialog.title", { module: title }),
+      description: t("modules.store.install_dialog.description", {
+        module: title,
+      }),
+      confirmLabel: t("modules.store.actions.install"),
+      confirmIcon: "i-ph-download-simple",
+      icon: "i-ph-puzzle-piece",
+      body: () => renderDependencyPicker(entry, drafts, showErrors.value),
+      validate: () => {
+        showErrors.value = true;
+        return areDependencyDraftsValid(drafts.value);
+      },
+      onConfirm: async () => {
+        lastDependencyDrafts.set(entry.id, drafts.value);
+        await runFromDialog(
+          "install",
+          entry,
+          buildInstallBody(entry.id, drafts.value),
+        );
+      },
+    });
+  }
+
+  async function runStoreAction(
+    kind: StoreOperationKind,
+    entry: ModuleStoreEntry,
+  ): Promise<void> {
+    const title = processI18n(entry.title);
+    if (needsDependencyChoice(entry, kind)) {
+      await installWithDependencies(entry);
+      return;
+    }
+    if (kind === "uninstall") {
+      await confirm({
+        title: t("modules.store.uninstall_confirm.title", { module: title }),
+        description: t("modules.store.uninstall_confirm.description", {
+          module: title,
+        }),
+        confirmLabel: t("modules.store.actions.uninstall"),
+        color: "error",
+        icon: "i-ph-trash",
+        onConfirm: () => runFromDialog(kind, entry),
+      });
+      return;
+    }
+    try {
+      await moduleStore.run(kind, entry);
+    } catch (error) {
+      toast.add({
+        color: "error",
+        icon: "i-ph-warning-circle",
+        title: t("modules.store.action_failed", { module: title }),
+        description: resolveStoreError(error),
+      });
+    }
+  }
+
+  /** Store modules whose interface the running frontend does not match yet. */
+  const frontendNotice = computed<StoreFrontendNotice | null>(() => {
+    const lagging = entries.value.filter(
+      (entry) =>
+        isAwaitingFrontend(entry) ||
+        (entry.frontend === "unknown" &&
+          moduleStore.awaitingReload.value.has(entry.id)),
+    );
+    if (lagging.length === 0) return null;
+    const names = lagging.map((entry) => processI18n(entry.title)).join(", ");
+    const hasReported = lagging.every((entry) => entry.frontend !== "unknown");
+    const key = !hasReported
+      ? "unknown"
+      : moduleStore.listing.value?.dev
+        ? "dev"
+        : "production";
+    return { key, names };
+  });
+
+  return { runStoreAction, frontendNotice };
+};