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

package/dist/{useTableNav-D9mICzNW.d.ts → useTableNav-Ckj5PBRk.d.ts}

@@ -1,6 +1,7 @@
-import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-C3xb4Ttq.js";
+import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
+import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
 import { t as FieldPath } from "./form.binding-DVJ5F0JE.js";
-import { n as TypographyProps } from "./Typography-BiuidzDC.js";
+import { n as TypographyProps } from "./Typography-XljT9s02.js";
 import { CSSProperties, ComponentType, Dispatch, FC, KeyboardEvent, ReactNode, SetStateAction } from "react";
 import { z } from "zod";
 import { CellContext, ColumnDef, ColumnMeta, ColumnOrderState, ColumnVisibilityState, OnChangeFn, PaginationState, Row, RowData, RowSelectionState, SortingState, StockFeatures, Table } from "@tanstack/react-table";

package/dist/{useToast-DMSm59Y6.d.ts → useToast-yreVCUer.d.ts}

@@ -1,4 +1,4 @@
-import { r as ToastProps } from "./Toast-B4cXs2rj.js";
+import { r as ToastProps } from "./Toast-ruXqONDA.js";
 import { Id, ToastOptions, ToastPosition } from "react-toastify";
 //#region src/components/status/Toast/useToast.d.ts
 interface ToastParams extends Omit<ToastProps, "color"> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.4",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,6 +26,11 @@
       "import": "./dist/components/button.js",
       "default": "./dist/components/button.js"
     },
+    "./icon-slot": {
+      "types": "./dist/components/icon-slot.d.ts",
+      "import": "./dist/components/icon-slot.js",
+      "default": "./dist/components/icon-slot.js"
+    },
     "./icon-button": {
       "types": "./dist/components/icon-button.d.ts",
       "import": "./dist/components/icon-button.js",
@@ -36,10 +41,10 @@
       "import": "./dist/components/inline-icon-button.js",
       "default": "./dist/components/inline-icon-button.js"
     },
-    "./pill-button": {
-      "types": "./dist/components/pill-button.d.ts",
-      "import": "./dist/components/pill-button.js",
-      "default": "./dist/components/pill-button.js"
+    "./badge-button": {
+      "types": "./dist/components/badge-button.d.ts",
+      "import": "./dist/components/badge-button.js",
+      "default": "./dist/components/badge-button.js"
     },
     "./split-button": {
       "types": "./dist/components/split-button.d.ts",
@@ -286,6 +291,21 @@
       "import": "./dist/config/link-context.js",
       "default": "./dist/config/link-context.js"
     },
+    "./ui-configurator": {
+      "types": "./dist/config/ui-configurator.d.ts",
+      "import": "./dist/config/ui-configurator.js",
+      "default": "./dist/config/ui-configurator.js"
+    },
+    "./ui-configurator/vite": {
+      "types": "./dist/config/ui-configurator-vite.d.ts",
+      "import": "./dist/config/ui-configurator-vite.js",
+      "default": "./dist/config/ui-configurator-vite.js"
+    },
+    "./ui-configurator/theme": {
+      "types": "./dist/config/ui-configurator-theme.d.ts",
+      "import": "./dist/config/ui-configurator-theme.js",
+      "default": "./dist/config/ui-configurator-theme.js"
+    },
     "./ui-config": {
       "types": "./dist/config/ui-config.d.ts",
       "import": "./dist/config/ui-config.js",
@@ -1307,6 +1327,7 @@
       "default": "./dist/rich-text-editor.js"
     },
     "./rich-text-editor/styles": "./dist/styles/editor.css",
+    "./ui-configurator/styles": "./dist/styles/configurator.css",
     "./color-utilities": "./dist/styles/color-utilities.css",
     "./tw-ui-plugin": {
       "types": "./dist/tw-ui-plugin.d.ts",
@@ -1317,6 +1338,7 @@
   },
   "files": [
     "dist",
+    "src/configurator/README.md",
     "scripts/generate-rules.mjs",
     ".rulesync",
     "rulesync.jsonc"
@@ -1398,9 +1420,13 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": ">=16",
+    "vite": "^7.0.0 || ^8.0.0",
     "zod": "^4.5.0"
   },
   "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     },

package/src/configurator/README.md

@@ -0,0 +1,71 @@
+# Live UI configuration
+
+The configurator is an optional Povio UI entrypoint for running applications. It is independent of Storybook. Mount one provider at the application root, below your existing `UIConfig.Provider` and `UIOverrides.Provider`, so changes reach every component and portaled overlay.
+
+```tsx
+import {
+  UIConfigurationProvider,
+  UIConfigurationModal,
+  useUIConfiguration,
+  parseThemeCss,
+} from "@povio/ui/ui-configurator";
+import "@povio/ui/ui-configurator/styles";
+import themeSource from "./theme.css?raw"; // Vite; alternatively provide token maps directly.
+
+const defaults = parseThemeCss(themeSource);
+
+function ConfigureButton() {
+  const { open } = useUIConfiguration();
+  return <button onClick={open}>Configure UI</button>;
+}
+
+function App() {
+  return (
+    <UIConfigurationProvider defaults={defaults}>
+      <YourApplication />
+      <ConfigureButton />
+      <UIConfigurationModal />
+    </UIConfigurationProvider>
+  );
+}
+```
+
+Tokens are grouped into colors, typography, spacing, radius, sizing, and effects. The Colors section reads every `:root` and `.dark` block in `theme.css`. Base palette values (such as `--primary-800-base`) are shared by both modes; semantic aliases (such as `--interactive-primary-background-base`) can differ by mode. Alias fields offer a selector populated from the theme's base palette, plus a Custom value option for literal RGB values or other references. Changing a palette value updates every component color that references it through an alias. Radius, spacing, sizing and font size share a Layout tab with a sub-tab each (Font size lists the Typography font sizes again). Every sub-tab opens with a global stepper that rescales its tokens from the theme defaults: rounding goes from square to pill (pill rounds only controls such as buttons, inputs and badges; surfaces keep their radii, and focus rings keep their offset), spacing scales padding and gaps, sizing scales button and input heights, avatars, icons, minimum widths and container widths, and font size scales every text style while its ratio line heights follow. Spacing, sizing and font size values snap to whole pixels, and spacing and sizing update the mirrored `--spacing-*` and `--container-*` tokens together. The Spacing sub-tab lists the `--spacing-*` copy of padding and gap tokens and Sizing lists the `--container-*` copy of size tokens; editing either updates its mirror too. Buttons and inputs of the same size always share one height: the app themes alias `input-height-*` to `button-height-*`, and editing an input height in the configurator updates the button height with it. Button and input defaults use the existing `UIConfig` API. Explicit component props still take precedence.
+
+Typed values update the preview on blur or Enter; presets and color pickers update immediately. The preview sets CSS variables on `:root` / `.dark` and updates the provider. The top bar rem/px switch (px by default) changes display units without changing stored tokens; bare numbers use the selected unit, and explicit units are converted for display. Apply retains the configuration for the mounted session; Cancel, Close, and Escape restore the last applied configuration. Reset previews the application's original defaults and can itself be canceled. Unmounting removes the runtime overrides. The modal's controls use independent styling so editing app colors does not make the editor unusable.
+
+For persistence, load a saved `UIConfiguration` and pass it as `initialValue` before mounting. Use `onApply(configuration)` to hand the result to your app's settings storage. This library does not write to a backend or local storage automatically; each application owns access to the launcher and saved settings. `initialValue` is read once on mount.
+
+The exporter provides Tailwind CSS overrides and a separate `UIConfig.Provider` configuration. Import exported CSS **after** the app's existing theme. Light and dark colors retain separate selectors. The CSS export uses `@theme` for build-time Tailwind integration; the live provider emits ordinary CSS selectors.
+
+## Save directly to your app's theme in Vite
+
+The configurator and its stylesheet ship with `@povio/ui` as separate, optional subpath exports. The Node plugin ships in another entry, `@povio/ui/ui-configurator/vite`; neither the configurator nor Node code is exported from the regular component barrels.
+
+When you only need `parseThemeCss`, `exportCss`, or their token types, import from `@povio/ui/ui-configurator/theme`. This lightweight entry avoids loading the React editor and preview components. The helpers remain available from `@povio/ui/ui-configurator` for existing integrations.
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { uiConfigurator } from "@povio/ui/ui-configurator/vite";
+
+export default defineConfig({
+  plugins: [uiConfigurator({ themeFile: "src/styles/theme.css" })],
+});
+```
+
+`themeFile` defaults to `src/styles/theme.css` and resolves against this app's Vite `root`, not the UI package or monorepo root. The file must already exist inside the app root; paths and symlinks into another app are rejected. Add the plugin to each app that needs saving. For Storybook's Vite builder, add it to `viteFinal`'s plugins.
+
+With the dev server running, open **Advanced → Export → Tailwind CSS → Save theme**. The plugin receives the existing CSS export and updates the matching declarations in that app's theme file. Imports, layers, unrelated tokens, and `@theme inline` blocks are preserved. Light and dark tokens stay separate. Vite watches the file and rebuilds its CSS, so changes persist across reloads and subsequent builds. Saving writes immediately; Cancel does not undo a file save. Apply still applies session settings only. UIConfig and UIOverrides exports continue to use Copy/Download.
+
+The plugin uses Vite's development middleware and HTML hooks and is enabled only for the dev server, regardless of mode. Production builds and `vite preview` have no writer endpoint, connection metadata, or Save theme action. No virtual-module import or provider callback is required. The browser can only write the server's configured theme file using its per-server token. Vite is an optional peer; ordinary component consumers do not need it.
+
+`parseThemeCss` reads the flat declaration blocks used by Atlas themes (`:root`, `.dark`, and `@theme` / `@theme static`). It excludes `@theme inline` declarations because their compiled literal values cannot be changed at runtime. It is not a general CSS parser. Supply `{ light, dark, theme }` maps directly for other theme structures. Use CSS variables in utilities you want to tune at runtime. Breakpoints, generated class names, and literal values compiled from `@theme inline` require rebuilding CSS; adjust their underlying variables instead. Edits are application-wide within the current document; mount only one configuration provider per document.
+
+The live preview lists every Povio UI component (`gallery/demos.tsx`). Click one to focus it, then hover to see the padding, gaps and radius that come from theme tokens; clicking a band opens that exact token in the editor. The inspector reads the rendered Tailwind classes (`inspector/token-classes.ts`), so it follows `UIOverrides` and responsive variants, and only offers tokens present in the supplied defaults. Dialog, popover, tooltip and dropdown demos are static replicas built from the components' own class definitions, because an open react-aria modal or popover would take focus away from the configurator.
+
+The **Advanced → Variants & overrides** sub-tab exposes the library's CVA slots by component. It resolves declarative app overrides before showing base classes, variant classes, default values, and compound-rule classes. Edits store a serializable snapshot of the effective slot using `overrideCva`; untouched slots and function mappers retain the inherited app configuration. Function-based CVA overrides are read-only. Reset slot restores the inherited definition. Apply, Cancel, Reset all, and host persistence cover CVA edits as well as tokens.
+
+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.