@antelopejs/dms 0.11.0 → 0.12.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationMatrixSubject.vue

@@ -19,9 +19,6 @@ const { t } = useI18n();
 const label = computed(() => t(props.subject.labelKey));
 const isLocked = computed(() => props.subject.locked === true);
 
-// A second click while the first save is in flight would race it; the row
-// stays interactive-looking (v2 shows the switch at full strength) and the
-// click is dropped instead.
 const onToggle = (value: boolean) => {
   if (props.state !== "saving") emit("toggle", value);
 };

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationPreferencesForm.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import { EYEBROW_CLASS } from "#dms-ui/app/entries/utils/eyebrow";
 import type { NotificationCategory } from "../../../../composables/notification/useNotificationCatalog";
 import { useNotificationPreferences } from "../../../../composables/notification/useNotificationPreferences";
 import { useNotificationGroupsOpen } from "../../../../composables/notification/useNotificationGroupsOpen";
-import { useInstantSaveHeader } from "../../../../../composables/layout/useInstantSaveHeader";
+import { useInstantSaveHeader } from "#dms-ui/app/composables/layout/useInstantSaveHeader";
 import NotificationMatrixCategory from "./NotificationMatrixCategory.vue";
 import NotificationMatrixSubject from "./NotificationMatrixSubject.vue";
 import {
@@ -11,7 +11,7 @@ import {
   MATRIX_CONTAINER_CLASS,
   MATRIX_GRID_CLASS,
 } from "./notificationDisplay";
-import DmsRowSkeleton from "#dms-ui/app/build/components/skeleton/RowSkeleton.vue";
+import DmsRowSkeleton from "#dms-ui/app/entries/components/skeleton/RowSkeleton";
 
 const PREFERENCES_SKELETON_ROWS = 4;
 
@@ -40,9 +40,6 @@ const visibleCategories = computed(() =>
 const enabledCountOf = (category: NotificationCategory) =>
   subjectsOf(category.id).filter(isEnabled).length;
 
-// The master switch reads only the subjects it can change: a locked subject
-// stays on whatever the user picks, so counting it would flip the switch
-// straight back on after turning the category off.
 const isCategoryOn = (category: NotificationCategory) => {
   const toggleable = toggleableSubjectsOf(category);
   return toggleable.length > 0
@@ -50,8 +47,6 @@ const isCategoryOn = (category: NotificationCategory) => {
     : enabledCountOf(category) > 0;
 };
 
-// Each switch saves on its own: the page header carries the shared
-// "Saved instantly" pill, which flashes while a row saves.
 useInstantSaveHeader(() => saveState.value);
 
 /** Names the direction the failed switch went back to, as v2 words it. */
@@ -64,7 +59,6 @@ const failureMessage = computed(() => {
     ? t("page.settings.notifications.save_failed_off")
     : t("page.settings.notifications.save_failed_on");
 });
-
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/notificationDisplay.ts

@@ -1,9 +1,9 @@
-import { MONO_TAG_CLASS } from "#dms-ui/app/build/utils/monoChip";
+import { MONO_TAG_CLASS } from "#dms-ui/app/entries/utils/monoChip";
 import {
   formatShortDate,
   type RelativeDayBucket,
   relativeDayBucket,
-} from "#dms-ui/app/build/components/activity-feed/activityFeedDays";
+} from "#dms-ui/app/entries/components/activity-feed/activityFeedDays";
 import type {
   NotificationTone,
   UserNotification,
@@ -13,7 +13,7 @@ import type {
  * Notifications without a tone stand out in `primary` until read. Mirrors
  * the server's `resolveNotificationTone` (`src/utils/notification-tones.ts`),
  * which weighs the unread badge of the bell and the navigation with it; a
- * test holds the two together.
+ * repository check holds the two together.
  */
 export const resolveNotificationTone = (
   notification: UserNotification,

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfilePersonalInfo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TEXT_LINK_CLASS } from "#dms-ui/app/build/utils/textLink";
+import { TEXT_LINK_CLASS } from "#dms-ui/app/entries/utils/textLink";
 import {
   type AvatarFieldOptions,
   useProfileAvatar,
@@ -50,15 +50,12 @@ const { user, refresh: refreshSession } = useCurrentUser();
 const avatarOptions = () => props.avatarField?.component?.options ?? {};
 const { upload } = useProfileAvatar(avatarOptions);
 const avatarUrls = useFileReadUrls(avatarOptions().storage);
-// A refused name or picture shows under its field; a failed request is a
-// toast.
+
 const fieldErrors = useFieldErrors({
   fields: { name: NAME_INPUT_ID, avatar: AVATAR_BUTTON_ID },
   codes: { [INVALID_AVATAR]: "avatar" },
 });
 
-// Read with the page: the server renders the name, the address with its
-// verification, and the picture. The form edits a copy of it.
 const profile = await useApiData<ProfileResponse>(() => props.endpoint);
 const isProfileLoaded = computed(
   () => profile.status.value === "success" || profile.status.value === "error",
@@ -69,7 +66,7 @@ const saved = ref<ProfileResponse>(
 );
 const name = ref(saved.value.name ?? "");
 const avatar = ref<AvatarValue | null>(saved.value.avatar ?? null);
-// A picture picked here shows from the file until the profile is saved.
+
 const pickedAvatarUrl = ref<string | null>(null);
 const avatarUrl = computed(() => {
   if (!avatar.value) return null;
@@ -90,7 +87,7 @@ const isAvatarChanged = computed(
   () => (avatar.value?.key ?? null) !== (saved.value.avatar?.key ?? null),
 );
 const isDirty = computed(() => isNameChanged.value || isAvatarChanged.value);
-// Leaving with a new name or picture not saved asks first.
+
 useUnsavedChanges({ dirty: isDirty });
 const changes = computed(() =>
   [
@@ -115,6 +112,7 @@ function pickFile(): void {
 }
 
 async function onFileChange(event: Event): Promise<void> {
+  // SAFETY: The template binds this change listener directly to the file input, which supplies the event target.
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0];
   input.value = "";
@@ -175,7 +173,6 @@ async function save(): Promise<void> {
     isSaving.value = false;
   }
 }
-
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfileSecuritySummary.vue

@@ -3,7 +3,7 @@ import {
   SECURITY_PAGE_PATH,
   useSecurityOverview,
 } from "../../../../composables/settings/security/useSecurityOverview";
-import { iconWellToneOf } from "#dms-ui/app/build/utils/tone";
+import { iconWellToneOf } from "#dms-ui/app/entries/utils/tone";
 import ProfileSummaryRow from "./ProfileSummaryRow.vue";
 
 const { t, locale } = useI18n();
@@ -11,8 +11,7 @@ const { overview, attention, attentionTone, isUnavailable } =
   useSecurityOverview();
 
 const needsAttention = computed(() => attention.value.length > 0);
-// Every point is named, in the Security page's own words, joined the way the
-// language joins a list ("…, … and …").
+
 const attentionText = computed(() =>
   new Intl.ListFormat(locale.value, { type: "conjunction" }).format(
     attention.value.map((item) =>
@@ -20,8 +19,7 @@ const attentionText = computed(() =>
     ),
   ),
 );
-// The well takes the tone of the Security page's navigation badge, as the
-// server weighs what needs attention; quiet when nothing does.
+
 const wellTone = computed(() =>
   overview.value ? iconWellToneOf(attentionTone.value) : "muted",
 );
@@ -34,13 +32,12 @@ const facts = computed(() => {
     { count: data.activeSessions },
     data.activeSessions,
   );
-  // An off two-factor is already the attention line: not said twice.
+
   if (!data.twoFactor.methods.length) return `${sessions}.`;
   const twoFactor = t("page.settings.profile.security_two_factor_on");
   return t("page.settings.profile.security_facts", { twoFactor, sessions });
 });
 
-// The skeleton's shape: the all-set sentence with two sessions.
 const placeholder = computed(
   () =>
     `${t("page.settings.profile.security_all_good")} — ${t(
@@ -51,7 +48,6 @@ const placeholder = computed(
       },
     )}`,
 );
-
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfileSummaryRow.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-// Imported, not resolved by name: a registered component loads on first
-// use, and the well would be missing for a frame when a row's data comes.
+
 import DmsIconWell, {
   type IconWellTone,
 } from "#dms-ui/app/components/icon-well/IconWell.vue";
@@ -39,17 +38,15 @@ const props = withDefaults(defineProps<ProfileSummaryRowProps>(), {
   actionLabel: undefined,
 });
 
-// Letters and digits blanked to one glyph: the skeleton keeps the words'
-// lengths and breaks, and the page never holds a sample "3 unread", even
-// unseen.
 const PLACEHOLDER_CHARACTERS = /[\p{L}\p{N}]/gu;
 const PLACEHOLDER_GLYPH = "x";
-const shape = computed(() =>
+const placeholderText = computed(() =>
   props.placeholder.replace(PLACEHOLDER_CHARACTERS, PLACEHOLDER_GLYPH),
 );
 
 defineSlots<{
   /** The summary, after the lead. */
+  // oxlint-disable-next-line anti-slop/no-unknown-returns -- Vue's Slot return type narrows this existing consumer-provided slot contract; preserve the unrestricted return annotation.
   default?: () => unknown;
 }>();
 
@@ -87,7 +84,7 @@ const { t } = useI18n();
         aria-hidden="true"
         class="bg-transparent bg-[linear-gradient(var(--dms-skeleton),var(--dms-skeleton))] box-decoration-clone bg-size-[100%_12px] bg-center bg-no-repeat text-transparent select-none"
       >
-        {{ shape }}
+        {{ placeholderText }}
       </USkeleton>
       <slot v-else />
     </div>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/region/RegionFormatPreview.vue

@@ -15,11 +15,8 @@ const PREVIEW_FRACTION_DIGITS = 2;
 const { locale, t } = useI18n();
 const { timeZone } = useUserRegionalPreferences();
 
-// Frozen at mount: the preview shows formats, not a ticking clock.
 const previewDate = new Date();
 
-// Recomputed from the session user, which the dashboard reads again after
-// each save of the Language & region form.
 const samples = computed<FormatSample[]>(() => {
   const tag = locale.value;
   return [

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/region/RegionTimeZoneInput.vue

@@ -7,8 +7,6 @@ import {
   timeZoneOffset,
 } from "./timeZones";
 
-// The Language & region form's value for a zone left unset (see
-// `AUTOMATIC_PREFERENCE` on the server).
 const AUTO = "auto";
 const ITEM_HEIGHT = 32;
 
@@ -23,7 +21,6 @@ const model = defineModel<string | null>();
 const { t } = useI18n();
 const { detectedTimeZone } = useUserRegionalPreferences();
 
-// Frozen at mount: the offsets shown are today's.
 const now = new Date();
 
 const options = computed(() => [

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/region/timeZones.ts

@@ -8,10 +8,6 @@ export interface TimeZoneOption {
   offset: string;
 }
 
-type IntlWithSupportedValues = typeof Intl & {
-  supportedValuesOf?: (key: "timeZone") => string[];
-};
-
 /** Offered when the runtime cannot list its zones. */
 const FALLBACK_TIME_ZONES = [
   "UTC",
@@ -40,10 +36,7 @@ const MINUTES_PER_HOUR = 60;
 
 /** Every IANA zone the runtime knows. */
 export function listTimeZones(): string[] {
-  return (
-    (Intl as IntlWithSupportedValues).supportedValuesOf?.("timeZone") ??
-    FALLBACK_TIME_ZONES
-  );
+  return Intl.supportedValuesOf?.("timeZone") ?? FALLBACK_TIME_ZONES;
 }
 
 /** `UTC+02:00`: the offset of `timeZone` at `at`. */

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RoleEditor.vue

@@ -22,7 +22,7 @@ import {
   type RoleEditorField,
   type RoleMemberPreview,
 } from "./role-types";
-import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+import DmsSearchInput from "#dms-ui/app/entries/components/form/SearchInput";
 
 interface RoleEditorProps {
   isNew: boolean;
@@ -80,9 +80,7 @@ defineExpose({
 const NAMED_MEMBERS_LIMIT = 2;
 
 const query = ref("");
-// Every collapsible row, areas and nested rows alike, starts closed: the user
-// opens what they need. A search shows its hits instead of the tree and never
-// touches this set, so clearing it brings the previous state back as is.
+
 const expanded = ref<Set<string>>(new Set());
 
 const hits = computed(() =>
@@ -93,8 +91,7 @@ const hits = computed(() =>
 const hitAreaCount = computed(
   () => new Set((hits.value ?? []).map((hit) => hit.areaId)).size,
 );
-// The permissions of the role that amount to owner-level access, however
-// they were ticked (a parent grants its whole subtree).
+
 const ownerLevelLabels = computed(() =>
   selectedWarningLabels(props.index, props.areas, props.selection, processI18n),
 );
@@ -135,9 +132,6 @@ const actions = computed<DropdownMenuItem[]>(() => [
   },
 ]);
 
-// The tree opens and closes one depth per click (areas are depth 1): expand
-// opens the shallowest depth not fully open, collapse closes the deepest
-// depth with a row shown open (see `nextExpandDepth`, `nextCollapseDepth`).
 const levels = computed(() => buildPermissionLevels(props.areas));
 const depthCount = computed(() => levels.value.levels.length);
 const canExpand = computed(

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePanelHead.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-// v2 .cs-editor head, shared by the role editor and the owner panel: the
-// icon well, the role's name as the panel's heading, then a mono detail.
-
+import type { Slot } from "vue";
 interface RolePanelHeadProps {
   icon: string;
   /** Id of the heading, named by the panel's `aria-labelledby`. */
@@ -16,7 +14,7 @@ const props = withDefaults(defineProps<RolePanelHeadProps>(), {
 
 interface RolePanelHeadSlots {
   /** The role's name, and what follows it (a lock). */
-  default: () => unknown;
+  default: Slot;
 }
 
 defineSlots<RolePanelHeadSlots>();

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionArea.vue

@@ -37,11 +37,7 @@ const childrenId = computed(() => childrenElementId(props.area.node.id));
 const subtitle = computed(() =>
   processI18n(props.area.node.description ?? props.area.section ?? ""),
 );
-// v2 .cs-parea: caret, tri-state box, icon tile, title over its subtitle and
-// the "n/m" count with its bar; the count turns accent when complete. The
-// row reads the editor's width (@container/editor): the hover id goes under
-// 576px, and under 448px (phones) the icon tile and the bar go too and the
-// title wraps, which otherwise kept three letters of it.
+
 const theme = tv({
   slots: {
     root: "group mt-1 grid min-h-[46px] grid-cols-[20px_20px_30px_minmax(0,1fr)_auto] items-center gap-2 rounded-lg px-2.5 py-1.5 hover:bg-elevated @max-md/editor:grid-cols-[20px_20px_minmax(0,1fr)_auto]",

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import { EYEBROW_CLASS } from "#dms-ui/app/entries/utils/eyebrow";
 import {
   joinPath,
   type SelectionCount,

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionLeaf.vue

@@ -56,20 +56,13 @@ const emit = defineEmits<{
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
-// v2 .cs-pleaf: checkbox, name with its hints and description, and the
-// permission id revealed on hover; a changed row is tinted until saved.
 const theme = tv({
   slots: {
     root: "group grid min-h-[42px] cursor-pointer items-center gap-2.5 rounded-[7px] px-2 py-[5px] hover:bg-elevated",
-    // A long identifier-like label (PlaygroundCodeBlock) at the deepest
-    // level on a phone breaks (its text span is min-w-0) instead of
-    // overflowing the card.
+
     name: "flex flex-wrap items-center gap-2 text-[13px] text-default wrap-break-word",
     description: "mt-px text-xs text-muted",
-    // The hover id and the bar read the editor's width (@container/editor):
-    // no id under 576px, no bar under 448px. The id is capped (full in its
-    // title): the auto column grew to a deep node's whole dotted id, which
-    // crushed the label and pushed the row past the card.
+
     id: "max-w-40 min-w-0 truncate font-mono text-[10.5px] font-medium text-dimmed opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 @max-xl/editor:hidden",
     count:
       "flex shrink-0 items-center gap-2 font-mono text-[11px] font-semibold text-dimmed",
@@ -114,7 +107,6 @@ function toggle(): void {
   emit("toggle", props.state !== true);
 }
 
-// A collapsible row opens on a click; its checkbox grants or revokes.
 function onRowClick(): void {
   if (props.expandable) emit("toggle-expanded");
   else toggle();

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionTree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import { EYEBROW_CLASS } from "#dms-ui/app/entries/utils/eyebrow";
 import RolePermissionArea from "./RolePermissionArea.vue";
 import RolePermissionBranch from "./RolePermissionBranch.vue";
 import RolePermissionGroup from "./RolePermissionGroup.vue";
@@ -68,7 +68,6 @@ function autoAddedHintOf(id: string): string | undefined {
   return t("page.settings.roles.editor.auto_added", { name: label });
 }
 
-// Only a closed row hides them: an open one shows its children's own.
 function warningsBelowOf(node: RolePermissionNode): string[] {
   if (props.expanded.has(node.id)) return [];
   return selectedWarningsBelow(props.index, node.id, props.selection);
@@ -86,7 +85,6 @@ function isNewHeading(position: number): boolean {
   return position === 0 || hits[position - 1]?.heading !== heading;
 }
 
-// Handed down the nested branches as one object instead of a dozen props.
 const rowContext = computed<PermissionRowContext>(() => ({
   index: props.index,
   selection: props.selection,

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolesList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TEXT_LINK_CLASS } from "#dms-ui/app/build/utils/textLink";
+import { TEXT_LINK_CLASS } from "#dms-ui/app/entries/utils/textLink";
 import DmsCard from "#dms-ui/app/components/card/Card.vue";
 import DmsEyebrow from "#dms-ui/app/components/section-header/Eyebrow.vue";
 import RoleMemberAvatars from "./RoleMemberAvatars.vue";
@@ -10,7 +10,7 @@ import {
   type RoleOwnersSummary,
   type RoleSummary,
 } from "./role-types";
-import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+import DmsSearchInput from "#dms-ui/app/entries/components/form/SearchInput";
 
 interface RolesListProps {
   roles: RoleSummary[];

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolesListItem.vue

@@ -24,8 +24,6 @@ const props = withDefaults(defineProps<RolesListItemProps>(), {
 const emit = defineEmits<{ select: [] }>();
 const { t } = useI18n();
 
-// v2 .cs-ritem: name and members on one line, the coverage bar below; the
-// active role gets the accent tint and a 2px accent edge.
 const theme = tv({
   slots: {
     root: "grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] gap-x-2.5 gap-y-1.5 border-t border-muted py-3 ps-4 pe-3.5 text-start transition-colors first:border-t-0 hover:bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--dms-accent-line)",

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/role-permissions.ts

@@ -181,7 +181,6 @@ export function nextCollapseDepth(
   levels: PermissionLevels,
   expanded: Set<string>,
 ): number | null {
-  // Rows shown open at the current depth: open, under a row shown open.
   let shownOpen = new Set<string>();
   let deepest: number | null = null;
   for (const [position, ids] of levels.levels.entries()) {

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/useRoleEditor.ts

@@ -1,5 +1,5 @@
 import { watch, type Ref } from "vue";
-import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+import { useNavBadges } from "#dms-ui/app/entries/composables/navigation/useNavBadges";
 import {
   buildPermissionAreas,
   buildPermissionIndex,
@@ -17,7 +17,6 @@ import {
   type RoleSummary,
 } from "./role-types";
 
-// The Owner row the list shows above the stored roles.
 const OWNER_ROW = 1;
 const ROLES_PAGE_ID = "settings.workspace.roles";
 
@@ -111,9 +110,6 @@ export function useRoleEditor(data: Ref<RolesPageData | null>) {
 
   const roles = computed(() => data.value?.overview.roles ?? []);
 
-  // The settings nav shows the role count — the stored roles and the Owner
-  // row, as the list and the server count them; keep it current as roles
-  // are created, duplicated or deleted here.
   const { setNavBadge } = useNavBadges();
   watch(
     () => data.value?.overview.roles.length,
@@ -124,7 +120,7 @@ export function useRoleEditor(data: Ref<RolesPageData | null>) {
     },
     { immediate: true },
   );
-  // Served in menu order, which the settings nav follows too.
+
   const tree = computed(() => data.value?.tree ?? []);
   const index = computed(() => buildPermissionIndex(tree.value));
   const areas = computed(() => buildPermissionAreas(tree.value, processI18n));

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/useRolesApi.ts

@@ -51,8 +51,6 @@ export function useRolesApi() {
       { method: "POST", body: { name } },
     );
 
-  // The table's own delete: the answer of the delete dialog goes as its
-  // body, which the roles' delete guard reads to move the holders.
   const deleteRole = (roleId: string, request: RoleDeleteRequest) =>
     $authFetch<number>(`${ROLES_TABLE_API_PATH}/delete`, {
       method: "DELETE",

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityBackupCodesModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCopyFeedback } from "#dms-ui/app/build/composables/clipboard/useCopyFeedback";
+import { useCopyFeedback } from "#dms-ui/app/entries/composables/clipboard/useCopyFeedback";
 interface SecurityBackupCodesModalProps {
   codes: string[];
   /** Codes replace a previous set, which stopped working. */
@@ -21,12 +21,11 @@ const FILE_TYPE = "text/plain";
 
 const isOpen = defineModel<boolean>("open", { default: false });
 const { t } = useI18n();
-// Copied, the codes stay marked so: the footer says they are kept.
+
 const clipboard = useCopyFeedback(Number.POSITIVE_INFINITY);
 const isCopied = computed(() => clipboard.isCopied(true));
 const isDownloaded = ref(false);
 
-// Shown exactly as they are typed at sign-in: no grouping separator.
 const displayCodes = computed(() => props.codes);
 
 watch(isOpen, (open) => {

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityCodeModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
-import DmsOtpInput from "#dms-ui/app/build/components/form/OtpInput.vue";
+import DmsOtpInput from "#dms-ui/app/entries/components/form/OtpInput";
 import { codeEntryError } from "#dms-core/app/composables/useFormValidation";
 import { useCodeFieldError } from "../../../../composables/settings/security/useCodeFieldError";
 import SecurityDialogFrame, {
@@ -44,9 +44,6 @@ const { flag } = useCodeFieldError(digits, error, codeField);
 
 const code = computed(() => digits.value.join(""));
 
-// The code submits once per entry: "complete" and the button can both fire
-// before "loading" reaches this component, and a second call would replace
-// what the first one produced (a new set of backup codes, for instance).
 const submittedCode = ref<string | null>(null);
 
 watch(isOpen, (open) => {
@@ -59,7 +56,7 @@ watch(code, () => {
 
 function confirm(): void {
   if (props.loading) return;
-  // An empty or partial code is flagged under the cells, not sent.
+
   const missing = codeEntryError(digits.value, CODE_LENGTH);
   if (missing) {
     flag(processApiMessage(missing));

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityDialogFrame.vue

@@ -3,7 +3,7 @@ export type SecurityDialogTone = "primary" | "error" | "warning";
 </script>
 
 <script setup lang="ts">
-import DmsModalEscHint from "#dms-ui/app/build/components/modal/ModalEscHint.vue";
+import DmsModalEscHint from "#dms-ui/app/entries/components/modal/ModalEscHint";
 
 interface SecurityDialogFrameProps {
   title: string;

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityEditPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
+import { nextTick, ref, watch, type Slot } from "vue";
 import { useUnsavedChanges } from "#dms-ui/app/composables/unsaved-changes/useUnsavedChanges";
-import DmsUnsavedStatus from "#dms-ui/app/build/components/form/UnsavedStatus.vue";
+import DmsUnsavedStatus from "#dms-ui/app/entries/components/form/UnsavedStatus";
 
 interface SecurityEditPanelProps {
   /** Id of the form; the trigger and the panel ids derive from it. */
@@ -31,11 +31,11 @@ interface SecurityEditPanelProps {
 
 interface SecurityEditPanelSlots {
   /** The row lead (a DmsListRow with the icon, the value and its meta). */
-  label?: () => unknown;
+  label?: Slot;
   /** The form fields, laid out on the panel's two-column grid. */
-  default?: () => unknown;
+  default?: Slot;
   /** Left of the Cancel / Submit buttons (a checkbox, a note). */
-  footer?: () => unknown;
+  footer?: Slot;
 }
 
 const props = withDefaults(defineProps<SecurityEditPanelProps>(), {
@@ -68,8 +68,6 @@ function open(): void {
   isOpen.value = true;
 }
 
-// The collapsible mounts its content a few ticks after opening: the first
-// field takes the focus as soon as the form exists.
 watch(
   form,
   (element) => {
@@ -89,8 +87,6 @@ async function cancel(): Promise<void> {
   isOpen.value = false;
 }
 
-// Closing (Cancel, Escape or a successful save) from inside the panel hands
-// the focus back to the trigger instead of dropping it on the page.
 watch(isOpen, async (value, previous) => {
   if (value || !previous) return;
   const active =