@povio/ui 5.0.0-rc.4 → 5.0.0-rc.6

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 { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.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 { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-CpC3wlMs.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 { 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 { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.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-BTGZiluz.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-Di0_w80v.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.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 { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.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 { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-CpC3wlMs.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 { 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 { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.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-BTGZiluz.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-Di0_w80v.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/configurator.css

@@ -74,16 +74,23 @@
   font-size: 11px;
   font-weight: 550;
 }
-/* The configurator covers the whole viewport as a full page above the application. */
+/* Keep the application visible around the movable configurator window. */
 .studio-overlay {
   position: fixed;
   inset: 0;
-  background: #fff;
+  background: #14232240;
+  display: grid;
+  place-items: center;
+  padding: 8px;
   z-index: 1000;
 }
 .studio-modal {
-  width: 100%;
-  height: 100dvh;
+  position: relative;
+  container-type: inline-size;
+  width: min(1440px, calc(100vw - 48px));
+  height: min(900px, calc(100dvh - 48px));
+  border-radius: 12px;
+  box-shadow: 0 25px 90px #12251f30;
   background: #fff;
   overflow: hidden;
 }
@@ -149,7 +156,7 @@
 .studio-topbar .studio-search:has(input:disabled) {
   opacity: 0.5;
 }
-@media (max-width: 800px) {
+@container (max-width: 800px) {
   .studio-topbar-controls {
     flex-wrap: wrap;
     margin-left: 0;
@@ -220,6 +227,18 @@
   overflow-x: auto;
   scrollbar-width: none;
 }
+.studio-section-tabs {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.studio-nav .studio-preview-tab {
+  display: none;
+}
 .studio-nav-divider {
   flex-shrink: 0;
   width: 1px;
@@ -724,7 +743,7 @@
   color: #4e4e4e;
   margin: 18px 0;
 }
-@media (max-width: 1050px) {
+@container (max-width: 1050px) {
   .studio-dialog {
     grid-template-columns: var(--studio-editor-track, minmax(260px, 0.8fr)) minmax(280px, 1.25fr);
   }
@@ -738,7 +757,7 @@
     padding: 8px;
   }
 }
-@media (max-width: 800px) {
+@container (max-width: 800px) {
   /* One scrolling column: top bar, editor, preview, then the footer pinned to the bottom. */
   .studio-dialog {
     display: flex;
@@ -857,12 +876,12 @@
   right: 1px;
   padding: 5px;
 }
-@media (min-width: 801px) and (max-width: 1100px) {
+@container (min-width: 801px) and (max-width: 1100px) {
   .studio-type-fields {
     grid-template-columns: 1fr;
   }
 }
-@media (max-width: 420px) {
+@container (max-width: 420px) {
   .studio-type-fields {
     gap: 6px;
   }
@@ -899,7 +918,7 @@
   grid-column: 2;
   margin: 0;
 }
-@media (max-width: 420px) {
+@container (max-width: 420px) {
   .studio-token-list-inline .studio-token {
     grid-template-columns: minmax(0, 1fr) minmax(165px, 50%);
     gap: 6px 10px;
@@ -2363,3 +2382,335 @@
   justify-content: flex-end;
   gap: 8px;
 }
+
+.studio-window-grip {
+  position: absolute;
+  top: 20px;
+  right: 18px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  border: 0;
+  padding: 4px;
+  background: transparent;
+  color: #858585;
+  touch-action: none;
+  flex-shrink: 0;
+  border-radius: 5px;
+}
+.studio-overlay .studio-window-grip {
+  cursor: grab;
+}
+.studio-overlay .studio-window-grip:active {
+  cursor: grabbing;
+}
+.studio-window-resize {
+  position: absolute;
+  z-index: 4;
+  display: block;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  touch-action: none;
+}
+.studio-window-resize-n,
+.studio-window-resize-s {
+  left: 12px;
+  right: 12px;
+  height: 6px;
+}
+.studio-window-resize-e,
+.studio-window-resize-w {
+  top: 12px;
+  bottom: 12px;
+  width: 6px;
+}
+.studio-window-resize-n {
+  top: 0;
+  cursor: ns-resize !important;
+}
+.studio-window-resize-s {
+  bottom: 0;
+  cursor: ns-resize !important;
+}
+.studio-window-resize-e {
+  right: 0;
+  cursor: ew-resize !important;
+}
+.studio-window-resize-w {
+  left: 0;
+  cursor: ew-resize !important;
+}
+.studio-window-resize-ne,
+.studio-window-resize-se,
+.studio-window-resize-sw,
+.studio-window-resize-nw {
+  width: 12px;
+  height: 12px;
+}
+.studio-window-resize-ne {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize !important;
+}
+.studio-window-resize-se {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize !important;
+}
+.studio-window-resize-sw {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize !important;
+}
+.studio-window-resize-nw {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize !important;
+}
+.studio-window-grip:focus-visible,
+.studio-window-resize:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: -2px;
+}
+@media (max-width: 600px) {
+  .studio-modal {
+    width: calc(100vw - 16px);
+    height: calc(100dvh - 16px);
+  }
+}
+
+/* The grip belongs to the window, so scrolling or hiding the preview cannot hide it. */
+.studio-preview-actions {
+  padding-right: 36px;
+}
+@container (max-width: 1050px) {
+  .studio-window-grip {
+    top: 18px;
+  }
+}
+@container (max-width: 800px) {
+  .studio-window-grip {
+    top: 10px;
+    right: 12px;
+  }
+  .studio-topbar {
+    padding-right: 48px;
+  }
+  .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+
+/* Resized windows must not inherit the gallery specimens' intrinsic minimum width. */
+.studio-layout-card {
+  min-width: 0;
+  max-width: 100%;
+}
+.studio-gallery-grid {
+  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
+}
+.studio-palette-actions {
+  flex-shrink: 0;
+}
+@container (max-width: 800px) {
+  .studio-dialog > .studio-topbar,
+  .studio-body > .studio-editor,
+  .studio-body > .studio-preview,
+  .studio-dialog > .studio-footer {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+/* Wide specimens (tables and steppers) scroll within their own preview, never the window. */
+.studio-layout-card.is-screen,
+.studio-gallery-demo {
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+@container (max-width: 800px) {
+  .studio-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+    flex-shrink: 0;
+  }
+  .studio-nav .studio-preview-tab {
+    display: flex;
+    margin-left: auto;
+  }
+  .studio-dialog:not([data-compact-preview]) .studio-preview,
+  .studio-dialog[data-compact-preview] .studio-editor {
+    display: none;
+  }
+}
+
+.studio-window-popout {
+  position: absolute;
+  top: 20px;
+  right: 50px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 5px;
+  color: #858585;
+  background: transparent;
+}
+.studio-window-popout:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: -2px;
+}
+.studio-preview-actions {
+  padding-right: 68px;
+}
+@container (max-width: 1050px) {
+  .studio-window-popout {
+    top: 18px;
+  }
+}
+@container (max-width: 800px) {
+  .studio-window-popout {
+    top: 10px;
+    right: 44px;
+  }
+  .studio-topbar {
+    padding-right: 80px;
+  }
+  .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+[data-povio-ui-popout] .studio-overlay {
+  padding: 0;
+}
+[data-povio-ui-popout] .studio-modal-popout {
+  width: 100vw;
+  height: 100dvh;
+  border-radius: 0;
+  box-shadow: none;
+}
+.studio-modal-popout .studio-window-popout {
+  right: 18px;
+}
+.studio-modal-popout .studio-preview-actions {
+  padding-right: 36px;
+}
+@container (max-width: 800px) {
+  .studio-modal-popout .studio-topbar {
+    padding-right: 48px;
+  }
+  .studio-modal-popout .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+
+@container (max-width: 800px) {
+  .studio-topbar,
+  .studio-modal-popout .studio-topbar {
+    padding-right: 16px;
+  }
+  .studio-topbar-controls {
+    margin-right: 64px;
+  }
+  .studio-modal-popout .studio-topbar-controls {
+    margin-right: 32px;
+  }
+}
+.studio-palette-native {
+  position: relative;
+}
+.studio-palette-native > select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.studio-palette-native:focus-within {
+  outline: 2px solid #797979;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.studio-window-minimize {
+  position: absolute;
+  top: 20px;
+  right: 82px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: #858585;
+  background: transparent;
+}
+.studio-window-minimize:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: -2px;
+}
+.studio-preview-actions {
+  padding-right: 100px;
+}
+.studio-modal-popout .studio-window-minimize {
+  right: 50px;
+}
+.studio-modal-popout .studio-preview-actions {
+  padding-right: 68px;
+}
+@container (max-width: 1050px) {
+  .studio-window-minimize {
+    top: 18px;
+  }
+}
+@container (max-width: 800px) {
+  .studio-window-minimize {
+    top: 10px;
+    right: 76px;
+  }
+  .studio-topbar-controls {
+    margin-right: 96px;
+  }
+  .studio-modal-popout .studio-topbar-controls {
+    margin-right: 64px;
+  }
+  .studio-preview-actions,
+  .studio-modal-popout .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+.studio-floating-launcher {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border: 1px solid #555;
+  border-radius: 999px;
+  background: #292929;
+  color: #fff;
+  box-shadow: 0 4px 16px #0003;
+  font:
+    600 13px/1.4 "Inter Variable",
+    Inter,
+    sans-serif;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.studio-floating-launcher:active {
+  cursor: grabbing;
+}
+.studio-floating-launcher:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: 3px;
+}

package/dist/{table.cva-DlMT-zLD.js → table.cva-D5oQ-QvA.js}

@@ -1,4 +1,57 @@
+import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/grip-vertical.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "grip-vertical",
+	size: 24,
+	node: [
+		["circle", {
+			cx: "9",
+			cy: "12",
+			r: "1",
+			key: "1vctgf"
+		}],
+		["circle", {
+			cx: "9",
+			cy: "5",
+			r: "1",
+			key: "hp0tcf"
+		}],
+		["circle", {
+			cx: "9",
+			cy: "19",
+			r: "1",
+			key: "fkjjf6"
+		}],
+		["circle", {
+			cx: "15",
+			cy: "12",
+			r: "1",
+			key: "1tmaij"
+		}],
+		["circle", {
+			cx: "15",
+			cy: "5",
+			r: "1",
+			key: "19l28e"
+		}],
+		["circle", {
+			cx: "15",
+			cy: "19",
+			r: "1",
+			key: "f4zoj3"
+		}]
+	]
+};
+__iconData.node;
+const GripVertical = createLucideIcon(__iconData);
+//#endregion
 //#region src/components/table/table.cva.ts
 const tableRowDefinition = UIOverrides.defineConfig({
 	base: [
@@ -45,4 +98,4 @@ const tableDataDefinition = UIOverrides.defineConfig({
 const tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-surface-default-card-foreground"] });
 const tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-surface-default-foreground"] });
 //#endregion
-export { tableHeaderTextDefinition as a, tableHeadRowDefinition as i, tableDataDefinition as n, tableRowDefinition as o, tableHeadDataDefinition as r, theadDefinition as s, tableCellTextDefinition as t };
+export { tableHeaderTextDefinition as a, GripVertical as c, tableHeadRowDefinition as i, tableDataDefinition as n, tableRowDefinition as o, tableHeadDataDefinition as r, theadDefinition as s, tableCellTextDefinition as t };

package/dist/tanstack/table.js

@@ -1,3 +1,3 @@
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-piX1SWvN.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-BTGZiluz.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-BN2_J_Ne.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-Di0_w80v.js";
 export { CellText, ColumnConfigModal, HeaderText, InfiniteTable, PaginatedTable, Table, dynamicColumns, usePagination, useSorting, useTableColumnConfig, useTableNav };

package/dist/tanstack.js

@@ -4,7 +4,7 @@ import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.
 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 { t as FileUpload } from "./FileUpload--7ub3EZO.js";
 import { t as PasswordInput } from "./PasswordInput-DYwUZ4-k.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.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 { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-CpC3wlMs.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
@@ -89,9 +89,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 { 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 { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.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-BTGZiluz.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-Di0_w80v.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/{useTableColumnConfig-BTGZiluz.js → useTableColumnConfig-Di0_w80v.js}

@@ -1,4 +1,3 @@
-import { t as Table } from "./Table-piX1SWvN.js";
 import { t as Checkbox } from "./Checkbox-CV1ILXXO.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { t as Spinner } from "./Spinner-BeVTUzzx.js";
@@ -10,6 +9,7 @@ import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-DrrPDT9v.js";
 import { t as Dialog } from "./Dialog-9manOgMA.js";
 import { Pagination } from "./components/pagination.js";
+import { t as Table } from "./Table-BN2_J_Ne.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
 import { t as UIRouter } from "./router.context-B4FvsTim.js";
 import { t as RoutingUtils } from "./routing.utils-UTQonIhB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.4",
+  "version": "5.0.0-rc.6",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/configurator/README.md

@@ -69,3 +69,9 @@ The **Advanced → Variants & overrides** sub-tab exposes the library's CVA slot
 CVA edits change class names, not the Tailwind compiler. Existing compiled classes preview immediately; newly introduced classes require inclusion in your app's Tailwind sources and a rebuild. The UIOverrides export provides a `withUIOverrides(existing)` helper that preserves other components and sibling slots. Mount the configurator below app override providers; providers nested further inside an app intentionally take precedence.
 
 The gallery is the default preview for token sections. Switch to **Token preview** to follow the active section and search results; typography metadata uses its parent text specimen. In Variants & overrides, selecting a component or slot changes the focused preview, and focusing a variant or compound-rule field selects that combination. Preview-only controls do not change saved configuration. Common controls use live library components; structural slots use contained specimens built from the same CVA definitions.
+
+The configurator window can be moved using the six-dot grip beside the preview switcher. Drag any border or corner to resize it; the layout follows the window width. Both handles support arrow keys (Shift for larger steps). The window remembers its size and position while the provider remains mounted, including across closing, reopening and docking. Restored bounds are clamped to the current viewport.
+
+The pop-out control opens a separate browser window with `window.open`. It shares the provider state with the host application, so edits remain live in both windows. Docking or closing the pop-out returns the editor to the page and preserves the draft; Apply and Cancel close the pop-out. A blocked popup leaves the in-page editor open with retry guidance. The popup remembers its own size and screen position for the next pop-out; placement remains subject to browser window rules. The popup uses its browser window for resizing and switches to the compact Live preview tab below 800px.
+
+Minimize turns the configurator into a movable **Povio UI** floating launcher without discarding its draft. Click the launcher to restore the previous window mode, size and position; drag it or use the arrow keys to move it. A minimized pop-out reopens as a separate browser window. After Apply or Cancel, the launcher remains available to start a new editing session. Geometry is remembered for the mounted session, not across page reloads.