/** 七个语义形状——装饰即语义（取自 ai-era-tutorial 词汇表） */
import type { CSSProperties, ReactNode } from 'react'
interface ShapeProps {
size?: number
className?: string
style?: CSSProperties
}
/** ▲ 靶子：目标，卡头打头 */
export const Tri = ({ size = 24, className, style }: ShapeProps) => (
)
/** ● 积木：清单点列，实心=已学 */
export const BrickDot = ({ size = 14, on = false, className, style }: ShapeProps & { on?: boolean }) => (
)
/** ○ 预期：可核对的结果 */
export const Ring = ({ size = 24, className, style }: ShapeProps) => (
)
/** ～ 代理区：横波，交给 agent */
export const Wave = ({ size = 40, className, style }: ShapeProps) => (
)
/** 荧光标记 价值区：色块骑在文字背后——是标记不是形状，
* 无描边、微斜、两端比字宽（荧光笔划过的手感），过程就地写清 */
export const Mark = ({ children, className }: { children: ReactNode; className?: string }) => (
{children}
)
/** ⌇ 脱靶：竖立颤抖——图形入口，读者追随图形进入阅读 */
export const Tremble = ({ size = 24, className, style }: ShapeProps) => (
)
/** ＋ 指派学习：位置/预期/场景三样 */
export const Cross = ({ size = 18, className, style }: ShapeProps) => (
)
/** 脱靶标记：图形 + 文字，无容器（图形是第一视觉） */
export function MissMark({ how, looks }: { how: string; looks: string }) {
return (
)
}