@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-layout/app/build/utils/dev-reload-stream.ts

@@ -0,0 +1,80 @@
+const RELOAD_EVENT_NAME = "reload";
+const REOPEN_DELAY_MS = 2000;
+
+export interface DevReloadStreamOptions {
+  endpoint: string;
+  onReload: () => void;
+}
+
+export interface DevReloadStream {
+  close: () => void;
+}
+
+interface StreamState {
+  options: DevReloadStreamOptions;
+  source: EventSource | null;
+  reopenTimer: ReturnType<typeof setTimeout> | null;
+  isConnectionLost: boolean;
+  isClosed: boolean;
+}
+
+// The browser fires `error` on every failed retry while the backend is down,
+// so only the first one after a working connection is worth a warning.
+function handleError(state: StreamState): void {
+  if (!state.isConnectionLost) {
+    state.isConnectionLost = true;
+    console.warn(
+      "[dms-dev-reload] SSE connection lost, waiting for backend...",
+    );
+  }
+  // EventSource retries a dropped connection by itself, but gives up for good
+  // on an answer that is not an event stream (a 404 while the module reloads,
+  // a proxy error page): only then does it need a new source.
+  if (state.source?.readyState !== EventSource.CLOSED) return;
+  scheduleReopen(state);
+}
+
+function scheduleReopen(state: StreamState): void {
+  if (state.reopenTimer || state.isClosed) return;
+  state.reopenTimer = setTimeout(() => {
+    state.reopenTimer = null;
+    open(state);
+  }, REOPEN_DELAY_MS);
+}
+
+function open(state: StreamState): void {
+  if (state.isClosed) return;
+  state.source?.close();
+  const source = new EventSource(state.options.endpoint);
+  state.source = source;
+  source.addEventListener("open", () => {
+    state.isConnectionLost = false;
+  });
+  source.addEventListener("error", () => handleError(state));
+  source.addEventListener(RELOAD_EVENT_NAME, () => state.options.onReload());
+}
+
+/**
+ * Keeps one `reload` stream open to the backend for as long as the page lives,
+ * across backend restarts, and warns once per lost connection.
+ */
+export function openDevReloadStream(
+  options: DevReloadStreamOptions,
+): DevReloadStream {
+  const state: StreamState = {
+    options,
+    source: null,
+    reopenTimer: null,
+    isConnectionLost: false,
+    isClosed: false,
+  };
+  open(state);
+  return {
+    close: () => {
+      state.isClosed = true;
+      if (state.reopenTimer) clearTimeout(state.reopenTimer);
+      state.reopenTimer = null;
+      state.source?.close();
+    },
+  };
+}

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

@@ -0,0 +1,137 @@
+import type { DisplayResolver } from "./modules-catalog";
+
+/**
+ * One official module offered by the module store preview. The list below is
+ * static for now: it stands in for the AntelopeJS module registry the store
+ * will read once installing from the dashboard is possible.
+ */
+export interface ModuleStoreEntry {
+  /**
+   * Id the module registers in the catalog (`RegisterModule({ id })`): a
+   * store entry whose id is installed is hidden.
+   */
+  id: string;
+  /** npm package the AntelopeJS CLI adds to the project. */
+  packageName: string;
+  /** Display name, a `$i18n.key`. */
+  title: string;
+  /** One-line summary, a `$i18n.key`. */
+  description: string;
+  /** Iconify name, the icon the module registers once installed. */
+  icon: string;
+  /** Store category, a `$i18n.key`. */
+  catalogCategory: string;
+}
+
+const CATEGORY = {
+  ai: "$modules.store.category.ai",
+  business: "$modules.store.category.business",
+  content: "$modules.store.category.content",
+  data: "$modules.store.category.data",
+  developer: "$modules.store.category.developer",
+  growth: "$modules.store.category.growth",
+  operations: "$modules.store.category.operations",
+} as const;
+
+function storeEntry(
+  id: string,
+  packageName: string,
+  icon: string,
+  catalogCategory: string,
+): ModuleStoreEntry {
+  return {
+    id,
+    packageName,
+    title: `$modules.store.catalog.${id}.title`,
+    description: `$modules.store.catalog.${id}.description`,
+    icon,
+    catalogCategory,
+  };
+}
+
+/**
+ * The official AntelopeJS DMS modules (one repository each under the
+ * AntelopeJS organisation). Ids and icons are the ones each module registers;
+ * Media and Builder register no catalog module, so theirs come from their
+ * settings page and the v2 design.
+ */
+export const MODULE_STORE_CATALOG: readonly ModuleStoreEntry[] = [
+  storeEntry("ai", "@antelopejs/dms-ai", "i-ph-robot", CATEGORY.ai),
+  storeEntry(
+    "api",
+    "@antelopejs/dms-api",
+    "i-ph-brackets-curly",
+    CATEGORY.developer,
+  ),
+  storeEntry(
+    "automation",
+    "@antelopejs/dms-automation",
+    "i-ph-flow-arrow",
+    CATEGORY.operations,
+  ),
+  storeEntry(
+    "builder",
+    "@antelopejs/dms-builder",
+    "i-ph-hammer",
+    CATEGORY.developer,
+  ),
+  storeEntry(
+    "cicd",
+    "@antelopejs-private/dms-cicd",
+    "i-ph-rocket-launch",
+    CATEGORY.operations,
+  ),
+  storeEntry(
+    "database",
+    "@antelopejs/dms-database",
+    "i-ph-database",
+    CATEGORY.data,
+  ),
+  storeEntry(
+    "lang",
+    "@antelopejs/dms-lang",
+    "i-ph-translate",
+    CATEGORY.content,
+  ),
+  storeEntry(
+    "mailing",
+    "@antelopejs/dms-mailing",
+    "i-ph-envelope-simple",
+    CATEGORY.growth,
+  ),
+  storeEntry(
+    "marketing",
+    "@antelopejs/dms-marketing",
+    "i-ph-chart-line-up",
+    CATEGORY.growth,
+  ),
+  storeEntry("media", "@antelopejs/dms-media", "i-ph-images", CATEGORY.content),
+  storeEntry(
+    "saas",
+    "@antelopejs/dms-saas",
+    "i-ph-buildings",
+    CATEGORY.business,
+  ),
+];
+
+/** The AntelopeJS CLI command that adds a package module to a project. */
+export const MODULE_INSTALL_COMMAND = "ajs project modules add";
+
+/** The full CLI command that adds the module to a project. */
+export function moduleInstallCommand(entry: ModuleStoreEntry): string {
+  return `${MODULE_INSTALL_COMMAND} ${entry.packageName}`;
+}
+
+/**
+ * The store entries not installed on this platform, alphabetical by their
+ * shown name.
+ */
+export function availableStoreModules(
+  catalog: readonly ModuleStoreEntry[],
+  installedIds: ReadonlySet<string>,
+  resolve: DisplayResolver,
+): ModuleStoreEntry[] {
+  return catalog
+    .filter((entry) => !installedIds.has(entry.id))
+    .sort((a, b) => resolve(a.title).localeCompare(resolve(b.title)));
+}

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

@@ -0,0 +1,197 @@
+import type {
+  ModuleCatalogEntry,
+  ModuleStatus,
+  PageInfo,
+} from "../../types/page";
+
+/** Category of the modules that declare none. */
+export const MODULE_CATEGORY_OTHER = "$modules.category_other";
+/** Category filter value that shows every module. */
+export const MODULE_CATEGORY_ALL = "";
+
+export type ModuleSortMode = "recent" | "name";
+
+/** Turns a display string (possibly a `$i18n.key`) into the shown text. */
+export type DisplayResolver = (value: string) => string;
+
+export interface ModulesSummary {
+  installed: number;
+  updates: number;
+  attention: number;
+  beta: number;
+}
+
+export interface ModuleCategoryOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+/**
+ * What search and category filtering read from a module: an installed
+ * catalog entry and a module store entry both carry it.
+ */
+export type FilterableModule = Pick<
+  ModuleCatalogEntry,
+  "id" | "title" | "description" | "catalogCategory"
+>;
+
+/** A page inside a module whose name matches a search the catalog missed. */
+export interface ModulePageMatch {
+  moduleId: string;
+  path: string;
+  pageTitle: string;
+  /** Heading the page sits under in the module, when it has one. */
+  sectionTitle?: string;
+}
+
+export function moduleStatus(entry: ModuleCatalogEntry): ModuleStatus {
+  return entry.status ?? "live";
+}
+
+export function moduleCategory(
+  entry: Pick<ModuleCatalogEntry, "catalogCategory">,
+): string {
+  const category = entry.catalogCategory?.trim();
+  return category ? category : MODULE_CATEGORY_OTHER;
+}
+
+export function summarizeModules(
+  entries: readonly ModuleCatalogEntry[],
+): ModulesSummary {
+  const summary: ModulesSummary = {
+    installed: entries.length,
+    updates: 0,
+    attention: 0,
+    beta: 0,
+  };
+  for (const entry of entries) {
+    const status = moduleStatus(entry);
+    if (status === "update") summary.updates += 1;
+    else if (status === "attention") summary.attention += 1;
+    else if (status === "beta") summary.beta += 1;
+  }
+  return summary;
+}
+
+/**
+ * Category filter options: the categories present, alphabetical, with
+ * "Other" last. The "All" option is the caller's to add.
+ */
+export function moduleCategoryOptions(
+  entries: readonly FilterableModule[],
+  resolve: DisplayResolver,
+): ModuleCategoryOption[] {
+  const counts = new Map<string, number>();
+  for (const entry of entries) {
+    const category = moduleCategory(entry);
+    counts.set(category, (counts.get(category) ?? 0) + 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);
+    });
+}
+
+function normalizeQuery(query: string): string {
+  return query.trim().toLocaleLowerCase();
+}
+
+export function filterModules<T extends FilterableModule>(
+  entries: readonly T[],
+  options: { query: string; category: string; resolve: DisplayResolver },
+): T[] {
+  const query = normalizeQuery(options.query);
+  return entries.filter((entry) => {
+    if (
+      options.category !== MODULE_CATEGORY_ALL &&
+      moduleCategory(entry) !== options.category
+    ) {
+      return false;
+    }
+    if (!query) return true;
+    const haystack = [
+      entry.id,
+      options.resolve(entry.title),
+      options.resolve(entry.description),
+      options.resolve(moduleCategory(entry)),
+    ]
+      .join(" ")
+      .toLocaleLowerCase();
+    return haystack.includes(query);
+  });
+}
+
+/**
+ * `recent`: most recently opened first, never-opened modules after them by
+ * name. `name`: alphabetical.
+ */
+export function sortModules(
+  entries: readonly ModuleCatalogEntry[],
+  mode: ModuleSortMode,
+  visitedAt: ReadonlyMap<string, number>,
+  resolve: DisplayResolver,
+): ModuleCatalogEntry[] {
+  const byName = (a: ModuleCatalogEntry, b: ModuleCatalogEntry) =>
+    resolve(a.title).localeCompare(resolve(b.title));
+  return [...entries].sort((a, b) => {
+    if (mode === "recent") {
+      const delta = (visitedAt.get(b.id) ?? -1) - (visitedAt.get(a.id) ?? -1);
+      if (delta !== 0) return delta;
+    }
+    return byName(a, b);
+  });
+}
+
+/**
+ * A page as `/dms/sitelayout` serves it: the payload also carries the
+ * owning module and the parent category, which the shared type leaves out.
+ */
+type ServedPage = PageInfo & {
+  module?: string;
+  category?: { displayName?: string; isModuleRoot?: boolean };
+};
+
+function isOpenablePage(page: ServedPage): boolean {
+  if (page.hidden || page.hasAccess === false) return false;
+  if (page.type === "label") return false;
+  // A page that needs a URL parameter or a query cannot be opened from a
+  // bare link.
+  if (page.fullSlug.includes(":")) return false;
+  return !page.validation?.requiredQueryParams?.length;
+}
+
+/**
+ * When no module matches a search, finds the module page whose name does, so
+ * the empty state can point to where the thing actually lives.
+ */
+export function findModulePageMatch(
+  pages: Record<string, PageInfo> | undefined,
+  query: string,
+  installedModuleIds: ReadonlySet<string>,
+  resolve: DisplayResolver,
+): ModulePageMatch | null {
+  const needle = normalizeQuery(query);
+  if (!needle || !pages) return null;
+  for (const page of Object.values(pages) as ServedPage[]) {
+    if (!page.module || !installedModuleIds.has(page.module)) continue;
+    if (!isOpenablePage(page)) continue;
+    const pageTitle = resolve(page.displayName);
+    if (!pageTitle.toLocaleLowerCase().includes(needle)) continue;
+    const parent = page.category;
+    const sectionTitle =
+      parent?.displayName && !parent.isModuleRoot
+        ? resolve(parent.displayName)
+        : undefined;
+    return {
+      moduleId: page.module,
+      path: page.fullSlug,
+      pageTitle,
+      sectionTitle,
+    };
+  }
+  return null;
+}

package/frontend-vue/layers/dms-layout/app/components/AppWidgetsDock.vue

@@ -10,38 +10,71 @@
  * Meant to be dropped into the `#footer` slot of the dashboard panel, whose
  * root is `relative`, so the absolute positioning anchors to the content panel
  * (it does not scroll with the body).
+ *
+ * Shown from `sm` only: on a phone the chips sat for good over the start of
+ * what a page pins to its bottom edge (a table's item count, a form's save
+ * bar), and hover-to-unfold has no touch equivalent there. Below `xl`, where
+ * the page gutter is narrow, several widgets fold behind a single launcher
+ * chip that unfolds the stack on hover or focus (a tap focuses it), so the
+ * dock covers one chip of the page instead of a column of them.
  */
+const LAUNCHER_ICON = "i-ph-squares-four-light";
+
 const { widgets } = useAppWidgets();
 
+const { t } = useI18n();
 const { processI18n } = useTranslation();
+
+const folds = computed(() => widgets.value.length > 1);
 </script>
 
 <template>
   <div
     v-if="widgets.length"
-    class="pointer-events-none absolute bottom-2.5 left-2.5 z-40 flex flex-col-reverse items-start gap-2"
+    class="group/dock pointer-events-none absolute bottom-2.5 left-2.5 z-40 hidden flex-col-reverse items-start sm:flex"
   >
-    <div
-      v-for="widget in widgets"
-      :key="widget.id"
-      class="group/widget pointer-events-auto relative flex items-center"
+    <button
+      v-if="folds"
+      type="button"
+      :aria-label="t('widgets_dock.show')"
+      :title="t('widgets_dock.show')"
+      class="border-accented bg-default text-muted focus-visible:ring-primary group-hover/dock:text-highlighted group-focus-within/dock:text-highlighted pointer-events-auto flex size-10 items-center justify-center rounded-[10px] border opacity-50 shadow-lg transition-all duration-200 group-focus-within/dock:opacity-100 group-hover/dock:opacity-100 focus:outline-none focus-visible:ring-2 motion-reduce:transition-none xl:hidden"
     >
-      <button
-        type="button"
-        :aria-label="processI18n(widget.label)"
-        :title="processI18n(widget.label)"
-        class="border-default bg-default text-muted focus-visible:ring-primary group-hover/widget:text-highlighted group-focus-within/widget:text-highlighted flex size-10 items-center justify-center rounded-xl border opacity-50 shadow-lg transition-all duration-200 group-focus-within/widget:scale-105 group-focus-within/widget:opacity-100 group-hover/widget:scale-105 group-hover/widget:opacity-100 focus:outline-none focus-visible:ring-2 motion-reduce:transition-none"
-      >
-        <UIcon :name="widget.icon" class="size-5" />
-      </button>
+      <UIcon :name="LAUNCHER_ICON" class="size-5" />
+    </button>
 
+    <!-- The stack's own bottom padding (not a gap) bridges it to the
+         launcher, so the pointer never crosses a dead strip that would fold
+         it again. -->
+    <div
+      class="flex flex-col-reverse items-start gap-2"
+      :class="
+        folds &&
+        'max-xl:pointer-events-auto max-xl:hidden max-xl:pb-2 max-xl:group-focus-within/dock:flex max-xl:group-hover/dock:flex'
+      "
+    >
       <div
-        class="pointer-events-none invisible absolute bottom-0 left-full z-10 -translate-x-2 pl-2 opacity-0 transition-all duration-200 ease-out group-focus-within/widget:pointer-events-auto group-focus-within/widget:visible group-focus-within/widget:translate-x-0 group-focus-within/widget:opacity-100 group-hover/widget:pointer-events-auto group-hover/widget:visible group-hover/widget:translate-x-0 group-hover/widget:opacity-100 motion-reduce:transition-none"
+        v-for="widget in widgets"
+        :key="widget.id"
+        class="group/widget pointer-events-auto relative flex items-center"
       >
+        <button
+          type="button"
+          :aria-label="processI18n(widget.label)"
+          :title="processI18n(widget.label)"
+          class="border-accented bg-default text-muted focus-visible:ring-primary group-hover/widget:text-highlighted group-focus-within/widget:text-highlighted flex size-10 items-center justify-center rounded-[10px] border opacity-50 shadow-lg transition-all duration-200 group-focus-within/widget:scale-105 group-focus-within/widget:opacity-100 group-hover/widget:scale-105 group-hover/widget:opacity-100 focus:outline-none focus-visible:ring-2 motion-reduce:transition-none"
+        >
+          <UIcon :name="widget.icon" class="size-5" />
+        </button>
+
         <div
-          class="dms-widget-card border-default bg-default relative w-max max-w-sm rounded-xl border shadow-2xl"
+          class="pointer-events-none invisible absolute bottom-0 left-full z-10 -translate-x-2 pl-2 opacity-0 transition-all duration-200 ease-out group-focus-within/widget:pointer-events-auto group-focus-within/widget:visible group-focus-within/widget:translate-x-0 group-focus-within/widget:opacity-100 group-hover/widget:pointer-events-auto group-hover/widget:visible group-hover/widget:translate-x-0 group-hover/widget:opacity-100 motion-reduce:transition-none"
         >
-          <component :is="widget.body" />
+          <div
+            class="dms-widget-card border-accented bg-default relative w-max max-w-[min(24rem,calc(100vw-4.5rem))] rounded-(--dms-radius-card) border shadow-[var(--shadow-lg),var(--dms-halo-accent)]"
+          >
+            <component :is="widget.body" />
+          </div>
         </div>
       </div>
     </div>

package/frontend-vue/layers/dms-layout/app/components/layout/DashboardSearch.vue

@@ -13,5 +13,22 @@ const fuse = COMMAND_PALETTE_FUSE_OPTIONS;
     :fuse="fuse"
     :title="t('commandPalette.dialog.title')"
     :description="t('commandPalette.dialog.description')"
-  />
+  >
+    <!-- v2 footer band: the keys that drive the palette. -->
+    <template #footer>
+      <span class="inline-flex items-center gap-1.5">
+        <UKbd value="↑" size="sm" />
+        <UKbd value="↓" size="sm" />
+        {{ t("commandPalette.footer.navigate") }}
+      </span>
+      <span class="inline-flex items-center gap-1.5">
+        <UKbd value="↵" size="sm" />
+        {{ t("commandPalette.footer.open") }}
+      </span>
+      <span class="inline-flex items-center gap-1.5">
+        <UKbd value="Esc" size="sm" />
+        {{ t("commandPalette.footer.close") }}
+      </span>
+    </template>
+  </UDashboardSearch>
 </template>

package/frontend-vue/layers/dms-layout/app/components/layout/HStack.vue

@@ -27,9 +27,10 @@ const props = withDefaults(defineProps<HStackProps>(), {
       alignItems: alignmentMap[props.alignment],
       justifyContent: distributionMap[props.distribution],
       gap: props.spacing,
+      '--dms-stack-gap': props.spacing,
       flexWrap: props.wrap ? 'wrap' : 'nowrap',
     }"
-    class="w-full"
+    class="dms-hstack w-full"
   >
     <slot />
   </div>

package/frontend-vue/layers/dms-layout/app/components/layout/Spacer.vue

@@ -26,3 +26,28 @@ const props = withDefaults(defineProps<SpacerProps>(), {
     class="dms-spacer"
   />
 </template>
+
+<style>
+/* A spacer adds only the free space it takes, never an extra gap: a stack's
+   gap would otherwise open on both sides of it, doubling the distance between
+   its neighbours whenever there is no free space to fill. */
+.dms-vstack > .dms-spacer:not(:first-child) {
+  margin-block-start: calc(-1 * var(--dms-stack-gap, 0px));
+}
+.dms-vstack > .dms-spacer:first-child {
+  margin-block-end: calc(-1 * var(--dms-stack-gap, 0px));
+}
+.dms-hstack > .dms-spacer:not(:first-child) {
+  margin-inline-start: calc(-1 * var(--dms-stack-gap, 0px));
+}
+.dms-hstack > .dms-spacer:first-child {
+  margin-inline-end: calc(-1 * var(--dms-stack-gap, 0px));
+}
+
+/* In a grid, a spacer holds a cell to line the next ones up with the columns.
+   Once the grid has fewer tracks than its widest row (a phone keeps one),
+   there is no column to line up with: the empty cell would only take a row of
+   its own, and a second gap, so it hides. That rule is a container query each
+   Grid / GridRow emits for its own column count (gridResponsiveStyles), so
+   the server render already lays the grid out as the browser will. */
+</style>

package/frontend-vue/layers/dms-layout/app/components/layout/VStack.vue

@@ -25,8 +25,9 @@ const props = withDefaults(defineProps<VStackProps>(), {
       alignItems: alignmentMap[props.alignment],
       justifyContent: distributionMap[props.distribution],
       gap: props.spacing,
+      '--dms-stack-gap': props.spacing,
     }"
-    class="w-full"
+    class="dms-vstack w-full"
   >
     <slot />
   </div>