@antelopejs/dms 0.11.1 → 0.12.0

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

@@ -1,8 +1,8 @@
 import type {
   DmsBrandingLogo,
   DmsUiColors,
-} from "#dms-core/shared/types/app-config";
-import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+} from "#dms-core/app/entries/shared/types/app-config";
+import { EYEBROW_CLASS } from "#dms-ui/app/entries/utils/eyebrow";
 import { actionsTheme } from "./theme/actions";
 import { dataTheme } from "./theme/data";
 import { formControlsTheme } from "./theme/form-controls";
@@ -14,20 +14,13 @@ 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",
@@ -35,7 +28,6 @@ function dmsColors(): DmsUiColors {
   };
 }
 
-// No email logo: the AntelopeJS logos are SVG, which mail clients refuse.
 function dmsLogo(): DmsBrandingLogo {
   return {
     default: {
@@ -75,13 +67,7 @@ export default {
     dashboardPanel: {
       slots: {
         root: "dms-canvas",
-        // v2 page top padding (28px; 20px on small screens); the container
-        // inside sets the horizontal gutter and the bottom padding, which kept
-        // here would also lift every sticky footer (save bars) off the bottom.
-        // The scrollbar gutter is reserved so centred content doesn't shift
-        // between short and long pages. `sm:p-0` drops Nuxt UI's `sm:p-6`; the
-        // `sm:pt-5` repeats the small-screen top padding so it is not cancelled
-        // between 640 and 1023px.
+
         body: "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto [scrollbar-gutter:stable] p-0 sm:p-0 pt-5 sm:pt-5 lg:pt-7",
       },
     },
@@ -92,8 +78,7 @@ export default {
         right: "gap-0.5",
       },
     },
-    // v2 command palette: a 680px frame one border step up, the deepest
-    // shadow with an accent halo, and a 64px search field.
+
     dashboardSearch: {
       slots: {
         modal:
@@ -120,8 +105,7 @@ export default {
           md: {
             label: `${EYEBROW_CLASS} px-2.5 pt-2.5 pb-1.5 text-dimmed`,
             item: "h-11 items-center gap-3 rounded-[10px] px-2.5 before:rounded-[10px]",
-            // A bordered well around each result's icon; SVG padding shrinks
-            // the glyph inside the 28px box.
+
             itemLeadingIcon:
               "size-7 rounded-lg border border-default bg-(--ui-bg) p-[5px] text-muted",
           },
@@ -139,14 +123,10 @@ export default {
     },
     navigationMenu: {
       slots: {
-        // Section labels as v2 eyebrows (mono 10.5px/600, uppercase, 0.12em
-        // tracking, dimmed), without the category icon.
         label: `${EYEBROW_CLASS} text-dimmed pt-1 pb-1.5 [&>svg]:hidden`,
-        // v2 sections are set apart by spacing alone, with no rule between.
+
         separator: "h-0 my-0.5 bg-transparent",
-        // Sidebar density from the design (.nav-head 13.5px/500, .nav-sub
-        // 13px/450, 10px gap) and smaller icons (design 17px head / 15px sub
-        // vs Nuxt UI's 20px size-5).
+
         link: "text-[13.5px] gap-2.5",
         linkLeadingIcon: "size-[17px]",
         linkTrailingIcon: "size-4",
@@ -154,8 +134,6 @@ export default {
         childLinkIcon: "size-[15px]",
       },
       compoundVariants: [
-        // Active item box in primary tint (design: accent-bg) instead of
-        // the default elevated gray.
         {
           variant: "pill",
           active: true,
@@ -173,9 +151,7 @@ export default {
             link: "before:bg-primary/10 hover:before:bg-primary/15 font-semibold",
           },
         },
-        // Nested active item (design nav-sub.is-active): the box extends
-        // left to the child guide line with a flat edge, and the primary
-        // bar covers the full row height on that line.
+
         {
           orientation: "vertical",
           highlight: true,
@@ -185,24 +161,22 @@ export default {
             link: "before:-start-1.5 before:rounded-s-none after:inset-y-0 after:w-[2px] after:rounded-none",
           },
         },
-        // Top bars and record sub-navigation (theme/navigation.ts).
+
         ...NAVIGATION_MENU_HORIZONTAL_COMPOUNDS,
       ],
     },
-    // Buttons, badges, kbd, tabs.
+
     ...actionsTheme,
-    // Inputs, selects, checkbox, radio, switch, form field, calendar…
+
     ...formControlsTheme,
-    // Cards, menus, popovers, tooltips, overlays, toasts, alerts…
+
     ...surfacesTheme,
-    // Stepper, pagination, links, dashboard sidebar.
+
     ...navigationTheme,
-    // Plain UTable, tree, chip, separator, empty state.
+
     ...dataTheme,
     breadcrumb: {
       slots: {
-        // v2 .breadcrumb: 13.5px medium muted links on a hover tint, the
-        // current segment in ink, and small icons (Nuxt UI defaults to 20px).
         list: "gap-1",
         link: "text-[13.5px] font-medium rounded-[6px] px-1.5 py-[3px] hover:bg-elevated aria-[current=page]:text-highlighted aria-[current=page]:font-semibold aria-[current=page]:hover:bg-transparent",
         linkLeadingIcon: "size-[15px]",

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

@@ -0,0 +1,108 @@
+/* Reduced motion (Settings › Appearance › Accessibility): Tailwind's
+   motion-safe / motion-reduce variants follow the device setting, the
+   `dms-reduce-motion` / `dms-full-motion` class on <html>, before the
+   system's prefers-reduced-motion, which they follow when neither is set. */
+@custom-variant motion-reduce {
+  :root.dms-reduce-motion & {
+    @slot;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :root:not(.dms-full-motion) & {
+      @slot;
+    }
+  }
+}
+@custom-variant motion-safe {
+  :root.dms-full-motion & {
+    @slot;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :root:not(.dms-reduce-motion) & {
+      @slot;
+    }
+  }
+}
+
+/* Self-hosted Geist (SIL OFL 1.1, files and LICENSE.txt in ../fonts).
+   Variable files cover weights 100–900 and keep builds deterministic offline.
+   Geist has no narrow no-break space (U+202F), which French and a few other
+   locales group digits with: a fallback face drew it a fraction of a digit
+   wide, so "1 234" read as "1234". Each file here maps U+202F to its no-break
+   space glyph (fontTools: cmap[0x202F] = cmap[0xA0]); keep that mapping when
+   updating them. */
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  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");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  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");
+}
+
+/* Interface scale: Nuxt UI / Tailwind sizing is rem-based, so scaling the
+   root font-size scales the whole interface while keeping proportions. */
+:root[data-scale="small"] {
+  font-size: 87.5%;
+}
+:root[data-scale="large"] {
+  font-size: 112.5%;
+}
+
+/* Antelope DMS design tokens (DMS design v2, dms-design-mockup-v2/css/tokens.css).
+   "dms" is the cyan DMS product accent, NOT the cobalt --blue-* which is the
+   Labs/foundation color; the neutral scale is the v2 cool slate, whose steps
+   are the v2 surfaces, borders and text colors of both themes. */
+@theme static {
+  /* Geist display/body + Geist Mono. Inter and the system stack are fallbacks. */
+  --font-sans:
+    "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  /* Tailwind v4 preflight sets the base element font from
+     --default-font-family (NOT --font-sans), so wire it through. */
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+
+  --color-dms-50: #e6fbfc;
+  --color-dms-100: #c5f5f8;
+  --color-dms-200: #95ecf0;
+  --color-dms-300: #66e1e8;
+  --color-dms-400: #4dd9e6;
+  --color-dms-500: #2dc1cf;
+  --color-dms-600: #1ba2af;
+  --color-dms-700: #167f8a;
+  --color-dms-800: #136470;
+  --color-dms-900: #114f59;
+  --color-dms-950: #062e35;
+
+  --color-neutral-50: #f4f6f7;
+  --color-neutral-100: #eef1f3;
+  --color-neutral-200: #e2e7ea;
+  --color-neutral-300: #cfd6db;
+  --color-neutral-400: #8a949d;
+  --color-neutral-500: #5b6671;
+  --color-neutral-600: #3a4550;
+  --color-neutral-700: #262e36;
+  --color-neutral-800: #161c21;
+  --color-neutral-900: #10151a;
+  --color-neutral-950: #07090b;
+}

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

@@ -5,114 +5,7 @@
 @plugin "@tailwindcss/typography";
 @source "../../app.config.ts";
 
-/* Reduced motion (Settings › Appearance › Accessibility): Tailwind's
-   motion-safe / motion-reduce variants follow the device setting, the
-   `dms-reduce-motion` / `dms-full-motion` class on <html>, before the
-   system's prefers-reduced-motion, which they follow when neither is set. */
-@custom-variant motion-reduce {
-  :root.dms-reduce-motion & {
-    @slot;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :root:not(.dms-full-motion) & {
-      @slot;
-    }
-  }
-}
-@custom-variant motion-safe {
-  :root.dms-full-motion & {
-    @slot;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    :root:not(.dms-reduce-motion) & {
-      @slot;
-    }
-  }
-}
-
-/* Self-hosted Geist (SIL OFL 1.1, files and LICENSE.txt in ../fonts).
-   Variable files cover weights 100–900 and keep builds deterministic offline.
-   Geist has no narrow no-break space (U+202F), which French and a few other
-   locales group digits with: a fallback face drew it a fraction of a digit
-   wide, so "1 234" read as "1234". Each file here maps U+202F to its no-break
-   space glyph (fontTools: cmap[0x202F] = cmap[0xA0]); keep that mapping when
-   updating them. */
-@font-face {
-  font-family: "Geist";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  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");
-}
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  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");
-}
-
-/* Interface scale: Nuxt UI / Tailwind sizing is rem-based, so scaling the
-   root font-size scales the whole interface while keeping proportions. */
-:root[data-scale="small"] {
-  font-size: 87.5%;
-}
-:root[data-scale="large"] {
-  font-size: 112.5%;
-}
-
-/* Antelope DMS design tokens (DMS design v2, dms-design-mockup-v2/css/tokens.css).
-   "dms" is the cyan DMS product accent, NOT the cobalt --blue-* which is the
-   Labs/foundation color; the neutral scale is the v2 cool slate, whose steps
-   are the v2 surfaces, borders and text colors of both themes. */
-@theme static {
-  /* Geist display/body + Geist Mono. Inter and the system stack are fallbacks. */
-  --font-sans:
-    "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
-  /* Tailwind v4 preflight sets the base element font from
-     --default-font-family (NOT --font-sans), so wire it through. */
-  --default-font-family: var(--font-sans);
-  --default-mono-font-family: var(--font-mono);
-
-  --color-dms-50: #e6fbfc;
-  --color-dms-100: #c5f5f8;
-  --color-dms-200: #95ecf0;
-  --color-dms-300: #66e1e8;
-  --color-dms-400: #4dd9e6;
-  --color-dms-500: #2dc1cf;
-  --color-dms-600: #1ba2af;
-  --color-dms-700: #167f8a;
-  --color-dms-800: #136470;
-  --color-dms-900: #114f59;
-  --color-dms-950: #062e35;
-
-  --color-neutral-50: #f4f6f7;
-  --color-neutral-100: #eef1f3;
-  --color-neutral-200: #e2e7ea;
-  --color-neutral-300: #cfd6db;
-  --color-neutral-400: #8a949d;
-  --color-neutral-500: #5b6671;
-  --color-neutral-600: #3a4550;
-  --color-neutral-700: #262e36;
-  --color-neutral-800: #161c21;
-  --color-neutral-900: #10151a;
-  --color-neutral-950: #07090b;
-}
+@import "./foundation.css";
 
 /* Defaults beat framework tokens, but not unlayered consumer declarations,
    regardless of stylesheet order. */

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onErrorCaptured, ref } from "vue";
-import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import { EYEBROW_CLASS } from "#dms-ui/app/entries/utils/eyebrow";
 
 interface CommandPaletteAssistantAnswerFrameProps {
   /** The assistant's resolved label, shown as the frame's eyebrow. */
@@ -22,11 +22,9 @@ const eyebrowClass = [
   EYEBROW_CLASS,
   "mb-2 flex items-center gap-1.5 text-secondary",
 ];
-// Line widths of the loading skeleton, after the v2 mockup.
+
 const SKELETON_WIDTHS = ["w-[82%]", "w-[64%]", "w-[40%]"];
 
-// A rejected async setup would leave the skeleton up for good: the frame
-// states the failure instead, and the other palette content keeps working.
 onErrorCaptured((error) => {
   console.error("[command-palette] the assistant answer failed", error);
   hasFailed.value = true;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DmsBlockActions from "#dms-ui/app/build/components/blocks/BlockActions.vue";
+import DmsBlockActions from "#dms-ui/app/entries/components/blocks/BlockActions";
 import { useComposedText } from "#dms-core/app/composables/translation/useComposedText";
 
 /**
@@ -13,8 +13,6 @@ import { useComposedText } from "#dms-core/app/composables/translation/useCompos
 const { banners, dismiss } = useLayoutBanners();
 const { processText } = useComposedText();
 
-// Rows read as tinted bands (design .banner strip): no ring, the colour kept
-// for the icon and the hairline between stacked rows.
 const ROW_SEPARATOR: Record<LayoutBannerVariant, string> = {
   info: "border-info/40",
   warning: "border-warning/40",

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

@@ -10,27 +10,19 @@ import { useVisitNavBadges } from "../../composables/navigation/useVisitNavBadge
 import {
   sidePanelWidthStyle,
   useActiveSidePanel,
-} from "../../composables/layout/sidePanelState";
+} from "#dms-ui/app/entries/composables/layout/sidePanelState";
 
-// Sidebar sizes are in px (the v2 240px sidebar). The storage key changed with
-// the unit, so a width saved in % is not read back as px.
 const DASHBOARD_STORAGE_KEY = "dms-dashboard";
 const DASHBOARD_SIZE_UNIT = "px";
-// The v2 page bottom padding (48px, 64px from `lg`) sits on the page region,
-// not on the panel body: the scroll area's own padding would lift every
-// sticky footer (save bars) that far off the bottom of the screen.
+
 const REGION_PADDING_CLASS = "pb-12 lg:pb-16";
-// The widgets dock (shown from `sm`, folded behind one launcher chip below
-// `xl`) floats over the bottom-left corner of the body. The region's bottom
-// padding grows to the height the dock shows, so the end of a page can always
-// scroll out from under the chips.
+
 const DOCK_CLEARANCE_CLASS =
   "pb-12 sm:pb-[max(3rem,var(--dms-dock-clearance-folded,0px))] lg:pb-[max(4rem,var(--dms-dock-clearance-folded,0px))] xl:pb-[max(4rem,var(--dms-dock-clearance,0px))]";
-// One 40px chip plus its 8px gap per widget, the 10px inset and a 12px margin.
+
 const DOCK_CHIP_REM = 3;
 const DOCK_EDGE_REM = 1.375;
-// The open side panel is rendered once for the app (`SidePanelHost`), fixed on
-// the right; from `lg` the frame keeps its width free so the page shrinks.
+
 const SIDE_PANEL_ROOM_CLASS = "lg:end-[min(var(--dms-side-panel-width),60vw)]";
 const dockHeight = (chips: number): string =>
   `${chips * DOCK_CHIP_REM + DOCK_EDGE_REM}rem`;
@@ -46,17 +38,15 @@ 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.
+
 const hasDockClearance = computed(
   () => appWidgets.value.length > 0 && !props.fillHeight,
 );
@@ -66,7 +56,7 @@ const regionClass = computed(() => {
   }
   return hasDockClearance.value ? DOCK_CLEARANCE_CLASS : REGION_PADDING_CLASS;
 });
-// Bound as attributes so a page without widgets renders no empty `style`.
+
 const regionAttrs = computed(() =>
   hasDockClearance.value
     ? {
@@ -79,7 +69,7 @@ const regionAttrs = computed(() =>
 );
 
 const { panel: sidePanel, width: sidePanelWidth } = useActiveSidePanel();
-// Bound as attributes so a frame without a panel renders no empty `style`.
+
 const groupAttrs = computed(() =>
   sidePanel.value
     ? {

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

@@ -9,14 +9,14 @@ import {
   useHeaderActionControls,
 } from "../../composables/layout/useHeaderActionControls";
 import { usePageRecordLabel } from "#dms-core/app/composables/page/usePageRecordLabel";
-import type { CategoryInfo } from "../../../types/page";
+import type { CategoryInfo } from "#dms-core/app/types/page";
 import { resolveModuleLandingSlug } from "../../../utils/moduleLanding";
 import {
   foldBreadcrumb,
   isFoldedCrumbs,
   withParentCrumb,
 } from "../../../utils/breadcrumb";
-import { fillRouteParams } from "../../../utils/pageQuery";
+import { fillRouteParams } from "#dms-core/app/utils/pageQuery";
 
 const HOME_ICON = "i-ph-house-light";
 /** Breadcrumb slot of the folded middle crumbs on small screens. */
@@ -26,8 +26,8 @@ const TOOLBAR_BUTTON_CLASS =
   "text-muted hover:text-highlighted data-[state=open]:text-highlighted";
 /** The crumb naming a row keeps the row's own case (crumbs capitalize). */
 const RECORD_CRUMB_LABEL_CLASS = "first-letter:normal-case";
-// Nuxt UI types an item's `ui` as every breadcrumb slot at once; only the
-// label is restyled here.
+
+// SAFETY: UBreadcrumb reads each item.ui slot optionally; its Pick type requires slots the renderer permits omitting.
 const RECORD_CRUMB_UI = {
   linkLabel: RECORD_CRUMB_LABEL_CLASS,
 } as NonNullable<BreadcrumbItem["ui"]>;
@@ -38,12 +38,8 @@ const { t } = useI18n();
 const appConfig = useDmsAppConfig();
 const { open: sidebarOpen, collapsed: sidebarCollapsed } = useSidebarState();
 
-// Modules register their own header buttons through this generic registry, so
-// core has no knowledge of any specific module.
 const { actions: visibleActions } = useHeaderActions();
-// A `.client` plugin's action is missing from the server markup: drawn while
-// hydrating, its button would be patched onto the next one's node. It joins
-// once the header has mounted.
+
 const isMounted = ref(false);
 onMounted(() => {
   isMounted.value = true;
@@ -54,8 +50,6 @@ const registeredActions = computed(() =>
     : visibleActions.value.filter(isPlainDataHeaderAction),
 );
 
-// The builder button keeps its fixed slot first in the toolbar, and only
-// exists when a module (the Builder) registers the action that drives it.
 const builderAction = computed(() =>
   registeredActions.value.find((action) => action.id === BUILDER_ACTION_ID),
 );
@@ -79,7 +73,7 @@ const homepage = useHomepage();
 const siteLayout = useSiteLayout();
 const { processI18n } = useTranslation();
 const favoritePages = useFavoritePages();
-// The row an edit or details page is about names its last crumb.
+
 const { label: recordLabel } = usePageRecordLabel();
 
 const currentPageInfo = computed((): FavoritePage | null => {
@@ -121,9 +115,7 @@ const toggleCurrentPageFavorite = () => {
 };
 
 /** The page a module's root crumb opens: the module's landing page. */
-function moduleLandingSlug(
-  metadata: CategoryInfo,
-): string | undefined {
+function moduleLandingSlug(metadata: CategoryInfo): string | undefined {
   if (!metadata.isModuleRoot || metadata.hasAccess === false) return undefined;
   const module = siteLayout.modules.value?.[metadata.id];
   if (!module) return undefined;
@@ -150,10 +142,11 @@ const parentCrumb = computed((): BreadcrumbItem | null => {
   const parent = siteLayout.findMatchingRoute(path)?.metadata;
   if (!parent || parent.hasAccess === false) return null;
   const target = buildBreadcrumbTarget(path, parent, route.query);
-  return {
+  const crumb: BreadcrumbItem = {
     label: processI18n(parent.displayName),
-    ...(target ? { to: target } : {}),
   };
+  if (target) crumb.to = target;
+  return crumb;
 });
 
 const breadcrumb = computed((): BreadcrumbItem[] => {
@@ -161,8 +154,6 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
     { icon: HOME_ICON, to: homepage || "/", "aria-label": t("header.home") },
   ];
 
-  // The path only: with the query, the last segment ("data?table=x") matched
-  // no route and the current page dropped out of the breadcrumb.
   if (route.path === (homepage || "/")) {
     return base;
   }
@@ -189,16 +180,16 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
           route.query,
         );
 
-        return {
+        const crumb: BreadcrumbItem = {
           label: processI18n(matchingRoute.metadata?.displayName || path),
-          ...(target ? { to: target } : {}),
         };
+        if (target) crumb.to = target;
+        return crumb;
       })
       .filter((item) => item !== null),
   );
   const crumbs = withParentCrumb(pathCrumbs, parentCrumb.value);
 
-  // Written as the row has it: an email address keeps its lowercase.
   const last = crumbs.at(-1);
   if (recordLabel.value && last && crumbs.length > 1) {
     crumbs[crumbs.length - 1] = {
@@ -210,8 +201,6 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
   return crumbs;
 });
 
-// The middle crumbs fold into a "…" menu (see the `#ellipsis` slot) so a
-// deep page still fits a phone without losing the way back up.
 const mobileBreadcrumb = computed(
   (): (BreadcrumbItem & { children?: DropdownMenuItem[] })[] =>
     foldBreadcrumb(breadcrumb.value, MOBILE_ELLIPSIS_SLOT).map((crumb) => {

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

@@ -4,7 +4,7 @@ import PageHeader from "./PageHeader.vue";
 import PageHeaderActionsOutlet from "./PageHeaderActionsOutlet.vue";
 import PageSkeleton from "./PageSkeleton.vue";
 import type { LayoutHeaderAction } from "./PageHeaderActionBar.vue";
-import { providePageHeaderActions } from "../../../composables/layout/usePageHeaderActions";
+import { providePageHeaderActions } from "#dms-ui/app/composables/layout/usePageHeaderActions";
 
 interface Props {
   hideHeader?: boolean;
@@ -35,9 +35,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerClass: "pb-6",
 });
 
-// The header renders before the page in the slot: its actions come through
-// an outlet that waits for the page's setup (see usePageHeaderActions), and
-// a marker after the slot says the page has rendered.
 const pageHeaderActions = providePageHeaderActions();
 const PageRendered = defineComponent({
   name: "DmsPageRendered",
@@ -47,11 +44,8 @@ const PageRendered = defineComponent({
   },
 });
 
-// After a client navigation the skeleton stands in for the page until its
-// chunk (and its setup) resolves, so the old page is never kept on screen.
 const isPageLoading = useDmsPageLoading();
-// A reloaded "preview as role" tab holds its page back (pre-paint script, see
-// the permission-preview-prepaint plugin) until the preview veils it.
+
 const PAGE_SKELETON_CLASS =
   "hidden [html[data-dms-role-preview=pending]_&]:block";
 const PAGE_SLOT_CLASS =

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

@@ -8,9 +8,9 @@
  * the panel's component.
  */
 import { useMediaQuery } from "@vueuse/core";
-import type { SidePanel } from "../../../composables/useAppSidePanels";
-import { useSidePanel } from "../../../composables/useSidePanel";
-import { sidePanelWidthStyle } from "../../composables/layout/sidePanelState";
+import type { SidePanel } from "#dms-ui/app/composables/useAppSidePanels";
+import { useSidePanel } from "#dms-ui/app/composables/useSidePanel";
+import { sidePanelWidthStyle } from "#dms-ui/app/entries/composables/layout/sidePanelState";
 import { useSidePanelWidth } from "../../composables/layout/useSidePanelWidth";
 
 interface Props {
@@ -19,8 +19,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// The panel belongs to the dashboard: a page without its shell (onboarding,
-// an error page) hides it, and keeps it mounted for the way back.
 const HOST_CLASS =
   "contents [body:not(:has([data-dms-persistent-shell]))_&]:hidden";
 const DESKTOP_QUERY = "(min-width: 1024px)";
@@ -52,14 +50,13 @@ const panelComponent = computed(
   () => resolveDmsComponent(props.panel.component) ?? props.panel.component,
 );
 
-// Escape dismisses the sheet only: docked, the panel is part of the page and
-// its component may give the key a meaning of its own.
 function closeSheetOnEscape(event: KeyboardEvent): void {
   if (event.key !== ESCAPE_KEY || isDocked.value) return;
   close();
 }
 
 function startHandleDrag(event: PointerEvent): void {
+  // SAFETY: The template binds this listener directly to the resize handle div, so currentTarget is that HTMLElement during dispatch.
   (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
   const renderedWidth = panelEl.value?.getBoundingClientRect().width;
   startDrag(event, renderedWidth || width.value);
@@ -71,8 +68,6 @@ function isFocusInside(): boolean {
   return panelEl.value?.contains(document.activeElement) ?? false;
 }
 
-// The sheet covers the page, so focus moves into it unless the panel's own
-// component already took it; closing gives focus back to where it came from.
 onMounted(() => {
   const active = document.activeElement;
   focusBeforeOpen = active instanceof HTMLElement ? active : null;