@synopackageland/ui 0.20.3 → 0.20.5

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 0.20.5 (2026-11-05)
+
+- In a DSM window on a touch device, a small Button, IconButton, checkbox, radio, switch or tappable Tag keeps its 44px tap box around itself. The host reset made these controls static, so the tap box covered the nearest positioned ancestor (a whole board or panel) and took every tap in it. `check:mobile` now fails when a tap box reaches past twice its control or 64px
+- Mobile overflow checks now block the full release gate. Tables and nowrap examples scroll within their parent; wizard actions wrap, topology and Select labels fit, and Slider bubbles stay inside their track. Sheets, heading links, preset options and settings switches use the touch hit area; the rich text toolbar moves 44px tools into More earlier
+- Phone tabs have 44px tap targets and selected-tab scrolling; short segmented controls fill the available width
+- On a phone, RecordPanel and AsidePanel open as the BottomSheet: the record sheet is 92% with an optional Previous / Next footer and comments as a pushed page, and the assistant rests at half or 92%. Their own swipe code is gone
+- Phone shell: `AppLayout`'s phone bar is one 48px row with a menu or Back button (`back`, emits `back`), the page title (new `title` prop, else the page's `PageHeader` title, else the brand) and one action plus "…" (`headerActions`, emits `headerAction`); the navigation drawer is Reka's Drawer from the left (85%, up to 320px), swipes left to close, moves 240/180ms and closes on Back. `AppTabBar` shows at most five slots, the rest under More, and pads by `--ui-safe-bottom`
+- Phone forms: Input and SearchField set keyboard hints by type (new `integer` and `decimal` types), Form gives fields Next / Done in order, and FormActions sticks above the keyboard with full-width buttons by default on a phone
+- New `BottomSheet` on Reka's Drawer (reka-ui 2.11.0): grabber, swipe to close, keyboard-aware heights, Back to close and `confirm-close`. `Dialog` on a phone and `Sheet side="bottom"` use it
+- Phone push navigation: `ListDetail` at 640px or narrower pushes the detail over the list (Back, browser Back and an edge swipe pop it); `SectionTabs` on a phone shows five or more sections or a `fill` settings page as a grouped list that pushes each section, and four or fewer as a full-width SegmentControl; new `PushTransition`
+- On a phone, Select and the combobox selects, DatePicker, ColorPicker and menus with more than five actions or a submenu open as bottom sheets (48px rows, a pinned search, Done or Cancel); new `usePhoneSurface` decides popover or sheet
+- On a phone, `Pagination` is `‹ Page 1 of N ›` with 44px buttons and a sheet for the page and page size. `DataGrid` and `DataTable` show a list (title, subtitle, trailing status; new column `list` role); DataGrid selects by long press with a bottom selection bar and moves sorting and columns into a sheet. DataTable's `auto` view is the list instead of cards
+
+## 0.20.4 (2026-11-05)
+
+- Keep anchored menus, pickers and tips within the shared floating boundary, safe area and keyboard inset
+- On a phone, toasts sit at the bottom full width above the tab bar or keyboard, swipe down and show one at a time; notifications sit full width at the top. Hover-only card actions, the ScheduleTable pen and the TypoHeader anchor show at rest without hover, and a 250ms press opens a card's menu
+
+- Compact chrome is the only density: web chrome rows 48px (window and phone keep 44px), chrome controls 28px, header actions 32px, web navigation rows 32px, icons 16px. The `web` presentation uses the system font stack (no Inter)
+- Final motion tokens: fast 150ms, normal 200ms, slow 240ms, new `--ui-motion-panel` 300ms and `--ui-motion-exit` 100ms, plus stack, flash, skeleton pulse, drag and drag settle tokens. Under reduced motion or `data-ui-motion="off"` every duration token reads 0ms; `motionMs()` reads a token from computed style
+- `AppLayout wide-layout="web"` starts at a 960px container; at 960–1199px the sidebar starts as the 48px rail (was 64px). The sidebar moves its own width on the panel token instead of animating the grid columns. `PageHeader` and `PageToolbar` are one 48px row in the web presentation
+- `AppLayout` takes an `aside` slot with `v-model:aside` (`open`, `collapsed`, `expanded`) and `v-model:aside-width` (380px, 320–560px). New `AsidePanel` fills it: a 48px rail, a docked panel, a floating panel when the page would be narrower than 480px, and a bottom sheet on a phone. `useAsidePreference` stores its state and width
+- New `RecordPanel`: a non-modal record panel docked over the view, so opening, closing and resizing never change the view's width; 560px default, a sash to resize, an optional comments column, a full-screen sheet at 640px and narrower
+- New `AdaptivePanel`: a popover in a wide host and a bottom sheet at 640px and narrower, keeping the draft and focus across the switch
+- Popover, DropdownMenu, Select and the combobox selects share one layer stack: Escape closes only the topmost surface, and an Escape that ends an IME composition closes nothing. `provideOverlayMotion('none')` makes popups inside a grid editor appear at once
+- Skeletons take the final geometry (`SectionSkeleton variant="grid" | "cards" | "fields"`); shapes show after 300ms. Toasts: success 3s, info and warning 5s, danger stays; `pending()` turns into its result in place. New `StatusSlot` and `useShowAfter`. `ToastProvider` drops its `duration` prop
+- New `VirtualCardGrid`, `CardCover` and `CardField`: a virtual card gallery whose card height comes from `cardHeight()`, whose column count is known before the first card renders, and which holds its columns while a side region moves
+- The interaction core (outside layers, IME guard, focus, pointer gesture, edit session), the drag kit (`createDragKit`, `useDragKit`, auto-scroll) and the motion helpers are exported from the package entry ([UX foundation](docs/ux-foundation.md))
+- New `@synopackageland/ui/grid` entry: `GridHost`, a canvas grid ported from Teable's MIT grid, with cell renderers for every field kind, editing with IME-safe first keys, and a save-status store. Load it lazily
+- Five new accessible labels (Checked, Not checked, Rating, Saving, Not saved) and `Restore {name}`, in all nine locales
+- Phone viewport and keyboard layer: `AppRoot full-page` makes the root a `100dvh` page whose document never scrolls (no overscroll reload) and calls `ensureDeviceViewport()`, which now adds `viewport-fit=cover, interactive-widget=resizes-content` (zoom stays on). Every `AppRoot` publishes `--ui-vvh`, `--ui-vv-top`, `--ui-kb-inset` and `data-ui-keyboard="open"` from the visual viewport (60px threshold, one read per frame) and keeps the focused field visible inside its own scroller. New `useVisualViewport`, `focusWithoutScroll` and `useBackDismiss` (Back closes the top sheet, drawer or pushed page only); `useSoftKeyboard` is exported and confirms the keyboard with the viewport
+- Phone and touch: the touch rules now apply in every app (they were keyed on a theme name nobody set). On a coarse pointer every field, select and editable text is 16px, and small controls get a 44px tap box. A phone (640px and narrower) reads 15px body, 13px secondary text, 44px fields and form buttons, 48px list and menu rows and one 48px header; long words break instead of widening a row; hover styles apply only where hover exists ([Mobile-native UI](docs/mobile-native.md))
+- Third-party notices for the ported Teable and Baserow code are in `LICENSES/ux-foundation.md` and `LICENSES/ux-grid-teable.md`
+- Popover and Tooltip use one floating preset (`floating.ts`): 8px plus safe area and soft keyboard from the edge, `sticky: 'partial'`, `hideWhenDetached`, sizes from Reka's available room instead of `100vw`. The AppRoot portal layer clips so a popup never grows the page. Tooltip `openOnTap` is on by default on coarse pointers, and a real tap (with its click) no longer closes it at once
+
 ## 0.20.3 (2026-11-04)
 
 - `DataGrid` and `DataTable` remember column widths and view state per App and `stateKey`, so two Apps with the same key no longer share widths; widths saved under the previous key are still read

package/LICENSES/THIRD_PARTY.md

@@ -211,7 +211,7 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 ```
 
-## @floating-ui/vue@1.1.11
+## @floating-ui/vue@2.0.1
 
 Declared license: MIT
 
@@ -3393,7 +3393,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 ```
 
-## reka-ui@2.10.5
+## reka-ui@2.11.0
 
 Declared license: MIT
 
@@ -3603,36 +3603,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 ```
 
-## vue-demi@0.14.10
-
-Declared license: MIT
-
-### LICENSE
-
-```text
-MIT License
-
-Copyright (c) 2020-present, Anthony Fu
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-```
-
 ## w3c-keyname@2.2.8
 
 Declared license: MIT

package/LICENSES/ux-foundation.md

@@ -0,0 +1,83 @@
+# @synopackageland/ui UX foundation: third-party notices
+
+`dist/index.js` contains small ports of MIT-licensed code from Teable and
+Baserow in the interaction core, drag kit, panels and virtual cards. Each
+ported source file keeps the notice below in its header; the built file drops
+those comments and starts with a one-line notice pointing here instead. The
+canvas grid in `dist/grid.js` has its own notices in
+[ux-grid-teable.md](ux-grid-teable.md) and [ux-grid-baserow.md](ux-grid-baserow.md).
+
+Nothing is taken from Teable `apps/*` (AGPL-3.0), Baserow `premium/` or
+`enterprise/` (proprietary) or NocoDB (Sustainable Use License); where those
+projects informed a behaviour, only the technique was used. No Teable or
+Baserow name, logo or icon asset is shipped.
+
+## Ported files
+
+| Source file in this package | Ported from | Upstream commit |
+| --- | --- | --- |
+| `src/interaction/ime.ts` (`isPrintableKey`) | Teable `packages/sdk/src/components/grid/utils/hotkey.ts` | `f8be01fad` |
+| `src/interaction/gesture.ts` (5px threshold, half-item drop rule) | Teable `packages/sdk/src/components/grid/hooks/useDrag.ts:8-119` | `f8be01fad` |
+| `src/components/primitives/popover/overlay.ts` (`skipAutoFocusOnTouch`) | Teable `packages/ui-lib/src/shadcn/ui/popover.tsx:30-45` | `f8be01fad` |
+| `src/components/composite/record-panel/recordPanelWidth.ts` (width rule) | Teable `packages/sdk/src/components/expand-record/Panel.tsx:20-26, 83-88` | `f8be01fad` |
+| `src/components/composite/record-panel/RecordPanel.vue` (sash, clip layer, drag-to-width) | Teable `packages/sdk/src/components/expand-record/Panel.tsx:100-171`, `packages/ui-lib/src/base/resize-handle/ResizeHandleBar.tsx:1-35` | `f8be01fad` |
+| `src/interaction/outside.ts` (outside-press snapshot and ignore list) | Baserow `web-frontend/modules/core/utils/dom.js` `onClickOutside` | `98f727dc2` |
+| `src/dnd/dragKit.ts` (buffered-rows drag and drop, 100ms swap lock) | Baserow `web-frontend/modules/database/mixins/bufferedRowsDragAndDrop.js:64-235`, `store/view/bufferedRows.js` | `98f727dc2` |
+| `src/dnd/autoScroll.ts` (edge zone and speed ramp) | Baserow `web-frontend/modules/core/directives/autoScroll.js:30-99` | `98f727dc2` |
+| `src/virtual/cardHeight.ts` (`cardHeight`) | Baserow `web-frontend/modules/database/utils/card.js:1-24` | `aa2402b7c716c3eadc5a382af3e880756e026d9c` |
+
+## Teable licence
+
+Teable `packages/*` is MIT licensed.
+
+```text
+MIT License
+
+Copyright (c) 2023-2025 Teable, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Baserow licence
+
+Baserow Open Source Edition (outside `premium/` and `enterprise/`) is MIT
+(Expat) licensed.
+
+```text
+MIT License
+
+Copyright (c) 2019-present Baserow B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this
+software and associated documentation files (the "Software"), to deal in the Software
+without restriction, including without limitation the rights to use, copy, modify,
+merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be included in all copies
+or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```

package/LICENSES/ux-grid-baserow.md

@@ -0,0 +1,35 @@
+# @synopackageland/ui/grid: Baserow notice
+
+`dist/grid.js` (source `src/grid/clipboard/write.ts`, `writeClipboardAsync`)
+contains a TypeScript port of `copySelectionToClipboard` and
+`writeToClipboard` from Baserow's
+`web-frontend/modules/database/mixins/copyPasteHelper.js:147-218` (commit
+`98f727dc2ed8140fe44e3e797eedb05339562659`). The HTML-table rule in
+`src/grid/clipboard/tsv.ts` (`toHtmlTable`: no table for a single cell) follows
+`prepareHTMLData` in the same file. Baserow licenses all client-side
+JavaScript, including that file, under the MIT (Expat) licence below. Nothing
+from Baserow's `premium/` or `enterprise/` directories is included, and no
+Baserow name, logo or other asset is shipped.
+
+## Baserow licence
+
+```text
+Copyright (c) 2019-present Baserow B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this
+software and associated documentation files (the "Software"), to deal in the Software
+without restriction, including without limitation the rights to use, copy, modify,
+merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be included in all copies
+or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```

package/LICENSES/ux-grid-teable.md

@@ -0,0 +1,48 @@
+# @synopackageland/ui/grid: third-party notice
+
+`dist/grid.js` (source `src/grid/` and `src/grid-core/`) contains a TypeScript
+port, without React, of the canvas grid in Teable's SDK package
+(`packages/sdk/src/components/grid/`, commit
+`f8be01fadb86790d3d3a878bedd10cf949f9a8f8`, 2026-11-03). That package is MIT
+licensed (`packages/sdk/LICENSE` and `"license": "MIT"` in
+`packages/sdk/package.json` at that commit). Nothing from Teable's `apps/*`
+(AGPL-3.0) is included, and no Teable name, logo or icon asset is shipped.
+
+The Vue host in `src/grid/host/` is new code that follows the coordinate set-up
+in `Grid.tsx` and the pointer flow of `InteractionLayer.tsx`; it calls the
+ported modules and copies no React code. Default theme colours that fill
+missing tokens are Tailwind CSS palette values (MIT, Copyright (c) Tailwind
+Labs, Inc.), as Teable uses them.
+
+The fill-handle gesture in `src/grid/host/controller.ts` and `src/grid/range/`
+follows the fill flow of `InteractionLayer.tsx` (preview over the target rows,
+selection grows on release). The fill value rules, the clipboard TSV
+parser/writer and the paste proposal are new code; Teable's fill and
+copy/paste rules live in AGPL `apps/*` code and were not copied. The async
+clipboard write is ported from Baserow (MIT); see `ux-grid-baserow.md`.
+
+## Teable licence
+
+```text
+MIT License
+
+Copyright (c) 2023-2025 Teable, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/README.md

@@ -547,6 +547,9 @@ DSM-style application building blocks:
 - FacetPanel (filter groups with counts; a bottom sheet on a phone) / TagEditor (tags edited in place, saved optimistically)
 - SplitPane / StorageMeter / StackedBar (see [docs/size-and-split.md](docs/size-and-split.md))
 - ListDetail (a list with the selected item's detail beside it, the pane's width set by dragging and remembered; see [docs/list-detail.md](docs/list-detail.md))
+- AsidePanel (the right side region: rail, docked, floating, sheet) / RecordPanel (a non-modal record panel docked over the view) / AdaptivePanel (a popover on desktop, a bottom sheet on a phone) / StatusSlot
+- VirtualCardGrid / CardCover / CardField (a virtual card gallery whose card height is computed, never measured)
+- Interaction core, drag kit and motion helpers for app views (see [docs/ux-foundation.md](docs/ux-foundation.md); phone and touch rules in [docs/mobile-native.md](docs/mobile-native.md)); the canvas grid is the separate `@synopackageland/ui/grid` entry
 
 `Tabs` and `SectionTabs` move a raised selection notch in 120ms. Selected labels
 are blue; main labels are bold 14px and section labels bold 13px. `Tabs` fades its

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

@@ -1,14 +1,15 @@
-import { AppNavigation, WideLayout } from '../../../lib/adaptiveLayout';
+import { DropdownMenuEntry } from '../../primitives/dropdown-menu/DropdownMenu.vue';
+import { AppAsideState, AppNavigation, WideLayout } from '../../../lib/adaptiveLayout';
 type __VLS_Props = {
     sidebarWidth?: string;
     minHeight?: string;
     /** Disable responsive layout if an application deliberately manages it itself. */
     responsive?: boolean;
-    /** `web` opts a full-page Portal into the full-page layout at 1200px or wider; DSM windows keep `window`. */
+    /** `web` opts a full-page Portal into the full-page layout at 960px or wider (the sidebar starts as the rail below 1200); 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. */
+    /** Heads the web sidebar and the phone drawer (and the phone bar when no page title is known); defaults to the document 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;
@@ -24,6 +25,18 @@ type __VLS_Props = {
      * drawer. Defaults to the left sidebar.
      */
     navigation?: AppNavigation;
+    /**
+     * The phone bar's title. Without it the bar shows the title of the page's
+     * `PageHeader`, and without one of those the brand.
+     */
+    title?: string;
+    /** The phone bar leads with a Back button (emits `back`) instead of the menu button, for a pushed page. */
+    back?: boolean;
+    /**
+     * The phone bar's actions: the first is one button (its icon, or else its
+     * label); the rest open from "…". A pick emits `headerAction` with the key.
+     */
+    headerActions?: DropdownMenuEntry[];
 };
 type __VLS_Slots = {
     sidebar?: () => unknown;
@@ -34,14 +47,47 @@ type __VLS_Slots = {
     footer?: () => unknown;
     /** A phone's bottom tab bar (AppTabBar), shown only in the mobile presentation. */
     tabbar?: () => unknown;
+    /**
+     * The right side region. `overlay` is true when the open aside floats over
+     * the page (the page would be narrower than 480px, or the layout is not
+     * `web`); on a phone the region has no width and its content places itself.
+     */
+    aside?: (props: {
+        state: AppAsideState;
+        overlay: boolean;
+        width: number;
+        presentation: 'mobile' | 'window' | 'web';
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * The `aside` slot's state: `open` beside the page, `collapsed` to the 48px
+     * rail, or `expanded` over the whole content area (the sidebar stays). The
+     * slot's content (an AsidePanel) draws the panel and the rail; the layout
+     * only sizes the region and moves it.
+     */
+    'aside'?: AppAsideState;
+    /** The open aside's width in px, kept within 320-560; the handle on its start edge writes it. */
+    'asideWidth'?: number;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    back: () => any;
     brand: (event: MouseEvent) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    headerAction: (key: string) => any;
+    "update:aside": (value: AppAsideState) => any;
+    "update:asideWidth": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBack?: (() => any) | undefined;
     onBrand?: ((event: MouseEvent) => any) | undefined;
+    onHeaderAction?: ((key: string) => any) | undefined;
+    "onUpdate:aside"?: ((value: AppAsideState) => any) | undefined;
+    "onUpdate:asideWidth"?: ((value: number) => any) | undefined;
 }>, {
+    title: string;
     height: "auto" | "fill";
     minHeight: string;
+    back: boolean;
     sidebarWidth: string;
     responsive: boolean;
     wideLayout: WideLayout;
@@ -49,6 +95,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     brandName: string;
     brandIcon: string;
     navigation: AppNavigation;
+    headerActions: DropdownMenuEntry[];
 }, {}, {}, {}, 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-layout/pageTitle.d.ts

@@ -0,0 +1,24 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+interface PageTitleEntry {
+    title: () => string;
+}
+/**
+ * The phone bar's page title. A PageHeader in the layout's content registers
+ * its title; the last one mounted is the page's, and the bar shows it unless
+ * AppLayout's own `title` prop is set.
+ */
+export interface AppPageTitleHost {
+    /** The content column: a PageHeader outside it (in a dialog or sheet) keeps its own title. */
+    main: Readonly<Ref<HTMLElement | null>>;
+    entries: Ref<readonly PageTitleEntry[]>;
+    /** Whether the bar shows this entry's title (a phone, and no `title` prop). */
+    shows: (entry: PageTitleEntry) => boolean;
+}
+export declare const APP_PAGE_TITLE_KEY: InjectionKey<AppPageTitleHost>;
+export declare function createPageTitleHost(main: Readonly<Ref<HTMLElement | null>>, active: () => boolean): AppPageTitleHost;
+/**
+ * Hands a PageHeader's title to the phone bar. Returns whether the bar shows
+ * it, so the header can keep its own heading for screen readers only.
+ */
+export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>, title: () => string): ComputedRef<boolean>;
+export {};

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

@@ -25,6 +25,14 @@ type __VLS_Props = {
      * then DSM's language in a DSM window, then the browser's.
      */
     locale?: UiLocale;
+    /**
+     * The app owns the whole page (a Portal or standalone launch, never a DSM
+     * desktop window). The root becomes the page: `100dvh` tall, the document
+     * under it never scrolls and has no overscroll reload, and the page gets a
+     * device-width, safe-area and keyboard-resizing viewport
+     * (`ensureDeviceViewport`). Fixed for the mounted root.
+     */
+    fullPage?: boolean;
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
@@ -40,6 +48,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     modalScope: "document" | "app";
     dialogBounds: "app" | "viewport";
     colorScheme: "light" | "dark";
+    fullPage: boolean;
 }, {}, {}, {}, 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-tab-bar/AppTabBar.vue.d.ts

@@ -28,9 +28,9 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
     onMore?: (() => any) | undefined;
 }>, {
+    hidden: boolean;
     modelValue: string;
     ariaLabel: string;
-    hidden: boolean;
     more: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/aside-panel/AsidePanel.vue.d.ts

@@ -0,0 +1,69 @@
+import { Component } from 'vue';
+import { AppAsideState } from '../../../lib/adaptiveLayout';
+type __VLS_Props = {
+    /** The panel's title and accessible name, already translated (e.g. the assistant's name). */
+    title: string;
+    /** The rail and phone button's icon. */
+    icon?: Component;
+    /** A 6px dot on the rail and the phone button. */
+    unread?: boolean;
+    /** The phone button that opens the sheet; without it the app opens the sheet itself. */
+    fab?: boolean;
+    /** Offers `expanded` (the panel takes the content area). */
+    expandable?: boolean;
+    /** Where focus goes when the panel opens: `field` (the first field in the composer or body, not on touch), the `panel`, or `none`. */
+    initialFocus?: 'field' | 'panel' | 'none';
+    /** Shown after the rail button's name in its tooltip, e.g. `Ctrl+J`. The app binds the key. */
+    shortcut?: string;
+    openLabel?: string;
+    collapseLabel?: string;
+    expandLabel?: string;
+    restoreLabel?: string;
+};
+type SlotProps = {
+    state: AppAsideState;
+    mode: Mode;
+    collapse: () => void;
+    expand: () => void;
+    restore: () => void;
+};
+type __VLS_Slots = {
+    /** Surface tabs above the header row (a SegmentControl size="sm"); shown only when given. */
+    tabs?: (props: SlotProps) => unknown;
+    /** Extra header actions before expand and collapse (a ⋯ menu). */
+    actions?: (props: SlotProps) => unknown;
+    /** The thread: it scrolls, and its scroll position survives every state. */
+    default?: (props: SlotProps) => unknown;
+    /** The composer, kept at the bottom; its draft survives every state. */
+    composer?: (props: SlotProps) => unknown;
+};
+type Mode = 'docked' | 'floating' | 'sheet';
+declare function open(): void;
+declare function collapse(): void;
+declare function expand(): void;
+declare function restore(): void;
+declare function toggle(): void;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    open: typeof open;
+    collapse: typeof collapse;
+    expand: typeof expand;
+    restore: typeof restore;
+    toggle: typeof toggle;
+    state: import('vue').WritableComputedRef<AppAsideState, AppAsideState>;
+    mode: import('vue').ComputedRef<Mode>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    initialFocus: "field" | "panel" | "none";
+    icon: Component;
+    shortcut: string;
+    expandable: boolean;
+    unread: boolean;
+    fab: 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/app/aside-panel/asidePreference.d.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'vue';
+import { AppAsideState } from '../../../lib/adaptiveLayout';
+/**
+ * One stored entry per scope (a page kind the app names, such as `editor` or
+ * `shell`) under one localStorage key:
+ * `{"v":1,"editor":{"state":"open","width":380},"shell":{"state":"collapsed","width":380}}`.
+ * Other fields an app keeps in a scope's entry (a selected tab) are left as they are.
+ * The library knows no routes: the app picks the scope for the page it shows.
+ */
+export type AsidePreference = {
+    state: AppAsideState;
+    width: number;
+};
+export declare function clampAsideWidth(width: number): number;
+/** The stored state and width for `scope`, or the defaults. Synchronous, so a first paint can use it. */
+export declare function readAsidePreference(key: string, scope: string, defaults?: Partial<AsidePreference>): AsidePreference;
+export declare function writeAsidePreference(key: string, scope: string, value: Partial<AsidePreference>): void;
+/**
+ * The aside's state and width for AppLayout's `v-model:aside` and
+ * `v-model:aside-width`, read during setup (no second paint) and written on
+ * every change. AppLayout changes the width only when a drag ends or a key
+ * moves the handle, so the width is written once per resize. Another tab's
+ * change is picked up on the next page load, never live.
+ */
+export declare function useAsidePreference(key: string, scope: string, defaults?: Partial<AsidePreference>): {
+    state: Ref<AppAsideState>;
+    width: Ref<number>;
+};

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

@@ -2,7 +2,17 @@ export type SectionTab = {
     value: string;
     label: string;
     disabled?: boolean;
+    /** On a phone's section list, sections with the same group sit in one block under this heading. */
+    group?: string;
 };
+/**
+ * How the sections show on a phone (an App 640px wide or less):
+ * `list` a grouped list that pushes each section as a page, `segment` a
+ * full-width SegmentControl, `strip` the scrolling strip (inside a pushed page
+ * or a sheet). `auto`: a list for five or more sections or a `fill` settings
+ * page, else a SegmentControl.
+ */
+export type SectionTabsPhoneLayout = 'auto' | 'list' | 'segment' | 'strip';
 type __VLS_Props = {
     ariaLabel?: string;
     modelValue: string;
@@ -15,19 +25,27 @@ type __VLS_Props = {
     fill?: boolean;
     /** Mount all supplied item panels and hide inactive ones, preserving local drafts. */
     keepMounted?: boolean;
+    /** How the sections show on a phone; see SectionTabsPhoneLayout. */
+    phone?: SectionTabsPhoneLayout;
+    /** On a phone's section list, whether the selected section is pushed (`v-model:pushed`). */
+    pushed?: boolean;
 };
-declare var __VLS_14: {}, __VLS_17: `panel-${string}`, __VLS_18: {}, __VLS_21: `panel-${string}`, __VLS_22: {};
+declare var __VLS_8: {}, __VLS_35: {}, __VLS_44: `panel-${string}`, __VLS_45: {}, __VLS_48: `panel-${string}`, __VLS_49: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
+    [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
 } & {
-    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+    [K in NonNullable<typeof __VLS_48>]?: (props: typeof __VLS_49) => any;
 } & {
-    actions?: (props: typeof __VLS_14) => any;
+    actions?: (props: typeof __VLS_8) => any;
+} & {
+    actions?: (props: typeof __VLS_35) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    "update:pushed": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:pushed"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, 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/composite/about-dialog/AboutDialog.vue.d.ts

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