@povio/ui 4.0.3 → 5.0.0-rc.10

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

@@ -1,13 +1,14 @@
-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-BWmZd20e.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";
 import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
 import { TFunction } from "i18next";
 //#region src/components/table/CellText.d.ts
-interface CellTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
+interface CellTextProps extends Partial<Pick<TypographyProps, "size">> {
   children: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -28,7 +29,7 @@ interface ColumnConfigModalProps<TData extends RowData, TValue> {
 declare function ColumnConfigModal<TData extends RowData, TValue>({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }: ColumnConfigModalProps<TData, TValue>): import("react").JSX.Element | null;
 //#endregion
 //#region src/components/table/HeaderText.d.ts
-interface HeaderTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
+interface HeaderTextProps extends Partial<Pick<TypographyProps, "size">> {
   children: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -40,8 +41,8 @@ declare const tableRowDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly alternatingBackground: {
-      readonly even: "even:bg-elevation-fill-inverted-4/5";
-      readonly odd: "odd:bg-elevation-fill-inverted-4/5";
+      readonly even: "even:bg-surface-inverted-alt/5";
+      readonly odd: "odd:bg-surface-inverted-alt/5";
     };
   }>;
 };
@@ -55,7 +56,7 @@ declare const tableHeadDataDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly hasRightBorder: {
-      readonly true: "border-l border-l-elevation-outline-default-1 border-solid";
+      readonly true: "border-l border-l-border-default-subtle border-solid";
       readonly false: "";
     };
   }>;
@@ -64,7 +65,7 @@ declare const tableDataDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly hasRightBorder: {
-      readonly true: "border-l border-l-elevation-outline-default-1";
+      readonly true: "border-l border-l-border-default-subtle";
       readonly false: "";
     };
   }>;

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

@@ -1,4 +1,4 @@
-import { r as ToastProps } from "./Toast-DIlYlUQk.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,9 +1,12 @@
 {
   "name": "@povio/ui",
-  "version": "4.0.3",
+  "version": "5.0.0-rc.10",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "bin": {
+    "povio-ui-rules": "./scripts/generate-rules.mjs"
+  },
   "sideEffects": [
     "**/*.css"
   ],
@@ -23,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",
@@ -33,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",
@@ -283,6 +291,31 @@
       "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"
+    },
+    "./app-canvas": {
+      "types": "./dist/config/app-canvas.d.ts",
+      "import": "./dist/config/app-canvas.js",
+      "default": "./dist/config/app-canvas.js"
+    },
+    "./app-canvas/tanstack": {
+      "types": "./dist/config/app-canvas-tanstack.d.ts",
+      "import": "./dist/config/app-canvas-tanstack.js",
+      "default": "./dist/config/app-canvas-tanstack.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",
@@ -1304,6 +1337,9 @@
       "default": "./dist/rich-text-editor.js"
     },
     "./rich-text-editor/styles": "./dist/styles/editor.css",
+    "./ui-configurator/styles": "./dist/styles/configurator.css",
+    "./app-canvas/styles": "./dist/styles/app-canvas.css",
+    "./color-utilities": "./dist/styles/color-utilities.css",
     "./tw-ui-plugin": {
       "types": "./dist/tw-ui-plugin.d.ts",
       "import": "./dist/tw-ui-plugin.js",
@@ -1312,7 +1348,11 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/configurator/README.md",
+    "scripts/generate-rules.mjs",
+    ".rulesync",
+    "rulesync.jsonc"
   ],
   "homepage": "https://povio.com",
   "license": "UNLICENSED",
@@ -1372,6 +1412,7 @@
     "@react-stately/datepicker": "^3.16.0",
     "@tanstack/react-form": "^1.33.2",
     "@tanstack/react-query": "^5.89.0",
+    "@tanstack/react-router": "^1.136.8",
     "@tanstack/react-table": "^9.0.0",
     "@tanstack/store": "^0.11.0",
     "@tiptap/core": "^3.19.0",
@@ -1391,9 +1432,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
     },
@@ -1468,6 +1513,9 @@
     },
     "@tiptap/starter-kit": {
       "optional": true
+    },
+    "@tanstack/react-router": {
+      "optional": true
     }
   }
 }

package/rulesync.jsonc

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://github.com/dyoshikawa/rulesync/releases/latest/download/config-schema.json",
+  "targets": ["cursor", "claudecode", "codexcli"],
+  "features": ["rules"],
+  "outputRoots": ["."],
+  "delete": true,
+  "verbose": false,
+  "silent": false,
+  "global": false,
+  "gitignoreTargetsOnly": true,
+}

package/scripts/generate-rules.mjs

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+import { spawnSync } from "node:child_process";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const rulesyncEntry = require.resolve("rulesync");
+const rulesyncCli = join(dirname(rulesyncEntry), "cli", "index.js");
+const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
+const configPath = join(packageRoot, "rulesync.jsonc");
+
+const result = spawnSync(
+  process.execPath,
+  [
+    rulesyncCli,
+    "generate",
+    "--input-root",
+    packageRoot,
+    "--config",
+    configPath,
+    "--output-roots",
+    process.cwd(),
+    ...process.argv.slice(2),
+  ],
+  { stdio: "inherit" },
+);
+
+if (result.error) {
+  throw result.error;
+}
+
+process.exitCode = result.status ?? 1;

package/src/configurator/README.md

@@ -0,0 +1,77 @@
+# 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.
+
+Live Preview includes a docked inspector with independent scrolling. In **Inspect** mode, hover any element to see its computed styles and box model, click to pin it, and click the selected element again to unpin. **Interact** mode lets preview controls respond normally and lets gallery cards open their focused demos. The neutral box model shows per-side spacing and borders, corner radii, content dimensions, and row/column measurements inside the gutters of one gap sketch. Default and empty properties are omitted; recognized utility tokens link to the editor only when they match the computed value. Pinning retains selection while local component state and theme changes refresh the displayed values. Hover or focus a number in the box model to highlight its padding, margin, border, radius, content dimension or gap directly on the preview. Dialog, popover, tooltip and dropdown gallery demos use the components' class definitions to avoid taking 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.
+
+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.