@synopackageland/ui 0.17.11 → 0.17.13

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.17.13 (2026-10-30)
+
+Settings pages lay out as DSM's Control Panel, measured on a live DSM 7.3.2 (docs/dsm-native-metrics.md, Settings page), and every Callout can be closed. Breaking, with no compatibility layer: tables fill their container unless `:fill="false"`, `Callout`'s `closable` is gone (a close button is now the default; `:dismissible="false"` removes it), and `Fieldset` is no longer collapsible unless asked (`collapsible` adds the chevron back).
+
+- Add `SettingsPage`: a settings tab's sections in a scrolling body over a footer that stays at the bottom (`#footer`, Reset then Apply, right-aligned capsules over a divider, DSM's 48px). With a height to fill only the body scrolls; in a page's own flow (a phone) the footer sticks to the bottom of the viewport above the safe area.
+- `SectionTabs` takes `fill`: the strip stays at the top and the panel takes the rest of the height (`data-ui-section-tabs-fill`); without a height the strip sticks to the top. Tab labels are DSM's 12px bold (`--ui-font-size-tab`) and the first tab starts 8px in, level with a section title.
+- `Fieldset` draws DSM's section: a 15px regular blue title (`--ui-font-size-section`) over a dashed divider at 70% (`--ui-fieldset-divider`), title text and body 8px in (`--ui-fieldset-inset`, `data-fieldset-body`), 8px to the next section (`--ui-fieldset-gap`); the description is a 28px row across the whole width.
+- In a form, a `Checkbox` description is a 13px line of its own under the label (`data-ui-checkbox-description`), as DSM's help text under a checkbox. A horizontal `FormItem` label sits 4px from the row top, as DSM's.
+- A number `Input`'s unit stays right after the field however long the unit is.
+- `DataGrid` and `DataTable` take `fill` (default `true`): in a flex-column container they take the height left, keep the header row, scroll the rows inside, and a DataGrid's footer stays at the container's bottom, sticking above the safe area when the page scrolls (`data-fill`, `.ui-grid-footer-pinned`). `DataTable`'s header row now stays while its rows scroll. `:fill="false"` sizes a table to its rows, for a short table in a form or a dialog.
+- `Callout` is dismissible by default: a ✕ in the top-right corner in the tone, labelled "Close" and focusable (`data-ui-callout-close`). Closing hides it (it stays in the DOM, `hidden`) and emits `close`; it comes back when its tone, title, code or text changes, or its `dismissKey`. The JSON catalog's Callout takes `dismissible` and `dismissKey`.
+
+## 0.17.12 (2026-10-30)
+
+- Upload callbacks can throw an error with `final: true` to fail immediately, disable manual retry and hide retry controls for permanent failures; other errors still retry twice by default.
+
 ## 0.17.11 (2026-10-30)
 
 Settings forms follow DSM's own Control Panel layout by default. Two DOM changes: `Fieldset`'s chevron points up while open and down while collapsed (it was down and right), and a `password` `Input` is now an outer `<span>` (layout attrs) around an inner one holding the field and its toggle.

package/README.md

@@ -522,7 +522,7 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
-- Form / FormItem / FormGroup / FormNote / InfoBox / FormActions / Fieldset (DSM-native settings structure, see [docs/layout-rules.md](docs/layout-rules.md))
+- SettingsPage / Form / FormItem / FormGroup / FormNote / InfoBox / FormActions / Fieldset (DSM-native settings structure, see [docs/layout-rules.md](docs/layout-rules.md))
 - Callout (see [docs/callout.md](docs/callout.md) for when to use a Callout, a toast or an inline note) / EmptyState / StepList
 - ConnectionTopology
 - DataTable / DataGrid
@@ -674,6 +674,23 @@ size (arrow keys and swipes), and `UploadQueue` lists uploads with progress,
 retry and cancel. `useUploadQueue(upload, { concurrency, retries })` runs the
 uploads it shows. `FilePicker` takes pasted files with `paste`.
 
+An upload failure is retried twice by default, after 1 second and 3 seconds.
+For permanent errors such as a refused file type, an oversized file or denied
+permission, throw an `Error` with `final: true`:
+
+```ts
+throw Object.assign(new Error('This file type is not allowed'), { final: true })
+```
+
+The queue immediately marks that task `failed`, keeps the error message and
+calls `onFailed` once. Its `final` flag disables `queue.retry(key)` and hides
+the task's retry button in `UploadQueue`; "Retry all" appears only when at
+least two failed tasks can be retried. Other errors keep the usual retry
+behavior. This also applies to `RichTextEditor`'s `upload` callback. Apps
+providing their own `UploadQueueItem[]` can set `final: true` on failed items
+and should skip them in their `retryAll` handler; the queue's `retry` method
+already does so.
+
 ```vue
 <CommentItem v-for="c in comments" :key="c.id" :author="c.author.name" :time="c.when" :body="c.body" :mentions="people" :files="fileById" :edited="!!c.editedAt" :deleted="c.deleted" />
 <RichTextEditor v-model="text" variant="compact" :candidates="people" :filter="false" :maxlength="4000" :upload="sendFile" :files="fileById" @search="findPeople" @submit="post" />

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

@@ -7,12 +7,18 @@ type __VLS_Props = {
     ariaLabel?: string;
     modelValue: string;
     items: SectionTab[];
+    /**
+     * Fills the container's height: the strip stays at the top and the panel
+     * takes the rest, for a SettingsPage that scrolls its body over a fixed
+     * footer. Without a height to fill (a phone page) the strip sticks to the top.
+     */
+    fill?: boolean;
 };
-declare var __VLS_7: {}, __VLS_10: `panel-${string}`, __VLS_11: {};
+declare var __VLS_14: {}, __VLS_17: `panel-${string}`, __VLS_18: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
 } & {
-    actions?: (props: typeof __VLS_7) => any;
+    actions?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/components/app/settings-page/SettingsPage.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    footer?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/callout/Callout.vue.d.ts

@@ -3,7 +3,14 @@ type __VLS_Props = {
     /** `soft`: a compact tinted panel. `inline`: a status line with no panel, for a short note under a field or a section. */
     variant?: 'soft' | 'inline';
     title?: string;
-    closable?: boolean;
+    /**
+     * Shows a close button (default). Closing hides the callout until its
+     * tone, title or text (or `dismissKey`) changes. Turn it off only for a
+     * state that must stay in view, such as a blocking setup requirement.
+     */
+    dismissible?: boolean;
+    /** What a dismissal is remembered by, instead of the tone and the rendered text. */
+    dismissKey?: string;
     closeLabel?: string;
     /** A machine code (e.g. `login_wait_timeout`), shown after the message in a quieter style. */
     code?: string;
@@ -36,7 +43,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     fill: boolean;
     variant: "soft" | "inline";
     tone: "info" | "success" | "warning" | "danger";
-    closable: boolean;
+    dismissible: 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/composite/data-grid/DataGrid.vue.d.ts

@@ -185,6 +185,13 @@ type __VLS_Props = {
     refreshable?: boolean;
     refreshing?: boolean;
     maxHeight?: string;
+    /**
+     * Fills the height its flex-column container leaves (the default, DSM's
+     * list): the header stays, the rows scroll inside, and the footer sits at
+     * the container's bottom whatever the row count. `false` sizes the grid
+     * to its rows, for a short table inside a form or a dialog.
+     */
+    fill?: boolean;
     labels?: Partial<DataGridLabels>;
     /** @deprecated Use `labels.empty`. */
     emptyText?: string;
@@ -293,6 +300,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     footer: boolean;
     filter: string;
     sort: DataGridSort | null;
+    fill: boolean;
     loading: boolean;
     group: DataGridGroup | null;
     loadingText: string;

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -18,6 +18,12 @@ type __VLS_Props = {
     mobileView?: 'auto' | 'cards' | 'table' | 'container';
     /** Width in px under which `mobileView="container"` shows cards. */
     containerBreakpoint?: number;
+    /**
+     * Fills the height its flex-column container leaves (the default): the
+     * header stays and the rows scroll inside. `false` sizes the table to its
+     * rows, for a short table inside a form or a dialog.
+     */
+    fill?: boolean;
 };
 declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
@@ -40,6 +46,7 @@ type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fill: boolean;
     compact: boolean;
     rowKey: string;
     mobileView: "auto" | "cards" | "table" | "container";

package/dist/components/composite/upload-queue/UploadQueue.vue.d.ts

@@ -6,6 +6,8 @@ export type UploadQueueItem = {
     loaded: number;
     status: UploadStatus;
     error?: string;
+    /** A permanent failure; hides this task's retry button and excludes it from Retry all. */
+    final?: boolean;
 };
 type __VLS_Props = {
     tasks: UploadQueueItem[];
@@ -29,8 +31,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     onCancelAll?: (() => any) | undefined;
 }>, {
     collapsible: boolean;
-    closable: boolean;
     processing: number;
+    closable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/containers/fieldset/Fieldset.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     title?: FieldsetTitle;
     /** One line under the title, across the whole width (DSM's "Enter the server name, ..."). */
     description?: string;
+    /** Adds DSM's disclosure chevron (Control Panel › Network); off by default, as Control Panel › Security. */
     collapsible?: boolean;
     /** Mouse gesture that toggles; Enter/Space always works on the header. */
     collapseTriggerEvent?: FieldsetCollapseTrigger;

package/dist/index.d.ts

@@ -224,6 +224,7 @@ export { default as StackedBar } from './components/composite/stacked-bar/Stacke
 export type { StackedBarSegment, StackedBarTone } from './components/composite/stacked-bar/StackedBar.vue';
 export { default as PageContent } from './components/app/page-content/PageContent.vue';
 export { default as SectionTabs } from './components/app/section-tabs/SectionTabs.vue';
+export { default as SettingsPage } from './components/app/settings-page/SettingsPage.vue';
 export type { SectionTab } from './components/app/section-tabs/SectionTabs.vue';
 export { default as ConfigProvider } from './components/composite/config-provider/ConfigProvider.vue';
 export { useProps, provideConfigManager } from './composables/configCascade';