@antelopejs/dms 0.8.3 → 0.9.1

package/frontend-vue/layers/dms-core/shared/types/app-config.ts

@@ -12,6 +12,51 @@ export interface DmsLogoSources {
   dark: string;
 }
 
+/** The logos of an instance, one per place it is drawn. */
+export interface DmsBrandingLogo {
+  /** The expanded sidebar and the auth pages. */
+  default: DmsLogoSources;
+  /** The icon-only sidebar. */
+  collapsed: DmsLogoSources;
+  /**
+   * The header of the emails, in place of `default.light`. A PNG or a JPEG:
+   * Gmail and Outlook refuse SVG, and an email leaves out a logo they cannot
+   * load. `dark` goes to the mail clients that follow the reader's dark mode.
+   */
+  email?: DmsLogoSources;
+  /**
+   * The browser tab icon. `light` and `dark` follow the operating system's
+   * color scheme, not the dashboard's color mode: the browser draws the tab
+   * outside the page.
+   */
+  favicon?: DmsLogoSources;
+}
+
+/**
+ * The Tailwind palette each Nuxt UI color role resolves to (`ui.colors`): a
+ * stock palette name, or one whose `--color-<name>-*` shades a stylesheet
+ * declares.
+ */
+export interface DmsUiColors {
+  primary: string;
+  secondary: string;
+  neutral: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+}
+
+/**
+ * The DMS's own logos and palettes, kept whatever a layer sets in their place,
+ * so a tool can preview a return to the DMS look (the builder's theme editor).
+ * A layer overrides `branding.logo` and `ui.colors`, never these.
+ */
+export interface DmsBrandingDefaults {
+  logo: DmsBrandingLogo;
+  colors: DmsUiColors;
+}
+
 /**
  * What the footer of the public and auth pages shows besides its links
  * (`registerFooterLink`).
@@ -33,11 +78,10 @@ export interface DmsBrandingConfig {
    * Absent when an instance ships no logo of its own; the layer's app config
    * supplies the AntelopeJS one by default.
    */
-  logo?: {
-    default: DmsLogoSources;
-    collapsed: DmsLogoSources;
-  };
+  logo?: DmsBrandingLogo;
   footer?: DmsFooterConfig;
+  /** Supplied by the DMS layout layer's app config. */
+  defaults?: DmsBrandingDefaults;
 }
 
 export interface DmsAppConfig {

package/frontend-vue/layers/dms-layout/app/app.config.ts

@@ -1,3 +1,7 @@
+import type {
+  DmsBrandingLogo,
+  DmsUiColors,
+} from "#dms-core/shared/types/app-config";
 import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
 import { actionsTheme } from "./theme/actions";
 import { dataTheme } from "./theme/data";
@@ -8,21 +12,44 @@ import {
 } from "./theme/navigation";
 import { surfacesTheme } from "./theme/surfaces";
 
+const ANTELOPE_ICON = "/images/antelope-logo/icon.svg";
+
+// The palettes and logos are built afresh for each place that holds them: a
+// merged app config keeps the very objects no layer overrides, so a live edit
+// of `ui.colors` or `branding.logo` would otherwise rewrite
+// `branding.defaults` too.
+
+function dmsColors(): DmsUiColors {
+  return {
+    primary: "dms",
+    // The AI accent of the v2 design.
+    secondary: "violet",
+    neutral: "neutral",
+    // Design semantic hexes map exactly onto these Tailwind palettes:
+    // success #10b981 (emerald), warning #f59e0b (amber),
+    // error #ef4444 (red), info #06b6d4 (cyan).
+    success: "emerald",
+    warning: "amber",
+    error: "red",
+    info: "cyan",
+  };
+}
+
+// No email logo: the AntelopeJS logos are SVG, which mail clients refuse.
+function dmsLogo(): DmsBrandingLogo {
+  return {
+    default: {
+      light: "/images/antelope-logo/light.svg",
+      dark: "/images/antelope-logo/dark.svg",
+    },
+    collapsed: { light: ANTELOPE_ICON, dark: ANTELOPE_ICON },
+    favicon: { light: ANTELOPE_ICON, dark: ANTELOPE_ICON },
+  };
+}
+
 export default {
   ui: {
-    colors: {
-      primary: "dms",
-      // The AI accent of the v2 design.
-      secondary: "violet",
-      neutral: "neutral",
-      // Design semantic hexes map exactly onto these Tailwind palettes:
-      // success #10b981 (emerald), warning #f59e0b (amber),
-      // error #ef4444 (red), info #06b6d4 (cyan).
-      success: "emerald",
-      warning: "amber",
-      error: "red",
-      info: "cyan",
-    },
+    colors: dmsColors(),
     icons: {
       arrowDown: "i-ph-arrow-down-light",
       arrowLeft: "i-ph-arrow-left-light",
@@ -184,16 +211,8 @@ export default {
     },
   },
   branding: {
-    logo: {
-      default: {
-        light: "/images/antelope-logo/light.svg",
-        dark: "/images/antelope-logo/dark.svg",
-      },
-      collapsed: {
-        light: "/images/antelope-logo/icon.svg",
-        dark: "/images/antelope-logo/icon.svg",
-      },
-    },
+    logo: dmsLogo(),
+    defaults: { logo: dmsLogo(), colors: dmsColors() },
     footer: {
       copyright: "Antelope",
       githubStar: true,

package/frontend-vue/layers/dms-layout/app/assets/css/main.css

@@ -125,11 +125,23 @@
 
     /* Accent for text, icons and lines. The light theme needs the deep dms-700
      to stay readable on white; solid fills keep the bright dms-400 through
-     --dms-accent-fill instead, with dark ink on top, in both themes. */
+     --dms-accent-fill instead, with dark ink on top, in both themes. The
+     whole accent family derives from the primary palette, so pointing
+     `ui.colors.primary` elsewhere leaves no cyan behind. The fill hover and
+     its ink sit between shades: on the dms palette they come within a few
+     units of the v2 design's #5fe0ec and #04181b. */
     --ui-primary: var(--ui-color-primary-700);
     --dms-accent-fill: var(--ui-color-primary-400);
-    --dms-accent-fill-hover: #5fe0ec;
-    --dms-accent-on-fill: #04181b;
+    --dms-accent-fill-hover: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 75%,
+      var(--ui-color-primary-200)
+    );
+    --dms-accent-on-fill: color-mix(
+      in srgb,
+      var(--ui-color-primary-950) 50%,
+      black
+    );
 
     /* v2 status inks: the light theme uses the 700 shades so success, warning
      and error text stays readable on white; tints and lines stay bright. */
@@ -191,11 +203,13 @@
       0 0 0 1px color-mix(in srgb, var(--dms-accent) 30%, transparent),
       0 0 24px -4px color-mix(in srgb, var(--dms-accent) 45%, transparent);
     --dms-focus-ring:
-      0 0 0 2px var(--ui-bg-muted), 0 0 0 4px rgb(27 162 175 / 0.55);
+      0 0 0 2px var(--ui-bg-muted),
+      0 0 0 4px color-mix(in srgb, var(--ui-color-primary-600) 55%, transparent);
     /* Command palette: the deepest shadow, plus an accent halo ring. */
     --dms-shadow-cmdk:
       0 1px 2px rgb(11 17 20 / 0.06), 0 30px 80px rgb(11 17 20 / 0.18);
-    --dms-halo-accent: 0 0 0 6px rgb(27 162 175 / 0.12);
+    --dms-halo-accent: 0 0 0 6px
+      color-mix(in srgb, var(--ui-color-primary-600) 12%, transparent);
     /* Assistant mode swaps the accent halo for a violet (secondary) one,
        and tints its surfaces and lines with the same violet. Plain rgb():
        Chromium fringes the anti-aliased edge of an oklab colour-mix border
@@ -213,16 +227,30 @@
       0 1px 2px rgb(11 17 20 / 0.06), 0 24px 64px rgb(11 17 20 / 0.16);
     --dms-overlay: rgb(11 17 20 / 0.28);
     --dms-glow-accent:
-      0 0 0 1px var(--ui-color-primary-600), 0 4px 16px rgb(27 162 175 / 0.18);
+      0 0 0 1px var(--ui-color-primary-600),
+      0 4px 16px
+        color-mix(in srgb, var(--ui-color-primary-600) 18%, transparent);
 
     --dms-accent: var(--ui-color-primary-500);
 
     /* Form controls (v2 --accent-tint*, --error-tint, --border-top,
      --btn-highlight): the 3px focus halo around fields, the strongest border
      (unchecked boxes, dropzones) and the highlight on accent fills. */
-    --dms-accent-tint: rgb(27 162 175 / 0.09);
-    --dms-accent-tint-strong: rgb(27 162 175 / 0.15);
-    --dms-accent-line: rgb(27 162 175 / 0.35);
+    --dms-accent-tint: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 9%,
+      transparent
+    );
+    --dms-accent-tint-strong: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 15%,
+      transparent
+    );
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 35%,
+      transparent
+    );
     --dms-error-tint: rgb(220 38 38 / 0.08);
     --dms-border-top: #c9d1d7;
     --dms-field-border-hover: color-mix(
@@ -231,7 +259,8 @@
       var(--ui-text-muted)
     );
     --dms-fill-highlight:
-      inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 2px rgb(6 46 53 / 0.18);
+      inset 0 1px 0 rgb(255 255 255 / 0.45),
+      0 1px 2px color-mix(in srgb, var(--ui-color-primary-950) 18%, transparent);
 
     /* Charts and dashboards (v2 --chart-*, --sparkline, --skeleton): step 1
      is the main series, step 2 (violet) always the comparison. Lines use
@@ -285,12 +314,12 @@
     --dms-bg-muted: #0d1114;
     --dms-canvas-glow: radial-gradient(
       900px 600px at 85% -10%,
-      rgb(77 217 230 / 0.055),
+      color-mix(in srgb, var(--ui-color-primary-400) 5.5%, transparent),
       transparent 70%
     );
     --dms-stage-glow: radial-gradient(
       closest-side,
-      rgb(77 217 230 / 0.1),
+      color-mix(in srgb, var(--ui-color-primary-400) 10%, transparent),
       transparent
     );
 
@@ -316,10 +345,12 @@
       0 0 0 1px color-mix(in srgb, var(--dms-accent) 35%, transparent),
       0 0 32px -4px color-mix(in srgb, var(--dms-accent) 45%, transparent);
     --dms-focus-ring:
-      0 0 0 2px var(--ui-bg-muted), 0 0 0 4px rgb(77 217 230 / 0.6);
+      0 0 0 2px var(--ui-bg-muted),
+      0 0 0 4px color-mix(in srgb, var(--ui-color-primary-400) 60%, transparent);
     --dms-shadow-cmdk:
       0 50px 140px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.04);
-    --dms-halo-accent: 0 0 0 8px rgb(77 217 230 / 0.07);
+    --dms-halo-accent: 0 0 0 8px
+      color-mix(in srgb, var(--ui-color-primary-400) 7%, transparent);
     --dms-assistant-halo: 0 0 0 8px rgb(167 139 250 / 0.09);
     --dms-assistant-tint: rgb(167 139 250 / 0.12);
     --dms-assistant-line: rgb(167 139 250 / 0.4);
@@ -329,12 +360,25 @@
       0 40px 120px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.04);
     --dms-overlay: rgb(3 5 6 / 0.62);
     --dms-glow-accent:
-      0 0 0 1px var(--ui-color-primary-400), 0 0 40px rgb(77 217 230 / 0.25);
+      0 0 0 1px var(--ui-color-primary-400),
+      0 0 40px color-mix(in srgb, var(--ui-color-primary-400) 25%, transparent);
     --dms-accent: var(--ui-color-primary-400);
 
-    --dms-accent-tint: rgb(77 217 230 / 0.1);
-    --dms-accent-tint-strong: rgb(77 217 230 / 0.16);
-    --dms-accent-line: rgb(77 217 230 / 0.35);
+    --dms-accent-tint: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 10%,
+      transparent
+    );
+    --dms-accent-tint-strong: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 16%,
+      transparent
+    );
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 35%,
+      transparent
+    );
     --dms-error-tint: rgb(248 113 113 / 0.13);
     --dms-border-top: #3a4550;
     --dms-field-border-hover: color-mix(
@@ -380,7 +424,11 @@
     --ui-border-accented: #8a949d;
     --dms-border-top: #8a949d;
     --dms-chart-grid: #dfe4e8;
-    --dms-accent-line: rgb(27 162 175 / 0.6);
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 60%,
+      transparent
+    );
     --dms-success-line: rgb(22 163 74 / 0.55);
     --dms-warning-line: rgb(217 119 6 / 0.6);
     --dms-error-line: rgb(220 38 38 / 0.55);
@@ -398,7 +446,11 @@
     --ui-border-accented: #5f6b76;
     --dms-border-top: #6b7782;
     --dms-chart-grid: #262e36;
-    --dms-accent-line: rgb(77 217 230 / 0.6);
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 60%,
+      transparent
+    );
     --dms-success-line: rgb(74 222 128 / 0.6);
     --dms-warning-line: rgb(251 191 36 / 0.6);
     --dms-error-line: rgb(248 113 113 / 0.6);

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardFrame.vue

@@ -6,6 +6,7 @@ import DashboardBanners from "./DashboardBanners.vue";
 import GithubStarPrompt from "./GithubStarPrompt.vue";
 import RolePreviewBar from "./RolePreviewBar.vue";
 import { useAppWidgets } from "../../../composables/useAppWidgets";
+import { useVisitNavBadges } from "../../composables/navigation/useVisitNavBadges";
 import {
   sidePanelWidthStyle,
   useActiveSidePanel,
@@ -45,6 +46,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 providePageFillHeight(toRef(props, "fillHeight"));
+// A custom page brings no site layout: read with the page, and taken over by
+// the browser before the sidebar, the header and the banners render it.
+useRenderedSiteLayout();
+// The bell's counts, read with the page too, before the header and the page
+// (the inbox, the profile's summary) show them.
+useRenderedBellCounts();
+
+useVisitNavBadges();
 
 const { widgets: appWidgets } = useAppWidgets();
 // A fill-height page has nothing to scroll past the dock: no clearance.

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardSidebar.vue

@@ -84,9 +84,6 @@ onBeforeUnmount(() =>
 );
 
 const siteLayout = useSiteLayout();
-if (!siteLayout.siteLayout.value) {
-  void siteLayout.loadSiteLayout();
-}
 
 const favoritePages = useFavoritePages();
 

package/frontend-vue/layers/dms-layout/app/build/components/notification/NotificationPopover.vue

@@ -3,7 +3,10 @@ import { formatRelativeTime } from "#dms-core/app/utils/formatter";
 import NotificationCard from "./NotificationCard.vue";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
 import { settleWidgetRequest } from "./widgetRequest";
-import type { UserNotification } from "../../../composables/notification/useNotifications";
+import {
+  settledRenderedBellCounts,
+  type UserNotification,
+} from "../../../composables/notification/useNotifications";
 import { resolveNotificationTone } from "../pages/settings/notification/notificationDisplay";
 import { DMS_TONE_SOLID, iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import DmsRowSkeleton from "#dms-ui/app/build/components/skeleton/RowSkeleton.vue";
@@ -20,11 +23,12 @@ const SKELETON_ROW_COUNT = 4;
 const NOTIFICATIONS_SETTINGS_PAGE = "settings.user.notifications";
 
 const { t, locale } = useI18n();
-const { loggedIn } = useUserSession();
+const { loggedIn } = useDmsUserSession();
 const { processI18n } = useTranslation();
 const {
   unreadCount,
   unreadTone,
+  areCountsLoaded,
   notifications,
   hasMore,
   fetchBellCounts,
@@ -89,7 +93,9 @@ const handleFormSubmitSuccess = async (event: Event) => {
 
 onMounted(async () => {
   if (!loggedIn.value) return;
-  await refreshCounts();
+  // Read with the page (`useRenderedBellCounts`) unless that read failed.
+  if (!areCountsLoaded.value) await settledRenderedBellCounts();
+  if (!areCountsLoaded.value) await refreshCounts();
 
   window.addEventListener(
     FormEvents.SUBMIT_SUCCESS,

package/frontend-vue/layers/dms-layout/app/build/components/pages/modules/ModuleStoreDependencyPicker.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
+import type { MissingInterface } from "../../../../types/module-store";
+import {
+  type DependencyDraft,
+  type DependencyDraftError,
+  OTHER_PACKAGE_CHOICE,
+  validateDependencyDraft,
+} from "../../../utils/module-store-install";
+
+interface ModuleStoreDependencyPickerProps {
+  /** The interfaces the release needs and no running module implements. */
+  missing: MissingInterface[];
+  /** One draft per missing interface, in the same order. */
+  drafts: DependencyDraft[];
+  /** Confirm was tried: the fields say what is wrong. */
+  showErrors?: boolean;
+}
+
+interface ModuleStoreDependencyPickerEmits {
+  update: [index: number, patch: Partial<DependencyDraft>];
+}
+
+const props = withDefaults(defineProps<ModuleStoreDependencyPickerProps>(), {
+  showErrors: false,
+});
+const emit = defineEmits<ModuleStoreDependencyPickerEmits>();
+const { t } = useI18n();
+
+const CONFIG_PLACEHOLDER = "{}";
+const CONFIG_ROWS = 3;
+
+const groups = computed(() =>
+  props.missing.map((missing, index) => {
+    const draft = props.drafts[index];
+    const errors =
+      props.showErrors && draft ? validateDependencyDraft(draft) : {};
+    return {
+      missing,
+      draft,
+      errors,
+      items: [
+        ...missing.candidates.map((candidate) => ({
+          label: candidate.name,
+          description: candidate.package,
+          value: candidate.package,
+        })),
+        {
+          label: t("modules.store.install_dialog.other"),
+          value: OTHER_PACKAGE_CHOICE,
+        },
+      ],
+    };
+  }),
+);
+
+function errorText(error: DependencyDraftError | undefined) {
+  return error ? t(`modules.store.install_dialog.errors.${error}`) : undefined;
+}
+
+/** Sends `field` of draft `index` as the control typed it. */
+function updateField(
+  index: number,
+  field: keyof DependencyDraft,
+  value: unknown,
+): void {
+  emit("update", index, { [field]: String(value ?? "") });
+}
+
+function fieldId(index: number, field: string): string {
+  return `store-dependency-${index}-${field}`;
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <section
+      v-for="(group, index) in groups"
+      :key="group.missing.interfacePackage"
+      class="flex flex-col gap-2.5"
+      :aria-labelledby="fieldId(index, 'title')"
+    >
+      <h4
+        :id="fieldId(index, 'title')"
+        class="text-highlighted text-[13px] font-semibold"
+      >
+        <code :class="[MONO_CHIP_CLASS, 'bg-elevated text-xs']">
+          {{ group.missing.interfacePackage }}
+        </code>
+      </h4>
+      <template v-if="group.draft">
+        <URadioGroup
+          :model-value="group.draft.choice"
+          :items="group.items"
+          size="sm"
+          :aria-labelledby="fieldId(index, 'title')"
+          @update:model-value="updateField(index, 'choice', $event)"
+        />
+        <UFormField
+          v-if="group.draft.choice === OTHER_PACKAGE_CHOICE"
+          :label="t('modules.store.install_dialog.package_label')"
+          :error="errorText(group.errors.package)"
+        >
+          <UInput
+            :id="fieldId(index, 'package')"
+            :model-value="group.draft.otherPackage"
+            class="w-full font-mono"
+            autocomplete="off"
+            spellcheck="false"
+            :placeholder="t('modules.store.install_dialog.package_placeholder')"
+            @update:model-value="updateField(index, 'otherPackage', $event)"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('modules.store.install_dialog.config_label')"
+          :hint="t('modules.store.install_dialog.config_hint')"
+          :error="errorText(group.errors.config)"
+        >
+          <UTextarea
+            :id="fieldId(index, 'config')"
+            :model-value="group.draft.config"
+            class="w-full font-mono text-xs"
+            :rows="CONFIG_ROWS"
+            autoresize
+            spellcheck="false"
+            :placeholder="CONFIG_PLACEHOLDER"
+            @update:model-value="updateField(index, 'config', $event)"
+          />
+        </UFormField>
+      </template>
+    </section>
+    <p class="text-muted text-xs">
+      {{ t("modules.store.install_dialog.note") }}
+    </p>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/modules/ModuleStoreRequirements.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import DmsCopyButton from "#dms-ui/app/components/copy/CopyButton.vue";
+import type { StoreListingEntry } from "../../../../types/module-store";
+
+interface ModuleStoreRequirementsProps {
+  /** The store module whose requirements the tile spells out. */
+  entry: StoreListingEntry;
+}
+
+const props = defineProps<ModuleStoreRequirementsProps>();
+const { t } = useI18n();
+
+const LIST_SEPARATOR = ", ";
+
+const requirement = computed(() => props.entry.frontendRequirement);
+const missingInterfaces = computed(() =>
+  props.entry.missingInterfaces
+    .map((missing) => missing.interfacePackage)
+    .join(LIST_SEPARATOR),
+);
+const dependents = computed(() => props.entry.dependents.join(LIST_SEPARATOR));
+</script>
+
+<template>
+  <!-- The release needs another dms-frontend: what to run, what it breaks.
+       The store never moves dms-frontend itself. -->
+  <div
+    v-if="requirement"
+    class="flex flex-col gap-1.5 rounded-[8px] bg-(--ui-warning)/8 px-2.5 py-1.5 text-xs text-(--ui-warning)"
+  >
+    <p>
+      {{
+        t("modules.store.frontend_requirement.needs", {
+          range: requirement.range,
+          running: requirement.running,
+        })
+      }}
+    </p>
+    <template v-if="requirement.target">
+      <p v-if="requirement.command" class="text-toned">
+        {{
+          t("modules.store.frontend_requirement.run", {
+            target: requirement.target,
+          })
+        }}
+      </p>
+      <div
+        v-if="requirement.command"
+        class="text-highlighted flex min-w-0 items-center gap-1 rounded-[6px] border border-(--ui-border) bg-(--dms-bg-muted) ps-2 font-mono text-[11px]"
+      >
+        <code class="min-w-0 flex-1 truncate" :title="requirement.command">
+          {{ requirement.command }}
+        </code>
+        <DmsCopyButton :value="requirement.command" />
+      </div>
+      <template v-if="requirement.breaks.length > 0">
+        <p>
+          {{
+            t("modules.store.frontend_requirement.breaks", {
+              target: requirement.target,
+            })
+          }}
+        </p>
+        <ul class="text-toned flex flex-col gap-0.5">
+          <li
+            v-for="layer in requirement.breaks"
+            :key="layer.name"
+            class="flex min-w-0 items-baseline gap-1.5"
+          >
+            <span class="truncate font-mono">{{ layer.name }}</span>
+            <span class="text-dimmed shrink-0">
+              {{
+                t("modules.store.frontend_requirement.supports", {
+                  range: layer.range,
+                })
+              }}
+            </span>
+          </li>
+        </ul>
+      </template>
+    </template>
+    <p v-else class="text-toned">
+      {{ t("modules.store.frontend_requirement.no_target") }}
+    </p>
+  </div>
+
+  <p
+    v-if="missingInterfaces"
+    class="text-toned truncate text-xs"
+    :title="missingInterfaces"
+  >
+    {{ t("modules.store.requires", { interfaces: missingInterfaces }) }}
+  </p>
+
+  <p v-if="dependents" class="text-xs text-(--ui-warning)">
+    {{ t("modules.store.used_by", { modules: dependents }) }}
+  </p>
+</template>