apptify 0.6.1 → 0.7.0

package/templates/playground/src/ComponentDemo.vue

@@ -28,6 +28,7 @@
         </apple-stack>
       </apple-provider>
     </apple-stack>
+    <apple-button v-else-if="name === 'AppleOverlayHost'" @click="notify('由 Provider 内的 OverlayHost 显示')">显示通知</apple-button>
     <apple-stack v-else-if="name === 'AppleContainer'">
       <apple-slider v-model="containerWidth" label="内容宽度" :min="240" :max="640" :step="40" />
       <apple-container :width="containerWidth">
@@ -47,7 +48,7 @@
       </apple-grid>
     </apple-stack>
     <apple-card v-else-if="name === 'AppleCard'" class="demo-product" title="AirPods Max" subtitle="每个音符，都更动听。" eyebrow="声音，出类拔萃。">
-      <apple-image :gallery="{ src: '/images/airpods-max-orange.jpg', alt: '橙色 AirPods Max 耳机' }" aspect-ratio="1" fit="contain" />
+      <apple-image :gallery="{ src: imageUrl('airpods-max-orange.jpg'), alt: '橙色 AirPods Max 耳机' }" aspect-ratio="1" fit="contain" />
       <template #actions><apple-button @click="notify('已加入购物袋')">加入购物袋</apple-button><apple-link as="button" :icon="icons.Heart" icon-only label="收藏" @click="notify('已收藏')" /></template>
     </apple-card>
     <apple-stack v-else-if="name === 'AppleImage'" class="demo-image">
@@ -61,6 +62,7 @@
     <apple-stack v-else-if="name === 'AppleBadge'" direction="row" align="center"><apple-badge :value="unread"><apple-link variant="secondary" :icon="icons.Bell" @click="unread++">新消息</apple-link></apple-badge><apple-link as="button" :disabled="!unread" @click="unread = 0">全部已读</apple-link></apple-stack>
     <apple-stack v-else-if="name === 'AppleTag'" class="demo-tag-row" direction="row" align="center" :gap="10"><apple-tag>默认标签</apple-tag><apple-tag tone="success">已完成</apple-tag><apple-tag tone="info">进行中</apple-tag><apple-tag tone="warning">待确认</apple-tag><apple-tag v-if="tag" label="设计系统" closable @close="tag = false">设计系统</apple-tag><apple-link as="button" v-else :icon="icons.Plus" @click="tag = true">添加标签</apple-link></apple-stack>
     <apple-stack v-else-if="name === 'AppleDivider'"><apple-switch v-model="dividerVertical" label="纵向分隔" /><apple-stack :direction="dividerVertical ? 'row' : 'column'" :gap="0" align="center"><span>配送到家</span><apple-divider :vertical="dividerVertical" :label="dividerVertical ? undefined : '更多选择'" /><span>到店取货</span></apple-stack></apple-stack>
+    <div v-else-if="name === 'AppleScrollBar'" class="demo-scroll-bar" tabindex="0" aria-label="滚动示例"><div class="demo-scroll-bar__content"><apple-card v-for="n in 12" :key="n" class="demo-layout-tile"><strong>0{{ n }}</strong></apple-card></div></div>
     <apple-input v-else-if="name === 'AppleInput'" v-model="text" label="姓名" placeholder="怎么称呼你" clearable />
     <apple-textarea v-else-if="name === 'AppleTextarea'" v-model="bio" label="个人简介" placeholder="写下你的想法" :maxlength="160" counter />
     <apple-select v-else-if="name === 'AppleSelect'" v-model="city" label="所在城市" :items="cities" />
@@ -94,7 +96,7 @@
     <apple-steps v-else-if="name === 'AppleSteps'" v-model="step" :items="steps" clickable />
     <apple-accordion v-else-if="name === 'AppleAccordion'" :items="questions" />
     <apple-stack v-else-if="name === 'AppleTable'"><apple-switch v-model="virtualTable" label="虚拟滚动 · 5000 行" /><apple-table :columns="columns" :rows="virtualTable ? virtualRows : rows" selectable :virtual="virtualTable" :height="360" :page-size="virtualTable ? 0 : 3" /></apple-stack>
-    <apple-tree v-else-if="name === 'AppleTree'" v-model="tree" :items="folders" />
+    <apple-tree v-else-if="name === 'AppleTree'" v-model="tree" :items="folders" :mobile-directory="false" />
     <apple-list v-else-if="name === 'AppleList'" v-model="setting" :items="settings" selectable @select="notify('已选择设置项')" />
     <apple-stack v-else-if="name === 'AppleTimeline'"><apple-segmented-control v-model="timelineDirection" :items="[{label:'纵向',value:'vertical'},{label:'横向',value:'horizontal'}]" label="时间线方向" /><apple-timeline :items="events" :orientation="timelineDirection" /><apple-link variant="secondary" @click="updateDelivery">{{ delivered ? '查看配送过程' : '确认签收' }}</apple-link></apple-stack>
     <apple-stack v-else-if="name === 'AppleStatistic'"><apple-segmented-control v-model="period" :items="periods" label="统计周期" /><apple-statistic :label="period === 'day' ? '今日访问' : period === 'week' ? '本周访问' : '本月访问'" :value="period === 'day' ? 428 : period === 'week' ? 2996 : 12840" suffix="次" description="最新访问数据" /></apple-stack>
@@ -125,6 +127,8 @@
     <apple-pull-refresh v-else-if="name === 'ApplePullRefresh'" @refresh="refresh"><apple-list :items="[{label:'最新内容',value:'latest',description:refreshText},{label:'最近更新',value:'recent',description:'所有内容已同步'}]" /></apple-pull-refresh>
     <template v-else-if="name === 'AppleBackTop'"><apple-button :icon="icons.ArrowUp" variant="secondary" @click="toTop">回到顶部</apple-button><apple-back-top :threshold="0" :fixed="false" /></template>
     <template v-else-if="name === 'AppleFloatingGroup'"><apple-button variant="secondary" @click="notify('快捷操作已就绪')">快捷操作</apple-button><apple-card class="demo-floating-preview"><apple-provider><apple-floating-group :threshold="0" /></apple-provider></apple-card></template>
+    <apple-card v-else-if="name === 'AppleSpeedDial'" class="demo-floating-preview"><apple-provider><apple-floating-group :back-top="false" label="全局快捷操作预览"><apple-back-top :threshold="0" :fixed="false" /><apple-button :icon="icons.Plus" icon-only label="新增" @click="notify('已新增')" /><apple-button :icon="icons.Menu" icon-only label="目录" :disabled="!$apple.speedDial.mobile.value" @click="$apple.speedDial.open.value = true" /></apple-floating-group></apple-provider></apple-card>
+    <apple-button v-else-if="name === 'AppleSpeedDialItem'" :icon="icons.Plus" icon-only label="新增" @click="notify('已新增')" />
     <apple-stack v-else-if="name === 'AppleAutoSize'"><apple-switch v-model="checked" label="显示详情" /><apple-auto-size><apple-list :items="checked ? settings : settings.slice(0,1)" selectable /></apple-auto-size></apple-stack>
     <apple-stack v-else-if="name === 'AppleTransition'">
       <apple-segmented-control v-model="period" :items="periods" label="统计周期" />
@@ -139,33 +143,34 @@
 </template>
 
 <script lang="ts">
+import { imageUrl } from './images'
 import { defineComponent, h, markRaw } from 'vue'
-import { Plus, Heart, Bell, ArrowUpRight, ArrowUp, MoreHorizontal, ZoomIn, Share2, Trash2 } from 'lucide-vue-next'
-import { AppleButton } from 'apptify'
+import { Plus, Heart, Bell, ArrowUpRight, ArrowUp, MoreHorizontal, ZoomIn, Share2, Trash2, Menu } from 'lucide-vue-next'
+import { AppleButton, resolveMotion, scrollToWithMotion, type MotionScroll } from 'apptify'
 export default defineComponent({
   name: 'ComponentDemo', props: { name: { type: String, required: true } }, emits: ['navigate'],
   data() { return {
-    icons: markRaw({ Plus, Heart, Bell, ArrowUpRight, ArrowUp, MoreHorizontal, ZoomIn }), text: '', bio: '', email: '', city: 'beijing', device: null, checked: true, delivery: 'express', volume: 68, quantity: 1, period: 'month', date: '', time: '10:30', color: '#0071e3', files: [], otp: '', region: [], rating: 4, tab: 'overview', page: 1, step: 1, tree: '', drawer: false, sheet: false, actionSheet: false, tag: true, refreshText: '今天 09:41', itemsCount: 3,
+    icons: markRaw({ Plus, Heart, Bell, ArrowUpRight, ArrowUp, MoreHorizontal, ZoomIn, Menu }), text: '', bio: '', email: '', city: 'beijing', device: null, checked: true, delivery: 'express', volume: 68, quantity: 1, period: 'month', date: '', time: '10:30', color: '#0071e3', files: [], otp: '', region: [], rating: 4, tab: 'overview', page: 1, step: 1, tree: '', drawer: false, sheet: false, actionSheet: false, tag: true, refreshText: '今天 09:41', itemsCount: 3,
     searchText: '', setting: 'profile', website: '', previewTheme: 'dark', stackDirection: 'row' as 'row' | 'column', containerWidth: 480, gridMin: 160, avatarSize: 48, avatarMax: 3, unread: 8, dividerVertical: false, delivered: false, alertVisible: true, demoLoading: true, imageLayout: 'compact' as 'compact' | 'tiled' | 'tiled-wrap', imageSquare: false, imageCarousel: false,
     virtualTable: false, transitionBackward: false,
     timelineDirection:'vertical' as 'vertical'|'horizontal', skeletonVariant:'text' as 'text'|'avatar'|'card'|'list'|'table'|'image', skeletonVariants:[{label:'文本',value:'text'},{label:'头像',value:'avatar'},{label:'卡片',value:'card'},{label:'列表',value:'list'},{label:'表格',value:'table'},{label:'图片',value:'image'}],
     dateFormat:'YYYY/MM/DD HH:mm', dateFormats:[{label:'年 / 月',value:'YYYY/MM'},{label:'年 / 月 / 日',value:'YYYY/MM/DD'},{label:'日期与时分',value:'YYYY/MM/DD HH:mm'},{label:'日期与时分秒',value:'YYYY/MM/DD HH:mm:ss'},{label:'时分',value:'HH:mm'},{label:'时分秒',value:'HH:mm:ss'}],
     previewThemes: [{label:'浅色',value:'light'},{label:'深色',value:'dark'},{label:'石墨',value:'graphite'},{label:'玫瑰',value:'rose'}], layoutItems: ['概览', '设计', '支持'],
     galleryImages: [
-      { src: '/images/lake.jpg', alt: '山间湖泊与小屋' },
-      { src: '/images/airpods-max-orange.jpg', alt: '橙色 AirPods Max 耳机' },
-      { src: '/images/city.jpg', alt: '城市天际线' },
-      { src: '/images/mountains.jpg', alt: '群山与山峰' },
-      { src: '/images/forest.jpg', alt: '阳光下的森林' },
-      { src: '/images/architecture.jpg', alt: '建筑细节' },
-      { src: '/images/coast.jpg', alt: '海岸风景' },
-      { src: '/images/food.jpg', alt: '餐桌上的美食' },
-      { src: '/images/desert.jpg', alt: '沙漠沙丘' },
-      { src: '/images/waterfall.jpg', alt: '山间瀑布' },
-      { src: '/images/sunset.jpg', alt: '夕阳风景' },
-      { src: '/images/snow.jpg', alt: '雪地风景' },
+      { src: imageUrl('lake.jpg'), alt: '山间湖泊与小屋' },
+      { src: imageUrl('airpods-max-orange.jpg'), alt: '橙色 AirPods Max 耳机' },
+      { src: imageUrl('city.jpg'), alt: '城市天际线' },
+      { src: imageUrl('mountains.jpg'), alt: '群山与山峰' },
+      { src: imageUrl('forest.jpg'), alt: '阳光下的森林' },
+      { src: imageUrl('architecture.jpg'), alt: '建筑细节' },
+      { src: imageUrl('coast.jpg'), alt: '海岸风景' },
+      { src: imageUrl('food.jpg'), alt: '餐桌上的美食' },
+      { src: imageUrl('desert.jpg'), alt: '沙漠沙丘' },
+      { src: imageUrl('waterfall.jpg'), alt: '山间瀑布' },
+      { src: imageUrl('sunset.jpg'), alt: '夕阳风景' },
+      { src: imageUrl('snow.jpg'), alt: '雪地风景' },
     ],
-    images: ['/images/lake.jpg', '/images/airpods-max-orange.jpg'], people: [{name:'林初'},{name:'Alex'},{name:'Taylor'},{name:'Quinn'},{name:'Sam'}],
+    images: [imageUrl('lake.jpg'), imageUrl('airpods-max-orange.jpg')], people: [{name:'林初'},{name:'Alex'},{name:'Taylor'},{name:'Quinn'},{name:'Sam'}],
     cities: [{label:'北京',value:'beijing'},{label:'上海',value:'shanghai'},{label:'杭州',value:'hangzhou'}], devices: [{label:'MacBook Air',value:'mac'},{label:'iPad Pro',value:'ipad'},{label:'AirPods Max',value:'airpods'}],
     deliveryItems: [{label:'快递送达',value:'express'},{label:'到店取货',value:'pickup'}], periods: [{label:'日',value:'day'},{label:'周',value:'week'},{label:'月',value:'month'}],
     regions: [{label:'北京市',value:'beijing',children:[{label:'朝阳区',value:'chaoyang'},{label:'海淀区',value:'haidian'}]},{label:'浙江省',value:'zhejiang',children:[{label:'杭州市',value:'hangzhou',children:[{label:'西湖区',value:'xihu'}]}]}],
@@ -175,8 +180,9 @@ export default defineComponent({
     folders: [{label:'设计资源',value:'design',children:[{label:'组件',value:'components',children:[{label:'按钮',value:'buttons'},{label:'输入框',value:'inputs'}]},{label:'图标',value:'icons'}]},{label:'项目文件',value:'project'}],
     settings: [{label:'个人资料',value:'profile',description:'姓名、头像和联系方式'},{label:'通知',value:'notifications',description:'推送和邮件偏好'},{label:'隐私与安全',value:'security',description:'管理账户的安全设置'}],
     events: [{label:'订单已确认',value:'confirmed',description:'我们正在准备你的订单',time:'09:41'},{label:'正在配送',value:'shipping',description:'你的包裹已出发',time:'12:00'},{label:'即将送达',value:'arrival',description:'留意配送通知',time:'预计明天'}],
-    actions: [{label:'收藏',value:'favorite'},{label:'分享',value:'share'},{label:'删除',value:'delete',danger:true}], slides: [{label:'山间清晨',value:0,src:'/images/lake.jpg'},{label:'一场聆听',value:1,src:'/images/airpods-max-orange.jpg'}],
+    actions: [{label:'收藏',value:'favorite'},{label:'分享',value:'share'},{label:'删除',value:'delete',danger:true}], slides: [{label:'山间清晨',value:0,src:imageUrl('lake.jpg')},{label:'一场聆听',value:1,src:imageUrl('airpods-max-orange.jpg')}],
     photoActions: [{label:'加入收藏',value:'favorite',description:'将这张照片保存到你的灵感收藏',icon:markRaw(Heart),danger:false},{label:'分享照片',value:'share',description:'与朋友分享山间的这一刻',icon:markRaw(Share2),danger:false},{label:'删除照片',value:'delete',description:'从当前相册中移除',icon:markRaw(Trash2),danger:true}],
+    topScroll: undefined as MotionScroll | undefined,
     timers: [] as ReturnType<typeof setTimeout>[],
   } },
   computed: {
@@ -193,8 +199,9 @@ export default defineComponent({
       this.transitionBackward = this.periods.findIndex(item => item.value === next) < this.periods.findIndex(item => item.value === previous)
     },
   },
-  beforeUnmount() { this.timers.forEach(clearTimeout) },
+  beforeUnmount() { this.topScroll?.cancel(); this.timers.forEach(clearTimeout) },
   methods: {
+    imageUrl,
     notify(message: string) { this.$apple.notify(message, {tone:'success'}) },
     validate(data: FormData) { return String(data.get('name') ?? '').trim().length > 0 || '请输入姓名' },
     updateDelivery() { this.delivered = !this.delivered; this.events[2] = this.delivered ? { label: '已签收', value: 'arrival', description: '包裹已送达，祝你使用愉快', time: new Date().toLocaleTimeString('zh-CN') } : { label: '即将送达', value: 'arrival', description: '留意配送通知', time: '预计明天' } },
@@ -206,7 +213,7 @@ export default defineComponent({
     },
     refresh(done: () => void) { this.timers.push(setTimeout(() => { this.refreshText = `更新于 ${new Date().toLocaleTimeString('zh-CN')}`; done() }, 700)) },
     loadMore(done: () => void) { this.timers.push(setTimeout(() => { this.itemsCount = Math.min(12, this.itemsCount + 3); done() }, 500)) },
-    toTop() { window.scrollTo({top:0,behavior:this.$apple.motion.value.mode === 'none' || this.$apple.motion.value.reduced ? 'instant':'smooth'}) },
+    toTop() { this.topScroll = scrollToWithMotion(window, 0, resolveMotion('inherit', this.$apple.motion.value.mode, this.$apple.motion.value.reduced) === 'full') },
   },
 })
 </script>
@@ -220,6 +227,8 @@ export default defineComponent({
 .component-demo > .demo-tag-row > :deep(.apple-button) { align-self: center; max-width: 100%; }
 
 .demo-transition-stage { display: grid; min-width: 0; overflow: hidden; --demo-slide-distance: 24px; }
+.demo-scroll-bar { height: 240px; overflow: auto; border-radius: 12px; }
+.demo-scroll-bar__content { width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; }
 .demo-transition-stage.is-backward { --demo-slide-distance: -24px; }
 .demo-transition-stage :deep(.apple-statistic) { grid-area: 1 / 1; min-width: 0; }
 .demo-transition-stage :deep(.apple-slide-x-enter-active),

package/templates/playground/src/catalog.ts

@@ -1,70 +1,75 @@
+import { componentMetadata } from './editor/component-metadata'
 export interface CatalogItem { name: string; label: string; group: string; description: string; api: string; code: string }
-const item = (name: string, label: string, group: string, description: string, api: string, code: string): CatalogItem => ({ name, label, group, description, api, code })
+const item = (name: string, api: string, code: string): CatalogItem => ({ name, ...componentMetadata[name], api, code })
 export const catalog: CatalogItem[] = [
-  item('AppleButton', '按钮', '基础', '清晰的操作层级。', 'variant · size · icon · iconOnly · label · loading · disabled · ripple · motion', '<apple-button variant="primary" :loading="saving" @click="save">继续</apple-button>'),
-  item('AppleLink', '链接', '基础', '让下一步清楚可见。', 'href · external · disabled | slot: default', '<apple-link href="https://www.apple.com.cn/" external>Apple 官网</apple-link>'),
-  item('AppleSearch', '搜索', '基础', '快速找到关心的内容。', 'v-model(string) · label · placeholder · disabled | search(query)', '<apple-search v-model="query" label="搜索设置" placeholder="搜索设置" @search="search" />'),
-  item('AppleProvider', '主题容器', '基础', '独立区域，也有统一的设计语言。', 'theme · motion(auto|full|reduced|none) | slot: default', '<apple-provider theme="dark" motion="auto">\n  <apple-button>继续</apple-button>\n</apple-provider>'),
-  item('AppleContainer', '内容容器', '基础', '在不同屏幕上保留合适的内容宽度。', 'width(number|string) | slot: default', '<apple-container :width="960">\n  <apple-stack>内容</apple-stack>\n</apple-container>'),
-  item('AppleStack', '弹性布局', '基础', '有序排列，自然换行。', 'direction(row|column) · gap · align · wrap | slot: default', '<apple-stack direction="row" :gap="16" align="center">\n  <apple-button>继续</apple-button>\n  <apple-button variant="secondary">取消</apple-button>\n</apple-stack>'),
-  item('AppleGrid', '网格布局', '基础', '让列数随内容空间变化。', 'min(number) · gap(number) | slot: default', '<apple-grid :min="240" :gap="20">\n  <div v-for="item in items" :key="item.id">{{ item.label }}</div>\n</apple-grid>'),
-  item('AppleCard', '卡片', '基础', '来自 Apple Store 的产品表达。', 'title · subtitle · text · image · zoom · shadow · motion | slots: media, title, icon, actions', '<apple-card title="AirPods Max" subtitle="声音，出类拔萃。" motion="auto">\n  <template #actions><apple-button>进一步了解</apple-button></template>\n</apple-card>'),
-  item('AppleImage', '图片与预览', '基础', '让值得细看的内容更近一步。', 'gallery(object|array) · index · preview · carousel · disabled · label · galleryLayout(compact|tiled|tiled-wrap) · v-model:index | item({item,index,active}) · squared · aspectRatio · fit', '<apple-image :gallery="images" gallery-layout="compact" :index="0" />'),
-  item('AppleAvatar', '头像', '基础', '为每一位用户保留位置。', 'src · name · size', '<apple-avatar name="林初" :size="48" />'),
-  item('AppleAvatarGroup', '头像组', '基础', '一起参与的人，一眼可见。', 'items[{name,src,value}] · max · size · label | slot: default', '<apple-avatar-group :items="members" :max="4" :size="40" label="项目成员" />'),
-  item('AppleBadge', '徽标', '基础', '不打扰，也不遗漏。', 'value · max · dot · tone', '<apple-badge :value="8"><apple-button>消息</apple-button></apple-badge>'),
-  item('AppleTag', '标签', '基础', '轻量的分类与状态。', 'tone · closable | close', '<apple-tag tone="success" closable @close="remove">已完成</apple-tag>'),
-  item('AppleDivider', '分隔线', '基础', '恰到好处的分界。', 'label · vertical', '<apple-divider label="更多选择" />'),
-  item('AppleInput', '输入框', '表单', '每一次输入，都自然流畅。', 'v-model · label · placeholder · type · error · hint · clearable · disabled', '<apple-input v-model="name" label="姓名" placeholder="怎么称呼你" clearable />'),
-  item('AppleTextarea', '多行输入', '表单', '为更长的想法留白。', 'v-model · label · rows · maxlength · error · hint', '<apple-textarea v-model="bio" label="个人简介" :maxlength="160" />'),
-  item('AppleSelect', '选择器', '表单', '从容找到你的选择。', 'v-model · label · items[{label,value,disabled}] · placeholder · disabled', '<apple-select v-model="city" label="所在城市" :items="cities" />'),
-  item('AppleAutocomplete', '自动补全', '表单', '想到哪里，找到哪里。', 'v-model · label · items · placeholder · disabled', '<apple-autocomplete v-model="device" label="搜索设备" :items="devices" />'),
-  item('AppleCheckbox', '复选框', '表单', '一个，或不止一个。', 'v-model · label · disabled · indeterminate', '<apple-checkbox v-model="agreed" label="我已阅读并同意条款" />'),
-  item('AppleRadioGroup', '单选框', '表单', '专注于一个明确的选择。', 'v-model · label · items · disabled', '<apple-radio-group v-model="delivery" label="配送方式" :items="methods" />'),
-  item('AppleSwitch', '开关', '表单', '简单的一开一关。', 'v-model · label · disabled', '<apple-switch v-model="notifications" label="接收通知" />'),
-  item('AppleSlider', '滑块', '表单', '把控制权交给指尖。', 'v-model · label · min · max · step · disabled', '<apple-slider v-model="volume" label="音量" :min="0" :max="100" />'),
-  item('AppleStepper', '步进器', '表单', '精确一点，也轻松一点。', 'v-model · label · min · max · step', '<apple-stepper v-model="quantity" label="数量" :min="1" :max="10" />'),
-  item('AppleSegmentedControl', '分段控制', '表单', '在相邻的视图间切换。', 'v-model · items · label · disabled', '<apple-segmented-control v-model="period" :items="periods" label="统计周期" />'),
-  item('AppleDatePicker', '日期与时间', '表单', '为值得记住的日子。', 'v-model · format · granularity · label · min · max · required · disabled | change(value)', '<apple-date-picker v-model="date" label="到店日期" format="YYYY/MM/DD HH:mm" />'),
-  item('AppleColorPicker', '颜色选择', '表单', '找到属于你的颜色。', 'v-model(#hex) · label · disabled', '<apple-color-picker v-model="color" label="强调色" />'),
-  item('AppleUpload', '文件上传', '表单', '拖入文件，继续创作。', 'v-model(File[]) · label · accept · multiple · maxSize(bytes) · maxFiles · capture | reject([{file,reason}]), remove(file)', '<apple-upload v-model="files" label="上传图片" accept="image/*" multiple :max-files="5" />'),
-  item('AppleOtpInput', '验证码', '表单', '验证步骤，也可以很顺手。', 'v-model · length · label | complete', '<apple-otp-input v-model="code" :length="6" label="验证码" />'),
-  item('AppleCascader', '级联选择', '表单', '从整体，找到细节。', 'v-model(value[]) · items[{label,value,children}] · label', '<apple-cascader v-model="region" label="所在地区" :items="regions" />'),
-  item('AppleRate', '评分', '表单', '记录真实的感受。', 'v-model · max · label · readonly · disabled', '<apple-rate v-model="rating" label="体验评分" />'),
-  item('AppleForm', '表单验证', '表单', '把完整提交做好。', 'validator(FormData) => boolean|string|Promise · loading · disabled | submit(FormData), invalid, reset | methods: validate(), submit(), reset()', '<apple-form :validator="validate" @submit="submit">\n  <apple-input v-model="name" name="name" label="姓名" required />\n  <apple-button type="submit">提交</apple-button>\n</apple-form>'),
-  item('AppleFormField', '表单字段', '表单', '为自定义控件补齐标签与验证信息。', 'label · for · error · hint · required · disabled | default({id,disabled,required,aria-invalid,aria-describedby})', '<apple-form-field label="个人网站" :error="error">\n  <template #default="field">\n    <input v-bind="field" v-model="website" class="apple-control" type="url" />\n  </template>\n</apple-form-field>'),
-  item('AppleNavibar', '顶部导航栏', '导航', '随可用宽度折叠的顶部导航。', 'v-model · items · brand · brandHref · fixed · breakpoint=640 · hideOnPreview · label · motion | change(value,item), toggle(open) | slots: brand, item, actions', '<apple-navibar v-model="page" brand="Apptify" :items="pages" />'),
-  item('AppleAside', '侧栏容器', '导航', '图片归位后，导航自然恢复。', 'hideOnPreview=true · motion | slot: default | 布局由调用方提供', '<apple-aside :hide-on-preview="false">\n  <apple-list :items="items" />\n</apple-aside>'),
-  item('AppleTabs', '标签页', '导航', '内容各归其位。', 'v-model · items[{label,value,disabled}] | slot: default({value})', '<apple-tabs v-model="tab" :items="tabs">\n  <template #default="{ value }">{{ value }}</template>\n</apple-tabs>'),
-  item('AppleTabBar', '页签栏', '导航', '相邻页面，自然衔接。', 'v-model · items · label · disabled · motion | slot: default({value})', '<apple-tab-bar v-model="tab" :items="tabs">\n  <template #default="{value}">{{ value }}</template>\n</apple-tab-bar>'),
-  item('AppleBreadcrumbs', '面包屑', '导航', '始终知道身在何处。', 'items[{label,value,href,disabled}] · label', '<apple-breadcrumbs :items="[{label:\'首页\',value:\'home\',href:\'/\'},{label:\'设置\',value:\'settings\'}]" />'),
-  item('ApplePagination', '分页', '导航', '一步步，轻松浏览。', 'v-model(page) · total · pageSize', '<apple-pagination v-model="page" :total="120" :page-size="10" />'),
-  item('AppleSteps', '步骤条', '导航', '每一步，都有进展。', 'v-model(index) · items[{label,value,description,disabled}] · clickable · disabled', '<apple-steps v-model="step" :items="steps" clickable />'),
-  item('AppleAccordion', '折叠面板', '数据展示', '需要时，再展开。', 'v-model · items[{label,value,content}] · multiple', '<apple-accordion :items="questions" />'),
-  item('AppleTable', '数据表格', '数据展示', '复杂信息，清晰呈现。', 'columns[{key,label,sortable,width,minWidth,maxWidth}] · rows · rowKey · selectable · pageSize · virtual · height · rowHeight · overscan · resizable | update:selected, column-resize', '<apple-table :columns="columns" :rows="rows" row-key="id" virtual :height="360" :row-height="48" />'),
-  item('AppleTree', '树形结构', '数据展示', '有层次，也有条理。', 'v-model · items[{label,value,children}] | select', '<apple-tree v-model="selected" :items="folders" />'),
-  item('AppleList', '列表', '数据展示', '内容优先的日常界面。', 'v-model · items[{label,value,description,href,disabled}] · selectable | select(item)', '<apple-list v-model="setting" :items="settings" selectable @select="openSetting" />'),
-  item('AppleTimeline', '时间线', '数据展示', '把发生的事串联起来。', 'items[{label,value,description,time,tone}] · orientation(horizontal|vertical) · label', '<apple-timeline :items="events" orientation="horizontal" />'),
-  item('AppleStatistic', '统计数值', '数据展示', '重要数据，一目了然。', 'label · value · prefix · suffix · precision', '<apple-statistic label="本月访问" :value="12840" suffix="次" />'),
-  item('AppleDialog', '对话框', '反馈', '重要的决定，值得专注。', 'v-model · title · persistent · confirmText · cancelText | confirm, cancel', '<apple-dialog v-model="open" title="保存更改？" @confirm="save">\n  你的更改会同步到所有设备。\n</apple-dialog>'),
-  item('AppleDrawer', '抽屉', '反馈', '让补充信息就近展开。', 'v-model · title · placement(left|right|bottom) · width · persistent · loading', '<apple-drawer v-model="open" title="偏好设置" placement="right">内容</apple-drawer>'),
-  item('AppleSheet', '底部面板', '反馈', '为拇指设计的临时空间。', 'v-model · title · persistent', '<apple-sheet v-model="open" title="分享">内容</apple-sheet>'),
-  item('AppleSnackbar', '轻提示', '反馈', '及时回应，不必打断。', 'v-model · message · title · tone · duration(ms) · action · closable | close, action', "const notice = apple.notify('已保存', { tone: 'success', duration: 4000 })"),
-  item('AppleAlert', '提示信息', '反馈', '让状态清楚可见。', 'v-model · title · message · tone · closable | close', '<apple-alert v-model="visible" title="一切已就绪" tone="success" closable>内容已同步。</apple-alert>'),
-  item('AppleProgress', '进度条', '反馈', '等待，也能心中有数。', 'modelValue · max · label · indeterminate · showValue · tone', '<apple-progress :model-value="68" label="正在上传" show-value />'),
-  item('AppleSpinner', '加载中', '反馈', '给等待一个轻巧的回应。', 'size · label', '<apple-spinner label="正在加载" />'),
-  item('AppleSkeleton', '骨架屏', '反馈', '内容到达之前。', 'variant(text|avatar|card|list|table|image) · lines · rows · columns · avatar · width · height · animated · label · motion', '<apple-skeleton variant="list" :rows="3" avatar />'),
-  item('AppleEmpty', '空状态', '反馈', '没有内容，也不空洞。', 'title · description | slot: default', '<apple-empty title="还没有收藏" description="喜欢的内容，会出现在这里。" />'),
-  item('ApplePopover', '气泡面板', '反馈', '让更多操作触手可及。', 'v-model · label · placement · align · width · disabled | activator({props,open,close,isOpen}), default({close})', '<apple-popover label="更多选项">\n  <template #activator><apple-button variant="secondary">更多</apple-button></template>\n  <apple-switch v-model="sync" label="自动同步" />\n</apple-popover>'),
-  item('AppleTooltip', '文字提示', '反馈', '在需要的时候多说一句。', 'text | slot: default', '<apple-tooltip text="添加到收藏"><apple-button>收藏</apple-button></apple-tooltip>'),
-  item('AppleMenu', '下拉菜单', '反馈', '按需展开的操作列表。', 'v-model · items[{label,value,disabled,danger,icon,description}] · label · selected | select(value,item)', '<apple-menu :items="actions" label="更多操作" @select="onAction" />'),
-  item('AppleActionSheet', '动作面板', '移动交互', '熟悉、直接的移动操作。', 'v-model · title · message · items[{label,value,disabled,danger}] · cancelText | default slot {select(item),close(value)} | select(value,item)', '<apple-action-sheet v-model="open" title="选择操作" @select="onAction">\n  <template #default="{ select }">\n    <apple-button @click="select({ label: \'收藏\', value: \'favorite\' })">加入收藏</apple-button>\n  </template>\n</apple-action-sheet>'),
-  item('ApplePullRefresh', '下拉刷新', '移动交互', '轻轻下拉，获取新内容。', 'v-model(refreshing) · threshold · label · disabled | refresh(done)', '<apple-pull-refresh @refresh="async done => { await reload(); done() }">内容</apple-pull-refresh>'),
-  item('AppleBackTop', '回到顶部', '移动交互', '回到开始，毫不费力。', 'threshold · label', '<apple-back-top :threshold="400" />'),
-  item('AppleFloatingGroup', '悬浮操作组', '移动交互', '常用操作，触手可及。', 'backTop · threshold · target · label · motion | default', '<apple-floating-group :threshold="300" />'),
-  item('AppleAutoSize', '自适应尺寸', '基础', '内容变化，布局随行。', 'axis(height|both) · motion | default', '<apple-auto-size><div v-if="expanded">详情内容</div></apple-auto-size>'),
-  item('AppleTransition', '动效容器', '基础', '为页面保留连续感。', 'name(page|slide-x|slide-y|fade) · mode · appear · motion | default', '<apple-transition name="page"><router-view /></apple-transition>'),
-  item('AppleInfiniteScroll', '无限滚动', '移动交互', '浏览，不必被翻页打断。', 'loading · finished · error · disabled · distance | load(done), retry(done)', '<apple-infinite-scroll :finished="finished" @load="async done => { await loadMore(); done() }">内容</apple-infinite-scroll>'),
+  item('AppleButton', 'variant · size · icon · iconOnly · label · loading · disabled · ripple · motion', '<apple-button variant="primary" :loading="saving" @click="save">继续</apple-button>'),
+  item('AppleLink', 'href · external · disabled | slot: default', '<apple-link href="https://www.apple.com.cn/" external>Apple 官网</apple-link>'),
+  item('AppleSearch', 'v-model(string) · label · placeholder · disabled | search(query)', '<apple-search v-model="query" label="搜索设置" placeholder="搜索设置" @search="search" />'),
+  item('AppleProvider', 'theme · motion(auto|full|reduced|none) | slot: default', '<apple-provider theme="dark" motion="auto">\n  <apple-button>继续</apple-button>\n</apple-provider>'),
+  item('AppleOverlayHost', '由 AppleProvider 自动包含；无公开 props、事件或插槽', '<apple-overlay-host />'),
+  item('AppleContainer', 'width(number|string) | slot: default', '<apple-container :width="960">\n  <apple-stack>内容</apple-stack>\n</apple-container>'),
+  item('AppleStack', 'direction(row|column) · gap · align · wrap | slot: default', '<apple-stack direction="row" :gap="16" align="center">\n  <apple-button>继续</apple-button>\n  <apple-button variant="secondary">取消</apple-button>\n</apple-stack>'),
+  item('AppleGrid', 'min(number) · gap(number) | slot: default', '<apple-grid :min="240" :gap="20">\n  <div v-for="item in items" :key="item.id">{{ item.label }}</div>\n</apple-grid>'),
+  item('AppleCard', 'title · subtitle · text · image · zoom · shadow · motion | slots: media, title, icon, actions', '<apple-card title="AirPods Max" subtitle="声音，出类拔萃。" motion="auto">\n  <template #actions><apple-button>进一步了解</apple-button></template>\n</apple-card>'),
+  item('AppleImage', 'gallery(object|array) · index · preview · carousel · autoplay · interval(5000ms) · disabled · label · galleryLayout(compact|tiled|tiled-wrap) · v-model:index | item({item,index,active}) · squared · aspectRatio · fit', '<apple-image :gallery="images" gallery-layout="compact" :index="0" />'),
+  item('AppleAvatar', 'src · name · size', '<apple-avatar name="林初" :size="48" />'),
+  item('AppleAvatarGroup', 'items[{name,src,value}] · max · size · label | slot: default', '<apple-avatar-group :items="members" :max="4" :size="40" label="项目成员" />'),
+  item('AppleBadge', 'value · max · dot · tone', '<apple-badge :value="8"><apple-button>消息</apple-button></apple-badge>'),
+  item('AppleTag', 'tone · closable | close', '<apple-tag tone="success" closable @close="remove">已完成</apple-tag>'),
+  item('AppleDivider', 'label · vertical', '<apple-divider label="更多选择" />'),
+  item('AppleInput', 'v-model · label · placeholder · type · error · hint · clearable · disabled', '<apple-input v-model="name" label="姓名" placeholder="怎么称呼你" clearable />'),
+  item('AppleTextarea', 'v-model · label · rows · maxlength · error · hint', '<apple-textarea v-model="bio" label="个人简介" :maxlength="160" />'),
+  item('AppleSelect', 'v-model · label · items[{label,value,disabled}] · placeholder · disabled', '<apple-select v-model="city" label="所在城市" :items="cities" />'),
+  item('AppleAutocomplete', 'v-model · label · items · placeholder · disabled', '<apple-autocomplete v-model="device" label="搜索设备" :items="devices" />'),
+  item('AppleCheckbox', 'v-model · label · disabled · indeterminate', '<apple-checkbox v-model="agreed" label="我已阅读并同意条款" />'),
+  item('AppleRadioGroup', 'v-model · label · items · disabled', '<apple-radio-group v-model="delivery" label="配送方式" :items="methods" />'),
+  item('AppleSwitch', 'v-model · label · disabled', '<apple-switch v-model="notifications" label="接收通知" />'),
+  item('AppleSlider', 'v-model · label · min · max · step · disabled', '<apple-slider v-model="volume" label="音量" :min="0" :max="100" />'),
+  item('AppleStepper', 'v-model · label · min · max · step', '<apple-stepper v-model="quantity" label="数量" :min="1" :max="10" />'),
+  item('AppleSegmentedControl', 'v-model · items · label · disabled', '<apple-segmented-control v-model="period" :items="periods" label="统计周期" />'),
+  item('AppleDatePicker', 'v-model · format · granularity · label · min · max · required · disabled | change(value)', '<apple-date-picker v-model="date" label="到店日期" format="YYYY/MM/DD HH:mm" />'),
+  item('AppleColorPicker', 'v-model(#hex) · label · disabled', '<apple-color-picker v-model="color" label="强调色" />'),
+  item('AppleUpload', 'v-model(File[]) · label · accept · multiple · maxSize(bytes) · maxFiles · capture | reject([{file,reason}]), remove(file)', '<apple-upload v-model="files" label="上传图片" accept="image/*" multiple :max-files="5" />'),
+  item('AppleOtpInput', 'v-model · length · label | complete', '<apple-otp-input v-model="code" :length="6" label="验证码" />'),
+  item('AppleCascader', 'v-model(value[]) · items[{label,value,children}] · label', '<apple-cascader v-model="region" label="所在地区" :items="regions" />'),
+  item('AppleRate', 'v-model · max · label · readonly · disabled', '<apple-rate v-model="rating" label="体验评分" />'),
+  item('AppleForm', 'validator(FormData) => boolean|string|Promise · loading · disabled | submit(FormData), invalid, reset | methods: validate(), submit(), reset()', '<apple-form :validator="validate" @submit="submit">\n  <apple-input v-model="name" name="name" label="姓名" required />\n  <apple-button type="submit">提交</apple-button>\n</apple-form>'),
+  item('AppleFormField', 'label · for · error · hint · required · disabled | default({id,disabled,required,aria-invalid,aria-describedby})', '<apple-form-field label="个人网站" :error="error">\n  <template #default="field">\n    <input v-bind="field" v-model="website" class="apple-control" type="url" />\n  </template>\n</apple-form-field>'),
+  item('AppleNavibar', 'v-model · items · brand · brandHref · fixed · breakpoint=640 · hideOnPreview · label · motion | change(value,item), toggle(open) | slots: brand, item, actions', '<apple-navibar v-model="page" brand="Apptify" :items="pages" />'),
+  item('AppleAside', 'hideOnPreview=true · motion | slot: default | 布局由调用方提供', '<apple-aside :hide-on-preview="false">\n  <apple-list :items="items" />\n</apple-aside>'),
+  item('AppleTabs', 'v-model · items[{label,value,disabled}] | slot: default({value})', '<apple-tabs v-model="tab" :items="tabs">\n  <template #default="{ value }">{{ value }}</template>\n</apple-tabs>'),
+  item('AppleTabBar', 'v-model · items · label · disabled · motion | slot: default({value})', '<apple-tab-bar v-model="tab" :items="tabs">\n  <template #default="{value}">{{ value }}</template>\n</apple-tab-bar>'),
+  item('AppleBreadcrumbs', 'items[{label,value,href,disabled}] · label', '<apple-breadcrumbs :items="[{label:\'首页\',value:\'home\',href:\'/\'},{label:\'设置\',value:\'settings\'}]" />'),
+  item('ApplePagination', 'v-model(page) · total · pageSize', '<apple-pagination v-model="page" :total="120" :page-size="10" />'),
+  item('AppleSteps', 'v-model(index) · items[{label,value,description,disabled}] · clickable · disabled', '<apple-steps v-model="step" :items="steps" clickable />'),
+  item('AppleAccordion', 'v-model · items[{label,value,content}] · multiple', '<apple-accordion :items="questions" />'),
+  item('AppleTable', 'columns[{key,label,sortable,width,minWidth,maxWidth}] · rows · rowKey · selectable · pageSize · virtual · height · rowHeight · overscan · resizable | update:selected, column-resize', '<apple-table :columns="columns" :rows="rows" row-key="id" virtual :height="360" :row-height="48" />'),
+  item('AppleTree', 'v-model · items[{label,value,children}] | select', '<apple-tree v-model="selected" :items="folders" />'),
+  item('AppleList', 'v-model · items[{label,value,description,href,disabled}] · selectable | select(item)', '<apple-list v-model="setting" :items="settings" selectable @select="openSetting" />'),
+  item('AppleTimeline', 'items[{label,value,description,time,tone}] · orientation(horizontal|vertical) · label', '<apple-timeline :items="events" orientation="horizontal" />'),
+  item('AppleStatistic', 'label · value · prefix · suffix · precision', '<apple-statistic label="本月访问" :value="12840" suffix="次" />'),
+  item('AppleDialog', 'v-model · title · persistent · confirmText · cancelText | confirm, cancel', '<apple-dialog v-model="open" title="保存更改？" @confirm="save">\n  你的更改会同步到所有设备。\n</apple-dialog>'),
+  item('AppleDrawer', 'v-model · title · placement(left|right|bottom) · width · persistent · loading', '<apple-drawer v-model="open" title="偏好设置" placement="right">内容</apple-drawer>'),
+  item('AppleSheet', 'v-model · title · persistent', '<apple-sheet v-model="open" title="分享">内容</apple-sheet>'),
+  item('AppleSnackbar', 'v-model · message · title · tone · duration(ms) · action · closable | close, action', "const notice = apple.notify('已保存', { tone: 'success', duration: 4000 })"),
+  item('AppleAlert', 'v-model · title · message · tone · closable | close', '<apple-alert v-model="visible" title="一切已就绪" tone="success" closable>内容已同步。</apple-alert>'),
+  item('AppleProgress', 'modelValue · max · label · indeterminate · showValue · tone', '<apple-progress :model-value="68" label="正在上传" show-value />'),
+  item('AppleSpinner', 'size · label', '<apple-spinner label="正在加载" />'),
+  item('AppleSkeleton', 'variant(text|avatar|card|list|table|image) · lines · rows · columns · avatar · width · height · animated · label · motion', '<apple-skeleton variant="list" :rows="3" avatar />'),
+  item('AppleEmpty', 'title · description | slot: default', '<apple-empty title="还没有收藏" description="喜欢的内容，会出现在这里。" />'),
+  item('ApplePopover', 'v-model · label · placement · align · width · disabled | activator({props,open,close,isOpen}), default({close})', '<apple-popover label="更多选项">\n  <template #activator><apple-button variant="secondary">更多</apple-button></template>\n  <apple-switch v-model="sync" label="自动同步" />\n</apple-popover>'),
+  item('AppleTooltip', 'text | slot: default', '<apple-tooltip text="添加到收藏"><apple-button>收藏</apple-button></apple-tooltip>'),
+  item('AppleMenu', 'v-model · items[{label,value,disabled,danger,icon,description}] · label · selected | select(value,item)', '<apple-menu :items="actions" label="更多操作" @select="onAction" />'),
+  item('AppleActionSheet', 'v-model · title · message · items[{label,value,disabled,danger}] · cancelText | default slot {select(item),close(value)} | select(value,item)', '<apple-action-sheet v-model="open" title="选择操作" @select="onAction">\n  <template #default="{ select }">\n    <apple-button @click="select({ label: \'收藏\', value: \'favorite\' })">加入收藏</apple-button>\n  </template>\n</apple-action-sheet>'),
+  item('ApplePullRefresh', 'v-model(refreshing) · threshold · label · disabled | refresh(done)', '<apple-pull-refresh @refresh="async done => { await reload(); done() }">内容</apple-pull-refresh>'),
+  item('AppleBackTop', 'threshold · label', '<apple-back-top :threshold="400" />'),
+  item('AppleFloatingGroup', 'backTop · threshold · target · label · motion | default', '<apple-floating-group :threshold="300" />'),
+  item('AppleSpeedDial', 'backTop · threshold · target · label', '<!-- App.vue -->\n<apple-speed-dial />'),
+  item('AppleSpeedDialItem', 'label · icon · visible · disabled · variant | click', '<apple-speed-dial-item label="新增" :icon="Plus" @click="create" />'),
+  item('AppleAutoSize', 'axis(height|both) · motion | default', '<apple-auto-size><div v-if="expanded">详情内容</div></apple-auto-size>'),
+  item('AppleTransition', 'name(page|slide-x|slide-y|fade) · mode · appear · motion | default', '<apple-transition name="page"><router-view /></apple-transition>'),
+  item('AppleInfiniteScroll', 'loading · finished · error · disabled · distance | load(done), retry(done)', '<apple-infinite-scroll :finished="finished" @load="async done => { await loadMore(); done() }">内容</apple-infinite-scroll>'),
+  item('AppleScrollBar', 'target · axis(both|horizontal|vertical) · label | interaction · refresh()', '<apple-scroll-bar target="#scroll-area" />'),
 ]
 export const groups = ['全部组件', '基础', '表单', '导航', '数据展示', '反馈', '移动交互']
 

package/templates/playground/src/components/ComponentIndex.vue

@@ -1,43 +1,39 @@
 <template>
   <nav class="component-index" aria-label="组件定位">
-    <AppleTree :items="treeItems" :model-value="activeId || activeGroup" :expanded="expandedGroups" label="组件目录树" @update:expanded="expanded = $event" @select="navigate" />
-    <p v-if="!treeItems.length" class="index-empty" role="status">未找到组件，请尝试其他关键词。</p>
+    <AppleTree :items="treeItems" :model-value="activeId || activeGroup" :expanded="expanded" label="组件目录树" @update:expanded="expanded = $event" @select="navigate" />
   </nav>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { scrollToWithMotion } from 'apptify'
 import { AppleTree } from 'apptify'
 import type { AppleTreeItem, AppleValue } from 'apptify'
 import { sections, componentId } from '../catalog'
 
-const props = defineProps<{ activeGroup: string; activeId: string; search?: string }>()
+defineProps<{ activeGroup: string; activeId: string }>()
 const emit = defineEmits<{ navigate: [] }>()
 const router = useRouter()
 const route = useRoute()
 const expanded = defineModel<AppleValue[]>('expanded', { default: () => sections.map(section => section.id) })
-const query = computed(() => props.search?.trim().toLocaleLowerCase() ?? '')
-const treeItems = computed<AppleTreeItem[]>(() => sections.flatMap(section => {
-  const groupMatches = section.label.toLocaleLowerCase().includes(query.value)
-  const items = section.items.filter(item => groupMatches || `${item.label} ${item.name} ${componentId(item.name)} ${item.description}`.toLocaleLowerCase().includes(query.value))
-  return items.length ? [{ label: section.label, value: section.id, children: items.map(item => ({ label: item.label, value: componentId(item.name) })) }] : []
-}))
-const expandedGroups = computed(() => query.value ? treeItems.value.map(item => item.value) : expanded.value)
+const treeItems: AppleTreeItem[] = sections.map(section => ({ label: section.label, value: section.id, children: section.items.map(item => ({ label: item.label, value: componentId(item.name), description: `${item.name} ${item.description}` })) }))
 function navigate(item: AppleTreeItem) {
   if (item.children?.length) return
   const hash = `#${item.value}`
   if (route.hash === hash) {
     const target = document.getElementById(String(item.value))
-    if (target) window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 96, behavior: 'instant' })
+    if (target) {
+      const motion = document.querySelector('#app > .apple-provider')?.getAttribute('data-apple-motion')
+      const top = () => Math.min(target.getBoundingClientRect().top + window.scrollY - 96, Math.max(0, document.documentElement.scrollHeight - window.innerHeight))
+      scrollToWithMotion(window, top, motion === 'full')
+    }
   } else void router.push(`/components${hash}`)
   emit('navigate')
 }
 </script>
 
 <style scoped>
-.component-index { min-width: 0; }
+.component-index { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
 .component-index :deep(.apple-tree__row) { min-height: 34px; }
 .component-index :deep(.apple-tree__row > span:last-child) { min-width: 0; overflow-wrap: anywhere; }
-.index-empty { margin: 12px 8px; font-size: 12px; line-height: 1.7; color: var(--apple-secondary); }
 </style>

package/templates/playground/src/components/MasonryFeed.vue

@@ -0,0 +1,52 @@
+<template>
+  <div ref="root" class="masonry-feed"><slot /></div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const emit = defineEmits<{ layout: [] }>()
+const root = ref<HTMLElement>()
+let observer: ResizeObserver | undefined
+let frame = 0
+const gap = 20
+
+function layout() {
+  frame = 0
+  const container = root.value
+  if (!container || !container.clientWidth) return
+  const cards = Array.from(container.children) as HTMLElement[]
+  const columns = Math.max(1, Math.floor((container.clientWidth + gap) / (400 + gap)))
+  const width = (container.clientWidth - gap * (columns - 1)) / columns
+  const heights = Array<number>(columns).fill(0)
+  for (const card of cards) card.style.width = `${width}px`
+  for (const card of cards) {
+    const column = heights.indexOf(Math.min(...heights))
+    card.style.position = 'absolute'
+    card.style.left = `${column * (width + gap)}px`
+    card.style.top = `${heights[column]}px`
+    heights[column] += card.offsetHeight + gap
+  }
+  container.style.height = `${Math.max(...heights)}px`
+  emit('layout')
+}
+
+function scheduleLayout() {
+  if (!frame) frame = requestAnimationFrame(layout)
+}
+
+onMounted(() => {
+  observer = new ResizeObserver(scheduleLayout)
+  observer.observe(root.value!)
+  for (const card of root.value!.children) observer.observe(card)
+  layout()
+})
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  cancelAnimationFrame(frame)
+})
+</script>
+
+<style scoped>
+.masonry-feed { position: relative; }
+</style>

package/templates/playground/src/components/UserMenu.vue

@@ -101,7 +101,7 @@ function showProfile() {
 .user-popup.apple-popover { border-radius: 24px; background: var(--apple-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
 .user-popup .user-menu-list > .apple-link > .apple-link__content { width: 100%; justify-content: flex-start; gap: 11px; }
 .user-popup .user-menu-list > .apple-link { min-height: 44px; font-weight: 400; line-height: inherit; }
-.user-popup .user-menu-list > .apple-link:hover:where(:not([data-apple-touch] *)):not(:disabled) { background: var(--apple-hover); }
+.user-popup .user-menu-list > .apple-link:hover:not(:disabled) { background: var(--apple-hover); }
 .user-popup .user-menu-list > .apple-link:active:not(:disabled) { background: var(--apple-pressed); }
 .user-trigger.user-account-trigger { width: 44px; height: 44px; border: 0; background: transparent; }
 .user-trigger.user-account-trigger:focus-visible { outline: 3px solid var(--apple-accent); outline-offset: 2px; }