cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/ApiPayloadTree.vue

@@ -1,201 +0,0 @@
-<!--
-  接口调用 tab 的「返回数据」结构化折叠树（只读，对齐 Chrome 控制台对象检视器）。
-  - 复合类型（对象 / 数组）可点击折叠 / 展开，默认全部折叠，折叠时显示预览摘要。
-  - 基础类型按类型着色（复用 .jt__val--* 配色），字符串不带引号（DevTools 风格）。
-  - 折叠状态在整棵树内共享（openState），按节点路径独立记录。
--->
-<template>
-  <div class="apt" :class="{ 'apt--root': isRoot }">
-    <!-- 根级别：非复合值（如 payload 就是字符串）直接作为单个叶子展示 -->
-    <div v-if="!isComplex(value)" class="apt__leaf apt__leaf--root">
-      <span class="apt__caret apt__caret--leaf">▶</span>
-      <span v-if="rootKeyLabel !== null" class="jt__key">{{ rootKeyLabel }}</span>
-      <span v-if="rootKeyLabel !== null" class="jt__colon">:</span>
-      <span class="jt__val" :class="'jt__val--' + typeOf(value)">{{ format(value) }}</span>
-    </div>
-
-    <template v-else>
-      <!-- 日志场景（rootCollapsed）：根对象/数组先收成一行摘要、点击展开（Chrome 控制台风格），
-           避免每个实参默认逐键占行稀释日志密度；接口调用面板不传该 prop，行为不变 -->
-      <div
-        v-if="rootCollapsed && isRoot"
-        class="apt__branch apt__branch--root"
-        @click="rootOpen = !rootOpen"
-      >
-        <span class="apt__caret" :class="{ 'apt__caret--open': rootOpen }">▶</span>
-        <span class="jt__bracket">{{ isArrayRoot ? '[' : '{' }}</span>
-        <span v-if="!rootOpen" class="jt__preview">{{ preview(value) }}</span>
-        <template v-else>
-          <span class="jt__count">{{ rootCount }} {{ isArrayRoot ? '项' : '键' }}</span>
-        </template>
-        <span v-if="!rootOpen" class="jt__bracket">{{ isArrayRoot ? ']' : '}' }}</span>
-      </div>
-      <div
-        v-show="!(rootCollapsed && isRoot) || rootOpen"
-        class="apt__list"
-        :class="{ 'apt__list--nested': rootCollapsed && isRoot && rootOpen }"
-      >
-        <div v-for="(entry, i) in entries" :key="i" class="apt__node">
-          <!-- 复合类型且未超最大深度：可折叠分支 -->
-          <div v-if="canExpand(entry)" class="apt__branch" @click="toggle(entry)">
-            <span class="apt__caret" :class="{ 'apt__caret--open': isOpen(entry) }">▶</span>
-            <span v-if="entry.keyLabel !== null" class="jt__key">{{ entry.keyLabel }}</span>
-            <span class="jt__bracket">{{ entry.isArray ? '[' : '{' }}</span>
-            <template v-if="!isOpen(entry)">
-              <span class="jt__preview">{{ preview(entry.value) }}</span>
-              <span class="jt__bracket">{{ entry.isArray ? ']' : '}' }}</span>
-            </template>
-          </div>
-          <!-- 复合类型但已达最大深度：不再可展开，仅作摘要叶子 -->
-          <div v-else-if="isComplex(entry.value)" class="apt__leaf">
-            <span class="apt__caret apt__caret--leaf">▶</span>
-            <span v-if="entry.keyLabel !== null" class="jt__key">{{ entry.keyLabel }}</span>
-            <span v-if="entry.keyLabel !== null" class="jt__colon">:</span>
-            <span class="jt__val" :class="'jt__val--' + (entry.isArray ? 'array' : 'object')">{{ entry.count }} {{ entry.isArray ? '项' : '键' }}（已折叠）</span>
-          </div>
-          <!-- 基础类型：叶子 -->
-          <div v-else class="apt__leaf">
-            <span class="apt__caret apt__caret--leaf">▶</span>
-            <span v-if="entry.keyLabel !== null" class="jt__key">{{ entry.keyLabel }}</span>
-            <span v-if="entry.keyLabel !== null" class="jt__colon">:</span>
-            <span class="jt__val" :class="'jt__val--' + entry.type">{{ format(entry.value) }}</span>
-          </div>
-
-          <!-- 展开后的子层级 -->
-          <div v-if="isComplex(entry.value) && isOpen(entry)" class="apt__children">
-            <ApiPayloadTree
-              :value="entry.value"
-              :depth="depth + 1"
-              :path="entry.path"
-              :open-state="state"
-              :max-depth="maxDepth"
-            />
-            <div class="apt__close">
-              <span class="jt__bracket">{{ entry.isArray ? ']' : '}' }}</span>
-              <span class="jt__count">{{ entry.count }} {{ entry.isArray ? '项' : '键' }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-if="rootCollapsed && isRoot && rootOpen" class="apt__close">
-        <span class="jt__bracket">{{ isArrayRoot ? ']' : '}' }}</span>
-        <span class="jt__count">{{ rootCount }} {{ isArrayRoot ? '项' : '键' }}</span>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { reactive } from 'vue'
-
-export default {
-  name: 'ApiPayloadTree',
-  props: {
-    // 当前节点的值（对象 / 数组 / 基础类型均可）
-    value: { default: () => ({}) },
-    // 当前层级深度（根=0），用于根判断
-    depth: { type: Number, default: 0 },
-    // 从根到当前节点的路径（key 数组），用作折叠状态的唯一 key
-    path: { type: Array, default: () => [] },
-    // 跨整棵树共享的折叠状态对象：{ '<path>': bool }
-    openState: { type: Object, default: null },
-    // 仅当根级别 value 为基元类型且需要展示 key 时传入（如顶层字符串）
-    rootKeyLabel: { type: [String, Number, null], default: null },
-    // 最大可展开深度（保护）：达到该深度的复合节点不再可展开，
-    // 避免日志中循环引用 / 超深结构在展开时无限递归。默认 100（接口调用场景基本无感）。
-    maxDepth: { type: Number, default: 100 },
-    // 根节点默认折叠成一行摘要（事件日志使用）；接口调用面板保持逐行铺开
-    rootCollapsed: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      // 若未传入共享状态（理论只发生在根），自行创建，保证递归子组件拿到同一引用
-      localOpenState: this.openState || reactive({}),
-      // 根摘要行的展开态（仅 rootCollapsed 场景使用）
-      rootOpen: false,
-    }
-  },
-  computed: {
-    isRoot() {
-      return this.depth === 0
-    },
-    isArrayRoot() {
-      return Array.isArray(this.value)
-    },
-    rootCount() {
-      return this.isArrayRoot ? this.value.length : Object.keys(this.value || {}).length
-    },
-    state() {
-      return this.openState || this.localOpenState
-    },
-    entries() {
-      const d = this.value
-      if (Array.isArray(d)) {
-        return d.map((v, i) => this.makeEntry(String(i), v, true, i))
-      }
-      if (d && typeof d === 'object') {
-        return Object.keys(d).map((k) => this.makeEntry(k, d[k], false, k))
-      }
-      return []
-    },
-  },
-  methods: {
-    typeOf(v) {
-      if (v === null) return 'null'
-      if (Array.isArray(v)) return 'array'
-      return typeof v
-    },
-    isComplex(v) {
-      return v !== null && typeof v === 'object'
-    },
-    makeEntry(keyLabel, value, isArrayBranch, rawKey) {
-      const isArr = Array.isArray(value)
-      const count = isArr
-        ? value.length
-        : value && typeof value === 'object'
-          ? Object.keys(value).length
-          : 0
-      return {
-        keyLabel,
-        value,
-        isArray: isArr,
-        count,
-        type: this.typeOf(value),
-        path: [...this.path, rawKey],
-      }
-    },
-    pathKey(entry) {
-      return entry.path.join('/')
-    },
-    isOpen(entry) {
-      // 必须直接以 st[k] 读取：Vue 3 的 reactive get 陷阱对「不存在的 key」同样会 track，
-      // 而 hasOwnProperty 走 getOwnPropertyDescriptor（Vue 未代理）不会 track——
-      // 若先用 hasOwnProperty 短路返回，首次点击写入新 key 时无人订阅，视图不会重渲染（点了没反应）。
-      const v = this.state[this.pathKey(entry)]
-      // 默认全部折叠，由用户逐层点开
-      return v === undefined ? false : v
-    },
-    /** 当前节点是否可展开：复合类型且未超过最大深度（保护循环引用 / 超深结构） */
-    canExpand(entry) {
-      return this.isComplex(entry.value) && this.depth < this.maxDepth
-    },
-    toggle(entry) {
-      const k = this.pathKey(entry)
-      this.state[k] = !this.isOpen(entry)
-    },
-    preview(val) {
-      if (Array.isArray(val)) return ' … ' + val.length + ' 项'
-      const keys = Object.keys(val)
-      const head = keys.slice(0, 3).join(', ')
-      return ' … ' + head + (keys.length > 3 ? ', …' : '') + ' '
-    },
-    format(v) {
-      if (v === null) return 'null'
-      if (typeof v === 'string') return v // DevTools 风格：字符串不带引号
-      if (typeof v === 'number') return String(v)
-      if (typeof v === 'boolean') return String(v)
-      return JSON.stringify(v)
-    },
-  },
-}
-</script>

package/dist/vendored/components/AppToast.vue

@@ -1,37 +0,0 @@
-<!--
-  App 级弱提示（toast）：顶栏异步操作（远端保存 / 同步）完成后的反馈。
-  固定悬浮在 App 外壳顶部居中，不随手机预览框定位（区别于设备框内的 showToast）。
-  通过 runtime/app-toast.js 的 appToast 响应式单例读取，2.4s 自动消失。
--->
-<template>
-  <transition name="apptoast-fade">
-    <div
-      v-if="toast.visible"
-      class="apptoast"
-      :class="'apptoast--' + toast.type"
-      role="status"
-      aria-live="polite"
-    >
-      <span class="apptoast__icon">
-        <svg class="apptoast__icon-svg" viewBox="0 0 24 24" aria-hidden="true">
-          <path v-if="toast.type === 'ok'" d="M5 13l4 4L19 7" />
-          <path v-else d="M6 6l12 12M18 6L6 18" />
-        </svg>
-      </span>
-      <span class="apptoast__msg">{{ toast.message }}</span>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { appToast } from '@/runtime/app-toast.js'
-
-export default {
-  name: 'AppToast',
-  computed: {
-    toast() {
-      return appToast
-    },
-  },
-}
-</script>

package/dist/vendored/components/CardGallery.vue

@@ -1,291 +0,0 @@
-<!--
-  卡片网格预览弹窗：点击顶栏「网格预览」图标按钮打开。
-  展示本地全部卡片（GET /__cards 的 cardList）的缩略图墙，每格含：
-    - 预览图：复用本地静态服务 /__card-image/<id>，读取卡片目录下的同名预览图
-      （src/cards/<id>/<id>.png），不触发实时无头截图
-    - 标题：card.name
-    - 卡 id：card.id
-  缩略图按可见性懒加载（IntersectionObserver），避免一次打开对 70+ 张图同时发起请求。
-  点击任一张 → emit select(id)（父级 onSelect 载入工作台并持久化）+ close 关闭弹窗。
-  搜索框按 id / 名称过滤；Esc 或点遮罩关闭；当前选中卡高亮。
-  每格右下角常驻删除钮（仅图标、hover / 键盘聚焦显现）：点击弹警告确认，
-  确认后 emit delete(id) 交父级调 DELETE /__card/<id> 删除本地卡片文件夹。
--->
-<template>
-  <transition name="modal">
-    <div v-if="visible" class="cg-mask" @click.self="close">
-      <div class="cg-modal modal-card" role="dialog" aria-modal="true" aria-label="卡片网格预览">
-        <header class="cg-modal__head">
-          <div class="cg-modal__title">
-            <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-grid" /></svg>
-            <span>卡片网格预览</span>
-            <span class="cg-modal__count">{{ cards.length }} 张本地卡片</span>
-          </div>
-          <div class="cg-modal__search">
-            <svg class="cg-modal__search-icon" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><use href="#icon-search" /></svg>
-            <input
-              ref="search"
-              v-model="query"
-              class="cg-modal__input"
-              type="text"
-              placeholder="搜索卡片 ID / 名称…"
-            />
-          </div>
-          <button
-            class="cg-modal__sort"
-            :class="{ 'cg-modal__sort--active': sortByTime }"
-            type="button"
-            :title="sortByTime ? '已按修改时间排序（新→旧），点击取消' : '按修改时间排序（新→旧）'"
-            :aria-pressed="sortByTime"
-            @click="toggleSort"
-          >按修改时间排序</button>
-          <button class="cg-modal__close" type="button" title="关闭" @click="close" aria-label="关闭">
-            <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>
-          </button>
-        </header>
-
-        <div ref="grid" class="cg-grid">
-          <button
-            v-for="card in filtered"
-            :key="card.id"
-            :data-id="card.id"
-            type="button"
-            class="cg-tile"
-            :class="{
-              'cg-tile--active': card.id === selectedId,
-              'cg-tile--failed': failed.has(card.id),
-            }"
-            @click="choose(card)"
-          >
-            <div class="cg-tile__thumb">
-              <!-- 导入标记：仅含 .import-meta.json 侧车的卡（经远端同步导入）显示，悬浮于缩略图右上角 -->
-              <span v-if="card.imported" class="cg-tile__tag" title="导入卡片（含 .import-meta.json 来源信息）">导入</span>
-              <img
-                v-if="visibleIds.has(card.id) && !failed.has(card.id)"
-                class="cg-tile__img"
-                :src="thumbUrl(card.id)"
-                :alt="card.name"
-                loading="lazy"
-                @error="onImgError(card.id)"
-              />
-              <div v-else-if="!visibleIds.has(card.id)" class="cg-tile__skeleton">预览加载中…</div>
-              <!-- 无封面（空白新卡无位图、且空白卡跳过无头截图直接 404）：
-                   回退工程统一占位图（与 Image 组件兜底图同源），浅色底与缩略图区调性一致 -->
-              <img v-else class="cg-tile__img cg-tile__img--placeholder" :src="placeholderUrl" :alt="`暂无封面：${card.name}`" />
-            </div>
-            <div class="cg-tile__meta">
-              <span class="cg-tile__name" :title="card.name">{{ card.name }}</span>
-              <span class="cg-tile__id" :title="card.id">{{ card.id }}</span>
-            </div>
-            <!-- 删除钮：仅图标不带文字，悬浮于格子右下角。格子本身是 button，
-                 这里用 span + role=button 避免 button 套 button 的非法结构；
-                 click.stop 阻止冒泡到格子的「选中载入」。 -->
-            <span
-              class="cg-tile__del"
-              role="button"
-              tabindex="0"
-              :title="`删除本地卡片 ${card.id}`"
-              :aria-label="`删除本地卡片 ${card.id}`"
-              @click.stop="askDelete(card)"
-              @keydown.enter.stop.prevent="askDelete(card)"
-              @keydown.space.stop.prevent="askDelete(card)"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-trash" /></svg>
-            </span>
-          </button>
-          <p v-if="!filtered.length" class="cg-empty">无匹配卡片</p>
-        </div>
-      </div>
-      <!-- 删除确认：警告级（橙黄 + 三角图标）；删除本地目录不可逆，文案明示影响范围 -->
-      <ConfirmDialog
-        :visible="pendingDelete != null"
-        title="删除卡片"
-        :message="pendingDelete ? `将删除本地卡片目录 src/cards/${pendingDelete.id}/（schema / 切图 / 预览图一并删除），不可恢复。确定删除「${pendingDelete.name}」吗？` : ''"
-        confirm-text="删除"
-        severity="warn"
-        @confirm="confirmDelete"
-        @cancel="pendingDelete = null"
-      />
-    </div>
-  </transition>
-</template>
-
-<script>
-import { resolveApiBase } from '@/api.js'
-import { DEFAULT_IMAGE_URL } from '@/runtime/assets.js'
-import ConfirmDialog from './ConfirmDialog.vue'
-
-export default {
-  name: 'CardGallery',
-  components: { ConfirmDialog },
-  props: {
-    /** 是否显示弹窗 */
-    visible: { type: Boolean, default: false },
-    /** 卡片列表（与顶栏 csel-combo 同源：GET /__cards 的 cardList） */
-    cards: { type: Array, default: () => [] },
-    /** 当前选中卡片 id，用于高亮 */
-    selectedId: { type: String, default: '' },
-  },
-  emits: ['select', 'close', 'delete'],
-  data() {
-    return {
-      query: '',
-      // 排序开关：false=按名称（默认），true=按修改时间新→旧；初始值从 localStorage 读取
-      sortByTime: this.loadSortByTime(),
-      // 已滚动进入视口、应当发起缩略图请求的卡片 id 集合（IntersectionObserver 填充）
-      visibleIds: new Set(),
-      // 缩略图加载失败的卡片 id 集合（回退占位）
-      failed: new Set(),
-      observer: null,
-      // 截图端点 base（弹窗打开时按当前 apiBase 解析一次）
-      base: '',
-      // 待删除确认的卡片（null = 无确认中）；确认后才 emit delete 交父级真删
-      pendingDelete: null,
-      // 无封面占位图（工程统一兜底图，Vite 统一套 base）
-      placeholderUrl: DEFAULT_IMAGE_URL,
-    }
-  },
-  created() {
-    // 仅确保 data 阶段读取的持久化值已落盘（无记录时建立基线）
-    this.saveSortByTime()
-  },
-  computed: {
-    filtered() {
-      const q = this.query.trim().toLowerCase()
-      let arr = this.cards
-      if (q) {
-        arr = arr.filter(
-          (c) =>
-            c.id.toLowerCase().includes(q) ||
-            String(c.name || '').toLowerCase().includes(q)
-        )
-      }
-      // 排序：时间模式按修改时间新→旧；否则按名称（默认）
-      const sorted = this.sortByTime
-        ? arr.slice().sort((a, b) => (b.mtime || 0) - (a.mtime || 0))
-        : arr.slice().sort((a, b) => String(a.name || '').localeCompare(String(b.name || '')))
-      return sorted
-    },
-  },
-  watch: {
-    visible(v) {
-      if (v) {
-        this.query = ''
-        this.failed = new Set()
-        this.$nextTick(() => {
-          this.setupObserver()
-          this.focusSearch()
-        })
-        window.addEventListener('keydown', this.onKey)
-      } else {
-        this.teardownObserver()
-        window.removeEventListener('keydown', this.onKey)
-      }
-    },
-    // 搜索过滤改变列表 DOM → 重新观察新出现的卡片格子，保证懒加载继续生效
-    query() {
-      if (this.visible) this.$nextTick(this.setupObserver)
-    },
-    // 切换排序方式时立即持久化，避免每次刷新都要手动再点一次
-    sortByTime(v) {
-      this.saveSortByTime()
-    },
-  },
-  beforeUnmount() {
-    this.teardownObserver()
-    window.removeEventListener('keydown', this.onKey)
-  },
-  methods: {
-    /** 格子删除钮：进入警告确认（不直接删，避免误触丢目录） */
-    askDelete(card) {
-      this.pendingDelete = card
-    },
-    /** 确认删除：清掉本格懒加载 / 失败标记后上抛父级（父级调接口 + 刷列表 + 兜底换卡） */
-    confirmDelete() {
-      const card = this.pendingDelete
-      this.pendingDelete = null
-      if (!card) return
-      this.visibleIds.delete(card.id)
-      this.failed.delete(card.id)
-      this.$emit('delete', card.id)
-    },
-    /** 缩略图地址：复用本地静态服务 /__card-image/<id>，直接读取卡片目录下的同名预览图
-     * （src/cards/<id>/<id>.png），不触发实时无头截图。 */
-    thumbUrl(id) {
-      const base = this.base || resolveApiBase() || ''
-      return base + '/__card-image/' + encodeURIComponent(id)
-    },
-    /** 建立滚动容器内缩略图懒加载观察器：仅对进入视口（含 200px 预载边距）的格子发起截图请求。 */
-    setupObserver() {
-      this.base = resolveApiBase() || ''
-      const grid = this.$refs.grid
-      if (!grid) return
-      this.teardownObserver()
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          for (const e of entries) {
-            if (!e.isIntersecting) continue
-            const id = e.target.getAttribute('data-id')
-            if (id && !this.visibleIds.has(id)) {
-              const next = new Set(this.visibleIds)
-              next.add(id)
-              this.visibleIds = next
-            }
-            this.observer.unobserve(e.target)
-          }
-        },
-        { root: grid, rootMargin: '200px' }
-      )
-      grid.querySelectorAll('.cg-tile').forEach((el) => this.observer.observe(el))
-    },
-    teardownObserver() {
-      if (this.observer) {
-        this.observer.disconnect()
-        this.observer = null
-      }
-    },
-    onImgError(id) {
-      const next = new Set(this.failed)
-      next.add(id)
-      this.failed = next
-    },
-    /** 读取持久化的排序方式（localStorage）。无记录或损坏时回退默认 false。 */
-    loadSortByTime() {
-      try {
-        return localStorage.getItem('cardbuddy:cardgallery-sort-by-time') === '1'
-      } catch (e) {
-        return false
-      }
-    },
-    /** 持久化排序方式到 localStorage：'1'=按修改时间，'0'=按名称。 */
-    saveSortByTime() {
-      try {
-        localStorage.setItem(
-          'cardbuddy:cardgallery-sort-by-time',
-          this.sortByTime ? '1' : '0'
-        )
-      } catch (e) {
-        /* localStorage 不可用时忽略 */
-      }
-    },
-    /** 切换「按修改时间排序」：激活时列表新→旧；再次点击取消，回到按名称默认排序。 */
-    toggleSort() {
-      this.sortByTime = !this.sortByTime
-    },
-    onKey(e) {
-      if (e.key === 'Escape') this.close()
-    },
-    focusSearch() {
-      if (this.$refs.search) this.$refs.search.focus()
-    },
-    choose(card) {
-      if (!card) return
-      this.$emit('select', card.id)
-      this.close()
-    },
-    close() {
-      this.$emit('close')
-    },
-  },
-}
-</script>

package/dist/vendored/components/CardPreview.vue

@@ -1,72 +0,0 @@
-<!--
-  自包含卡片预览组件（供独立截图/视觉比对复用，无需编辑器和 dev server）。
-
-  与编辑器 App.vue 共用同一套渲染内核（RenderTree / Adapter / createCardRuntime /
-  buildPreview），但只保留「卡片本身」：
-    - provide 下发的 adapter/cardRuntime/customComponents 与编辑器预览一致；
-    - 挂载 [data-card-ready] 供无头浏览器等待首帧落定；
-    - adapter 使用 apiBase:''，让 /slices 等站内资源保持同源相对路径，
-      不依赖 8787 本地开发服务。
--->
-<template>
-  <div class="card-preview">
-    <div
-      class="phone__screen phone__screen--bg-white"
-      :style="screenStyle"
-      :data-card-ready="ready ? '1' : null"
-    >
-      <RenderTree
-        v-if="preview"
-        :node="preview.view"
-        :scope="runtime.state"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import RenderTree from './RenderTree.vue'
-import Adapter from '../runtime/adapter.js'
-import { createCardRuntime } from '../runtime/card-runtime.js'
-import { buildPreview } from '../runtime/toPreview.js'
-import { installJsApiMock } from '../runtime/jsapi-mock.js'
-
-export default {
-  name: 'CardPreview',
-  components: { RenderTree },
-  props: {
-    schema: { type: Object, required: true },
-    data: { type: Object, default: () => ({}) },
-    width: { type: [String, Number], default: 375 },
-  },
-  provide() {
-    return {
-      adapter: this.adapter,
-      cardRuntime: this.runtime,
-      customComponents: {},
-    }
-  },
-  data() {
-    const adapter = new Adapter({ apiBase: '' })
-    const runtime = createCardRuntime(this.data || {}, adapter)
-    installJsApiMock(runtime)
-    return {
-      adapter,
-      runtime,
-      preview: buildPreview(this.schema),
-      ready: false,
-    }
-  },
-  computed: {
-    screenStyle() {
-      const width = Number(this.width) || (this.preview && this.preview.view && this.preview.view.width) || 375
-      return { width: width + 'px' }
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.ready = true
-    })
-  },
-}
-</script>