@antelopejs/dms 0.9.2 → 0.9.4

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

@@ -30,35 +30,35 @@
   }
 }
 
-/* Self-hosted Geist (SIL OFL 1.1, files in /public/fonts + LICENSE.txt).
+/* Self-hosted Geist (SIL OFL 1.1, files and LICENSE.txt in ../fonts).
    Variable files cover weights 100–900 and keep builds deterministic offline. */
 @font-face {
   font-family: "Geist";
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url("/fonts/Geist-Variable.woff2") format("woff2");
+  src: url("../fonts/Geist-Variable.woff2") format("woff2");
 }
 @font-face {
   font-family: "Geist";
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  src: url("/fonts/Geist-Italic-Variable.woff2") format("woff2");
+  src: url("../fonts/Geist-Italic-Variable.woff2") format("woff2");
 }
 @font-face {
   font-family: "Geist Mono";
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
+  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
 }
 @font-face {
   font-family: "Geist Mono";
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  src: url("/fonts/GeistMono-Italic-Variable.woff2") format("woff2");
+  src: url("../fonts/GeistMono-Italic-Variable.woff2") format("woff2");
 }
 
 /* Interface scale: Nuxt UI / Tailwind sizing is rem-based, so scaling the

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

@@ -6,8 +6,8 @@ import type { StatusPillDot } from "#dms-ui/app/components/status-pill/StatusPil
 
 // v2 .mc-tile, the frame of the Modules page's tiles: an installed module's
 // card (a link into it) or a store module's dashed placeholder. Both read
-// the same: icon and status, the name low in the tile, its description, a
-// mono footer band.
+// the same: icon and status, name and description, optional content, and a
+// bottom-aligned mono footer band.
 
 /** The status pill of the tile's head. */
 export interface ModuleTileStatus {
@@ -31,7 +31,7 @@ interface ModuleTileProps {
 }
 
 interface ModuleTileSlots {
-  /** Above the name (a live readout). */
+  /** Under the description (a live readout). */
   readout?: () => unknown;
   /** Under the description (an install command). */
   default?: () => unknown;
@@ -49,7 +49,7 @@ const theme = tv({
   slots: {
     root: "flex min-h-[228px] flex-col gap-3 overflow-hidden px-4 pt-4",
     footer:
-      "text-dimmed -mx-4 mt-0.5 flex items-center gap-2 border-t border-(--ui-border-muted) ps-4 pe-3 font-mono text-[11px] font-medium",
+      "text-dimmed -mx-4 mt-auto flex items-center gap-2 border-t border-(--ui-border-muted) ps-4 pe-3 font-mono text-[11px] font-medium",
   },
   variants: {
     isPlaceholder: {
@@ -99,10 +99,8 @@ const ui = computed(() =>
       />
     </div>
 
-    <slot name="readout" />
-
     <div
-      class="text-highlighted mt-auto truncate text-lg font-[650] tracking-[-0.02em]"
+      class="text-highlighted truncate text-lg font-[650] tracking-[-0.02em]"
     >
       {{ props.title }}
     </div>
@@ -110,6 +108,8 @@ const ui = computed(() =>
       {{ props.description }}
     </p>
 
+    <slot name="readout" />
+
     <slot />
 
     <div :class="ui.footer()">

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

@@ -1,5 +1,6 @@
 import type { Tone } from "#dms-ui/app/types/tone";
 import type { StatusPillDot } from "#dms-ui/app/components/status-pill/StatusPill.vue";
+import type { ModuleCatalogEntry } from "../../types/page";
 import type {
   StoreListingEntry,
   StoreModuleState,
@@ -84,9 +85,17 @@ const INSTALLED_STATES = new Set<StoreModuleState>([
   "pending",
 ]);
 
-export function toModuleStoreEntry(entry: StoreListingEntry): ModuleStoreEntry {
+export function toModuleStoreEntry(
+  entry: StoreListingEntry,
+  registeredModules: readonly Pick<ModuleCatalogEntry, "id" | "title">[] = [],
+): ModuleStoreEntry {
   return {
     ...entry,
+    // The registration also names Installed and navigation. Keep the catalog
+    // fallback for unloaded modules, whose translations may not be served.
+    title:
+      registeredModules.find((module) => module.id === entry.id)?.title ??
+      entry.title,
     catalogCategory: `${CATEGORY_PREFIX}.${entry.category}`,
   };
 }

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

@@ -12,8 +12,11 @@ function collectFromComponentInfo(
 }
 
 /**
- * Collect every componentName referenced by a page layout: the layout
- * component itself, the top-level components and all their nested children.
+ * Collect every componentName referenced by a page layout: the top-level
+ * components and all their nested children, and the children of the layout
+ * component. The layout component itself is a layout the frontend modules
+ * register apart from components (`registerLayout`), which the renderer
+ * loads with the page: looked up among the components, it is not found.
  */
 export function collectPageLayoutComponentNames(
   layout: PageLayout | null | undefined,
@@ -21,7 +24,9 @@ export function collectPageLayoutComponentNames(
   if (!layout) return [];
 
   const names = new Set<string>();
-  collectFromComponentInfo(layout.layout, names);
+  for (const child of layout.layout?.children || []) {
+    collectFromComponentInfo(child.component, names);
+  }
   for (const info of Object.values(layout.components || {})) {
     collectFromComponentInfo(info, names);
   }

package/frontend-vue/layers/dms-layout/app/custom-layouts/PreviewLayout.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <!-- The block preview's frame: nothing around the blocks, so an embedding
+       page sizes the iframe to them and a capture crops to them. -->
+  <main class="bg-default" data-dms-page-content>
+    <slot />
+  </main>
+</template>
+
+<style>
+/* A transparent preview (`transparent: true`) lets the embedding page's own
+   background show through the iframe, e.g. a docs site in dark mode. */
+html:has([data-dms-preview-transparent]),
+html:has([data-dms-preview-transparent]) body,
+html:has([data-dms-preview-transparent]) [data-dms-page-content] {
+  background: transparent;
+}
+
+/* A browser paints an opaque backdrop behind an iframe whose color scheme
+   differs from the embedding page's: declare the theme's own scheme, so a dark
+   docs page (`color-scheme: dark`) shows through a dark preview. */
+html.dark:has([data-dms-preview-transparent]) {
+  color-scheme: dark;
+}
+
+html.light:has([data-dms-preview-transparent]) {
+  color-scheme: light;
+}
+</style>

package/frontend-vue/layers/dms-layout/app/custom-pages/modules.vue

@@ -236,7 +236,9 @@ const isStoreLoading = computed(
 );
 const storeModules = computed(() =>
   sortStoreModules(
-    (storeListing.value?.modules ?? []).map(toModuleStoreEntry),
+    (storeListing.value?.modules ?? []).map((entry) =>
+      toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
+    ),
     processI18n,
   ),
 );

package/frontend-vue/layers/dms-layout/app/plugins/font-preload.ts

@@ -1,23 +1,25 @@
-// The two faces every page sets its text in. Fetched only once the stylesheet
-// is parsed, they landed after the first paint, and the swap from the
-// fallback face moved the header and the page text (wider breadcrumbs, other
-// line breaks). Preloaded from the head, they are there for the first paint.
-const PRELOADED_FONTS = [
-  "/fonts/Geist-Variable.woff2",
-  "/fonts/GeistMono-Variable.woff2",
-];
+// The face every page sets its text in. Fetched only once the stylesheet is
+// parsed, it landed after the first paint, and the swap from the fallback face
+// moved the header and the page text (wider breadcrumbs, other line breaks).
+// Preloaded from the head, it is there for the first paint. Imported rather
+// than named, so it is the build's own file: named after its content, cached
+// for good, the same file the stylesheet's `@font-face` asks for.
+import geistVariable from "../assets/fonts/Geist-Variable.woff2";
+
 const FONT_TYPE = "font/woff2";
 
-/** Server only: the links only matter in the server-rendered head. */
+/** Server only: the link only matters in the server-rendered head. */
 export default defineDmsPlugin(() => {
   if (!import.meta.env.SSR) return;
   useHead({
-    link: PRELOADED_FONTS.map((href) => ({
-      rel: "preload",
-      as: "font",
-      type: FONT_TYPE,
-      href,
-      crossorigin: "anonymous",
-    })),
+    link: [
+      {
+        rel: "preload",
+        as: "font",
+        type: FONT_TYPE,
+        href: geistVariable,
+        crossorigin: "anonymous",
+      },
+    ],
   });
 });

package/frontend-vue/layers/dms-layout/i18n/locales/layout-en-GB.json

@@ -711,6 +711,9 @@
         "member": "Member",
         "two_factor_on_short": "On"
       }
+    },
+    "dms_preview": {
+      "title": "Block preview"
     }
   },
   "modules": {
@@ -833,7 +836,7 @@
       },
       "catalog": {
         "ai": {
-          "title": "AI assistant",
+          "title": "Assistant",
           "description": "A coding agent that inspects your modules and edits the project, for development."
         },
         "api": {

package/frontend-vue/layers/dms-layout/i18n/locales/layout-fr-FR.json

@@ -715,6 +715,9 @@
         "member": "Membre",
         "two_factor_on_short": "Activée"
       }
+    },
+    "dms_preview": {
+      "title": "Aperçu de blocs"
     }
   },
   "modules": {
@@ -837,7 +840,7 @@
       },
       "catalog": {
         "ai": {
-          "title": "Assistant IA",
+          "title": "Assistant",
           "description": "Un agent de code qui inspecte vos modules et modifie le projet, pour le développement."
         },
         "api": {
@@ -873,7 +876,7 @@
           "description": "Analytique de trafic sans cookie, entonnoirs de conversion avec tests A/B et cartes de clics."
         },
         "media": {
-          "title": "Médias",
+          "title": "Médiathèque",
           "description": "Médiathèque avec dossiers, permissions par dossier et déclinaisons d’images."
         },
         "saas": {

package/frontend-vue/layers/dms-onboarding/app/middleware/onboarding.global.ts

@@ -1,5 +1,8 @@
 const ONBOARDING_PATH = "/onboarding";
 const LOGIN_PATH = "/auth";
+// The block preview a docs site embeds draws blocks only, so an instance not
+// yet set up still serves it rather than the wizard.
+const BLOCK_PREVIEW_PATH = "/dms-preview";
 
 // Where a visit to the finished wizard lands: the app for a signed-in user, the
 // login page for anyone else rather than a homepage whose 401 would bounce
@@ -10,6 +13,7 @@ function completedOnboardingDestination(): string {
 }
 
 export default defineDmsMiddleware(async (to) => {
+  if (to.path === BLOCK_PREVIEW_PATH) return;
   const isOnboardingRoute = to.path.startsWith(ONBOARDING_PATH);
 
   // While the instance has no admin yet, funnel every route to the onboarding

package/frontend-vue/layers/dms-ui/app/build/components/block-preview/BlockPreviewIssue.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PreviewIssue } from "../../utils/blockPreview";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{ issue: PreviewIssue }>();
+
+const { t } = useI18n();
+const message = computed(() =>
+  t(`dms.block_preview.${props.issue.key}`, {
+    name: props.issue.name,
+    value: props.issue.value ?? "",
+  }),
+);
+</script>
+
+<template>
+  <UAlert
+    color="warning"
+    variant="subtle"
+    icon="i-ph-warning"
+    :title="message"
+    data-dms-preview-issue
+  />
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/sortable/SortableList.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts" generic="Item">
+/**
+ * A list whose items the user reorders by dragging, or moves to another list
+ * of the same `group`: SortableJS, through VueUse's `useSortable`.
+ *
+ * SortableJS moves the dragged element in the DOM itself. Vue owns these
+ * elements, so each drop puts the element back where it was and updates the
+ * `list` model with a new array instead, from which Vue renders the new
+ * order. `change` then says what happened to this list: `moved` within it,
+ * `added` from another one, `removed` to another one.
+ */
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { ref, watch } from "vue";
+
+export interface SortableListChange<Item> {
+  added?: { element: Item; newIndex: number };
+  removed?: { element: Item; oldIndex: number };
+  moved?: { element: Item; oldIndex: number; newIndex: number };
+}
+
+/** The items, in order: a new array after each drop. */
+const list = defineModel<Item[]>("list", { required: true });
+
+const props = defineProps<{
+  /** A stable key of an item: Vue keeps each element with its item. */
+  itemKey: (item: Item) => PropertyKey | undefined;
+  /** Lists sharing a group exchange items. */
+  group?: string;
+  disabled?: boolean;
+  /** Only an item grabbed by an element matching this selector moves. */
+  handle?: string;
+  /** Items matching this selector stay in place. */
+  filter?: string;
+  /** Class of the slot the dragged item will land in. */
+  ghostClass?: string;
+  /** Class of the item while it follows the pointer. */
+  dragClass?: string;
+}>();
+
+const emit = defineEmits<{ change: [change: SortableListChange<Item>] }>();
+
+defineSlots<{ item(props: { element: Item; index: number }): unknown }>();
+
+/** What this list reads of SortableJS's events. */
+interface SortableEvent {
+  item: HTMLElement;
+  oldIndex?: number;
+  newIndex?: number;
+}
+
+const draggedKey = () => props.group ?? "";
+
+const root = ref<HTMLElement | null>(null);
+
+/**
+ * Where the dragged element stood. Next to the node that followed it, not at
+ * an index: Vue removes an item by the markers around it, which an index
+ * among the elements does not see.
+ */
+let origin: { parent: Node; next: Node | null } | undefined;
+
+/** Put the element SortableJS moved back where Vue rendered it. */
+function restore(item: HTMLElement) {
+  if (origin) origin.parent.insertBefore(item, origin.next);
+}
+
+/** `list` without its item at `index`, and that item. */
+function without(index: number): [Item[], Item | undefined] {
+  const next = [...list.value];
+  const [element] = next.splice(index, 1);
+  return [next, element];
+}
+
+const { option } = useSortable(root, list, {
+  group: props.group,
+  disabled: props.disabled,
+  handle: props.handle,
+  filter: props.filter,
+  // A filtered item still gets its click: a locked card opens like the others.
+  preventOnFilter: false,
+  ghostClass: props.ghostClass,
+  dragClass: props.dragClass,
+  onStart: (event: SortableEvent) => {
+    const { parentNode, nextSibling } = event.item;
+    origin = parentNode ? { parent: parentNode, next: nextSibling } : undefined;
+    const element = list.value[event.oldIndex ?? -1];
+    if (element !== undefined) sharedDragged.set(draggedKey(), element);
+  },
+  onUpdate: (event: SortableEvent) => {
+    const { oldIndex, newIndex } = event;
+    if (oldIndex === undefined || newIndex === undefined) return;
+    restore(event.item);
+    const [next, element] = without(oldIndex);
+    if (element === undefined) return;
+    next.splice(newIndex, 0, element);
+    list.value = next;
+    emit("change", { moved: { element, oldIndex, newIndex } });
+  },
+  onAdd: (event: SortableEvent) => {
+    const element = sharedDragged.get(draggedKey()) as Item | undefined;
+    const { newIndex } = event;
+    if (element === undefined || newIndex === undefined) return;
+    // The element goes back to the list it left, which removes it below.
+    event.item.remove();
+    const next = [...list.value];
+    next.splice(newIndex, 0, element);
+    list.value = next;
+    emit("change", { added: { element, newIndex } });
+  },
+  onRemove: (event: SortableEvent) => {
+    const { oldIndex } = event;
+    if (oldIndex === undefined) return;
+    restore(event.item);
+    const [next, element] = without(oldIndex);
+    if (element === undefined) return;
+    list.value = next;
+    emit("change", { removed: { element, oldIndex } });
+  },
+  onEnd: () => {
+    origin = undefined;
+    sharedDragged.delete(draggedKey());
+  },
+});
+
+watch(
+  () => props.disabled,
+  (disabled) => option("disabled", disabled),
+);
+</script>
+
+<script lang="ts">
+// The item being dragged, by group. A drop on another list only names the
+// element, which belongs to the list it left: the list it lands in reads the
+// item the other one stored when the drag started.
+const sharedDragged = new Map<string, unknown>();
+</script>
+
+<template>
+  <div ref="root">
+    <template v-for="(element, index) in list" :key="itemKey(element)">
+      <slot name="item" :element="element" :index="index" />
+    </template>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/table/MenuColumns.vue

@@ -4,10 +4,10 @@ import type { Column } from "@tanstack/vue-table";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 import type { ShallowRef } from "vue";
-import Draggable from "vuedraggable";
 
 import type { TableSharedData, Data } from "./Table.vue";
 import type { TableColumnMeta } from "../../composables/table/types";
+import SortableList from "../sortable/SortableList.vue";
 
 const theme = tv({
   slots: {
@@ -40,20 +40,21 @@ const rawColumns = computed(
   () => tableSharedData?.value?.table.getAllColumns() || [],
 );
 
-const columns = computed({
-  get() {
-    return mapColumns();
-  },
-  set(newValue) {
-    if (!tableSharedData?.value) return;
-    const updatedOrder = [
-      "select",
-      ...newValue.map((col) => col.id),
-      "actions",
-    ];
-    tableSharedData.value.columnOrderState.value = [...updatedOrder];
-  },
-});
+const columns = computed(() => mapColumns());
+type ListedColumn = (typeof columns.value)[number];
+
+// A drag gives the columns in their new order; `select` stays first and
+// `actions` last.
+function applyColumnOrder(ordered: ListedColumn[]) {
+  if (!tableSharedData?.value) return;
+  tableSharedData.value.columnOrderState.value = [
+    "select",
+    ...ordered.map((col) => col.id),
+    "actions",
+  ];
+}
+
+const columnKey = (column: ListedColumn) => column.id;
 
 function mapColumns() {
   return order.value
@@ -67,7 +68,7 @@ function mapColumns() {
 }
 
 function toggleColumnVisibility(
-  column: Column<unknown>,
+  column: Column<T>,
   visibility?: boolean | "indeterminate",
 ) {
   column.toggleVisibility(!!visibility);
@@ -78,7 +79,7 @@ const PIN_ICONS = {
   unpinned: "i-ph-push-pin",
 } as const;
 
-function togglePin(column: Column<unknown>) {
+function togglePin(column: Column<T>) {
   column.pin(column.getIsPinned() ? false : "left");
 }
 
@@ -98,11 +99,12 @@ const uiTableMenuColumn = computed(() => uiTableMenuColumnVariant());
 
 <template>
   <div :class="uiTableMenuColumn.root()">
-    <Draggable
-      v-model="columns"
+    <SortableList
+      :list="columns"
+      :item-key="columnKey"
       :class="uiTableMenuColumn.list()"
-      item-key="id"
       handle="#column-handler"
+      @update:list="applyColumnOrder"
     >
       <template #item="{ element: column }">
         <li :class="uiTableMenuColumn.item()">
@@ -145,7 +147,7 @@ const uiTableMenuColumn = computed(() => uiTableMenuColumnVariant());
           />
         </li>
       </template>
-    </Draggable>
+    </SortableList>
 
     <div :class="uiTableMenuColumn.actions()">
       <UButton