@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/components/pagination.tokens.css

@@ -1,32 +1,32 @@
-/**
- * pagination —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `pagination.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 空态是**独立根节点**（无数据时不渲染页码区）—— 令牌锚在容器上，它照样取得到 */
-  /* 单件令牌 */
-  /* 页码方块 28（设计实测）：它是「页码格」，体量由数字字号 + 内距决定，不属控件三档 */
-  --ui-pagination-item-size: 28px;
-  --ui-pagination-item-radius: var(--ui-radius-control);
-  --ui-pagination-font-size: var(--ui-font-caption);
-  --ui-pagination-text: var(--ui-base-content);
-  --ui-pagination-gap: var(--ui-space-3); /* 组间 12 */
-  --ui-pagination-page-gap: var(--ui-space-1); /* 页码间 4 */
-  --ui-pagination-bg-selected: var(--ui-primary-weak); /* 规范 #e9f3ff */
-  --ui-pagination-text-active: var(--ui-primary); /* 规范 #2a87ff */
-  --ui-pagination-border-hover: var(--ui-primary-hover); /* 规范 #529dff */
-  --ui-pagination-border-active: var(--ui-primary); /* 规范 #0e6ded → 本仓主色档（主题无更深一档） */
-  --ui-pagination-arrow: var(--ui-base-content);
-  --ui-pagination-ellipsis: var(--ui-base-content-subtle); /* 规范 Te07 */
-}
+/**
+ * pagination —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `pagination.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 空态是**独立根节点**（无数据时不渲染页码区）—— 令牌锚在容器上，它照样取得到 */
+  /* 单件令牌 */
+  /* 页码方块 28（设计实测）：它是「页码格」，体量由数字字号 + 内距决定，不属控件三档 */
+  --ui-pagination-item-size: 28px;
+  --ui-pagination-item-radius: var(--ui-radius-control);
+  --ui-pagination-font-size: var(--ui-font-caption);
+  --ui-pagination-text: var(--ui-base-content);
+  --ui-pagination-gap: var(--ui-space-3); /* 组间 12 */
+  --ui-pagination-page-gap: var(--ui-space-1); /* 页码间 4 */
+  --ui-pagination-bg-selected: var(--ui-primary-weak); /* 规范 #e9f3ff */
+  --ui-pagination-text-active: var(--ui-primary); /* 规范 #2a87ff */
+  --ui-pagination-border-hover: var(--ui-primary-hover); /* 规范 #529dff */
+  --ui-pagination-border-active: var(--ui-primary); /* 规范 #0e6ded → 本仓主色档（主题无更深一档） */
+  --ui-pagination-arrow: var(--ui-base-content);
+  --ui-pagination-ellipsis: var(--ui-base-content-subtle); /* 规范 Te07 */
+}

package/dist/styles/components/panel.css

@@ -1,77 +1,77 @@
-/**
- * Panel（区域容器，**无框契约**：分区感只由 Header 下方 1px 分隔线提供）。
- *
- * 依据：@aihub/theme 的 components/card.css（分区手法）+ base/spacing.css（头高与内距档）。
- */
-
-/* ===== Panel（区域容器，无框）=====
-   无框契约：面板自身不写描边 / 圆角 / 阴影 / 独立底色 / 单侧边框，
-   分区感只由 Header 下方 1px 分隔线提供（与 .mh-page__header 同一手法）；
-   两栏之间的竖直分隔线由 Page.Split 提供；卡片外观由内容件承载（表格用 Table.framed）。
-
-   滚动归属：Header 固定（flex-shrink:0），Body 承担**区域内**滚动（overflow:auto）。
-   Split 两栏因此让出滚动（overflow:hidden），避免同栏两层滚动容器。 */
-
-.mh-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.mh-panel__header {
-  flex-shrink: 0;
-  height: var(--ui-header-height);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-space-3);
-}
-
-.mh-panel__header-title {
-  font-size: var(--ui-font-heading);
-  font-weight: var(--ui-weight-semibold);
-  color: var(--ui-base-content);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 右侧组：toolbar（本区域筛选）在左、actions（本区域操作）在右，内部间距锁死 */
-
-.mh-panel__header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-width: 0;
-}
-
-.mh-panel__header-toolbar,
-.mh-panel__header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-}
-
-.mh-panel__body {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  overflow: auto;
-}
-
-/* 面板页脚：区域内**常驻**控件（本区域表格的分页条等），不随内容滚动。
-   与 Header 同款 flex-shrink:0；不加边框（面板无框契约只管分区感由 Header 下边线提供），
-   左右内距与 Body 对齐，让分页条与表格左右边缘齐平。 */
-
-.mh-panel__footer {
-  flex-shrink: 0;
-}
-
-/* 标题位收任意节点（`title` 插槽可放图标 / 计数 / 状态点），故按行内弹性排布 */
-.mh-panel__header-title {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-width: 0;
-}
+/**
+ * Panel（区域容器，**无框契约**：分区感只由 Header 下方 1px 分隔线提供）。
+ *
+ * 依据：@aihub/theme 的 components/card.css（分区手法）+ base/spacing.css（头高与内距档）。
+ */
+
+/* ===== Panel（区域容器，无框）=====
+   无框契约：面板自身不写描边 / 圆角 / 阴影 / 独立底色 / 单侧边框，
+   分区感只由 Header 下方 1px 分隔线提供（与 .mh-page__header 同一手法）；
+   两栏之间的竖直分隔线由 Page.Split 提供；卡片外观由内容件承载（表格用 Table.framed）。
+
+   滚动归属：Header 固定（flex-shrink:0），Body 承担**区域内**滚动（overflow:auto）。
+   Split 两栏因此让出滚动（overflow:hidden），避免同栏两层滚动容器。 */
+
+.mh-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.mh-panel__header {
+  flex-shrink: 0;
+  height: var(--ui-header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3);
+}
+
+.mh-panel__header-title {
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-semibold);
+  color: var(--ui-base-content);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 右侧组：toolbar（本区域筛选）在左、actions（本区域操作）在右，内部间距锁死 */
+
+.mh-panel__header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}
+
+.mh-panel__header-toolbar,
+.mh-panel__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+.mh-panel__body {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+/* 面板页脚：区域内**常驻**控件（本区域表格的分页条等），不随内容滚动。
+   与 Header 同款 flex-shrink:0；不加边框（面板无框契约只管分区感由 Header 下边线提供），
+   左右内距与 Body 对齐，让分页条与表格左右边缘齐平。 */
+
+.mh-panel__footer {
+  flex-shrink: 0;
+}
+
+/* 标题位收任意节点（`title` 插槽可放图标 / 计数 / 状态点），故按行内弹性排布 */
+.mh-panel__header-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}

package/dist/styles/components/query-state.css

@@ -1,88 +1,88 @@
-/**
- * QueryState —— 三态（loading / empty / error）容器。
- *
- * 依据：@aihub/theme 的 components/empty.css（空态图形与文案层级）与 components/skeleton.css（shimmer 微光）。
- */
-
-/**
- * 本面只含组件自身的类与骨架屏动画。
- * 允许的视觉声明集中在组件面；应用侧 CSS 只写布局。
- */
-
-/* ===== 骨架屏 =====
-   微光（动画 + 色值）的**唯一来源是 `./skeleton.css`（Skeleton）**：
-   本文件不再自带一份 —— 两处各写一份必然漂（时长/色值改一处漏一处，
-   同一屏会出现两种呼吸节奏）。这里只保留三态容器自己的排布（`.mh-state-skeletons`）。 */
-
-/* ===== 三态（QueryState）=====
-   构成顺序固定：**插画 → 主文案 → 副文案 → 操作区**（整块垂直居中）。
-   留白节奏同控制台空态一档：插画下 16、标题下 4、副文案下 16；文案层级用字号 + 字重 + 灰度拉开，
-   不靠多色分隔 —— 状态块是页面的「静默区」，视觉噪音要低。 */
-
-.mh-state {
-  height: 100%;
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--ui-space-6);
-  text-align: center;
-}
-
-.mh-state-title {
-  font-size: var(--ui-font-heading);
-  font-weight: var(--ui-weight-medium);
-  color: var(--ui-base-content);
-  margin: 0;
-}
-
-.mh-state-description {
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-base-content-subtle);
-  max-width: 420px;
-  word-break: break-word;
-  margin: var(--ui-space-1) 0 0;
-}
-
-/* 操作区：默认一颗主按钮；用 actions 插槽时可放多颗（横向排列） */
-
-.mh-state-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-2);
-  margin-top: var(--ui-space-4);
-}
-
-.mh-state-skeletons {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-3);
-}
-
-/* ===== 插画壳 =====
-   内建插画是**设计交付的 SVG 原样注入**（见 `utils/state-illustration.ts`：结构 / 坐标 / 固定色值 /
-   `id` / `<title>` 全保留），面里因此只有外壳这一件事：壳宽（264 = 设计画布宽）、窄容器里按比例收缩、
-   与下方文案的间距，以及把设计稿写死 `264 × 246` 的画布拉成「随壳自适应」。
-   同理，插画**不跟随主题**（图里是设计终值色，不走 `--ui-*`）——这是「原样引用」的取舍。
-   `illustration` 属性给的图片地址复用同一个壳（`<img>` 自带比例，不需要第二条规则）。 */
-
-.mh-state-illustration {
-  display: inline-block;
-  width: 264px;
-  max-width: 70%;
-  height: auto;
-  margin-bottom: var(--ui-space-4);
-}
-
-/* 设计画布写死的 `width="264px" height="246px"` 是表现属性，CSS 优先 —— 这里把它拉成
-   「宽随壳、高按 264 : 246 等比」，设计稿本身一个字节没改（改属性才是动设计稿） */
-
-.mh-state-illustration > svg {
-  display: block;
-  width: 100%;
-  height: auto;
-}
+/**
+ * QueryState —— 三态（loading / empty / error）容器。
+ *
+ * 依据：@aihub/theme 的 components/empty.css（空态图形与文案层级）与 components/skeleton.css（shimmer 微光）。
+ */
+
+/**
+ * 本面只含组件自身的类与骨架屏动画。
+ * 允许的视觉声明集中在组件面；应用侧 CSS 只写布局。
+ */
+
+/* ===== 骨架屏 =====
+   微光（动画 + 色值）的**唯一来源是 `./skeleton.css`（Skeleton）**：
+   本文件不再自带一份 —— 两处各写一份必然漂（时长/色值改一处漏一处，
+   同一屏会出现两种呼吸节奏）。这里只保留三态容器自己的排布（`.mh-state-skeletons`）。 */
+
+/* ===== 三态（QueryState）=====
+   构成顺序固定：**插画 → 主文案 → 副文案 → 操作区**（整块垂直居中）。
+   留白节奏同控制台空态一档：插画下 16、标题下 4、副文案下 16；文案层级用字号 + 字重 + 灰度拉开，
+   不靠多色分隔 —— 状态块是页面的「静默区」，视觉噪音要低。 */
+
+.mh-state {
+  height: 100%;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ui-space-6);
+  text-align: center;
+}
+
+.mh-state-title {
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+  margin: 0;
+}
+
+.mh-state-description {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-subtle);
+  max-width: 420px;
+  word-break: break-word;
+  margin: var(--ui-space-1) 0 0;
+}
+
+/* 操作区：默认一颗主按钮；用 actions 插槽时可放多颗（横向排列） */
+
+.mh-state-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-2);
+  margin-top: var(--ui-space-4);
+}
+
+.mh-state-skeletons {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+/* ===== 插画壳 =====
+   内建插画是**设计交付的 SVG 原样注入**（见 `utils/state-illustration.ts`：结构 / 坐标 / 固定色值 /
+   `id` / `<title>` 全保留），面里因此只有外壳这一件事：壳宽（264 = 设计画布宽）、窄容器里按比例收缩、
+   与下方文案的间距，以及把设计稿写死 `264 × 246` 的画布拉成「随壳自适应」。
+   同理，插画**不跟随主题**（图里是设计终值色，不走 `--ui-*`）——这是「原样引用」的取舍。
+   `illustration` 属性给的图片地址复用同一个壳（`<img>` 自带比例，不需要第二条规则）。 */
+
+.mh-state-illustration {
+  display: inline-block;
+  width: 264px;
+  max-width: 70%;
+  height: auto;
+  margin-bottom: var(--ui-space-4);
+}
+
+/* 设计画布写死的 `width="264px" height="246px"` 是表现属性，CSS 优先 —— 这里把它拉成
+   「宽随壳、高按 264 : 246 等比」，设计稿本身一个字节没改（改属性才是动设计稿） */
+
+.mh-state-illustration > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}