@synopackageland/ui 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.9.4 (2026-10-13)
+
+Additive; DSM-window and mobile presentations render as before.
+新增功能；DSM 視窗與 mobile 呈現與先前相同。
+
+- The `web` presentation (full-page Portal, `wide-layout="web"`, 1200px+) reads as a modern SaaS console: heavier dividers, Card/Panel surfaces and the page card lifted with a soft shadow, bolder page titles and selected nav row. New tokens `--ui-app-web-shadow` and `--ui-web-sidebar-collapsed-width`; dark values in `docs/adaptive-layout.md`.
+- `web` 呈現（整頁 Portal、`wide-layout="web"`、1200px 以上）改為現代 SaaS 風格：較重分隔線、Card／Panel 與頁面卡片加柔和陰影、頁面標題與選取中的導覽列加粗。新增 token `--ui-app-web-shadow`、`--ui-web-sidebar-collapsed-width`；dark 值見 `docs/adaptive-layout.md`。
+- In `web`, the AppLayout sidebar collapses to an icon rail with tooltips and resizes between 200 and 360px by drag or keyboard (`role="separator"`). `sidebar-storage-key` remembers both per app in `localStorage`.
+- `web` 呈現下 AppLayout 側欄可收合成圖示列（附 tooltip），並可拖拉或用鍵盤在 200–360px 間調整寬度（`role="separator"`）；`sidebar-storage-key` 以各 App 的 key 將狀態記在 `localStorage`。
+- Full-page shells show the app's logo and name (`brand-name`, `brand-icon`; default: page title and icon; `#brand` slot) at the top of the web sidebar and in the phone bar and drawer, not in a DSM window. A `#sidebar-footer` slot and the new `AppSidebarUser` show the signed-in account. Sidebar group labels become section titles in web.
+- 整頁版面顯示 App 的 logo 與名稱（`brand-name`、`brand-icon`；預設取頁面標題與圖示；可用 `#brand` slot）：web 側欄頂端、手機頂部列與滑出選單頂端；DSM 視窗不顯示。新增 `#sidebar-footer` slot 與 `AppSidebarUser` 顯示目前帳號。web 呈現下側欄分組標題改為區段標題樣式。
+- `ensureDeviceViewport()` adds a device-width viewport to a full-page host. DSM's page declares none, so on a phone a Portal app was laid out ~980px wide and never reached mobile mode.
+- 新增 `ensureDeviceViewport()`：為整頁宿主加上 device-width viewport。DSM 頁面沒有宣告，手機上的 Portal App 因此以約 980px 排版，進不了 mobile 模式。
+
+## 0.9.3 (2026-10-13)
+
+Behavior changes: `Checkbox` renders its root as a `span` with a `label` for its text, `Input type="password"` adds a show/hide button, number inputs are 128px wide, `PageHeader` is sticky by default, and disabled primary and danger buttons are tinted instead of faded. Layout rules are in `docs/layout-rules.md`.
+行為變化：`Checkbox` 根元素改為 `span`，文字用 `label`；`Input type="password"` 加上顯示／隱藏按鈕；數字欄位寬 128px；`PageHeader` 預設 sticky；停用的主要與危險按鈕改為淡色底而非半透明。版面規則見 `docs/layout-rules.md`。
+
+- **Behavior change.** `Checkbox` keeps its box and text on one line even when App CSS sets `label { display: grid }`: the root is a `span` and only the text is a `label` bound to the box.
+- **行為變化。** App CSS 設 `label { display: grid }` 時，`Checkbox` 的方塊與文字仍在同一行：根元素改為 `span`，只有文字是綁定方塊的 `label`。
+- **Behavior change.** `Input type="password"` has a show/hide button (`data-ui-password-toggle`, `aria-pressed`). `Input type="number"` is 128px wide instead of the full row.
+- **行為變化。** `Input type="password"` 加上顯示／隱藏按鈕（`data-ui-password-toggle`、`aria-pressed`）。`Input type="number"` 寬 128px，不再撐滿整列。
+- **Behavior change.** `PageHeader` sticks to the top while the page scrolls; `:sticky="false"` turns it off. `EmptyState` fills the remaining height so its content is centred.
+- **行為變化。** `PageHeader` 捲動時固定在頂端，`:sticky="false"` 可關閉。`EmptyState` 撐滿剩餘高度，內容垂直置中。
+- **Behavior change.** Disabled primary and danger buttons use a pale tint of their colour with readable text (4.5:1) instead of 40% opacity.
+- **行為變化。** 停用的主要與危險按鈕改用淡色底與可讀文字（4.5:1），不再是 40% 透明度。
+- `SettingsSection` takes a `description` (one paragraph, at most 72ch) and a `#footer` slot for its actions; its title is body-colour text over a solid divider. `SettingsSection` and `Card` take `loading`, which keeps the title and shows the new `SectionSkeleton` in place of the content and actions.
+- `SettingsSection` 新增 `description`（一段，最寬 72ch）與放動作的 `#footer` slot；標題改為內文色、下方實線分隔。`SettingsSection` 與 `Card` 新增 `loading`：保留標題，內容與動作改顯示新的 `SectionSkeleton`。
+- `PathDisplay` shows a NAS path read-only: folder icon, truncated from the start with the full path as its tooltip, and a copy button. It emits `copied` and `copy-failed`.
+- 新增 `PathDisplay`：唯讀顯示 NAS 路徑，含資料夾圖示，從開頭截斷並以 tooltip 顯示完整路徑，附複製按鈕；發出 `copied`、`copy-failed`。
+- Fix: `SectionTabs` spans the full toolbar width and its first tab starts at the content edge. The `Select` chevron is vertically centred.
+- 修正：`SectionTabs` 撐滿整個 toolbar，第一個分頁與內容左緣對齊。`Select` 的箭頭垂直置中。
+- `pnpm check:polish` checks these rules in Chrome against a DSM host page.
+- `pnpm check:polish` 在 Chrome 中以 DSM 主機頁檢查上述規則。
+
 ## 0.9.2 (2026-10-12)
 
 One behavior change: while a Dialog floats outside its window (`dialog-bounds="viewport"`), focus that lands on the owning DSM window returns to the top Dialog, so Escape closes that Dialog instead of the window. Everything else is additive: Badge looks the same in the DSM 7 theme.

package/README.md

@@ -8,7 +8,8 @@ Import the components you need into your Vue application.
 For DSM window / full-page Portal / phone layouts, see
 [Responsive DSM application layout](docs/adaptive-layout.md). To generate UI
 as JSON (including with an AI and the `syno-pkg-land-ui` validate/render CLI), see
-[Declarative DSM UI](docs/json-ui.md).
+[Declarative DSM UI](docs/json-ui.md). For page layout rules, see
+[Layout rules](docs/layout-rules.md).
 
 Synology Package Land UI provides Vue components for Synology package applications,
 including an embedded theme and AppRoot for shared DSM desktop windows.
@@ -227,6 +228,9 @@ packed-consumer Chromium acceptance run (requires ego-browser).
 
 ## Common component patterns
 
+Spacing, action rows, field widths, status display and section loading follow
+[Layout rules](docs/layout-rules.md).
+
 ### Dialog
 
 Use `v-model:open` to control visibility. The default slot contains the body;

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+    icon?: string;
+    collapsed?: boolean;
+};
+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

@@ -6,22 +6,29 @@ type __VLS_Props = {
     responsive?: boolean;
     /** `web` opts a full-page Portal into the spacious layout at 1200px or wider; DSM windows keep `window`. */
     wideLayout?: WideLayout;
+    /** Remembers the web sidebar's width and collapse under `${key}:app-sidebar`; use an app-unique key. */
+    sidebarStorageKey?: string;
+    /** Heads the web sidebar and the phone bar; defaults to the page title. A DSM window shows it in its title bar instead. */
+    brandName?: string;
+    /** Logo URL beside the brand name; defaults to the page icon. */
+    brandIcon?: string;
 };
-declare var __VLS_6: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    sidebar?: (props: typeof __VLS_6) => any;
-} & {
-    toolbar?: (props: typeof __VLS_13) => any;
-} & {
-    default?: (props: typeof __VLS_15) => any;
-} & {
-    footer?: (props: typeof __VLS_17) => any;
+type __VLS_Slots = {
+    sidebar?: () => unknown;
+    'sidebar-footer'?: () => unknown;
+    brand?: () => unknown;
+    toolbar?: () => unknown;
+    default?: () => unknown;
+    footer?: () => unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     minHeight: string;
     sidebarWidth: string;
     responsive: boolean;
     wideLayout: WideLayout;
+    sidebarStorageKey: string;
+    brandName: string;
+    brandIcon: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -5,6 +5,8 @@ type __VLS_Props = {
     expandedKeys: string[];
     depth: number;
     searching?: boolean;
+    /** Icons only: each row keeps its label as the accessible name and tooltip. */
+    collapsed?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (item: AppSidebarItem) => any;

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    label: string;
+    enabled: boolean;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (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<{}>, {}, {}, {}, {}, 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/AppSidebarUser.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name: string;
+    /** A second line such as the role or the NAS name. */
+    detail?: string;
+};
+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/page-header/PageHeader.vue.d.ts

@@ -1,12 +1,15 @@
 type __VLS_Props = {
     title: string;
     description?: string;
+    sticky?: boolean;
 };
 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_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sticky: 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;

package/dist/components/composite/about-dialog/AboutDialog.vue.d.ts

@@ -58,9 +58,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     "onCheck-error"?: ((error: unknown) => any) | undefined;
 }>, {
     width: string;
+    version: string;
     defaultOpen: boolean;
     open: boolean;
-    version: string;
     tagline: string;
     iconSrc: string;
     beta: boolean;

package/dist/components/composite/path-display/PathDisplay.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    path: string;
+    copyable?: boolean;
+};
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    copied: (path: string) => any;
+    copyFailed: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCopied?: ((path: string) => any) | undefined;
+    onCopyFailed?: (() => any) | undefined;
+}>, {
+    copyable: 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/settings-section/SettingsSection.vue.d.ts

@@ -1,11 +1,15 @@
 type __VLS_Props = {
     title: string;
+    /** One paragraph under the title; its width is capped for reading. */
+    description?: string;
+    /** Shows a skeleton in place of the content and actions while they load. */
+    loading?: boolean;
     collapsible?: boolean;
     defaultOpen?: boolean;
     /** Bound with `v-model:open` for controlled collapse. */
     open?: boolean;
 };
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;
 } & {
@@ -15,7 +19,11 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    footer?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/components/containers/card/Card.vue.d.ts

@@ -11,18 +11,20 @@ type __VLS_Props = {
     toggleLabel?: string;
     /** Where footer actions sit; DSM aligns them to a side, never the centre. */
     footerAlign?: 'start' | 'end' | 'between';
+    /** Shows a skeleton in place of the body and footer while they load. */
+    loading?: boolean;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_8) => any;
 } & {
     'header-actions'?: (props: typeof __VLS_10) => any;
 } & {
-    body?: (props: typeof __VLS_17) => any;
+    body?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_24) => any;
 } & {
-    footer?: (props: typeof __VLS_21) => any;
+    footer?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:expanded": (value: boolean) => any;

package/dist/components/feedback/validation-popup/ValidationPopup.vue.d.ts

@@ -24,11 +24,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    offset: number;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
     defaultOpen: boolean;
     open: boolean;
-    offset: number;
     disable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/primitives/pagination/Pagination.vue.d.ts

@@ -77,9 +77,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onChangePage?: ((payload: PaginationSwitch) => any) | undefined;
 }>, {
     modelValue: number;
-    labels: Partial<PaginationLabels>;
     end: string | number;
     mode: "normal" | "less";
+    labels: Partial<PaginationLabels>;
     start: string | number;
     refresh: boolean;
     total: string | number;

package/dist/components/primitives/rich-text/RichText.vue.d.ts

@@ -48,7 +48,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
         default: () => string[];
     };
 }>> & Readonly<{
-    "onClick-link"?: ((linkId: string, attrs: Record<string, string>, event: KeyboardEvent | MouseEvent) => any) | undefined;
+    "onClick-link"?: ((linkId: string, attrs: Record<string, string>, event: MouseEvent | KeyboardEvent) => any) | undefined;
 }>, {
     text: string;
     parseTags: string[];

package/dist/components/primitives/skeleton/SectionSkeleton.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    lines?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    lines: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/skeleton/Skeleton.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
     radius?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    width: string;
     height: string;
+    width: string;
     radius: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/primitives/tag/Tag.vue.d.ts

@@ -35,10 +35,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     measure: typeof measure;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     remove: () => any;
-    click: (event: KeyboardEvent | MouseEvent) => any;
+    click: (event: MouseEvent | KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRemove?: (() => any) | undefined;
-    onClick?: ((event: KeyboardEvent | MouseEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
 }>, {
     label: string;
     disabled: boolean;

package/dist/composables/sidebarPreference.d.ts

@@ -0,0 +1,6 @@
+export declare const clampSidebarWidth: (width: number) => number;
+/** Width and collapse of the web-presentation sidebar, remembered under `${storageKey}:app-sidebar`. */
+export declare function useSidebarPreference(storageKey: string | undefined): {
+    width: import('vue').Ref<number, number>;
+    collapsed: import('vue').Ref<boolean, boolean>;
+};

package/dist/i18n/text.d.ts

@@ -32,6 +32,9 @@ export declare const englishUiText: {
     readonly Notifications: "Notifications";
     readonly "Press F6 to access notifications": "Press F6 to access notifications";
     readonly "Application navigation": "Application navigation";
+    readonly "Collapse navigation": "Collapse navigation";
+    readonly "Expand navigation": "Expand navigation";
+    readonly "Resize navigation": "Resize navigation";
     readonly Sections: "Sections";
     readonly Slider: "Slider";
     readonly "Increase value": "Increase value";
@@ -138,6 +141,10 @@ export declare const englishUiText: {
     readonly "Pagination, {total} item total": "Pagination, {total} item total";
     readonly Notification: "Notification";
     readonly "Notifications ({hotkey})": "Notifications ({hotkey})";
+    readonly "Show password": "Show password";
+    readonly "Hide password": "Hide password";
+    readonly "Copy path": "Copy path";
+    readonly Copied: "Copied";
 };
 export type UiTextKey = keyof typeof englishUiText;
 export type UiTranslator = (key: UiTextKey, values?: Record<string, string | number>) => string;

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { default as LoadingArea } from './components/primitives/loading/LoadingA
 export { default as LoadingIndicator } from './components/primitives/loading/LoadingIndicator.vue';
 export { default as Progress } from './components/primitives/progress/Progress.vue';
 export { default as Skeleton } from './components/primitives/skeleton/Skeleton.vue';
+export { default as SectionSkeleton } from './components/primitives/skeleton/SectionSkeleton.vue';
 export { default as Surface } from './components/primitives/surface/Surface.vue';
 export { default as Tooltip } from './components/primitives/tooltip/Tooltip.vue';
 export { default as Popover } from './components/primitives/popover/Popover.vue';
@@ -118,6 +119,7 @@ export type { TreeNode, TreeViewCheckPayload, TreeViewDraggableConfig, TreeViewP
 export { default as FilePicker } from './components/composite/file-picker/FilePicker.vue';
 export type { FileRejection } from './components/composite/file-picker/FilePicker.vue';
 export { default as CopyCutField } from './components/composite/copy-cut-field/CopyCutField.vue';
+export { default as PathDisplay } from './components/composite/path-display/PathDisplay.vue';
 export type { CopyCutFieldAutosize } from './components/composite/copy-cut-field/CopyCutField.vue';
 export { default as DataView } from './components/composite/data-view/DataView.vue';
 export { default as VirtualList } from './components/composite/virtual-list/VirtualList.vue';
@@ -164,7 +166,9 @@ 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 { AppPresentation, WideLayout } from './lib/adaptiveLayout';
+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';
 export type { AppSidebarGroup, AppSidebarItem } from './components/app/app-sidebar/AppSidebar.vue';
 export { default as AppToolbar } from './components/app/app-toolbar/AppToolbar.vue';
 export { default as AppActionBar } from './components/app/app-action-bar/AppActionBar.vue';