@antelopejs/dms 0.9.0 → 0.9.2

package/dist/validation/store.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.schema.js","sourceRoot":"","sources":["../../src/validation/store.schema.ts"],"names":[],"mappings":";;;AAAA,6BAAwB;AAExB,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAClD,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAGpB,QAAA,oBAAoB,GAAG,OAAC,CAAC,MAAM,CAAC;IAC3C,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC;CACpE,CAAC,CAAC;AAMH,MAAM,mBAAmB,GACvB,sDAAsD,CAAC;AACzD,MAAM,sBAAsB,GAAG,GAAG,CAAC;AACnC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,MAAM,gBAAgB,GAAG,OAAC;KACvB,MAAM,EAAE;KACR,GAAG,CAAC,sBAAsB,CAAC;KAC3B,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAMjB,QAAA,kBAAkB,GAAG,4BAAoB,CAAC,MAAM,CAAC;IAC5D,YAAY,EAAE,OAAC;SACZ,KAAK,CACJ,OAAC,CAAC,MAAM,CAAC;QACP,gBAAgB,EAAE,gBAAgB;QAClC,OAAO,EAAE,gBAAgB;QACzB,MAAM,EAAE,OAAC,CAAC,MAAM,CAAC,OAAC,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,EAAE;KACzC,CAAC,CACH;SACA,GAAG,CAAC,gBAAgB,CAAC;SACrB,QAAQ,EAAE;CACd,CAAC,CAAC"}

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>

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

@@ -1,23 +1,175 @@
 <script setup lang="ts">
 import ModuleTile from "./ModuleTile.vue";
+import ModuleStoreRequirements from "./ModuleStoreRequirements.vue";
 import {
-  MODULE_INSTALL_COMMAND,
-  moduleInstallCommand,
   type ModuleStoreEntry,
+  type StoreAction,
+  type StoreActionBlock,
+  storeActionBlock,
+  storeActions,
+  storeTileStatus,
 } from "../../../utils/module-store-catalog";
+import type {
+  StoreOperationKind,
+  StoreOperationStep,
+} from "../../../../types/module-store";
 
 interface ModuleStoreTileProps {
   /** The store module the tile presents. */
   entry: ModuleStoreEntry;
+  /** Another module's operation runs: every action waits for it. */
+  isLocked?: boolean;
 }
 
-const props = defineProps<ModuleStoreTileProps>();
+interface ModuleStoreTileEmits {
+  action: [kind: StoreOperationKind];
+}
+
+const props = withDefaults(defineProps<ModuleStoreTileProps>(), {
+  isLocked: false,
+});
+const emit = defineEmits<ModuleStoreTileEmits>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
 const TOOLTIP_CONTENT = { side: "top", sideOffset: 6 } as const;
+/** The steps an operation shows, in the order they run. */
+const PROGRESS_STEPS: StoreOperationStep[] = [
+  "resolve",
+  "dependencies",
+  "unload",
+  "load",
+  "save",
+];
+/**
+ * Steps an operation of this kind goes through. The file is written last:
+ * it only ever names a module that loaded.
+ */
+const KIND_STEPS: Record<StoreOperationKind, StoreOperationStep[]> = {
+  install: ["resolve", "dependencies", "load", "save"],
+  update: ["resolve", "unload", "load", "save"],
+  enable: ["load", "save"],
+  disable: ["unload", "save"],
+  uninstall: ["unload", "save"],
+  apply: ["load"],
+};
+
+const status = computed(() => storeTileStatus(props.entry));
+const actions = computed(() => storeActions(props.entry));
+const primary = computed<StoreAction | undefined>(() =>
+  actions.value.find((action) => !action.isMenuOnly),
+);
+const secondary = computed(() =>
+  actions.value
+    .filter((action) => action !== primary.value)
+    .map((action) => ({
+      label: t(`modules.store.actions.${action.labelKey}`),
+      icon: action.icon,
+      color: action.kind === "uninstall" ? ("error" as const) : undefined,
+      disabled: storeActionBlock(props.entry, action.kind) !== undefined,
+      onSelect: () => emit("action", action.kind),
+    })),
+);
+
+const isInstalledHere = computed(
+  () => props.entry.installedVersion !== undefined,
+);
+const LIST_SEPARATOR = ", ";
+
+const BLOCK_MESSAGES: Record<StoreActionBlock, () => string> = {
+  no_release: () => t("modules.store.no_release"),
+  incompatible: () =>
+    t("modules.store.incompatible", {
+      range: props.entry.requiredInterfaceRange ?? "",
+    }),
+  frontend: () =>
+    t("modules.store.frontend_requirement.needs", {
+      range: props.entry.frontendRequirement?.range ?? "",
+      running: props.entry.frontendRequirement?.running ?? "",
+    }),
+  interfaces: () =>
+    t("modules.store.requires_first", {
+      interfaces: props.entry.missingInterfaces
+        .map((missing) => missing.interfacePackage)
+        .join(LIST_SEPARATOR),
+    }),
+  dependents: () =>
+    t("modules.store.used_by", {
+      modules: props.entry.dependents.join(LIST_SEPARATOR),
+    }),
+};
+
+/** Why the main action waits, when it does. */
+const blockedReason = computed(() => {
+  if (props.isLocked) return t("modules.store.locked");
+  if (!primary.value) return undefined;
+  const block = storeActionBlock(props.entry, primary.value.kind);
+  return block ? BLOCK_MESSAGES[block]() : undefined;
+});
+const isBlocked = computed(() => blockedReason.value !== undefined);
+
+const operation = computed(() => props.entry.operation);
+/**
+ * Whether the running install loads modules for missing interfaces. Kept
+ * for the whole operation: once they run, the listing no longer misses them.
+ */
+const isInstallingDependencies = ref(false);
+watch(
+  operation,
+  (running) => {
+    if (!running) {
+      isInstallingDependencies.value = false;
+      return;
+    }
+    if (
+      running.step === "dependencies" ||
+      (running.kind === "install" && props.entry.missingInterfaces.length > 0)
+    ) {
+      isInstallingDependencies.value = true;
+    }
+  },
+  { immediate: true },
+);
+
+const steps = computed(() => {
+  const kind = operation.value?.kind;
+  if (!kind) return [];
+  const current = PROGRESS_STEPS.indexOf(operation.value.step);
+  const kindSteps = KIND_STEPS[kind].filter(
+    (step) => step !== "dependencies" || isInstallingDependencies.value,
+  );
+  return kindSteps.map((step) => {
+    const index = PROGRESS_STEPS.indexOf(step);
+    const state =
+      index < current ? "done" : index === current ? "running" : "todo";
+    return { step, state };
+  });
+});
 
-const command = computed(() => moduleInstallCommand(props.entry));
+const STEP_ICONS: Record<string, string> = {
+  done: "i-ph-check-circle-fill",
+  running: "i-ph-circle-notch",
+  todo: "i-ph-circle",
+};
+
+const PLAIN_VERSION = /^\d/;
+
+/** A version as the footer shows it: `v1.2.3`, or a range as written. */
+function formatVersion(version: string): string {
+  return PLAIN_VERSION.test(version) ? `v${version}` : version;
+}
+
+const versionLabel = computed(() => {
+  const { installedVersion, latestVersion, operation: running } = props.entry;
+  if (running?.targetVersion && installedVersion && running.kind === "update") {
+    return `${formatVersion(installedVersion)} → ${formatVersion(running.targetVersion)}`;
+  }
+  if (props.entry.updateAvailable && installedVersion && latestVersion) {
+    return `${formatVersion(installedVersion)} → ${formatVersion(latestVersion)}`;
+  }
+  const version = installedVersion ?? latestVersion;
+  return version ? formatVersion(version) : undefined;
+});
 </script>
 
 <template>
@@ -26,49 +178,115 @@ const command = computed(() => moduleInstallCommand(props.entry));
     :title="processI18n(props.entry.title)"
     :description="processI18n(props.entry.description)"
     :status="{
-      tone: 'neutral',
-      dot: 'none',
-      label: t('modules.store.available_soon'),
+      tone: status.tone,
+      dot: status.dot,
+      label: t(`modules.store.state.${status.labelKey}`),
     }"
+    :is-solid="isInstalledHere"
   >
-    <!-- The CLI command that adds the module today, shown muted: the store
-         will run it for you once installing from here is possible. -->
+    <!-- Running operation: its steps, the current one spinning. -->
+    <ol
+      v-if="steps.length > 0"
+      class="flex flex-col gap-1 text-xs"
+      :aria-label="t(`modules.store.progress.${operation?.kind}`)"
+    >
+      <li
+        v-for="{ step, state } in steps"
+        :key="step"
+        class="flex items-center gap-1.5"
+        :class="state === 'todo' ? 'text-dimmed' : 'text-toned'"
+      >
+        <UIcon
+          :name="STEP_ICONS[state]"
+          class="size-3.5 shrink-0"
+          :class="{
+            'animate-spin text-(--ui-primary)': state === 'running',
+            'text-(--ui-success)': state === 'done',
+          }"
+        />
+        {{ t(`modules.store.steps.${step}`) }}
+      </li>
+    </ol>
+
+    <p
+      v-else-if="props.entry.state === 'error' && props.entry.error"
+      class="rounded-[8px] bg-(--ui-error)/8 px-2.5 py-1.5 text-xs text-(--ui-error)"
+      :title="props.entry.error"
+    >
+      <span class="line-clamp-3 break-words">{{ props.entry.error }}</span>
+    </p>
+
+    <p
+      v-else-if="props.entry.state === 'pending'"
+      class="text-xs text-(--ui-warning)"
+    >
+      {{ t("modules.store.pending_hint") }}
+    </p>
+
+    <!-- The npm package the module comes from. -->
     <div
-      class="text-dimmed flex h-[30px] min-w-0 items-center gap-1.5 rounded-[8px] border border-(--ui-border) bg-(--dms-bg-muted) px-2.5 font-mono text-[11.5px]"
-      :title="command"
+      v-else
+      class="text-dimmed flex h-[30px] min-w-0 items-center rounded-[8px] border border-(--ui-border) bg-(--dms-bg-muted) px-2.5 font-mono text-[11.5px]"
+      :title="props.entry.package"
     >
-      <span class="sr-only">{{ t("modules.store.command_label") }}:</span>
-      <!-- The package name never truncates: the CLI prefix gives way first. -->
-      <span class="min-w-0 truncate">
-        <span aria-hidden="true" class="opacity-70">$</span>
-        {{ MODULE_INSTALL_COMMAND }}
-      </span>
-      <b class="text-toned shrink-0 font-semibold">
-        {{ props.entry.packageName }}
-      </b>
+      <span class="truncate">{{ props.entry.package }}</span>
     </div>
 
+    <ModuleStoreRequirements v-if="steps.length === 0" :entry="props.entry" />
+
     <template #footer>
       <span class="truncate">
         {{ processI18n(props.entry.catalogCategory) }}
       </span>
-      <!-- aria-disabled rather than disabled: the button stays focusable and
-           hoverable so its "Coming soon" tooltip can explain why. -->
-      <span class="ms-auto shrink-0 font-sans">
+      <span
+        v-if="versionLabel"
+        class="shrink-0"
+        :class="props.entry.updateAvailable ? 'text-(--ui-warning)' : ''"
+      >
+        {{ versionLabel }}
+      </span>
+      <span class="ms-auto flex shrink-0 items-center gap-1 font-sans">
         <UTooltip
-          :text="t('modules.store.install_soon')"
+          v-if="primary"
+          :text="blockedReason"
+          :disabled="!blockedReason"
           :content="TOOLTIP_CONTENT"
         >
+          <!-- aria-disabled rather than disabled: the button keeps its
+               tooltip, which says why it waits. -->
           <UButton
+            size="xs"
+            :color="primary.kind === 'update' ? 'warning' : 'neutral'"
+            :variant="primary.kind === 'install' ? 'solid' : 'outline'"
+            :icon="primary.icon"
+            :label="t(`modules.store.actions.${primary.labelKey}`)"
+            :aria-disabled="isBlocked ? 'true' : undefined"
+            :class="{ 'cursor-not-allowed opacity-50': isBlocked }"
+            @click="!isBlocked && emit('action', primary.kind)"
+          />
+        </UTooltip>
+        <UDropdownMenu
+          v-if="secondary.length > 0 && !props.isLocked"
+          :items="secondary"
+          :content="{ align: 'end' }"
+        >
+          <UButton
+            v-if="primary"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            icon="i-ph-dots-three-vertical"
+            :aria-label="t('modules.store.more_actions')"
+          />
+          <UButton
+            v-else
             size="xs"
             color="neutral"
             variant="outline"
-            icon="i-ph-download-simple"
-            :label="t('modules.store.install')"
-            aria-disabled="true"
-            @click.prevent
+            trailing-icon="i-ph-caret-down"
+            :label="t('modules.store.actions.manage')"
           />
-        </UTooltip>
+        </UDropdownMenu>
       </span>
     </template>
   </ModuleTile>

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

@@ -23,6 +23,11 @@ interface ModuleTileProps {
   status: ModuleTileStatus;
   /** Where the tile leads; without it, the tile is a placeholder. */
   to?: string;
+  /**
+   * A tile with no link that still stands for a module running here (one
+   * the store manages): drawn solid rather than dashed.
+   */
+  isSolid?: boolean;
 }
 
 interface ModuleTileSlots {
@@ -36,6 +41,7 @@ interface ModuleTileSlots {
 
 const props = withDefaults(defineProps<ModuleTileProps>(), {
   to: undefined,
+  isSolid: false,
 });
 defineSlots<ModuleTileSlots>();
 
@@ -58,10 +64,18 @@ const theme = tv({
         footer: "py-[7px]",
       },
     },
+    isSolid: {
+      true: {
+        root: "dms-card border-solid",
+        footer: "bg-(--dms-bg-muted) py-[7px]",
+      },
+    },
   },
 });
 
-const ui = computed(() => theme({ isPlaceholder: !props.to }));
+const ui = computed(() =>
+  theme({ isPlaceholder: !props.to, isSolid: !props.to && props.isSolid }),
+);
 </script>
 
 <template>
@@ -72,7 +86,10 @@ const ui = computed(() => theme({ isPlaceholder: !props.to }));
     :class="ui.root()"
   >
     <div class="flex items-start justify-between gap-2.5">
-      <DmsIconWell :icon="props.icon" :tone="props.to ? undefined : 'muted'" />
+      <DmsIconWell
+        :icon="props.icon"
+        :tone="props.to || props.isSolid ? undefined : 'muted'"
+      />
       <DmsStatusPill
         :tone="props.status.tone"
         :dot="props.status.dot"