Update VPN client and gateway behavior

src/shared/versions.ts

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.23.7',
-  gatewayClient: '0.24.7',
+  macClient: '0.23.8',
+  gatewayClient: '0.24.8',
   gatewayBackend: '0.24.0',
 });
 

src/web/features/connection/ConnectionPanel.tsx

@@ -1,5 +1,7 @@
 import { useState, type ReactNode } from 'react';
 import { ConfirmationDialog } from '../../ui/ConfirmationDialog.js';
+import { CopyButton } from '../../ui/CopyButton.js';
+import { Tooltip } from '../../ui/Tooltip.js';
 import {
   connectionAction,
   connectionDurationParts,
@@ -170,9 +172,9 @@ export function ConnectionPanel({
       >
         {brandSlot}
         {powerButton}
-        {powerUnavailable && <span className="client-tooltip" id="gateway-power-unavailable" role="tooltip">
+        {powerUnavailable && <Tooltip id="gateway-power-unavailable">
           {remoteOwned ? 'Подключением управляет Harbor Gateway' : 'Сначала добавьте подписку и выберите сервер'}
-        </span>}
+        </Tooltip>}
       </div>
       <div className="client-state-detail">
         {connected && !remoteOwned ? (
@@ -216,9 +218,9 @@ export function ConnectionPanel({
                 </span>
               </time>
             </span>
-            <span className="client-tooltip" role="tooltip">
+            <Tooltip>
               {durationMode === 'digital' ? 'Показать время словами' : 'Показать цифровой таймер'}
-            </span>
+            </Tooltip>
           </button>
         ) : (
           <p key="hint">
@@ -254,16 +256,13 @@ export function ConnectionPanel({
           <div className="client-proxy-actions">
             {proxyKinds.map(([kind, label]) => {
               const feedback = copyFeedback?.[kind];
-              return <button
-                className={`client-copy-button${feedback ? feedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
-                type="button"
+              return <CopyButton
+                label={label}
+                feedback={feedback}
                 key={kind}
-                aria-label={`Скопировать ${label}: ${kind === 'gateway' ? gatewayAddress : proxyUrls[kind]}`}
+                ariaLabel={`Скопировать ${label}: ${kind === 'gateway' ? gatewayAddress : proxyUrls[kind]}`}
                 onClick={() => onCopyProxy(kind)}
-              >
-                <span className="client-copy-label">{label}</span>
-                {feedback && <span className="client-copy-feedback" aria-hidden="true" key={feedback.cycle}>{feedback.failed ? 'Ошибка' : 'Скопировано'}</span>}
-              </button>;
+              />;
             })}
           </div>
         </div>

src/web/features/devices/DevicesFeature.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { RailAction } from '../../ui/RailAction.js';
 import {
   formatByteString,
   formatLastSeen,
@@ -191,13 +192,13 @@ export function useDevicesFeature({
 export type DevicesFeature = ReturnType<typeof useDevicesFeature>;
 
 export function DevicesToggle({ feature, onToggle }: { feature: DevicesFeature; onToggle: () => void }) {
-  return <button
-    ref={feature.toggleRef}
-    className={`client-instructions-toggle client-devices-toggle${feature.isOpen ? ' is-open' : ''}`}
-    type="button"
-    aria-expanded={feature.isOpen}
-    aria-controls="client-devices"
-    aria-label={feature.isOpen ? 'Закрыть устройства' : 'Устройства Gateway'}
+  return <RailAction
+    buttonRef={feature.toggleRef}
+    className="client-instructions-toggle client-devices-toggle"
+    open={feature.isOpen}
+    controls="client-devices"
+    ariaLabel={feature.isOpen ? 'Закрыть устройства' : 'Устройства Gateway'}
+    label="Устройства"
     onClick={onToggle}
   >
     <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -205,8 +206,7 @@ export function DevicesToggle({ feature, onToggle }: { feature: DevicesFeature;
       <rect className="client-rail-device-secondary" x="13.5" y="8" width="7" height="7" rx="1.5" />
       <path className="client-rail-device-link" d="M6 19h12M7 15v4M17 15v4" />
     </svg>
-    <span>Устройства</span>
-  </button>;
+  </RailAction>;
 }
 
 export function GatewayTrafficSummary({ feature, now }: { feature: DevicesFeature; now: number }) {

src/web/features/devices/DevicesPanel.tsx

@@ -5,8 +5,9 @@ import {
   useRef,
   useState,
   type CSSProperties,
-  type ReactNode,
 } from 'react';
+import { Drawer } from '../../ui/Drawer.js';
+import { Tooltip } from '../../ui/Tooltip.js';
 import { copyText } from '../../utils/clientControls.js';
 import {
   byteString,
@@ -40,10 +41,6 @@ function requestMessage(value: unknown) {
   return typeof message === 'string' ? message : undefined;
 }
 
-function Tooltip({ children }: { children: ReactNode }) {
-  return <span className="client-tooltip" role="tooltip">{children}</span>;
-}
-
 function TextMorph({ from, to }: { from: string; to: string }) {
   const anchor = from.length >= to.length ? from : to;
   return <span className="client-text-morph" aria-hidden="true">
@@ -280,22 +277,17 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
   }
 
   return (
-    <aside
-      ref={panelRef}
+    <Drawer
+      panelRef={panelRef}
+      closeRef={closeRef}
       id="client-devices"
-      className={`client-drawer client-instructions client-devices${open ? ' is-open' : ''}`}
-      aria-labelledby="client-devices-title"
-      aria-hidden={!open}
-      inert={!open ? true : undefined}
+      className="client-instructions client-devices"
+      sheetClassName="client-instructions-sheet client-devices-sheet"
+      open={open}
+      labelledBy="client-devices-title"
+      closeLabel="Закрыть устройства"
+      onClose={onClose}
     >
-      <div className="client-drawer-sheet client-instructions-sheet client-devices-sheet">
-        <button
-          ref={closeRef}
-          className="client-drawer-close"
-          type="button"
-          aria-label="Закрыть устройства"
-          onClick={onClose}
-        >×</button>
         <header className="client-instructions-header client-devices-header">
           <div className="client-devices-kicker">
             <span>Gateway · {devices.length}</span>
@@ -583,7 +575,6 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
             </article>;
           })}
         </div>
-      </div>
-    </aside>
+    </Drawer>
   );
 }

src/web/features/diagnostics/ConnectivityDiagnosticsPanel.tsx

@@ -6,6 +6,8 @@ import {
   type FormEvent,
 } from 'react';
 import { flushSync } from 'react-dom';
+import { Drawer } from '../../ui/Drawer.js';
+import { Tooltip } from '../../ui/Tooltip.js';
 import {
   CONNECTIVITY_IP_SOURCES,
   CONNECTIVITY_SITES,
@@ -324,23 +326,19 @@ export function ConnectivityDiagnosticsPanel({
   const { isOpen: open, panelRef, closeRef, close: onClose } = feature;
 
   return (
-    <aside
-      ref={panelRef}
+    <Drawer
+      panelRef={panelRef}
+      closeRef={closeRef}
+      sheetRef={sheetRef}
       id="client-diagnostics"
-      className={`client-drawer client-instructions client-diagnostics${open ? ' is-open' : ''}`}
-      aria-labelledby="client-diagnostics-title"
-      aria-hidden={!open}
-      inert={!open ? true : undefined}
+      className="client-instructions client-diagnostics"
+      sheetClassName="client-instructions-sheet client-diagnostics-sheet"
+      open={open}
+      labelledBy="client-diagnostics-title"
+      closeLabel="Закрыть диагностику"
+      onClose={onClose}
+      leading={<span ref={runnerRef} className="client-diagnostics-active-marker" aria-hidden="true" />}
     >
-      <div ref={sheetRef} className="client-drawer-sheet client-instructions-sheet client-diagnostics-sheet">
-        <span ref={runnerRef} className="client-diagnostics-active-marker" aria-hidden="true" />
-        <button
-          ref={closeRef}
-          className="client-drawer-close"
-          type="button"
-          aria-label="Закрыть диагностику"
-          onClick={onClose}
-        >×</button>
         <header className="client-instructions-header client-diagnostics-header">
           <span>{isGateway ? 'Gateway' : 'Connect'} · Direct ↔ VPN</span>
           <div className="client-diagnostics-title-row">
@@ -358,7 +356,7 @@ export function ConnectivityDiagnosticsPanel({
                   <path d="M20 11a8 8 0 1 0-2.3 6.7M20 5v6h-6" />
                 </svg>
               </button>
-              <span className="client-tooltip" role="tooltip">Проверить маршруты</span>
+              <Tooltip>Проверить маршруты</Tooltip>
             </span>
           </div>
         </header>
@@ -420,7 +418,7 @@ export function ConnectivityDiagnosticsPanel({
                 <span role="cell"><Status value={resultStatus(direct, running)} route={`Напрямую, ${site.label}`} /></span>
                 <span role="cell"><Status value={resultStatus(vpn, running, result?.vpn?.available !== false)} route={`VPN, ${site.label}`} /></span>
                 <button
-                  className="client-local-rule-delete"
+                  className="client-row-delete"
                   type="button"
                   aria-label={`Удалить сервис ${site.label}`}
                   disabled={serviceEditorBlocked}
@@ -466,7 +464,7 @@ export function ConnectivityDiagnosticsPanel({
               <button type="submit" disabled={serviceEditorBlocked}>Добавить</button>
             </span>
             <button
-              className="client-local-rule-delete"
+              className="client-row-delete"
               type="button"
               aria-label="Отменить добавление сервиса"
               onClick={() => removeService('draft')}
@@ -480,9 +478,9 @@ export function ConnectivityDiagnosticsPanel({
 
           {!sites.length && !adding && <p className="client-diagnostics-services-empty">Сервисов пока нет.</p>}
 
-          <div className="client-local-rule-add-slot client-diagnostics-add-slot">
+          <div className="client-row-add-slot client-diagnostics-add-slot">
             <button
-              className="client-local-rule-add"
+              className="client-row-add"
               type="button"
               disabled={serviceEditorBlocked || adding || customServices.length >= MAX_CUSTOM_DIAGNOSTIC_SERVICES}
               onClick={() => setAdding(true)}
@@ -493,7 +491,6 @@ export function ConnectivityDiagnosticsPanel({
           </div>
         </section>
 
-      </div>
-    </aside>
+    </Drawer>
   );
 }

src/web/features/diagnostics/DiagnosticsFeature.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { RailAction } from '../../ui/RailAction.js';
 
 export function useDiagnosticsFeature() {
   const [isOpen, setIsOpen] = useState(false);
@@ -47,19 +48,18 @@ export function DiagnosticsToggle({
   feature: DiagnosticsFeature;
   onToggle: () => void;
 }) {
-  return <button
-    ref={feature.toggleRef}
-    className={`client-instructions-toggle client-diagnostics-toggle${feature.isOpen ? ' is-open' : ''}`}
-    type="button"
-    aria-expanded={feature.isOpen}
-    aria-controls="client-diagnostics"
-    aria-label={feature.isOpen ? 'Закрыть диагностику' : 'Проверить маршруты'}
+  return <RailAction
+    buttonRef={feature.toggleRef}
+    className="client-instructions-toggle client-diagnostics-toggle"
+    open={feature.isOpen}
+    controls="client-diagnostics"
+    ariaLabel={feature.isOpen ? 'Закрыть диагностику' : 'Проверить маршруты'}
+    label="Диагностика"
     onClick={onToggle}
   >
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <path className="client-rail-diagnostics-base" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
       <path className="client-rail-diagnostics-pulse" pathLength="1" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
     </svg>
-    <span>Диагностика</span>
-  </button>;
+  </RailAction>;
 }

src/web/features/instructions/InstructionsFeature.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
+import { CopyButton } from '../../ui/CopyButton.js';
+import { Drawer } from '../../ui/Drawer.js';
+import { RailAction } from '../../ui/RailAction.js';
 import { copyText } from '../../utils/clientControls.js';
 import { instructionBlocks } from './instructionBlocks.js';
 
@@ -135,16 +138,12 @@ function InstructionBlock({
               const feedback = copyFeedback[action.id];
               return <div className="client-instruction-copy" key={action.id}>
                 <span>{action.label}</span>
-                <button
-                  className={`client-copy-button client-instruction-copy-button${feedback ? feedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
-                  type="button"
+                <CopyButton
+                  className="client-instruction-copy-button"
+                  label="Скопировать"
+                  feedback={feedback}
                   onClick={() => copyInstruction(action)}
-                >
-                  <span className="client-copy-label">Скопировать</span>
-                  {feedback && <span className="client-copy-feedback" aria-hidden="true">
-                    {feedback.failed ? 'Ошибка' : 'Скопировано'}
-                  </span>}
-                </button>
+                />
               </div>;
             })}
             <span className="client-live-region" role="status" aria-live="polite">
@@ -238,21 +237,20 @@ export function InstructionsToggle({
   feature: InstructionsFeature;
   onToggle: () => void;
 }) {
-  return <button
-    ref={feature.toggleRef}
-    className={`client-instructions-toggle${feature.isOpen ? ' is-open' : ''}`}
-    type="button"
-    aria-expanded={feature.isOpen}
-    aria-controls="client-instructions"
-    aria-label={feature.isOpen ? 'Закрыть инструкции' : 'Как использовать'}
+  return <RailAction
+    buttonRef={feature.toggleRef}
+    className="client-instructions-toggle"
+    open={feature.isOpen}
+    controls="client-instructions"
+    ariaLabel={feature.isOpen ? 'Закрыть инструкции' : 'Как использовать'}
+    label="Как использовать"
     onClick={onToggle}
   >
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <circle className="client-rail-info-ring" cx="12" cy="12" r="8.5" pathLength="1" />
       <path d="M12 11v5M12 8h.01" />
     </svg>
-    <span>Как использовать</span>
-  </button>;
+  </RailAction>;
 }
 
 export function InstructionsPanel({
@@ -262,40 +260,34 @@ export function InstructionsPanel({
   feature: InstructionsFeature;
   isGateway: boolean;
 }) {
-  return <aside
-    ref={feature.panelRef}
+  return <Drawer
+    panelRef={feature.panelRef}
+    closeRef={feature.closeRef}
     id="client-instructions"
-    className={`client-drawer client-instructions${feature.isOpen ? ' is-open' : ''}`}
-    aria-labelledby="instructions-title"
-    aria-hidden={!feature.isOpen}
-    inert={!feature.isOpen ? true : undefined}
+    className="client-instructions"
+    sheetClassName="client-instructions-sheet"
+    open={feature.isOpen}
+    labelledBy="instructions-title"
+    closeLabel="Закрыть инструкции"
+    onClose={feature.close}
   >
-    <div className="client-drawer-sheet client-instructions-sheet">
-      <button
-        ref={feature.closeRef}
-        className="client-drawer-close"
-        type="button"
-        aria-label="Закрыть инструкции"
-        onClick={feature.close}
-      >×</button>
-      <header className="client-instructions-header">
-        <span>Подключение</span>
-        <h2 id="instructions-title">Как использовать {isGateway ? 'Gateway' : 'прокси'}</h2>
-        <div className="client-instructions-intro">
-          {feature.intro.paragraphs?.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
-        </div>
-      </header>
-
-      <div className="client-instruction-list">
-        {feature.guides.map((block) => (
-          <InstructionBlock
-            block={block}
-            key={block.id}
-            open={block.id === feature.openInstructionId}
-            onToggle={() => feature.toggleInstruction(block.id)}
-          />
-        ))}
+    <header className="client-instructions-header">
+      <span>Подключение</span>
+      <h2 id="instructions-title">Как использовать {isGateway ? 'Gateway' : 'прокси'}</h2>
+      <div className="client-instructions-intro">
+        {feature.intro.paragraphs?.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
       </div>
+    </header>
+
+    <div className="client-instruction-list">
+      {feature.guides.map((block) => (
+        <InstructionBlock
+          block={block}
+          key={block.id}
+          open={block.id === feature.openInstructionId}
+          onToggle={() => feature.toggleInstruction(block.id)}
+        />
+      ))}
     </div>
-  </aside>;
+  </Drawer>;
 }

src/web/features/routing/RoutingFeature.tsx

@@ -4,13 +4,14 @@ import {
   useState,
   type FormEvent,
   type ReactNode,
-  type RefObject,
 } from 'react';
 import { flushSync } from 'react-dom';
 import { canAppendRouteRule } from '../../../shared/routingRules.js';
 import type { RouteRule } from '../../../shared/contracts/state.js';
 import { operationBlocked } from '../../state/operations.js';
 import { ConfirmationDialog } from '../../ui/ConfirmationDialog.js';
+import { Drawer } from '../../ui/Drawer.js';
+import { RailAction } from '../../ui/RailAction.js';
 
 const ROUTE_RULE_OPTIONS: Array<[RouteRule['type'], string]> = [
   ['domain', 'Точный домен'],
@@ -393,18 +394,22 @@ export function RoutingToggle({
 }) {
   const disabled = gatewayDirect || (isGateway && !hasSubscription);
   return (
-    <button
-      ref={feature.toggleRef}
-      className={`client-local-rules-toggle${feature.isOpen ? ' is-open' : ''}${feature.pendingRestart ? ' has-pending' : ''}`}
-      type="button"
+    <RailAction
+      buttonRef={feature.toggleRef}
+      className={`client-local-rules-toggle${feature.pendingRestart ? ' has-pending' : ''}`}
+      open={feature.isOpen}
+      controls="client-local-rules"
       disabled={disabled}
-      aria-expanded={feature.isOpen}
-      aria-controls="client-local-rules"
-      aria-label={disabled
+      ariaLabel={disabled
         ? hasSubscription
           ? 'Локальные правила недоступны: сейчас работают правила Harbor Gateway'
           : 'Локальные правила недоступны: сначала добавьте подписку'
         : feature.isOpen ? 'Закрыть локальные правила' : 'Настроить локальные правила'}
+      label={disabled
+        ? hasSubscription
+          ? 'Локальные правила недоступны: сейчас работают правила Gateway'
+          : 'Сначала добавьте подписку'
+        : feature.pendingRestart ? 'Правила ждут перезапуска' : 'Локальные правила'}
       onClick={() => feature.isOpen ? feature.requestClose() : onOpen()}
     >
       <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -412,12 +417,7 @@ export function RoutingToggle({
         <circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" />
         <circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" />
       </svg>
-      <span>{disabled
-        ? hasSubscription
-          ? 'Локальные правила недоступны: сейчас работают правила Gateway'
-          : 'Сначала добавьте подписку'
-        : feature.pendingRestart ? 'Правила ждут перезапуска' : 'Локальные правила'}</span>
-    </button>
+    </RailAction>
   );
 }
 
@@ -446,22 +446,17 @@ export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature;
   const incomplete = draftRules.some((rule) => !String(rule.value || '').trim());
 
   return (
-    <aside
-      ref={feature.panelRef as RefObject<HTMLElement>}
+    <Drawer
+      panelRef={feature.panelRef}
+      closeRef={feature.closeRef}
       id="client-local-rules"
-      className={`client-drawer client-local-rules${feature.isOpen ? ' is-open' : ''}`}
-      aria-labelledby="local-rules-title"
-      aria-hidden={!feature.isOpen}
-      inert={!feature.isOpen ? true : undefined}
+      className="client-local-rules"
+      sheetClassName="client-local-rules-sheet"
+      open={feature.isOpen}
+      labelledBy="local-rules-title"
+      closeLabel="Закрыть локальные правила"
+      onClose={feature.requestClose}
     >
-      <div className="client-drawer-sheet client-local-rules-sheet">
-        <button
-          ref={feature.closeRef}
-          className="client-drawer-close"
-          type="button"
-          aria-label="Закрыть локальные правила"
-          onClick={feature.requestClose}
-        >×</button>
         <header className="client-local-rules-header">
           <span>Маршрутизация</span>
           <button
@@ -532,7 +527,7 @@ export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature;
                   />
                   <span className="client-local-rule-status" role="status">{statusLabel}</span>
                   <button
-                    className="client-local-rule-delete"
+                    className="client-row-delete"
                     type="button"
                     aria-label={`Удалить правило ${index + 1}`}
                     onClick={() => feature.remove(rule._key)}
@@ -549,8 +544,8 @@ export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature;
               })}
               {!feature.rules.length && <p className="client-local-rules-empty">Правил пока нет. Весь трафик идёт через VPN.</p>}
             </div>
-            <div className="client-local-rule-add-slot">
-              <button className="client-local-rule-add" type="button" disabled={!canAdd} onClick={feature.add}>
+            <div className="client-row-add-slot">
+              <button className="client-row-add" type="button" disabled={!canAdd} onClick={feature.add}>
                 + Добавить правило
               </button>
               <span className={incomplete ? 'is-visible' : ''}>Сначала заполните текущее правило</span>
@@ -565,8 +560,7 @@ export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature;
             <button type="button" onClick={feature.requestClose}>Отмена</button>
           </div>
         </form>
-      </div>
-    </aside>
+    </Drawer>
   );
 }
 

src/web/features/subscription/SubscriptionFeature.tsx

@@ -19,6 +19,8 @@ import {
 } from '../../utils/clientControls.js';
 import { formatBytes } from '../../utils/format.js';
 import { ConfirmationDialog } from '../../ui/ConfirmationDialog.js';
+import { Drawer } from '../../ui/Drawer.js';
+import { RailAction } from '../../ui/RailAction.js';
 import type { RequestError } from './requestError.js';
 
 interface ProfileError extends RequestError {
@@ -75,7 +77,7 @@ export function useSubscriptionFeature({
   const [deleteId, setDeleteId] = useState('');
   const [refreshingIds, setRefreshingIds] = useState<string[]>([]);
   const [revealVersions, setRevealVersions] = useState<Record<string, number>>({});
-  const panelRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
   const closeRef = useRef<HTMLButtonElement>(null);
   const labelRef = useRef<HTMLInputElement>(null);
@@ -307,20 +309,19 @@ export function SubscriptionToggle({
   feature: SubscriptionFeatureController;
   onToggle: () => void;
 }) {
-  return <button
-    ref={feature.toggleRef}
-    className={`client-instructions-toggle client-subscription-toggle${feature.open ? ' is-open' : ''}`}
-    type="button"
-    aria-expanded={feature.open}
-    aria-controls="client-subscription-drawer"
-    aria-label={feature.open ? 'Закрыть подписки' : 'Управление подписками'}
+  return <RailAction
+    buttonRef={feature.toggleRef}
+    className="client-instructions-toggle client-subscription-toggle"
+    open={feature.open}
+    controls="client-subscription-drawer"
+    ariaLabel={feature.open ? 'Закрыть подписки' : 'Управление подписками'}
+    label="Подписки"
     onClick={onToggle}
   >
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <path d="M5 5h14v14H5zM8 9h8M8 13h5" />
     </svg>
-    <span>Подписки</span>
-  </button>;
+  </RailAction>;
 }
 
 function AddProfileForm({ feature }: { feature: SubscriptionFeatureController }) {
@@ -514,44 +515,38 @@ export function SubscriptionPanel({
       <AddProfileForm feature={feature} />
     </div>}
 
-    <div
-      ref={feature.panelRef}
+    <Drawer
+      panelRef={feature.panelRef}
+      closeRef={feature.closeRef}
       id="client-subscription-drawer"
-      className={`client-drawer client-subscription-drawer${drawerOpen ? ' is-open' : ''}`}
-      aria-label="Управление подписками"
-      aria-hidden={!drawerOpen}
-      inert={!drawerOpen ? true : undefined}
+      className="client-subscription-drawer"
+      sheetClassName="client-subscription-sheet"
+      open={drawerOpen}
+      label="Управление подписками"
+      closeLabel="Закрыть подписки"
+      onClose={feature.close}
     >
-      <div className="client-drawer-sheet client-subscription-sheet">
-        <header className="client-profiles-header">
-          <h2>ПОДПИСКИ</h2>
-          <button
-            ref={feature.closeRef}
-            className="client-drawer-close"
-            type="button"
-            aria-label="Закрыть подписки"
-            onClick={feature.close}
-          >×</button>
-        </header>
-        {statusSlot}
-        <div className="client-profile-list">
-          {feature.profiles.map((profile) => <ProfileGroup
-            key={profile.id}
-            feature={feature}
-            profile={profile}
-            renderServerPicker={renderServerPicker}
-          />)}
-        </div>
-        {(feature.adding || feature.addClosing) && feature.profiles.length > 0
-          ? <AddProfileForm feature={feature} />
-          : <button
-            id="client-profile-add-trigger"
-            className="client-profile-add-trigger"
-            type="button"
-            onClick={feature.showAdd}
-          >＋ Добавить подписку</button>}
+      <header className="client-profiles-header">
+        <h2>ПОДПИСКИ</h2>
+      </header>
+      {statusSlot}
+      <div className="client-profile-list">
+        {feature.profiles.map((profile) => <ProfileGroup
+          key={profile.id}
+          feature={feature}
+          profile={profile}
+          renderServerPicker={renderServerPicker}
+        />)}
       </div>
-    </div>
+      {(feature.adding || feature.addClosing) && feature.profiles.length > 0
+        ? <AddProfileForm feature={feature} />
+        : <button
+          id="client-profile-add-trigger"
+          className="client-profile-add-trigger"
+          type="button"
+          onClick={feature.showAdd}
+        >＋ Добавить подписку</button>}
+    </Drawer>
   </>;
 }
 

src/web/styles/base.css

@@ -40,7 +40,9 @@ p {
   min-height: 100vh;
   display: grid;
   place-items: center;
-  font: 700 16px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-section-title);
+  letter-spacing: var(--type-section-title-tracking);
+  text-transform: var(--type-section-title-transform);
   color: light-dark(oklch(0.42 0.01 145), oklch(0.76 0.01 145));
   background: light-dark(oklch(0.965 0.006 145), oklch(0.18 0.012 145));
 }
@@ -54,27 +56,31 @@ p {
   padding: 32px;
   background: light-dark(oklch(0.965 0.006 145), oklch(0.18 0.012 145));
   color: light-dark(oklch(0.24 0.014 145), oklch(0.93 0.008 145));
-  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font-family: var(--font-family-client);
 }
 
 .app-boot > span,
 .app-boot summary {
   color: light-dark(oklch(0.53 0.014 145), oklch(0.68 0.012 145));
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .app-boot h1 {
   max-width: 22ch;
   margin: 0;
-  font-size: clamp(22px, 5vw, 34px);
-  letter-spacing: -0.05em;
+  font: var(--type-drawer-title);
+  letter-spacing: var(--type-drawer-title-tracking);
+  text-transform: var(--type-drawer-title-transform);
 }
 
 .app-boot p {
   max-width: 58ch;
   color: light-dark(oklch(0.53 0.014 145), oklch(0.68 0.012 145));
-  font-size: 12px;
-  line-height: 1.7;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
 }
 
 .app-boot button,
@@ -106,8 +112,9 @@ p {
   display: block;
   overflow-x: auto;
   margin: 12px 0 0;
-  font-size: 11px;
-  line-height: 1.6;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   white-space: pre-wrap;
 }
 
@@ -126,7 +133,9 @@ p {
   box-shadow: 0 10px 32px oklch(0.08 0.015 145 / 0.14);
   backdrop-filter: blur(12px);
   color: var(--client-muted);
-  font: 600 10px/1.3 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   transform: translateX(-50%);
 }
 
@@ -136,5 +145,7 @@ p {
 
 .client-stale-banner button {
   color: var(--client-text);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }

src/web/styles/features/connection.css

@@ -1,6 +1,8 @@
 .client-power-section p {
   color: var(--client-muted);
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-power-section {
@@ -47,9 +49,9 @@
   max-width: min(320px, calc(100vw - 42px));
   overflow: hidden;
   color: var(--client-text);
-  font-size: 12px;
-  font-weight: 650;
-  letter-spacing: -0.025em;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: opacity 260ms ease, filter 360ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -70,8 +72,9 @@
   min-height: 15px;
   overflow: hidden;
   color: var(--client-accent);
-  font-size: 8px;
-  font-weight: 700;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -248,8 +251,9 @@
 }
 
 .client-power-section h2 {
-  font: 700 18px/1.3 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: -0.04em;
+  font: var(--type-state-title);
+  letter-spacing: var(--type-state-title-tracking);
+  text-transform: var(--type-state-title-transform);
   animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -290,16 +294,20 @@
   grid-area: 1 / 1;
   display: block;
   color: var(--client-text);
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.04em;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
+  font-variant-numeric: var(--numeric-tabular);
   opacity: 0;
   filter: blur(5px);
   transition: opacity 260ms ease, filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-power-section.is-gateway .client-duration {
-  font-size: 15px;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-duration.is-active {
@@ -393,7 +401,6 @@
 
 .client-power-section p {
   min-height: 0;
-  line-height: 20px;
 }
 
 @keyframes client-state-reveal {
@@ -432,10 +439,9 @@
   display: grid;
   place-items: center;
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-proxy-label > span {
@@ -477,8 +483,10 @@
 
 .client-proxy-address {
   color: var(--client-text);
-  font-size: 12px;
-  font-weight: 500;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
+  font-variant-numeric: var(--numeric-tabular);
   text-shadow: 0 0 12px color-mix(in oklch, var(--client-accent) 12%, transparent);
 }
 

src/web/styles/features/devices.css

@@ -7,11 +7,15 @@
 }
 
 .client-devices-header h2 {
-  font-size: 24px;
+  font: var(--type-drawer-title);
+  letter-spacing: var(--type-drawer-title-tracking);
+  text-transform: var(--type-drawer-title-transform);
 }
 
 .client-devices-header .client-instructions-intro {
-  font-size: 12px;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
 }
 
 .client-devices-kicker {
@@ -22,7 +26,9 @@
 }
 
 .client-devices-kicker > span:first-child {
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-devices-refresh-wrap {
@@ -49,7 +55,9 @@
   border-radius: 999px;
   background: transparent;
   color: var(--client-muted);
-  font: 700 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -67,7 +75,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 10px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   transition: color 220ms ease, filter 300ms ease;
 }
@@ -161,7 +171,6 @@
 
 .client-instructions-header .client-devices-refresh-wrap > .client-tooltip,
 .client-instructions-header .client-devices-sort-wrap > .client-tooltip {
-  text-transform: none;
 }
 
 @keyframes client-devices-refresh-progress {
@@ -173,8 +182,9 @@
 .client-devices-empty {
   margin: 0 8px 20px;
   color: var(--client-muted);
-  font-size: 11px;
-  line-height: 1.6;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-devices-source {
@@ -226,10 +236,9 @@
   top: -17px;
   left: 8px;
   color: var(--client-muted);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-device:not(.is-group-start) > .client-device-group-heading {
@@ -271,8 +280,9 @@
   overflow: hidden;
   margin: 0;
   gap: 5px;
-  font-size: 14px;
-  letter-spacing: -0.03em;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -298,8 +308,9 @@
 
 .client-device-alias-trigger {
   flex: 0 1 auto;
-  font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: -0.03em;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
   cursor: text;
 }
 
@@ -313,8 +324,9 @@
   outline: 0;
   background: transparent;
   caret-color: var(--client-accent);
-  font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: -0.03em;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
   animation: client-device-alias-edit-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -334,12 +346,17 @@
 .client-device-name-separator {
   flex: 0 0 auto;
   color: var(--client-muted);
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-device-ip {
   flex: 0 0 auto;
-  font: 600 12px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
+  font-variant-numeric: var(--numeric-tabular);
   cursor: copy;
 }
 
@@ -478,7 +495,9 @@
   align-items: center;
   max-width: 150px;
   overflow: hidden;
-  font-size: 8.5px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   text-overflow: ellipsis;
   color: var(--client-text);
   cursor: default;
@@ -493,7 +512,7 @@
 
 .client-device-last-seen.is-online {
   color: var(--client-accent);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }
 
 .client-device-pin-wrap.client-tooltip-anchor > .client-tooltip {
@@ -564,7 +583,7 @@
   position: relative;
   z-index: 6;
   color: var(--client-text);
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-device-traffic-total,
@@ -624,15 +643,17 @@
 
 .client-device-traffic b {
   color: var(--client-muted);
-  font-size: 8px;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-device-traffic strong {
   overflow: hidden;
-  font-size: 10px;
-  font-weight: 600;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
+  font-variant-numeric: var(--numeric-tabular);
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -747,7 +768,9 @@
   position: relative;
   z-index: 3;
   color: color-mix(in oklch, var(--client-text) 62%, var(--client-muted));
-  font: 700 7.5px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   pointer-events: none;
 }
 
@@ -862,8 +885,9 @@
   display: flex;
   justify-content: space-between;
   color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted));
-  font-size: 8.5px;
-  line-height: 10px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
 }
 
 .client-device-traffic-point-tooltip {
@@ -881,8 +905,10 @@
     inset 0 0 0 1px color-mix(in oklch, var(--client-border) 55%, transparent),
     0 8px 24px oklch(0.08 0.015 145 / 0.22);
   color: oklch(0.92 0.008 145);
-  font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  font-variant-numeric: tabular-nums;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+  font-variant-numeric: var(--numeric-tabular);
   white-space: nowrap;
   pointer-events: none;
   animation: client-device-traffic-tooltip-in 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
@@ -890,12 +916,18 @@
 
 .client-device-traffic-point-tooltip time {
   color: oklch(0.68 0.012 145);
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-device-traffic-point-tooltip strong {
   color: oklch(0.98 0.006 145);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-device-traffic-point-tooltip .is-proxy {
@@ -1027,7 +1059,6 @@
 .client-device-deprioritize-wrap.client-tooltip-anchor > .client-tooltip {
   right: 0;
   left: auto;
-  text-transform: none;
   transform: translate(0, 2px);
 }
 
@@ -1069,8 +1100,9 @@
 
 .client-devices-error button {
   justify-self: start;
-  font-size: 10px;
-  font-weight: 700;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-devices button:focus-visible {
@@ -1101,10 +1133,9 @@
 
 .client-gateway-traffic-total > small {
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-gateway-traffic-heading {
@@ -1128,9 +1159,10 @@
 
 .client-gateway-traffic-total > strong {
   color: var(--client-text);
-  font-size: 15px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-gateway-traffic-speed {
@@ -1138,8 +1170,10 @@
   display: flex;
   justify-self: end;
   gap: 18px;
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
+  font-variant-numeric: var(--numeric-tabular);
   white-space: nowrap;
 }
 
@@ -1166,8 +1200,9 @@
 .client-gateway-traffic-freshness {
   min-height: 26px;
   color: var(--client-muted);
-  font-size: 8.5px;
-  line-height: 1.5;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
 }
 
 .client-gateway-traffic-freshness.is-stale {
@@ -1187,7 +1222,10 @@
   .client-gateway-traffic-speed {
     justify-self: start;
     gap: 14px;
-    font-size: 10px;
+    font: var(--type-control);
+    letter-spacing: var(--type-control-tracking);
+    text-transform: var(--type-control-transform);
+    font-variant-numeric: var(--numeric-tabular);
   }
 
   .client-gateway-traffic-chart,

src/web/styles/features/diagnostics.css

@@ -75,7 +75,6 @@
 .client-diagnostics-refresh-wrap > .client-tooltip {
   right: 0;
   left: auto;
-  text-transform: none;
   transform: translate(0, 2px);
 }
 
@@ -96,8 +95,9 @@
   align-items: center;
   gap: 12px;
   color: oklch(0.68 0.15 28);
-  font-size: 9px;
-  line-height: 1.5;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-diagnostics-error button {
@@ -105,7 +105,7 @@
   border: 0;
   background: transparent;
   color: inherit;
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   cursor: pointer;
 }
 
@@ -122,10 +122,9 @@
   justify-content: space-between;
   gap: 14px;
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-diagnostics-section-title button {
@@ -133,7 +132,9 @@
   border: 0;
   background: transparent;
   color: var(--client-accent);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -173,10 +174,9 @@
   padding-top: 2px;
   padding-bottom: 7px;
   color: var(--client-muted);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-diagnostics-table tbody tr {
@@ -219,8 +219,9 @@
 
 .client-diagnostics-table tbody th {
   color: var(--client-text);
-  font-size: 9px;
-  font-weight: 600;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   transition: color 420ms ease, text-shadow 520ms ease;
 }
 
@@ -239,10 +240,9 @@
 .client-diagnostics-service-header {
   padding: 2px 0 7px;
   color: var(--client-muted);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-diagnostics-service-header > span,
@@ -257,12 +257,12 @@
   isolation: isolate;
   min-height: 37px;
   border-top: 1px solid color-mix(in oklch, var(--client-border) 48%, transparent);
-  animation: client-local-rule-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .client-diagnostics-service-row.is-removing {
   pointer-events: none;
-  animation: client-local-rule-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
+  animation: client-row-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
 }
 
 .client-diagnostics-service-row.is-running .client-diagnostics-service-name {
@@ -273,8 +273,9 @@
 .client-diagnostics-service-name {
   overflow-wrap: anywhere;
   color: var(--client-text);
-  font-size: 9px;
-  font-weight: 600;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   transition: color 420ms ease, text-shadow 520ms ease;
 }
 
@@ -284,7 +285,10 @@
   max-width: 100%;
   overflow-wrap: anywhere;
   color: var(--client-text);
-  font: 600 9px/1.4 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-diagnostics-status.is-good {
@@ -338,7 +342,9 @@
   outline: 0;
   background: transparent;
   color: var(--client-text);
-  font: 500 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   box-shadow: 0 1px 0 transparent;
   transition: box-shadow 300ms ease, text-shadow 300ms ease;
 }
@@ -369,7 +375,9 @@
   border: 0;
   background: transparent;
   color: var(--client-accent);
-  font: 700 8px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   transition: filter 260ms ease, text-shadow 300ms ease;
 }
@@ -384,7 +392,9 @@
 .client-diagnostics-services-empty {
   padding: 14px 8px 4px;
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-diagnostics-add-slot {
@@ -420,7 +430,7 @@
     grid-row: 2;
   }
 
-  .client-diagnostics-service-draft > .client-local-rule-delete {
+  .client-diagnostics-service-draft > .client-row-delete {
     grid-column: 2;
     grid-row: 1 / 3;
     width: 44px;

src/web/styles/features/instructions.css

@@ -116,14 +116,17 @@
 }
 
 .client-instruction-summary strong {
-  font-size: 14px;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
 }
 
 .client-instruction-summary small {
   max-width: 54ch;
   color: var(--client-muted);
-  font-size: 10px;
-  line-height: 1.55;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-instruction-reveal {
@@ -147,8 +150,9 @@
   gap: 14px;
   padding: 0 22px 24px;
   color: var(--client-muted);
-  font-size: 11px;
-  line-height: 1.7;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-instruction-body p,
@@ -164,7 +168,7 @@
 
 .client-instruction-body li::marker {
   color: var(--client-accent);
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-instruction-body code {
@@ -174,7 +178,9 @@
   border-radius: 12px;
   background: color-mix(in oklch, var(--client-control) 84%, transparent);
   color: var(--client-text);
-  font: 500 11px/1.5 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   white-space: nowrap;
 }
 
@@ -192,7 +198,6 @@
   padding: 0;
   border-radius: 0;
   background: transparent;
-  line-height: 1.55;
   white-space: pre;
 }
 
@@ -214,7 +219,9 @@
   min-width: 0;
   overflow: hidden;
   color: var(--client-text);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -229,7 +236,7 @@
 .client-instruction-body a {
   width: fit-content;
   color: var(--client-accent);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   text-decoration: none;
 }
 

src/web/styles/features/routing.css

@@ -12,24 +12,25 @@
 .client-local-rules-header > span,
 .client-local-rules-group > span {
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-local-rules-header h2 {
   grid-column: 1 / -1;
-  font-size: 22px;
-  letter-spacing: -0.045em;
+  font: var(--type-drawer-title);
+  letter-spacing: var(--type-drawer-title-tracking);
+  text-transform: var(--type-drawer-title-transform);
 }
 
 .client-local-rules-header p {
   grid-column: 1 / -1;
   max-width: 46ch;
   color: var(--client-muted);
-  font-size: 11px;
-  line-height: 1.7;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-local-rules-save {
@@ -38,8 +39,9 @@
   border: 0;
   background: transparent;
   color: var(--client-accent);
-  font-size: 10px;
-  font-weight: 700;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   transition: color 200ms ease, filter 300ms ease, opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -86,7 +88,7 @@
   align-items: center;
   gap: 10px;
   padding: 7px 0;
-  animation: client-local-rule-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
   transition: opacity 260ms ease, filter 360ms ease;
 }
 
@@ -96,11 +98,10 @@
 
 .client-local-rule-status {
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   text-align: right;
-  text-transform: uppercase;
   transition: color 280ms ease, opacity 280ms ease, filter 360ms ease;
 }
 
@@ -120,7 +121,7 @@
 
 .client-local-rule.is-removing {
   pointer-events: none;
-  animation: client-local-rule-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
+  animation: client-row-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
 }
 
 .client-local-rule-enabled {
@@ -196,7 +197,9 @@
   border: 0;
   background: transparent;
   color: var(--client-text);
-  font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   text-align: left;
   cursor: pointer;
   transition: color 220ms ease, text-shadow 300ms ease;
@@ -255,7 +258,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   text-align: left;
   white-space: nowrap;
   cursor: pointer;
@@ -295,7 +300,9 @@
   outline: 0;
   background: transparent;
   color: var(--client-text);
-  font: 500 10px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   box-shadow: 0 1px 0 transparent;
   transition: color 220ms ease, box-shadow 300ms ease, text-shadow 300ms ease;
 }
@@ -312,15 +319,17 @@
 .client-local-rules-empty {
   padding: 14px 4px 4px;
   color: var(--client-muted);
-  font-size: 10px;
-  line-height: 1.6;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-local-rules-note {
   max-width: 48ch;
   color: var(--client-muted);
-  font-size: 9px;
-  line-height: 1.65;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-inline-error.is-routing {
@@ -340,8 +349,9 @@
   border: 0;
   background: transparent;
   color: var(--client-text);
-  font-size: 10px;
-  font-weight: 700;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   transition: color 200ms ease, filter 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -369,9 +379,9 @@
   gap: 10px;
   margin: -10px 0 -8px;
   color: var(--client-warning, oklch(0.72 0.12 72));
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   opacity: 0;
   filter: blur(5px);
   transform: translateY(-3px);

src/web/styles/features/servers.css

@@ -6,11 +6,10 @@
   display: block;
   margin-bottom: 12px;
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   text-align: center;
-  text-transform: uppercase;
   animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
@@ -93,14 +92,17 @@
   overflow: hidden;
   text-overflow: ellipsis;
   overflow-wrap: anywhere;
-  font-size: 11px;
-  line-height: 1.4;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   text-align: center;
 }
 
 .client-server small {
   color: var(--client-muted);
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   text-align: center;
 }
 
@@ -108,9 +110,10 @@
   display: grid;
   place-items: center;
   color: var(--client-muted);
-  font-size: 9px;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.2;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+  font-variant-numeric: var(--numeric-tabular);
   white-space: nowrap;
 }
 
@@ -174,9 +177,9 @@
   grid-column: 2;
   grid-row: 1;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   white-space: nowrap;
 }
 
@@ -197,7 +200,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
   transition: color 220ms ease, text-shadow 320ms ease;
 }
@@ -357,7 +362,9 @@
   outline: 0;
   background: transparent;
   color: var(--client-text);
-  font: 500 11px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-server-tools input:focus {
@@ -379,7 +386,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -422,12 +431,16 @@
 }
 
 .client-server-auto strong {
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-server-auto small {
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-server-scroll {
@@ -471,11 +484,12 @@
   display: flex;
   justify-content: space-between;
   text-align: left;
-  text-transform: uppercase;
 }
 
 .client-server-group-toggle small {
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-servers.is-scalable .client-server-grid {
@@ -508,7 +522,9 @@
   border: 0;
   background: transparent;
   color: var(--client-border);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   opacity: 0.45;
   transform: translateY(-50%);
@@ -522,7 +538,9 @@
 .client-server-empty {
   padding: 24px 4px;
   color: var(--client-muted);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   text-align: center;
 }
 
@@ -536,7 +554,9 @@
   justify-content: center;
   gap: 12px;
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-server-more:disabled {
@@ -592,9 +612,9 @@
 
 .client-profile-body .client-server-check-label {
   display: inline;
-  font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-profile-body .client-server-mode-toggle {
@@ -705,12 +725,16 @@
 }
 
 .client-profile-body .client-server strong {
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-profile-body .client-server small {
   grid-column: 3;
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
 }
 
 .client-profile-body .client-server-meta {

src/web/styles/features/subscription.css

@@ -9,9 +9,9 @@
 
 .client-inline-error.is-subscription small {
   flex-basis: 100%;
-  font-size: 8px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   opacity: 0.45;
   animation: client-subscription-code-in 560ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -56,8 +56,9 @@
 .client-profiles-header h2 {
   flex: 1;
   margin: 0;
-  font-size: 16px;
-  letter-spacing: 0.02em;
+  font: var(--type-drawer-title);
+  letter-spacing: var(--type-drawer-title-tracking);
+  text-transform: var(--type-drawer-title-transform);
 }
 
 .client-profile-list {
@@ -95,7 +96,7 @@
 
 .client-profile-chevron {
   color: var(--client-muted);
-  font-size: 20px;
+  font-size: var(--font-size-icon-chevron);
   transform: rotate(0);
   transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -126,28 +127,34 @@
 }
 
 .client-profile-title strong {
-  font-size: 12px;
-  letter-spacing: -0.02em;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
 }
 
 .client-profile-title small {
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-profile-title em {
   padding: 0;
   color: var(--client-accent);
-  font-size: 7px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   font-style: normal;
-  letter-spacing: 0.08em;
 }
 
 .client-profile-usage {
   max-width: 126px;
   overflow: hidden;
   color: var(--client-muted);
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -293,14 +300,18 @@
 .client-profile-selected-server strong {
   min-width: 0;
   overflow: hidden;
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .client-profile-selected-server small {
   color: var(--client-muted);
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   white-space: nowrap;
 }
 
@@ -321,9 +332,9 @@
   border: 0;
   background: transparent;
   color: var(--client-accent);
-  font: 600 9px/1 inherit;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -377,8 +388,9 @@
   min-height: 18px;
   margin: 0;
   color: var(--client-muted);
-  font-size: 8px;
-  line-height: 1.45;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
 }
 
 .client-profile-local-status {
@@ -403,7 +415,9 @@
   outline: 0;
   background: transparent;
   color: var(--client-text);
-  font: 500 10px/1 inherit;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-profile-add input:focus {
@@ -426,7 +440,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 600 9px/1 inherit;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -451,13 +467,15 @@
 
 .client-first-run-copy span {
   color: var(--client-muted);
-  font-size: 9px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-first-run-copy strong {
-  font-size: 16px;
+  font: var(--type-section-title);
+  letter-spacing: var(--type-section-title-tracking);
+  text-transform: var(--type-section-title-transform);
 }
 
 @media (max-width: 520px) {
@@ -471,8 +489,7 @@
 
   .client-profile-disclosure,
   .client-profile-refresh,
-  .client-profile-delete,
-  .client-profiles-header > button:not(.client-drawer-close) {
+  .client-profile-delete {
     min-height: 44px;
   }
 }

src/web/styles/layout.css

@@ -22,7 +22,7 @@
   width: min(100%, 1100px);
   display: grid;
   gap: 12px;
-  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font-family: var(--font-family-client);
   color: var(--client-text);
 }
 
@@ -35,8 +35,10 @@
   justify-items: end;
   gap: 4px;
   color: var(--client-muted);
-  font: 650 12px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  font-variant-numeric: tabular-nums;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .harbor-version {
@@ -61,13 +63,17 @@
 .harbor-version-code {
   width: 1.3ch;
   color: var(--client-accent);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
+  font-variant-numeric: var(--numeric-tabular);
   text-align: center;
 }
 
 .harbor-version-number {
   display: flex;
   align-items: center;
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .harbor-version-part {
@@ -102,9 +108,9 @@
   background: oklch(0.14 0.012 145);
   box-shadow: 0 9px 30px oklch(0.08 0.015 145 / 0.16);
   color: oklch(0.88 0.012 145);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1.5;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   text-align: left;
   opacity: 0;
   visibility: hidden;
@@ -116,12 +122,16 @@
 
 .harbor-version-tooltip strong {
   color: oklch(0.96 0.008 145);
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .harbor-version-tooltip small {
   color: var(--client-accent);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .harbor-version-tooltip .is-warning {
@@ -143,8 +153,8 @@
   left: 50%;
   z-index: 2;
   color: var(--harbor-word);
-  font-size: 13px;
-  letter-spacing: -0.035em;
+  font-size: var(--font-size-brand);
+  letter-spacing: var(--tracking-title);
   transform: translate(-50%, calc(-50% - 25vh)) scale(3);
   transform-origin: center;
   transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -264,7 +274,7 @@
 }
 
 .harbor-brand strong {
-  font-weight: 800;
+  font-weight: var(--font-weight-brand);
 }
 
 .harbor-brand-name {
@@ -276,7 +286,7 @@
 .harbor-brand em {
   color: var(--harbor-connect);
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--font-weight-strong);
 }
 
 .harbor-brand.is-gateway em {
@@ -464,9 +474,9 @@
   background: oklch(0.14 0.012 145);
   box-shadow: 0 5px 18px oklch(0.08 0.015 145 / 0.1);
   color: oklch(0.88 0.012 145);
-  font-size: 4px;
-  line-height: 1.5;
-  letter-spacing: 0;
+  font-size: var(--font-size-brand-tooltip);
+  line-height: var(--line-height-micro);
+  letter-spacing: var(--tracking-normal);
   text-align: left;
   opacity: 0;
   visibility: hidden;
@@ -478,7 +488,7 @@
 
 .harbor-mode-tooltip strong {
   color: oklch(0.96 0.008 145);
-  font-size: 4.2px;
+  font-size: var(--font-size-brand-tooltip-strong);
 }
 
 .harbor-brand-control:hover .harbor-mode-tooltip,
@@ -696,7 +706,6 @@
 
   .client-copy-button {
     min-height: 44px;
-    font-size: 10px;
   }
 
   .client-server-filters button,
@@ -726,18 +735,11 @@
   }
 
   .client-local-rule-enabled,
-  .client-local-rule-delete {
+  .client-row-delete {
     width: 44px;
     height: 44px;
   }
 
-  .client-local-rules-header > span,
-  .client-local-rules-group > span,
-  .client-instructions-header span,
-  .client-instruction-summary > span {
-    font-size: 10px;
-  }
-
   .client-instructions-sheet {
     padding: 40px 58px 60px 18px;
   }
@@ -746,10 +748,6 @@
     padding: 40px 58px 60px 18px;
   }
 
-  .client-local-rules-header h2 {
-    font-size: 18px;
-  }
-
   .client-local-rule {
     gap: 8px;
   }
@@ -764,7 +762,7 @@
     grid-row: 1;
   }
 
-  .client-local-rule-delete {
+  .client-row-delete {
     grid-column: 3;
     grid-row: 1;
   }
@@ -774,10 +772,6 @@
     grid-row: 2;
   }
 
-  .client-instructions-header h2 {
-    font-size: 18px;
-  }
-
   .client-instruction-block:nth-child(n) {
     margin-inline: 0;
   }

src/web/styles/primitives.css

@@ -7,8 +7,7 @@
   white-space: nowrap;
 }
 
-.client-instructions-toggle,
-.client-local-rules-toggle {
+.client-rail-action {
   position: relative;
   width: 42px;
   height: 48px;
@@ -22,8 +21,7 @@
   transition: color 240ms ease, transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-instructions-toggle svg,
-.client-local-rules-toggle svg {
+.client-rail-action svg {
   width: 23px;
   height: 23px;
   fill: none;
@@ -35,14 +33,14 @@
   transition: color 240ms ease, filter 360ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-instructions-toggle span,
-.client-local-rules-toggle span {
+.client-rail-action > span {
   position: absolute;
   right: 48px;
   width: max-content;
   color: var(--client-text);
-  font: 700 10px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.04em;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   opacity: 0;
   filter: blur(5px);
   pointer-events: none;
@@ -50,30 +48,23 @@
   transition: opacity 350ms ease, filter 350ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-instructions-toggle:hover,
-.client-instructions-toggle:focus-visible,
-.client-local-rules-toggle:hover,
-.client-local-rules-toggle:focus-visible {
+.client-rail-action:hover,
+.client-rail-action:focus-visible {
   outline: 0;
   color: var(--client-accent);
   transform: translateX(-3px);
 }
 
-.client-instructions-toggle:hover span,
-.client-instructions-toggle:focus-visible span,
-.client-local-rules-toggle:hover span,
-.client-local-rules-toggle:focus-visible span {
+.client-rail-action:hover > span,
+.client-rail-action:focus-visible > span {
   opacity: 1;
   filter: blur(0);
   transform: translateX(0);
 }
 
-.client-instructions-toggle:hover svg,
-.client-instructions-toggle:focus-visible svg,
-.client-local-rules-toggle:hover svg,
-.client-local-rules-toggle:focus-visible svg,
-.client-instructions-toggle.is-open svg,
-.client-local-rules-toggle.is-open svg {
+.client-rail-action:hover svg,
+.client-rail-action:focus-visible svg,
+.client-rail-action.is-open svg {
   filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
 }
 
@@ -171,8 +162,7 @@
   transform: translateX(0);
 }
 
-.client-instructions-toggle.is-open,
-.client-local-rules-toggle.is-open {
+.client-rail-action.is-open {
   color: var(--client-accent);
 }
 
@@ -184,8 +174,7 @@
   filter: drop-shadow(0 0 7px oklch(0.68 0.14 72 / 0.42));
 }
 
-.client-instructions-toggle.is-open span,
-.client-local-rules-toggle.is-open span {
+.client-rail-action.is-open > span {
   opacity: 0;
   visibility: hidden;
 }
@@ -215,7 +204,7 @@
   position: relative;
   min-height: 100%;
   padding: 54px 72px 72px 34px;
-  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font-family: var(--font-family-client);
 }
 
 .client-delete-strike {
@@ -262,19 +251,19 @@
   opacity: 0;
 }
 
-.client-local-rule-delete {
+.client-row-delete {
   width: 28px;
   height: 32px;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font-size: 17px;
+  font-size: var(--font-size-icon-delete);
   cursor: pointer;
   transition: color 180ms ease, filter 260ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-local-rule-delete:hover {
+.client-row-delete:hover {
   color: oklch(0.68 0.15 28);
   filter: drop-shadow(0 0 7px oklch(0.68 0.15 28 / 0.42));
   transform: rotate(8deg) scale(1.1);
@@ -282,8 +271,8 @@
 
 .client-local-rule-enabled:focus-visible,
 .client-rule-type-trigger:focus-visible,
-.client-local-rule-delete:focus-visible,
-.client-local-rule-add:focus-visible,
+.client-row-delete:focus-visible,
+.client-row-add:focus-visible,
 .client-local-rules-save:focus-visible,
 .client-local-rules-actions button:focus-visible {
   outline: 0;
@@ -291,56 +280,59 @@
   text-shadow: 0 0 10px color-mix(in oklch, var(--client-accent) 48%, transparent);
 }
 
-.client-local-rule-add {
+.client-row-add {
   width: fit-content;
   padding: 7px 0;
   border: 0;
   background: transparent;
   color: var(--client-accent);
-  font-size: 10px;
-  font-weight: 700;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   transition: opacity 220ms ease, color 220ms ease, text-shadow 300ms ease;
 }
 
-.client-local-rule-add:hover {
+.client-row-add:hover {
   text-shadow: 0 0 10px color-mix(in oklch, var(--client-accent) 55%, transparent);
 }
 
-.client-local-rule-add:disabled {
+.client-row-add:disabled {
   opacity: 0.3;
   cursor: not-allowed;
   text-shadow: none;
 }
 
-.client-local-rule-add-slot {
+.client-row-add-slot {
   min-height: 40px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.client-local-rule-add-slot > span {
+.client-row-add-slot > span {
   color: var(--client-muted);
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   opacity: 0;
   filter: blur(5px);
   transform: translateX(-6px);
   transition: opacity 220ms ease, filter 320ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-local-rule-add-slot > span.is-visible {
+.client-row-add-slot > span.is-visible {
   opacity: 1;
   filter: blur(0);
   transform: translateX(0);
 }
 
-@keyframes client-local-rule-enter {
+@keyframes client-row-enter {
   from { opacity: 0; filter: blur(8px); transform: translateY(-10px) scale(0.985); }
   to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
 }
 
-@keyframes client-local-rule-leave {
+@keyframes client-row-leave {
   0%, 52% { opacity: 1; filter: blur(0); transform: translateX(0); }
   100% { opacity: 0; filter: blur(8px); transform: translateX(28px); }
 }
@@ -373,7 +365,7 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 400 24px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-icon-close);
   cursor: pointer;
   transition: color 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -391,16 +383,16 @@
 .client-instructions-header span,
 .client-instruction-summary > span {
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-instructions-header h2 {
   margin: 0;
-  font-size: 22px;
-  letter-spacing: -0.045em;
+  font: var(--type-drawer-title);
+  letter-spacing: var(--type-drawer-title-tracking);
+  text-transform: var(--type-drawer-title-transform);
 }
 
 .client-instructions-intro {
@@ -408,8 +400,9 @@
   gap: 12px;
   margin-top: 15px;
   color: var(--client-muted);
-  font-size: 11px;
-  line-height: 1.7;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-instructions-intro p {
@@ -441,8 +434,9 @@
   background: oklch(0.14 0.012 145);
   box-shadow: 0 8px 26px oklch(0.08 0.015 145 / 0.16);
   color: oklch(0.94 0.008 145);
-  font: 600 10px/1.35 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0;
+  font: var(--type-tooltip);
+  letter-spacing: var(--type-tooltip-tracking);
+  text-transform: var(--type-tooltip-transform);
   text-align: center;
   white-space: normal;
   opacity: 0;
@@ -527,7 +521,7 @@
   background: color-mix(in oklch, var(--client-bg) 82%, transparent);
   box-shadow: 0 0 86px color-mix(in oklch, var(--client-bg) 86%, transparent);
   color: var(--client-text);
-  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font-family: var(--font-family-client);
   opacity: 0;
   filter: blur(18px);
   transform: scale(0.9);
@@ -578,23 +572,24 @@
 
 .client-confirmation-kicker {
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-confirmation-dialog h2 {
   color: oklch(0.68 0.15 28);
-  font-size: 18px;
-  letter-spacing: -0.035em;
+  font: var(--type-state-title);
+  letter-spacing: var(--type-state-title-tracking);
+  text-transform: var(--type-state-title-transform);
 }
 
 .client-confirmation-dialog p {
   max-width: 54ch;
   color: var(--client-muted);
-  font-size: 11px;
-  line-height: 1.7;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-confirmation-actions {
@@ -608,8 +603,9 @@
   border: 0;
   background: transparent;
   color: var(--client-text);
-  font-size: 10px;
-  font-weight: 700;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   transition: color 200ms ease, filter 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -656,14 +652,18 @@
   gap: 8px;
   flex-wrap: wrap;
   color: oklch(0.62 0.2 28);
-  font: 600 11px/1.5 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   text-align: center;
   transform: translateX(-50%);
 }
 
 .client-inline-error small {
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   white-space: nowrap;
 }
 
@@ -673,8 +673,9 @@
   border-radius: 6px;
   background: color-mix(in oklch, var(--client-control) 72%, transparent);
   color: var(--client-text);
-  font-size: 9px;
-  font-weight: 700;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
   white-space: nowrap;
 }
@@ -709,8 +710,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.06em;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
   opacity: 0.76;
   transition: color 220ms ease, opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);

src/web/styles/themes.css

@@ -24,7 +24,7 @@
   .client-power-section,
   .client-gateway-traffic-chart,
   .client-gateway-traffic-freshness,
-  .client-subscription-drawer,
+  .client-drawer,
   .client-form,
   .client-server,
   .client-server-auto,
@@ -47,14 +47,13 @@
   .client-duration,
   .client-duration-seconds-value,
   .client-duration-second-digit,
-  .client-instructions,
   .client-drawer-close,
-  .client-instructions-toggle,
-  .client-instructions-toggle svg,
-  .client-instructions-toggle circle,
-  .client-instructions-toggle path,
-  .client-instructions-toggle rect,
-  .client-instructions-toggle span,
+  .client-rail-action,
+  .client-rail-action svg,
+  .client-rail-action circle,
+  .client-rail-action path,
+  .client-rail-action rect,
+  .client-rail-action span,
   .client-instruction-block,
   .client-instruction-reveal,
   .client-instruction-summary > i::before,
@@ -114,11 +113,6 @@
     stroke-dashoffset: 0;
   }
 
-  .client-local-rules,
-  .client-local-rules-toggle,
-  .client-local-rules-toggle svg,
-  .client-local-rules-toggle circle,
-  .client-local-rules-toggle span,
   .client-local-rule,
   .client-local-rule-enabled svg,
   .client-local-rule-enabled circle,
@@ -128,9 +122,9 @@
   .client-rule-type-list,
   .client-rule-type-list button,
   .client-local-rule input,
-  .client-local-rule-delete,
-  .client-local-rule-add,
-  .client-local-rule-add-slot > span,
+  .client-row-delete,
+  .client-row-add,
+  .client-row-add-slot > span,
   .client-local-rules-save,
   .client-local-rules-runtime,
   .client-local-rules-actions button {

src/web/styles/tokens.css

@@ -1,5 +1,77 @@
 :root {
   color-scheme: light dark;
+  --font-family-client: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  --font-size-brand-tooltip: 0.25rem;
+  --font-size-brand-tooltip-strong: 0.2625rem;
+  --font-size-micro: 0.5rem;
+  --font-size-label: 0.5625rem;
+  --font-size-control: 0.625rem;
+  --font-size-body: 0.6875rem;
+  --font-size-data: 0.75rem;
+  --font-size-brand: 0.8125rem;
+  --font-size-item-title: 0.875rem;
+  --font-size-section-title: 1rem;
+  --font-size-icon-delete: 1.0625rem;
+  --font-size-state-title: 1.125rem;
+  --font-size-icon-chevron: 1.25rem;
+  --font-size-drawer-title: 1.375rem;
+  --font-size-icon-close: 1.5rem;
+  --font-weight-regular: 400;
+  --font-weight-body: 500;
+  --font-weight-strong: 600;
+  --font-weight-bold: 700;
+  --font-weight-brand: 800;
+  --line-height-solid: 1;
+  --line-height-micro: 1.45;
+  --line-height-label: 1.2;
+  --line-height-control: 1.2;
+  --line-height-body: 1.7;
+  --line-height-data: 1.2;
+  --line-height-item-title: 1.2;
+  --line-height-section-title: 1.25;
+  --line-height-state-title: 1.3;
+  --line-height-drawer-title: 1.15;
+  --line-height-tooltip: 1.35;
+  --tracking-tight: -0.04em;
+  --tracking-title: -0.03em;
+  --tracking-normal: 0;
+  --tracking-control: 0.03em;
+  --tracking-label: 0.08em;
+  --tracking-wide: 0.1em;
+  --text-transform-label: uppercase;
+  --text-transform-none: none;
+  --numeric-tabular: tabular-nums;
+  --type-micro: var(--font-weight-body) var(--font-size-micro)/var(--line-height-micro) var(--font-family-client);
+  --type-micro-tracking: var(--tracking-normal);
+  --type-micro-transform: var(--text-transform-none);
+  --type-label: var(--font-weight-bold) var(--font-size-label)/var(--line-height-label) var(--font-family-client);
+  --type-label-tracking: var(--tracking-label);
+  --type-label-transform: var(--text-transform-label);
+  --type-control: var(--font-weight-bold) var(--font-size-control)/var(--line-height-control) var(--font-family-client);
+  --type-control-tracking: var(--tracking-control);
+  --type-control-transform: var(--text-transform-none);
+  --type-tooltip: var(--font-weight-strong) var(--font-size-control)/var(--line-height-tooltip) var(--font-family-client);
+  --type-tooltip-tracking: var(--tracking-normal);
+  --type-tooltip-transform: var(--text-transform-none);
+  --type-body: var(--font-weight-body) var(--font-size-body)/var(--line-height-body) var(--font-family-client);
+  --type-body-tracking: var(--tracking-normal);
+  --type-body-transform: var(--text-transform-none);
+  --type-data: var(--font-weight-strong) var(--font-size-data)/var(--line-height-data) var(--font-family-client);
+  --type-data-tracking: var(--tracking-normal);
+  --type-data-transform: var(--text-transform-none);
+  --type-item-title: var(--font-weight-bold) var(--font-size-item-title)/var(--line-height-item-title) var(--font-family-client);
+  --type-item-title-tracking: var(--tracking-title);
+  --type-item-title-transform: var(--text-transform-none);
+  --type-section-title: var(--font-weight-bold) var(--font-size-section-title)/var(--line-height-section-title) var(--font-family-client);
+  --type-section-title-tracking: var(--tracking-title);
+  --type-section-title-transform: var(--text-transform-none);
+  --type-state-title: var(--font-weight-bold) var(--font-size-state-title)/var(--line-height-state-title) var(--font-family-client);
+  --type-state-title-tracking: var(--tracking-tight);
+  --type-state-title-transform: var(--text-transform-none);
+  --type-drawer-title: var(--font-weight-bold) var(--font-size-drawer-title)/var(--line-height-drawer-title) var(--font-family-client);
+  --type-drawer-title-tracking: var(--tracking-tight);
+  --type-drawer-title-transform: var(--text-transform-none);
+  --type-icon-close: var(--font-weight-regular) var(--font-size-icon-close)/var(--line-height-solid) var(--font-family-client);
 }
 
 .app.client-app {

src/web/ui/CopyButton.tsx

@@ -0,0 +1,34 @@
+interface CopyFeedback {
+  failed: boolean;
+  cycle?: number;
+}
+
+interface CopyButtonProps {
+  label: string;
+  feedback?: CopyFeedback;
+  className?: string;
+  ariaLabel?: string;
+  onClick: () => unknown;
+}
+
+export function CopyButton({
+  label,
+  feedback,
+  className = '',
+  ariaLabel,
+  onClick,
+}: CopyButtonProps) {
+  return <button
+    className={`client-copy-button${className ? ` ${className}` : ''}${
+      feedback ? feedback.failed ? ' is-copy-error' : ' is-copied' : ''
+    }`}
+    type="button"
+    aria-label={ariaLabel}
+    onClick={onClick}
+  >
+    <span className="client-copy-label">{label}</span>
+    {feedback && <span className="client-copy-feedback" aria-hidden="true" key={feedback.cycle}>
+      {feedback.failed ? 'Ошибка' : 'Скопировано'}
+    </span>}
+  </button>;
+}

src/web/ui/Drawer.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode, RefObject } from 'react';
+
+interface DrawerBaseProps {
+  panelRef: RefObject<HTMLElement | null>;
+  closeRef: RefObject<HTMLButtonElement | null>;
+  sheetRef?: RefObject<HTMLDivElement | null>;
+  id: string;
+  open: boolean;
+  className?: string;
+  sheetClassName?: string;
+  closeLabel: string;
+  onClose: () => unknown;
+  leading?: ReactNode;
+  children: ReactNode;
+}
+
+type DrawerProps = DrawerBaseProps & (
+  | { labelledBy: string; label?: never }
+  | { label: string; labelledBy?: never }
+);
+
+export function Drawer({
+  panelRef,
+  closeRef,
+  sheetRef,
+  id,
+  open,
+  className = '',
+  sheetClassName = '',
+  labelledBy,
+  label,
+  closeLabel,
+  onClose,
+  leading,
+  children,
+}: DrawerProps) {
+  return <aside
+    ref={panelRef}
+    id={id}
+    className={`client-drawer${className ? ` ${className}` : ''}${open ? ' is-open' : ''}`}
+    aria-labelledby={labelledBy}
+    aria-label={label}
+    aria-hidden={!open}
+    inert={!open ? true : undefined}
+  >
+    <div ref={sheetRef} className={`client-drawer-sheet${sheetClassName ? ` ${sheetClassName}` : ''}`}>
+      {leading}
+      <button
+        ref={closeRef}
+        className="client-drawer-close"
+        type="button"
+        aria-label={closeLabel}
+        onClick={onClose}
+      >×</button>
+      {children}
+    </div>
+  </aside>;
+}

src/web/ui/RailAction.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode, RefObject } from 'react';
+
+interface RailActionProps {
+  buttonRef: RefObject<HTMLButtonElement | null>;
+  className?: string;
+  open: boolean;
+  controls: string;
+  ariaLabel: string;
+  label: string;
+  disabled?: boolean;
+  onClick: () => unknown;
+  children: ReactNode;
+}
+
+export function RailAction({
+  buttonRef,
+  className = '',
+  open,
+  controls,
+  ariaLabel,
+  label,
+  disabled = false,
+  onClick,
+  children,
+}: RailActionProps) {
+  return <button
+    ref={buttonRef}
+    className={`client-rail-action${className ? ` ${className}` : ''}${open ? ' is-open' : ''}`}
+    type="button"
+    disabled={disabled}
+    aria-expanded={open}
+    aria-controls={controls}
+    aria-label={ariaLabel}
+    onClick={onClick}
+  >
+    {children}
+    <span>{label}</span>
+  </button>;
+}

src/web/ui/Tooltip.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+interface TooltipProps {
+  children: ReactNode;
+  id?: string;
+}
+
+export function Tooltip({ children, id }: TooltipProps) {
+  return <span className="client-tooltip" id={id} role="tooltip">{children}</span>;
+}