Mask 形状裁切

Mask 现在不只是基础 class 的薄封装。它使用 Rue 的轻量视觉路线，同时补上尺寸、fit、tone、ring 与交互态这些更适合实际页面搭建的语义化能力。

# Core shapes

展示基础形状示例，并统一到更整洁的卡片布局里。

展示星形与粗星形示例，增加 ring 和 hover，适合头像墙或精选内容。

展示四向三角形示例，并通过统一尺寸让方向差异更好观察。

展示 half modifier 与任意宿主演示，并补上 start / end 语义别名。

Host

尺寸别名适合常见头像和封面场景，不必每次都手写宽高 class。

2xl

fit 语义让宽图、竖图和封面图都能直接得到明确的裁切策略。

cover

contain

fill

tone、ring、shadow 组合后，Mask 也能承担数字徽记、内容牌和亮点卡片的职责。

Base

Primary

Secondary

Accent

Success

Warning

Launches

Featured

Rue Studio

98%

Approval

属性	说明	类型	默认值
`as`	指定渲染标签，默认输出 img，也可渲染 div、figure 等任意宿主元素	`string`	`'img'`
`shape`	遮罩形状，覆盖当前支持的全部 mask-* 造型	`'squircle' \| 'heart' \| 'hexagon' \| 'hexagon-2' \| 'decagon' \| 'pentagon' \| 'diamond' \| 'square' \| 'circle' \| 'star' \| 'star-2' \| 'triangle' \| 'triangle-2' \| 'triangle-3' \| 'triangle-4'`	`'squircle'`
`half`	半边遮罩；支持数字写法，也支持 start / end 语义别名	`'1' \| '2' \| 'start' \| 'end'`	`-`
`size`	语义尺寸，映射到一组常用正方形尺寸 class	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`-`
`fit`	媒体内容适配模式，输出 object-* 类名	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`
`tone`	给非图片宿主补充背景与前景色，方便做头像牌、数字徽记和内容卡片	`'base' \| 'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	`-`
`bordered`	追加轻量内描边，适合浅背景图片或卡片	`boolean`	`false`
`ring`	追加 ring 与 offset，tone 存在时会自动继承对应的环颜色	`boolean`	`false`
`shadow`	追加投影，适合头像、封面和内容模块	`boolean`	`false`
`interactive`	追加轻量 hover 动效，方便做可点击素材墙或精选卡片	`boolean`	`false`
`className`	透传自定义样式类，可与组件生成的 mask 类叠加	`string`	`-`