@manohub/app-kit 0.1.0

package/dist/atoms/atoms.css

@@ -0,0 +1,679 @@
+/**
+ * app-kit 组件样式（.ak-*）+ 骨架屏动画。
+ * 允许的视觉声明集中在 app-kit；apps 侧业务 CSS 只写布局。
+ */
+
+/* ===== 骨架屏 ===== */
+@keyframes ak-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.ak-skeleton-block {
+  border-radius: var(--ui-radius-md);
+  background: linear-gradient(90deg, var(--ui-base-200) 25%, var(--ui-base-300) 37%, var(--ui-base-200) 63%);
+  background-size: 200% 100%;
+  animation: ak-shimmer 1.5s infinite linear;
+}
+
+/* ===== 三态（AppQueryState）=====
+   构成顺序固定：**插画 → 主文案 → 副文案 → 操作区**（整块垂直居中）。
+   留白节奏同控制台空态一档：插画下 16、标题下 4、副文案下 16；文案层级用字号 + 字重 + 灰度拉开，
+   不靠多色分隔 —— 状态块是页面的「静默区」，视觉噪音要低。 */
+.ak-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;
+}
+
+/* 插画：宽度定死、高度按比例；窄容器（如侧栏）里按百分比收缩，不撑破面板 */
+.ak-state-illustration {
+  width: 180px;
+  max-width: 70%;
+  height: auto;
+  margin-bottom: var(--ui-space-4);
+}
+
+/* 插画元素配色：几何在 state-illustration.tsx，颜色只在本文件（换皮只动样式）。
+   描边统一用 base-400：基础阶里 base-300 及以下在白底上几乎看不见，插画会「化」掉。 */
+.ak-ill-shadow {
+  fill: var(--ui-base-200);
+}
+
+.ak-ill-face {
+  stroke: var(--ui-base-400);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+}
+
+.ak-ill-face--top {
+  fill: var(--ui-base-200);
+}
+
+/* 正面白色：三面靠明度差（白 / 浅灰 / 中灰）读体感，不用投影 */
+.ak-ill-face--front {
+  fill: var(--ui-base-100);
+}
+
+.ak-ill-face--side {
+  fill: var(--ui-base-300);
+}
+
+.ak-ill-line {
+  stroke: var(--ui-base-400);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+/* 错误态：箱内线条中断（与空态的实线成对语义） */
+.ak-ill-line--broken {
+  stroke-dasharray: 5 5;
+}
+
+.ak-ill-dot {
+  fill: var(--ui-base-400);
+}
+
+.ak-ill-dot--accent {
+  fill: var(--ui-primary);
+  opacity: 0.45;
+}
+
+.ak-ill-badge__disc {
+  fill: var(--ui-primary-subtle);
+  stroke: var(--ui-primary);
+  stroke-width: 1.5;
+}
+
+.ak-ill-badge__mark {
+  stroke: var(--ui-primary);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.ak-ill-badge--error .ak-ill-badge__disc {
+  fill: var(--ui-error-weak);
+  stroke: var(--ui-error);
+}
+
+.ak-ill-badge--error .ak-ill-badge__mark {
+  stroke: var(--ui-error);
+}
+
+.ak-ill-badge--error .ak-ill-badge__dot {
+  fill: var(--ui-error);
+}
+
+.ak-state-title {
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+  margin: 0;
+}
+
+.ak-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 插槽时可放多颗（横向排列） */
+.ak-state-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-2);
+  margin-top: var(--ui-space-4);
+}
+
+.ak-state-skeletons {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+/* ===== AppTooltip（.ak-tooltip 为浮层钩子类）=====
+   原先各应用各写 tooltip-dark 补丁，此处统一为令牌化外观（深底浅字）。 */
+.app-container .fv-tooltip.ak-tooltip .tooltip-inner {
+  background: var(--ui-base-content);
+  color: var(--ui-base-100);
+}
+
+/* 浮层宽度约束：内容为长文本时避免撑破视口 */
+.app-container .fv-tooltip.ak-tooltip .tooltip-inner {
+  max-width: 420px;
+  word-break: break-word;
+}
+
+/* ===== AppButton shape="ghost"：图标按钮的标准形态 =====
+   原先 skill-topic / repository / skill-admission 各自手搓「透明底 + 无边框 + hover 变色」的图标按钮
+   （含 !important 军备竞赛），此处一次性上收。两段式 + 形态类压过 farris 的 .btn-secondary 外观。 */
+.app-container .ak-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ui-base-content-subtle);
+}
+
+.app-container .ak-btn--ghost:hover,
+.app-container .ak-btn--ghost:focus-visible {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ui-primary);
+  outline: none;
+}
+
+.app-container .ak-btn--ghost.ak-btn--error:hover,
+.app-container .ak-btn--ghost.ak-btn--error:focus-visible {
+  color: var(--ui-error);
+}
+
+.app-container .ak-btn--ghost:disabled,
+.app-container .ak-btn--ghost:disabled:hover {
+  color: var(--ui-base-content-subtle);
+  opacity: 0.4;
+}
+
+/* ===== AppIconButton（纯图标按钮）：方形点击区 =====
+   形态与色彩继承 .ak-btn--ghost，这里只统一尺寸与内距（图标居中、无文字内距）。 */
+.ak-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.ak-icon-btn--sm {
+  min-width: 28px;
+  height: 28px;
+}
+
+.ak-icon-btn--md {
+  min-width: 32px;
+  height: 32px;
+}
+
+.ak-icon-btn--lg {
+  min-width: 36px;
+  height: 36px;
+}
+
+/* ===== AppCheckbox（自建复选框，不封装 farris）=====
+   真实 input 负责可访问性与键盘（Tab / Space），方块视觉自绘；
+   状态走 data-state 协议（checked / indeterminate / unchecked），与 AppTable 自绘选择列一致。 */
+.ak-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  font-size: var(--ui-font-body);
+  color: var(--ui-base-content);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ak-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ak-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ui-base-400);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-base-100);
+  color: var(--ui-base-100);
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.ak-checkbox--sm .ak-checkbox__box {
+  width: 14px;
+  height: 14px;
+}
+
+.ak-checkbox--lg .ak-checkbox__box {
+  width: 18px;
+  height: 18px;
+}
+
+/*
+ * 选中 / 半选：填充**主色**，勾与横杠用 currentColor 绘制。
+ *
+ * 全库"选中"只有主色一种表达，这里原先填 `--ui-base-content`（近黑）是唯一的例外 ——
+ * 一屏里会出现「蓝色开关（farris 走 `--f-theme-*` → 主色）+ 蓝色表格自选列（`accent-color`）+ 黑色勾选框」
+ * 三种叫法；`@aihub/theme` 的 checkbox 口径也是「已选择背景取主色 `--f-primary`」。
+ * 要再引入中性面填充，做成 `tone` 的第二档（如 `tone="neutral"`），**不要**把默认改回深色。
+ */
+.ak-checkbox__box[data-state='checked'],
+.ak-checkbox__box[data-state='indeterminate'] {
+  background: var(--ui-primary);
+  border-color: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+
+.ak-checkbox__dash {
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+.ak-checkbox:hover .ak-checkbox__box {
+  border-color: var(--ui-primary);
+}
+
+.ak-checkbox:focus-within .ak-checkbox__box {
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 1px;
+}
+
+.ak-checkbox.is-disabled {
+  cursor: not-allowed;
+  color: var(--ui-base-content-subtle);
+}
+
+.ak-checkbox.is-disabled .ak-checkbox__box {
+  background: var(--ui-base-200);
+  border-color: var(--ui-base-300);
+  color: var(--ui-base-content-subtle);
+}
+
+.ak-checkbox.is-disabled:hover .ak-checkbox__box {
+  border-color: var(--ui-base-300);
+}
+
+/* ===== AppNotice（说明条 / 警告提示，自建）=====
+   规范对齐 `@aihub/theme` 的 Alert（`.sem-bar`）：通栏 100% 宽、高 42、圆角 6、
+   投影 0 2 10 黑 8%、文案 15px、语义「底 / 边 / 字」三件套；操作位为文字按钮。
+
+   与主题包的两处有意差异（都不改结构，只保可读性）：
+   1. 文案色：success/warning 取 `-strong` 档（主题包调色板另给了该槽位）——直接用 500 档主色
+      在浅底上对比度不足（如 #22C55E on #ECFDF5 ≈ 1.9:1），属可读性缺陷；
+   2. 警示 / 错误的底色仍按主题包 Alert 专页实测值（#FDF4EA / #FDECEC），不用语义 03 档。 */
+.ak-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  width: 100%;
+  min-height: var(--ui-notice-height);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border-radius: var(--ui-radius-control);
+  box-shadow: var(--ui-notice-shadow);
+  font-size: var(--ui-notice-font);
+  line-height: var(--ui-line-body);
+}
+
+.ak-notice__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 说明文案可能是多段（原页面按段落渲染），块间距交给容器，避免与外层再叠一层间距 */
+.ak-notice__body p {
+  margin: 0;
+}
+
+.ak-notice__action {
+  flex-shrink: 0;
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  /* 文字按钮取主色（主题包 --f-alert-action-text = --f-primary） */
+  color: var(--ui-primary);
+  cursor: pointer;
+}
+
+.ak-notice__close {
+  flex-shrink: 0;
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: var(--ui-font-caption);
+  /* 主题包为 --f-text-muted（Te07），本仓对应 --ui-base-content-muted */
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+}
+
+.ak-notice--info {
+  background: var(--ui-info-weak);
+  border: 1px solid var(--ui-info-border);
+  color: var(--ui-info);
+}
+
+.ak-notice--success {
+  background: var(--ui-success-weak);
+  border: 1px solid var(--ui-success-border);
+  color: var(--ui-success-strong);
+}
+
+.ak-notice--warning {
+  background: var(--ui-notice-warning-bg);
+  border: 1px solid var(--ui-warning-border);
+  color: var(--ui-warning-strong);
+}
+
+.ak-notice--error {
+  background: var(--ui-notice-error-bg);
+  border: 1px solid var(--ui-error-border);
+  color: var(--ui-error);
+}
+
+/* ===== AppRadioCard（卡片式单选组，自建）=====
+   一个选项一张卡、整卡可点；选中态由描边 + 浅底 + 圆点三件一起表达（只靠颜色会看不出可点）。
+   真实 input 只保留可访问性与键盘（同 name 成组 ⇒ 方向键即换选），视觉全在卡片上。
+   卡片宽度取 flex 基准 240、上限 360：窄容器自动一列，宽容器两列并排且不无限拉伸。 */
+.ak-radio-card {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-3);
+}
+
+.ak-radio-card__item {
+  position: relative;
+  flex: 1 1 240px;
+  max-width: 360px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-base-100);
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.ak-radio-card__item:hover {
+  border-color: var(--ui-primary);
+}
+
+.ak-radio-card__item[data-state='checked'] {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-subtle);
+}
+
+.ak-radio-card__item:focus-within {
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 1px;
+}
+
+.ak-radio-card__item[data-disabled='true'] {
+  cursor: not-allowed;
+  border-color: var(--ui-base-300);
+  background: var(--ui-base-200);
+}
+
+.ak-radio-card__item[data-disabled='true']:hover {
+  border-color: var(--ui-base-300);
+}
+
+/* 原生 radio：视觉由卡片承担（隐藏方式与 AppCheckbox 同款） */
+.ak-radio-card__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ak-radio-card__radio {
+  position: relative;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  /* 与标题首行（14px 字 / 22px 行高）视觉居中 */
+  margin-top: 3px;
+  border: 1px solid var(--ui-base-400);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-100);
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.ak-radio-card__item[data-state='checked'] .ak-radio-card__radio {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary);
+}
+
+.ak-radio-card__item[data-state='checked'] .ak-radio-card__radio::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary-content);
+}
+
+.ak-radio-card__item[data-disabled='true'] .ak-radio-card__radio {
+  border-color: var(--ui-base-400);
+  background: var(--ui-base-200);
+}
+
+.ak-radio-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ak-radio-card__label {
+  font-size: var(--ui-font-body);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+
+.ak-radio-card__desc {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-subtle);
+}
+
+.ak-radio-card__item[data-disabled='true'] .ak-radio-card__label,
+.ak-radio-card__item[data-disabled='true'] .ak-radio-card__desc {
+  color: var(--ui-base-content-subtle);
+}
+
+/* ===== AppLayout（布局原子件）=====
+   应用侧 CSS 只允许写布局，但「布局」也不该各页面各写一套 ——
+   `display:flex; align-items:center; gap:8px` 抄十遍之后，间距档与居中口径必然各页不同。
+   两件只做三件事：**轴向**、**间距档**（令牌档位）、**对齐**。
+   分工（**按表格语义，不按 CSS 语义**）：
+     Row = 排「行」：行与行是上下关系 ⇒ **竖排容器**（不传 columns）/ 一行分 n 列（传了 columns）；
+     Column = 排「列」：列与列是左右关系 ⇒ **水平容器**（一行里的一格）。
+   所以 `.ak-column` 的 flex-direction 是 **row**、`.ak-row` 是 **column** —— 名字与 CSS 属性正好相反，
+   是刻意的：`<tr>` 一行行往下堆、一行里的格子左右并排，才符合读表格的直觉。 */
+
+/* --- 行：竖排容器（默认形态：子项一条一行往下排） --- */
+.ak-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ak-row-gap, var(--ui-space-2));
+  /* 交叉轴（水平）不声明 = CSS 默认的 stretch（子项齐宽）；要居中写 align="center" */
+  /* 放开 min-width：行常被塞进窄格子（表格单元格、限宽控件列）——
+     不放开的 flex 容器压不进窄格，会把外层撑破（真实踩过：列编辑表格的「帮助元数据」格） */
+  min-width: 0;
+}
+
+/* --- 行：一行分 n 列（传了 columns）—— 栅格轨道横向铺，这一行的子项并排 --- */
+.ak-row--grid {
+  display: grid;
+  /* 交叉轴默认回到 stretch（单元等高）；显式 align 的规则排在本条之后，能压过它 */
+  align-items: stretch;
+  /* 列数上限(--ak-row-columns) + 最小列宽(--ak-row-min)：
+     auto-fit 决定实际列数，track 下限取「最小列宽」与「按上限等分」的**较大者**
+     —— 于是"最多 N 列"与"窄了自动减列"同时成立（实测 N=2/最小 260：1400→2、600→2、500→1 列）。
+     公式里的 `%` 解析的是**栅格容器自己的内联尺寸**（不是视口），所以放进弹窗/分栏同样成立
+     —— 这也是不用媒体查询断点的原因。 */
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(
+      max(
+        var(--ak-row-min, var(--ui-grid-column-min)),
+        calc(
+          (100% - (var(--ak-row-columns, 2) - 1) * var(--ak-row-gap, var(--ui-space-2))) /
+            var(--ak-row-columns, 2)
+        )
+      ),
+      1fr
+    )
+  );
+}
+
+/* 折行属于**水平容器**（列里的内容太宽要折行）；竖排容器没有"折行"这回事，
+   栅格形态的"折行"由自动减列承担 */
+
+/* 列数上限 → 变量（供栅格公式取用）。columns-1 = 一行一列 */
+.ak-row--columns-1 {
+  --ak-row-columns: 1;
+}
+
+.ak-row--columns-2 {
+  --ak-row-columns: 2;
+}
+
+.ak-row--columns-3 {
+  --ak-row-columns: 3;
+}
+
+.ak-row--columns-4 {
+  --ak-row-columns: 4;
+}
+
+/* --- 列：水平容器（一行里的一格；同时是栅格单元） --- */
+.ak-column {
+  display: flex;
+  flex-direction: row;
+  /* 默认**垂直居中**：列里多是「徽标 + 文本」「标签 + 值」「控件 + 按钮」这类内容要齐中线；
+     要贴顶/齐宽写 align="start" / align="stretch" */
+  align-items: center;
+  gap: var(--ak-column-gap, var(--ui-space-2));
+  min-width: 0;
+}
+
+/* 折行：列里的内容太宽要折行（表格单元格里的「按钮 + 摘要」靠它不撑破外层） */
+.ak-column--wrap {
+  flex-wrap: wrap;
+}
+
+/* 栅格单元跨格（span 不要超过所在行的 columns，超了 auto-fit 会为它多开轨道） */
+.ak-column--span-2 {
+  grid-column: span 2;
+}
+
+.ak-column--span-3 {
+  grid-column: span 3;
+}
+
+.ak-column--span-4 {
+  grid-column: span 4;
+}
+
+/* 间距档 → 令牌（落到变量上：行那份栅格公式里要用同一个间距值算轨道下限）。
+   sm/md/lg/xl = --ui-space-1/2/3/4 = 4/8/12/16；none = 0 */
+.ak-row--gap-none {
+  --ak-row-gap: 0;
+}
+
+.ak-row--gap-sm {
+  --ak-row-gap: var(--ui-space-1);
+}
+
+.ak-row--gap-md {
+  --ak-row-gap: var(--ui-space-2);
+}
+
+.ak-row--gap-lg {
+  --ak-row-gap: var(--ui-space-3);
+}
+
+.ak-row--gap-xl {
+  --ak-row-gap: var(--ui-space-4);
+}
+
+.ak-column--gap-none {
+  --ak-column-gap: 0;
+}
+
+.ak-column--gap-sm {
+  --ak-column-gap: var(--ui-space-1);
+}
+
+.ak-column--gap-md {
+  --ak-column-gap: var(--ui-space-2);
+}
+
+.ak-column--gap-lg {
+  --ak-column-gap: var(--ui-space-3);
+}
+
+.ak-column--gap-xl {
+  --ak-column-gap: var(--ui-space-4);
+}
+
+/* 对齐（排在 .ak-row--grid 之后：显式 align 要能压过栅格形态的 stretch 默认） */
+.ak-row--align-start,
+.ak-column--align-start {
+  align-items: flex-start;
+}
+
+.ak-row--align-center,
+.ak-column--align-center {
+  align-items: center;
+}
+
+.ak-row--align-end,
+.ak-column--align-end {
+  align-items: flex-end;
+}
+
+.ak-row--align-baseline,
+.ak-column--align-baseline {
+  align-items: baseline;
+}
+
+.ak-row--align-stretch,
+.ak-column--align-stretch {
+  align-items: stretch;
+}
+
+.ak-row--justify-center,
+.ak-column--justify-center {
+  justify-content: center;
+}
+
+.ak-row--justify-end,
+.ak-column--justify-end {
+  justify-content: flex-end;
+}
+
+.ak-row--justify-between,
+.ak-column--justify-between {
+  justify-content: space-between;
+}

package/dist/atoms/state-illustration.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 三态插画（`AppQueryState` 内建）：空态与错误态共用一套「箱体」几何 —— 同族图形让两个状态
+ * 在页面里读起来是「同一件事的两种情况」，而不是两种互不相干的贴图。
+ * 差异只有两处：徽标语义（空 → 主色「＋」；错误 → 危险色「！」）与箱内线条（实线 / 断线）。
+ *
+ * ## 为什么内建 SVG，而不是引一张插画位图
+ *
+ * 1. **交付形态**：app-kit 以源码交付（`exports` 指向 `./src/index.ts`），若用 `?inline` / `?raw`
+ *    取图，每个消费方都要在 tsconfig 里补 `*.svg?inline` 的模块声明；非 Vite 宿主直接失效。
+ * 2. **跟随主题**：配色必须是令牌（`--ui-*`），换主题/深色域自动跟随；位图做不到。
+ * 3. **体积**：两态合计不到 1KB 标记。若内联外部插画（参考量级 150KB → data URI 约 200KB），
+ *    会被复制进每个接入应用的产物。
+ *
+ * 需要换成应用自己的插画（如控制台那套大图）时，走 `AppQueryState` 的 `illustration` 插槽或
+ * `illustration` 属性，不必改本件。**几何（`d`）在 TSX、配色只在 CSS**（`atoms.css` 的 `.ak-ill-*`）：
+ * 这样换皮只动样式，不动结构。
+ */
+/** 空态插画：空箱 + 主色「＋」徽标（暗示「这里可以新建」） */
+export declare const AppStateIllustrationEmpty: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 错误态插画：同款箱体 + 危险色「！」徽标，箱内线条改虚线（中断语义） */
+export declare const AppStateIllustrationError: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;