chore: refactor and remove duplicates

app/src/format.ts

@@ -0,0 +1,3 @@
+export function time(timestamp: number): string {
+  return new Date(timestamp).toLocaleTimeString();
+}

app/src/pages/analog-inspector.ts

@@ -9,6 +9,8 @@ import {
   untracked,
 } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
+import { time } from '../format';
+import { rpcTry as call } from '../rpc';
 import { Select } from '../ui/select';
 
 interface AnalogRoute {
@@ -235,17 +237,6 @@ const KIND_LABEL: Record<Kind, string> = {
   api: 'API',
 };
 
-function call<T>(client: DevframeRpcClient | null, name: string, arg?: unknown): Promise<T | null> {
-  if (!client) return Promise.resolve(null);
-  const rpc = client.scope('ng-devtools').rpc as unknown as {
-    call: (name: string, ...args: unknown[]) => Promise<unknown>;
-  };
-  return rpc.call(name, ...(arg === undefined ? [] : [arg])).then(
-    (value) => value as T,
-    () => null,
-  );
-}
-
 function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth: number }[] = []) {
   for (const route of routes) {
     out.push({ route, depth });
@@ -925,11 +916,6 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     @media (prefers-reduced-motion: reduce) {
       .spinner {
         animation: none;
@@ -1829,14 +1815,6 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth
       font-size: 15px;
       font-weight: 600;
     }
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
   `,
 })
 export class AnalogInspector {
@@ -2074,9 +2052,7 @@ export class AnalogInspector {
     }
   }
 
-  time(at: number): string {
-    return new Date(at).toLocaleTimeString();
-  }
+  readonly time = time;
 
   tryApi(api: ApiRoute) {
     this.method.set(api.method === 'ANY' ? 'GET' : api.method);

app/src/pages/coming-soon.ts

@@ -367,17 +367,6 @@ export interface ComingSoonInfo {
       background: var(--brand);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
     }
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-      border: 0;
-    }
     @media (max-height: 640px) {
       .soon {
         padding-top: 12px;
@@ -429,11 +418,6 @@ export interface ComingSoonInfo {
         opacity: 0;
       }
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     @keyframes shimmer {
       60%,
       100% {

app/src/pages/component-tree.ts

@@ -506,17 +506,6 @@ function bare(name: string): string {
     .muted {
       color: var(--text-2);
     }
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-      border: 0;
-    }
     .intro {
       max-width: 720px;
       margin: 0 0 12px;
@@ -632,11 +621,6 @@ function bare(name: string): string {
     .refresh.spinning svg {
       animation: spin 0.8s linear infinite;
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     .layout {
       display: grid;
       grid-template-columns: minmax(0, 1fr);

app/src/pages/di-inspector.ts

@@ -1066,11 +1066,6 @@ function isTree(value: unknown): value is InjectorNode[] {
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     @media (prefers-reduced-motion: reduce) {
       .spinner {
         animation: none;

app/src/pages/forms-timeline.ts

@@ -1,4 +1,5 @@
 import { Component, computed, input, output, signal } from '@angular/core';
+import { time } from '../format';
 import { FORMS_STYLES, type FormEvent } from './forms-types';
 
 const ORIGINS = ['all', 'user', 'code', 'devtools'] as const;
@@ -351,7 +352,5 @@ export class FormsTimeline {
     return new Date(timestamp).toISOString();
   }
 
-  time(timestamp: number) {
-    return new Date(timestamp).toLocaleTimeString();
-  }
+  readonly time = time;
 }

app/src/pages/forms-types.ts

@@ -1,4 +1,5 @@
 import type { DevframeRpcClient } from 'devframe/client';
+import { rpcTry } from '../rpc';
 
 export type FieldStatus = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
 
@@ -116,20 +117,7 @@ export const SOURCE_LABELS: Record<string, string> = {
   manual: 'setErrors',
 };
 
-export function formsCall<T>(
-  client: DevframeRpcClient | null,
-  name: string,
-  arg?: unknown,
-): Promise<T | null> {
-  if (!client) return Promise.resolve(null);
-  const rpc = client.scope('ng-devtools').rpc as unknown as {
-    call: (name: string, ...args: unknown[]) => Promise<unknown>;
-  };
-  return rpc.call(name, ...(arg === undefined ? [] : [arg])).then(
-    (value) => value as T,
-    () => null,
-  );
-}
+export const formsCall = rpcTry;
 
 export async function formAction(
   client: DevframeRpcClient | null,
@@ -158,14 +146,6 @@ export const FORMS_STYLES = `
   .muted {
     color: var(--text-2);
   }
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
   code {
     font-family: var(--font-mono);
     font-size: 12.5px;
@@ -352,11 +332,6 @@ export const FORMS_STYLES = `
     border: 2px solid var(--border-strong);
     border-top-color: var(--accent);
     border-radius: 50%;
-    animation: forms-spin 0.8s linear infinite;
-  }
-  @keyframes forms-spin {
-    to {
-      transform: rotate(360deg);
-    }
+    animation: spin 0.8s linear infinite;
   }
 `;

app/src/pages/live-route.ts

@@ -262,14 +262,6 @@ type TabId = (typeof TABS)[number]['id'];
       text-align: center;
       font-variant-numeric: tabular-nums;
     }
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
   `,
 })
 export class LiveRoute {

app/src/pages/network-inspector.ts

@@ -11,6 +11,7 @@ import {
 import { JsonPipe } from '@angular/common';
 import type { DevframeRpcClient } from 'devframe/client';
 import { hostPageId } from '../page-id';
+import { rpcCall as call } from '../rpc';
 import { Select, type SelectOption } from '../ui/select';
 
 type HttpSide = 'client' | 'server';
@@ -105,14 +106,6 @@ const EMPTY_DRAFT: RuleDraft = {
   body: '',
 };
 
-function call(client: DevframeRpcClient | null, name: string, arg?: unknown): Promise<unknown> {
-  if (!client) return Promise.resolve(null);
-  const rpc = client.scope('ng-devtools').rpc as unknown as {
-    call: (name: string, ...args: unknown[]) => Promise<unknown>;
-  };
-  return rpc.call(name, ...(arg === undefined ? [] : [arg]));
-}
-
 @Component({
   selector: 'app-network-inspector',
   imports: [JsonPipe, Select],
@@ -573,11 +566,6 @@ function call(client: DevframeRpcClient | null, name: string, arg?: unknown): Pr
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     .toolbar {
       position: sticky;
       top: 0;

app/src/pages/pipes-inspector.ts

@@ -467,14 +467,6 @@ const KIND_OPTIONS: readonly SelectOption<PipeKind>[] = [
     .mono {
       font-family: var(--font-mono);
     }
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-    }
     .intro {
       max-width: 720px;
       margin: 0 0 12px;
@@ -1030,11 +1022,6 @@ const KIND_OPTIONS: readonly SelectOption<PipeKind>[] = [
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     @media (prefers-reduced-motion: reduce) {
       .spinner {
         animation: none;

app/src/pages/route-timeline.ts

@@ -1,5 +1,6 @@
 import { Component, computed, input, signal } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
+import { time } from '../format';
 import {
   SHARED_STYLES,
   routerAction,
@@ -511,9 +512,7 @@ export class RouteTimeline {
     return result === 'false' || /^(UrlTree|RedirectCommand|threw)/.test(result);
   }
 
-  time(timestamp: number) {
-    return new Date(timestamp).toLocaleTimeString();
-  }
+  readonly time = time;
 
   async toggleInstrument(event: Event) {
     const on = (event.target as HTMLInputElement).checked;

app/src/pages/router-types.ts

@@ -1,4 +1,5 @@
 import type { DevframeRpcClient } from 'devframe/client';
+import { rpcTry } from '../rpc';
 
 export interface ActiveRoute {
   path: string;
@@ -173,20 +174,7 @@ export interface LintFinding {
   angular: string;
 }
 
-export function routerCall<T>(
-  client: DevframeRpcClient | null,
-  name: string,
-  arg?: unknown,
-): Promise<T | null> {
-  if (!client) return Promise.resolve(null);
-  const rpc = client.scope('ng-devtools').rpc as unknown as {
-    call: (name: string, ...args: unknown[]) => Promise<unknown>;
-  };
-  return rpc.call(name, ...(arg === undefined ? [] : [arg])).then(
-    (value) => value as T,
-    () => null,
-  );
-}
+export const routerCall = rpcTry;
 
 export function routerAction(
   client: DevframeRpcClient | null,
@@ -456,14 +444,6 @@ export const SHARED_STYLES = `
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
   @media (max-width: 480px) {
     .facts {
       grid-template-columns: minmax(0, 1fr);

app/src/pages/signal-inspector.ts

@@ -455,11 +455,6 @@ const KIND_COLORS: Record<string, string> = {
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
     @media (prefers-reduced-motion: reduce) {
       .spinner {
         animation: none;