@hsu-react/ui 1.0.0 → 2.0.1

package/es/layout/_hooks/useReload.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ReloadContent: import("react").Context<{
+    id?: string | undefined;
+    setId?: ((id: string) => void) | undefined;
+}>;
+export default function useReload(): (id: string) => void;

package/es/layout/_hooks/useReload.js

@@ -0,0 +1,10 @@
+import { createContext, useCallback, useContext } from "react";
+export var ReloadContent = /*#__PURE__*/createContext({});
+export default function useReload() {
+  var _useContext = useContext(ReloadContent),
+    setReLoadId = _useContext.setId;
+  var onReload = useCallback(function (id) {
+    setReLoadId === null || setReLoadId === void 0 || setReLoadId(id);
+  }, [setReLoadId]);
+  return onReload;
+}

package/es/layout/_hooks/useSetTabTitle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const NavTabBarTitleContent: import("react").Context<{
+    tabTitles?: Record<string, import("react").ReactNode> | undefined;
+    setTabTitle?: ((key: string, title: React.ReactNode) => void) | undefined;
+}>;
+export default function useSetTabTitle(): (key: string, title: React.ReactNode) => void;

package/es/layout/_hooks/useSetTabTitle.js

@@ -0,0 +1,10 @@
+import { createContext, useContext, useCallback } from "react";
+export var NavTabBarTitleContent = /*#__PURE__*/createContext({});
+export default function useSetTabTitle() {
+  var _useContext = useContext(NavTabBarTitleContent),
+    _setTabTitle = _useContext.setTabTitle;
+  var setTabTitle = useCallback(function (key, title) {
+    _setTabTitle === null || _setTabTitle === void 0 || _setTabTitle(key, title);
+  }, [_setTabTitle]);
+  return setTabTitle;
+}

package/es/layout/_utils/storage.d.ts

@@ -0,0 +1,6 @@
+export declare const readStorage: (key: string) => string | undefined;
+export declare const writeStorage: (key: string, value: string) => void;
+export declare const STORAGE_KEY: {
+    readonly APPEARANCE: "appearance";
+    readonly LANG: "lang";
+};

package/es/layout/_utils/storage.js

@@ -0,0 +1,32 @@
+/**
+ * 布局层用到的一点点本地持久化：外观模式与语言，各是一个字符串。
+ *
+ * 消费方原本用的是一个 web-storage-cache 封装 + 一张全局 CACHE_KEY 表。那张表属于应用，
+ * 不该跟着组件进库；而这里的需求只有「读一个字符串 / 写一个字符串」，直接用 localStorage
+ * 就够了，也不必为此多一个运行时依赖。
+ *
+ * key 统一加 `hsu-ui:` 前缀，避免和消费方自己的存储撞名。
+ */
+var PREFIX = "hsu-ui:";
+export var readStorage = function readStorage(key) {
+  if (typeof window === "undefined") return undefined;
+  try {
+    var _window$localStorage$;
+    return (_window$localStorage$ = window.localStorage.getItem(PREFIX + key)) !== null && _window$localStorage$ !== void 0 ? _window$localStorage$ : undefined;
+  } catch (_unused) {
+    // 隐私模式 / 禁用存储时 localStorage 会抛异常，静默降级为「没有缓存」
+    return undefined;
+  }
+};
+export var writeStorage = function writeStorage(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(PREFIX + key, value);
+  } catch (_unused2) {
+    // 同上：写不进去不该让界面崩掉
+  }
+};
+export var STORAGE_KEY = {
+  APPEARANCE: "appearance",
+  LANG: "lang"
+};

package/es/layout/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 中后台布局组件。
+ *
+ * 这几个组件是路由驱动的：菜单、面包屑、页签都从一份 `RouteType[]` 里读展示信息，并用
+ * react-router 的 `useLocation` / `useNavigate` 决定当前位置与跳转。因此 **`react-router`
+ * 与 `react-intl` 是可选 peerDependency** —— 只用 Button、Table 这些的项目完全不受影响，
+ * 用到 `Layout.*` 的项目才需要装。
+ *
+ * 与本库其余部分的分工：主题、色板、圆角这些由 `ConfigProvider` 统一提供，`Layout.Theme`
+ * 只负责外观三态（light / dark / 跟随系统）与侧栏导航的专属配色。
+ */
+import Breadcrumb from "./Breadcrumb";
+import Header from "./Header";
+import I18n from "./I18n";
+import Menu from "./Menu";
+import NavTabBar from "./NavTabBar";
+import Theme from "./Theme";
+import I18nStore from "./I18n/I18nStore";
+import ThemeStore from "./Theme/ThemeStore";
+export type { RouteType, MetaType } from "./types";
+/**
+ * 各组件的公开类型。第一个真实消费方（vita-admin-starter）一上来就需要 `AccountAction`
+ * 与 `MenuType` —— 前者用来声明账号菜单，后者用来存 mixed 布局回传的子项。它们原本只在
+ * 各自模块里导出，消费方只能写 `@hsu-react/ui/es/layout/Header` 这种深路径，等于把内部
+ * 目录结构变成公开契约。统一从这里出。
+ */
+export type { AccountAction, HeaderProps } from "./Header";
+export type { MenuType, MenuProps } from "./Menu";
+export type { TabType, NavTabBarProps } from "./NavTabBar";
+export type { BreadcrumbType, BreadcrumbProps } from "./Breadcrumb";
+export type { InternationalizationProps } from "./I18n";
+export type { ThemeProps } from "./Theme";
+export { default as useSetTabTitle, NavTabBarTitleContent } from "./_hooks/useSetTabTitle";
+export { default as useReload, ReloadContent } from "./_hooks/useReload";
+export { default as useDropTab, NavTabBarContent } from "./_hooks/useDropTab";
+/**
+ * 显式标注这个命名空间的类型，而不是让 TS 去推断。
+ *
+ * 推断会把两类东西泄进 d.ts：mobx store 的私有字段（TS4094），以及各组件的 Props 类型 ——
+ * 那些没有被导出，消费方那边无法解析（TS4023）。react-intl 的内部依赖同理（TS2742）。
+ * 这些都只在开了 declaration 的发包构建里才会暴露，本地跑 dev 看不出来。
+ */
+interface LayoutNamespace {
+    Header: typeof Header;
+    Menu: typeof Menu;
+    Breadcrumb: typeof Breadcrumb;
+    NavTabBar: typeof NavTabBar;
+    Theme: typeof Theme;
+    I18n: typeof I18n;
+    ThemeStore: typeof ThemeStore;
+    I18nStore: typeof I18nStore;
+}
+declare const Layout: LayoutNamespace;
+export default Layout;

package/es/layout/index.js

@@ -0,0 +1,58 @@
+/**
+ * 中后台布局组件。
+ *
+ * 这几个组件是路由驱动的：菜单、面包屑、页签都从一份 `RouteType[]` 里读展示信息，并用
+ * react-router 的 `useLocation` / `useNavigate` 决定当前位置与跳转。因此 **`react-router`
+ * 与 `react-intl` 是可选 peerDependency** —— 只用 Button、Table 这些的项目完全不受影响，
+ * 用到 `Layout.*` 的项目才需要装。
+ *
+ * 与本库其余部分的分工：主题、色板、圆角这些由 `ConfigProvider` 统一提供，`Layout.Theme`
+ * 只负责外观三态（light / dark / 跟随系统）与侧栏导航的专属配色。
+ */
+import Breadcrumb from "./Breadcrumb";
+import Header from "./Header";
+import I18n from "./I18n";
+import Menu from "./Menu";
+import NavTabBar from "./NavTabBar";
+import Theme from "./Theme";
+import I18nStore from "./I18n/I18nStore";
+import ThemeStore from "./Theme/ThemeStore";
+
+/**
+ * 各组件的公开类型。第一个真实消费方（vita-admin-starter）一上来就需要 `AccountAction`
+ * 与 `MenuType` —— 前者用来声明账号菜单，后者用来存 mixed 布局回传的子项。它们原本只在
+ * 各自模块里导出，消费方只能写 `@hsu-react/ui/es/layout/Header` 这种深路径，等于把内部
+ * 目录结构变成公开契约。统一从这里出。
+ */
+
+export { default as useSetTabTitle, NavTabBarTitleContent } from "./_hooks/useSetTabTitle";
+export { default as useReload, ReloadContent } from "./_hooks/useReload";
+export { default as useDropTab, NavTabBarContent } from "./_hooks/useDropTab";
+
+/**
+ * 显式标注这个命名空间的类型，而不是让 TS 去推断。
+ *
+ * 推断会把两类东西泄进 d.ts：mobx store 的私有字段（TS4094），以及各组件的 Props 类型 ——
+ * 那些没有被导出，消费方那边无法解析（TS4023）。react-intl 的内部依赖同理（TS2742）。
+ * 这些都只在开了 declaration 的发包构建里才会暴露，本地跑 dev 看不出来。
+ */
+
+var Layout = {
+  /** 顶栏：标题、面包屑、语言与外观切换、账号菜单 */
+  Header: Header,
+  /** 侧边 / 顶部菜单 */
+  Menu: Menu,
+  /** 面包屑 */
+  Breadcrumb: Breadcrumb,
+  /** 多页签栏（可拖拽排序、右键菜单） */
+  NavTabBar: NavTabBar,
+  /** 外观三态与布局配色 */
+  Theme: Theme,
+  /** react-intl provider + antd locale */
+  I18n: I18n,
+  /** 外观状态（mobx），供应用侧读写 appearance */
+  ThemeStore: ThemeStore,
+  /** 语言状态（mobx），供应用侧读写 locale */
+  I18nStore: I18nStore
+};
+export default Layout;

package/es/layout/types.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import type { RouteObject } from "react-router";
+/**
+ * 路由的附加信息。菜单、面包屑、页签这三个组件都从这里取展示所需的一切 ——
+ * 它们不认识业务，只认识这个形状。
+ *
+ * 字段分两类，下面用分组标出：**布局组件真正会读的**，以及**只是搭车放在这里、由消费方
+ * 自己消费的**。后者原样保留是因为它们本来就写在同一份路由配置里（鉴权守卫、KeepAlive
+ * 包装、懒加载装配各取所需），把它们从类型里删掉只会逼消费方再声明一次。
+ */
+export interface MetaType {
+    /** 菜单项 / 面包屑 / 页签上显示的文案 */
+    name?: string;
+    /**
+     * 是否作为菜单项展示。注意是**显式开启**：只有为 `true` 的路由才会进 Menu，
+     * 不写等同于不进菜单（但路由本身照常可访问）。
+     */
+    menu?: boolean;
+    icon?: ReactNode;
+    /** 选中态图标；不传则沿用 `icon`。只对没有子项的菜单项生效 */
+    activeIcon?: ReactNode;
+    /** 菜单项置灰不可点 */
+    disabled?: boolean;
+    /** 固定页签，不可关闭，也不会被「关闭其他 / 关闭右侧」清掉 */
+    affix?: boolean;
+    /** 不进入页签栏 */
+    noTabsView?: boolean;
+    /** 二级导航：该路由的子级换到次级菜单里展示（配合 Menu 的 secondaryHeader） */
+    secondary?: boolean;
+    /** 页面标题，供消费方写 document.title 等用途 */
+    title?: string;
+    /** 不做页面缓存，供消费方决定是否用 react-activation 的 KeepAlive 包裹 */
+    noCache?: boolean;
+    /** 不走懒加载，供消费方装配路由时判断 */
+    noLazy?: boolean;
+    /** 无需登录即可访问，供消费方的鉴权守卫判断 */
+    noAuth?: boolean;
+    /** 权限码，供消费方在生成路由时用 usePermissions / ConfigProvider.permissions 过滤 */
+    hasPermi?: string[];
+}
+/**
+ * 路由配置。在 react-router 的 `RouteObject` 上加了 `meta`。
+ *
+ * 这个类型原本定义在消费方的 `@/router/router.config` 里，布局组件反过来 import 它 ——
+ * 那样组件就绑死在某个具体应用上了。收进库里之后，消费方改为让自己的路由配置符合这个
+ * 形状（`RouteObject` 本来就是 react-router 的标准类型，通常不用改任何东西）。
+ */
+export type RouteType = {
+    children?: RouteType[];
+    meta?: MetaType;
+} & RouteObject;

package/es/layout/types.js

@@ -0,0 +1 @@
+export {};

package/es/request/index.js

@@ -4,6 +4,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 export * from "./ResType";
 
 /** Request configuration (a subset compatible with common axios wrappers) */
@@ -27,7 +33,15 @@ var impl = {
 
 /** Inject the real request implementation (only the methods you use need to be provided) */
 export var configureRequest = function configureRequest(request) {
-  impl = _objectSpread(_objectSpread({}, impl), request);
+  // 过滤 undefined：`configureRequest({ get: undefined })` 会把键写进去、值为 undefined，
+  // 从而覆盖掉上面那个抛错兜底 —— 调用时报的就成了 "impl.get is not a function"，
+  // 而不是那句告诉你「忘了注入 request」的提示。
+  var provided = Object.fromEntries(Object.entries(request).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      fn = _ref2[1];
+    return typeof fn === "function";
+  }));
+  impl = _objectSpread(_objectSpread({}, impl), provided);
 };
 export var get = function get(url, config) {
   return impl.get(url, config);

package/es/styles/_responsive.scss

@@ -0,0 +1,53 @@
+// =============================================================
+// 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
+//
+// 用法：
+//   @use "../../styles/responsive" as r;
+//   .panel { padding: 24px; @include r.down(md) { padding: 12px; } }
+//   .row   { &:hover { background: …; } }  // 触屏上 hover 会「粘住」
+//   .row   { @include r.hover { &:hover { background: …; } } }  // 正确写法
+// =============================================================
+
+$breakpoints: (
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1536px,
+);
+
+@function bp($name) {
+  @if not map-has-key($breakpoints, $name) {
+    @error "未知断点 #{$name}，可用：#{map-keys($breakpoints)}";
+  }
+  @return map-get($breakpoints, $name);
+}
+
+/// 视口 < 断点（移动优先的「小屏覆盖」）
+@mixin down($name) {
+  @media (max-width: #{bp($name) - 0.02px}) {
+    @content;
+  }
+}
+
+/// 视口 >= 断点
+@mixin up($name) {
+  @media (min-width: #{bp($name)}) {
+    @content;
+  }
+}
+
+/// 真正有悬停能力的设备（鼠标 / 触控板）。
+/// 触屏上 :hover 会在点击后「粘住」，直到点别处才消失 —— 所有 hover 态都该包在这里。
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}
+
+/// 触摸设备（粗指针、无悬停）。用于放大点按目标、去掉仅悬停可见的操作。
+@mixin touch {
+  @media (hover: none), (pointer: coarse) {
+    @content;
+  }
+}

package/es/styles/antd-overload.scss

@@ -1,5 +1,66 @@
 // Design tokens (colors/fonts/radii/shadows, incl. dark theme) — importing this file brings in the full set of variables
 @use "./tokens";
+@use "./responsive" as r;
+
+// =============================================================
+// 触摸设备
+//
+// 常见的误解是「移动端要把 onClick 换成 onTouchStart」。不需要 —— 触摸事件序列本来就会
+// 合成 click，onClick 在触屏上一直可用；换成 touch 反而丢键盘可访问性、滚动时误触发、
+// 并与合成 click 重复触发。移动端真正要处理的是下面这几件。
+// =============================================================
+
+// 1) 点击延迟：浏览器为了等双击缩放，会把 click 推迟约 300ms。声明本元素不需要双击缩放
+//    即可立即触发。只加在交互元素上，不用 `*`（那会连带禁掉正文的双击缩放）。
+button,
+a,
+[role="button"],
+label,
+input,
+select,
+textarea,
+.ant-btn,
+.ant-select,
+.ant-picker,
+.ant-checkbox-wrapper,
+.ant-radio-wrapper,
+.ant-switch,
+.ant-pagination-item,
+.ant-table-column-has-sorters {
+  touch-action: manipulation;
+
+  // 2) 点击时浮出的那一层：移动浏览器默认 -webkit-tap-highlight-color 是
+  //    rgba(51, 181, 229, 0.4)，点按时会在元素盒子上铺一层半透明高亮。它是 UA 层的覆盖物，
+  //    与 border / background 无关，所以设 `border: none` 压根不起作用 —— 这也是「移动端
+  //    点击出现一层边框」这个现象的真正来源。
+  //
+  //    把它改成透明即可，不需要把 onClick 换成 onTouch。换事件之所以看起来也能消掉，是因为
+  //    绕过了合成 click 与聚焦，代价是丢键盘可访问性、滚动误触发、以及与合成 click 重复触发。
+  //    （聚焦本身不是问题：实测触摸点击后 :focus-visible 并不匹配，焦点环不会出现。）
+  -webkit-tap-highlight-color: transparent;
+}
+
+@include r.touch {
+  // 3) 粘住的 hover 态：触屏点完之后 :hover 会一直保持到点别处为止，导致「有一行永远高亮」。
+  //    这里把 antd 几处最显眼的悬停面中和掉；本库自己的组件用 responsive.scss 的 hover mixin。
+  .ant-table-tbody > tr:hover > td,
+  .ant-table-tbody > tr.ant-table-row:hover > td,
+  .ant-select-item-option:hover,
+  .ant-menu-item:hover,
+  .ant-dropdown-menu-item:hover {
+    background: inherit;
+  }
+
+  // 4) 点按目标：粗指针下 24px 的图标按钮很难点中。给最小可点面积兜底，
+  //    用 min-height 而不是 height，避免撑坏已有布局。
+  .ant-btn-sm,
+  .ant-pagination-item,
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    min-width: var(--vita-control-height);
+    min-height: var(--vita-control-height);
+  }
+}
 
 .ant-layout-sider-children {
   display: flex;
@@ -51,7 +112,7 @@
 
       width: 3px;
 
-      background: var(--primary-color);
+      background: var(--vita-primary);
       border-radius: 3px;
     }
   }
@@ -66,7 +127,7 @@
     line-height: 1.4;
     text-transform: uppercase;
 
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
   }
 
   // Items within a group use more restrained left-aligned indentation (closer to CF)
@@ -93,25 +154,21 @@
 
 // ===== Cloudflare style: Tags use outlined style with a light background =====
 .ant-tag {
-  border-radius: 6px;
+  border-radius: var(--vita-radius-sm);
 }
 
 .ant-notification {
   top: 50px !important;
 
-  .ant-notification-notice-with-icon {
-    display: flex;
-    flex-direction: column;
-    row-gap: 8px;
-
-    .ant-notification-notice-message {
-      margin-bottom: 0px !important;
-    }
+  // antd v6 dropped the `.ant-notification-notice-with-icon` wrapper; message and description are
+  // laid out by the notice itself now.
+  .ant-notification-notice-message {
+    margin-bottom: 0px !important;
+  }
 
-    .ant-notification-notice-description {
-      &:empty {
-        display: none;
-      }
+  .ant-notification-notice-description {
+    &:empty {
+      display: none;
     }
   }
 }
@@ -120,17 +177,16 @@
   display: flex;
   flex-direction: column;
 
-  .ant-tabs-content-holder {
+  // antd v6 removed the `.ant-tabs-content-holder` wrapper — `.ant-tabs-content` is now a direct
+  // child of `.ant-tabs`, so it takes over the flex sizing.
+  .ant-tabs-content {
     flex: 1;
 
     min-height: 0px;
+    height: 100%;
 
-    .ant-tabs-content {
+    .ant-tabs-tabpanel {
       height: 100%;
-
-      .ant-tabs-tabpane {
-        height: 100%;
-      }
     }
   }
 }

package/es/styles/tokens.d.ts

@@ -1,26 +1,126 @@
 /**
- * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
- * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
+ * The JS half of the design-token layer.
+ *
+ * `tokens.json` is the single source of truth. This module types it and maps it onto antd's
+ * `theme.token`; `scripts/gen-tokens-scss.cjs` maps the same file onto the `--vita-*` CSS
+ * variables. Neither half is hand-written against the other, which is what let the previous
+ * tokens.ts / tokens.scss pair drift (their headers literally said "the two must be kept in sync").
+ *
+ * Why antd needs the literal values rather than the CSS variables: `colorPrimary` is run through
+ * @ant-design/colors to derive a 10-step palette, so it has to be a real colour. Handing it
+ * `var(--vita-primary)` produces a palette of garbage. The practical consequence is that changing
+ * the brand colour at runtime cannot be done by overriding the CSS variable alone — go through
+ * `<ConfigProvider primaryColor={...}>`, which sets both halves at once.
  */
+import type { ThemeConfig } from "antd";
 export interface HsuThemeTokens {
     /** Page canvas */
-    canvas: string;
-    /** Card/panel background */
+    background: string;
+    /** Card / panel background */
     surface: string;
-    /** Table header/secondary background */
-    subtle: string;
-    /** Border */
+    /** Secondary background (table headers, read-only areas) */
+    muted: string;
     border: string;
-    /** Lighter border */
     borderWeak: string;
-    /** Header bar background */
+    /** Primary text */
+    foreground: string;
+    /** Secondary text */
+    mutedForeground: string;
+    /** Placeholder / disabled text */
+    subtleForeground: string;
+    /** Row / item hover background */
+    hover: string;
+    success: string;
+    warning: string;
+    error: string;
+    shadow1: string;
+    shadow2: string;
+    shadow3: string;
+}
+/**
+ * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
+ * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ *
+ * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
+ * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
+ */
+export interface LegacyThemeTokens {
+    /** @deprecated 用 `background` */
+    canvas: string;
+    /** @deprecated 用 `muted` */
+    subtle: string;
+    /** @deprecated 用 `surface` */
     headerBg: string;
+    /** @deprecated 用 `foreground` */
     text: string;
+    /** @deprecated 用 `mutedForeground` */
     text2: string;
+    /** @deprecated 用 `subtleForeground` */
     text3: string;
+    /** @deprecated 用 `hover` */
     rowHover: string;
 }
-export declare const lightTokens: HsuThemeTokens;
-export declare const darkTokens: HsuThemeTokens;
-/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
-export declare const defaultPrimaryColor = "#1677ff";
+export declare const lightTokens: HsuThemeTokens & LegacyThemeTokens;
+export declare const darkTokens: HsuThemeTokens & LegacyThemeTokens;
+/** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+export declare const defaultPrimaryColor: string;
+export declare const radius: {
+    xs: number;
+    sm: number;
+    base: number;
+    lg: number;
+};
+export declare const fontTokens: {
+    family: string;
+    sizeSm: number;
+    size: number;
+    sizeLg: number;
+};
+export declare const controlTokens: {
+    height: number;
+    heightSm: number;
+    heightLg: number;
+    ringWidth: number;
+};
+/**
+ * 弹窗宽度尺度。此前各弹窗自己写死（ImportForm 600、SecondConf 800、ModalForm 800/1200），
+ * 没有共同依据；收成一条尺度后至少有据可循。
+ */
+export declare const modalWidth: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+/**
+ * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
+ */
+export declare const breakpoints: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number; /** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+    xxl: number;
+};
+/**
+ * `#rgb` / `#rrggbb` → `rgba(...)`. Only used to keep antd's focus ring at the same opacity as
+ * `--vita-ring`; anything it cannot parse is handed back untouched so antd falls back to deriving
+ * the ring itself.
+ */
+/**
+ * 把 hex 颜色加上透明度。传入不是 hex（例如已经是 rgba / CSS 变量）时原样返回，
+ * 让调用方的值照常生效而不是变成 `NaN`。
+ */
+export declare const withAlpha: (color: string, alpha: number) => string;
+/**
+ * Build antd's `theme.token` from the same tokens the CSS variables come from, so a component
+ * this library has *not* wrapped still lands on the same palette, radii and type scale as one it
+ * has. This is the lever that keeps the look consistent without wrapping all 75 antd components.
+ */
+export declare const toAntdTheme: (options?: {
+    dark?: boolean;
+    primaryColor?: string;
+}) => ThemeConfig["token"];
+/**
+ * 组件级令牌覆盖，补 `toAntdTheme` 里全局令牌覆盖不到的地方。
+ */
+export declare const toAntdComponents: () => ThemeConfig["components"];