@synopackageland/ui 0.17.6 → 0.17.7

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.17.7 (2026-10-29)
+
+Additive only: existing props, defaults and DOM stay as they were, apart from one new attribute on `Fieldset`.
+
+- `AppLayout` takes a `#tabbar` slot, rendered only in the mobile presentation after the content. A filled layout ends its column with it; a layout that scrolls the document pins it to the viewport bottom and keeps the content's end clear of it.
+- Add `AppTabBar`: a phone's bottom navigation of icon-over-label tabs (`items`, `v-model` key, `aria-current="page"`), 56px (`--ui-tab-bar-height`) plus the device safe area. A tab's `badge` shows a count (99+ above 99, none at 0) or, with `true`, a dot, each named for a screen reader. Inside an `AppLayout` with a sidebar it adds a More tab that opens the navigation drawer (`more` turns it on or off and it always emits `more`); while that tab is shown, the phone bar drops its menu button, so the drawer has one way in, and focus returns to More when the drawer closes. With no brand to show, the phone bar is then left out. A layout without a tab bar, or with `:more="false"`, keeps the menu button. It hides while a touch keyboard is open and when `hidden` is set.
+- Add `CompletionToggle`: a round done toggle (`role="checkbox"`, `v-model`) with a 44px touch target (32px with a mouse) that fills and draws its check when it turns done. `pending` dims it and ignores presses while the app saves; `error` marks a failed change. Its click does not reach the row underneath.
+- Add `MentionTextarea`: a plain-text box where `@` at a word start opens a list of people the app supplies (`candidates`, answered from `search`). A chosen person is written `@Label` and kept in `v-model:mentions`; arrows, Enter or Tab choose, Escape closes, and an input method's Enter is left alone. With `maxlength` it counts the stored characters from 90% of the limit and over it, without cutting the text.
+- Add `CommentItem`: avatar, author, time (`<time datetime>`), and a plain-text body keeping line breaks, showing `@[id]` mentions as names (grey for an inactive account) and http(s) addresses as links. `edited` adds Edited; `deleted` keeps the place with "This comment was deleted"; `highlighted` flashes it once; `#actions` sits beside the header.
+- Add `mentionTokens`, `mentionText` and `mentionParts` to turn `@Label` text into `@[id]` tokens, back, and into display parts.
+- New strings in all nine built-in languages: "Quick navigation", "{count} unread", "Unread", "Done", "Edited", "This comment was deleted", "{count} characters left", "{count} characters over the limit", "People" and "No matching people".
+- Add `FormGroup`: the options under a parent checkbox or switch, as DSM draws them. It indents its content one 28px level (`indent` takes levels or a CSS length) and, with `disabled` (usually `!parentOn`), disables everything inside: it is a native `<fieldset>`, and `Input`, `Textarea`, `Select`, `Combobox`, `SearchField`, `Checkbox`, `CheckboxGroup`, `RadioGroup`, `Switch`, `InputSteppers`, `Button` and `FormItem` labels read the state, so they look disabled too. Groups nest; the indent adds up. A `FormItem` inside gives the group's indent up from its label column, so its control stays on the form's column (`data-ui-form-group`, `data-disabled`). `useFormGroup()` and `useGroupDisabled()` let a custom control follow it.
+- Add `FormNote`: DSM's teal "Note:" heading over a bulleted list (`items`) or a sentence (slot), set apart from the fields above it (`role="note"`, `data-ui-form-note`). The heading is in the UI language; `title` replaces it.
+- Add `InfoBox`: DSM's flat blue box for facts to read or copy, such as addresses (`data-ui-info-box`), with an optional `title`.
+- `Form` takes `labelWidth`: one label column for every `FormItem`, `SettingsRow` and `FormActions inset` in it, still capped at 40% of a narrow row.
+- Fields, `FormGroup`s, `FormNote`s and `InfoBox`es inside a form keep the form's field gap; a note or info box after fields starts 16px down. `Fieldset` sections one after another are 20px apart (`data-ui-fieldset`).
+- A `DataGrid` or `DataTable` inside a `FormItem` no longer lets a checkbox or select in a cell take over the field: the label keeps its own id and stays at full strength when a cell control is disabled.
+- New theme tokens `--ui-note-title` and `--ui-info-box-bg`, with dark values.
+- New string in all nine built-in languages: "Note:".
+
 ## 0.17.6 (2026-10-29)
 
 - The `syno-pkg-land-ui` bin path is written without a leading `./`, so npm keeps the command in the published registry metadata.

package/README.md

@@ -522,13 +522,14 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
+- Form / FormItem / FormGroup / FormNote / InfoBox / FormActions / Fieldset (DSM-native settings structure, see [docs/layout-rules.md](docs/layout-rules.md))
 - Callout (see [docs/callout.md](docs/callout.md) for when to use a Callout, a toast or an inline note) / EmptyState / StepList
 - ConnectionTopology
 - DataTable / DataGrid
 - TreeView
 - FilePicker
 - AppRoot (DSM-embedded app root)
-- AppLayout / AppSidebar / AppToolbar / AppActionBar
+- AppLayout / AppSidebar / AppToolbar / AppActionBar / AppTabBar
 - PageHeader / SectionTabs
 - Statistic / StatTile / StatTileGroup
 - SplitPane / StorageMeter / StackedBar (see [docs/size-and-split.md](docs/size-and-split.md))
@@ -597,6 +598,57 @@ narrower.
 </StatTileGroup>
 ```
 
+### AppTabBar: a phone's bottom navigation
+
+Put an `AppTabBar` in `AppLayout`'s `#tabbar` slot. It shows only in the mobile
+presentation: four or so tabs of an icon over a short label, 56px tall plus the
+device's safe area, the selected one `aria-current="page"`. A tab's `badge` is
+a count (99+ above 99, nothing at 0) or `true` for a dot. In a layout with a
+sidebar a last More tab opens the navigation drawer and takes the place of the
+phone bar's menu button (a layout without a tab bar keeps it). The bar hides while a
+touch keyboard is open; set `hidden` while a full-screen drawer covers the page.
+
+```vue
+<AppLayout height="fill">
+  <template #sidebar><AppSidebar v-model="page" :groups="groups" /></template>
+  <template #tabbar>
+    <AppTabBar v-model="tab" :items="[
+      { key: 'home', label: 'Home', icon: House },
+      { key: 'work', label: 'My work', icon: Bell, badge: unread },
+    ]" />
+  </template>
+  <RouterView />
+</AppLayout>
+```
+
+### Collaboration: CompletionToggle, MentionTextarea, CommentItem
+
+`CompletionToggle` is the round done toggle of a task row, card or detail
+header: a `role="checkbox"` with a 44px touch target. Show the new state at
+once, set `pending` while it saves, and on failure put the old state back and
+set `error`. Its click does not reach the row, so it never also opens the item.
+Name it after the item: `label="Done: Send the quote"`.
+
+`MentionTextarea` opens a list of people on `@`. The app owns the people: it
+answers `search` (the text after `@`) by setting `candidates`, and turns
+`filter` off when its server already matched them. A chosen person is written
+`@Label` in the text and kept in `v-model:mentions`; `mentionTokens(text,
+mentions).body` is what to store, with `@[id]` tokens, and `mentionText(body,
+people)` turns a stored body back for editing. With `maxlength` the box counts
+the stored characters near and over the limit; it never cuts text, so disable
+sending while it is over (`data-over`).
+
+`CommentItem` shows one comment: avatar, author, the time as the app formats
+it, and the stored body with its line breaks, mentions as names and http(s)
+links. `edited`, `deleted` and `highlighted` (a one-time flash for a comment
+opened from a notification) cover the rest; edit and delete controls go in
+`#actions`.
+
+```vue
+<CommentItem v-for="c in comments" :key="c.id" :author="c.author.name" :time="c.when" :body="c.body" :mentions="c.mentions" :edited="!!c.editedAt" :deleted="c.deleted" />
+<MentionTextarea v-model="text" v-model:mentions="mentions" :candidates="people" :filter="false" :maxlength="4000" @search="findPeople" />
+```
+
 ### Status: StatusDot, StepList, ConnectionTopology
 
 `StatusDot` is an 8px tone dot; `pulse` ripples a ring out of it for a state

package/dist/CollaborationDemo.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    part: 'tasks' | 'comments';
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

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

@@ -32,6 +32,8 @@ type __VLS_Slots = {
     toolbar?: () => unknown;
     default?: () => unknown;
     footer?: () => unknown;
+    /** A phone's bottom tab bar (AppTabBar), shown only in the mobile presentation. */
+    tabbar?: () => unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     brand: (event: MouseEvent) => any;

package/dist/components/app/app-tab-bar/AppTabBar.vue.d.ts

@@ -0,0 +1,37 @@
+import { Component } from 'vue';
+export type AppTabBarItem = {
+    key: string;
+    label: string;
+    icon?: Component;
+    /** A count shows as a number (99+ above 99) and 0 as nothing; `true` shows a dot. */
+    badge?: number | boolean;
+    disabled?: boolean;
+};
+type __VLS_Props = {
+    items: AppTabBarItem[];
+    /** The selected tab's key. */
+    modelValue?: string;
+    /**
+     * Adds a last More tab. Defaults to on inside an AppLayout with a sidebar,
+     * where it opens the navigation drawer; it always emits `more`.
+     */
+    more?: boolean;
+    /** Hides the bar, for example while a full-screen drawer covers the page. */
+    hidden?: boolean;
+    /** Accessible name of the bar. */
+    ariaLabel?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (key: string) => any;
+    more: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((key: string) => any) | undefined;
+    onMore?: (() => any) | undefined;
+}>, {
+    modelValue: string;
+    ariaLabel: string;
+    hidden: boolean;
+    more: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/comment-item/CommentItem.vue.d.ts

@@ -0,0 +1,46 @@
+import { MentionCandidate } from '../../../lib/mentions';
+type __VLS_Props = {
+    author: string;
+    /** Keeps the avatar colour stable across renamed accounts. */
+    authorId?: string;
+    /** Avatar picture; the author's first character otherwise. */
+    avatar?: string;
+    /** The time as shown, formatted by the app: `Yesterday 17:20`. */
+    time?: string;
+    /** The same time for machines (`<time datetime>`), such as an ISO string. */
+    datetime?: string;
+    /** Plain text with `@[id]` mention tokens. */
+    body?: string;
+    /** Names for the mention tokens; an unknown id shows as itself. */
+    mentions?: MentionCandidate[];
+    edited?: boolean;
+    deleted?: boolean;
+    highlighted?: boolean;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    avatar?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    body: string;
+    time: string;
+    avatar: string;
+    mentions: MentionCandidate[];
+    authorId: string;
+    datetime: string;
+    edited: boolean;
+    deleted: boolean;
+    highlighted: boolean;
+}, {}, {}, {}, 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/composite/completion-toggle/CompletionToggle.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    /** Done. */
+    modelValue?: boolean;
+    /** Saving: the ring dims and ignores presses but keeps focus. */
+    pending?: boolean;
+    /** The last change failed; the ring turns red and shakes once. */
+    error?: boolean;
+    disabled?: boolean;
+    /** Accessible name, best naming the item: `Done: Send the quote`. Defaults to "Done". */
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (done: boolean) => any;
+    "update:modelValue": (done: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((done: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((done: boolean) => any) | undefined;
+}>, {
+    label: string;
+    disabled: boolean;
+    pending: boolean;
+    error: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/form/Form.vue.d.ts

@@ -12,6 +12,8 @@ type __VLS_Props = {
     fieldWidth?: FieldWidth;
     /** Default message placement; a FormItem can override it. */
     validateMessageDisplayMode?: ValidateMessageDisplayMode;
+    /** One label column for every FormItem, FormActions `inset` and SettingsRow in the form (a CSS length); still capped at 40% of a narrow row. */
+    labelWidth?: string;
 };
 /** Validates every field; resolves `true` only when all of them pass. */
 declare function validate(trigger?: ValidateTrigger | null, options?: {

package/dist/components/composite/form/FormGroup.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** Indent levels (multiples of 28px) or any CSS length. */
+    indent?: number | string;
+    /** Disables every control in the group, usually `!parentOn`. */
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (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<{}>, {
+    disabled: boolean;
+    indent: number | 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/composite/form-note/FormNote.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    /** Replaces the "Note:" heading. */
+    title?: string;
+    /** One bullet each; the default slot follows them. */
+    items?: string[];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (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/composite/info-box/InfoBox.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** One line over the content. */
+    title?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (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/composite/mention-textarea/MentionTextarea.vue.d.ts

@@ -0,0 +1,52 @@
+import { MentionCandidate } from '../../../lib/mentions';
+type __VLS_Props = {
+    modelValue?: string;
+    /** The people mentioned so far, each still written as `@Label` in the text. */
+    mentions?: MentionCandidate[];
+    /** People to offer for the current query. */
+    candidates?: MentionCandidate[];
+    /** Narrows `candidates` by the query here; turn off when the server already did. */
+    filter?: boolean;
+    /** Shows "Loading…" in the list while the caller fetches. */
+    loading?: boolean;
+    /** Characters the stored body may hold; the count shows from 90% and over. */
+    maxlength?: number;
+    /** Where the list opens; `top` suits a box pinned to the bottom of a screen. */
+    side?: 'top' | 'bottom';
+    placeholder?: string;
+    /** Visible lines before it grows; it grows with its text to about eight lines where the browser supports it. */
+    rows?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    ariaLabel?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    search: (query: string) => any;
+    select: (person: MentionCandidate) => any;
+    "update:modelValue": (text: string) => any;
+    "update:mentions": (mentions: MentionCandidate[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: ((query: string) => any) | undefined;
+    onSelect?: ((person: MentionCandidate) => any) | undefined;
+    "onUpdate:modelValue"?: ((text: string) => any) | undefined;
+    "onUpdate:mentions"?: ((mentions: MentionCandidate[]) => any) | undefined;
+}>, {
+    filter: boolean;
+    loading: boolean;
+    disabled: boolean;
+    id: string;
+    modelValue: string;
+    placeholder: string;
+    invalid: boolean;
+    ariaLabel: string;
+    rows: number;
+    side: "top" | "bottom";
+    mentions: MentionCandidate[];
+    candidates: MentionCandidate[];
+    maxlength: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/mention-textarea/PersonInitials.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    name: string;
+    id?: string;
+    src?: string;
+    size?: 'sm' | 'md';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md";
+    id: string;
+    src: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/formGroup.d.ts

@@ -0,0 +1,12 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/** What a FormGroup hands to the fields and controls inside it. */
+export interface FormGroupContext {
+    /** True while this group, or a group around it, is disabled. */
+    disabled: boolean;
+    /** The total indent of this group and every group around it, as a CSS length. */
+    indent: string;
+}
+export declare const FORM_GROUP_KEY: InjectionKey<FormGroupContext | null>;
+export declare function useFormGroup(): FormGroupContext | null;
+/** A control's own `disabled`, or-ed with the FormGroup it sits in. */
+export declare function useGroupDisabled(own: () => boolean | undefined): ComputedRef<boolean>;

package/dist/composables/softKeyboard.d.ts

@@ -0,0 +1,6 @@
+export declare function raisesKeyboard(element: Element | null): boolean;
+/**
+ * True while a text field has focus on a touch device, where the on-screen
+ * keyboard is then open. A mouse-and-keyboard device never reports one.
+ */
+export declare function useSoftKeyboard(): import('vue').Ref<boolean, boolean>;

package/dist/i18n/text.d.ts

@@ -28,6 +28,16 @@ export declare const englishUiText: {
     readonly "Toggle content": "Toggle content";
     readonly "More options": "More options";
     readonly More: "More";
+    readonly "Quick navigation": "Quick navigation";
+    readonly "{count} unread": "{count} unread";
+    readonly Unread: "Unread";
+    readonly Done: "Done";
+    readonly Edited: "Edited";
+    readonly "This comment was deleted": "This comment was deleted";
+    readonly "{count} characters left": "{count} characters left";
+    readonly "{count} characters over the limit": "{count} characters over the limit";
+    readonly People: "People";
+    readonly "No matching people": "No matching people";
     readonly "Close notification": "Close notification";
     readonly Notifications: "Notifications";
     readonly "Press F6 to access notifications": "Press F6 to access notifications";
@@ -163,6 +173,7 @@ export declare const englishUiText: {
     readonly "Hide password": "Hide password";
     readonly "Learn more": "Learn more";
     readonly "Show less": "Show less";
+    readonly "Note:": "Note:";
     readonly "Copy path": "Copy path";
     readonly "Path: {path}": "Path: {path}";
     readonly Copied: "Copied";

package/dist/index.d.ts

@@ -130,6 +130,11 @@ export { default as Statistic } from './components/composite/statistic/Statistic
 export { default as StatTile } from './components/composite/stat-tile/StatTile.vue';
 export type { StatTileTone } from './components/composite/stat-tile/StatTile.vue';
 export { default as StatTileGroup } from './components/composite/stat-tile/StatTileGroup.vue';
+export { default as CompletionToggle } from './components/composite/completion-toggle/CompletionToggle.vue';
+export { default as MentionTextarea } from './components/composite/mention-textarea/MentionTextarea.vue';
+export { default as CommentItem } from './components/composite/comment-item/CommentItem.vue';
+export { mentionParts, mentionText, mentionTokens } from './lib/mentions';
+export type { MentionCandidate, MentionPart } from './lib/mentions';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
 export { default as DataGrid } from './components/composite/data-grid/DataGrid.vue';
 export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps } from './components/composite/data-grid/DataGrid.vue';
@@ -192,6 +197,8 @@ export { default as AppLayout } from './components/app/app-layout/AppLayout.vue'
 export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
 export { appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_LAYOUT_MIN } from './lib/adaptiveLayout';
 export type { AppNavigation, AppPresentation, WideLayout } from './lib/adaptiveLayout';
+export { default as AppTabBar } from './components/app/app-tab-bar/AppTabBar.vue';
+export type { AppTabBarItem } from './components/app/app-tab-bar/AppTabBar.vue';
 export { ensureDeviceViewport } from './lib/deviceViewport';
 export { default as AppSidebar } from './components/app/app-sidebar/AppSidebar.vue';
 export { default as AppSidebarUser } from './components/app/app-sidebar/AppSidebarUser.vue';
@@ -212,6 +219,11 @@ export { useProps, provideConfigManager } from './composables/configCascade';
 export type { ConfigEntry, ConfigKey, ConfigProviderProps, ConfigRecord } from './composables/configCascade';
 export { default as Form } from './components/composite/form/Form.vue';
 export { default as FormItem } from './components/composite/form/FormItem.vue';
+export { default as FormGroup } from './components/composite/form/FormGroup.vue';
+export { useFormGroup, useGroupDisabled } from './composables/formGroup';
+export type { FormGroupContext } from './composables/formGroup';
+export { default as FormNote } from './components/composite/form-note/FormNote.vue';
+export { default as InfoBox } from './components/composite/info-box/InfoBox.vue';
 export { useFormContext, useFormField } from './components/composite/form/context';
 export { normalizeRules, validateWithRules } from './components/composite/form/rules';
 export type { FormContext, FormFieldContext, FormFieldHandle } from './components/composite/form/context';