apptify 0.6.2 → 0.7.1

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

@@ -6,9 +6,8 @@
       <aside class="directory-index sidebar" aria-label="组件目录">
         <header class="directory-header">
           <span>组件目录</span>
-          <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
         </header>
-        <div class="directory-tree"><ComponentIndex v-model:expanded="expandedGroups" :active-group="activeGroup" :active-id="activeId" :search="directorySearch" /></div>
+        <div class="directory-tree"><ComponentIndex v-model:expanded="expandedGroups" :active-group="activeGroup" :active-id="activeId" /></div>
       </aside>
       <div class="components-content">
         <div class="feed-toolbar">
@@ -21,54 +20,40 @@
         <div ref="feed" class="component-feed">
           <section v-for="(section, index) in sections" :id="section.id" :key="section.id" class="feed-group feed-anchor" :data-group="section.id" :aria-labelledby="`${section.id}-heading`">
             <header class="feed-group-heading"><span>0{{ index + 1 }}</span><h2 :id="`${section.id}-heading`">{{ section.label }}</h2><small>{{ section.items.length }} 个组件</small></header>
-            <div class="feed-cards">
+            <MasonryFeed class="feed-cards" @layout="schedulePosition">
             <apple-card v-for="item in section.items" :id="componentId(item.name)" :key="item.name" class="component-card feed-anchor" :data-group="section.id" :aria-labelledby="`${componentId(item.name)}-heading`">
               <header class="component-card-heading"><div><h3 :id="`${componentId(item.name)}-heading`"><router-link :to="`#${componentId(item.name)}`">{{ item.label }}<Hash :size="14" /></router-link></h3><p>{{ item.description }}</p></div><code>{{ componentId(item.name) }}</code></header>
               <section class="detail-preview" :class="{ 'mobile-preview': previewMode === 'mobile' }" :aria-label="`${item.label}预览`"><ComponentDemo :name="item.name" @navigate="navigateGroup" /></section>
-              <ComponentDocumentLink v-if="documentPaths[item.name]" :href="documentPaths[item.name]" label="代码与 API" />
-              <apple-accordion v-else class="component-source" :items="sourceSections">
-                <template #item>
-                  <div class="code-view"><div class="code-toolbar"><span>使用示例</span><apple-link @click="copy(item.code)">复制代码</apple-link></div><pre><code>{{ item.code }}</code></pre><h4>接口</h4><p class="api-line">{{ item.api }}</p></div>
-                </template>
-              </apple-accordion>
+              <ComponentDocumentLink :href="documentPaths[item.name]" label="代码与 API" />
             </apple-card>
-            </div>
+            </MasonryFeed>
           </section>
         </div>
       </div>
     </div>
   </apple-container>
   </main>
-  <DirectoryDialog v-model="mobileIndex" title="组件目录">
-    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
-    <ComponentIndex v-model:expanded="expandedGroups" :active-group="activeGroup" :active-id="activeId" :search="directorySearch" @navigate="mobileIndex = false" />
-  </DirectoryDialog>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Hash, Monitor, Smartphone } from 'lucide-vue-next'
-import { useApple } from 'apptify'
 import { catalog, sections, componentId } from '../catalog'
 import ComponentDemo from '../ComponentDemo.vue'
 import ComponentIndex from '../components/ComponentIndex.vue'
-import DirectoryDialog from '../components/DirectoryDialog.vue'
+import MasonryFeed from '../components/MasonryFeed.vue'
 import ComponentDocumentLink from '../editor/ComponentDocumentLink.vue'
 import { componentDocuments, componentDocumentPath } from '../editor/documents'
 
 const documentPaths = Object.fromEntries(Object.entries(componentDocuments).map(([slug, document]) => [document.name, componentDocumentPath(slug)]))
 const route = useRoute()
 const router = useRouter()
-const apple = useApple()
 const feed = ref<HTMLElement>()
 const activeGroup = ref(sections[0].id)
 const activeId = ref('')
 const previewMode = ref('desktop')
-const mobileIndex = ref(false)
-const directorySearch = ref('')
 const expandedGroups = ref(sections.map(section => section.id))
-const sourceSections = [{ label: '代码与 API', value: 'source' }]
 let anchors: HTMLElement[] = []
 let frame = 0
 let observer: ResizeObserver | undefined
@@ -92,14 +77,10 @@ function navigateGroup(label: string) {
   const section = sections.find(section => section.label === label)
   void router.push(section ? `/components#${section.id}` : '/components')
 }
-async function copy(value: string) {
-  try { await navigator.clipboard.writeText(value); apple.notify('已复制', { tone: 'success' }) }
-  catch { apple.notify('无法访问剪贴板，请手动选择代码复制', { tone: 'warning' }) }
-}
-watch(() => route.hash, () => { mobileIndex.value = false; schedulePosition() })
+watch(() => route.hash, schedulePosition)
 watch(activeId, async () => {
   await nextTick()
-  const sidebar = document.querySelector<HTMLElement>('.directory-tree')
+  const sidebar = document.querySelector<HTMLElement>('.directory-tree .apple-tree-scroll')
   const current = sidebar?.querySelector<HTMLElement>('.apple-tree__row.is-selected')
   if (!sidebar || !current) return
   const item = current.getBoundingClientRect(), bounds = sidebar.getBoundingClientRect()
@@ -126,23 +107,12 @@ onBeforeUnmount(() => {
 .directory-index { display: flex; flex-direction: column; overflow: hidden; }
 .directory-header { flex-shrink: 0; }
 .directory-header > span { color: var(--apple-secondary); font-size: 12px; display: block; margin: 0 0 12px 8px; }
-.directory-tree { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.directory-tree { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
 @media (max-width: 900px) { .directory-index { display: none; } }
-.directory-search { min-width: 0; margin: 0 4px 16px; }
-.directory-search :deep(.apple-field__label) { font-size: 11px; }
-.directory-search :deep(input) { min-width: 0; font-size: 12px; }
 .components-page > * { max-width: none; }
-.feed-cards { column-width: 400px; column-gap: 20px; }
+.feed-anchor { scroll-margin-top: 96px; }
 .feed-group-heading { padding-bottom: 20px; }
-.component-card { display: inline-block; vertical-align: top; width: 100%; break-inside: avoid; margin-bottom: 20px; padding: 0; }
+.component-card { width: 100%; padding: 0; }
 .component-card :deep(> .apple-card__body) { padding: 0; border-radius: inherit; }
-.component-card :deep(> .apple-card__body > .documentation-entry),
-.component-card :deep(> .apple-card__body > .component-source) { border-radius: 0 0 18px 18px; overflow: hidden; }
-.component-source :deep(.apple-accordion__item) { border: 0; }
-.component-source :deep(.apple-accordion__item > h3) { font-size: 11px; font-weight: 400; }
-.component-source :deep(.apple-accordion__item > h3 > button) { min-height: 44px; gap: 8px; padding: 13px 28px; color: var(--apple-secondary); }
-.component-source :deep(.apple-accordion__content) { padding: 0; }
-@media (max-width: 800px) {
-  .component-source :deep(.apple-accordion__item > h3 > button) { padding-inline: 18px; }
-}
+.component-card :deep(> .apple-card__body > .documentation-entry) { border-radius: 0 0 18px 18px; overflow: hidden; }
 </style>

package/templates/playground/src/views/index.vue

@@ -20,7 +20,7 @@
             <apple-card class="specimen"><div class="specimen-caption"><span>02 / 控制</span></div><h2>点到，即止。</h2><div class="button-specimens"><apple-button :icon="arrowIcon" @click="$apple.notify('操作已完成',{tone:'success'})">继续探索</apple-button><apple-button variant="secondary" @click="$apple.notify('已加入收藏')">加入收藏</apple-button><apple-button variant="outline" @click="$router.push('/components#apple-button')">了解更多</apple-button><div class="icon-button-row"><apple-button variant="secondary" :icon="plusIcon" icon-only label="添加" @click="$apple.notify('已添加')" /><apple-button :variant="liked?'primary':'secondary'" :icon="heartIcon" icon-only :label="liked ? '取消收藏' : '收藏'" :aria-pressed="liked" @click="liked=!liked" /><apple-button variant="secondary" :icon="downloadIcon" icon-only label="浏览组件示例" @click="$router.push('/components')" /></div></div><div class="specimen-foot"><code>apple-button</code><span>5 种样式</span></div></apple-card>
             <apple-card class="specimen"><div class="specimen-caption"><span>03 / 偏好</span></div><h2>恰好，是你的。</h2><div class="preference-demo"><apple-segmented-control v-model="period" :items="periods" label="统计周期" /><div class="setting-line"><div><strong>消息通知</strong><small>不错过重要的事</small></div><apple-switch v-model="notices" aria-label="消息通知" /></div><div class="setting-line"><div><strong>自动同步</strong><small>在所有设备上保持一致</small></div><apple-switch v-model="sync" aria-label="自动同步" /></div><apple-slider v-model="volume" label="音量" /><div class="check-row"><apple-checkbox v-model="agreed" label="记住我的偏好" /></div></div></apple-card>
             <apple-card class="specimen form-specimen"><div class="specimen-caption"><span>04 / 输入</span></div><h2>开始一段对话。</h2><apple-form @submit="$apple.notify(`你好，${name || '新朋友'}！`,{tone:'success'})"><apple-input v-model="name" label="你的名字" placeholder="怎么称呼你" autocomplete="name" clearable required /><apple-input v-model="email" label="电子邮箱" type="email" placeholder="name@example.com" autocomplete="email" required /><apple-button type="submit">加入我们<ArrowRight :size="15" /></apple-button></apple-form></apple-card>
-            <apple-card class="specimen media-specimen"><div class="specimen-caption"><span>05 / 媒体</span></div><h2>靠近一点，再一点。</h2><apple-image :gallery="[{ src: '/images/lake.jpg', alt: '山间湖泊和木屋' }, { src: '/images/airpods-max-orange.jpg', alt: '橙色耳机' }]" aspect-ratio="4/3" /><div class="specimen-foot"><code>apple-image</code><span>山间的一刻</span></div></apple-card>
+            <apple-card class="specimen media-specimen"><div class="specimen-caption"><span>05 / 媒体</span></div><h2>靠近一点，再一点。</h2><apple-image :gallery="[{ src: imageUrl('lake.jpg'), alt: '山间湖泊和木屋' }, { src: imageUrl('airpods-max-orange.jpg'), alt: '橙色耳机' }]" aspect-ratio="4/3" /><div class="specimen-foot"><code>apple-image</code><span>山间的一刻</span></div></apple-card>
             <apple-card class="specimen feedback-specimen"><div class="specimen-caption"><span>06 / 反馈</span></div><h2>每一步，都有回应。</h2><apple-alert title="所有更改已保存" tone="success" /><div class="progress-demo"><div><span>正在同步</span><span>{{progress}}%</span></div><apple-progress :model-value="progress" label="正在同步" /></div><apple-avatar-group :items="[{name:'林初'},{name:'Alex'},{name:'Taylor'},{name:'Quinn'}]" /><div class="feedback-actions"><apple-button variant="secondary" size="small" @click="openDemoDialog">打开对话框</apple-button><apple-link as="button" @click="$apple.notify('所有更改已保存',{tone:'success'});progress=Math.min(100,progress+10)">显示提示</apple-link></div></apple-card>
           </div>
     </section>
@@ -34,6 +34,7 @@
 </template>
 
 <script lang="ts">
+import { imageUrl } from '../images'
 import { defineComponent, markRaw } from 'vue'
 import { ArrowRight, ArrowUpRight, Download, Heart, Plus } from 'lucide-vue-next'
 import { catalog } from '../catalog'
@@ -57,6 +58,7 @@ export default defineComponent({
     },
   },
   methods: {
+    imageUrl,
     openDemoDialog() { this.$apple.dialog({title:'一切，就从这里开始。',message:'试试这些组件，找到适合你的交互。',confirmText:'好的',cancelText:'稍后'}) },
   },
 })

package/templates/playground/src/views/settings.vue

@@ -38,7 +38,7 @@
         <div class="settings-section-heading"><div><h2 id="ripple-heading">点击波纹</h2><p>让每一次轻点，都有细微的回应。</p></div></div>
         <apple-switch :model-value="rippleAllowed && apple.ripple.value.enabled" :disabled="!rippleAllowed" label="点击波纹" :hint="rippleAllowed ? '减弱动效时自动关闭，可手动开启；偏好保存在这台设备上。' : '关闭动效时，无法开启点击波纹。'" @update:model-value="apple.ripple.value.set" />
         <div ref="rippleDemo" class="effect-demo ripple-sample" aria-label="波纹自动演示" @pointerenter="ripplePaused = true" @pointerleave="ripplePaused = false" @focusin="ripplePaused = true" @focusout="ripplePaused = false">
-          <apple-button variant="outline" @click="rippleDemoClicks++">试试点击波纹</apple-button>
+          <apple-list :items="rippleDemoItems" selectable label="点击波纹演示" @select="rippleDemoClicks++" />
           <span class="ripple-click-count">已点击 {{ rippleDemoClicks }} 次</span>
         </div>
         <div class="settings-card-foot">{{ rippleAllowed && apple.ripple.value.enabled ? '自动点击 · 也可以手动试一试' : '点击波纹已关闭 · 静态展示' }}</div>
@@ -93,6 +93,7 @@ const rippleDemo = ref<HTMLElement>()
 const motionDemoOpened = ref<string[]>([])
 const motionDemoItems = [{ label: '预览效果', value: 'preview', content: '折叠面板与所有组件的动画速度、数量都会跟随你选择的动效强度。' }]
 const rippleDemoClicks = ref(0)
+const rippleDemoItems = [{ label: '试试点击波纹', value: 'ripple-preview' }]
 const motionPaused = ref(false)
 const ripplePaused = ref(false)
 let demoTimer: number | undefined
@@ -193,13 +194,15 @@ function reset() {
 .motion-sample :deep(.apple-accordion h3) { font-size: 14px; }
 .motion-sample :deep(.apple-accordion__content) { font-size: 12px; }
 .ripple-sample { flex: 1; max-height: 180px; margin-block: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 20px; }
+.ripple-sample :deep(.apple-list-size) { width: 100%; border-radius: 12px; background: var(--apple-surface); }
+.ripple-sample :deep(.apple-list__item) { padding-inline: 16px; }
 .ripple-click-count { color: var(--apple-secondary); font-size: 11px; }
 .glass-sample { min-height: 156px; display: grid; place-items: center; margin: 0 0 20px; isolation: isolate; }
 .glass-sample-colors { position: absolute; inset: -40px; display: flex; align-items: center; justify-content: center; gap: 20px; animation: sample-glass 6s ease-in-out infinite; }
 .glass-sample-colors span { width: 95px; height: 95px; flex-shrink: 0; border-radius: 28px; background: #82b6ef; transform: rotate(-20deg); }
 .glass-sample-colors span:nth-child(2) { background: #e9aa99; width: 72px; height: 120px; transform: rotate(25deg); }
 .glass-sample-colors span:nth-child(3) { background: #ada1e2; border-radius: 50%; }
-.glass-sample-panel { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 12px; width: 168px; padding: 18px; border: 1px solid var(--apple-border); border-radius: 12px; background: rgb(var(--apple-glass-rgb, 255 255 255) / var(--apple-glass-opacity, .3)); backdrop-filter: blur(var(--apple-glass-blur, 12px)) saturate(2); -webkit-backdrop-filter: blur(var(--apple-glass-blur, 12px)) saturate(2); font-size: 12px; }
+.glass-sample-panel { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 12px; width: 168px; padding: 18px; border: 1px solid var(--apple-border); border-radius: 12px; background: rgb(var(--apple-glass-rgb, 255 255 255) / var(--apple-glass-opacity, .5)); backdrop-filter: blur(var(--apple-glass-blur, 12px)) saturate(2); -webkit-backdrop-filter: blur(var(--apple-glass-blur, 12px)) saturate(2); font-size: 12px; }
 .glass-sample-panel i { grid-column: 1 / -1; height: 5px; width: 100%; border-radius: 4px; background: currentColor; opacity: .15; }
 .glass-sample-panel i:last-child { width: 65%; }
 @keyframes sample-glass { 0%, 100% { transform: translateX(-32px) rotate(-8deg); } 50% { transform: translateX(32px) rotate(8deg); } }

package/templates/playground/tooling/playground-editor.mjs

@@ -1,7 +1,7 @@
 import { build } from 'esbuild'
 import { readFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
-import { resolve } from 'node:path'
+import { resolve, sep } from 'node:path'
 import { existsSync } from 'node:fs'
 import { createHash } from 'node:crypto'
 import { parse, compileScript, compileStyle } from 'vue/compiler-sfc'
@@ -74,8 +74,9 @@ export default function playgroundEditor({ appDir = 'playground', libraryDir = '
       return { code, map: null }
     },
     async handleHotUpdate(ctx) {
-      const source = libraryDir ? resolve(config.root, libraryDir) + '/' : undefined
-      if (!(source && ctx.file.startsWith(source)) && ctx.file !== resolve(config.root, appDir, 'editor/runtime.ts')) return
+      const source = libraryDir ? resolve(config.root, libraryDir) + sep : undefined
+      const changedFile = resolve(ctx.file)
+      if (!(source && changedFile.startsWith(source)) && changedFile !== resolve(config.root, appDir, 'editor/runtime.ts')) return
       // Preview resources are an in-memory bundle, separate from Vite's normal CSS HMR.
       // Rebuild it when library files change, then recreate the preview realm.
       await rebuild()

package/tooling/playground-editor.mjs

@@ -1,7 +1,7 @@
 import { build } from 'esbuild'
 import { readFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
-import { resolve } from 'node:path'
+import { resolve, sep } from 'node:path'
 import { existsSync } from 'node:fs'
 import { createHash } from 'node:crypto'
 import { parse, compileScript, compileStyle } from 'vue/compiler-sfc'
@@ -74,8 +74,9 @@ export default function playgroundEditor({ appDir = 'playground', libraryDir = '
       return { code, map: null }
     },
     async handleHotUpdate(ctx) {
-      const source = libraryDir ? resolve(config.root, libraryDir) + '/' : undefined
-      if (!(source && ctx.file.startsWith(source)) && ctx.file !== resolve(config.root, appDir, 'editor/runtime.ts')) return
+      const source = libraryDir ? resolve(config.root, libraryDir) + sep : undefined
+      const changedFile = resolve(ctx.file)
+      if (!(source && changedFile.startsWith(source)) && changedFile !== resolve(config.root, appDir, 'editor/runtime.ts')) return
       // Preview resources are an in-memory bundle, separate from Vite's normal CSS HMR.
       // Rebuild it when library files change, then recreate the preview realm.
       await rebuild()

package/tooling/prepare-playground.mjs

@@ -50,7 +50,7 @@ async function adapt(directory) {
         source = source.replace('to="/" aria-label="Apptify 首页"', ':to="homePath" aria-label="Apptify 首页"')
         source = source.replace(navigationEnd, "].filter(item => router.getRoutes().some(page => page.path === item.href))\nconst homePath = navigation[0]?.href ?? '/'\n\nfunction navigate")
       }
-      if (path === join(output, 'src/views/[...all].vue')) {
+      if (['[...all].vue', '403.vue'].some(view => path === join(output, 'src/views', view))) {
         source = source.replace('to="/" custom', ':to="homePath" custom')
         source = source.replace('const router = useRouter()', "const router = useRouter()\nconst homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'")
         source = source.replace("else void router.push('/')", 'else void router.push(homePath)')
@@ -65,7 +65,7 @@ const manifest = {
   scripts: { dev: 'vite', typecheck: 'vue-tsc --noEmit', build: 'vue-tsc --noEmit && vite build', preview: 'vite preview --host 127.0.0.1' },
   dependencies: {
     apptify: '^' + library.version, vue: library.peerDependencies.vue,
-    'vue-router': library.devDependencies['vue-router'], vuetify: library.peerDependencies.vuetify,
+    'vue-router': library.devDependencies['vue-router'],
     'lucide-vue-next': library.dependencies['lucide-vue-next'],
   },
   devDependencies: Object.fromEntries(['@vitejs/plugin-vue', 'typescript', 'vite', 'vite-plugin-pages', 'vue-tsc', '@vue/repl', 'es-module-shims', 'esbuild', 'postcss'].map(name => [name, library.devDependencies[name]])),
@@ -92,7 +92,7 @@ await writeFile(join(output, 'gitignore'), 'node_modules/\ndist/\n.env.local\n')
 await writeFile(join(output, 'README.md'), [
   "# Apptify 应用模板",
   "",
-  "可编辑的 Vue 应用，包含导航、账号表单、外观设置、404 与组件示例。建议 Node.js 22 或 24 LTS。",
+  "可编辑的 Vue 应用，包含导航、账号表单、外观设置、403、404 与组件示例。建议 Node.js 22 或 24 LTS。",
   "",
   "```sh",
   "npm install",

package/tooling/test-playground-package.mjs

@@ -114,6 +114,14 @@ async function checkPage(baseURL, path, check) {
   assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), 'Page overflow: ' + path)
   await page.close()
 }
+async function checkTableHandbook(page) {
+  await expect(page.getByTestId('component-playground')).toHaveAttribute('data-component', 'AppleTable')
+  const frame = page.frameLocator('.vue-repl iframe')
+  await frame.getByRole('button', { name: '评分', exact: true }).click()
+  await expect(frame.locator('tbody tr').first()).toContainText('Alex')
+  await expect(frame.getByRole('textbox', { name: '事件记录内容' })).toHaveValue(/update:sortBy "score"/)
+  await expect(page.getByTestId('component-document').locator('iframe')).toHaveCount(0)
+}
 let server
 try {
   server = await serve()
@@ -138,6 +146,7 @@ try {
     await frame.locator('.apple-input-wrap input').first().fill('Template src preview')
     await expect(frame.locator('.apple-input-wrap input').first()).toHaveValue('Template src preview')
   })
+  await checkPage(server.url, '/component-docs/apple-table', checkTableHandbook)
   await checkPage(server.url, '/settings', async page => {
     await page.setViewportSize({ width: 320, height: 900 })
     await page.getByRole('button', { name: '深色', exact: true }).click()
@@ -174,6 +183,7 @@ try {
   run(['run', 'typecheck'], app)
   run(['run', 'build'], app)
   server = await serve()
+  await checkPage(server.url, '/component-docs/apple-table', checkTableHandbook)
   await checkPage(server.url, '/settings', async page => {
     assert.equal(await page.locator('.site-nav a.apple-navibar__item').count(), 1)
     assert.equal(await page.locator('.site-nav .brand').getAttribute('href'), '/settings')

package/dist/components/gallery-scrollbar.d.ts

@@ -1,46 +0,0 @@
-import { type PropType } from 'vue';
-export declare const GalleryScrollbar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<() => HTMLElement | undefined>;
-        required: true;
-    };
-    controls: {
-        type: StringConstructor;
-        required: true;
-    };
-}>, {}, {
-    box: HTMLElement | null;
-    width: number;
-    total: number;
-    left: number;
-    observer: ResizeObserver | null;
-    mutations: MutationObserver | null;
-    drag: {
-        id: number;
-        x: number;
-        left: number;
-        snap: string;
-    } | null;
-}, {
-    maximum(): number;
-    progress(): number;
-}, {
-    observe(): void;
-    measure(): void;
-    scroll(left: number): void;
-    start(event: PointerEvent): void;
-    move(event: PointerEvent): void;
-    end(event?: PointerEvent): void;
-    key(event: KeyboardEvent): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "interaction"[], "interaction", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<() => HTMLElement | undefined>;
-        required: true;
-    };
-    controls: {
-        type: StringConstructor;
-        required: true;
-    };
-}>> & Readonly<{
-    onInteraction?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/core/desktop-image-enter.d.ts

@@ -1,6 +0,0 @@
-import { type PhotoGeometry } from './image-geometry';
-export declare const interruptedPhotoEnter: WeakMap<HTMLElement, {
-    geometry: PhotoGeometry;
-    background: string;
-}>;
-export declare function enterDesktopPhoto(panel: HTMLElement, thumbnail: HTMLImageElement | null, motion: string, signal: AbortSignal): Promise<void>;

package/dist/core/desktop-image-return.d.ts

@@ -1 +0,0 @@
-export declare function returnDesktopPhoto(panel: HTMLElement, thumbnail: HTMLImageElement | null, motion: string, signal: AbortSignal): Promise<void>;

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

@@ -1,20 +0,0 @@
-<template>
-  <apple-floating-group label="页面导航">
-    <apple-button class="directory-toggle" variant="secondary" icon-only :icon="Menu" :label="`展开${title}`" aria-haspopup="dialog" :aria-expanded="modelValue" @click="modelValue = true" />
-  </apple-floating-group>
-  <apple-dialog v-model="modelValue" :title="title" :show-footer="false" width="480px">
-    <div class="directory-dialog-content"><slot /></div>
-  </apple-dialog>
-</template>
-
-<script setup lang="ts">
-import { Menu } from 'lucide-vue-next'
-defineProps<{ title: string }>()
-const modelValue = defineModel<boolean>({ default: false })
-</script>
-
-<style scoped>
-.directory-toggle { display: none; order: 1001; width: 44px; height: 44px; padding: 0; border-radius: 50%; box-shadow: var(--apple-shadow); }
-.directory-dialog-content { min-width: 0; }
-@media (max-width: 900px) { .directory-toggle { display: inline-flex; } }
-</style>