@dsh-plus/notify-email 0.1.0

package/src/client/api.ts

@@ -0,0 +1,83 @@
+/**
+ * 配置卡片数据通道：同源 fetch 调自建 webServer 路由。
+ * （官方 settings.* RPC 白名单硬编码不含第三方 namespace，见 config-api.ts 注释。）
+ * @module notify-email/client/api
+ */
+
+export interface WireSmtp {
+  host: string
+  port: number
+  secure: boolean
+  user: string
+  from: string
+  passConfigured: boolean
+}
+
+export interface WireTriggers {
+  onComplete: boolean
+  onError: boolean
+  onAborted: boolean
+  onQuestion: boolean
+  onPlanReview: boolean
+}
+
+export interface WireConfig {
+  enabled: boolean
+  smtp: WireSmtp
+  to: string[]
+  triggers: WireTriggers
+  idleDebounceMs: number
+  maxBodyChars: number
+  dryRun: boolean
+  writable: boolean
+}
+
+export interface WirePatch {
+  enabled: boolean
+  smtp: {
+    host: string
+    port: number
+    secure: boolean
+    user: string
+    pass: string
+    from: string
+  }
+  to: string[]
+  triggers: WireTriggers
+  idleDebounceMs: number
+  maxBodyChars: number
+  dryRun: boolean
+}
+
+export interface TestResult {
+  ok: boolean
+  detail: string
+}
+
+const ROUTE_CONFIG = '/dsh-plus/notify-email/config'
+const ROUTE_TEST = '/dsh-plus/notify-email/test'
+
+async function parse<T>(res: Response): Promise<T> {
+  const body = (await res.json()) as T & { error?: string }
+  if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
+  return body
+}
+
+export async function fetchConfig(): Promise<WireConfig> {
+  return parse<WireConfig>(await fetch(ROUTE_CONFIG, { credentials: 'same-origin' }))
+}
+
+export async function saveConfig(patch: WirePatch): Promise<WireConfig> {
+  return parse<WireConfig>(
+    await fetch(ROUTE_CONFIG, {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(patch),
+    }),
+  )
+}
+
+export async function sendTest(): Promise<TestResult> {
+  return parse<TestResult>(await fetch(ROUTE_TEST, { method: 'POST', credentials: 'same-origin' }))
+}

package/src/client/card.tsx

@@ -0,0 +1,239 @@
+/**
+ * 「邮件通知」配置卡片：注册进 settings.plugin.item 插槽（官方插件配置页）。
+ * 交互对齐官方卡片：折叠/展开、staged draft、未保存标记、保存/放弃；
+ * 另加「发送测试邮件」。数据走自建同源路由（api.ts）。
+ * @module notify-email/client/card
+ */
+import { useEffect, useMemo, useState, type ReactElement } from 'react'
+
+import {
+  fetchConfig, saveConfig, sendTest, type WireConfig, type WirePatch, type WireTriggers,
+} from './api.ts'
+import { CheckRow, TextField } from './fields.tsx'
+
+export interface CardProps {
+  t(key: string): string
+}
+
+interface Draft {
+  enabled: boolean
+  host: string
+  port: string
+  secure: boolean
+  user: string
+  pass: string
+  from: string
+  toText: string
+  triggers: WireTriggers
+  idleDebounceMs: string
+  maxBodyChars: string
+  dryRun: boolean
+}
+
+interface Status {
+  kind: 'idle' | 'ok' | 'error'
+  text: string
+}
+
+const IDLE_STATUS: Status = { kind: 'idle', text: '' }
+
+function draftFromWire(wire: WireConfig): Draft {
+  return {
+    enabled: wire.enabled,
+    host: wire.smtp.host,
+    port: String(wire.smtp.port),
+    secure: wire.smtp.secure,
+    user: wire.smtp.user,
+    pass: '',
+    from: wire.smtp.from,
+    toText: wire.to.join(', '),
+    triggers: { ...wire.triggers },
+    idleDebounceMs: String(wire.idleDebounceMs),
+    maxBodyChars: String(wire.maxBodyChars),
+    dryRun: wire.dryRun,
+  }
+}
+
+function isPositiveInt(text: string): boolean {
+  return /^[0-9]+$/.test(text) && Number(text) > 0
+}
+
+function toPatch(draft: Draft): WirePatch {
+  return {
+    enabled: draft.enabled,
+    smtp: {
+      host: draft.host.trim(),
+      port: Number(draft.port),
+      secure: draft.secure,
+      user: draft.user.trim(),
+      pass: draft.pass,
+      from: draft.from.trim(),
+    },
+    to: draft.toText.split(',').map((s) => s.trim()).filter((s) => s.length > 0),
+    triggers: { ...draft.triggers },
+    idleDebounceMs: Number(draft.idleDebounceMs),
+    maxBodyChars: Number(draft.maxBodyChars),
+    dryRun: draft.dryRun,
+  }
+}
+
+const TRIGGER_KEYS = ['onComplete', 'onError', 'onAborted', 'onQuestion', 'onPlanReview'] as const
+
+export function NotifyEmailCard(props: CardProps): ReactElement | null {
+  const { t } = props
+  const [open, setOpen] = useState(false)
+  const [wire, setWire] = useState<WireConfig | null>(null)
+  const [draft, setDraft] = useState<Draft | null>(null)
+  const [failed, setFailed] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [status, setStatus] = useState<Status>(IDLE_STATUS)
+
+  useEffect(() => {
+    let alive = true
+    fetchConfig()
+      .then((loaded) => {
+        if (!alive) return
+        setWire(loaded)
+        setDraft(draftFromWire(loaded))
+      })
+      .catch(() => {
+        if (alive) setFailed(true)
+      })
+    return () => {
+      alive = false
+    }
+  }, [])
+
+  const dirty = useMemo(
+    () => wire !== null && draft !== null && JSON.stringify(toPatch(draft)) !== JSON.stringify(toPatch(draftFromWire(wire))),
+    [wire, draft],
+  )
+  const invalid = useMemo(
+    () =>
+      draft !== null &&
+      (!isPositiveInt(draft.port) || !isPositiveInt(draft.idleDebounceMs) ||
+        !isPositiveInt(draft.maxBodyChars) || Number(draft.maxBodyChars) < 200),
+    [draft],
+  )
+
+  if (failed) return null
+  if (wire === null || draft === null) {
+    return <li className="dne-card"><p className="dne-readOnly">{t('loading')}</p></li>
+  }
+  const edit = <K extends keyof Draft>(key: K, value: Draft[K]): void => {
+    setDraft({ ...draft, [key]: value })
+    setStatus(IDLE_STATUS)
+  }
+  const editTrigger = (key: keyof WireTriggers, checked: boolean): void => {
+    edit('triggers', { ...draft.triggers, [key]: checked })
+  }
+  const onSave = (): void => {
+    setSaving(true)
+    saveConfig(toPatch(draft))
+      .then((saved) => {
+        setWire(saved)
+        setDraft(draftFromWire(saved))
+        setStatus(IDLE_STATUS)
+      })
+      .catch((error: unknown) => {
+        setStatus({ kind: 'error', text: `${t('saveFailed')} ${error instanceof Error ? error.message : ''}` })
+      })
+      .finally(() => setSaving(false))
+  }
+  const onTest = (): void => {
+    setTesting(true)
+    sendTest()
+      .then((result) => {
+        if (result.ok) {
+          setStatus({ kind: 'ok', text: result.detail === 'dry-run' ? t('testDryRun') : t('testOk') })
+        } else {
+          const why = result.detail === 'incomplete' ? t('incomplete') : result.detail
+          setStatus({ kind: 'error', text: `${t('testFailed')}${why}` })
+        }
+      })
+      .catch((error: unknown) => {
+        setStatus({ kind: 'error', text: `${t('testFailed')}${error instanceof Error ? error.message : ''}` })
+      })
+      .finally(() => setTesting(false))
+  }
+
+  const disabled = !wire.writable
+  return (
+    <li className={`dne-card${open ? ' dne-cardOpen' : ''}`}>
+      <button
+        type="button"
+        className="dne-header"
+        aria-expanded={open}
+        aria-label={`${t(open ? 'collapse' : 'expand')}: ${t('title')}`}
+        onClick={() => setOpen(!open)}
+      >
+        <span className="dne-headText">
+          <span className="dne-name">{t('title')}</span>
+          <span className="dne-description">{t('description')}</span>
+        </span>
+        {dirty ? <span className="dne-pending">{t('unsaved')}</span> : null}
+        <span className={`dne-chevron${open ? ' dne-chevronOpen' : ''}`}>▾</span>
+      </button>
+      {open ? (
+        <div className="dne-body">
+          {disabled ? <p className="dne-readOnly" role="status">{t('readOnly')}</p> : null}
+          <CheckRow id="dne-enabled" label={t('enabled')} checked={draft.enabled} disabled={disabled}
+            onEdit={(v) => edit('enabled', v)} />
+          <TextField id="dne-host" label={t('host')} hint={t('hostHint')} value={draft.host}
+            disabled={disabled} onEdit={(v) => edit('host', v)} />
+          <TextField id="dne-port" label={t('port')} hint={t('portHint')} value={draft.port} numeric
+            disabled={disabled} invalid={!isPositiveInt(draft.port)} invalidLabel={t('invalidNumber')}
+            onEdit={(v) => edit('port', v)} />
+          <CheckRow id="dne-secure" label={t('secure')} checked={draft.secure} disabled={disabled}
+            onEdit={(v) => edit('secure', v)} />
+          <TextField id="dne-user" label={t('user')} hint={t('userHint')} value={draft.user}
+            disabled={disabled} onEdit={(v) => edit('user', v)} />
+          <TextField id="dne-pass" label={t('pass')} hint={t('passHint')} value={draft.pass} password
+            disabled={disabled}
+            badge={{ text: wire.smtp.passConfigured ? t('passSet') : t('passUnset'), set: wire.smtp.passConfigured }}
+            onEdit={(v) => edit('pass', v)} />
+          <TextField id="dne-from" label={t('from')} hint={t('fromHint')} value={draft.from}
+            disabled={disabled} onEdit={(v) => edit('from', v)} />
+          <TextField id="dne-to" label={t('to')} hint={t('toHint')} value={draft.toText}
+            disabled={disabled} onEdit={(v) => edit('toText', v)} />
+          <p className="dne-groupLabel">{t('triggerGroup')}</p>
+          {TRIGGER_KEYS.map((key) => (
+            <CheckRow key={key} id={`dne-${key}`} label={t(key)} checked={draft.triggers[key]}
+              disabled={disabled} onEdit={(v) => editTrigger(key, v)} />
+          ))}
+          <TextField id="dne-debounce" label={t('idleDebounceMs')} hint={t('idleDebounceMsHint')}
+            value={draft.idleDebounceMs} numeric disabled={disabled}
+            invalid={!isPositiveInt(draft.idleDebounceMs)} invalidLabel={t('invalidNumber')}
+            onEdit={(v) => edit('idleDebounceMs', v)} />
+          <TextField id="dne-maxchars" label={t('maxBodyChars')} hint={t('maxBodyCharsHint')}
+            value={draft.maxBodyChars} numeric disabled={disabled}
+            invalid={!isPositiveInt(draft.maxBodyChars) || Number(draft.maxBodyChars) < 200}
+            invalidLabel={t('invalidNumber')}
+            onEdit={(v) => edit('maxBodyChars', v)} />
+          <CheckRow id="dne-dryrun" label={t('dryRun')} checked={draft.dryRun} disabled={disabled}
+            onEdit={(v) => edit('dryRun', v)} />
+          <div className="dne-footer">
+            {status.kind !== 'idle' ? (
+              <p className={`dne-status${status.kind === 'error' ? ' dne-statusError' : ''}`} role="status">
+                {status.text}
+              </p>
+            ) : null}
+            <button type="button" className="dne-btn dne-btnGhost" disabled={testing}
+              onClick={onTest}>
+              {t(testing ? 'testing' : 'test')}
+            </button>
+            <button type="button" className="dne-btn dne-btnGhost" disabled={!dirty || saving}
+              onClick={() => { setDraft(draftFromWire(wire)); setStatus(IDLE_STATUS) }}>
+              {t('discard')}
+            </button>
+            <button type="button" className="dne-btn dne-btnPrimary" disabled={!dirty || invalid || saving || disabled}
+              onClick={onSave}>
+              {t(saving ? 'saving' : 'save')}
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </li>
+  )
+}

package/src/client/client.ts

@@ -0,0 +1,63 @@
+/**
+ * 浏览器半入口：注册 locale 字典 + 向 settings.plugin.item 插槽注册「邮件通知」卡片。
+ * 构建产物为 window.__ModuleLoader__.load({id, factory}) 形式的 CJS factory
+ * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
+ *
+ * 类型说明：浏览器半只用到 slots/locale 的很窄一面，此处以最小本地接口声明，
+ * 避免为构建期类型引入整条官方 client 依赖树；运行时契约以官方
+ * dsh-client-ui-settings-plugins 的 settings.plugin.item 插槽为准。
+ * @module @dsh-plus/notify-email/client
+ */
+import type { Context } from '@deepseek-ai/cordis'
+
+import { NotifyEmailCard } from './card.tsx'
+import { en, NS, zh } from './i18n.ts'
+import { injectStyle } from './styles.ts'
+
+export const name = 'dsh-plus-notify-email'
+
+/** 浏览器半需要的 cordis 服务 key（loader 据此注入；package.json 的 dsh.client.inject 管包加载顺序）。 */
+export const inject = ['slots', 'locale'] as const
+
+interface SlotsLike {
+  inject(key: string, callback: () => unknown): unknown
+  register(options: Record<string, unknown>, component: unknown): () => void
+}
+
+interface LocaleLike {
+  register(ns: string, dict: { zh: Record<string, string>; en: Record<string, string> }): () => void
+  bind(ns: string): (key: string) => string
+}
+
+interface ClientContext {
+  slots: SlotsLike
+  locale: LocaleLike
+  effect(execute: () => () => void, label?: string): unknown
+}
+
+export function apply(ctx: Context): void {
+  const c = ctx as unknown as ClientContext
+  const tag = injectStyle()
+  c.effect(
+    () => () => {
+      tag?.remove()
+    },
+    'notify-email: style',
+  )
+  c.effect(
+    () => c.locale.register(NS, { zh, en }),
+    'notify-email: locale',
+  )
+  c.slots.inject('settings.plugin.item', () =>
+    c.slots.register(
+      {
+        name: 'settings.plugin.item',
+        id: 'notify-email',
+        order: 100,
+        locale: NS,
+        inject: () => ({ t: c.locale.bind(NS) }),
+      },
+      NotifyEmailCard,
+    ),
+  )
+}

package/src/client/fields.tsx

@@ -0,0 +1,75 @@
+/**
+ * 配置卡片的基础控件：文本/数字/密码字段与勾选行。
+ * 视觉对齐官方卡片字段（label + hint + input 纵列）。
+ * @module notify-email/client/fields
+ */
+import type { ReactElement } from 'react'
+
+export interface TextFieldProps {
+  id: string
+  label: string
+  hint?: string
+  value: string
+  disabled?: boolean
+  invalid?: boolean
+  invalidLabel?: string
+  numeric?: boolean
+  password?: boolean
+  badge?: { text: string; set: boolean }
+  onEdit(text: string): void
+}
+
+export function TextField(props: TextFieldProps): ReactElement {
+  const invalid = props.invalid === true
+  return (
+    <div className="dne-field">
+      <div className="dne-head">
+        <label className="dne-label" htmlFor={props.id}>
+          {props.label}
+        </label>
+        {props.badge !== undefined ? (
+          <span className={`dne-badge ${props.badge.set ? 'dne-badgeSet' : 'dne-badgeUnset'}`}>
+            {props.badge.text}
+          </span>
+        ) : null}
+      </div>
+      <input
+        id={props.id}
+        className={`dne-input${invalid ? ' dne-inputInvalid' : ''}`}
+        type={props.password === true ? 'password' : 'text'}
+        inputMode={props.numeric === true ? 'numeric' : undefined}
+        autoComplete={props.password === true ? 'off' : undefined}
+        aria-invalid={invalid || undefined}
+        value={props.value}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.value)}
+      />
+      <p className={invalid ? 'dne-invalid' : 'dne-hint'}>
+        {invalid ? (props.invalidLabel ?? '') : (props.hint ?? '')}
+      </p>
+    </div>
+  )
+}
+
+export interface CheckRowProps {
+  id: string
+  label: string
+  checked: boolean
+  disabled?: boolean
+  onEdit(checked: boolean): void
+}
+
+export function CheckRow(props: CheckRowProps): ReactElement {
+  return (
+    <div className="dne-checkRow">
+      <input
+        id={props.id}
+        type="checkbox"
+        checked={props.checked}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.checked)}
+      />
+      <label htmlFor={props.id}>{props.label}</label>
+    </div>
+  )
+}

package/src/client/i18n.ts

@@ -0,0 +1,104 @@
+/**
+ * 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+ * @module notify-email/client/i18n
+ */
+
+export const NS = 'dsh-plus-notify-email'
+
+export const zh: Record<string, string> = {
+  title: '邮件通知',
+  description: '任务结束、等待决策或出错时向指定邮箱发送邮件。',
+  enabled: '启用通知',
+  host: 'SMTP 服务器',
+  hostHint: '如 smtp.qq.com、smtp.163.com。',
+  port: '端口',
+  portHint: '465（TLS）或 587（STARTTLS）。',
+  secure: 'TLS 直连',
+  user: '登录用户名',
+  userHint: '通常为发件邮箱地址；免认证服务器可留空。',
+  pass: '密码 / 授权码',
+  passHint: '留空表示保持已存密码不变。',
+  passSet: '已配置',
+  passUnset: '未配置',
+  from: '发件地址',
+  fromHint: '邮件 From 头，通常与登录用户名一致。',
+  to: '收件邮箱',
+  toHint: '多个收件人用英文逗号分隔。',
+  triggerGroup: '通知时机',
+  onComplete: '任务执行完毕',
+  onError: '报错 / 失败停止',
+  onAborted: '被用户取消',
+  onQuestion: '提问等待回答',
+  onPlanReview: 'Plan 待审批',
+  idleDebounceMs: '空闲确认（毫秒）',
+  idleDebounceMsHint: '任务结束后等待该时长确认无后续工作再发信。',
+  maxBodyChars: '正文截断长度',
+  maxBodyCharsHint: '邮件正文内容超过该长度时截断。',
+  dryRun: '仅记录日志（不真实发送）',
+  save: '保存',
+  saving: '保存中…',
+  discard: '放弃',
+  unsaved: '未保存',
+  test: '发送测试邮件',
+  testing: '发送中…',
+  testOk: '测试邮件已发送。',
+  testDryRun: '已按 dry-run 记录日志（未真实发送）。',
+  testFailed: '测试发送失败：',
+  saveFailed: '保存失败，请检查填写内容。',
+  loading: '加载中…',
+  unavailable: '配置服务不可用。',
+  readOnly: '当前部署无 settings provider，配置为只读；请编辑 settings.yaml。',
+  expand: '展开',
+  collapse: '收起',
+  invalidNumber: '请输入有效数字',
+  incomplete: 'SMTP 配置不完整（服务器/发件地址/收件人必填）。',
+}
+
+export const en: Record<string, string> = {
+  title: 'Email notifications',
+  description: 'Email a mailbox when a task finishes, awaits a decision, or fails.',
+  enabled: 'Enable notifications',
+  host: 'SMTP host',
+  hostHint: 'e.g. smtp.qq.com, smtp.gmail.com.',
+  port: 'Port',
+  portHint: '465 (TLS) or 587 (STARTTLS).',
+  secure: 'Direct TLS',
+  user: 'Username',
+  userHint: 'Usually the sender address; leave empty for auth-less servers.',
+  pass: 'Password / app token',
+  passHint: 'Leave blank to keep the stored password.',
+  passSet: 'Configured',
+  passUnset: 'Not configured',
+  from: 'From address',
+  fromHint: 'The From header, usually same as the username.',
+  to: 'Recipients',
+  toHint: 'Separate multiple recipients with commas.',
+  triggerGroup: 'Notify when',
+  onComplete: 'Task completed',
+  onError: 'Task failed',
+  onAborted: 'Cancelled by user',
+  onQuestion: 'Waiting for an answer',
+  onPlanReview: 'Plan pending approval',
+  idleDebounceMs: 'Idle confirmation (ms)',
+  idleDebounceMsHint: 'Wait this long after completion to confirm no follow-up work.',
+  maxBodyChars: 'Body truncation',
+  maxBodyCharsHint: 'Truncate mail body content beyond this length.',
+  dryRun: 'Log only (do not send)',
+  save: 'Save',
+  saving: 'Saving…',
+  discard: 'Discard',
+  unsaved: 'Unsaved',
+  test: 'Send test email',
+  testing: 'Sending…',
+  testOk: 'Test email sent.',
+  testDryRun: 'Recorded as dry-run (not actually sent).',
+  testFailed: 'Test failed: ',
+  saveFailed: 'Save failed; please check the fields.',
+  loading: 'Loading…',
+  unavailable: 'Configuration service unavailable.',
+  readOnly: 'No settings provider in this deployment; edit settings.yaml instead.',
+  expand: 'Expand',
+  collapse: 'Collapse',
+  invalidNumber: 'Enter a valid number',
+  incomplete: 'SMTP config incomplete (host/from/recipients required).',
+}

package/src/client/styles.ts

@@ -0,0 +1,64 @@
+/**
+ * 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
+ * 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+ * @module notify-email/client/styles
+ */
+
+export const PLUGIN_ID = '@dsh-plus/notify-email'
+export const STYLE_TAG_ID = `${PLUGIN_ID}/card.css`
+
+export const cardCss = `
+.dne-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
+.dne-card:hover{border-color:var(--dsw-alias-label-dimmed)}
+.dne-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
+.dne-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
+.dne-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.dne-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
+.dne-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
+.dne-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
+.dne-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
+.dne-chevronOpen{transform:rotate(180deg)}
+.dne-pending{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}
+.dne-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
+.dne-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
+.dne-field+.dne-field{border-top:1px solid var(--dsw-alias-border-l2)}
+.dne-head{align-items:center;gap:8px;display:flex}
+.dne-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
+.dne-badge{white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.dne-badgeSet{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
+.dne-badgeUnset{color:var(--dsw-alias-label-tertiary)}
+.dne-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}
+.dne-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
+.dne-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+.dne-inputInvalid{border-color:var(--dsw-alias-label-error)}
+.dne-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.dne-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
+.dne-checkRow{align-items:center;gap:8px;display:flex;padding:6px 0}
+.dne-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
+.dne-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
+.dne-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
+.dne-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
+.dne-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
+.dne-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
+.dne-statusError{color:var(--dsw-alias-label-error)}
+.dne-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}
+.dne-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
+.dne-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
+.dne-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
+.dne-btn:disabled{opacity:.4;cursor:default}
+.dne-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+`
+
+/** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */
+export function injectStyle(): HTMLStyleElement | null {
+  if (typeof document === 'undefined') return null
+  if (document.querySelector(`style[data-plugin-css=${JSON.stringify(STYLE_TAG_ID)}]`) !== null) {
+    return null
+  }
+  const tag = document.createElement('style')
+  tag.dataset.plugin = PLUGIN_ID
+  tag.dataset.pluginCss = STYLE_TAG_ID
+  tag.textContent = cardCss
+  document.head.appendChild(tag)
+  return tag
+}