@antelopejs/dms 0.11.0 → 0.12.0

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));

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

@@ -34,7 +34,7 @@ interface BackupCodesResponse {
 
 const TWO_FACTOR_URL = `${SECURITY_ENDPOINT}/two-factor`;
 const INVALID_CODE_KEY = "page.settings.two_factor.invalid_code";
-// Refusals of the typed code: shown under the code, in its dialog.
+
 const CODE_ERRORS = {
   "error.invalid_2fa_code": "code",
   "error.2fa_code_expired": "code",
@@ -44,8 +44,7 @@ const INVALID_PASSWORD_KEY =
 const PASSWORD_ERRORS = {
   "error.invalid_current_password": "currentPassword",
 } as const;
-// Opening a dialog while the previous one is still leaving nests them, and the
-// leaving one stays on top until the new one closes: let it finish first.
+
 const DIALOG_SWAP_MS = 300;
 const METHODS: MethodConfig[] = [
   {
@@ -114,7 +113,7 @@ const isUnsaved = computed(() =>
   attention.value.includes("backup_codes_unsaved"),
 );
 const isLow = computed(() => attention.value.includes("backup_codes_low"));
-// The backup codes row and its pill, in the tone the server gives them.
+
 const backupTone = computed(() =>
   attentionToneOf(["backup_codes_low", "backup_codes_unsaved"]),
 );
@@ -145,7 +144,10 @@ const removeDescription = computed(() => {
     : t("page.settings.security.two_factor.remove_turns_off");
 });
 
-function fail(error: unknown, fallbackKey: string): void {
+function fail(
+  error: Parameters<typeof errorMessage>[0],
+  fallbackKey: string,
+): void {
   toast.add({ title: errorMessage(error, fallbackKey), color: "error" });
 }
 
@@ -159,14 +161,16 @@ function showCodes(
 }
 
 /** Whether the API refused the typed code itself (not the request). */
-function isCodeError(error: unknown): boolean {
+function isCodeError(error: Parameters<typeof resolveFieldErrors>[0]): boolean {
   return (
     resolveFieldErrors(error, { fields: ["code"], codes: CODE_ERRORS }).fields
       .length > 0
   );
 }
 
-function isPasswordError(error: unknown): boolean {
+function isPasswordError(
+  error: Parameters<typeof resolveFieldErrors>[0],
+): boolean {
   return (
     resolveFieldErrors(error, {
       fields: ["currentPassword"],
@@ -178,7 +182,7 @@ function isPasswordError(error: unknown): boolean {
 /** A refusal of what the open dialog asked for, shown in that dialog. */
 interface FieldRefusal {
   error: Ref<string | undefined>;
-  matches: (error: unknown) => boolean;
+  matches: (error: Parameters<typeof resolveFieldErrors>[0]) => boolean;
   messageKey: string;
 }
 
@@ -262,8 +266,6 @@ async function confirmTotp(code: string): Promise<void> {
   );
 }
 
-// Like the app, email codes turn on only once a code proves they arrive: a
-// mistyped address would otherwise lock the user out at the next sign-in.
 async function startEmail(currentPassword?: string): Promise<void> {
   await run(
     async () => {
@@ -305,9 +307,6 @@ const ADD_HANDLERS: Record<
   email: startEmail,
 };
 
-// Adding a method asks for the account password first, so a borrowed
-// session cannot enrol a second factor of its own. An account without a
-// password (single sign-on only) has nothing to prove it with.
 async function addMethod(method: TwoFactorMethod): Promise<void> {
   if (!hasPassword.value) {
     await ADD_HANDLERS[method]();

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shell/SettingsNav.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { tv } from "tailwind-variants";
-import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
-import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
-import { navBadgeClass } from "#dms-ui/app/build/utils/navBadge";
-import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+import { usePermissionPreview } from "#dms-core/app/entries/composables/auth/usePermissionPreview";
+import { useNavBadges } from "#dms-ui/app/entries/composables/navigation/useNavBadges";
+import { navBadgeClass } from "#dms-ui/app/entries/utils/navBadge";
+import DmsSearchInput from "#dms-ui/app/entries/components/form/SearchInput";
 import {
   findActiveSettingsPath,
   useSettingsNavigation,
@@ -14,8 +14,6 @@ import {
 const SETTINGS_INDEX_PATH = "/settings";
 const ALL_SETTINGS_ICON = "i-ph-squares-four";
 
-// v2 settings nav: title, search, "All settings", then one eyebrow-labelled
-// group per scope. Under lg it folds into a horizontal strip of items.
 const theme = tv({
   slots: {
     root: "flex gap-1.5 overflow-x-auto no-scrollbar max-lg:-mx-4 max-lg:px-4 lg:grid lg:gap-[18px] lg:overflow-visible",
@@ -44,8 +42,7 @@ const theme = tv({
       warning: { trailDot: "bg-warning" },
       error: { trailDot: "bg-error" },
     },
-    // "Preview as role" only, the same hatches as the sidebar's: red for a
-    // page the role could not open, orange for one it opens partially.
+
     previewState: {
       hidden: {
         item: "text-muted dms-hatch-locked",
@@ -59,7 +56,6 @@ const theme = tv({
   },
 });
 
-// Registered id of the settings index ("All settings").
 const SETTINGS_INDEX_ID = "settings";
 
 const ui = computed(() => theme());
@@ -87,9 +83,6 @@ const visibleGroups = computed<SettingsNavGroup[]>(() => {
     .filter((group) => group.pages.length > 0);
 });
 
-// Only the most specific entry is active: on pending invitations, Members
-// (whose path it lies under) is not. Read from every entry, not the searched
-// ones, so a search never moves the highlight.
 const activePath = computed(() =>
   findActiveSettingsPath(
     route.path,
@@ -98,9 +91,6 @@ const activePath = computed(() =>
 );
 const isActive = (to: string): boolean => activePath.value === to;
 
-// Under lg the nav is a horizontal strip wider than the screen: the active
-// item is centred in it on load and on every page change, so a page late in
-// the list (Roles, Member invitations) is not highlighted out of sight.
 const navRoot = useTemplateRef<HTMLElement>("navRoot");
 function revealActiveItem(): void {
   const root = navRoot.value;
@@ -115,17 +105,11 @@ function revealActiveItem(): void {
 onMounted(revealActiveItem);
 watch(() => route.path, revealActiveItem, { flush: "post" });
 
-// The page's badge, counted by the server when the menu loads (`navBadge`)
-// or declared, then kept fresh by the page that shows the count; drawn in
-// its tone, as a status pill is.
 const { navBadgeOf } = useNavBadges();
 const badgeOf = (page: SettingsNavPage) => navBadgeOf(page);
 const badgeClass = (page: SettingsNavPage): string =>
   navBadgeClass(badgeOf(page)?.tone);
 
-// "Preview as role": a settings page the role could not open stays listed,
-// locked, so the preview shows what the role loses; one it opens without all
-// of it is drawn partially locked.
 const preview = usePermissionPreview();
 const PREVIEW_STATE_LABELS = {
   hidden: "page.settings.roles.preview.menu_hidden",

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shortcut/KeyboardShortcut.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// v2 .kbd-combo: the keys of a combination side by side, without separators.
 interface Props {
   keys: string[];
 }

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceAccessibility.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DmsSegmented from "#dms-ui/app/components/segmented/Segmented.vue";
-import type { ReduceMotionPreference } from "#dms-ui/app/build/utils/accessibilityPreferences";
+import type { ReduceMotionPreference } from "#dms-ui/app/entries/utils/accessibilityPreferences";
 import { useAppearanceSave } from "./useAppearanceSave";
 
 const reduceMotionValues: ReduceMotionPreference[] = ["auto", "on", "off"];

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceDeveloper.vue

@@ -2,7 +2,6 @@
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import CssVariablesList from "./CssVariablesList.vue";
 
-// Number of `--ui-*` variables, shown in the summary.
 const cssVariableCount = ref<number | null>(null);
 
 const { t } = useI18n();

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceOptionTile.vue

@@ -13,8 +13,6 @@ interface AppearanceOptionTileProps {
 const props = defineProps<AppearanceOptionTileProps>();
 const selected = defineModel<string>({ required: true });
 
-// v2 .cs-tile: a preview on a muted tile; the chosen one lifts onto the card
-// color with an accent border and halo.
 const theme = tv({
   slots: {
     root: "group flex cursor-pointer flex-col gap-3 rounded-[10px] border p-2.5 pb-3 transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary/60",
@@ -23,8 +21,7 @@ const theme = tv({
     icon: "size-4 shrink-0 text-muted",
     text: "min-w-0 flex-1",
     label: "text-[13px] font-semibold text-highlighted",
-    // Wraps rather than truncates: three tiles in the narrow lg settings
-    // column cut every hint to a word.
+
     hint: "text-[12px] leading-snug text-pretty text-muted",
     radio:
       "grid size-4 shrink-0 place-items-center rounded-full ring-1 ring-inset ring-(--ui-border-accented)",

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/CssVariablesList.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useCopyFeedback } from "#dms-ui/app/build/composables/clipboard/useCopyFeedback";
-import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+import type { CSSProperties } from "vue";
+import { useCopyFeedback } from "#dms-ui/app/entries/composables/clipboard/useCopyFeedback";
+import DmsSearchInput from "#dms-ui/app/entries/components/form/SearchInput";
 
 const CSS_LOAD_DELAY_MS = 100;
 const UI_VARIABLE_PREFIX = "--ui-";
@@ -29,7 +30,6 @@ interface CSSVariable {
   category: VariableCategory;
 }
 
-// First match wins: `--ui-border-…` is a border colour, `--ui-radius` a radius.
 const CATEGORY_PATTERNS: Array<[string, VariableCategory]> = [
   ["-color-", "colors"],
   ["-text", "text"],
@@ -47,7 +47,7 @@ const CATEGORY_ORDER: VariableCategory[] = [
   "shadow",
   OTHER_CATEGORY,
 ];
-// Colour-valued categories draw their swatch as a filled square.
+
 const COLOR_CATEGORIES = new Set<VariableCategory>([
   "colors",
   "text",
@@ -74,7 +74,8 @@ function categoryOf(name: string): VariableCategory {
 
 function collectNames(rules: CSSRuleList, names: Set<string>): void {
   for (const rule of Array.from(rules)) {
-    if ("cssRules" in rule && (rule as CSSGroupingRule).cssRules) {
+    if ("cssRules" in rule && rule.cssRules) {
+      // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- CSSOM rules with cssRules include keyframes, not only CSSGroupingRule; retain the rule-list projection.
       collectNames((rule as CSSGroupingRule).cssRules, names);
     }
     if (rule instanceof CSSStyleRule) {
@@ -85,31 +86,26 @@ function collectNames(rules: CSSRuleList, names: Set<string>): void {
   }
 }
 
-// Reads every `--ui-*` property the stylesheets declare, valued for the
-// current theme (the computed value on <html>).
 function readVariables(): CSSVariable[] {
   const names = new Set<string>();
   for (const sheet of Array.from(document.styleSheets)) {
+    // prettier-ignore
     try {
       collectNames(sheet.cssRules, names);
     } catch {
-      /* cross-origin stylesheets throw on cssRules access */
+      // eslint-disable-line no-empty -- Cross-origin stylesheet rules may be inaccessible.
     }
   }
   const rootStyles = getComputedStyle(document.documentElement);
-  return (
-    Array.from(names)
-      .map((name) => ({
-        name,
-        value: rootStyles.getPropertyValue(name).trim(),
-        category: categoryOf(name),
-      }))
-      .filter((variable) => variable.value !== "")
-      // Natural order, so `-50` comes before `-100` and `-400`.
-      .sort((a, b) =>
-        a.name.localeCompare(b.name, undefined, { numeric: true }),
-      )
-  );
+  return Array.from(names)
+    .map((name) => ({
+      name,
+      value: rootStyles.getPropertyValue(name).trim(),
+      category: categoryOf(name),
+    }))
+    .filter((variable) => variable.value !== "")
+
+    .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));
 }
 
 function refresh(): void {
@@ -147,7 +143,7 @@ const shown = computed(() => {
   );
 });
 
-function swatchStyle(variable: CSSVariable): Record<string, string> {
+function swatchStyle(variable: CSSVariable): CSSProperties {
   if (COLOR_CATEGORIES.has(variable.category)) {
     return { background: `var(${variable.name})` };
   }
@@ -175,7 +171,6 @@ function exportAsCss(): void {
   URL.revokeObjectURL(url);
 }
 
-// Values follow the theme: re-read them when the light/dark class changes.
 let themeObserver: MutationObserver | undefined;
 
 onMounted(() => {

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/ThemePreview.vue

@@ -5,7 +5,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// Mini-app illustration palettes (design appearance.html preview()).
 const L = { bg: "#ffffff", side: "#f1f1f3", bar: "#d7d8de", barD: "#b9bbc4" };
 const D = { bg: "#15151b", side: "#0a0b12", bar: "#2a2a30", barD: "#3a3b46" };
 
@@ -17,7 +16,7 @@ interface PreviewVariant {
 
 const DEFAULT_VARIANT: PreviewVariant = { frame: L.side, side: L, main: D };
 
-const MODE_VARIANTS: Record<string, PreviewVariant> = {
+const MODE_VARIANTS: Record<Props["mode"], PreviewVariant> = {
   light: { frame: L.side, side: L, main: L },
   dark: { frame: D.side, side: D, main: D },
   system: DEFAULT_VARIANT,