@antelopejs/dms 0.9.8 → 0.10.0

package/frontend-vue/layers/dms-layout/app/pages/[...slug].vue

@@ -5,6 +5,7 @@ import { useDevReloading } from "../build/composables/dev-reload/useDevReloadHol
 import { usePageLiveHost } from "#dms-ui/app/build/composables/live/usePageLiveHost";
 import { usePageDataRefresh } from "#dms-ui/app/build/composables/live/usePageDataRefresh";
 import { pageValidationRedirect } from "../build/utils/pageValidationRedirect";
+import { resolveComponentChildren } from "#dms-ui/app/utils/componentTree";
 
 defineOptions({ inheritAttrs: false });
 
@@ -215,9 +216,10 @@ if (import.meta.env.DEV) {
 
 const { pageLayout } = await usePageLayout();
 
-watch(pageLayout, (layout) => preloadPageLayoutComponents(layout), {
-  immediate: true,
-});
+// A client navigation shows the page once its blocks' code is there: a lazy
+// block draws nothing until its chunk lands, then pushes the page down.
+await preloadPageLayoutComponents(pageLayout.value);
+watch(pageLayout, (layout) => void preloadPageLayoutComponents(layout));
 
 const { refreshIfStale: refreshPermissionsIfStale } = usePermissions();
 
@@ -345,24 +347,6 @@ watch(
 onMounted(runPageSetup);
 onUnmounted(tearDownPageSetup);
 
-const processChildren = (
-  children: ComponentChild[],
-): ResolvedComponentInfo[] => {
-  return children.map((child) => {
-    const { id, component, ...additionalProps } = child;
-    return {
-      id,
-      options: component.options,
-      component: component.componentName
-        ? resolveDmsComponent(component.componentName) || "div"
-        : "div",
-      componentName: component.componentName,
-      children: component.children ? processChildren(component.children) : [],
-      ...additionalProps,
-    };
-  });
-};
-
 const components = computed(() =>
   Object.keys(pageLayout.value?.components || {}).map((field) => {
     const componentInfo = pageLayout.value?.components[field];
@@ -374,7 +358,7 @@ const components = computed(() =>
         : "div",
       componentName: componentInfo?.componentName,
       children: componentInfo?.children
-        ? processChildren(componentInfo.children)
+        ? resolveComponentChildren(componentInfo.children)
         : [],
     } as ResolvedComponentInfo;
   }),

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-navigation.client.ts

@@ -22,7 +22,8 @@ function collectNavigationItems(
 
     const label = resolveI18nKey(translate, child.displayName);
     const to = buildMenuItemTarget(child);
-    if (to && child.fullSlug) {
+    // The account entries (Settings, Profile) are the session group's.
+    if (to && child.fullSlug && !isAccountMenuRoute(to)) {
       items.push({
         label,
         suffix:

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-personal-pages.client.ts

@@ -1,14 +1,14 @@
-import type { CommandPaletteGroup, CommandPaletteItem } from "@nuxt/ui";
+import type { CommandPaletteGroup } from "@nuxt/ui";
+import {
+  type RecentModule,
+  recentModules,
+} from "../build/utils/modules-catalog";
 
 const PERSONAL_PAGES_SOURCE_ID = "dms-personal-pages";
 const PERSONAL_PAGES_SOURCE_ORDER = 20;
 const FAVORITES_GROUP_ID = "favorite-pages";
 const RECENT_MODULES_GROUP_ID = "recent-modules";
 
-type AccessibleModules = Record<string, ModuleWithAccess> | undefined;
-
-type PathLabelResolver = (path: string) => string | undefined;
-
 function buildFavoritesGroup(
   favorites: FavoritePage[],
   translate: I18nTranslate,
@@ -26,42 +26,20 @@ function buildFavoritesGroup(
   };
 }
 
-function buildRecentModuleItem(
-  entry: ModuleHistoryEntry,
-  modules: AccessibleModules,
-  translate: I18nTranslate,
-  resolvePathLabel: PathLabelResolver,
-): CommandPaletteItem | null {
-  const module = modules?.[entry.moduleId];
-  if (!module?.hasAccess) return null;
-
-  return {
-    label: resolveI18nKey(translate, module.title),
-    suffix: resolvePathLabel(entry.path),
-    icon: module.icon,
-    to: entry.path,
-  };
-}
-
 function buildRecentModulesGroup(
-  entries: ModuleHistoryEntry[],
-  modules: AccessibleModules,
+  modules: RecentModule[],
   translate: I18nTranslate,
-  resolvePathLabel: PathLabelResolver,
 ): CommandPaletteGroup | null {
-  const items = entries
-    .slice()
-    .reverse()
-    .map((entry) =>
-      buildRecentModuleItem(entry, modules, translate, resolvePathLabel),
-    )
-    .filter((item): item is CommandPaletteItem => item !== null);
-  if (items.length === 0) return null;
+  if (modules.length === 0) return null;
 
   return {
     id: RECENT_MODULES_GROUP_ID,
     label: translate("commandPalette.groups.recentModules", {}),
-    items,
+    items: modules.map((module) => ({
+      label: resolveI18nKey(translate, module.title),
+      icon: module.icon,
+      to: module.to,
+    })),
   };
 }
 
@@ -69,22 +47,14 @@ export default defineDmsPlugin(() => {
   const { translate } = getPluginI18n();
   const { sortedFavorites } = useFavoritePages();
   const { entries } = useModuleHistory();
-  const { modules, findMatchingRoute } = useSiteLayout();
-
-  const resolvePathLabel: PathLabelResolver = (path) => {
-    const match = findMatchingRoute(path);
-    if (!match) return undefined;
-    return resolveI18nKey(translate, match.metadata.displayName);
-  };
+  const { modules, siteLayoutTree } = useSiteLayout();
 
   const groups = computed<CommandPaletteGroup[]>(() =>
     [
       buildFavoritesGroup(sortedFavorites.value, translate),
       buildRecentModulesGroup(
-        entries.value,
-        modules.value,
+        recentModules(entries.value, modules.value, siteLayoutTree.value),
         translate,
-        resolvePathLabel,
       ),
     ].filter((group): group is CommandPaletteGroup => group !== null),
   );

package/frontend-vue/layers/dms-layout/app/plugins/dms-dev-reload.client.ts

@@ -1,5 +1,5 @@
 import { useDevReloadHolder } from "../build/composables/dev-reload/useDevReloadHolder";
-import { openDevReloadStream } from "../build/utils/dev-reload-stream";
+import { followDevReload } from "../build/utils/dev-reload-stream";
 
 const RELOAD_ENDPOINT_PATH = "/dms/dev/reload";
 
@@ -11,7 +11,7 @@ function resolveBackendBase(): string | null {
 }
 
 /**
- * Dev-only: turn the backend's `reload` stream into a soft refresh.
+ * Dev-only: turn the backend's reload signal into a soft refresh.
  *
  * All the waiting lives in the dev-reload coordinator (see `useDevReloadHolder`), so
  * this plugin and the `useDevReload().awaitRoute` module frontends call
@@ -25,14 +25,19 @@ export default defineDmsPlugin(() => {
 
   const endpoint = `${backendBase}${RELOAD_ENDPOINT_PATH}`;
   const { coordinator } = useDevReloadHolder();
-  const stream = openDevReloadStream({
-    endpoint,
-    onReload: () => {
-      void coordinator.requestRefresh().catch((err: unknown) => {
-        console.error("[dms-dev-reload] Reload handler failed:", err);
-      });
+  // Carried by the user's realtime stream while it is open, by a stream of
+  // its own otherwise (the sign-in page).
+  const stream = followDevReload(
+    {
+      endpoint,
+      onReload: () => {
+        void coordinator.requestRefresh().catch((err: unknown) => {
+          console.error("[dms-dev-reload] Reload handler failed:", err);
+        });
+      },
     },
-  });
+    useUserRealtime(),
+  );
 
   if (import.meta.hot) {
     import.meta.hot.dispose(() => {

package/frontend-vue/layers/dms-layout/app/theme/form-controls.ts

@@ -117,11 +117,16 @@ const inputTheme = {
   ],
 };
 
-/** Select-like triggers: the input scale with explicit line heights. */
+/**
+ * Select-like triggers: the input scale with explicit line heights, so a
+ * select is as tall as the text field beside it. Below md they keep the
+ * input's 16px (14px for sm), as a text field does, so a form on a phone
+ * reads in one size.
+ */
 const SELECT_TRIGGER_SIZES = {
-  sm: { base: "px-2 text-[12.5px]/4" },
-  md: { base: "text-[13px]/5" },
-  xl: { base: "text-[15px]/6" },
+  sm: { base: "px-2 text-sm/4 md:text-[12.5px]/4" },
+  md: { base: "text-base/5 md:text-[13px]/5" },
+  xl: { base: "text-base/6 md:text-[15px]/6" },
 };
 
 /**

package/frontend-vue/layers/dms-layout/app/theme/surfaces.ts

@@ -9,6 +9,10 @@
  */
 
 import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import {
+  CLOSING_OVERLAY_CLASS,
+  UNCOVERED_PANEL_CLASS,
+} from "#dms-ui/app/build/components/containers/constants";
 
 /** Floating panels (menus, popovers, toasts): accented hairline and the pop shadow. */
 const FLOATING_SURFACE =
@@ -18,7 +22,15 @@ const FLOATING_SURFACE =
 const OVERLAY_SURFACE =
   "bg-default ring-(--dms-border-top) shadow-(--dms-shadow-modal)";
 
-const BACKDROP = "bg-(--dms-overlay) backdrop-blur-[2px]";
+/**
+ * Every modal, slideover and drawer, the DMS's or a module's: its backdrop
+ * lets clicks through as soon as it starts closing and fades out quickly,
+ * and the panel animating out no longer catches them either (reka keeps
+ * `pointer-events: auto` inline on both). The panel a closing dialog
+ * uncovered (a drawer under a confirm) takes clicks again at once.
+ */
+const BACKDROP = `bg-(--dms-overlay) backdrop-blur-[2px] ${CLOSING_OVERLAY_CLASS}`;
+const CLOSING_PANEL = `data-[state=closed]:pointer-events-none! ${UNCOVERED_PANEL_CLASS}`;
 
 const cardTheme = {
   slots: {
@@ -90,7 +102,7 @@ const tooltipTheme = {
 
 const modalTheme = {
   slots: {
-    content: "bg-default divide-y-0",
+    content: `bg-default divide-y-0 ${CLOSING_PANEL}`,
     header: "items-start gap-3 min-h-0 px-5 pt-[18px] pb-0 sm:px-5",
     title: "text-[17px] leading-[1.3] font-[650] tracking-[-0.02em]",
     description: "mt-1 text-[13px]",
@@ -116,7 +128,7 @@ const modalTheme = {
 const slideoverTheme = {
   slots: {
     overlay: BACKDROP,
-    content: `${OVERLAY_SURFACE} sm:shadow-(--dms-shadow-modal)`,
+    content: `${OVERLAY_SURFACE} sm:shadow-(--dms-shadow-modal) ${CLOSING_PANEL}`,
     header: "px-5 sm:px-5",
     title: "text-[17px] leading-[1.3] font-[650] tracking-[-0.02em]",
     description: "text-[13px]",
@@ -138,7 +150,7 @@ const DRAWER_EDGE_COMPOUNDS = [
 const drawerTheme = {
   slots: {
     overlay: BACKDROP,
-    content: OVERLAY_SURFACE,
+    content: `${OVERLAY_SURFACE} ${CLOSING_PANEL}`,
   },
   compoundVariants: DRAWER_EDGE_COMPOUNDS,
 };
@@ -178,7 +190,10 @@ const toastTheme = {
  * New toasts rise 16px into place instead of sliding in from a full toast
  * height below: that slide started off-screen, so a toast whose animation
  * had not run yet (background tab, throttled frame) sat cut off under the
- * bottom edge.
+ * bottom edge. A bottom stack rises above a save bar on the bottom edge (the
+ * floating bar, a drawer's footer band): the bar sets how far it reaches
+ * (`--dms-toaster-clearance`, see `toasterClearance.ts`), so a toast never
+ * covers its buttons, and the stack drops back once the bar hides.
  */
 const toasterTheme = {
   slots: {
@@ -203,7 +218,8 @@ const toasterTheme = {
     {
       position: ["bottom-left", "bottom-center", "bottom-right"],
       class: {
-        viewport: "bottom-5",
+        viewport:
+          "bottom-[calc(var(--dms-toaster-clearance,0px)+1.25rem)] transition-[bottom] duration-200 ease-out motion-reduce:transition-none",
         base: "data-[state=open]:animate-none starting:translate-y-4",
       },
     },

package/frontend-vue/layers/dms-layout/app/types/module-store.ts

@@ -10,6 +10,9 @@ export type StoreModuleState =
   | "error"
   | "pending";
 
+/** Where a module's code comes from (`ModuleSourceKind` on the backend). */
+export type ModuleSourceKind = "npm" | "github" | "gitlab" | "git" | "local";
+
 export type StoreFrontendState = "none" | "synced" | "pending" | "unknown";
 
 export type StoreOperationKind =
@@ -86,6 +89,10 @@ export interface StoreListingEntry {
   description: string;
   state: StoreModuleState;
   installedVersion?: string;
+  /** Where its code comes from. */
+  source: ModuleSourceKind;
+  /** Runs from a local or git working copy: active, but no store action. */
+  isWorkingCopy?: boolean;
   /** The version range antelope.config.ts declares. */
   declaredRange?: string;
   latestVersion?: string;
@@ -103,6 +110,8 @@ export interface StoreListingEntry {
   missingInterfaces: MissingInterface[];
   /** Running modules that need an interface only this one implements. */
   dependents: string[];
+  /** The project's own code needs an interface only this module implements. */
+  usedByProject: boolean;
 }
 
 export interface StoreListing {

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

@@ -1,6 +1,7 @@
 import type { BlockText } from "#dms-core/app/types/composed-text";
 import type { BlockAction } from "#dms-ui/app/build/components/blocks/BlockActions.vue";
 import type { PageLiveOptions } from "#dms-ui/app/types/live";
+import type { ModuleSourceKind } from "./module-store";
 
 export type MenuItemType = "label" | "link";
 // MenuItemVariant / MenuItemStatus / MenuItemQuery live in dms-core, the layer
@@ -88,12 +89,19 @@ export type ModuleCatalogEntry = ModuleWithAccess & {
   landingSlug: string;
   status?: ModuleStatus;
   readout?: ModuleReadoutLine[];
+  /**
+   * Where its code comes from, read from the module store; absent for a
+   * module the store does not list.
+   */
+  source?: ModuleSourceKind;
 };
 
 export const MODULE_URL_PREFIX = "/modules";
 
 export interface PageInfo extends Omit<CategoryInfo, "category"> {
   layoutUrl: string;
+  /** Full slug of the page this one is a detail of (`MenuOptions.parent`). */
+  parentSlug?: string;
 }
 
 export type SiteLayoutTree = Omit<PageInfo, "layoutUrl"> & {
@@ -107,15 +115,21 @@ export type SiteLayoutTree = Omit<PageInfo, "layoutUrl"> & {
 // Mirror of LayoutBannerVariant from @antelopejs/interface-dms/layout-banners.
 export type LayoutBannerVariant = "info" | "warning" | "error";
 
+// Mirror of LayoutBannerScope from @antelopejs/interface-dms/layout-banners.
+export type LayoutBannerScope = "app" | "modules" | "everywhere";
+
 /**
  * Mirror of the backend's serialized layout banner. The payload only carries
  * the banners whose visibility resolver passed for this request, so there is
- * nothing left to decide here but the user's own dismissals.
+ * nothing left to decide here but the current route against `scope` and the
+ * user's own dismissals.
  */
 export interface LayoutBanner {
   key: string;
   variant: LayoutBannerVariant;
   order: number;
+  /** The pages it shows on, the backend's `app` unless it says otherwise. */
+  scope: LayoutBannerScope;
   dismissible: boolean;
   icon?: string;
   /** A string (`$` for an i18n key) or a composed text. */

package/frontend-vue/layers/dms-layout/app/utils/account-menu.ts

@@ -5,6 +5,8 @@ export interface AccountMenuEntry {
 }
 
 export const PROFILE_ROUTE = "/settings/user/profile";
+// The account menu is the only way to the settings: the sidebar footer has no
+// Settings entry, so this one opens all of them, not just the user's own.
 export const SETTINGS_ROUTE = "/settings";
 export const SWITCH_ACCOUNT_ROUTE = "/auth/accounts";
 
@@ -26,3 +28,12 @@ export const ACCOUNT_MENU_ENTRIES: AccountMenuEntry[] = [
     to: SWITCH_ACCOUNT_ROUTE,
   },
 ];
+
+/**
+ * Whether `to` is the destination of an account menu entry. The command
+ * palette lists those entries in its session group, so its navigation group
+ * skips their pages instead of offering the same destination twice.
+ */
+export function isAccountMenuRoute(to: string): boolean {
+  return ACCOUNT_MENU_ENTRIES.some((entry) => entry.to === to);
+}

package/frontend-vue/layers/dms-layout/app/utils/breadcrumb.ts

@@ -49,3 +49,60 @@ export function buildBreadcrumbTarget(
 
   return buildPageTarget(path, metadata.validation, currentQuery);
 }
+
+/** The crumb a folded breadcrumb shows for the crumbs it hides. */
+export interface FoldedCrumbs<T> {
+  isFolded: true;
+  slot: string;
+  children: T[];
+}
+
+export function isFoldedCrumbs<T>(
+  crumb: T | FoldedCrumbs<T>,
+): crumb is FoldedCrumbs<T> {
+  return (crumb as Partial<FoldedCrumbs<T>>).isFolded === true;
+}
+
+/**
+ * A phone's breadcrumb: the first and the last crumb, the ones between
+ * folded into one `slot` crumb. A single crumb between them stays as it is,
+ * a "…" holding one name only hid it.
+ */
+export function foldBreadcrumb<T>(
+  crumbs: readonly T[],
+  slot: string,
+): (T | FoldedCrumbs<T>)[] {
+  if (crumbs.length <= 3) return [...crumbs];
+  return [
+    crumbs[0]!,
+    { isFolded: true, slot, children: crumbs.slice(1, -1) },
+    crumbs.at(-1)!,
+  ];
+}
+
+/** What a crumb is compared on: the URL it opens. */
+interface LinkedCrumb {
+  to?: unknown;
+}
+
+/**
+ * `crumbs` with the crumb of the page the current one is a detail of
+ * (`MenuOptions.parent`) before the last, unless a crumb already opens it:
+ * a hidden detail page then leads back to its list.
+ */
+export function withParentCrumb<T extends object>(
+  crumbs: readonly T[],
+  parent: T | null | undefined,
+): T[] {
+  if (!parent || crumbs.length < 2) return [...crumbs];
+  const parentTo = (parent as LinkedCrumb).to;
+  if (
+    crumbs.some(
+      (crumb) =>
+        parentTo !== undefined && (crumb as LinkedCrumb).to === parentTo,
+    )
+  ) {
+    return [...crumbs];
+  }
+  return [...crumbs.slice(0, -1), parent, crumbs.at(-1)!];
+}

package/frontend-vue/layers/dms-layout/app/utils/pageQuery.ts

@@ -57,3 +57,29 @@ export function layoutUrlWithQuery(
   const search = new URLSearchParams(query).toString();
   return search ? `${layoutUrl}?${search}` : layoutUrl;
 }
+
+/**
+ * A page path or layout URL with its `:name` segments filled from `params`;
+ * a segment `params` has no value for stays as it is. The page's layout route
+ * reads them as the page URL's own.
+ */
+export function fillRouteParams(
+  layoutUrl: string,
+  params: Record<string, string>,
+): string {
+  return layoutUrl.replace(/:([^/]+)/g, (segment, name: string) =>
+    name in params ? params[name]! : segment,
+  );
+}
+
+/** Whether two sets of route parameters hold the same values. */
+export function isSameRouteParams(
+  left: Record<string, string>,
+  right: Record<string, string>,
+): boolean {
+  const names = Object.keys(left);
+  return (
+    names.length === Object.keys(right).length &&
+    names.every((name) => left[name] === right[name])
+  );
+}

package/frontend-vue/layers/dms-layout/app/utils/pageRecord.ts

@@ -0,0 +1,71 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import type { ActionTarget } from "#dms-ui/app/composables/table-view/types/action-target";
+
+// The record a page shows (`DefaultLayout({ record })`), as its header
+// buttons read it: `{{record.X}}` in a target, a button acting on it.
+
+/** The record of the page as the header knows it. */
+export type PageRecord =
+  | { status: "loading" }
+  | { status: "loaded"; values: Record<string, unknown> }
+  /** Not found, refused, or its URL names a value the page does not carry. */
+  | { status: "missing" };
+
+/** What the header needs of a button to bind it to the page's record. */
+export interface RecordBoundButton {
+  target?: ActionTarget;
+  requiresRecord?: boolean;
+  disabled?: boolean;
+}
+
+const RECORD_TOKEN = /\{\{\s*record\.([\w.-]+)\s*\}\}/g;
+const NAMES_RECORD = /\{\{\s*record\./;
+
+const targetUrl = (target: ActionTarget | undefined): string | undefined => {
+  const url = (target as { url?: unknown } | undefined)?.url;
+  return typeof url === "string" ? url : undefined;
+};
+
+/** Whether a button acts on the page's record. */
+export function isRecordBound(button: RecordBoundButton): boolean {
+  if (button.requiresRecord) return true;
+  const url = targetUrl(button.target);
+  return !!url && NAMES_RECORD.test(url);
+}
+
+/**
+ * A URL with its `{{record.X}}` tokens filled in, each value percent-encoded
+ * (an address is one query value). A token the record has no value for is
+ * left as written.
+ */
+export function fillRecordTokens(
+  url: string,
+  record: Record<string, unknown>,
+): string {
+  return url.replace(RECORD_TOKEN, (match, key: string) => {
+    const value: unknown = get(record, key);
+    return typeof value === "string" || typeof value === "number"
+      ? encodeURIComponent(String(value))
+      : match;
+  });
+}
+
+/**
+ * The button as the page's record leaves it: unchanged when it does not act
+ * on the record; disabled while the record loads; left out (`null`) when the
+ * record is missing; its target's `{{record.X}}` filled in once loaded.
+ */
+export function withPageRecord<T extends RecordBoundButton>(
+  button: T,
+  record: PageRecord | undefined,
+): T | null {
+  if (!record || !isRecordBound(button)) return button;
+  if (record.status === "missing") return null;
+  if (record.status === "loading") return { ...button, disabled: true };
+  const url = targetUrl(button.target);
+  if (!url) return button;
+  return {
+    ...button,
+    target: { ...button.target, url: fillRecordTokens(url, record.values) },
+  } as T;
+}