Scroll Area

覆盖在 Base host-owned scrolling domain 之上的 shadcn 草案 chrome。

这个 draft family 包含 Root、Viewport、Scrollbar 与 Thumb。logical scroll surface、normalized position/extent facts、scroll requests、focus participation、system/composed negotiation 与 bounded Thumb control leases 均由 Base 所有。shadcn 层只增加 clipped frame、full-size rounded Viewport、slim oriented tracks 与 flexible rounded Thumb。

Viewport 通过 privileged Scroll surface 请求 composed design-language preference，但不把它设为 required；不支持 composed chrome 的 host 可以依 D-SCROLL-PROJECTION-0001 fallback 到 system。无论哪种 projection，wheel、touch、keyboard、physics、inertia 与 overscroll 继续由 host 所有。该 family 不暴露 DOM scrollbar、size、position callback 或其它 host-specific API。

比较基线固定为 shadcn-ui/ui revision f31ed81983653919dd4fe77aee4b4859f610f1dc 的 apps/v4/registry/new-york-v4/ui/scroll-area.tsx。其中 Web DOM 与 Radix details 仅为 comparison evidence，不构成 portable guarantees。从 @proto.ui/prototypes-shadcn/scroll-area 导入该 family，或使用 proto-ui add react shadcn-scroll-area 生成 React facade。

Web composed projection 的两条 track 会避让右下交点，该区域不包含 track 或 Thumb。另一条 track 缺失或 display 隐藏时释放避让；没有 overflow 时仍保留 track 表面，仅隐藏 Thumb。这属于 host-local presentation，不是独立 Corner control。预留区保持透明，让 Root 背景自然延续，不增加实心角块或分隔边线。示例 Root 与 Viewport 使用一致的 rounded-md 圆角。Thumb 的透明细边框允许 forced colors 绘制可见轮廓，不退出用户色板。公共 anatomy 仍只有 Root、Viewport、Scrollbar 与 Thumb。

Web Components React Vue Vue 2

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

建议验收路径

纵向与横向滚动 Viewport，确认两个轴移动的是同一个 host surface。
分别拖动两个 Thumb，确认各自轴向请求 host scrolling，且没有第二份 position state。
用 Tab 聚焦 Viewport，确认继承的 focus-visible ring 出现，且 surface 不移动或改变尺寸。
确认 vertical track 宽 10px 并贴合 top/right，horizontal track 高 10px 并贴合 bottom/left。
确认两条 track 使用透明 2px border、horizontal track 使用 column layout，且两个 Thumb 保持 roleless 并不进入 tab order。
在 Web Components、React、Vue 与 Vue 2 的 320px viewport 中重复检查，页面不得 overflow。

相关 entities 仍为 draft；本页描述当前 cataloged direction，而不是稳定 compatibility guarantee。