@synopackageland/ui 0.4.0

package/README.md

@@ -0,0 +1,440 @@
+# @synopackageland/ui
+
+Vue 3 component library with a DSM 7-inspired theme for application interiors.
+Import the components you need into your Vue application.
+
+## Installation
+
+Synology Package Land UI provides Vue components for Synology package applications,
+including an embedded theme and AppRoot for shared DSM desktop windows.
+See the [public documentation](https://www.varvis.me/docs/).
+
+```bash
+npm install @synopackageland/ui --registry https://registry.npmjs.org
+```
+
+Vue **3.5 or later within Vue 3** is required by the package. Building from
+source requires Node.js **20+** and pnpm **10.33.2**.
+
+## Quick start
+
+### 1. Import the stylesheet once
+
+In your application's entry point (`src/main.ts`):
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@synopackageland/ui/theme.css'
+
+createApp(App).mount('#app')
+```
+
+The stylesheet includes the DSM 7 theme and compiled component utilities. You do
+not need to install or configure Tailwind to use these components. The package
+also exports `themes/dsm7.css` with the same content; import only one of them.
+For an app inside a DSM window, see [Using inside a DSM window](#using-inside-a-dsm-window).
+
+### 2. Import and use components
+
+Example `App.vue`:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button, Input, Select } from '@synopackageland/ui'
+import type { SelectOption } from '@synopackageland/ui'
+
+const name = ref('')
+const access = ref('read')
+const message = ref('')
+const options: SelectOption[] = [
+  { label: 'Read only', value: 'read' },
+  { label: 'Read / write', value: 'write' },
+]
+
+function save() {
+  message.value = `Saved ${name.value} with ${access.value} access`
+}
+</script>
+
+<template>
+  <form class="settings-form" @submit.prevent="save">
+    <label for="name">Name</label>
+    <Input id="name" v-model="name" placeholder="Enter a name" />
+    <Select v-model="access" :options="options" aria-label="Access level" />
+    <Button type="submit" variant="primary" :disabled="!name.trim()">
+      Save
+    </Button>
+    <p role="status">{{ message }}</p>
+  </form>
+</template>
+
+<style scoped>
+.settings-form {
+  display: grid;
+  gap: 12px;
+  max-width: 360px;
+  padding: 24px;
+}
+</style>
+```
+
+Components imported in `<script setup>` are available directly in the template.
+No `app.use()` plugin registration is required. JavaScript consumers can omit
+`lang="ts"`, the type import, and the `: SelectOption[]` annotation.
+
+## Using inside a DSM window
+
+A DSM package window is not a page of its own: every window shares the DSM
+desktop's document and its stylesheets. Two things break `theme.css` there:
+
+- DSM's stylesheets are not in cascade layers, and an unlayered rule beats every
+  layered one whatever its specificity. `theme.css` is layered (Tailwind 4), so
+  DSM's element resets such as `div,p,td{margin:0;padding:0}` win over the
+  library's utilities.
+- `theme.css` puts its tokens on `:root`, where they would restyle the desktop
+  and collide with other apps that use another version of this library.
+
+Use the embedded theme and the `AppRoot` component instead:
+
+```ts
+// the DSM entry of your app, instead of theme.css
+import '@synopackageland/ui/themes/dsm7-embedded.css'
+```
+
+```vue
+<script setup lang="ts">
+import { AppRoot, ToastProvider } from '@synopackageland/ui'
+</script>
+
+<template>
+  <AppRoot style="height: 100%">
+    <ToastProvider>
+      <!-- your app -->
+    </ToastProvider>
+  </AppRoot>
+</template>
+```
+
+`themes/dsm7-embedded.css`:
+
+- has no `@layer`, so library classes beat DSM's element rules;
+- scopes every token and rule to the app root, the element with the
+  `data-ui-app` attribute (`APP_ROOT_ATTRIBUTE` / `APP_ROOT_SELECTOR` are
+  exported), so nothing outside it changes;
+- starts with a host reset that reverts, inside the app root, what DSM's
+  element-only rules set (margins, paddings, borders, outline, position,
+  display, fonts, colors, list style, `appearance`, …), including the
+  `body button:lang(…)` font rules;
+- makes the app root the containing block of fixed overlays, so dialogs,
+  sheets and toasts stay inside the window.
+
+`AppRoot` renders `<div data-ui-app data-syno-ui>` and routes every overlay
+portal (Dialog, Sheet, Toast, Popover, Select, DropdownMenu, ContextMenu,
+Tooltip) into itself, not `document.body`, where the scoped tokens
+and reset would not reach them. Each `AppRoot` teleports into its own element;
+theme and density tokens on sibling roots reach their own portals. Modal state
+is shared across the document by default. Use `modal-scope="app"` for independent
+Dialog/Sheet and popup layers (see below). `AppRoot` disables
+reka-ui's scrollbar compensation, but this does not prevent other body mutations.
+
+Give each independently mounted Vue application a unique ID prefix **before
+mounting**, so generated dialog titles/descriptions and other ARIA references
+cannot resolve to another app's elements:
+
+```ts
+const app = createApp(App)
+app.config.idPrefix = 'my-package' // unique across apps in this document
+app.mount('#my-package-root')
+```
+
+Without `AppRoot`, put `data-ui-app` on your mount element and wrap the app in
+reka-ui's `<ConfigProvider :teleport-to="rootElement" :scroll-body="false">`.
+Inside `AppRoot`, a nested `ConfigProvider` (for `dir` or `locale`) must pass
+the same `teleport-to`, and your own `<Teleport>`s must target an element inside
+the root.
+
+Theme overrides go on your own app root, after the library stylesheet. Use a
+package-specific selector, so an override does not also match other apps:
+
+```css
+[data-ui-app][data-package='my-package'] {
+  --ui-primary: #0086e5;
+}
+```
+
+Set `data-package="my-package"` on that app's `<AppRoot>`.
+
+Keep your app's own CSS out of cascade layers too, for the same reason.
+
+If your app has its own base rules for bare elements, such as a button reset
+or heading margins, load the embedded theme as its two parts, with your rules
+between them:
+
+```ts
+import '@synopackageland/ui/themes/dsm7-embedded-reset.css'
+import './base.css' // e.g. [data-ui-app] :where(button) { border: 0 solid; }
+import '@synopackageland/ui/themes/dsm7-embedded-theme.css'
+```
+
+Your rules and the library classes have the same specificity as the reset, so
+order decides: after the reset, your rules are not reverted; before the theme,
+they do not override library classes. Loaded one after the other, the two parts
+render as `dsm7-embedded.css`. The reset reverts `font-family` on form controls
+with a doubled root attribute, `[data-ui-app][data-ui-app] :where(button, input,
+select, textarea)`, to beat DSM's `body button:lang(…)` rules; a font rule of
+yours for them needs the same selector.
+
+Known limits:
+
+- Tailwind sizes are in `rem`, which follows the desktop's `html` font size.
+- DSM rules more specific than one class (`.x-panel div`, `#id p`) are not
+  reverted; the reset covers element-only rules.
+- Default Dialog/Sheet modality remains document-wide: it locks body scrolling
+  and pointer events, disables earlier panels and hides other apps.
+- The bundled patched Reka restores host body style values/priorities after the
+  final lock release, including padding-right/margin-right. Consumers need no
+  Reka installation or package-manager patch.
+- With `<AppRoot modal-scope="app" style="height: 100%">`, Dialog/Sheet and popup
+  layers instead block only that app's background. Other apps/host remain usable;
+  local dialogs omit aria-modal and permit deliberate focus switching. Provide
+  a bounded root size and an accessible host window switch. Select scope at mount
+  time. Nested app-local AppRoots and simultaneous app/document overlays are unsupported
+  and produce explicit errors. Multiple SDK/Reka runtime copies do not coordinate.
+- Independently mounted Vue apps without unique `app.config.idPrefix` values
+  generate colliding IDs. `AppRoot` does not assign those prefixes automatically.
+- Keyframe names (`ui-*`, `spin`, `pulse`) and Tailwind's `@property`
+  registrations are global, as in `theme.css`.
+
+Body cleanup is now a normal regression test. The unprefixed ID collision
+remains an expected failure, reproducible with `UI_ISOLATION_STRICT=1`.
+See [App-local modal](docs/app-local-modal.md) for the implemented contract,
+patch delivery and browser support limits. Vue stays an external peer; the
+patched Reka implementation is bundled and tree-shakeable.
+
+Run `pnpm check:local-browser [output-dir] [existing-ego-space-id]` for a clean
+packed-consumer Chromium acceptance run (requires ego-browser).
+
+## Common component patterns
+
+### Dialog
+
+Use `v-model:open` to control visibility. The default slot contains the body;
+`trigger` and `footer` provide the opening button and action area.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button, Dialog } from '@synopackageland/ui'
+
+const open = ref(false)
+</script>
+
+<template>
+  <Dialog v-model:open="open" title="Settings" description="Review your settings.">
+    <template #trigger>
+      <Button>Open settings</Button>
+    </template>
+    <p>Your settings content goes here.</p>
+    <template #footer>
+      <Button variant="primary" @click="open = false">Done</Button>
+    </template>
+  </Dialog>
+</template>
+```
+
+### Toast notifications
+
+Wrap your page with `ToastProvider` in `App.vue`:
+
+```vue
+<script setup lang="ts">
+import { ToastProvider } from '@synopackageland/ui'
+import SettingsPage from './SettingsPage.vue'
+</script>
+
+<template>
+  <ToastProvider>
+    <SettingsPage />
+  </ToastProvider>
+</template>
+```
+
+Then call `useToast()` inside a descendant, such as `SettingsPage.vue`:
+
+```vue
+<script setup lang="ts">
+import { Button, useToast } from '@synopackageland/ui'
+
+const toast = useToast()
+</script>
+
+<template>
+  <Button @click="toast.success('Settings applied')">Show notification</Button>
+</template>
+```
+
+`useToast()` requires a provider ancestor; calling it in the same component that
+renders the provider does not satisfy that requirement.
+
+### Application layout
+
+```vue
+<script setup lang="ts">
+import { AppLayout, Button, PageHeader } from '@synopackageland/ui'
+</script>
+
+<template>
+  <AppLayout min-height="100vh">
+    <PageHeader title="Package settings" description="Manage your application.">
+      <template #actions>
+        <Button variant="primary">Save</Button>
+      </template>
+    </PageHeader>
+    <section style="padding: 24px">Your page content goes here.</section>
+  </AppLayout>
+</template>
+```
+
+`AppLayout` also accepts `sidebar`, `toolbar`, and `footer` slots.
+
+## Theme override
+
+Components use semantic CSS tokens. Import your override stylesheet after the library stylesheet to customize branding:
+
+```css
+:root {
+  --ui-primary: #0086e5;
+  --ui-primary-hover: #0077cf;
+  --ui-radius-md: 6px;
+  --ui-page-padding-x: 24px;
+  --ui-section-gap: 16px;
+}
+```
+
+Density can be switched per application subtree:
+
+```html
+<main data-ui-density="compact">
+  <!-- controls, navigation rows, toolbar and page spacing become denser -->
+</main>
+```
+
+## Current component set
+
+Primitives:
+
+- Button / IconButton
+- Input / Textarea
+- Checkbox / RadioGroup / Switch
+- Select
+- Badge / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
+- SplitButton
+- Tooltip / Popover / DropdownMenu / ContextMenu / Dialog
+- Sheet / Drawer
+- DatePicker
+- ToastProvider + `useToast()`
+- Tabs / Accordion
+
+DSM-style application building blocks:
+
+- SearchField
+- SettingsRow / SettingsSection
+- Callout / EmptyState
+- DataTable / DataGrid
+- TreeView
+- FilePicker
+- AppRoot (DSM-embedded app root)
+- AppLayout / AppSidebar / AppToolbar / AppActionBar
+- PageHeader / SectionTabs
+
+`FilePicker` owns file selection/validation/drop-zone UI only; applications remain responsible for upload transport.
+
+### DataGrid
+
+```vue
+<DataGrid
+  :columns="[{ key: 'name', label: 'Name', sortable: true, width: 170, minWidth: 80 }]"
+  :rows="rows"
+  :default-sort="{ key: 'name', direction: 'asc' }"
+  v-model:column-widths="savedWidths"
+  footer
+  refreshable
+  :labels="{ items: n => `${n} 個項目`, refresh: '重新整理', empty: '沒有資料' }"
+  @refresh="reload"
+/>
+```
+
+- **Sort.** Click a sortable header, or focus it and press Enter/Space (`aria-sort` is set). Cycle: ascending, descending, off. Leave `sort` unbound and the grid sorts itself (start with `default-sort`); bind `v-model:sort` to control it; with `:local-sort="false"` it only emits.
+- **Column resize.** Drag the right edge of a header, or focus the edge and press the left/right arrows (10px). Widths are px, never below the column's `minWidth` (default 40). Persist them with `v-model:column-widths` (or `@column-resize`); pass them back to restore. `resizable` is on by default; turn it off per grid or per column.
+- **Layout.** Sticky header (default), column dividers, hover and selected row colours, `max-height` to scroll inside the grid. `selectable` adds checkboxes; with `select-on-row-click` a row click selects the row and Ctrl/Cmd-click toggles it.
+- **Footer bar.** `footer` shows the DSM bar with the item count; `refreshable` adds the refresh button (`@refresh`, `refreshing` spins it). Without `footer` it appears only when there is more than one page or a `#footer` slot.
+- **Localisation.** Every built-in string goes through `labels`: `empty`, `items(count)`, `page(page, count)`, `previous`, `next`, `refresh`, `selectAll`, `selectRow(key)`, `resizeColumn(label)`. `emptyText` still works.
+- **Loading.** `loading` masks the table with a centred indicator; `loading-text` adds a message.
+- Virtual scrolling is not provided; page long lists (`page-size`).
+
+### Loading
+
+`Spinner` is the DSM ring (`size` is the box in px, default 24). `LoadingMask` wraps content and covers it with a white 60% mask and a centred message box while `loading`; `LoadingArea` fills its container (give the parent a height) and centres the indicator, for whole-page or whole-panel waits. `Button loading` shows the 16px ring inline. Do not place a bare `Spinner` in a block container and expect it to be centred: use `LoadingArea`.
+
+### Toolbar
+
+`SplitButton` (button + menu arrow) and `SearchField variant="filter"` (the DSM funnel filter box) join `Button`, whose default look is the flat grey DSM toolbar button.
+
+`DatePicker` uses an ISO `YYYY-MM-DD` string as its `v-model` so consumers do not need to expose the underlying date library in application state.
+
+## Library development
+
+This section is for changing the component library itself. Applications consuming
+the published npm package do not need these steps.
+
+```bash
+pnpm install
+pnpm build
+```
+
+Use the pnpm version specified in `package.json`.
+
+```bash
+pnpm story       # component workbench
+pnpm dev         # rebuild dist when library source changes
+pnpm check       # lint, typecheck, tests, and production build
+pnpm story:build # build the component workbench
+pnpm check:host  # after pnpm build: DSM host simulation screenshots (Chrome)
+```
+
+`pnpm check:host` serves `tests/dsm-host` and screenshots each overlay scene in
+English and Traditional Chinese with headless Chrome (set `CHROME` to its path
+if it is not in `/Applications`), with and without `host-simulation.css`, a
+stylesheet written for these tests that reproduces DSM's known element rules.
+The images must be identical, and must match `theme.css` on a plain page. They
+are left in `.dsm-host-shots/`.
+
+In the workbench, open `DSM 7 / App Interior` and `DSM 7 / Advanced Components`
+for reference compositions. See [SPEC.md](./SPEC.md) for architecture and
+contribution rules, and [src/index.ts](./src/index.ts) for public exports.
+
+### Try local changes in another application
+
+Build this library first, then run the following in the consuming project,
+replacing the path with your local checkout:
+
+```bash
+pnpm add link:/absolute/path/to/syno-pkg-land-ui
+```
+
+Keep `pnpm dev` running in the library checkout to rebuild `dist` as you edit.
+Use the same package imports and stylesheet import shown above. To return to the
+published package, replace the local link with the package:
+
+```bash
+pnpm add @synopackageland/ui
+```
+
+## Releases
+
+The public npm package is `@synopackageland/ui`. Both release targets are built
+from the same source and share runtime files, exports, MIT license and notices.
+Public repository and issue tracker links will be added once those are selected.
+See the [documentation](https://www.varvis.me/docs/) for usage.

package/dist/components/app/app-action-bar/AppActionBar.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    sidebarWidth?: string;
+    minHeight?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    sidebar?: (props: typeof __VLS_1) => any;
+} & {
+    toolbar?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    footer?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sidebarWidth: string;
+    minHeight: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    modalScope?: 'document' | 'app';
+};
+declare var __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    modalScope: "document" | "app";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/app/app-sidebar/AppSidebar.vue.d.ts

@@ -0,0 +1,34 @@
+import { Component } from 'vue';
+export type AppSidebarItem = {
+    key: string;
+    label: string;
+    icon?: Component;
+    badge?: string | number;
+    disabled?: boolean;
+};
+export type AppSidebarGroup = {
+    label?: string;
+    items: AppSidebarItem[];
+};
+type __VLS_Props = {
+    modelValue?: string;
+    groups: AppSidebarGroup[];
+    /** Show the DSM search field above the list; it filters items by label. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Section headers get a chevron and fold their items. */
+    collapsible?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: AppSidebarItem) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: AppSidebarItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    collapsible: boolean;
+    searchable: boolean;
+    searchPlaceholder: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-toolbar/AppToolbar.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    height?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    actions?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/app/page-header/PageHeader.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/app/section-tabs/SectionTabs.vue.d.ts

@@ -0,0 +1,16 @@
+export type SectionTab = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type __VLS_Props = {
+    modelValue: string;
+    items: SectionTab[];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/callout/Callout.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tone: "info" | "success" | "warning" | "danger";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};