@ptengine/design-components 0.3.0 → 0.5.0

package/llms.txt

@@ -104,9 +104,27 @@ import { Button, Dialog, Tabs } from '@ptmafia/pt-ai-components';
 - 不存在 40px 以外的更大档。
 - Avatar 头像三档:sm 24 / md 32 / lg 40(默认),Fallback 首字母字号 12/13/14 随档。
 
-### 圆角
+### 圆角(六档)
 
-基准 `--radius: 10px`;lg = 10px / md = 8px / sm = 6px。头像等正圆用 `9999px`。
+| 类名 | 值 | 用在 |
+|---|---|---|
+| `rounded-sm` | 6px | sm 档控件(24px 高) |
+| `rounded-md` | 8px | default / lg 档控件(32 / 40px 高) |
+| `rounded-lg` | 10px | 卡片、弹窗、浮层 —— 基准档 |
+| `rounded-12` | 12px | 更柔和的面板 |
+| `rounded-16` | 16px | 页面级外壳、对话坞 |
+| `rounded-20` | 20px | 需要强调圆润的大面 |
+
+头像等正圆用 `rounded-full`(9999px)。
+
+**大档位刻意用 px 命名,不用 `xl` / `2xl`**:Tailwind 默认 `rounded-xl`=12px、`rounded-2xl`=16px,
+与本库要的 16 / 20 同名不同值 —— 沿用会让从 shadcn 抄来的代码静默偏移几 px,不报错、极难自查。
+`rounded-12/16/20` 这三个类名在 Tailwind 与 shadcn 中都不存在,不可能撞。
+
+⚠️ **缺档就加档,不要硬写 `rounded-[18px]` 这类任意值** —— 否则每个面板各写各的数,刻度失效。
+
+(实现细节:`sm`/`md` 由 `--pt-radius` 基准 calc 派生,`12/16/20` 是固定值不跟随基准。
+这个混用是有意的,见 playground 的 Radius 页。)
 
 ## Button 变体词汇(与 shadcn 官方不同,别搞混)
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptengine/design-components",
-    "version": "0.3.0",
+    "version": "0.5.0",
     "description": "PT-AI-Components — PTEngine 基于 shadcn/ui 的 React 组件库",
     "license": "UNLICENSED",
     "private": false,
@@ -9,14 +9,7 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/ptmafia/Design-components.git"
-    },
-    "homepage": "https://github.com/ptmafia/Design-components#readme",
-    "bugs": {
-        "url": "https://github.com/ptmafia/Design-components/issues"
-    },
+    "homepage": "https://www.npmjs.com/package/@ptengine/design-components",
     "type": "module",
     "sideEffects": [
         "**/*.css"
@@ -55,7 +48,8 @@
         "dev": "vite --port 5199 --strictPort",
         "build": "tsc && vite build",
         "type-check": "tsc --noEmit",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "prepublishOnly": "pnpm build"
     },
     "dependencies": {
         "@radix-ui/react-accordion": "^1.2.15",
@@ -88,11 +82,11 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
-        "date-fns": "^3.6.0",
+        "date-fns": "^4.1.0",
         "embla-carousel-react": "^8.6.0",
         "input-otp": "^1.4.2",
         "lucide-react": "^0.577.0",
-        "react-day-picker": "^8.10.2",
+        "react-day-picker": "^10.0.1",
         "react-resizable-panels": "^2.1.9",
         "recharts": "^2.15.4",
         "sonner": "^2.0.7",
@@ -121,5 +115,6 @@
     "engines": {
         "node": ">=18.0.0",
         "pnpm": ">=8.0.0"
-    }
+    },
+    "packageManager": "pnpm@10.31.0"
 }

package/src/components/ui/breadcrumb.tsx

@@ -15,7 +15,9 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
         <ol
             ref={ref}
             className={cn(
-                'flex flex-wrap items-center gap-[6px] break-words text-[14px] leading-[20px] text-muted-foreground sm:gap-[10px]',
+                // 面包屑是导航辅助信息，不是正文 —— 字号走 13（lin 2026-08-28）。
+                // 原为 14，与页面正文同级，在标题下方读起来比实际权重更重。
+                'flex flex-wrap items-center gap-[6px] break-words text-[13px] leading-[20px] text-muted-foreground sm:gap-[10px]',
                 className
             )}
             {...props}

package/src/components/ui/calendar.tsx

@@ -13,46 +13,46 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
             showOutsideDays={showOutsideDays}
             className={cn('p-[12px]', className)}
             classNames={{
-                months: 'flex flex-col sm:flex-row space-y-[16px] sm:space-x-[16px] sm:space-y-0',
-                month: 'space-y-[16px]',
-                caption: 'flex justify-center pt-[4px] relative items-center',
+                months: 'relative flex flex-col gap-[16px] sm:flex-row',
+                month: 'flex flex-col gap-[16px]',
+                month_caption: 'flex h-[28px] items-center justify-center',
                 caption_label: 'text-[14px] leading-[20px] font-medium text-foreground',
-                nav: 'space-x-[4px] flex items-center',
-                nav_button: cn(buttonVariants({ variant: 'secondary' }), 'h-[24px] w-[24px] p-0'),
-                nav_button_previous: 'absolute left-[4px]',
-                nav_button_next: 'absolute right-[4px]',
-                table: 'w-full border-collapse space-y-[4px]',
-                head_row: 'flex',
-                head_cell: 'w-[32px] rounded-[var(--pt-radius-md)] text-[12px] leading-[16px] font-normal text-muted-foreground',
-                row: 'flex w-full mt-[8px]',
-                cell: cn(
-                    'relative p-0 text-center text-[14px] leading-[20px] focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-[var(--pt-radius-md)]',
-                    props.mode === 'range'
-                        ? '[&:has(>.day-range-end)]:rounded-r-[var(--pt-radius-md)] [&:has(>.day-range-start)]:rounded-l-[var(--pt-radius-md)] first:[&:has([aria-selected])]:rounded-l-[var(--pt-radius-md)] last:[&:has([aria-selected])]:rounded-r-[var(--pt-radius-md)]'
-                        : '[&:has([aria-selected])]:rounded-[var(--pt-radius-md)]'
-                ),
-                day: cn(
+                nav: 'absolute inset-x-0 top-0 z-10 flex items-center justify-between',
+                button_previous: cn(buttonVariants({ variant: 'ghost' }), 'h-[28px] w-[28px] p-0'),
+                button_next: cn(buttonVariants({ variant: 'ghost' }), 'h-[28px] w-[28px] p-0'),
+                month_grid: 'w-full border-collapse',
+                weekdays: 'flex',
+                weekday:
+                    'w-[32px] rounded-[var(--pt-radius-md)] text-[12px] leading-[16px] font-normal text-muted-foreground',
+                week: 'mt-[8px] flex w-full',
+                day: 'relative p-0 text-center text-[14px] leading-[20px] focus-within:relative focus-within:z-20',
+                day_button: cn(
                     buttonVariants({ variant: 'ghost' }),
                     'h-[32px] w-[32px] p-0 font-normal aria-selected:opacity-100'
                 ),
-                day_range_start: 'day-range-start',
-                day_range_end: 'day-range-end',
-                day_selected:
-                    'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-                day_today: 'bg-accent text-accent-foreground',
-                day_outside: 'day-outside text-muted-foreground',
-                day_disabled: 'text-muted-foreground opacity-50',
-                day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-                day_hidden: 'invisible',
+                /* range 端点:黑底白字按钮;格子层同时铺 8% 底带并只圆外侧角,
+                   让中段底带连续延伸到端点下方不断开 */
+                range_start:
+                    'day-range-start bg-selected rounded-l-[var(--pt-radius-md)] [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:font-medium',
+                range_end:
+                    'day-range-end bg-selected rounded-r-[var(--pt-radius-md)] [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:font-medium',
+                /* 单选模式选中=黑底白字;range 模式交给 range_start/end/middle 三键,不在此重复设底 */
+                selected:
+                    props.mode === 'range'
+                        ? undefined
+                        : '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:font-medium',
+                today: '[&>button]:bg-selected',
+                outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
+                disabled: 'text-muted-foreground opacity-50',
+                range_middle: 'bg-selected [&>button]:bg-transparent [&>button]:font-normal',
+                hidden: 'invisible',
                 ...classNames
             }}
             components={{
-                IconLeft: ({ className, ...props }) => (
-                    <ChevronLeft className={cn('h-[16px] w-[16px]', className)} {...props} />
-                ),
-                IconRight: ({ className, ...props }) => (
-                    <ChevronRight className={cn('h-[16px] w-[16px]', className)} {...props} />
-                )
+                Chevron: ({ orientation }) => {
+                    const Icon = orientation === 'left' ? ChevronLeft : ChevronRight;
+                    return <Icon className="h-[16px] w-[16px]" />;
+                }
             }}
             {...props}
         />

package/src/components/ui/card.tsx

@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     ({ className, ...props }, ref) => (
         <div
             ref={ref}
-            className={cn('rounded-[12px] border bg-card text-card-foreground', className)}
+            className={cn('rounded-12 border bg-card text-card-foreground', className)}
             {...props}
         />
     )

package/src/components/ui/dialog.tsx

@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
+import { Button } from './button';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -19,7 +20,7 @@ const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            'fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.8)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.45)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             className
         )}
         {...props}
@@ -27,25 +28,56 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+/** 弹窗宽度三档(px 硬值,与产品 DialogV2 规范一致):sm=480 / md=640 / lg=960,默认 sm */
+type DialogSize = 'sm' | 'md' | 'lg';
+
+const dialogSizeClasses: Record<DialogSize, string> = {
+    sm: 'max-w-[480px]',
+    md: 'max-w-[640px]',
+    lg: 'max-w-[960px]'
+};
+
 /* closeLabel:关闭钮读屏文案,库不做 i18n,消费方传译文(默认英文) */
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { closeLabel?: string }
->(({ className, children, closeLabel = 'Close', ...props }, ref) => (
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+        closeLabel?: string;
+        size?: DialogSize;
+    }
+>(({ className, children, closeLabel = 'Close', size = 'sm', ...props }, ref) => (
     <DialogPortal>
         <DialogOverlay />
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                'fixed left-[50%] top-[50%] z-[var(--pt-z-overlay,50)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[16px] border bg-background p-[24px] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--pt-radius)]',
+                // outline-none:打开时焦点落在本容器(onOpenAutoFocus),浏览器在"键盘型"
+                // 触发下会给焦点元素画默认蓝框 —— 容器是模态本体,遮罩+弹窗已是焦点指示,抑制之
+                'fixed left-[50%] top-[50%] z-[var(--pt-z-overlay,50)] grid w-full translate-x-[-50%] translate-y-[-50%] gap-[16px] border bg-background p-[24px] shadow-lg outline-none duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--pt-radius)]',
+                dialogSizeClasses[size],
                 className
             )}
+            /* 打开时不把焦点塞给第一个按钮(否则按钮带焦点环出场,像"默认选中"),
+               改为聚焦弹窗容器本身(tabindex=-1,无可见焦点环):读屏正常宣布弹窗、
+               Tab 从头遍历、焦点环只在真键盘导航时出现。消费方可传 onOpenAutoFocus 覆盖 */
+            onOpenAutoFocus={event => {
+                event.preventDefault();
+                (event.currentTarget as HTMLElement | null)?.focus();
+            }}
             {...props}
         >
             {children}
-            <DialogPrimitive.Close className="absolute right-[16px] top-[16px] rounded-[var(--pt-radius-sm)] opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                <X className="h-[16px] w-[16px]" />
-                <span className="sr-only">{closeLabel}</span>
+            {/* 关闭钮 = 库 Button(ghost + icon-sm),不手写样式。
+                !absolute:state-layer 插件给宿主设了 position:relative,须强制覆盖,
+                否则关闭钮落进 grid 流排到弹窗末尾 */}
+            <DialogPrimitive.Close asChild>
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    className="!absolute right-[16px] top-[16px]"
+                    aria-label={closeLabel}
+                >
+                    <X />
+                </Button>
             </DialogPrimitive.Close>
         </DialogPrimitive.Content>
     </DialogPortal>
@@ -71,7 +103,10 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Title
         ref={ref}
-        className={cn('text-[18px] leading-[28px] font-semibold leading-none tracking-tight', className)}
+        className={cn(
+            'text-[18px] font-semibold leading-none tracking-tight text-[rgb(var(--pt-text-strong))]',
+            className
+        )}
         {...props}
     />
 ));
@@ -83,7 +118,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}
-        className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
+        className={cn('text-[14px] leading-[20px] text-[rgb(var(--pt-text-standard))]', className)}
         {...props}
     />
 ));

package/src/components/ui/prompt-picker.tsx

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { X } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+/**
+ * PromptPicker —— 一组「起点选项」。
+ *
+ * 用户点其中一条,这条对应的内容由**页面**放进旁边的输入框,列表随即退场;
+ * 输入框里那条内容被删掉,列表又回来。支持一层与两层两种形态。
+ *
+ * 规格来源:`2026-08-25-prompt-picker-component-design.md`(lin 提出)。
+ *
+ * ## 三条硬规则(照抄自规格,改动前先回去读)
+ *
+ * 1. **任何「进入」都必须有对应的「退出」,且退出必须看得见。** 上一版之所以重做,就是
+ *    因为「选了某一条就再也回不到起始状态」—— 隐藏式操作(再点一次取消)不算退路。
+ * 2. **一层模式不做选中高亮。** 内容已经在输入框里了,再在胶囊上亮一次是同一件事表示
+ *    两遍,会产生「看着不同、其实一样」的冗余状态。第二层顶部那条分类的高亮属于
+ *    **面包屑**,不是选中态,两者不要混。
+ * 3. **列表退场是隐藏,不是销毁。** 列表本体用切 display 类藏(仍在 DOM 里),回来时
+ *    顺序不变。
+ *
+ * ## 与规格的两处偏离(lin 裁定 2026-08-25)
+ *
+ * 规格 §3 原写「点第二层条目 → 列表隐藏,**顶部那条分类保留**」+「删掉内容 →
+ * **回到第二层**(用户还在那个分类里)」。现改为:
+ *
+ * 1. **面包屑与列表同进同退** —— 内容进输入框后整个选项区一起消失。
+ * 2. **清空后回第一层、重新开始** —— 不再保留所处分类。
+ *
+ * 结果:组件只有「在选」「已选(全部退场)」两个可见状态,没有中间态。
+ * 规则 1 仍成立 —— 退出是**输入框上那个 ×**(页面侧,规格 §7 要求它必须存在且入口
+ * 可见)。它现在是唯一退路,接入时漏做就真的回不去了。
+ *
+ * ## 谁管什么
+ *
+ * | 事情 | 归属 |
+ * |---|---|
+ * | 现在在第几层、第一层选了哪个 | **组件内部 state** |
+ * | 列表显示还是隐藏 | **页面**(经 `hasContent` 下发),组件不自作主张 |
+ * | 点了一条之后往输入框放什么内容 | **页面**(`onPick` 回调里做) |
+ * | 输入框里那条内容怎么删、× 长什么样 | **页面** |
+ *
+ * 组件不 import 任何输入框相关的东西,也不读全局 store,不写死任何业务概念 ——
+ * 它将来要用在首页 Chat、编辑器 Growth Agent 面板等任何「一组预制起点」的地方。
+ *
+ * ## 已知取舍(lin 拍的,实现时不要自行改回去)
+ *
+ * 改成「点了就退场」之后,**换起点从 1 步变成 2 步**:先删掉输入框里那条 → 列表回来
+ * → 再选另一条。这与更早一轮「五条要能随意切换」的要求冲突,换来的是没有冗余状态、
+ * 状态只有一处表示。
+ */
+export interface PromptPickerItem {
+    /** 稳定标识,用于回传与去重。**不要用文案当 id** —— 早期版本用文案反查条目,脆 */
+    id: string;
+    /** 胶囊上显示的那一行。一行显示不下时截断,全文走 title 悬停 */
+    label: string;
+    /** 可选:一行放不下的补充说明,走原生 title 悬停提示 */
+    hint?: string;
+    /**
+     * 可选。有 children 即为第一层分类节点(两层模式);没有则是叶子节点,点了就 onPick。
+     * **只支持两层,不要做递归多层。**
+     */
+    children?: PromptPickerItem[];
+    /**
+     * 可选图标。⚠️ **一组条目全用同一个图标时不要传** —— 它不携带任何用于选择的信息,
+     * 只会在每行左边留一段空白。只有各条图标不同、且图标在编码类别时才传。
+     * 不传时整格不渲染(不是渲染一个空 span)。
+     */
+    icon?: React.ReactNode;
+}
+
+export interface PromptPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    items: PromptPickerItem[];
+    /**
+     * 用户点了一个叶子条目。页面据此把对应内容放进输入框。
+     * 组件不知道「内容」是什么 —— 那是页面的事。
+     */
+    onPick: (item: PromptPickerItem) => void;
+    /**
+     * 输入框里当前有没有本组件放进去的那条内容。
+     * true → 列表隐藏;false → 列表出现。**这是列表显隐的唯一依据**,
+     * 组件内部不自己记「我放过东西了」。
+     */
+    hasContent: boolean;
+    /**
+     * ⚠️ **当前没有触发点,保留为将来的钩子。**
+     *
+     * 原设计是「第二层点顶部 × 时调用,让页面清掉输入框里那条内容」。但 2026-08-25 改成
+     * 「内容进输入框后面包屑与列表一起退场」之后,× 只在输入框为空时才可见 —— 也就
+     * 永远不需要请页面清空了。清空的唯一入口在页面自己那个 ×(规格 §7)。
+     *
+     * 留着而不删:若将来恢复「内容在框里时面包屑仍可见」,这个回调是现成的接口。
+     * 不想留可以直接删,组件内部已无任何调用。
+     */
+    onClear?: () => void;
+    /** 可选:列表上方一行小字(如「为你推荐」)。不传则不渲染 */
+    lead?: string;
+    /** 第二层顶部分类项的 × 的读屏文案。库不做 i18n,消费方传译文,默认英文 */
+    backLabel?: string;
+}
+
+/* 胶囊 = 库控件 **default 档**(lin 定,2026-08-25):高 32 · 字 13/20 · 圆角 8
+   (--pt-radius-md)· 左右间距 12 · 内部语义图标 16 · gap 8。
+   规格 §5 那份(padding 9/15、gap 9,实高 40px)来自组件库成型前的 SuggestionCards
+   实测值,不在三档刻度上 —— 以库的三档规范为准,否则它和同页的 Input/Button 并排时
+   高度对不齐。色:#dfe1e6 → border-input · #12262b → foreground · #7a8699 → text-tage
+
+   ⚠️ hover 用库统一的「状态层」,不是规格 §5 写的品牌绿:
+   库规范(llms.txt 交互状态)是 **hover 在原底色上叠加中性 8%、边框加深黑 20%**,
+   并且明文「禁止用品牌绿等彩色表达选中」。规格里那份 hover 色值来自旧的
+   SuggestionCards 实测值,属于组件库成型前的写法 —— 以库规范为准。
+   机制:`state-layer` 类(preset 插件,::after 叠加 --pt-interaction-hover,
+   按下自动切 press)+ `[--pt-state-layer-border:1px]` 把叠层外扩到 border box,
+   否则叠层缩在边框内侧、圆角与边框内圆弧不同心(错位约 1px)。 */
+const CHIP_BASE =
+    'inline-flex h-[32px] max-w-full items-center gap-[8px] rounded-[var(--pt-radius-md)] border ' +
+    'px-[12px] text-left text-[13px] leading-[20px] transition-colors ' +
+    '[&>svg]:size-[16px] [&>svg]:shrink-0 ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
+
+const CHIP_IDLE =
+    'state-layer [--pt-state-layer-border:1px] border-input bg-background text-foreground ' +
+    'hover:border-neutral';
+
+/* 第二层顶部的分类项 —— 面包屑,不是选中态(见头注释规则 2)。
+   持久态底色 = 中性 8%(库规范:选中/激活用 --pt-bg-selected,不用彩色);
+   它自己不可点,所以不挂 state-layer。 */
+const CHIP_CRUMB = 'border-neutral bg-selected text-foreground';
+
+const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
+    (
+        { items, onPick, hasContent, onClear, lead, backLabel = 'Back', className, ...props },
+        ref
+    ) => {
+        /* 第一层选中的分类 id。null = 在第一层。
+           这是组件唯一的内部状态 —— 列表显隐由 hasContent 下发,不在这里记。 */
+        const [branchId, setBranchId] = React.useState<string | null>(null);
+
+        const branch = React.useMemo(
+            () => (branchId ? (items.find(i => i.id === branchId) ?? null) : null),
+            [items, branchId]
+        );
+
+        /* 分类从 items 里消失时(数据换了)回到第一层,否则会卡在一个不存在的分支上 */
+        React.useEffect(() => {
+            if (branchId && !items.some(i => i.id === branchId)) setBranchId(null);
+        }, [items, branchId]);
+
+        /* 输入框里那条内容被清掉 → 回第一层、重新开始(lin 定,2026-08-25)。
+           依赖只写 hasContent:点分类只改 branchId、不动 hasContent,所以本效应不会
+           在「刚进第二层」时被触发把人踢回去。挂载时跑一次,此时 branchId 已是 null,空操作。 */
+        React.useEffect(() => {
+            if (!hasContent) setBranchId(null);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [hasContent]);
+
+        const handleChipClick = (item: PromptPickerItem) => {
+            /* 有 children = 分类节点,进第二层;否则是叶子,交给页面 */
+            if (item.children?.length) setBranchId(item.id);
+            else onPick(item);
+        };
+
+        /* 点 × :回第一层。
+           这里**不再**调 onClear:面包屑只在 !hasContent 时渲染(见下方),所以点得到 ×
+           的时候输入框里必然是空的,原来那句 `if (hasContent) onClear?.()` 是不可达分支。 */
+        const handleBack = (e: React.MouseEvent) => {
+            e.stopPropagation(); /* 点 × 是「回第一层」,不是「重新选这条」 */
+            setBranchId(null);
+        };
+
+        const visibleItems = branch?.children ?? items;
+
+        return (
+            <div
+                ref={ref}
+                className={cn('flex w-full flex-col items-start gap-[10px]', className)}
+                {...props}
+            >
+                {/* 面包屑与列表同进同退:内容进了输入框,整个选项区(含这条分类)一起退场,
+                    页面只剩输入框里那条内容 —— lin 裁定(2026-08-25),覆盖规格 §3
+                    「顶部那条分类保留」。
+                    退路仍然看得见,只是换了归属:此时唯一的退出是**输入框上那个 ×**
+                    (页面侧,规格 §7 要求它必须存在且入口可见)。删掉内容 → 列表带着
+                    面包屑一起回来,但**回到第一层**(上面那个 hasContent 效应会重置
+                    branchId)—— 删掉内容 = 重新开始。 */}
+                {branch && !hasContent && (
+                    <div className={cn(CHIP_BASE, CHIP_CRUMB)}>
+                        {branch.icon}
+                        <span className="min-w-0 flex-1 truncate">{branch.label}</span>
+                        <button
+                            type="button"
+                            aria-label={backLabel}
+                            onClick={handleBack}
+                            className={
+                                'flex size-[24px] shrink-0 items-center justify-center rounded-[var(--pt-radius-sm)] ' +
+                                'text-[rgb(var(--pt-text-tage))] transition-colors hover:text-foreground ' +
+                                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                            }
+                        >
+                            {/* 辅助图标(关闭叉)default 档 = 12px;点击区仍保 24×24 */}
+                            <X className="size-[12px]" />
+                        </button>
+                    </div>
+                )}
+
+                {/* 藏起来而非卸载:回来时顺序与所处分类都保持(见头注释规则 3)。
+                    ⚠️ 不能用 HTML 的 hidden 属性 —— 它靠 [hidden] 的 display:none 生效,
+                    会被同元素上 Tailwind flex 的 display:flex 按样式表顺序压过去,
+                    结果是「设了 hidden 但照样显示」。必须切 display 类本身。
+                    display:none 同时把它移出无障碍树与 Tab 序,不用额外处理焦点。 */}
+                <div
+                    className={cn(
+                        'w-full flex-col items-start gap-[8px]',
+                        hasContent ? 'hidden' : 'flex'
+                    )}
+                >
+                    {lead && (
+                        <p className="text-[13px] leading-[20px] text-[rgb(var(--pt-text-tage))]">
+                            {lead}
+                        </p>
+                    )}
+                    {visibleItems.map(item => (
+                        <button
+                            key={item.id}
+                            type="button"
+                            title={item.hint ?? item.label}
+                            onClick={() => handleChipClick(item)}
+                            className={cn(CHIP_BASE, CHIP_IDLE)}
+                        >
+                            {item.icon}
+                            <span className="min-w-0 truncate">{item.label}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+);
+PromptPicker.displayName = 'PromptPicker';
+
+export { PromptPicker };

package/src/components/ui/select.tsx

@@ -10,6 +10,23 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
+/**
+ * 下拉触发器的样式 —— **单独导出，因为不止 `SelectTrigger` 需要它**。
+ *
+ * Radix `Select` 的 value 是标量，装不了「多选筛选器」（一次选多个类型 / 多个状态）。
+ * 那类控件只能自己用 Popover + Checkbox 搭，但它**必须和 Select 长得一模一样** ——
+ * 同一排筛选器里两种触发器，用户看到的是「这两个东西不是一类」。
+ *
+ * 此前的做法是在使用点拿 `Button` 去模仿这串 class，结果必然漂移：
+ * 2026-08-28 实测两者文字色（#12262b vs #344563）、底色（不透明白 vs 透明）都不同，
+ * 而高度 / 圆角 / 字号是上一轮手工对齐的 —— 手工对齐的东西下次改库时又会散开。
+ * 所以样式收在这里一处，多选触发器 `cn(selectTriggerClassName, …)` 复用。
+ *
+ * `w-full` 不在里面：Select 自己要撑满容器，而筛选器通常按内容宽。各自加。
+ */
+export const selectTriggerClassName =
+    'flex h-[32px] items-center justify-between whitespace-nowrap rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-[13px] leading-[20px] ring-offset-background transition-colors placeholder:text-muted-foreground enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:text-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30 [&>span]:line-clamp-1';
+
 const SelectTrigger = React.forwardRef<
     React.ElementRef<typeof SelectPrimitive.Trigger>,
     React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
@@ -17,10 +34,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         data-slot="select-trigger"
-        className={cn(
-            'flex h-[32px] w-full items-center justify-between whitespace-nowrap rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-[13px] leading-[20px] ring-offset-background transition-colors placeholder:text-muted-foreground enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:text-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30 [&>span]:line-clamp-1',
-            className
-        )}
+        className={cn(selectTriggerClassName, 'w-full', className)}
         {...props}
     >
         {children}

package/src/components/ui/sidebar.tsx

@@ -297,7 +297,7 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main
                 ref={ref}
                 className={cn(
                     'relative flex w-full flex-1 flex-col bg-background',
-                    'md:peer-data-[variant=inset]:m-[8px] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-[8px] md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-[12px]',
+                    'md:peer-data-[variant=inset]:m-[8px] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-[8px] md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-12',
                     className
                 )}
                 {...props}

package/src/index.ts

@@ -50,6 +50,9 @@ export {
     SelectGroup,
     SelectValue,
     SelectTrigger,
+    // 多选筛选器要和 Select 长得一样，但装不进 Radix Select（value 是标量）——
+    // 让它们复用同一份触发器样式，而不是在使用点手抄（见 select.tsx 的说明）。
+    selectTriggerClassName,
     SelectContent,
     SelectLabel,
     SelectItem,
@@ -100,11 +103,7 @@ export { Avatar, AvatarImage, AvatarFallback } from './components/ui/avatar';
 
 export { Toaster, toast } from './components/ui/sonner';
 
-export {
-    Collapsible,
-    CollapsibleTrigger,
-    CollapsibleContent
-} from './components/ui/collapsible';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './components/ui/collapsible';
 
 export { Separator } from './components/ui/separator';
 
@@ -337,7 +336,12 @@ export {
     DrawerDescription
 } from './components/ui/drawer';
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './components/ui/input-otp';
+export {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+    InputOTPSeparator
+} from './components/ui/input-otp';
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './components/ui/resizable';
 
@@ -404,6 +408,12 @@ export {
 
 export { Marker, MarkerIcon, MarkerContent, markerVariants } from './components/ui/marker';
 
+export {
+    PromptPicker,
+    type PromptPickerItem,
+    type PromptPickerProps
+} from './components/ui/prompt-picker';
+
 export { DirectionProvider, useDirection } from './components/ui/direction';
 
 export { useIsMobile } from './hooks/use-mobile';