@povio/ui 5.0.0-rc.12 → 5.0.0-rc.13

package/dist/{configuration.context-iuZu-ie0.d.ts → configuration.context-3I7-wBII.d.ts}

@@ -1,6 +1,6 @@
 import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
 import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
-import { t as UIConfig } from "./uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "./uiConfig.context-BksnNQyw.js";
 import { n as ThemeEdits } from "./theme-model-T1zIdBg8.js";
 import { PropsWithChildren } from "react";
 //#region src/configurator/cva-definitions.d.ts
@@ -903,7 +903,8 @@ interface ConfigurationContextValue {
   draft: UIConfiguration;
   active: UIConfiguration;
   currentConfiguration: UIConfiguration;
-  replaceConfiguration: (value: UIConfiguration, closeEditor?: boolean) => void;
+  /** Replaces applied and draft values; `remount: false` keeps the open editor (and its state) mounted. */
+  replaceConfiguration: (value: UIConfiguration, closeEditor?: boolean, remount?: boolean) => void;
   setPreviewConfiguration: React.Dispatch<React.SetStateAction<UIConfiguration | null>>;
   setDraft: React.Dispatch<React.SetStateAction<UIConfiguration>>;
   isOpen: boolean;

package/dist/{dynamicInputs-DdcsSoYu.d.ts → dynamicInputs-R5i7AT_C.d.ts}

@@ -55,7 +55,7 @@ import "./useToast-yreVCUer.js";
 import "./Badge-CBNpj823.js";
 import "./Tag-AHfV_XSf.js";
 import "./Accordion-Cup5eRZz.js";
-import "./uiConfig.context-BqKWd_MO.js";
+import "./uiConfig.context-BksnNQyw.js";
 import "./confirmation.context-BOeEVczb.js";
 import { t as ControlledDatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { t as ControlledDateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";

package/dist/index.d.ts

@@ -54,7 +54,7 @@ import { n as ToastParams, r as useToast, t as ToastOptions } from "./useToast-y
 import { n as BadgeProps, t as Badge } from "./Badge-CBNpj823.js";
 import { i as tagDefinition, n as TagProps, r as TagVariantProps, t as Tag } from "./Tag-AHfV_XSf.js";
 import { i as AccordionProps, n as AccordionItem, r as AccordionItemProps, t as Accordion } from "./Accordion-Cup5eRZz.js";
-import { t as UIConfig } from "./uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "./uiConfig.context-BksnNQyw.js";
 import { t as Confirmation } from "./confirmation.context-BOeEVczb.js";
 import { r as DatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { r as DateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";
@@ -93,7 +93,7 @@ import { n as Input, t as ControlledInputProps } from "./input-CqNMORk8.js";
 import { r as TimePickerProps } from "./TimePicker-Dex9aU7D.js";
 import { n as TimePicker, t as ControlledTimePickerProps } from "./time-picker-DhnDKh97.js";
 import { n as Switch, t as ControlledSwitchProps } from "./switch-C--iWnY8.js";
-import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, d as ServiceWorkerOptions, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, f as installServiceWorker, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-DdcsSoYu.js";
+import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, d as ServiceWorkerOptions, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, f as installServiceWorker, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-R5i7AT_C.js";
 import { a as stepperDefinition, c as stepperNumberDefinition, d as stepperTitleDefinition, i as StepperVariantProps, l as stepperSeparatorDefinition, n as StepItem, o as stepperIconDefinition, r as StepperProps, s as stepperItemDefinition, t as Stepper, u as stepperSubtextDefinition } from "./Stepper-TATlHZhQ.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-1H_IxvyH.js";
 import { C as HeaderText, D as CellText, E as ColumnConfigModalProps, O as CellTextProps, S as tableRowDefinition, T as ColumnConfigModal, _ as tableCellTextDefinition, a as DynamicColumnsOptions, b as tableHeadRowDefinition, c as PaginatedTableProps, d as InfiniteTableProps, f as InfiniteTableWrapperProps, g as TableRowVariantProps, h as TableWrapperProps, i as usePagination, l as PaginatedTableWrapperProps, m as TableProps, n as useTableColumnConfig, o as dynamicColumns, p as Table, r as useSorting, s as PaginatedTable, t as useTableNav, u as InfiniteTable, v as tableDataDefinition, w as HeaderTextProps, x as tableHeaderTextDefinition, y as tableHeadDataDefinition } from "./useTableNav-Ckj5PBRk.js";

package/dist/index.js

@@ -2,7 +2,7 @@ import { t as logger } from "./logger-CqZjM-sn.js";
 import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
 import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
@@ -93,9 +93,9 @@ import { a as toastDefinition, n as statusIconDefinition$1, r as statusSeparator
 import { t as Toast } from "./Toast-DtG3pA61.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMFD4.js";
 import { useToast } from "./components/use-toast.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-6zn3zKl3.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-CNJ_ZvIN.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/rhf/inputs.d.ts

@@ -1,4 +1,4 @@
 import { n as InputVariantProps } from "../input.cva-CQPV5gW7.js";
 import { s as OmitDiscriminatedUnion } from "../common-UBFya8WY.js";
-import { Ft as InputsProps, Nt as InputDef, Pt as Inputs, a as DynamicInputsObjectSchema, n as dynamicInputs, t as DynamicInputsOptions } from "../dynamicInputs-DdcsSoYu.js";
+import { Ft as InputsProps, Nt as InputDef, Pt as Inputs, a as DynamicInputsObjectSchema, n as dynamicInputs, t as DynamicInputsOptions } from "../dynamicInputs-R5i7AT_C.js";
 export { type DynamicInputsObjectSchema, type DynamicInputsOptions, type InputDef, type InputVariantProps, Inputs, type InputsProps, type OmitDiscriminatedUnion, dynamicInputs };

package/dist/rhf.d.ts

@@ -54,7 +54,7 @@ import { n as ToastParams, r as useToast, t as ToastOptions } from "./useToast-y
 import { n as BadgeProps, t as Badge } from "./Badge-CBNpj823.js";
 import { i as tagDefinition, n as TagProps, r as TagVariantProps, t as Tag } from "./Tag-AHfV_XSf.js";
 import { i as AccordionProps, n as AccordionItem, r as AccordionItemProps, t as Accordion } from "./Accordion-Cup5eRZz.js";
-import { t as UIConfig } from "./uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "./uiConfig.context-BksnNQyw.js";
 import { t as Confirmation } from "./confirmation.context-BOeEVczb.js";
 import { r as DatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { r as DateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";
@@ -93,7 +93,7 @@ import { n as Input, t as ControlledInputProps } from "./input-CqNMORk8.js";
 import { r as TimePickerProps } from "./TimePicker-Dex9aU7D.js";
 import { n as TimePicker, t as ControlledTimePickerProps } from "./time-picker-DhnDKh97.js";
 import { n as Switch, t as ControlledSwitchProps } from "./switch-C--iWnY8.js";
-import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-DdcsSoYu.js";
+import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-R5i7AT_C.js";
 import { a as stepperDefinition, c as stepperNumberDefinition, d as stepperTitleDefinition, i as StepperVariantProps, l as stepperSeparatorDefinition, n as StepItem, o as stepperIconDefinition, r as StepperProps, s as stepperItemDefinition, t as Stepper, u as stepperSubtextDefinition } from "./Stepper-TATlHZhQ.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-1H_IxvyH.js";
 import { C as HeaderText, D as CellText, E as ColumnConfigModalProps, O as CellTextProps, S as tableRowDefinition, T as ColumnConfigModal, _ as tableCellTextDefinition, a as DynamicColumnsOptions, b as tableHeadRowDefinition, c as PaginatedTableProps, d as InfiniteTableProps, f as InfiniteTableWrapperProps, g as TableRowVariantProps, h as TableWrapperProps, i as usePagination, l as PaginatedTableWrapperProps, m as TableProps, n as useTableColumnConfig, o as dynamicColumns, p as Table, r as useSorting, s as PaginatedTable, t as useTableNav, u as InfiniteTable, v as tableDataDefinition, w as HeaderTextProps, x as tableHeaderTextDefinition, y as tableHeadDataDefinition } from "./useTableNav-Ckj5PBRk.js";

package/dist/rhf.js

@@ -2,7 +2,7 @@ import { t as logger } from "./logger-CqZjM-sn.js";
 import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
 import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
@@ -93,9 +93,9 @@ import { a as toastDefinition, n as statusIconDefinition$1, r as statusSeparator
 import { t as Toast } from "./Toast-DtG3pA61.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMFD4.js";
 import { useToast } from "./components/use-toast.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-6zn3zKl3.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-CNJ_ZvIN.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/styles/app-canvas.css

@@ -10,7 +10,8 @@
   background: #ececee;
   color: #242428;
   font:
-    10px/16px Inter,
+    10px/16px "Inter Variable",
+    Inter,
     system-ui,
     sans-serif;
   isolation: isolate;
@@ -180,7 +181,8 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  margin: 0 8px 8px;
+  /* The page list adds 4px above its first row, so this keeps an 8px gap. */
+  margin: 8px 8px 4px;
   padding: 0 8px;
   background: #f6f6f8;
   color: #88838e;
@@ -753,7 +755,8 @@
   padding: 1px 4px;
   white-space: nowrap;
   font:
-    10px/1.3 Inter,
+    10px/1.3 "Inter Variable",
+    Inter,
     sans-serif;
   pointer-events: none;
 }
@@ -793,7 +796,7 @@
 /* Pages | Components: what the canvas shows, as underlined tabs like the configurator's sub-tabs. */
 .povio-canvas-catalog > .povio-canvas-content-switch {
   gap: 12px;
-  margin: 0 12px 8px;
+  margin: 0 8px;
   padding: 8px 0 0;
   border-bottom: 1px solid var(--canvas-border);
 }
@@ -840,8 +843,7 @@
   border-bottom: 1px solid var(--canvas-border);
   min-width: 0;
 }
-.povio-canvas-workspace-picker,
-.povio-canvas-workspace-actions {
+.povio-canvas-workspace-picker {
   display: flex;
   align-items: center;
   gap: 3px;
@@ -856,18 +858,6 @@
   place-items: center;
   padding: 6px;
 }
-.povio-canvas-workspace-actions {
-  margin-top: 8px;
-}
-.povio-canvas-workspace-actions > button:first-child {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-}
-.povio-canvas-workspace-actions span {
-  color: #77717e;
-}
 .povio-canvas-storage-status {
   padding: 0 12px 12px;
   font-size: 10px;
@@ -932,7 +922,8 @@
   min-height: 30px;
   height: 30px;
   font:
-    500 11px/1.4 Inter,
+    500 11px/1.4 "Inter Variable",
+    Inter,
     system-ui,
     sans-serif;
 }
@@ -987,23 +978,9 @@
 .povio-canvas-workspace-picker > button {
   padding: 4px;
 }
-.povio-canvas-workspace-actions {
-  margin-top: 4px;
-}
-.povio-canvas-workspace-actions > button:first-child {
-  font-size: 10px;
-}
+/* Even 8px around the picker; also leaves room for the 2px focus outline plus its 2px offset. */
 .povio-canvas-workspaces {
-  padding: 6px 8px;
-}
-.povio-canvas-workspace-actions {
-  margin-top: 2px;
-  gap: 2px;
-}
-.povio-canvas-workspace-actions > button {
-  min-height: 20px;
-  padding: 3px 4px;
-  line-height: 1.2;
+  padding: 8px;
 }
 .povio-canvas-workspace-picker > button {
   padding: 4px;
@@ -1024,7 +1001,8 @@
   border-radius: 8px;
   box-shadow: 0 6px 24px #24202d20;
   font:
-    11px/1.4 Inter,
+    11px/1.4 "Inter Variable",
+    Inter,
     system-ui,
     sans-serif;
   z-index: 10000;
@@ -1091,13 +1069,8 @@
   outline: 2px solid #7650cc;
   outline-offset: 1px;
 }
-/* Reserve room for the 2px focus outline plus its 2px offset. */
 .povio-canvas-workspace-picker {
   gap: 6px;
-  padding-bottom: 4px;
-}
-.povio-canvas-workspace-actions {
-  gap: 6px;
 }
 .povio-canvas-workspace-popover {
   width: 260px;
@@ -1151,7 +1124,7 @@
   padding-left: 24px;
 }
 .povio-canvas-popover-page-list {
-  max-height: min(200px, 35dvh);
+  max-height: max(160px, min(560px, calc(100dvh - 300px)));
   overflow: auto;
   padding: 4px 3px;
   margin: 3px -3px 0;