@antelopejs/dms 0.11.1 → 0.12.0

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 =

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityEmail.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 { useSecurityFormat } from "../../../../composables/settings/security/useSecurityFormat";
 import {
   SECURITY_ENDPOINT,
@@ -8,7 +8,7 @@ import {
 import SecurityEditPanel from "./SecurityEditPanel.vue";
 import SecurityCodeModal from "./SecurityCodeModal.vue";
 import SecurityPanelField from "./SecurityPanelField.vue";
-import DmsPasswordInput from "#dms-ui/app/build/components/form/PasswordInput.vue";
+import DmsPasswordInput from "#dms-ui/app/entries/components/form/PasswordInput";
 import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 import { REQUIRED_MESSAGE } from "#dms-core/app/composables/useFormValidation";
 import { useFormDirty } from "#dms-ui/app/composables/unsaved-changes/useFormDirty";
@@ -16,12 +16,12 @@ import { useFormDirty } from "#dms-ui/app/composables/unsaved-changes/useFormDir
 const EMAIL_URL = `${SECURITY_ENDPOINT}/email`;
 const CONFIRM_URL = `${EMAIL_URL}/confirm`;
 const PENDING_URL = `${EMAIL_URL}/pending`;
-// Refusals of the code typed in the confirmation dialog.
+
 const CODE_ERRORS = {
   "error.invalid_token": "code",
   "error.token_expired": "code",
 } as const;
-// Too many wrong codes: the change is dropped and a new code must be asked.
+
 const CODE_BURNT = "error.email_change_too_many_attempts";
 const FORGOT_PASSWORD_PATH = "/auth/forgot";
 const INVALID_CURRENT_PASSWORD = "error.invalid_current_password";
@@ -30,7 +30,7 @@ const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const FORM_ID = "security-email-form";
 const EMAIL_FIELD_ID = "security-new-email";
 const CURRENT_FIELD_ID = "security-email-current-password";
-// API refusals that belong to a field of the panel.
+
 const FIELD_CODES = {
   [INVALID_CURRENT_PASSWORD]: "currentPassword",
   [EMAIL_ALREADY_USED]: "email",
@@ -54,9 +54,9 @@ const isCurrentInvalid = ref(false);
 const isCodeOpen = ref(false);
 const isConfirming = ref(false);
 const codeError = ref<string>();
-// Set on submit: the empty fields say they are required.
+
 const isSubmitted = ref(false);
-// An address or a password typed and not submitted yet.
+
 const { dirty: isDirty } = useFormDirty(
   () => ({ email: newEmail.value.trim(), password: currentPassword.value }),
   { initial: () => ({ email: "", password: "" }) },
@@ -73,9 +73,7 @@ const isUnchanged = computed(
     !!trimmedEmail.value &&
     trimmedEmail.value.toLowerCase() === email.value.toLowerCase(),
 );
-// The format is only checked once the field is left, so typing an address
-// doesn't flash an error at every keystroke. Nothing shows while the panel
-// collapses after a save, when the field already holds the saved address.
+
 const emailError = computed(() => {
   if (!isEditing.value) return undefined;
   if (isSubmitted.value && !trimmedEmail.value) {
@@ -102,7 +100,6 @@ const currentError = computed(() => {
     : undefined;
 });
 
-// A server-side mark goes away as soon as its field is edited.
 watch(newEmail, () => {
   isEmailTaken.value = false;
 });
@@ -120,7 +117,9 @@ function resetForm(): void {
 }
 
 /** Shows a field-level API error under its field and focuses it. */
-async function flagField(error: unknown): Promise<boolean> {
+async function flagField(
+  error: Parameters<typeof resolveFieldErrors>[0],
+): Promise<boolean> {
   const [refused] = resolveFieldErrors(error, {
     fields: ["email", "currentPassword"],
     codes: FIELD_CODES,
@@ -190,7 +189,9 @@ async function submit(): Promise<void> {
   }
 }
 
-function isCodeRefusal(error: unknown): boolean {
+function isCodeRefusal(
+  error: Parameters<typeof resolveFieldErrors>[0],
+): boolean {
   return (
     resolveFieldErrors(error, { fields: ["code"], codes: CODE_ERRORS }).fields
       .length > 0

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, type Slot } from "vue";
 import DmsFieldError from "#dms-ui/app/components/field-error/FieldError.vue";
 import { fieldErrorId } from "#dms-core/app/composables/useFieldErrors";
 
@@ -16,12 +16,12 @@ interface SecurityPanelFieldProps {
 
 interface SecurityPanelFieldSlots {
   /** The control; bind `describedby` and `invalid` onto it. */
-  default?: (props: {
+  default?: Slot<{
     describedby: string | undefined;
     invalid: boolean;
-  }) => unknown;
+  }>;
   /** Under the control and its error (a "Forgot your password?" link). */
-  after?: () => unknown;
+  after?: Slot;
 }
 
 const props = withDefaults(defineProps<SecurityPanelFieldProps>(), {

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityPassword.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 { useSecurityFormat } from "../../../../composables/settings/security/useSecurityFormat";
 import {
   SECURITY_ENDPOINT,
@@ -11,7 +11,7 @@ import {
   type SessionHandoff,
   useSessionHandoff,
 } from "../../../../composables/security/useSessionHandoff";
-import DmsPasswordInput from "#dms-ui/app/build/components/form/PasswordInput.vue";
+import DmsPasswordInput from "#dms-ui/app/entries/components/form/PasswordInput";
 import PasswordRules from "#dms-ui/app/components/check-list/PasswordRules.vue";
 import { useFormDirty } from "#dms-ui/app/composables/unsaved-changes/useFormDirty";
 import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
@@ -49,10 +49,9 @@ const currentPassword = ref("");
 const newPassword = ref("");
 const confirmPassword = ref("");
 const isCurrentInvalid = ref(false);
-// Errors show once the field was left or the form submitted, and go away
-// as soon as the value is fixed.
+
 const isSubmitted = ref(false);
-// Something typed and not submitted yet.
+
 const { dirty: isDirty } = useFormDirty(
   () => ({
     currentPassword: currentPassword.value,
@@ -99,7 +98,6 @@ const confirmError = computed(() => {
     : t("page.settings.security.password.mismatch");
 });
 
-// The "incorrect" mark goes away as soon as the password is edited.
 watch(currentPassword, () => {
   isCurrentInvalid.value = false;
 });
@@ -161,8 +159,6 @@ async function submit(): Promise<void> {
     isEditing.value = false;
     await refresh();
   } catch (error) {
-    // A wrong current password is shown under its field; anything else
-    // (rate limit, server error) goes to a toast.
     const isCurrentRefused =
       resolveFieldErrors(error, {
         fields: ["currentPassword"],

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TEXT_LINK_CLASS } from "#dms-ui/app/build/utils/textLink";
-import DmsPasswordInput from "#dms-ui/app/build/components/form/PasswordInput.vue";
+import { TEXT_LINK_CLASS } from "#dms-ui/app/entries/utils/textLink";
+import DmsPasswordInput from "#dms-ui/app/entries/components/form/PasswordInput";
 import { REQUIRED_MESSAGE } from "#dms-core/app/composables/useFormValidation";
 import SecurityDialogFrame, {
   type SecurityDialogTone,

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
-import DmsModalEscHint from "#dms-ui/app/build/components/modal/ModalEscHint.vue";
+import { MONO_CHIP_CLASS } from "#dms-ui/app/entries/utils/monoChip";
+import DmsModalEscHint from "#dms-ui/app/entries/components/modal/ModalEscHint";
 import { useSecurityFormat } from "../../../../composables/settings/security/useSecurityFormat";
 import {
   SECURITY_ENDPOINT,
@@ -37,10 +37,12 @@ interface SessionsRevokedResponse {
 const SESSIONS_URL = `${SECURITY_ENDPOINT}/sessions`;
 const OTHER_SESSIONS_URL = `${SECURITY_ENDPOINT}/other-sessions`;
 const SKELETON_COUNT = 3;
-// "Chrome 150.0.7871.250" reads as "Chrome": the version is noise here.
+
 const BROWSER_VERSION = /\s+[\d.]+$/;
 const DEFAULT_DEVICE_ICON = "i-ph-desktop";
-const DEVICE_ICONS: Record<string, string> = {
+const DEVICE_ICONS: Readonly<
+  Partial<Record<SessionInfo["deviceType"], string>>
+> = {
   desktop: "i-ph-desktop",
   mobile: "i-ph-device-mobile",
   tablet: "i-ph-device-tablet",
@@ -53,23 +55,19 @@ const adoptSessionHandoff = useSessionHandoff();
 const { overview, refresh: refreshOverview } = useSecurityOverview();
 const { formatDate, formatRelative, errorMessage } = useSecurityFormat();
 
-// Read with the page: the server renders the list and hands it over, and
-// the browser says "active 5 minutes ago" as of the same read.
 const list = useApiData<SessionsRead>(SESSIONS_URL, {
   transform: (sessions) => ({
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- useApiData exposes transform input as unknown. The endpoint supplies SessionInfo[] by convention; SessionsRead["sessions"] cannot prove that unchecked response shape without new validation.
     sessions: sessions as SessionInfo[],
     readAt: Date.now(),
   }),
 });
 const sessions = computed(() => list.data.value?.sessions ?? []);
 const readAt = computed(() => list.data.value?.readAt);
-// The list could not be loaded: shown as such, never as "no sessions". A
-// failed reload keeps the list on screen.
+
 const hasLoadError = computed(
   () =>
-    !list.data.value &&
-    !!list.error.value &&
-    list.status.value !== "pending",
+    !list.data.value && !!list.error.value && list.status.value !== "pending",
 );
 const isLoading = computed(() => !list.data.value && !hasLoadError.value);
 const revokingId = ref<string | null>(null);
@@ -145,8 +143,6 @@ async function signOutOthers(): Promise<void> {
   }
 }
 
-// Another block (a password change signing out the other devices) can end
-// sessions: the shared count moving is the cue to reload the list.
 watch(
   () => overview.value?.activeSessions,
   (count, previous) => {
@@ -165,7 +161,6 @@ const retryActions = computed(() => [
     onClick: () => void fetchSessions(),
   },
 ]);
-
 </script>
 
 <template>

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

@@ -6,7 +6,10 @@ import {
   useSecurityOverview,
 } from "../../../../composables/settings/security/useSecurityOverview";
 
-const METHODS_LABEL_KEYS: Record<string, string> = {
+const METHODS_LABEL_KEYS: Record<
+  ReturnType<SecurityOverview["twoFactor"]["methods"]["join"]>,
+  string
+> = {
   "email,totp": "page.settings.security.status.methods_both",
   totp: "page.settings.security.status.methods_totp",
   email: "page.settings.security.status.methods_email",
@@ -139,8 +142,6 @@ const items = computed<StatGroupItem[]>(() => {
   ];
 });
 
-// The summary feeds every block of the page: its failure is said once, here,
-// with the retry that reloads them all.
 const hasLoadError = computed(() => !overview.value && isUnavailable.value);
 const retryActions = computed(() => [
   {
@@ -151,7 +152,6 @@ const retryActions = computed(() => [
     onClick: () => void refresh(),
   },
 ]);
-
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCopyFeedback } from "#dms-ui/app/build/composables/clipboard/useCopyFeedback";
+import { useCopyFeedback } from "#dms-ui/app/entries/composables/clipboard/useCopyFeedback";
 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 type { TotpSetup } from "../../../../composables/settings/security/useSecurityOverview";
@@ -21,7 +21,7 @@ const emit = defineEmits<{
 }>();
 
 const CODE_LENGTH = 6;
-// v2 .cs-step: the two steps of the setup, numbered in an accent disc.
+
 const STEP_NUMBER_CLASS =
   "grid size-6 place-items-center rounded-full border border-(--dms-accent-line) bg-(--dms-accent-tint) font-mono text-[11px] font-semibold text-(--dms-accent)";
 const STEP_TITLE_CLASS = "text-highlighted mt-[3px] text-sm font-semibold";
@@ -43,9 +43,6 @@ const groupedKey = computed(
   () => props.setup?.manualKey.match(KEY_GROUP)?.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) => {
@@ -63,7 +60,7 @@ async function copyKey(): Promise<void> {
 
 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));