@linxin666/dsh-remote-web-ui 0.1.12 → 0.1.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Mobile remote control for the dsh web GUI: scan-to-pair QR entry beside the settings button, one-time pairing tokens, live device status, and revocable mobile sessions",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"
@@ -55,16 +55,6 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-sidebar": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/client/PluginSettingsCard.tsx

@@ -41,13 +41,14 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
   if (!state.available) return null
   const title = props.t(props.titleKey)
   const blocked = !state.dirty || state.invalid || state.saving
+  const cardClass = open ? `${css.cardOpen} ${css.card}` : css.card
   // The namespace exists but the Host does not serve it to this client (the
   // official settings allowlist omits third-party namespaces): show a card
   // that explains the gap instead of vanishing, so a missing card never
   // reads as a missing plugin.
   if (!state.exposed) {
     return (
-      <li className={css.card}>
+      <li className={cardClass}>
         <button
           type="button"
           className={css.header}
@@ -59,7 +60,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
             <span className={css.name}>{title}</span>
             <span className={css.description}>{props.t(props.descriptionKey)}</span>
           </span>
-          <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+          >
+            <path
+              d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
         {open
           ? (
@@ -72,7 +85,7 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
     )
   }
   return (
-    <li className={css.card}>
+    <li className={cardClass}>
       <button
         type="button"
         className={css.header}
@@ -85,7 +98,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
           <span className={css.description}>{props.t(props.descriptionKey)}</span>
         </span>
         {state.dirty ? <span className={css.pending}>{props.t('settings.unsaved')}</span> : null}
-        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
       </button>
       {open
         ? (
@@ -234,4 +259,4 @@ export function BooleanField(props: FieldProps & {
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
-}
+}

package/src/client/RemoteSettingsCard.tsx

@@ -27,6 +27,8 @@ export interface RemoteSettings {
   publicBaseUrl?: string
   /** When on, the plugin runs its own Cloudflare quick tunnel automatically. */
   autoTunnel?: boolean
+  /** Mobile composer: plain Enter sends; off means Enter inserts a newline. */
+  mobileEnterToSend?: boolean
 }
 
 /** What the remote-control card renders. */
@@ -47,6 +49,8 @@ export interface RemoteSettingsCardState extends CardShell {
   publicBaseUrl: CardFieldState
   /** Auto public tunnel switch. */
   autoTunnel: CardFieldState
+  /** Mobile composer Enter-to-send switch. */
+  mobileEnterToSend: CardFieldState
 }
 
 /** The registration-side face the card's slot entry injects. */
@@ -73,6 +77,7 @@ export class RemoteSettingsCardController {
       booleanField('requirePairingForLan'),
       textField('publicBaseUrl'),
       booleanField('autoTunnel'),
+      booleanField('mobileEnterToSend'),
     ])
     this.store = this.form.bind(() => this.projection())
   }
@@ -88,6 +93,7 @@ export class RemoteSettingsCardController {
       requirePairingForLan: this.form.field('requirePairingForLan'),
       publicBaseUrl: this.form.field('publicBaseUrl'),
       autoTunnel: this.form.field('autoTunnel'),
+      mobileEnterToSend: this.form.field('mobileEnterToSend'),
     }
   }
 
@@ -215,6 +221,18 @@ export function RemoteSettingsCard(props: RemoteSettingsCardProps) {
         onEdit={(text) => { props.edit('autoTunnel', text) }}
         onReset={() => { props.resetField('autoTunnel') }}
       />
+      <BooleanField
+        id="settings-remote-mobile-enter"
+        label={t('settings.mobileEnterToSend')}
+        hint={t('settings.mobileEnterToSendHint')}
+        inheritLabel={t('settings.inherit')}
+        onLabel={t('settings.on')}
+        offLabel={t('settings.off')}
+        {...fieldProps}
+        {...state.mobileEnterToSend}
+        onEdit={(text) => { props.edit('mobileEnterToSend', text) }}
+        onReset={() => { props.resetField('mobileEnterToSend') }}
+      />
     </PluginSettingsCard>
   )
 }

package/src/client/UpdateEntry.tsx

@@ -10,7 +10,7 @@ import { createPortal } from "react-dom"
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
 import { IconDownloadOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { UpdateStatus } from '../update.ts'
-import { fetchUpdateStatus, runUpdate } from "./update-api.ts"
+import { fetchUpdateStatus, runUpdate, UpdateStatusError } from "./update-api.ts"
 import { UpdatePanel, type UpdateView } from "./UpdatePanel.tsx"
 import css from "./remote.module.css"
 
@@ -36,7 +36,15 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
     let status: UpdateStatus
     try {
       status = await fetchUpdateStatus()
-    } catch {
+    } catch (error) {
+      // HTTP 404: the update route is not mounted — the host process runs an
+      // older plugin build (client refreshed, host did not). Restarting dsh
+      // web loads the new plugin; a plain network failure gets the generic
+      // offline copy instead of a misleading "cannot reach update source".
+      if (error instanceof UpdateStatusError && error.status === 404) {
+        setView({ kind: "error", message: t("update.unmounted"), detail: t("update.unmountedDetail") })
+        return
+      }
       setView({ kind: "error", message: t("update.offline"), detail: t("update.offlineDetail") })
       return
     }

package/src/client/deep-link.ts

@@ -74,7 +74,7 @@ export function runPairBootFlow(ctx: Context, search: string, page: PageSurface
   }
 }
 
-/** Accept the token, then reload (the workspace param survives the reload). */
+/** Accept the token, then enter the matching desktop/mobile surface. */
 async function runAccept(token: string, page: PageSurface): Promise<void> {
   let ok = false
   try {
@@ -91,9 +91,15 @@ async function runAccept(token: string, page: PageSurface): Promise<void> {
   page.replaceState(`${url.pathname}${url.search}${url.hash}`)
   if (ok) {
     // Phones land on the standalone simplified surface (the full desktop UI
-    // is not built for small screens); desktops stay on the full UI.
-    if (isMobileSurface()) page.navigate('/m')
-    else page.reload()
+    // is not built for small screens). Keep the workspace target so the
+    // mobile surface can open the intended workspace instead of losing the
+    // QR context at this navigation boundary.
+    if (isMobileSurface()) {
+      url.pathname = '/m'
+      page.navigate(`${url.pathname}${url.search}${url.hash}`)
+    } else {
+      page.reload()
+    }
   }
 }
 

package/src/client/locales.ts

@@ -55,6 +55,8 @@ export const zh = {
   'settings.publicBaseUrlHint': '内网穿透的公网地址，如 Cloudflare Tunnel：https://xxx.trycloudflare.com。填写后二维码将生成公网链接，手机不在同一网络也能配对；留空则仅局域网可用。',
   'settings.autoTunnel': '自动公网隧道',
   'settings.autoTunnelHint': '开启后插件自动启动 Cloudflare quick tunnel（无需安装任何工具），并自动更新公网地址与信任配置，手机随时可用公网配对；关闭时使用上方手动填写的公网地址。',
+  'settings.mobileEnterToSend': '移动端回车发送',
+  'settings.mobileEnterToSendHint': '开启：移动端输入框按 Enter 直接发送，Shift+Enter 换行；关闭：Enter 换行，仅点发送按钮发送。',
   'settings.inherit': '继承',
   'settings.on': '开',
   'settings.off': '关',
@@ -89,6 +91,8 @@ export const zh = {
   'update.missingDetail': '无法定位已安装的 dsh-web-ui 聚合包。请先运行 dsh plugin --profile <profile> add @linxin666/dsh-web-ui-all。',
   'update.offline': '无法连接更新源',
   'update.offlineDetail': '网络不可用或更新服务异常，请稍后重试。',
+  'update.unmounted': '更新服务未加载',
+  'update.unmountedDetail': '当前 dsh web 进程运行的插件版本不含更新服务，请重启 dsh web（Ctrl+C 后重新运行）后再试。',
   'update.error': '更新失败',
   'update.packages': '组件版本',
   'update.retry': '重新检查',
@@ -162,6 +166,8 @@ export const en = {
   'settings.publicBaseUrlHint': 'The public URL of a tunnel in front of this server, e.g. a Cloudflare Tunnel: https://xxx.trycloudflare.com. When set, the QR link is built from it so a phone anywhere can pair; leave blank for LAN-only usage.',
   'settings.autoTunnel': 'Auto public tunnel',
   'settings.autoTunnelHint': 'When on, the plugin runs its own Cloudflare quick tunnel (no tool installation needed) and keeps the public address and trust config in sync automatically, so a phone anywhere can pair at any time; when off, the manually entered public address above applies.',
+  'settings.mobileEnterToSend': 'Enter to send on mobile',
+  'settings.mobileEnterToSendHint': 'On: Enter in the mobile composer sends immediately and Shift+Enter inserts a newline. Off: Enter inserts a newline and only the send button sends.',
   'settings.inherit': 'Inherit',
   'settings.on': 'On',
   'settings.off': 'Off',
@@ -196,6 +202,8 @@ export const en = {
   'update.missingDetail': 'Could not locate the installed dsh-web-ui aggregate package. Install it with: dsh plugin --profile <profile> add @linxin666/dsh-web-ui-all',
   'update.offline': 'Cannot reach the update source',
   'update.offlineDetail': 'The network is unavailable or the update service is failing; try again later.',
+  'update.unmounted': 'The update service is not loaded',
+  'update.unmountedDetail': 'The running dsh web process loads a plugin build without the update service; restart dsh web (Ctrl+C, then run dsh web again) and retry.',
   'update.error': 'Update failed',
   'update.packages': 'Component versions',
   'update.retry': 'Check again',

package/src/client/settings-card.module.css

@@ -1,76 +1,83 @@
+/* Plugin settings card chrome + staged form fields.
+ * Aligned with the official ui-settings-plugins PluginCard / fields CSS:
+ * same semantic tokens, radius, typography and states so family cards read
+ * as siblings of the built-in Shell / Agent loop / Web search cards. */
+
 .card {
-  list-style: none;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
   background: var(--dsw-alias-bg-layer-3);
-  overflow: hidden;
+  border-radius: 12px;
+  list-style: none;
   transition: border-color 0.16s, background 0.16s;
 }
 
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
 .cardOpen {
   background: var(--dsw-alias-bg-layer-2);
   border-color: var(--dsw-alias-label-dimmed);
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  appearance: none;
   width: 100%;
-  padding: 10px 14px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
   font: inherit;
-  border-radius: 8px;
-  transition: background-color 120ms ease, box-shadow 120ms ease;
-}
-
-.header:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.header:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-active);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
 }
 
 .header:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
-}
-
-.header:disabled {
-  opacity: 0.5;
-  cursor: default;
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
 }
 
 .headText {
-  display: flex;
   flex-direction: column;
-  gap: 2px;
   flex: 1;
+  gap: 4px;
   min-width: 0;
+  display: flex;
 }
 
 .name {
-  font-weight: 600;
   color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .description {
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .pending {
-  font-size: 12px;
-  color: var(--dsw-alias-state-warn-primary);
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  flex: none;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .chevron {
-  transition: transform 120ms ease;
   color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
 }
 
 .chevronOpen {
@@ -78,52 +85,59 @@
 }
 
 .body {
-  padding: 0 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
 }
 
 .readOnly {
-  margin: 0;
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .notExposed {
-  margin: 0;
+  color: var(--dsw-alias-state-warn-primary);
+  margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-state-warn-primary);
 }
 
 .footer {
-  display: flex;
-  align-items: center;
+  border-top: 1px solid var(--dsw-alias-border-l2);
   justify-content: flex-end;
+  align-items: center;
   gap: 8px;
+  padding: 12px 0 4px;
+  display: flex;
 }
 
 .failed {
-  margin: 0 auto 0 0;
+  min-width: 0;
+  color: var(--dsw-alias-label-error);
+  flex: 1;
+  margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
 .discard,
 .save {
-  padding: 5px 12px;
-  border-radius: 6px;
+  appearance: none;
   font: inherit;
-  font-size: 13px;
   cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .discard {
-  border: 1px solid var(--dsw-alias-border-l2);
-  background: transparent;
+  border-color: var(--dsw-alias-border-l2);
   color: var(--dsw-alias-label-secondary);
+  background: transparent;
 }
 
 .discard:hover:not(:disabled) {
@@ -131,173 +145,154 @@
   border-color: var(--dsw-alias-label-dimmed);
 }
 
-.discard:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-active);
-}
-
-.discard:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
-}
-
 .save {
-  border: 1px solid var(--dsw-alias-button-info-fill);
-  background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-.save:hover:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-}
-
-.save:active:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-  filter: brightness(0.96);
-}
-
-.save:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
 }
 
 .discard:disabled,
 .save:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: default;
 }
 
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
 .field {
-  display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
 }
 
 .head {
-  display: flex;
   align-items: center;
   gap: 8px;
+  display: flex;
 }
 
 .label {
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  flex: 1;
   font-size: 13px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
+  line-height: 1.5;
 }
 
 .badges {
-  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  display: inline-flex;
 }
 
 .badge {
-  flex: none;
-  min-width: 0;
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: var(--dsw-alias-interactive-bg-hover-accent);
-  color: var(--dsw-alias-state-business-primary);
   white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .reset {
-  flex: none;
-  font-size: 11px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--dsw-alias-state-business-primary);
+  font: inherit;
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
-  padding: 1px 2px;
-  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .reset:hover:not(:disabled) {
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.reset:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-active);
+.reset:disabled {
+  cursor: default;
 }
 
 .reset:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
-}
-
-.reset:disabled {
-  opacity: 0.5;
-  cursor: default;
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
 }
 
 .input,
 .select {
-  padding: 6px 8px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-specific-input-major);
-  transition: border-color 120ms ease, box-shadow 120ms ease;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .input:focus-visible,
 .select:focus-visible {
-  outline: none;
   border-color: var(--dsw-alias-brand-primary);
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
+  outline: none;
+}
+
+.input:disabled,
+.select:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
 }
 
 .inputInvalid {
-  padding: 6px 8px;
-  border: 1px solid var(--dsw-alias-state-error-primary);
-  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-label-error);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  transition: border-color 120ms ease, box-shadow 120ms ease;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .inputInvalid:focus-visible {
-  outline: none;
-  border-color: var(--dsw-alias-state-error-primary);
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-state-error-primary);
+  outline: 2px solid var(--dsw-alias-label-error);
+  outline-offset: 1px;
+  border-color: var(--dsw-alias-label-error);
 }
 
-.input:disabled,
-.select:disabled {
-  opacity: 0.6;
-}
-
-.hint {
+.invalid {
+  color: var(--dsw-alias-label-error);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary);
+  line-height: 1.5;
 }
 
-.invalid {
+.hint {
+  color: var(--dsw-alias-label-tertiary);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
-/* Accessibility: collapse the interaction transitions for reduced-motion
-   users; the card chrome itself stays static. */
 @media (prefers-reduced-motion: reduce) {
   .card,
   .header,
   .chevron,
+  .chevronOpen,
   .discard,
-  .save,
-  .reset,
-  .input,
-  .select,
-  .inputInvalid {
+  .save {
     transition: none;
   }
 }