@synopackageland/ui 0.20.3 → 0.20.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 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/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,10 +1,10 @@
-import { AppNavigation, WideLayout } from '../../../lib/adaptiveLayout';
+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;
@@ -34,11 +34,38 @@ 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, {
     brand: (event: MouseEvent) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:aside": (value: AppAsideState) => any;
+    "update:asideWidth": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onBrand?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:aside"?: ((value: AppAsideState) => any) | undefined;
+    "onUpdate:asideWidth"?: ((value: number) => any) | undefined;
 }>, {
     height: "auto" | "fill";
     minHeight: string;

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/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";
+    shortcut: string;
+    icon: Component;
+    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/composite/adaptive-panel/AdaptivePanel.vue.d.ts

@@ -0,0 +1,61 @@
+import { OverlayMotion } from '../../primitives/popover/overlay';
+type __VLS_Props = {
+    /** Controlled open state (`v-model:open`). */
+    open?: boolean;
+    /** Names the panel: the sheet's title, and the popover's accessible name. */
+    title?: string;
+    /** A line under the sheet's title. */
+    description?: string;
+    /** The popover's place beside the trigger. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    /** The popover's width. */
+    width?: string;
+    /** The edge the sheet comes from. */
+    sheetSide?: 'bottom' | 'right';
+    /** The sheet's height (bottom) or width (right). */
+    sheetSize?: string;
+    /** At this host width and narrower the panel is a sheet. */
+    compactBelow?: number;
+    /** The element whose width decides; defaults to the enclosing AppRoot, else the document. */
+    container?: HTMLElement | null;
+    /** The sheet's close button label; the Sheet's localized default otherwise. */
+    closeLabel?: string;
+    /** Popover motion; `none` inside a grid editor. */
+    motion?: OverlayMotion;
+};
+declare var __VLS_11: {}, __VLS_23: {
+    compact: boolean;
+}, __VLS_31: {
+    compact: boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_11) => any;
+} & {
+    footer?: (props: typeof __VLS_23) => any;
+} & {
+    default?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    width: string;
+    side: "top" | "right" | "bottom" | "left";
+    align: "start" | "center" | "end";
+    open: boolean;
+    motion: OverlayMotion;
+    sheetSide: "bottom" | "right";
+    sheetSize: string;
+    compactBelow: number;
+    container: HTMLElement | null;
+}, {}, {}, {}, 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/connection-topology/ConnectionTopology.vue.d.ts

@@ -39,9 +39,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onSelect-lane"?: ((id: string) => any) | undefined;
 }>, {
     compact: boolean;
+    cards: boolean;
     selectable: boolean;
     selectedLane: string | number;
-    cards: boolean;
     layout: "stacked" | "columns";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/composite/file-picker/FilePicker.vue.d.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     variant: "dropzone" | "compact";
     disabled: boolean;
     modelValue: File[];
-    multiple: boolean;
     paste: boolean;
+    multiple: boolean;
     maxFiles: number;
     maxSize: number;
     directory: boolean;

package/dist/components/composite/mention-list/MentionList.vue.d.ts

@@ -15,12 +15,12 @@ type __VLS_Props = {
     boundary?: HTMLElement;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    choose: (person: MentionCandidate) => any;
     close: () => any;
+    choose: (person: MentionCandidate) => any;
     hover: (index: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChoose?: ((person: MentionCandidate) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onChoose?: ((person: MentionCandidate) => any) | undefined;
     onHover?: ((index: number) => any) | undefined;
 }>, {
     loading: boolean;

package/dist/components/composite/overflow-toolbar/OverflowToolbar.vue.d.ts

@@ -9,7 +9,7 @@ type __VLS_Props = {
 };
 declare var __VLS_1: {}, __VLS_4: string, __VLS_5: {
     item: OverflowToolbarItem;
-}, __VLS_35: {}, __VLS_37: {}, __VLS_124: {
+}, __VLS_35: {}, __VLS_37: {}, __VLS_126: {
     item: OverflowToolbarItem;
 };
 type __VLS_Slots = {} & {
@@ -21,7 +21,7 @@ type __VLS_Slots = {} & {
 } & {
     right?: (props: typeof __VLS_37) => any;
 } & {
-    'overflow-item'?: (props: typeof __VLS_124) => any;
+    'overflow-item'?: (props: typeof __VLS_126) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clickItem: (item: OverflowToolbarMenuEntry | OverflowToolbarItem) => any;

package/dist/components/composite/record-panel/RecordPanel.vue.d.ts

@@ -0,0 +1,77 @@
+export type RecordPanelCloseReason = 'escape' | 'button' | 'swipe';
+type __VLS_Props = {
+    /** Controlled open state (`v-model:open`). */
+    open?: boolean;
+    /** The panel's accessible name (the record's title, or "Record"), already translated. */
+    label?: string;
+    /** The main column's width (`v-model:width`); the stored or default width otherwise. */
+    width?: number;
+    /** Remembers the dragged width in localStorage under this key (one per App). */
+    storageKey?: string;
+    defaultWidth?: number;
+    minWidth?: number;
+    /** The view kept visible beside the panel, however wide it is dragged. */
+    minMainWidth?: number;
+    /** Shows the `secondary` slot (comments) as a column on the far side; the panel grows by `secondaryWidth`. */
+    secondaryOpen?: boolean;
+    secondaryWidth?: number;
+    /** The element the panel docks to and is clipped by; it must be positioned. The parent element otherwise. */
+    container?: HTMLElement | null;
+    /** At this host width and narrower the panel is a full-screen sheet. */
+    compactBelow?: number;
+    /** Where focus goes on close when the element that had it at open is gone (a re-rendered card). */
+    returnFocus?: () => HTMLElement | null | undefined;
+    /** `field`: the first editable field (not on touch); `panel`: the panel itself; `none`: focus stays. */
+    initialFocus?: 'field' | 'panel' | 'none';
+    /** No body padding; the caller lays the body out. */
+    flush?: boolean;
+    closeLabel?: string;
+    resizeLabel?: string;
+};
+type __VLS_Slots = {
+    header?: (props: SlotProps) => unknown;
+    default?: (props: SlotProps) => unknown;
+    secondary?: (props: SlotProps) => unknown;
+};
+type SlotProps = {
+    compact: boolean;
+    width: number;
+    padding: number;
+    close: () => void;
+};
+declare function close(reason?: RecordPanelCloseReason): void;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    close: typeof close;
+    compact: import('vue').ComputedRef<boolean>;
+    width: import('vue').ComputedRef<number>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (reason: RecordPanelCloseReason) => any;
+    "update:open": (value: boolean) => any;
+    "update:width": (value: number) => any;
+    resizeEnd: (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((reason: RecordPanelCloseReason) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+    onResizeEnd?: ((value: number) => any) | undefined;
+}>, {
+    width: number;
+    open: boolean;
+    minWidth: number;
+    compactBelow: number;
+    container: HTMLElement | null;
+    defaultWidth: number;
+    minMainWidth: number;
+    secondaryOpen: boolean;
+    secondaryWidth: number;
+    returnFocus: () => HTMLElement | null | undefined;
+    initialFocus: "field" | "panel" | "none";
+}, {}, {}, {}, 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/record-panel/recordPanelWidth.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license MIT
+ * The width rule (560 default, 320 minimum, 240 of the view kept beside the
+ * panel, the secondary column added on top and capped at the host) is ported
+ * from Teable's record side panel
+ * (packages/sdk/src/components/expand-record/Panel.tsx:20-26, 83-88 at
+ * f8be01fad).
+ *
+ * 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.
+ */
+export declare const RECORD_PANEL_DEFAULT_WIDTH = 560;
+export declare const RECORD_PANEL_MIN_WIDTH = 320;
+/** However wide the panel is dragged, this much of the view stays visible beside it. */
+export declare const RECORD_PANEL_MIN_MAIN_WIDTH = 240;
+/** The comments (or other secondary) column, added on the panel's far side. */
+export declare const RECORD_PANEL_SECONDARY_WIDTH = 320;
+/** Body padding switches from 24 to 48 at this body width (Teable `getBodyPadding`). */
+export declare const RECORD_PANEL_WIDE_BODY = 640;
+export interface RecordPanelBounds {
+    minWidth: number;
+    minMainWidth: number;
+}
+/** The widest the main column may be in a host; unbounded while the host is not measured. */
+export declare function maxPanelWidth(hostWidth: number, bounds: RecordPanelBounds): number;
+/** The main column's width: the stored width clamped to the host. */
+export declare function clampPanelWidth(width: number, hostWidth: number, bounds: RecordPanelBounds): number;
+/**
+ * True when the host cannot hold a docked panel with the view beside it, or is
+ * phone-narrow: the panel becomes a full-screen sheet. An unmeasured host
+ * (zero) stays docked.
+ */
+export declare function panelNeedsSheet(hostWidth: number, compactBelow: number, bounds: RecordPanelBounds): boolean;
+/** 24 px below a 640 px body, 48 px from there. */
+export declare function bodyPadding(bodyWidth: number): number;
+export declare function readStoredWidth(key: string | undefined): number | undefined;
+export declare function writeStoredWidth(key: string | undefined, width: number): void;