@synopackageland/ui 0.9.3 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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`.

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/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";

package/dist/index.d.ts

@@ -166,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';