@synopackageland/ui 0.20.1 → 0.20.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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
+
+## 0.20.2 (2026-11-04)
+
+- List pages stay white when a detail pane opens, even while another App built with an older release is open in the same DSM session
+- Add `ListDetail`: the list with the selected item's detail beside it in a bordered white pane. Drag the separator or use the arrow, Home and End keys to resize it; double click resets the width. The width is remembered per App and `storageKey`, and the pane moves above the list in narrow windows
+
 ## 0.20.1 (2026-11-04)
 
 - List pages stay white when a detail pane opens beside a `DataGrid`: the pane keeps its 1px border with no card shadow, and the selected row shows DSM's light blue.

package/README.md

@@ -546,6 +546,7 @@ DSM-style application building blocks:
 - TimelineRow (one event in a list) / NewItemsPill (a floating "N new" pill) / SectionSkeleton `variant="lines" | "figures" | "rows"`
 - 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))
 
 `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/composite/data-grid/DataGrid.vue.d.ts

@@ -172,8 +172,9 @@ type __VLS_Props = {
     hiddenColumns?: string[];
     /**
      * Saves the user's column order, hidden columns, widths, sort and page size
-     * in this browser under this key and restores them. Bound props win; to keep
-     * them on a server, bind the v-models instead.
+     * in this browser under this App and key, and restores them: another App's
+     * grid with the same key keeps its own. New or changed rows keep them.
+     * Bound props win; to keep them on a server, bind the v-models instead.
      */
     stateKey?: string;
     /** A header menu where the user shows and hides columns and resets them. */

package/dist/components/composite/data-grid/viewState.d.ts

@@ -9,7 +9,7 @@ export type DataGridViewState = {
     } | null;
     pageSize?: number;
 };
-/** The view state saved under `key` in this browser; fields it cannot trust are dropped. */
+/** The view state this App saved under `key` in this browser; fields it cannot trust are dropped. */
 export declare function loadGridState(key: string): DataGridViewState;
-/** Saves the view state under `key`; a browser that refuses storage keeps the grid working unsaved. */
+/** Saves the view state under this App and `key`; a browser that refuses storage keeps the grid working unsaved. */
 export declare function saveGridState(key: string, state: DataGridViewState): void;

package/dist/components/containers/list-detail/ListDetail.vue.d.ts

@@ -0,0 +1,52 @@
+type __VLS_Props = {
+    /** Shows the pane; by default it shows while the `detail` slot is given. */
+    open?: boolean;
+    /** The pane's heading; with it the pane has a header with a Close button. */
+    title?: string;
+    /** Shows the Close button in the header. */
+    closable?: boolean;
+    /** The pane's width before the user sets one: a share of the room (0–1) or px. A share is kept between 400px and 640px. */
+    defaultWidth?: number;
+    /** The pane's minimum width in px. */
+    minWidth?: number;
+    /** The list's minimum width in px; the pane never grows into it. */
+    listMinWidth?: number;
+    /** Names this pane among the App's panes for the remembered width (with the App it runs in). */
+    storageKey?: string;
+    /** The separator's accessible name. */
+    label?: string;
+};
+/** Goes back to the default width and forgets the remembered one. */
+declare function reset(): void;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_3) => any;
+} & {
+    detail?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    label: string;
+    title: string;
+    open: boolean;
+    minWidth: number;
+    closable: boolean;
+    storageKey: string;
+    defaultWidth: number;
+    listMinWidth: number;
+}, {}, {}, {}, 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/index.d.ts

@@ -231,6 +231,7 @@ export { default as AppActionBar } from './components/app/app-action-bar/AppActi
 export { default as PageHeader } from './components/app/page-header/PageHeader.vue';
 export { default as PageToolbar } from './components/app/page-toolbar/PageToolbar.vue';
 export { default as SplitPane } from './components/containers/split-pane/SplitPane.vue';
+export { default as ListDetail } from './components/containers/list-detail/ListDetail.vue';
 export { default as StorageMeter } from './components/composite/storage-meter/StorageMeter.vue';
 export type { StorageMeterLabels } from './components/composite/storage-meter/StorageMeter.vue';
 export { default as StackedBar } from './components/composite/stacked-bar/StackedBar.vue';