@oneflowui/ui 0.8.4 → 0.8.5

package/README.en.md

@@ -110,6 +110,19 @@ import '@oneflowui/ui/styles'
 
 Note: starting from `0.5.4`, the plugin entry is separated from the root entry. Use `@oneflowui/ui/plugin` for `app.use(...)`, and keep named imports on `@oneflowui/ui`.
 
+If you want a stricter import boundary, stable subpath exports are also available:
+
+```ts
+import { useVirtualListStateCache } from '@oneflowui/ui/composables'
+import type { DataRecord } from '@oneflowui/ui/types'
+```
+
+Recommended convention:
+- Import components and common capabilities from the root `@oneflowui/ui` entry.
+- Import composables and pure types from `@oneflowui/ui/composables` and `@oneflowui/ui/types` when you want a clearer dependency boundary.
+- If you only want tokens and theme layers without plugin registration, use `@oneflowui/ui/theme`.
+- Keep `@oneflowui/ui/styles` as the full legacy-compatible style entry.
+
 ### Theme Layers
 
 OneUI now ships with a neutral default theme and an optional product skin without changing component logic.
@@ -127,8 +140,99 @@ document.documentElement.dataset.ofTheme = 'neutral'
 document.documentElement.dataset.ofTheme = 'ops-console'
 ```
 
+If you want to decouple “style injection” from “plugin registration”, prefer the dedicated theme entry:
+
+```ts
+import '@oneflowui/ui/theme'
+```
+
 This structure is meant to keep the component layer reusable while letting product-specific styling live above it.
 
+### ThemeScope Wrapper
+
+When a single page needs two visual contexts at once, prefer the `ThemeScope` component. It automatically writes `data-of-theme` and `data-of-theme-scope` on the wrapper, so consumers do not need to hand-write attributes.
+
+```vue
+<script setup lang="ts">
+import { ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="ops-preview">
+    <div class="ops-preview__panel">
+      <h3>Scoped ops-console preview</h3>
+      <p>This subtree inherits ops-console tokens while the outer page stays neutral.</p>
+    </div>
+  </ThemeScope>
+</template>
+```
+
+Supported values currently match the global theme list:
+
+- `neutral`
+- `ops-console`
+
+Direct `data-of-theme-scope` usage is still compatible for older code, but new consumers should use `ThemeScope`.
+
+### Component-Level Example
+
+A more realistic consumer pattern is to wrap an actual component subtree. The page keeps its global theme, while the local region switches to tokens that fit an ops or command-console context.
+
+```vue
+<script setup lang="ts">
+import { DataTable, StatisticCard, ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="task-surface">
+    <header class="task-surface__header">
+      <h3>Task Overview</h3>
+      <p>Only this region uses ops-console tokens.</p>
+    </header>
+
+    <div class="task-surface__metrics">
+      <StatisticCard icon="check-circle" :value="18" label="Done" />
+      <StatisticCard icon="clock" :value="6" label="In progress" />
+    </div>
+
+    <DataTable :rows="rows" :columns="columns" />
+  </ThemeScope>
+</template>
+```
+
+This is non-breaking: no component API changes are required, and `ThemeScope` only adds a local token boundary on the wrapper.
+
+### Virtual List State Cache
+
+If a virtual list remounts often and you want to keep `scrollTop`, `containerHeight`, and `invalidateVersion`, reuse the same state by key.
+`createVirtualListState()` is still available, while `useVirtualListStateCache()` is the helper for sharing one state across remounts.
+
+```ts
+import { useVirtualList, useVirtualListStateCache } from '@oneflowui/ui'
+
+const virtualListState = useVirtualListStateCache('ai-message-list')
+
+const { visibleItems, totalHeight, offsetY } = useVirtualList({
+  items: messages,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+```
+
+## Release & Verification
+
+If you need to review the current traceable release materials, start with these docs:
+
+- Current evidence index: [`docs/plans/2026-03-22-release-0.8.5-evidence-index.md`](docs/plans/2026-03-22-release-0.8.5-evidence-index.md)
+- Release proof: [`docs/plans/2026-03-22-release-0.8.5-proof.md`](docs/plans/2026-03-22-release-0.8.5-proof.md)
+- Verification result: [`docs/plans/2026-03-22-release-0.8.5-verification.md`](docs/plans/2026-03-22-release-0.8.5-verification.md)
+- Pre-release smoke: [`docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md`](docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md)
+- Package entrypoints verification: [`docs/plans/2026-03-22-oneui-package-entrypoints-verification.md`](docs/plans/2026-03-22-oneui-package-entrypoints-verification.md)
+- Changelog: [`docs/CHANGELOG-v0.8.5.md`](docs/CHANGELOG-v0.8.5.md)
+
+The current public npm version will move to `0.8.5` after this release step, and publish, pack, dry-run, and dual-host smoke checks all have separate evidence.
+
 ---
 
 ## Usage Examples
@@ -204,6 +308,121 @@ toast.success('Saved successfully')
 toast.error('Operation failed')
 ```
 
+### DatabaseView middleware presets
+
+You can compose reusable `DatabaseView` middleware presets for toast, analytics, and optimistic updates:
+
+```ts
+import {
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+} from '@oneflowui/ui'
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+```
+
+### Dev Examples / Enterprise Demo
+
+`DatabaseEnterpriseDemo` is a dev/examples-level consumption pattern used to show a more complete enterprise-style page composition. It is documentation and development sample material, not an npm-exported component, and it does not change the public export surface of `@oneflowui/ui`.
+
+If your business app needs something similar, copy the composition idea from the example and wire it to your own data source and action contract instead of depending on a separate production export.
+
+### Combined Consumption Example
+
+If you want to use theme scoping, database action middleware, and virtual list state caching in the same business surface, keep them inside one wrapper component. This is the closest pattern to a real app page and the easiest one to copy.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  ThemeScope,
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+  useVirtualList,
+  useVirtualListStateCache,
+} from '@oneflowui/ui'
+
+const containerRef = ref<HTMLElement | null>(null)
+const virtualListState = useVirtualListStateCache('task-feed')
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+
+const { visibleItems } = useVirtualList({
+  items: view.records,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+
+const columns = [
+  { key: 'title', label: 'Task', width: 'fill' },
+  { key: 'status', label: 'Status', width: 120 },
+  { key: 'priority', label: 'Priority', width: 100 },
+]
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="task-surface">
+    <header class="task-surface__header">
+      <h3>Task Overview</h3>
+      <p>The outer shell uses scoped ops-console tokens while actions, list rendering, and cached state share the same component entry points.</p>
+    </header>
+
+    <div ref="containerRef" class="task-surface__list">
+      <DataTable :rows="visibleItems" :columns="columns" />
+    </div>
+  </ThemeScope>
+</template>
+```
+
+These capabilities can be used independently or combined like above; all of them are non-breaking additions and do not require consumer API changes.
+
 ---
 
 ## Local Development

package/README.md

@@ -88,6 +88,19 @@ app.use(OneflowUI)
 app.mount('#app')
 ```
 
+如果需要更细粒度的导入边界，可以直接使用稳定子路径入口：
+
+```ts
+import { useVirtualListStateCache } from '@oneflowui/ui/composables'
+import type { DataRecord } from '@oneflowui/ui/types'
+```
+
+推荐约定：
+- 组件与公共能力优先从 `@oneflowui/ui` 根入口导入。
+- composables 和纯类型如果希望导入意图更清晰，可分别从 `@oneflowui/ui/composables` 与 `@oneflowui/ui/types` 导入。
+- 如果只想注入 token 和主题层，不想顺带注册插件，可改用 `@oneflowui/ui/theme`。
+- 样式全量入口仍保留 `@oneflowui/ui/styles`，兼容现有消费方式。
+
 ### 按需引入
 
 ```ts
@@ -114,12 +127,103 @@ document.documentElement.dataset.ofTheme = 'neutral'
 document.documentElement.dataset.ofTheme = 'ops-console'
 ```
 
+如果你希望把“样式注入”和“组件插件注册”拆开，推荐改用更明确的主题入口：
+
+```ts
+import '@oneflowui/ui/theme'
+```
+
 这套结构的目标是：
 
 1. 组件默认保持中性、可复用
 2. 业务系统通过主题皮肤注入品牌感或中控台气质
 3. 后续可继续扩展更多主题，而不需要修改组件 API
 
+### ThemeScope 包装组件
+
+如果同一页面里需要并存两种视觉语境，优先使用 `ThemeScope`。这个组件会自动给 wrapper 注入 `data-of-theme` 和 `data-of-theme-scope`，业务方不需要手写属性。
+
+```vue
+<script setup lang="ts">
+import { ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="ops-preview">
+    <div class="ops-preview__panel">
+      <h3>局部 ops-console 预览</h3>
+      <p>这里会继承 ops-console 的 token，而外层仍然保持全局 neutral。</p>
+    </div>
+  </ThemeScope>
+</template>
+```
+
+`ThemeScope` 当前支持的主题值与全局主题一致：
+
+- `neutral`
+- `ops-console`
+
+老代码里直接手写的 `data-of-theme-scope` 仍然兼容，但新代码优先使用组件入口。
+
+### 组件级示例
+
+更贴近业务消费的写法，是把一个组件子树直接包进 `ThemeScope`。外层页面继续沿用全局主题，局部区域则切到适合命令台或运营视角的 token。
+
+```vue
+<script setup lang="ts">
+import { DataTable, StatisticCard, ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="task-surface">
+    <header class="task-surface__header">
+      <h3>任务总览</h3>
+      <p>仅这块区域使用 ops-console token。</p>
+    </header>
+
+    <div class="task-surface__metrics">
+      <StatisticCard icon="check-circle" :value="18" label="已完成" />
+      <StatisticCard icon="clock" :value="6" label="进行中" />
+    </div>
+
+    <DataTable :rows="rows" :columns="columns" />
+  </ThemeScope>
+</template>
+```
+
+这是一种非 breaking 的增强：组件 API 不需要变，`ThemeScope` 只是在局部 wrapper 上增加一层 token 作用域。
+
+### 虚拟列表状态缓存
+
+如果虚拟列表会频繁 remount，但你希望保留 `scrollTop`、`containerHeight` 和 `invalidateVersion`，可以按 key 复用同一份状态。
+`createVirtualListState()` 仍然可用，而 `useVirtualListStateCache()` 适合把同一份状态挂在多个 remount 之间。
+
+```ts
+import { useVirtualList, useVirtualListStateCache } from '@oneflowui/ui'
+
+const virtualListState = useVirtualListStateCache('ai-message-list')
+
+const { visibleItems, totalHeight, offsetY } = useVirtualList({
+  items: messages,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+```
+
+## 发布与验收
+
+如果你需要核对当前可追溯的发布材料，优先看这几份文档：
+
+- 当前版本证据索引：[`docs/plans/2026-03-22-release-0.8.5-evidence-index.md`](docs/plans/2026-03-22-release-0.8.5-evidence-index.md)
+- 发布 proof：[`docs/plans/2026-03-22-release-0.8.5-proof.md`](docs/plans/2026-03-22-release-0.8.5-proof.md)
+- 验收结果：[`docs/plans/2026-03-22-release-0.8.5-verification.md`](docs/plans/2026-03-22-release-0.8.5-verification.md)
+- 预发布验证：[`docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md`](docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md)
+- 子路径入口治理：[`docs/plans/2026-03-22-oneui-package-entrypoints-verification.md`](docs/plans/2026-03-22-oneui-package-entrypoints-verification.md)
+- 版本日志：[`docs/CHANGELOG-v0.8.5.md`](docs/CHANGELOG-v0.8.5.md)
+
+当前 npm 公开版本会在本轮发版完成后更新到 `0.8.5`，对应的发布、pack、dry-run 和双宿主 smoke 都有独立留痕。
+
 ---
 
 ## 页面级方案
@@ -175,6 +279,121 @@ type DatabaseViewActions = {
 
 如果接入的是 `provider` 模式，建议把 `onFetch` / `onRefresh` 作为必配项；如果接入的是 `local` 模式，则重点只需要保证 `onUpdateRecord`、`onCreateRecord`、`onDeleteRecord` 和 `onSaveView` 这几类页面动作可回传。
 
+### Middleware presets
+
+如果页面想复用 toast、分析埋点或乐观更新逻辑，可以直接组合 `useDatabaseView` 提供的 middleware presets：
+
+```ts
+import {
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+} from '@oneflowui/ui'
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+```
+
+### Dev Examples / Enterprise Demo
+
+`DatabaseEnterpriseDemo` 是 dev/examples 级的消费范式，用来展示更完整的企业版页面组合方式。它属于开发示例和文档参考，不是 npm 包对外导出的组件，不会改变 `@oneflowui/ui` 的公开导出面。
+
+如果你在业务工程里需要类似的页面，建议直接复制示例里的组合思路，再按自己的数据源和动作契约接入，而不是依赖一个额外的生产级导出入口。
+
+### 组合消费示例
+
+如果你要在同一块业务区域里同时使用主题作用域、数据库动作中间件和虚拟列表状态缓存，可以把三者放进同一个组件壳层。这个写法更接近真实业务页，也最适合作为复制模板。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  ThemeScope,
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+  useVirtualList,
+  useVirtualListStateCache,
+} from '@oneflowui/ui'
+
+const containerRef = ref<HTMLElement | null>(null)
+const virtualListState = useVirtualListStateCache('task-feed')
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+
+const { visibleItems } = useVirtualList({
+  items: view.records,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+
+const columns = [
+  { key: 'title', label: '任务', width: 'fill' },
+  { key: 'status', label: '状态', width: 120 },
+  { key: 'priority', label: '优先级', width: 100 },
+]
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="task-surface">
+    <header class="task-surface__header">
+      <h3>任务总览</h3>
+      <p>外层是局部 ops-console token，内部动作、列表和状态缓存都复用同一套组件入口。</p>
+    </header>
+
+    <div ref="containerRef" class="task-surface__list">
+      <DataTable :rows="visibleItems" :columns="columns" />
+    </div>
+  </ThemeScope>
+</template>
+```
+
+这三个能力可以独立使用，也可以像上面这样组合使用；它们都是非 breaking 增强，不要求业务方修改现有组件 API。
+
 ### Selected record / detail workspace
 
 当前 dev app 已经把“选中记录 -> detail workspace”这条链路接起来了：点击 table / kanban / gallery / timeline 中的条目，会把当前记录送入详情工作区，再由 `DetailLayout`、`PropPanel`、`CommentItem` 这组组件展示主内容、属性和活动记录。

package/dist/components/ai/AiMessageList.vue.js

@@ -1,7 +1,7 @@
 import o from "./AiMessageList.vue2.js";
 /* empty css                   */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d42e9b32"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-76bed64f"]]);
 export {
   a as default
 };

package/dist/components/ai/AiMessageList.vue2.js

@@ -1,55 +1,56 @@
-import { defineComponent as B, ref as T, computed as b, watch as x, nextTick as M, openBlock as t, createElementBlock as n, createElementVNode as u, normalizeStyle as f, unref as s, Fragment as p, renderList as _, createBlock as r, createCommentVNode as L } from "vue";
-import { useVirtualList as A } from "../../composables/useVirtualList.js";
+import { defineComponent as T, ref as b, computed as x, watch as M, nextTick as L, openBlock as t, createElementBlock as n, createElementVNode as u, normalizeStyle as f, unref as s, Fragment as p, renderList as S, createBlock as r, createCommentVNode as _ } from "vue";
+import { createVirtualListState as V, useVirtualList as A } from "../../composables/useVirtualList.js";
 import E from "./AiMessageBubble.vue.js";
 import H from "./UserMessageBubble.vue.js";
 import R from "./AiThinking.vue.js";
-const Y = /* @__PURE__ */ B({
+const F = /* @__PURE__ */ T({
   __name: "AiMessageList",
   props: {
     messages: {},
     isThinking: { type: Boolean }
   },
   setup(o) {
-    const i = o, m = T(null), g = (l) => {
+    const a = o, l = b(null), g = V(), h = (m) => {
       var c;
-      const a = i.messages[l];
-      if (!a) return 80;
-      if (a.role === "user") return 60;
-      const e = Math.ceil((((c = a.content) == null ? void 0 : c.length) ?? 0) / 60);
+      const i = a.messages[m];
+      if (!i) return 80;
+      if (i.role === "user") return 60;
+      const e = Math.ceil((((c = i.content) == null ? void 0 : c.length) ?? 0) / 60);
       return Math.max(80, 48 + e * 24);
     }, {
-      visibleItems: h,
-      totalHeight: v,
-      offsetY: k,
-      scrollToBottom: d
+      visibleItems: v,
+      totalHeight: k,
+      offsetY: d,
+      scrollToBottom: y
     } = A({
-      items: b(() => i.messages),
-      itemHeight: g,
+      items: x(() => a.messages),
+      itemHeight: h,
       overscan: 3,
-      containerRef: m
+      containerRef: l,
+      state: g
     });
-    function y() {
-      d();
+    function B() {
+      y();
     }
-    return x(
-      () => [i.messages.length, i.isThinking],
+    return M(
+      () => [a.messages.length, a.isThinking],
       async () => {
-        await M(), y();
+        await L(), B();
       },
       { immediate: !0 }
-    ), (l, a) => (t(), n("div", {
+    ), (m, i) => (t(), n("div", {
       ref_key: "listRef",
-      ref: m,
+      ref: l,
       class: "of-ai-message-list"
     }, [
       u("div", {
-        style: f({ height: s(v) + "px", position: "relative" })
+        style: f({ height: s(k) + "px", position: "relative" })
       }, [
         u("div", {
           class: "of-ai-message-list-inner",
-          style: f({ transform: `translateY(${s(k)}px)` })
+          style: f({ transform: `translateY(${s(d)}px)` })
         }, [
-          (t(!0), n(p, null, _(s(h), ({ data: e }) => (t(), n(p, {
+          (t(!0), n(p, null, S(s(v), ({ data: e }) => (t(), n(p, {
             key: e.id
           }, [
             e.role === "ai" ? (t(), r(E, {
@@ -69,10 +70,10 @@ const Y = /* @__PURE__ */ B({
           ], 64))), 128))
         ], 4)
       ], 4),
-      o.isThinking ? (t(), r(R, { key: 0 })) : L("", !0)
+      o.isThinking ? (t(), r(R, { key: 0 })) : _("", !0)
     ], 512));
   }
 });
 export {
-  Y as default
+  F as default
 };

package/dist/components/common/ThemeScope.vue.d.ts

@@ -0,0 +1,24 @@
+type ThemeScopeTheme = "neutral" | "ops-console";
+type __VLS_Props = {
+    theme: ThemeScopeTheme;
+    tag?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/common/ThemeScope.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent as a, openBlock as m, createBlock as n, resolveDynamicComponent as p, withCtx as c, renderSlot as r } from "vue";
+const f = /* @__PURE__ */ a({
+  name: "ThemeScope",
+  __name: "ThemeScope",
+  props: {
+    theme: {},
+    tag: { default: "div" }
+  },
+  setup(t) {
+    const e = t;
+    return (o, s) => (m(), n(p(e.tag), {
+      "data-of-theme": e.theme,
+      "data-of-theme-scope": e.theme
+    }, {
+      default: c(() => [
+        r(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["data-of-theme", "data-of-theme-scope"]));
+  }
+});
+export {
+  f as default
+};

package/dist/components/common/ThemeScope.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ThemeScope.vue.js";
+export {
+  f as default
+};

package/dist/components/common/index.d.ts

@@ -0,0 +1 @@
+export { default as ThemeScope } from './ThemeScope.vue';

package/dist/components/database/DatabaseView.vue.d.ts

@@ -36,10 +36,10 @@ declare const _default: import('vue').DefineComponent<DatabaseViewProps, {}, {},
         endDate?: string;
     }) => any;
     "update:records": (args_0: DataRecord[]) => any;
-    "update:currentViewId": (args_0: string) => any;
-    "update:selectedRecordId": (args_0: string | null) => any;
     "select-record": (args_0: DataRecord | null) => any;
     refresh: () => any;
+    "update:currentViewId": (args_0: string) => any;
+    "update:selectedRecordId": (args_0: string | null) => any;
 }, string, import('vue').PublicProps, Readonly<DatabaseViewProps> & Readonly<{
     onSort?: ((args_0: string) => any) | undefined;
     onAdd?: (() => any) | undefined;
@@ -75,10 +75,10 @@ declare const _default: import('vue').DefineComponent<DatabaseViewProps, {}, {},
         endDate?: string;
     }) => any) | undefined;
     "onUpdate:records"?: ((args_0: DataRecord[]) => any) | undefined;
-    "onUpdate:currentViewId"?: ((args_0: string) => any) | undefined;
-    "onUpdate:selectedRecordId"?: ((args_0: string | null) => any) | undefined;
     "onSelect-record"?: ((args_0: DataRecord | null) => any) | undefined;
     onRefresh?: (() => any) | undefined;
+    "onUpdate:currentViewId"?: ((args_0: string) => any) | undefined;
+    "onUpdate:selectedRecordId"?: ((args_0: string | null) => any) | undefined;
 }>, {
     mode: import('../..').DatabaseViewMode;
     error: string | Error | null;