@manohub/app-kit 0.2.3 → 0.2.5

package/CONTRACT.md

@@ -348,6 +348,7 @@ import { AppShell, AppPanel, AppTable, AppButton, notify } from '@manohub/app-ki
 - 关闭拦截用 `beforeClose`（返回 `false` 阻止关闭，可用来弹「确认退出」）。
 - 内容固定渲染进 `.app-container`（令牌与应用侧样式的作用域锚点），渲染到 body 会「样式全丢」。
 - 需要「固定高度 + 区域内滚动」时传 `fitContent={false}` + `height`。
+- 内容**高且窄**（配置详情、逐项设置、多页签）用**抽屉**（§4.18），不要硬塞进弹窗。
 
 ### 4.11 `AppSection`（区块：标题 + 内容）
 
@@ -553,6 +554,33 @@ const list = useClientPagination(() => filteredRows.value)
   `setPage` / `setPageSize`；页码同样是 0 基。
 - 数据变少（过滤 / 删除）导致当前页越界时**自动回退到最后一页**，不会出现「空白页但分页器显示有数据」。
 
+### 4.18 抽屉（`AppDrawer`）
+
+```tsx
+<AppDrawer open={visible} title="MCP 配置" width={640}
+  onUpdate:open={(v) => (visible = v)}
+  footer={() => (
+    <>
+      <AppButton tone="secondary" onClick={close}>取消</AppButton>
+      <AppButton tone="primary" loading={saving} onClick={save}>保存</AppButton>
+    </>
+  )}>
+  …内容…
+</AppDrawer>
+```
+
+- **判据**：内容「高且窄 / 逐项配置 / 多页签」→ 抽屉；只需一眼确认的短内容 → 弹窗（§4.10）。
+  二者都是侧边浮层**只在移动端才退化**的语义，桌面端不要把弹窗当抽屉用。
+- `open` 受控 + `onUpdate:open`；关闭时同发 `close`。`beforeClose` 返回 `false` 可拦截关闭（支持 Promise）。
+- **`width` 传数字（px）**：上游把宽度原样塞进行内 style，字符串 `"300"` 生成的是非法 CSS（宽度会退化成内容宽），
+  本件默认 `480`。`position` 只支持 `'left' | 'right'`（上游没有 top/bottom 的定位样式）。
+- 页脚用 `footer`（函数或节点）或 `footer` 插槽；**容器（右对齐 / 常驻不滚）由上游提供**
+  （`footerTemplate` 与内建按钮两条路都被包进同一容器），应用侧**不要自绘页脚容器**。
+  不给页脚时本件会关掉上游那条恒定 60px 的空白页脚区。
+- 标题栏走内建件（`title` + 右上角关闭）；`showHeader={false}` 时关闭入口只剩遮罩点击，
+  需要自定义头部就得自行承担关闭入口。
+- 渲染宿主与包含块见 §9 第 11 条（本件已把宿主固定到 `.app-container` 并把定位基准压回视口）。
+
 ---
 
 ## 5. 反例库（这些写法一律违规）
@@ -619,7 +647,7 @@ const list = useClientPagination(() => filteredRows.value)
 | 日期 / 日期时间选择 | **无**（无 `AppDatePicker`） | 暂用 `AppInput` 并标明格式；需真日期控件走 §7 建件 |
 | 数字 / 步进输入 | **无**（无 `AppNumber`） | 暂用 `AppInput` + 提交侧校验；需步进控件走 §7 建件 |
 | 加载骨架屏 | **无**（`AppSkeleton` 属后续批次） | 用 §4.6 三态的 `loading`（表格/树内建，块级用 `AppQueryState`） |
-| 抽屉（Drawer） | **无** | 宽内容用 `AppDialog`（定高可滚）或页面级双栏 `AppShell.Split` |
+| 抽屉（Drawer） | **已有 `AppDrawer`**（§4.18） | —— |
 | 描述列表（Descriptions） | **不再需要** | 摘要 / 详情走 §4.7 的 `AppForm.Item text={…}` 只读文本行 |
 
 > 本清单随版本变动；**不存在的能力一律不要在应用侧自绘**，也不要用别的件"拼一个像的"当替代品长期留着。
@@ -755,3 +783,9 @@ pnpm --filter @manohub/app-kit test:unit     # vitest（契约单测）+ 护栏
     而令牌（`--ui-*`）与主题桥接（`--f-theme-*`）都锚在 `.app-container` 上、微前端下应用侧 CSS 还被
     scopecss 限定在容器内 —— 落到 body 会让弹窗**内容里所有组件与应用样式一起失效**。
     `AppDialog` / `modalService` 内部已改投 `.app-container`，消费方无需也不应干预渲染宿主。
+11. **抽屉的宿主与包含块**：`AppDrawer`（§4.18）同样把内容投到 `.app-container`（否则样式全丢），
+    而上游在「宿主不是 `body`」时会顺手给抽屉根节点加 `f-drawer-inline`（把 `position: fixed` 改成 `absolute`）——
+    微前端里绝对定位的包含块不可控（`.app-container` 自身未定位、宿主层级随门户而变），抽屉与遮罩会错位。
+    包内桥接层因此把 `.f-drawer.f-drawer-inline` 的定位压回 `fixed`：**覆盖范围与改造前 `host: "body"` 完全一致**。
+    另：上游 `showFooter` 默认 `true` 且高度取 `footerHeight`（默认 60px），不给内容也留一条空白 ——
+    `AppDrawer` 在无页脚时直接关掉该区块，应用侧不必再写「隐藏空 footer」的覆盖样式。

package/README.md

@@ -5,10 +5,11 @@
 
 - **接入方必读**：[CONTRACT.md](./CONTRACT.md) —— 页面结构契约、组件用法与词表、样式纪律、反例库、护栏用法、已知偏差。
   **写页面代码前先读它**；它随包分发，冲突时以它为准。
+- **接入 SOP**（安装 → 样式 → 入口 → 护栏 → 验收 → 故障对照 → 新应用从零搭建）：[`skills/app-kit/references/adoption.md`](./skills/app-kit/references/adoption.md)，随包分发。
 - **改本包时才看**：`AGENTS.md`（包内实现踩坑与硬性要求，不随包分发）
 - **入口**：`@manohub/app-kit/entry` → `createSubApp`
 - **组件/服务**：`@manohub/app-kit` → `AppShell` / `AppPanel` / `AppTree` / `AppTable` / `AppButton` / `notify` …
-- **样式**：`@manohub/app-kit/reset.css` + `@manohub/app-kit/styles.css`（应用侧 `style.css` 固定三行，见 CONTRACT.md §1）
+- **样式**：`@manohub/app-kit/reset.css` + `@manohub/app-kit/styles.css`（应用侧 `style.css` 固定三行，见下）
 - **命令入口**：`appkit`（`package.json` 的 `bin`，在应用包根执行）
   - `pnpm exec appkit lint [--changed|--strict|--json]` —— 三条护栏；单条排查用 `appkit lint:style` / `lint:component` / `lint:structure`
   - `pnpm exec appkit install [--also-claude|--dry-run]` —— 落 AI 技能到本工程
@@ -16,6 +17,135 @@
   - 等价写法（老脚本/钩子可用）：`node node_modules/@manohub/app-kit/lint/run-all.mjs`、`node node_modules/@manohub/app-kit/skills/install.mjs`
   - 各护栏脚本仍单独可跑（用法见 CONTRACT.md §8）
 
+## 新项目接入（快速开始）
+
+> 下面是「从零接一个子应用」的最小动作序列，完整版与故障对照见随包分发的
+> [`skills/app-kit/references/adoption.md`](./skills/app-kit/references/adoption.md)；
+> 每一条契约条款以 [CONTRACT.md](./CONTRACT.md) 为准。
+
+### 1. 安装
+
+```bash
+pnpm add @manohub/app-kit
+
+# 自备 peer（必须是工程内唯一实例）
+pnpm add vue vue-router pinia @tanstack/vue-query \
+  i18next i18next-vue i18next-browser-languagedetector
+```
+
+- **不要**再单独安装 `@farris/ui-vue`（被骨架层收敛）或 `@manohub/icon`（由骨架层依赖带入）。
+- 应用侧**禁止** `import '@farris/ui-vue'`（护栏会拦），组件一律从 `@manohub/app-kit` 取。
+- 本包发布在 **npm 官方仓**（公开），默认 registry 直接可装。工程若把默认 registry 指到了内网镜像，
+  需显式声明作用域（凭据不入库）：
+
+  ```ini
+  # .npmrc
+  @manohub:registry=https://registry.npmjs.org/
+  ```
+
+- 工程配置两项：`tsconfig` 用 `moduleResolution: "bundler"`（包的子路径导出靠 `exports`），
+  `types` 含 `vite/client`；需要 JSX 页面时加 `@vitejs/plugin-vue-jsx`。
+- 出现「同名类型互不兼容 / provide 取不到」这类双实例症状时，按 adoption.md §6 收敛单例
+  （`resolve.dedupe` + tsconfig `paths`）。
+
+### 2. 样式：固定三行，顺序即契约
+
+```css
+/* src/style.css */
+@import "@manohub/app-kit/reset.css";
+@import "@manohub/app-kit/styles.css";
+@import "./app.css";
+```
+
+`styles.css` 内部已按 farris CSS → 令牌 → 桥接 → 组件样式汇总，**不要**自行打乱顺序或改写内部导入。
+
+### 3. 入口：统一走 `createSubApp`
+
+```ts
+// src/main.ts
+import { createSubApp } from '@manohub/app-kit/entry'
+import App from './App.vue'
+import { routes } from './router'
+import './style.css'
+
+export const { mount, unmount } = createSubApp({
+  rootComponent: App,
+  routes,
+  // 用 vue-i18n 的应用以插件注入；本包的 i18n 选项是 i18next 语义，两者不要混用
+  // extraPlugins: [i18n],
+  // 以 `index.html?xxx=1` 直开的入口（iframe / 选择模式）必须登记，否则首屏守卫会清空 query
+  // rootPathAliases: ['/index.html'],
+})
+```
+
+`createSubApp` 已统一负责 `.app-container` 包裹、pinia、farris 插件、VueQuery、路由、挂载、
+宿主语言监听、首屏守卫、`window.mount/unmount` 与 `microApp.mount/unmount` 协议、非微前端环境自动挂载 ——
+**应用侧不要再手写这些**。全部选项见 adoption.md §3 或 CONTRACT.md §1。
+
+### 4. 第一个页面用模板 A
+
+```tsx
+import { AppShell, AppSearchBox, AppTable, AppPagination } from '@manohub/app-kit'
+
+<AppShell>
+  <AppShell.Header title="技能分类" toolbar={<AppSearchBox … />} />
+  <AppShell.Body mode="table">
+    <AppTable framed rows={rows} columns={cols} rowKey="id" />
+  </AppShell.Body>
+  <AppShell.Footer>
+    <AppPagination page={page} pageSize={size} total={total} … />
+  </AppShell.Footer>
+</AppShell>
+```
+
+三种页面模板（列表 / 双栏 / 详情）、筛选与操作位归属、两级滚动契约见 CONTRACT.md §4；
+写页面前务必过一遍 CONTRACT.md 的「四条铁律」与反例库。
+
+### 5. 护栏接入（建议，机械判定规范合规）
+
+```jsonc
+// appkit-guardrails.config.json（应用包根）
+{
+  "$schema": "./node_modules/@manohub/app-kit/lint/guardrails.config.schema.json",
+  "apps": [{ "dir": ".", "name": "<app-name>", "prefixes": ["<your-prefix>"], "pending": false }],
+  "srcGlobs": ["src/**/*.ts", "src/**/*.tsx"],
+  "styleGlobs": ["src/**/*.css"],
+  "contractDoc": "node_modules/@manohub/app-kit/CONTRACT.md"
+}
+```
+
+```jsonc
+// package.json
+{
+  "scripts": {
+    "lint": "appkit lint",
+    "lint:changed": "appkit lint --changed",
+    "lint:strict": "appkit lint --strict"
+  }
+}
+```
+
+新工程没有存量，直接 `pending: false`；存量应用先产基线再逐步归零（口径见 CONTRACT.md §8）。
+
+### 6. 技能包落盘（AI 代理用）
+
+```bash
+pnpm exec appkit install                 # → .codebuddy/skills/（幂等，包升级后重跑即刷新）
+pnpm exec appkit install --also-claude   # 同时 → .claude/skills/
+```
+
+### 7. 验收
+
+| 项 | 命令 | 通过标准 |
+|---|---|---|
+| 类型 | `pnpm exec vue-tsc --noEmit` | 0 错（含 `@manohub/app-kit/entry` 等子路径可解析） |
+| 构建 | `pnpm build` | 成功产出 |
+| 护栏 | `pnpm exec appkit lint` | 无违规（或与基线一致；收口用 `--strict`） |
+| 运行 | 启动后打开页面 | 骨架与组件样式正常、弹层落点正常 |
+
+还有一批**本包管不到、必须向宿主平台确认**的项（子应用产物路径与挂载方式、是否有 `index.html?xxx=1`
+直开入口、dev server 端口与代理、宿主下发的语言键与初始路由约定）—— 清单见 adoption.md §9.7。
+
 ## 分发形态
 
 由**源码分发**改为**产物分发**：`exports` 指向 `dist`（含类型声明与 `styles.css` / `reset.css`）。
@@ -26,7 +156,7 @@
 - `skills/` 是随包分发的 AI 技能包（见下）；
 - 包内不存在 `dist/` 时先执行构建再联调。
 
-## 技能包（AI 代理用）
+## 技能包（AI 代理用，随包分发）
 
 随包分发三个技能：`app-kit`（入口编排）/ `app-kit-migrate`（存量应用改造）/ `app-kit-dev`（日常页面开发）。
 在消费方工程根执行即可落到自己的技能目录（幂等，包升级后重跑即刷新）：

package/dist/components/app-drawer.d.ts

@@ -0,0 +1,139 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/**
+ * 抽屉（封装 farris FDrawer）。
+ *
+ * 契约：`open` 受控 + `onUpdate:open`（关闭时同发 `close`）；`position` 只支持 `left` / `right`
+ * （上游 CSS 只给了 `f-drawer-wrapper-left/right` 的定位规则，`top` / `bottom` 无样式）；
+ * 页脚用 `footer`（函数或节点）给，**不给页脚时不留空档**。
+ *
+ * 吃掉的上游坑：
+ * 1. **被当 DOM 容器的宽度**：上游 `width` 声明成 `String`、默认 `"300"`，值会原样落进行内 style
+ *    ⇒ `width:300` 不是合法 CSS，抽屉宽度会退化成「内容宽度」。本件默认 `width: 480`（数值 ⇒ `480px`）。
+ * 2. **渲染宿主固定为 `.app-container`**：上游 `host` 默认 `"body"`，抽屉落容器外会同时丢令牌
+ *    （`--ui-*`）与应用侧样式（微前端下被 scopecss 限定在容器内）—— 与 AppDialog 同一件事。
+ *    随之而来的第二个坑：上游在 host ≠ body 时给根节点加 `f-drawer-inline`（`position: absolute`），
+ *    而绝对定位的包含块在微前端里不可控，包内桥接层已把它改回 `fixed`
+ *    （覆盖范围与改造前 `host: "body"` 一致）。
+ * 3. **页脚容器由上游统一提供**：`footerTemplate` 与内建按钮两条路都被包进 `div.f-drawer-footer px-2`
+ *    （与 AppDialog 那条不同：modal 的模板路径是裸渲染，容器由本包补）。所以这里只透传内容，
+ *    应用侧不要再自绘页脚容器。
+ * 4. **恒定渲染的空页脚**：上游 `showFooter` 默认 `true`、高度取 `footerHeight`（默认 60px），
+ *    不给内容也会留一条 60px 空白（mcp 原先用应用侧 CSS `#mcp-config-drawer .f-drawer-footer{display:none!important}`
+ *    打补丁）。本件在无页脚时直接关掉该区块。
+ * 5. 上游没有 `close` 事件（只有 `update:modelValue` / `afterClose`），本件统一成 `onClose`。
+ *
+ * @example
+ * <AppDrawer open={visible} title="MCP 配置" width={640}
+ *   onUpdate:open={(v) => (visible = v)}
+ *   footer={() => <AppButton tone="primary" onClick={save}>保存</AppButton>}>
+ *   …抽屉内容…
+ * </AppDrawer>
+ */
+export declare const AppDrawer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 受控开合 */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 抽屉根节点 id（上游必填）。不传时本件补一个稳定值 */
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 抽屉宽度（px）。给数值——上游默认值是字符串 `"300"`，会生成非法 CSS */
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    position: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    /**
+     * 是否渲染上游自带标题栏。传 false 时关闭入口只剩遮罩点击
+     * （上游的关闭按钮长在标题栏里），需要自定义头部时自行承担关闭入口。
+     */
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 关闭前钩子（点遮罩 / 点关闭按钮时触发）。
+     * 返回 `false` 可阻止关闭（如「有未保存改动，请确认」），支持返回 Promise。
+     */
+    beforeClose: {
+        type: PropType<() => boolean | void | Promise<boolean | void>>;
+        default: undefined;
+    };
+    /** 页脚（等价于 `footer` 插槽）。上游负责容器几何，本件只在「有内容」时才开页脚区块 */
+    footer: {
+        type: PropType<any>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:open")[], "close" | "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 受控开合 */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 抽屉根节点 id（上游必填）。不传时本件补一个稳定值 */
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 抽屉宽度（px）。给数值——上游默认值是字符串 `"300"`，会生成非法 CSS */
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    position: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    /**
+     * 是否渲染上游自带标题栏。传 false 时关闭入口只剩遮罩点击
+     * （上游的关闭按钮长在标题栏里），需要自定义头部时自行承担关闭入口。
+     */
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 关闭前钩子（点遮罩 / 点关闭按钮时触发）。
+     * 返回 `false` 可阻止关闭（如「有未保存改动，请确认」），支持返回 Promise。
+     */
+    beforeClose: {
+        type: PropType<() => boolean | void | Promise<boolean | void>>;
+        default: undefined;
+    };
+    /** 页脚（等价于 `footer` 插槽）。上游负责容器几何，本件只在「有内容」时才开页脚区块 */
+    footer: {
+        type: PropType<any>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    footer: any;
+    width: number;
+    id: string;
+    position: "left" | "right";
+    open: boolean;
+    showHeader: boolean;
+    beforeClose: () => boolean | void | Promise<boolean | void>;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    footer?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/app-drawer.js

@@ -0,0 +1,104 @@
+import { FDrawer } from "@farris/ui-vue";
+import { defineComponent, computed, h } from "vue";
+import { resolveAppContainer } from "../services/app-container.js";
+const FarrisDrawer = FDrawer;
+let drawerSeq = 0;
+const AppDrawer = /* @__PURE__ */ defineComponent({
+  name: "AppDrawer",
+  inheritAttrs: false,
+  emits: ["update:open", "close"],
+  props: {
+    /** 受控开合 */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /** 抽屉根节点 id（上游必填）。不传时本件补一个稳定值 */
+    id: {
+      type: String,
+      default: void 0
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    /** 抽屉宽度（px）。给数值——上游默认值是字符串 `"300"`，会生成非法 CSS */
+    width: {
+      type: Number,
+      default: 480
+    },
+    position: {
+      type: String,
+      default: "right"
+    },
+    /**
+     * 是否渲染上游自带标题栏。传 false 时关闭入口只剩遮罩点击
+     * （上游的关闭按钮长在标题栏里），需要自定义头部时自行承担关闭入口。
+     */
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 关闭前钩子（点遮罩 / 点关闭按钮时触发）。
+     * 返回 `false` 可阻止关闭（如「有未保存改动，请确认」），支持返回 Promise。
+     */
+    beforeClose: {
+      type: Function,
+      default: void 0
+    },
+    /** 页脚（等价于 `footer` 插槽）。上游负责容器几何，本件只在「有内容」时才开页脚区块 */
+    footer: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const fallbackId = `ak-drawer-${drawerSeq += 1}`;
+    const drawerId = computed(() => props.id ?? fallbackId);
+    const handleUpdate = (value) => {
+      emit("update:open", value);
+      if (!value) emit("close");
+    };
+    const renderFooter = () => slots.footer ? slots.footer() : typeof props.footer === "function" ? props.footer() : props.footer;
+    return () => {
+      const hasFooter = !!slots.footer || props.footer !== void 0;
+      return h(FarrisDrawer, {
+        id: drawerId.value,
+        modelValue: props.open,
+        title: props.title,
+        width: props.width,
+        position: props.position,
+        showHeader: props.showHeader,
+        beforeClose: props.beforeClose,
+        /**
+         * 无内容时关掉上游页脚区块 —— 否则恒定渲染一条 `footerHeight`（默认 60px）的空白。
+         */
+        showFooter: hasFooter,
+        /** 渲染宿主：见头注释第 2 条（farris 默认 `"body"` 会让抽屉样式全丢） */
+        host: resolveAppContainer(),
+        customClass: ["ak-drawer", attrs.class].filter(Boolean).join(" "),
+        customStyle: attrs.style,
+        "onUpdate:modelValue": handleUpdate
+      }, {
+        default: () => slots.default?.(),
+        /**
+         * 页脚走 `footerTemplate` **插槽**而不是同名 prop：上游把它声明成 `Object`，
+         * 传函数会多刷一条 prop 类型告警；而渲染逻辑是「prop 优先，其次插槽」，
+         * 不传 prop 时插槽这条路完全等价。
+         */
+        ...hasFooter ? {
+          footerTemplate: () => renderFooter()
+        } : {}
+      });
+    };
+  }
+});
+export {
+  AppDrawer
+};

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { AppTable, type AppTableColumn, type AppTableProps, type AppTableSelecti
 export { AppPagination } from './components/app-pagination';
 export { AppBadge, type AppBadgeTone, type AppBadgeShape, type AppBadgeSize, type AppBadgeDot } from './components/app-badge';
 export { AppDialog } from './components/app-dialog';
+export { AppDrawer } from './components/app-drawer';
 export { AppTabs, type AppTabItem } from './components/app-tabs';
 export { AppForm, type AppFormProps, type AppFormItemProps, type AppFormLabelAlign, type AppFormCompound, } from './components/app-form';
 export { AppSection, type AppSectionProps } from './components/app-section';

package/dist/index.js

@@ -18,6 +18,7 @@ import { AppTable } from "./components/app-table.js";
 import { AppPagination } from "./components/app-pagination.js";
 import { AppBadge } from "./components/app-badge.js";
 import { AppDialog } from "./components/app-dialog.js";
+import { AppDrawer } from "./components/app-drawer.js";
 import { AppTabs } from "./components/app-tabs.js";
 import { AppForm } from "./components/app-form.js";
 import { AppSection } from "./components/app-section.js";
@@ -34,6 +35,7 @@ export {
   AppButton,
   AppCheckbox,
   AppDialog,
+  AppDrawer,
   AppFilter,
   AppForm,
   AppIconButton,

package/dist/styles/farris-bridge.css

@@ -110,6 +110,14 @@ body > .fv-tooltip.tooltip {
   min-height: 0;
 }
 
+/* AppDrawer：抽屉被 Teleport 进 `.app-container`（拿令牌与应用侧样式）后，上游会给根节点加
+ * `f-drawer-inline` 把它从 `position: fixed` 改成 `absolute` —— 而微前端里绝对定位的包含块
+ * 不可控（`.app-container` 自身未定位，宿主层级随门户而变），抽屉与遮罩会错位。
+ * 这里把包含块语义压回视口，覆盖范围与改造前 `host: "body"` 时完全一致。 */
+.app-container .f-drawer.f-drawer-inline {
+  position: fixed;
+}
+
 /* ===== AppSteps 只读档（clickable=false）的光标 =====
  * 上游 FStep 的 `clickable` prop 在 1.8.4 里**完全没被使用**，`li.clickable` 只由单个 step 的
  * `disabled` 决定 ⇒ 整条只读时上游仍给非禁用项手型光标。拦截已由 AppSteps 的门控承担，

package/lint/__tests__/guardrails.spec.mjs

@@ -240,6 +240,40 @@ test('规则级豁免：--strict 时豁免一律失效（收口验收口径）',
   }
 })
 
+test('统一入口：--strict 必须透传给三条子护栏（否则收口验收空转）', () => {
+  const root = makeConsumer('violations-src')
+  try {
+    // 三条规则整类豁免 + 不挂起：平时全绿，收口预演必须拦断 —— 差别只在 `--strict` 有没有传下去
+    writeConfig(root, [
+      {
+        dir: 'app',
+        name: 'fixture-app',
+        prefixes: ['other-'],
+        pending: false,
+        waivedRules: [
+          { rule: 'api/*', reason: '分阶段迁移：组件替换在下一批次', since: '2026-09-18' },
+          { rule: 'style/*', reason: '分阶段迁移：样式收口在下一批次', since: '2026-09-18' },
+          { rule: 'structure/*', reason: '本 fixture 用于验证参数透传', since: '2026-09-18' },
+        ],
+      },
+    ])
+
+    const plain = runAuditWith('run-all.mjs', root)
+    assert.equal(plain.code, 0, '平时：三整类豁免 → 全绿')
+    assert.ok(plain.out.includes('全绿'), `平时汇总行应为全绿，实际：${plain.out}`)
+
+    const strict = runAuditWith('run-all.mjs', root, ['--strict'])
+    assert.equal(strict.code, 1, '--strict：豁免失效 → 必须拦断（收口验收的唯一口径）')
+    assert.ok(!strict.out.includes('全绿'), `--strict 不应再报全绿，实际：${strict.out}`)
+    // 三条子护栏都要真的按 strict 跑（只透传给一条同样会退化成半空转）
+    for (const rule of ['api/farris-import', 'style/visual', 'structure/no-shell']) {
+      assert.ok(strict.out.includes(rule), `--strict 报告里应出现 ${rule}，实际：${strict.out}`)
+    }
+  } finally {
+    rmSync(root, { recursive: true, force: true })
+  }
+})
+
 test('规则级豁免：0 条命中时提示可撤销（豁免只该在「还没迁到那层」期间存在）', () => {
   const root = makeConsumer('clean-src')
   try {

package/lint/run-all.mjs

@@ -26,6 +26,13 @@ const AUDITS = ['style-audit.mjs', 'component-audit.mjs', 'structure-audit.mjs']
 const args = parseArgs()
 const passthrough = process.argv.slice(2).filter((a) => a.startsWith('--app=') || a.startsWith('--cwd='))
 if (args.changed) passthrough.push('--changed')
+/**
+ * `--strict` 必须透传：它决定的是**子护栏**的拦截口径（存量挂起与规则豁免失效），
+ * 而不只是本脚本的输出。漏传过一次 —— 表现是 `appkit lint --strict` 恒绿（豁免照旧生效），
+ * 收口验收因此变成空转，看输出完全看不出问题。
+ * 回归由 `lint/__tests__/guardrails.spec.mjs` 的「统一入口：--strict 必须透传」锁住。
+ */
+if (args.strict) passthrough.push('--strict')
 if (args.json) passthrough.push('--json')
 
 const runOne = (script) =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/app-kit",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "private": false,
   "type": "module",
   "description": "子应用统一骨架层：入口编排（createSubApp）、布局契约（AppShell）、页面组件、原子件、服务、样式底座。farris 被收敛在本包内部，对外只暴露标准 API。",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@farris/ui-vue": "^1.8.4",
-    "@manohub/icon": "^0.2.3"
+    "@manohub/icon": "^0.2.5"
   },
   "devDependencies": {
     "@tanstack/vue-query": "catalog:",