+
+
+ {envelope.map((env, i) => (
+
+ ))}
+
+ );
+}
+
+/// 3 个圆点错相位脉动；总宽 20pt，与 Swift ProgressDots 一致。
+function ProcessingDots() {
+ return (
+
+ {[0, 1, 2].map(i => (
+
+ ))}
+
+ );
+}
+
+interface CenterTextProps {
+ text: string;
+ color?: string;
+}
+
+function CenterText({ text, color = 'var(--ol-ink-3)' }: CenterTextProps) {
+ return (
+
+ {text}
+
+ );
+}
+
+interface CircleButtonProps {
+ variant: 'cancel' | 'confirm';
+ enabled: boolean;
+ onClick: () => void;
+}
+
+function CircleButton({ variant, enabled, onClick }: CircleButtonProps) {
+ const isCancel = variant === 'cancel';
+ return (
+
+ );
+}
+
+interface PillProps {
+ state: CapsuleState;
+ level: number;
+ insertedChars: number;
+ message?: string;
+ onCancel: () => void;
+ onConfirm: () => void;
+}
+
+function Pill({ state, level, insertedChars, message, onCancel, onConfirm }: PillProps) {
+ // 与 Swift `isControlEnabled` 同语义：只有 listening 时 cancel/confirm 才可点。
+ const enabled = state === 'recording';
+
+ let center: JSX.Element;
+ switch (state) {
+ case 'recording':
+ center =
+
+ );
+ break;
+ case 'done':
+ center =
+
+ );
+}
+
+export function Capsule() {
+ // 浏览器 dev 默认显示 listening；Tauri 进来后由后端 idle 覆盖。
+ const [state, setState] = useState
+ {center}
+
+
+
+ );
+}
diff --git a/openless -all/app/src/components/FloatingShell.tsx b/openless -all/app/src/components/FloatingShell.tsx
new file mode 100644
index 00000000..1f8e087f
--- /dev/null
+++ b/openless -all/app/src/components/FloatingShell.tsx
@@ -0,0 +1,237 @@
+// FloatingShell.tsx — frosted outer frame + raised inner console.
+// Sidebar lives INSIDE the console card. Footer icons sit on the frosted outer.
+// Settings is no longer a sidebar tab — it opens as a centered modal sheet.
+//
+// Ported verbatim from design_handoff_openless/variants.jsx::FloatingShell.
+
+import { type ComponentType } from 'react';
+import { Icon } from './Icon';
+import { WindowChrome, detectOS, type OS } from './WindowChrome';
+import { SettingsModal } from './SettingsModal';
+import { Overview } from '../pages/Overview';
+import { History } from '../pages/History';
+import { Vocab } from '../pages/Vocab';
+import { Style } from '../pages/Style';
+import { OL_DATA } from '../lib/mockData';
+import { useAppState, type AppTab } from '../state/useAppState';
+
+interface NavItem {
+ id: AppTab;
+ name: string;
+ icon: string;
+ cmp: ComponentType;
+}
+
+const NAV: NavItem[] = [
+ { id: 'overview', name: '概览', icon: 'overview', cmp: Overview },
+ { id: 'history', name: '历史', icon: 'history', cmp: History },
+ { id: 'vocab', name: '词汇表', icon: 'vocab', cmp: Vocab },
+ { id: 'style', name: '风格', icon: 'style', cmp: Style },
+];
+
+interface FloatingShellProps {
+ os?: OS;
+ initialTab?: AppTab;
+ initialSettings?: boolean;
+}
+
+export function FloatingShell({ os: osProp, initialTab = 'overview', initialSettings = false }: FloatingShellProps) {
+ const os = osProp ?? detectOS();
+ return (
+
+
+ {/* Main shell — flush with the frosted backplate (no separate float). */}
+ setSettingsOpen(false)} />
+ }
+
+ );
+}
+
+interface FooterIconProps {
+ name: string;
+ tip: string;
+ active?: boolean;
+ onClick?: () => void;
+}
+
+function FooterIcon({ name, tip, active, onClick }: FooterIconProps) {
+ return (
+
+ );
+}
diff --git a/openless -all/app/src/components/Icon.tsx b/openless -all/app/src/components/Icon.tsx
new file mode 100644
index 00000000..22efcdb8
--- /dev/null
+++ b/openless -all/app/src/components/Icon.tsx
@@ -0,0 +1,91 @@
+// Icon.tsx — minimal stroke icons (1.5 stroke). Matches the black/blue aesthetic.
+// Usage:
+
+ {/* Sidebar — inside the raised console */}
+
+
+ {/* Main content — inset white card sitting on the frosted backplate */}
+
+
+ {/* Footer — sits on frosted outer, like Typeless */}
+
+
+ {/* Settings modal — rendered inside this window */}
+ {settingsOpen &&
+
+
+
+
+
+
+ );
+}
+
+interface StepProps {
+ index: number;
+ title: string;
+ desc: string;
+ status: PermissionStatus;
+ actionLabel: string;
+ onAction: () => void;
+ disabled: boolean;
+ hint?: string;
+}
+
+function PermissionStep({ index, title, desc, status, actionLabel, onAction, disabled, hint }: StepProps) {
+ const granted = status === 'granted' || status === 'notApplicable';
+ return (
+
+
+
+
+
+
+ OL
+
+
+
+ 欢迎使用 OpenLess
+
+ 本地说出，本地落字。开始前需要两个系统权限。
+
+
+ 授权全部完成后此引导自动关闭。如果一直不消失，从菜单栏 OpenLess → 退出，重新打开 App。
+
+
+
+ );
+}
diff --git a/openless -all/app/src/components/SettingsModal.tsx b/openless -all/app/src/components/SettingsModal.tsx
new file mode 100644
index 00000000..9129bd65
--- /dev/null
+++ b/openless -all/app/src/components/SettingsModal.tsx
@@ -0,0 +1,243 @@
+// SettingsModal.tsx — centered sheet with sub-nav on the left.
+// Ported verbatim from design_handoff_openless/variants.jsx::SettingsModal
+// (plus its AccountSection / PersonalizeSection / AboutMini siblings).
+
+import { useEffect, useState, type CSSProperties } from 'react';
+import { Icon } from './Icon';
+import { Settings as SettingsContent } from '../pages/Settings';
+import { Row } from './ui/Row';
+import { SegSimple } from './ui/SegSimple';
+import { SwitchLite } from './ui/SwitchLite';
+import { SelectLite } from './ui/SelectLite';
+import type { OS } from './WindowChrome';
+
+interface SettingsModalProps {
+ os: OS;
+ onClose: () => void;
+}
+
+type ModalSectionId = '账户' | '设置' | '个性化' | '关于';
+
+interface ModalNavItem {
+ id: string;
+ icon: string;
+ external?: boolean;
+}
+
+interface ModalGroup {
+ items: ModalNavItem[];
+}
+
+export function SettingsModal({ os: _os, onClose }: SettingsModalProps) {
+ const [section, setSection] = useState
+ {granted ? '✓' : index}
+
+
+
+
+ {title}
+ {desc}
+ {hint && (
+
+ {hint.split('**').map((seg, i) => (i % 2 === 0 ? seg : {seg}))}
+
+ )}
+
+
+
+ );
+}
+
+function AccountSection() {
+ return (
+ e.stopPropagation()}
+ style={{
+ width: '100%', maxWidth: 880, height: '100%', maxHeight: 600,
+ background: 'var(--ol-surface)',
+ borderRadius: 14,
+ border: '0.5px solid rgba(0,0,0,.08)',
+ boxShadow: '0 30px 80px -20px rgba(15,17,22,.35), 0 0 0 0.5px rgba(0,0,0,.06)',
+ display: 'flex', overflow: 'hidden',
+ animation: 'ol-modal-pop .22s cubic-bezier(.2,.9,.3,1.1)',
+ position: 'relative',
+ }}>
+
+ {/* sub-sidebar */}
+
+
+ {/* content */}
+
+
+
+
+
+
+
+ {section}
+ + {section === '设置' &&
+
+ );
+}
+
+function PersonalizeSection() {
+ // 玻璃强度持久化到 localStorage，并实时写入 CSS var --ol-glass-blur。
+ // 这是 CSS-only 的层（影响 backdrop-filter 的内层强度）；macOS NSVisualEffectView
+ // 是另一层，由 Tauri 在窗口创建时一次性配置，运行时改动需要重启 App。
+ const [blur, setBlur] = useState
+
+ L
+
+
+
+ 本地用户
+ 未登录 · 所有数据保存在本机
+ + OpenLess 默认完全本地运行。登录后可在多设备间同步词汇表与风格预设，识别仍在本机或你配置的 Provider 上完成。 +
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function AboutMini() {
+ return (
+
+ setBlur(Number(e.target.value))}
+ style={{ width: 200, accentColor: 'var(--ol-blue)' }}
+ />
+
+ {blur}px
+
+
+
+ |
+ |
+ |
+
+ 本地优先
+
+
+ );
+}
+
+const btnGhost: CSSProperties = {
+ padding: '5px 10px', fontSize: 12, borderRadius: 6,
+ border: '0.5px solid var(--ol-line-strong)',
+ background: '#fff', color: 'var(--ol-ink-2)',
+ cursor: 'default', fontFamily: 'inherit',
+};
diff --git a/openless -all/app/src/components/WindowChrome.tsx b/openless -all/app/src/components/WindowChrome.tsx
new file mode 100644
index 00000000..bb772e75
--- /dev/null
+++ b/openless -all/app/src/components/WindowChrome.tsx
@@ -0,0 +1,124 @@
+// WindowChrome.tsx — frosted outer frame + raised inner console pattern.
+// The OUTER frame is a translucent shell with a tinted backdrop showing through.
+// The INNER content lives in a single raised card that floats above it.
+//
+// Layout per window:
+// ┌─ frosted outer ───────────────────────────────┐
+// │ [titlebar] │
+// │ ┌─ raised console (white, shadow) ─┐ │
+// │ │ sidebar │ main │ │
+// │ └──────────────────────────────────┘ │
+// │ [icon footer] │
+// └───────────────────────────────────────────────┘
+
+import { type CSSProperties, type ReactNode } from 'react';
+
+export type OS = 'mac' | 'win';
+
+export function detectOS(): OS {
+ if (typeof navigator === 'undefined') return 'mac';
+ const ua = navigator.userAgent || '';
+ if (/Mac|iPhone|iPad|iPod/.test(ua)) return 'mac';
+ if (/Windows/.test(ua)) return 'win';
+ return 'mac';
+}
+
+interface WindowChromeProps {
+ os?: OS;
+ title?: string;
+ children: ReactNode;
+ height?: number | string;
+}
+
+export function WindowChrome({ os = 'mac', title = 'OpenLess', children, height = 800 }: WindowChromeProps) {
+ return (
+
+ 
+
+
+
+
+ OpenLess
+ 自然说话，完美书写 · v1.0.0 (Build 412)
+
+ {os === 'win' &&
+ );
+}
+
+interface WinTitleBarProps {
+ title: string;
+}
+
+function WinTitleBar({ title }: WinTitleBarProps) {
+ return (
+
+ {children}
+
+
+
+ );
+}
+
+const winBtnStyle: CSSProperties = {
+ width: 46,
+ height: '100%',
+ border: 0,
+ background: 'transparent',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: 'var(--ol-ink-3)',
+ cursor: 'default',
+};
diff --git a/openless -all/app/src/components/ui/Row.tsx b/openless -all/app/src/components/ui/Row.tsx
new file mode 100644
index 00000000..a2723017
--- /dev/null
+++ b/openless -all/app/src/components/ui/Row.tsx
@@ -0,0 +1,21 @@
+// Row — two-column row used in the Settings modal sub-sections.
+
+import type { ReactNode } from 'react';
+
+interface RowProps {
+ label: string;
+ desc?: string;
+ children: ReactNode;
+}
+
+export function Row({ label, desc, children }: RowProps) {
+ return (
+
+
+ {title}
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+}
diff --git a/openless -all/app/src/components/ui/SegSimple.tsx b/openless -all/app/src/components/ui/SegSimple.tsx
new file mode 100644
index 00000000..802df27a
--- /dev/null
+++ b/openless -all/app/src/components/ui/SegSimple.tsx
@@ -0,0 +1,32 @@
+// SegSimple — segmented control used in the Settings modal sub-sections.
+
+import { useState } from 'react';
+
+interface SegSimpleProps {
+ options: string[];
+ active: string;
+}
+
+export function SegSimple({ options, active }: SegSimpleProps) {
+ const [v, setV] = useState(active);
+ return (
+
+
+ {label}
+ {desc && {desc}
}
+ {children}
+
+ {options.map((o) => (
+
+ ))}
+
+ );
+}
diff --git a/openless -all/app/src/components/ui/SelectLite.tsx b/openless -all/app/src/components/ui/SelectLite.tsx
new file mode 100644
index 00000000..c8116bfb
--- /dev/null
+++ b/openless -all/app/src/components/ui/SelectLite.tsx
@@ -0,0 +1,24 @@
+// SelectLite — dropdown-styled display used in the Settings modal sub-sections.
+
+import { Icon } from '../Icon';
+
+interface SelectLiteProps {
+ value: string;
+}
+
+export function SelectLite({ value }: SelectLiteProps) {
+ return (
+
+ {value}
+
+ );
+}
diff --git a/openless -all/app/src/components/ui/SwitchLite.tsx b/openless -all/app/src/components/ui/SwitchLite.tsx
new file mode 100644
index 00000000..897008b6
--- /dev/null
+++ b/openless -all/app/src/components/ui/SwitchLite.tsx
@@ -0,0 +1,29 @@
+// SwitchLite — small toggle used in the Settings modal sub-sections.
+
+import { useState } from 'react';
+
+interface SwitchLiteProps {
+ on?: boolean;
+}
+
+export function SwitchLite({ on: initial = false }: SwitchLiteProps) {
+ const [on, setOn] = useState(initial);
+ return (
+
+ );
+}
diff --git a/openless -all/app/src/lib/ipc.ts b/openless -all/app/src/lib/ipc.ts
new file mode 100644
index 00000000..0a317126
--- /dev/null
+++ b/openless -all/app/src/lib/ipc.ts
@@ -0,0 +1,180 @@
+// ipc.ts — typed wrapper around Tauri `invoke`. When running outside Tauri
+// (e.g. `vite dev` in a browser), every command falls back to mock data so
+// the UI is still operable for visual review.
+
+import type {
+ CredentialsStatus,
+ DictationSession,
+ DictionaryEntry,
+ PermissionStatus,
+ PolishMode,
+ UserPreferences,
+} from './types';
+import { OL_DATA } from './mockData';
+
+declare global {
+ interface Window {
+ __TAURI_INTERNALS__?: unknown;
+ }
+}
+
+const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window;
+
+export async function invokeOrMock
+
+ 刷新
+ 清空
+
+ }
+ />
+
+
+
+
+
+ {item ? (
+ <>
+
+
+
+ );
+}
+
+function formatTime(iso: string): string {
+ const d = new Date(iso);
+ if (isNaN(d.getTime())) return iso;
+ const now = new Date();
+ const sameDay = d.toDateString() === now.toDateString();
+ const pad = (n: number) => String(n).padStart(2, '0');
+ if (sameDay) return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+ return `${d.getMonth() + 1}/${d.getDate()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function formatDuration(ms: number | null): string {
+ if (ms == null || ms <= 0) return '—';
+ const sec = ms / 1000;
+ if (sec < 60) return `${sec.toFixed(1)}s`;
+ return `${(sec / 60).toFixed(1)}m`;
+}
diff --git a/openless -all/app/src/pages/Overview.tsx b/openless -all/app/src/pages/Overview.tsx
new file mode 100644
index 00000000..90c3c058
--- /dev/null
+++ b/openless -all/app/src/pages/Overview.tsx
@@ -0,0 +1,270 @@
+// Overview.tsx — 真实指标，从 listHistory + getCredentials 派生。
+
+import { useEffect, useMemo, useState } from 'react';
+import { Icon } from '../components/Icon';
+import { getCredentials, listHistory } from '../lib/ipc';
+import type { CredentialsStatus, DictationSession, PolishMode } from '../lib/types';
+import { Btn, Card, PageHeader, Pill } from './_atoms';
+
+const MODE_LABEL: Record
+
+
+
+
+ {FILTERS.map(f => (
+
+ ))}
+
+
+ {loading &&
+ 加载中…
}
+ {!loading && filtered.length === 0 && (
+
+ 还没有历史记录。按 右 Option 录一段试试。
+
+ )}
+ {filtered.map(s => (
+
+ ))}
+
+
+
+ {formatTime(item.createdAt)}
+ {MODE_LABEL[item.mode]}
+ {formatDuration(item.durationMs)}
+
+
+ 复制
+ 删除
+
+
+
+
+ 原文
+
+ + {item.rawTranscript || '（空）'} +
+
+ {MODE_LABEL[item.mode]}
+
+ + {item.finalText} +
+
+ {item.appName && 插入到 {item.appName}}
+ {item.finalText.length} 字
+ {item.dictionaryEntryCount != null && item.dictionaryEntryCount > 0 && (
+ {item.dictionaryEntryCount} 个热词
+ )}
+ {item.insertStatus === 'inserted' ? '已插入' : item.insertStatus === 'copiedFallback' ? '已复制(需 ⌘V)' : '插入失败'}
+
+
+ ) : (
+
+ {loading ? '加载中…' : '左侧选一条查看详情。'}
+
+ )}
+
+
+
+
+ 0 ? '今日均值' : '暂无数据'} />
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+interface ProviderCardProps {
+ kind: string;
+ name: string;
+ subname: string;
+ configured: boolean;
+}
+
+function ProviderCard({ kind, name, subname, configured }: ProviderCardProps) {
+ return (
+
+ 近 7 天
+ 条数 / 天
+
+
+ {weekDayLabels().map((d, i) => {d})}
+
+
+ 最近识别
+ 全部记录 →
+
+
+ {history.length === 0 && (
+
+
+ 还没有记录。按 右 Option 开始第一次录音。
+
+ )}
+ {history.slice(0, 5).map(s => (
+
+
+
+
+
+ {kind}
+ {configured ? (
+
+
+ 已配置
+
+ ) : (
+ 未配置
+ )}
+
+ {name}
+ {subname}
+
+
+ {value}
+ {trend || ' '}
+
+ {data.map((v, i) => {
+ const isToday = i === 6;
+ return (
+
+ );
+}
+
+function RecentRow({ session }: { session: DictationSession }) {
+ return (
+
+
+ );
+ })}
+ {v}
+
+
+
+ );
+}
+
+function formatTime(iso: string): string {
+ const d = new Date(iso);
+ if (isNaN(d.getTime())) return iso;
+ const now = new Date();
+ const sameDay = d.toDateString() === now.toDateString();
+ const pad = (n: number) => String(n).padStart(2, '0');
+ if (sameDay) return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+ return `${d.getMonth() + 1}/${d.getDate()}`;
+}
+
+function formatDuration(ms: number): string {
+ if (ms <= 0) return '—';
+ const sec = ms / 1000;
+ if (sec < 60) return `${sec.toFixed(1)}s`;
+ return `${Math.floor(sec / 60)}:${String(Math.floor(sec % 60)).padStart(2, '0')}`;
+}
+
+function weekDayLabels(): string[] {
+ const names = ['日', '一', '二', '三', '四', '五', '六'];
+ const today = new Date().getDay();
+ const out: string[] = [];
+ for (let i = 6; i >= 0; i--) {
+ out.push(names[(today - i + 7) % 7]);
+ }
+ return out;
+}
diff --git a/openless -all/app/src/pages/Settings.tsx b/openless -all/app/src/pages/Settings.tsx
new file mode 100644
index 00000000..e8806d6d
--- /dev/null
+++ b/openless -all/app/src/pages/Settings.tsx
@@ -0,0 +1,444 @@
+// Settings.tsx — ported verbatim from design_handoff_openless/pages.jsx::Settings.
+// Internal sub-sections (Recording / Providers / Shortcuts / Permissions / About)
+// keep their inline-style literals 1:1 with the source JSX.
+
+import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
+import { Icon } from '../components/Icon';
+import {
+ checkAccessibilityPermission,
+ checkMicrophonePermission,
+ getSettings,
+ readCredential,
+ requestAccessibilityPermission,
+ setCredential,
+ setSettings,
+} from '../lib/ipc';
+import type { HotkeyMode, HotkeyTrigger, PermissionStatus, UserPreferences } from '../lib/types';
+import { Btn, Card, PageHeader, Pill } from './_atoms';
+
+interface SettingsProps {
+ embedded?: boolean;
+}
+
+type SectionId = '录音' | '提供商' | '快捷键' | '权限' | '关于';
+
+export function Settings({ embedded = false }: SettingsProps) {
+ const [section, setSection] = useState
+
+ {formatTime(session.createdAt)}
+
+ {MODE_LABEL[session.mode]}
+
+
+ {session.finalText.split('\n')[0]}
+
+
+ {formatDuration(session.durationMs ?? 0)}
+
+
+
+
+ );
+}
+
+interface SettingRowProps {
+ label: string;
+ desc?: string;
+ children: ReactNode;
+}
+
+function SettingRow({ label, desc, children }: SettingRowProps) {
+ return (
+
+ {sections.map(s => (
+
+ ))}
+
+
+ {section === '录音' &&
+
+
+ );
+}
+
+const TRIGGER_LABEL: Record
+
+ {label}
+ {desc && {desc}
}
+ {children}
+ 加载中…
+ 录音
+ 定义全局录音的快捷键与触发方式。
+
+ {choices.map(([v, l]) => (
+
+ ))}
+
+
+
+ LLM 模型（润色）
+
+ OpenAI 兼容协议。当前后端固定走 "ark.*" 账户名，但 Keychain 缺时会回落到
+
+ ~/.openless/credentials.json
+ 的 active LLM provider（继承自 Swift 旧版）。
+
+
+ ASR 语音（火山引擎）
+ 用于将口述实时转写为文本。
+
+ setValue(e.target.value)}
+ onBlur={onBlur}
+ style={{ ...inputStyle, fontFamily: mono ? 'var(--ol-font-mono)' : 'inherit' }}
+ />
+ {mask && (
+
+ )}
+
+ {saved && (
+ 已保存
+ )}
+
+ 快捷键速查
+ 所有快捷键全局生效，需要在权限设置中开启辅助功能。
+ {rows.map(([k, v]) => (
+ 权限
+
+ OpenLess 需要以下系统权限才能正常工作。授权后通常需要完全退出 App 重启一次才生效。
+
+
+
+ 授权
+
+ )}
+
+
+
+ OL
+
+
+ OpenLess
+ 自然说话，完美书写 · v0.6.2 (Build 384)
+
+ {STYLES.map(s => {
+ const isDefault = prefs.defaultMode === s.id;
+ const isEnabled = prefs.enabledModes.includes(s.id);
+ return (
+
+
+ );
+}
diff --git a/openless -all/app/src/pages/Vocab.tsx b/openless -all/app/src/pages/Vocab.tsx
new file mode 100644
index 00000000..8267439b
--- /dev/null
+++ b/openless -all/app/src/pages/Vocab.tsx
@@ -0,0 +1,150 @@
+// Vocab.tsx — 接 Tauri 后端 list_vocab / add_vocab / remove_vocab / set_vocab_enabled。
+// 数据落地到 ~/Library/Application Support/OpenLess/dictionary.json（与 Swift 同名）。
+
+import { useEffect, useRef, useState } from 'react';
+import { addVocab, listVocab, removeVocab, setVocabEnabled } from '../lib/ipc';
+import type { DictionaryEntry } from '../lib/types';
+import { Btn, Card, PageHeader } from './_atoms';
+
+export function Vocab() {
+ const [entries, setEntries] = useState
+
+ );
+ })}
+
+
+
+ {isDefault && 当前默认 }
+ {!isDefault && (
+
+ )}
+
+ {s.desc}
+
+ {s.sample}
+
+
+
+
+
+ 添加
+
+
+ 支持中英混合 · 数字开头按字面识别 · 命中次数自动计数
+
+
+ {loading && onRemove(e.id)} onToggle={() => onToggle(e)} />
+ ))}
+
+ 加载中…
}
+ {!loading && entries.length === 0 && (
+
+ 还没有词条。在上面输入一个生词或专业术语，让模型在听写时优先匹配。
+
+ )}
+ {entries.map(e => (
+
+
+ );
+}
+
+interface CardProps {
+ children: ReactNode;
+ style?: CSSProperties;
+ padding?: number;
+ glassy?: boolean;
+}
+
+export function Card({ children, style, padding = 18, glassy = false }: CardProps) {
+ return (
+
+ {kicker && (
+
+ {right}
+ {kicker}
+ )}
+ {title}
+ {desc &&{desc}
} +
+ {children}
+
+ );
+}
+
+export type PillTone = 'default' | 'blue' | 'ok' | 'outline' | 'dark';
+export type PillSize = 'sm' | 'md';
+
+interface PillProps {
+ children: ReactNode;
+ tone?: PillTone;
+ size?: PillSize;
+ style?: CSSProperties;
+}
+
+export function Pill({ children, tone = 'default', size = 'md', style }: PillProps) {
+ const tones: Record
+
+
+ Unpacking...
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/openless -all/design_handoff_openless/README.md b/openless -all/design_handoff_openless/README.md
new file mode 100755
index 00000000..ea3e44ba
--- /dev/null
+++ b/openless -all/design_handoff_openless/README.md
@@ -0,0 +1,393 @@
+# Handoff: OpenLess v1.0 重设计
+
+> 本地说出，本地落字 — 一个跨平台（macOS + Windows）的桌面端语音转写应用 UI 重设计。
+
+---
+
+## Overview
+
+OpenLess 是一款跨平台桌面端语音转写工具：用户按下全局快捷键（默认 **右 Option / Right Alt**）即可在任何应用内录入，转写后文本自动写入光标位置。本次 v1.0 是从 v0.6 的全面重设计，目标：
+
+- **降低决策成本** — 信息架构由 7 个 tab 收缩到 5 个
+- **统一跨平台体验** — Mac / Win 仅在窗口顶栏不同，主体 100% 共用
+- **强调本地优先** — 无云端账户、无后台同步，所有数据只在本机
+- **录音由快捷键唤起** — 主界面不再有「开始录音」按钮，避免分散注意力
+
+## About the Design Files
+
+本目录中的 **HTML / JSX / CSS 文件是设计参考稿**，是用 React + 原生 CSS 写出来的高保真原型，用来表达预期的视觉与交互。**不是要直接拿去发布的生产代码。**
+
+实际开发任务：在你的目标技术栈中（推测是 **Tauri + React** 或 **Electron + React**，也可能是原生 SwiftUI for macOS / WinUI for Windows）**重新实现这套 UI**。如果项目还没选好框架，**Tauri + React + TypeScript** 是这种「本地优先 + 跨平台桌面 + 体积小 + 系统快捷键」需求的最佳选择。
+
+## Fidelity
+
+**High-fidelity (hifi)** — 颜色、字号、间距、圆角、阴影、动画曲线全部已确定。开发时请按 `tokens.css` 里的 CSS 变量原样落地（或翻译成你 UI 框架的 token 系统）。
+
+---
+
+## 文件清单
+
+| 文件 | 用途 |
+|---|---|
+| `App.html` | **干净的应用入口** — 直接打开看实际产品长什么样（自动检测 OS） |
+| `OpenLess Redesign.html` | **设计画布** — 平铺所有平台 × 所有页面，用于评审 |
+| `tokens.css` | 设计 tokens（颜色、字体、阴影、圆角、毛玻璃） |
+| `chrome.jsx` | 窗口外框（macOS 红黄绿 / Windows Mica 顶栏） |
+| `variants.jsx` | 主壳层 `FloatingShell` — 顶栏 + 侧栏 + 底栏 + 主内容 + 设置弹窗 |
+| `pages.jsx` | 4 个主 tab 页面（概览 / 历史 / 词汇表 / 风格）+ 设置内容 |
+| `capsule.jsx` | 录音胶囊（Dynamic Island 尺寸，3 种状态） |
+| `icons.jsx` | 内置 SVG 图标库 |
+| `data.js` | 演示数据（mock） |
+| `design-canvas.jsx` | 设计画布容器（仅评审用，**生产不需要**） |
+| `tweaks-panel.jsx` | 设计画布的右下浮动调参面板（仅评审用，**生产不需要**） |
+| `AppIcon.png` | 应用图标 |
+
+> **生产实现只需关注 `chrome.jsx`、`variants.jsx`、`pages.jsx`、`capsule.jsx`、`icons.jsx`、`tokens.css`。** 其余三个（`design-canvas.jsx`、`tweaks-panel.jsx`、`OpenLess Redesign.html`）只是给设计师评审用的脚手架。
+
+---
+
+## 设计 Tokens
+
+### Colors
+
+| Token | Value | 用途 |
+|---|---|---|
+| `--ol-white` | `#ffffff` | 卡片背景 |
+| `--ol-canvas` | `#f7f7f8` | 外壳背景 |
+| `--ol-surface` | `#ffffff` | 主内容卡 |
+| `--ol-surface-2` | `#fafafa` | 副卡片背景 |
+| `--ol-line` | `rgba(0,0,0,0.08)` | 主分割线 |
+| `--ol-line-strong` | `rgba(0,0,0,0.14)` | 强调分割线 |
+| `--ol-line-soft` | `rgba(0,0,0,0.05)` | 弱分割线 |
+| `--ol-ink` | `#0a0a0b` | 主文字 |
+| `--ol-ink-2` | `#2a2a2d` | 次级文字 |
+| `--ol-ink-3` | `rgba(10,10,11,0.62)` | 辅助文字 |
+| `--ol-ink-4` | `rgba(10,10,11,0.42)` | 占位 / 元数据 |
+| `--ol-ink-5` | `rgba(10,10,11,0.24)` | 禁用 |
+| `--ol-blue` | `#2563eb` | 主点缀色 / 当前态 |
+| `--ol-blue-hover` | `#1d4ed8` | hover |
+| `--ol-blue-soft` | `#eff4ff` | 蓝色背景态 |
+| `--ol-blue-ring` | `rgba(37,99,235,0.22)` | focus 环 |
+| `--ol-ok` / `--ol-warn` / `--ol-err` | `#16a34a` / `#d97706` / `#dc2626` | 状态色（克制使用） |
+
+### Glass / 毛玻璃
+
+```css
+--ol-glass-bg: rgba(255, 255, 255, 0.62);
+--ol-glass-bg-strong: rgba(255, 255, 255, 0.78);
+--ol-glass-border: rgba(255, 255, 255, 0.7);
+--ol-glass-blur: 20px;
+
+.ol-glass {
+ background: var(--ol-glass-bg);
+ backdrop-filter: blur(var(--ol-glass-blur)) saturate(160%);
+ border: 0.5px solid var(--ol-glass-border);
+}
+```
+
+外框磨砂背景（窗口背景）：
+```css
+background:
+ radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%),
+ radial-gradient(100% 70% at 100% 100%, rgba(37,99,235,0.07) 0%, rgba(37,99,235,0) 55%),
+ linear-gradient(180deg, rgba(245,245,247,0.92) 0%, rgba(232,232,236,0.92) 100%);
+backdrop-filter: blur(40px) saturate(180%);
+```
+
+### Shadows
+
+```
+--ol-shadow-sm: 0 1px 2px rgba(15,17,22,0.04), 0 0 0 0.5px rgba(0,0,0,0.04)
+--ol-shadow-md: 0 1px 2px rgba(15,17,22,0.05), 0 6px 24px -12px rgba(15,17,22,0.10), 0 0 0 0.5px rgba(0,0,0,0.04)
+--ol-shadow-lg: 0 20px 60px -20px rgba(15,17,22,0.18), 0 8px 32px -16px rgba(15,17,22,0.10), 0 0 0 0.5px rgba(0,0,0,0.06)
+--ol-shadow-xl: 0 40px 120px -40px rgba(15,17,22,0.30), 0 24px 60px -24px rgba(15,17,22,0.15), 0 0 0 0.5px rgba(0,0,0,0.06)
+```
+
+### Radii
+
+| Token | 值 | 用途 |
+|---|---|---|
+| `--ol-r-sm` | `6px` | 小按钮、tag |
+| `--ol-r-md` | `10px` | 内容卡片 |
+| `--ol-r-lg` | `14px` | 大卡片 |
+| `--ol-r-xl` | `18px` | （备用） |
+| `--ol-r-2xl` | `22px` | （备用） |
+| 窗口外框 | `20px` (mac) / `14px` (win) | 见 `chrome.jsx` |
+| 内置主内容卡 | `12px` | 见 `variants.jsx` |
+| `--ol-r-pill` | `999px` | 胶囊、tag |
+
+### Typography
+
+```
+--ol-font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, ..., system-ui, sans-serif
+--ol-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace
+```
+
+字号 / 字重对照：
+
+| 用途 | size | weight | letter-spacing |
+|---|---|---|---|
+| Page title | 22px | 600 | -0.02em |
+| Section title | 16px | 600 | -0.01em |
+| Body | 13px | 500 | 0 |
+| Secondary | 12px | 500 | 0 |
+| Caption / meta | 11.5px | 500 | 0 |
+| Eyebrow | 10.5px | 600 | 0.08em uppercase |
+| Mono (timestamp / 数据) | 11–13px | 500 | — |
+
+启用 Inter 的字体特性：`font-feature-settings: 'cv11', 'ss01', 'ss03';`
+
+---
+
+## 信息架构（IA）
+
+```
+v0.6（旧） v1.0（新）
+┌─ 首页 ┌─ 概览 · Provider 状态 + 今日数据 + 最近识别
+├─ 历史记录 ├─ 历史 · 双栏工作区（原文 vs 润色）
+├─ 词汇表 → ├─ 词汇表 · ASR 热词 + LLM 上下文，命中计数
+├─ 风格 ├─ 风格 · 4 种润色预设，可启停
+├─ 配置 ────┐ └─ 设置（弹窗触发）
+├─ 设置 ────┤── 合并 → 单一「设置」 ├─ 录音
+└─ 帮助中心 ┘ ├─ 提供商
+ ├─ 快捷键
+ ├─ 权限
+ └─ 关于
+```
+
+**「设置」不再是 sidebar tab**，而是底栏齿轮按钮唤起的**居中模态弹窗**，宽 720px，高 540px。
+
+---
+
+## 屏幕（Screens）
+
+总览：4 个主 tab × 2 个平台 + 设置弹窗 × 2 = **10 个独立屏幕**。Mac 和 Win 的差异**仅在窗口顶栏**。
+
+### 公共骨架（FloatingShell）
+
+每个屏幕都嵌套在以下骨架内：
+
+```
+┌──────────────────────────────────────────────────┐ ← 外框（毛玻璃）
+│ ● ● ● │ ↑ macOS：红黄绿浮于左上角，无独立标题栏
+│ ┌─Sidebar─┐ ┌──── Main 白色卡片（圆角 12px）────┐│
+│ │ Logo │ │ ││
+│ │ │ │
+ {heights.map((h, i) => (
+
+ ))}
+
+
+ );
+};
+
+// Recording — pill with cancel · waveform · timer · confirm
+const CapsuleMac = ({ recording = true, time = '0:08', onCancel, onConfirm }) => (
+
+
+
+
+);
+
+// Transcribing — waveform freezes; spinner + label between cancel & confirm slots
+const CapsuleTranscribing = () => (
+
+
+
+
+
+
+
+);
+
+// Done — momentary blue confirmation, fades out
+const CapsuleDone = ({ chars = 56 }) => (
+
+
+ 转写中
+
+
+
+
+
+ 已插入 {chars} 字
+
+);
+
+// Both platforms use the same capsule
+const CapsuleWin = CapsuleMac;
+const Capsule = CapsuleMac;
+
+window.CapsuleMac = CapsuleMac;
+window.CapsuleWin = CapsuleWin;
+window.Capsule = Capsule;
+window.CapsuleTranscribing = CapsuleTranscribing;
+window.CapsuleDone = CapsuleDone;
+window.Waveform = Waveform;
diff --git a/openless -all/design_handoff_openless/chrome.jsx b/openless -all/design_handoff_openless/chrome.jsx
new file mode 100755
index 00000000..95ee1ed7
--- /dev/null
+++ b/openless -all/design_handoff_openless/chrome.jsx
@@ -0,0 +1,134 @@
+// chrome.jsx — frosted outer frame + raised inner console pattern.
+// The OUTER frame is a translucent shell with a tinted backdrop showing through.
+// The INNER content lives in a single raised card that floats above it.
+//
+// Layout per window:
+// ┌─ frosted outer ───────────────────────────────┐
+// │ [titlebar] │
+// │ ┌─ raised console (white, shadow) ─┐ │
+// │ │ sidebar │ main │ │
+// │ └──────────────────────────────────┘ │
+// │ [icon footer] │
+// └───────────────────────────────────────────────┘
+
+const WindowChrome = ({ os = 'mac', title = 'OpenLess', children, height = 800 }) => {
+ return (
+
+ {os === 'win' &&
+ );
+};
+
+const MacTrafficLights = () => {
+ const [hover, setHover] = React.useState(false);
+ return (
+
+ {children}
+
+ {/* macOS traffic lights float above everything, no titlebar bar */}
+ {os === 'mac' && setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ style={{
+ position: 'absolute',
+ top: 13, left: 14,
+ display: 'flex', gap: 8, alignItems: 'center',
+ zIndex: 100,
+ }}
+ >
+
+ );
+};
+
+const TrafficDot = ({ color, hover, icon }) => {
+ // Reveal symbol on hover, like real macOS traffic lights
+ const symbols = {
+ close:
+
+);
+
+const winBtnStyle = {
+ width: 46,
+ height: '100%',
+ border: 0,
+ background: 'transparent',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: 'var(--ol-ink-3)',
+ cursor: 'default',
+};
+
+window.WindowChrome = WindowChrome;
diff --git a/openless -all/design_handoff_openless/data.js b/openless -all/design_handoff_openless/data.js
new file mode 100755
index 00000000..276f6aae
--- /dev/null
+++ b/openless -all/design_handoff_openless/data.js
@@ -0,0 +1,45 @@
+// data.js — shared mock data for OpenLess prototypes
+window.OL_DATA = {
+ metrics: {
+ duration: '37.6 分钟',
+ words: '7,484',
+ perMin: '199 字',
+ saved: '45.5 分钟',
+ speedup: '2.2×',
+ vocabActive: 28,
+ today: 100,
+ },
+ // Last 7 days (Mon..Sun)
+ weekly: [42, 28, 65, 38, 72, 88, 54],
+ providers: {
+ asr: { name: '火山引擎', subname: 'Volcengine · 实时流式', status: 'ok' },
+ llm: { name: 'DeepSeek', subname: 'deepseek-v4-flash · 0.40 temp', status: 'ok' },
+ },
+ styles: [
+ { id: 'raw', name: '原文', desc: '忠实转写', active: false, sample: '嗯那个我刚刚看了下新出的电影预告片，挺有意思的你有空也看看。' },
+ { id: 'light', name: '轻度润色', desc: '去口癖保语气', active: false, sample: '我刚刚看了一下新出的电影预告片，挺有意思的，你有空也看看。' },
+ { id: 'clear', name: '清晰结构', desc: '结构化整理', active: true, sample: '刚看了新电影预告片，挺有意思。建议有空看一下，反馈下你的想法。' },
+ { id: 'formal', name: '正式表达', desc: '正式书面', active: false, sample: '我刚刚观看了新电影的预告片，内容颇具新意。如有时间，建议你也观看，并分享你的看法。' },
+ ],
+ vocab: [
+ { word: 'LLM', count: 8 }, { word: 'macOS', count: 8 }, { word: 'openless', count: 4 },
+ { word: 'iOS', count: 3 }, { word: 'GitHub', count: 3 }, { word: 'Codex', count: 2 },
+ { word: 'Cloud', count: 2 }, { word: 'Hello.', count: 1 }, { word: 'A1003', count: 1 },
+ { word: 'SVG', count: 1 }, { word: 'TTC', count: 0 }, { word: 'Swift', count: 0 },
+ { word: 'LLMAPI', count: 0 }, { word: 'TypeLazyWordsForm', count: 0 }, { word: 'Meta', count: 0 },
+ { word: 'Beta', count: 0 }, { word: 'How', count: 0 }, { word: 'Request', count: 0 },
+ { word: 'Pull', count: 0 }, { word: 'Table', count: 0 }, { word: 'README', count: 0 },
+ { word: 'issue', count: 0 }, { word: 'PNG', count: 0 }, { word: 'coding', count: 0 },
+ { word: 'Web', count: 0 }, { word: 'QQ', count: 0 }, { word: 'Claude', count: 0 },
+ ],
+ history: [
+ { time: '13:30', style: '清晰结构', dur: '24″', preview: '1. 删除 Windows 部分\n 1) 删除 Windows 部分的代码。\n 2) 删除 Windows 的构建缓存。', tag: '后期模型已参考 28 个词汇表词条进行语义判断' },
+ { time: '13:25', style: '清晰结构', dur: '23″', preview: '1. 第一点\n 1) 删除 DOS 文件中的 VIP 等内容。\n 2) 仓库目录方案。' },
+ { time: '13:24', style: '原文', dur: '31″', preview: '嗯，DOS 文件移到文件里面，然后 Windows 这个直接删除，Windows 没有共享代码，同步更新 cloud 点 MD，Windows 直接删除。' },
+ { time: '13:23', style: '清晰结构', dur: '18″', preview: '1. 代码发布\n 1) 将更改的代码提交到云端。\n 2) 构建新版本。' },
+ { time: '13:21', style: '清晰结构', dur: '12″', preview: '现在整理一下整体的项目逻辑和结构，把项目结构化梳理，并将不需要的部分移入归档。' },
+ { time: '12:50', style: '清晰结构', dur: '20″', preview: '1. 整体结构\n 1) 将 ASR 和 LLM 的配置合并到一个「配置」页面。' },
+ { time: '12:31', style: '轻度润色', dur: '14″', preview: '把这两个 tab 合并到一起，名字就叫「设置」，把帮助中心收到右上角问号入口。' },
+ { time: '11:48', style: '清晰结构', dur: '28″', preview: '设计新版本结构：本地语音交互桌面端，跨平台（Mac OS + Windows），重新设计界面，重新梳理逻辑。' },
+ ],
+};
diff --git a/openless -all/design_handoff_openless/design-canvas.jsx b/openless -all/design_handoff_openless/design-canvas.jsx
new file mode 100755
index 00000000..9f3fc611
--- /dev/null
+++ b/openless -all/design_handoff_openless/design-canvas.jsx
@@ -0,0 +1,622 @@
+
+// DesignCanvas.jsx — Figma-ish design canvas wrapper
+// Warm gray grid bg + Sections + Artboards + PostIt notes.
+// Artboards are reorderable (grip-drag), labels/titles are inline-editable,
+// and any artboard can be opened in a fullscreen focus overlay (←/→/Esc).
+// State persists to a .design-canvas.state.json sidecar via the host
+// bridge. No assets, no deps.
+//
+// Usage:
+//
+
+ {title}
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+}
+
+// ─────────────────────────────────────────────────────────────
+// DCSection — editable title + h-row of artboards in persisted order
+// ─────────────────────────────────────────────────────────────
+function DCSection({ id, title, subtitle, children, gap = 48 }) {
+ const ctx = React.useContext(DCCtx);
+ const sid = id ?? title;
+ const all = React.Children.toArray(children);
+ const artboards = all.filter((c) => c && c.type === DCArtboard);
+ const rest = all.filter((c) => !(c && c.type === DCArtboard));
+ const srcOrder = artboards.map((a) => a.props.id ?? a.props.label);
+ const sec = (ctx && sid && ctx.section(sid)) || {};
+
+ const order = React.useMemo(() => {
+ const kept = (sec.order || []).filter((k) => srcOrder.includes(k));
+ return [...kept, ...srcOrder.filter((k) => !kept.includes(k))];
+ }, [sec.order, srcOrder.join('|')]);
+
+ const byId = Object.fromEntries(artboards.map((a) => [a.props.id ?? a.props.label, a]));
+
+ return (
+
+
+ {children}
+
+
+
+ );
+}
+
+// DCArtboard — marker; rendered by DCArtboardFrame via DCSection.
+function DCArtboard() { return null; }
+
+function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorder, onFocus }) {
+ const { id: rawId, label: rawLabel, width = 260, height = 480, children, style = {} } = artboard.props;
+ const id = rawId ?? rawLabel;
+ const ref = React.useRef(null);
+
+ // Live drag-reorder: dragged card sticks to cursor; siblings slide into
+ // their would-be slots in real time via transforms. DOM order only
+ // changes on drop.
+ const onGripDown = (e) => {
+ e.preventDefault(); e.stopPropagation();
+ const me = ref.current;
+ // translateX is applied in local (pre-scale) space but pointer deltas and
+ // getBoundingClientRect().left are screen-space — divide by the viewport's
+ // current scale so the dragged card tracks the cursor at any zoom level.
+ const scale = me.getBoundingClientRect().width / me.offsetWidth || 1;
+ const peers = Array.from(document.querySelectorAll(`[data-dc-section="${sectionId}"] [data-dc-slot]`));
+ const homes = peers.map((el) => ({ el, id: el.dataset.dcSlot, x: el.getBoundingClientRect().left }));
+ const slotXs = homes.map((h) => h.x);
+ const startIdx = order.indexOf(id);
+ const startX = e.clientX;
+ let liveOrder = order.slice();
+ me.classList.add('dc-dragging');
+
+ const layout = () => {
+ for (const h of homes) {
+ if (h.id === id) continue;
+ const slot = liveOrder.indexOf(h.id);
+ h.el.style.transform = `translateX(${(slotXs[slot] - h.x) / scale}px)`;
+ }
+ };
+
+ const move = (ev) => {
+ const dx = ev.clientX - startX;
+ me.style.transform = `translateX(${dx / scale}px)`;
+ const cur = homes[startIdx].x + dx;
+ let nearest = 0, best = Infinity;
+ for (let i = 0; i < slotXs.length; i++) {
+ const d = Math.abs(slotXs[i] - cur);
+ if (d < best) { best = d; nearest = i; }
+ }
+ if (liveOrder.indexOf(id) !== nearest) {
+ liveOrder = order.filter((k) => k !== id);
+ liveOrder.splice(nearest, 0, id);
+ layout();
+ }
+ };
+
+ const up = () => {
+ document.removeEventListener('pointermove', move);
+ document.removeEventListener('pointerup', up);
+ const finalSlot = liveOrder.indexOf(id);
+ me.classList.remove('dc-dragging');
+ me.style.transform = `translateX(${(slotXs[finalSlot] - homes[startIdx].x) / scale}px)`;
+ // After the settle transition, kill transitions + clear transforms +
+ // commit the reorder in the same frame so there's no visual snap-back.
+ setTimeout(() => {
+ for (const h of homes) { h.el.style.transition = 'none'; h.el.style.transform = ''; }
+ if (liveOrder.join('|') !== order.join('|')) onReorder(liveOrder);
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ for (const h of homes) h.el.style.transition = '';
+ }));
+ }, 180);
+ };
+ document.addEventListener('pointermove', move);
+ document.addEventListener('pointerup', up);
+ };
+
+ return (
+
+ ctx && sid && ctx.patchSection(sid, { title: v })}
+ style={{ fontSize: 28, fontWeight: 600, color: DC.title, letterSpacing: -0.4, marginBottom: 6, display: 'inline-block' }} />
+ {subtitle &&
+ {subtitle}
}
+
+ {order.map((k) => (
+ ctx && ctx.patchSection(sid, (x) => ({ labels: { ...x.labels, [k]: v } }))}
+ onReorder={(next) => ctx && ctx.patchSection(sid, { order: next })}
+ onFocus={() => ctx && ctx.setFocus(`${sid}/${k}`)} />
+ ))}
+
+ {rest}
+
+
+ );
+}
+
+// Inline rename — commits on blur or Enter.
+function DCEditable({ value, onChange, style, tag = 'span', onClick }) {
+ const T = tag;
+ return (
+
+
+
+
+
+
+
+ e.stopPropagation()}
+ style={{ fontSize: 15, fontWeight: 500, color: DC.label, lineHeight: 1 }} />
+
+
+ {children ||
+ {id}
}
+ ctx.setFocus(null)}
+ onWheel={(e) => e.preventDefault()}
+ style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(24,20,16,.6)', backdropFilter: 'blur(14px)',
+ fontFamily: DC.font, color: '#fff' }}>
+
+ {/* top bar: section dropdown (left) · close (right) */}
+
e.stopPropagation()}
+ style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 72, display: 'flex', alignItems: 'flex-start', padding: '16px 20px 0', gap: 16 }}>
+
+