@raintonic/formaui 0.4.0 → 0.9.0

package/CHANGELOG.md

@@ -7,6 +7,73 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- **`FuiTopbarComponent`** (new entry point `@raintonic/formaui/components/topbar`): responsive topbar navigation with a CSS Grid two-row layout. Content projection slots: `[fuiTopbarStart]` (brand/logo), `[fuiTopbarExpand]` (expand toggle), `[fuiTopbarEnd]` (user area/actions), `[fuiTopbarBottomRow]` (tabs/search/secondary row). Menu items rendered as inline buttons via `MenuItem[]` input; `itemClick` output emits the selected `MenuItem`. No built-in tab component — consumers project their own navigation into `[fuiTopbarBottomRow]`.
+
+### Changed
+
+- **BREAKING** `FuiAvatarComponent` simplified to design spec:
+  - `fullName` is now **required** (`input.required<string>()`)
+  - Removed inputs: `shape`, `avatarUrl`, `srcSet`, `sizesAttr`, `name`, `surname`, `identityKey`
+  - Removed local state: `imageFailed`, `onImgError()`, `displayImage`
+  - New input: `initials` (optional override for computed initials)
+  - `size` now supports `'2xl'` (64px) in addition to previous sizes
+  - Pixel sizes updated: `xs: 24, sm: 32, md: 40, lg: 48, xl: 56, '2xl': 64`
+  - Component is now **initials-only** (no `<img>` tag — use `<fui-avatar>` for initials display only; for image avatars, project an `<img>` into the component)
+  - Added tooltip via `FuiTooltipDirective` showing `fullName()`, moved `--fui-avatar-font-size` to inline `font-size` computed style
+  - CSS changes: removed image styles (`fui-avatar__img`), border, `--rounded`/`--square` shape variants; initials background uses `--fui-primary-muted`
+- **BREAKING** `FuiTopbarComponent` content projection slots renamed:
+  - `[fuiTopbarHeader]` → `[fuiTopbarStart]`
+  - `[fuiTopbarTabs]` → `[fuiTopbarBottomRow]`
+  - `[fuiTopbarFooter]` → `[fuiTopbarEnd]`
+  - Removed `expanded` input and `fui-topbar--expanded` host class (always renders two-row layout with `[fuiTopbarBottomRow]`)
+  - Removed `FuiIconComponent` import (no longer used)
+- **BREAKING** `FuiMenuComponent` renamed to `FuiDropdownMenuComponent`:
+  - Import path changed from `@raintonic/formaui/components/menu` to `@raintonic/formaui/components/dropdown-menu`
+  - Selector changed from `fui-menu` to `fui-dropdown-menu`
+  - `FuiMenuItemComponent` → `FuiDropdownMenuItemComponent` (selector `fui-dropdown-menu-item`)
+  - `FuiMenuTriggerDirective` → `FuiDropdownMenuTriggerDirective` (selector `[fuiDropdownMenuTrigger]`, input `fuiDropdownMenuTriggerFor`)
+  - CSS classes renamed: `.fui-menu` → `.fui-dropdown-menu`, `.fui-menu__panel` → `.fui-dropdown-menu__panel`, `.fui-menu-item` → `.fui-dropdown-menu-item`, `.fui-menu-panel` → `.fui-dropdown-menu-panel`, `.fui-menu-backdrop` → `.fui-dropdown-menu-backdrop`
+  - Type aliases renamed: `FuiMenuPosition` → `FuiDropdownMenuPosition`, `FuiMenuSize` → `FuiDropdownMenuSize`, `MenuItemVariant` → `DropdownMenuItemVariant`
+  - Constants renamed: `RT_MENU_POSITIONS` → `FUI_DROPDOWN_MENU_POSITIONS`, `RT_MENU_SIZES` → `FUI_DROPDOWN_MENU_SIZES`, `MENU_ITEM_VARIANTS` → `DROPDOWN_MENU_ITEM_VARIANTS`
+  - Old `lib/components/menu/` directory removed; re-created as `lib/components/dropdown-menu/`
+  - All internal consumers updated (`FuiAdvancedDataTableComponent`, toolbar overlay, topbar docs page)
+- **`FuiToolbarComponent`**: `fui-avatar` usage updated to new API (`fullName` input only; placeholder value `"None"`)
+
+### Removed
+
+- **`FuiBigMenuComponent`** (entry point `@raintonic/formaui/components/big-menu`) completely removed. Files deleted:
+  - Component files: `big-menu.component.ts`, `big-menu.component.html`, `big-menu.component.scss`
+  - Item interface: `big-menu-item.interface.ts`
+  - Internationalization: `big-menu.intl.ts`, `big-menu.intl.spec.ts`
+  - Tests: `big-menu.component.spec.ts`
+  - Entry points: `index.ts`, `ng-package.json`
+  - Doc pages: `big-menu.page.html`, `big-menu.page.ts`
+  - Entry removed from component registry and docs routes
+  - References purged from `README.md`, `lib/README.md`, and `docs/src/app/pages/i18n/i18n.page.ts`
+
+### Changed
+
+- **BREAKING** `FuiTagComponent` renamed to `FuiChipComponent`:
+  - Import path changed from `@raintonic/formaui/components/tag` to `@raintonic/formaui/components/chip`
+  - Selector changed from `fui-tag` to `fui-chip`
+  - `FuiTagComponent` → `FuiChipComponent`
+  - `FuiTagIntl` → `FuiChipIntl`
+  - `FuiTagVariant` → `FuiChipVariant`
+  - `FuiTagSize` → `FuiChipSize`
+  - `FUI_TAG_VARIANTS` → `FUI_CHIP_VARIANTS`
+  - `FuiTagRemoveEvent` → `FuiChipRemoveEvent` (event shape property `tag` renamed to `chip`)
+  - CSS classes renamed: `.fui-tag` → `.fui-chip`, `.fui-tag--{variant}` → `.fui-chip--{variant}`, `.fui-tag__content` → `.fui-chip__content`, `.fui-tag__label` → `.fui-chip__label`, `.fui-tag__icon` → `.fui-chip__icon`, `.fui-tag__remove` → `.fui-chip__remove`
+  - Old `lib/components/tag/` directory removed; re-created as `lib/components/chip/`
+  - All doc pages, registry entries, routes, and i18n references updated
+
+### Fixed
+
+- **FuiToolbarComponent**: avatar hardcoded `fullName="None"` as stopgap — toolbar needs user-profile data wired through (no functional regression)
+
+## [1.0.0-alpha.1] - 2026-06-04
+
 ### Changed
 
 - **BREAKING** `FuiButtonDirective` variant set reduced to the Figma spec: `primary | secondary | tertiary | tertiary-violet | link | destructive`.
@@ -15,59 +82,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - `variant="danger"` → use `variant="destructive"`.
   - `variant="icon"` → use `iconOnly` combined with a variant (typically `tertiary`).
 - **BREAKING** Button `loading` behavior: text is now visible during loading; the spinner occupies a leading slot; user-supplied icons (leading and trailing) are hidden during loading. Previously the entire label was hidden via `color: transparent`.
+- **BREAKING** Responsive utility classes migrated to Tailwind-style colon syntax. The legacy Bootstrap-style classes `.fui-{bp}-{display}`, `.fui-{m,p}{,t,r,b,l,x,y}-{bp}-{size}`, and `.fui-text-{bp}-{align}` (where `{bp}` is `sm|md|lg|xl|2xl`) are removed. Use the colon prefix instead: `.{bp}:fui-{utility}` (e.g. `md:fui-flex`, `lg:fui-grid-cols-3`, `md:fui-px-4`, `lg:fui-text-center`). Responsive variants of `grid-cols-1..12` are now available. Bootstrap-style grid classes (`.fui-col-{bp}-N`, `.fui-offset-{bp}-N`, `.fui-g{,x,y}-{bp}-N`) are **unchanged**. No known consumer usages of the removed classes.
 
 ### Added
 
 - Semantic alias tokens: `--fui-destructive-default`, `--fui-destructive-hover`, `--fui-destructive-text`, `--fui-tertiary-text`, `--fui-tertiary-hover-bg`, `--fui-tertiary-violet-text`, `--fui-tertiary-violet-hover-bg`.
+- `FuiBreakpointService` (new entry point `@raintonic/formaui/services/breakpoint`): signal-based, SSR-safe access to the 6 PRD breakpoints (`xs|sm|md|lg|xl|2xl`). API: `matches(bp): Signal<boolean>` (same semantics as `@media (min-width: …)`) and `active: Signal<FuiBreakpoint | null>` (largest matched mobile-first; `null` below `xs` or on the server). Thresholds (`FUI_BREAKPOINTS`) kept in sync with `tokens/core/layout.json` and `_constants.scss`, drift detected by a unit test.
+- Precompiled `utilities.css` shipped as an asset under `@raintonic/formaui/styles/utilities.css`. Lets consumers who don't use Sass `@import '@raintonic/formaui/styles/utilities.css'` to get the full utility-class output of `_utilities.scss` (display, spacing m/p/gap, text-align/color/transform/decoration, position, border, rounded, visibility, overflow, width, height, density, grid-cols, stack, flex utilities + responsive variants `{bp}:fui-*` for `sm|md|lg|xl|2xl` × `display|spacing|text-align|grid-cols`). ~50 KB unminified. Built via `scripts/build-utilities-css.mjs` in the `prebuild:lib` hook. NOT included: tokens (`:root`), Bootstrap grid (`_grid.scss`), reset CSS, component globals — consumers still need the FormaUI theme bundle for `var(--fui-*)` to resolve. Configurable customization remains available via the SCSS path `@use '@raintonic/formaui/styles/partials/utilities' with (…)`. See `docs/.../consumer-override-guide.md` § "Utility CSS precompilato (no Sass)" for details.
+- Subpath aliases via the `exports` field of `lib/package.json`: `@raintonic/formaui/utilities` (alias for the precompiled `utilities.css` shipped in U4) and `@raintonic/formaui/styles` (alias for the SCSS entry `styles/index.scss`). The legacy long paths (`@raintonic/formaui/styles/utilities.css`, `@raintonic/formaui/styles/index.scss`, and any other file under `styles/**`) keep working thanks to a `./styles/*` wildcard. No breaking change.
+- Precompiled full bundle `styles.css` shipped as an asset under `@raintonic/formaui/styles.css` (long path `@raintonic/formaui/styles/styles.css` works too). Drop-in CSS containing tokens (`:root`), reset, theme, typography, motion, grid, utilities, and component globals — ~135 KB unminified. Built via `scripts/build-styles-css.mjs` in the `prebuild:lib` hook. Unlike `utilities.css`, this includes the tokens block so it works standalone (no theme import required). Use the SCSS path `@use '@raintonic/formaui/styles' as fui` for configurable customization (rebrand, breakpoints, opt-out responsive families).
+- Safety hardening of the publish flow: `lib/package.json` now ships a `prepublishOnly` hook that blocks direct `npm publish ./dist/formaui` unless invoked via `npm run publish:lib` (which sets the `FORMAUI_PUBLISH=1` escape env var). This prevents accidental publishes that bypass the lint/test/build/parity/size gates. `scripts/publish.mjs` also gained an explicit `tokens:verify-parity` gate between build and size check.
+- Public SCSS API contract formalized: `fui.brand($primary, $accent)` is the SOLE stable mixin exposed via `@use '@raintonic/formaui/styles' as fui`. Other forwarded members (e.g. `fui-breakpoint`, `$fui-spacing-N`, `css-ident-escape`) remain internal and may change in minor versions without notice. See `docs/.../consumer-override-guide.md` § "Public SCSS API contract".
+- Sass utility API now configurable via `@use '@raintonic/formaui/styles/partials/utilities' with (…)`. Two new parameters with `!default` values: `$breakpoints` (map, default = `(sm, md, lg, xl, '2xl')`) lets consumers rename or replace the responsive-prefix names; `$responsive-families` (map of booleans, default = all `true`) lets consumers opt-out individual responsive families (`display`, `spacing`, `text-align`, `grid-cols`) to trim CSS bulk. Defaults produce byte-identical CSS to the previous emission (parity preserved). Names with a leading digit (e.g. `2xl`) are auto-escaped via the new `css-ident-escape()` helper in `_mixins.scss`. See `docs/.../consumer-override-guide.md` § "Configurare le utility responsive" for examples.
 
 ### Fixed
 
 - Destructive variant now uses a saturated red (`--fui-danger-90` = `#e5484d`) instead of the pastel `--fui-danger-60` (`#fdbdbe`) that was incorrectly wired as the button's `danger` background.
 
-## [1.0.0] - YYYY-MM-DD (placeholder — release script will set the date)
-
-First stable release. API is now locked under SemVer from this version forward.
-
-### Breaking
-- Removed experimental `dynamic-form` component and its entry point (`@raintonic/formaui/components/dynamic-form`). No direct migration path — consumers should use reactive forms directly.
-
-### Added
-- Pre-publication component audit (see `.claude/docs/reviews/`)
-- Bundle size budget enforced via `size-limit`
-- Coverage threshold enforced at 60% in CI
-- Explicit `.browserslistrc` for library
-- GitHub Pages deploy for docs at https://formaui.raintonic.com
-- PR validation CI workflow
-- Theming guide page in docs app
-- `.meta.md` metadata for flagship components
-- LICENSE, SECURITY.md, CONTRIBUTING.md
-- Tests for 8 previously uncovered components: breadcrumb, empty-state, list, radio, skeleton, spinner, tag, toggle
-- Auto-sync of `FORMAUI_VERSION` from `package.json` at build time
-- Syntax highlighting in docs code blocks (Prism.js)
-- Custom color support for badges via hex strings or explicit color pairs
-- Type declaration for `AdvancedDataTableHeader.type`
-
-### Fixed
-- README package name in install and import examples (was `formaui/*`, now `@raintonic/formaui/*`)
-- Cross-entry-point import in tree-table (ng-packagr rootDir violation)
-- Topbar layout on mobile viewport (< 768px)
-- Nav panel position on mobile
-- API viewer type-column overflow for long union types
-- Select component keyboard navigation (added PageUp/PageDown)
-- JSDoc examples with stale `rtButton` references
-- Card header spacing handling
-- Checkbox label position when set to `before`
-- Toggle label position when set to `before`
-
 ## [0.2.1] - 2026-03-31
 
 ### Fixed
+
 - Dialog padding on overlay and CSS compile pipeline
 - README npm badge link
 
 ## [0.2.0] - 2026-03-31
 
 ### Added
+
 - Initial public npm publication as `@raintonic/formaui`
 - Comprehensive README for npm
 - `llms.txt` generator for AI-readable component metadata
@@ -79,6 +121,7 @@ First stable release. API is now locked under SemVer from this version forward.
 - Collapsible code panel in playground viewer
 
 ### Fixed
+
 - Number input behavior
 - Module name mapper for publication
 - Package name for publication
@@ -86,6 +129,7 @@ First stable release. API is now locked under SemVer from this version forward.
 - Icon config exports aligned with Fui naming
 
 ### Changed
+
 - Standardized all class names to `Fui` prefix (internal rename — no external API was called `Rt*`)
 - Replaced direct `document` access with `DOCUMENT` injection token (SSR groundwork)
 - Overlay subscription cleanup (memory leak fix)
@@ -96,6 +140,7 @@ First stable release. API is now locked under SemVer from this version forward.
 - Size tokens normalized (`sm|md|lg`), `readonly` casing normalized, ARIA attributes enriched, live announcements added
 
 ### Removed
+
 - Legacy `holiday`/`RainTonic` references in JSDoc
 - `data-rt*` HTML attributes (renamed to `data-fui*`)
 

package/README.md

@@ -1,9 +1,6 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/RainTonic/formaui/main/resources/logo_black.svg" alt="FormaUI" width="360">
+  <img src="./resources/logo_white.svg" alt="FormaUI" width="360">
 </p>
-
-<h1 align="center">FormaUI</h1>
-
 <p align="center">A modern, standalone Angular UI component library with built-in theming, CDK primitives, and tree-shakable imports.</p>
 
 [![npm version](https://img.shields.io/npm/v/@raintonic/formaui.svg)](https://www.npmjs.com/package/@raintonic/formaui)
@@ -104,8 +101,7 @@ import { FuiThemeService } from '@raintonic/formaui/services/theme';
 ### Button
 
 ```html
-<button fuiButton variant="primary">Save</button>
-<button fuiButton variant="secondary">Cancel</button>
+<button fuiButton variant="primary">Save</button> <button fuiButton variant="secondary">Cancel</button>
 ```
 
 ### Form Field
@@ -135,15 +131,15 @@ export class AppComponent {
 
 All components use the `fui` prefix and are standalone.
 
-| Category | Components |
-|---|---|
-| **Forms** | `autocomplete` `checkbox` `date-picker` `file-upload` `form-field` `input` `number-input` `password-input` `radio` `select` `slider` `time-picker` `toggle` `tree-select` |
-| **Data** | `data-table` `list` `paginator` `tree` `tree-table` |
-| **Layout** | `accordion` `card` `divider` `sidebar` `side-panel` `tab` `toolbar` |
-| **Navigation** | `breadcrumb` `menu` `big-menu` `stepper` |
-| **Feedback** | `alert` `badge` `empty-state` `progressbar` `skeleton` `spinner` `tag` `tooltip` |
-| **Actions** | `button` `button-group` `drawer` `popover` |
-| **Display** | `avatar` `icon` |
+| Category       | Components                                                                                                                                                                |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Forms**      | `autocomplete` `checkbox` `date-picker` `file-upload` `form-field` `input` `number-input` `password-input` `radio` `select` `slider` `time-picker` `toggle` `tree-select` |
+| **Data**       | `data-table` `list` `paginator` `tree` `tree-table`                                                                                                                       |
+| **Layout**     | `accordion` `card` `divider` `side-panel` `sidebar-nav-menu` `tab` `toolbar` `topbar`                                                                                     |
+| **Navigation** | `breadcrumb` `stepper`                                                                                                                                                    |
+| **Feedback**   | `alert` `badge` `chip` `empty-state` `progressbar` `skeleton` `spinner` `tooltip`                                                                                         |
+| **Actions**    | `button` `button-group` `drawer` `popover`                                                                                                                                |
+| **Display**    | `avatar` `icon`                                                                                                                                                           |
 
 ### Import Pattern
 
@@ -155,20 +151,20 @@ import { Fui<Component> } from '@raintonic/formaui/components/<name>';
 
 Low-level primitives for building custom components.
 
-| Module | Description |
-|---|---|
-| `@raintonic/formaui/cdk/overlay` | Overlay and portal positioning system |
-| `@raintonic/formaui/cdk/drag-drop` | Drag and drop functionality |
-| `@raintonic/formaui/cdk/virtual-scroll` | Virtual scrolling for large lists |
-| `@raintonic/formaui/cdk/form-field` | Form field infrastructure and control interface |
+| Module                                  | Description                                     |
+| --------------------------------------- | ----------------------------------------------- |
+| `@raintonic/formaui/cdk/overlay`        | Overlay and portal positioning system           |
+| `@raintonic/formaui/cdk/drag-drop`      | Drag and drop functionality                     |
+| `@raintonic/formaui/cdk/virtual-scroll` | Virtual scrolling for large lists               |
+| `@raintonic/formaui/cdk/form-field`     | Form field infrastructure and control interface |
 
 ## Services
 
-| Service | Import | Description |
-|---|---|---|
-| **Dialog** | `@raintonic/formaui/services/dialog` | Modal dialog management |
-| **Notification** | `@raintonic/formaui/services/notification` | Toast notifications |
-| **Theme** | `@raintonic/formaui/services/theme` | Runtime theme switching |
+| Service          | Import                                     | Description             |
+| ---------------- | ------------------------------------------ | ----------------------- |
+| **Dialog**       | `@raintonic/formaui/services/dialog`       | Modal dialog management |
+| **Notification** | `@raintonic/formaui/services/notification` | Toast notifications     |
+| **Theme**        | `@raintonic/formaui/services/theme`        | Runtime theme switching |
 
 ## Theming
 

package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, output, inject, ElementRef, Renderer2, NgZone, Directive, effect, contentChildren } from '@angular/core';
+import { signal, Injectable, input, output, inject, ElementRef, Renderer2, Directive, effect, contentChildren } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 class FuiDragRegistryService {
@@ -210,7 +210,6 @@ class FuiDragDirective {
     _registry = inject(FuiDragRegistryService);
     _renderer = inject(Renderer2);
     _document = inject(DOCUMENT);
-    _ngZone = inject(NgZone);
     _autoScroller = new FuiAutoScroller();
     _dragRef = new FuiDragRef();
     _previewElement = null;
@@ -252,16 +251,14 @@ class FuiDragDirective {
             distance: { x: 0, y: 0 },
             event,
         });
-        this._ngZone.runOutsideAngular(() => {
-            this._pointerMoveHandler = (e) => {
-                this._onPointerMove(e);
-            };
-            this._pointerUpHandler = (e) => {
-                this._onPointerUp(e);
-            };
-            this._document.addEventListener('pointermove', this._pointerMoveHandler);
-            this._document.addEventListener('pointerup', this._pointerUpHandler);
-        });
+        this._pointerMoveHandler = (e) => {
+            this._onPointerMove(e);
+        };
+        this._pointerUpHandler = (e) => {
+            this._onPointerUp(e);
+        };
+        this._document.addEventListener('pointermove', this._pointerMoveHandler);
+        this._document.addEventListener('pointerup', this._pointerUpHandler);
     }
     _onPointerMove(event) {
         const position = this._applyConstraints({ x: event.clientX, y: event.clientY });
@@ -271,14 +268,12 @@ class FuiDragDirective {
         }
         this._autoScroller.checkAutoScroll(position);
         this._registry.updateDrag(position, event);
-        this._ngZone.run(() => {
-            this.fuiDragMoved.emit({
-                source: this,
-                data: this.fuiDragData(),
-                pointerPosition: position,
-                distance: this._dragRef.distance,
-                event,
-            });
+        this.fuiDragMoved.emit({
+            source: this,
+            data: this.fuiDragData(),
+            pointerPosition: position,
+            distance: this._dragRef.distance,
+            event,
         });
     }
     _onPointerUp(event) {
@@ -290,31 +285,27 @@ class FuiDragDirective {
             const predicate = dropZone.fuiDropZonePredicate();
             const accepted = !predicate || predicate(this);
             if (accepted) {
-                this._ngZone.run(() => {
-                    const dropEvent = {
-                        source: this,
-                        dragData: this.fuiDragData(),
-                        dropZoneData: dropZone.fuiDropZoneData(),
-                        dropZone,
-                        isPointerOverContainer: true,
-                    };
-                    this.fuiDragDropped.emit(dropEvent);
-                    dropZone.fuiDropped.emit(dropEvent);
-                });
+                const dropEvent = {
+                    source: this,
+                    dragData: this.fuiDragData(),
+                    dropZoneData: dropZone.fuiDropZoneData(),
+                    dropZone,
+                    isPointerOverContainer: true,
+                };
+                this.fuiDragDropped.emit(dropEvent);
+                dropZone.fuiDropped.emit(dropEvent);
             }
         }
         this._cleanupDrag();
-        this._ngZone.run(() => {
-            this._registry.endDrag(event);
-            this.fuiDragEnded.emit({
-                source: this,
-                data: this.fuiDragData(),
-                pointerPosition: position,
-                distance: this._dragRef.distance,
-                event,
-            });
-            this._isDragging.set(false);
+        this._registry.endDrag(event);
+        this.fuiDragEnded.emit({
+            source: this,
+            data: this.fuiDragData(),
+            pointerPosition: position,
+            distance: this._dragRef.distance,
+            event,
         });
+        this._isDragging.set(false);
         this._dragRef.reset();
     }
     _onKeydown(event) {
@@ -517,6 +508,13 @@ class FuiDragDirective {
         }
     }
     ngOnDestroy() {
+        // If the component is destroyed mid-drag, clear the registry first so its
+        // activeDrag signal doesn't keep a strong reference to this directive (memory
+        // leak until next drag overwrites) and so getDropZoneAtPoint doesn't return
+        // stale results in the window between destroy and next drag start.
+        if (this._isDragging()) {
+            this._registry.cancelDrag();
+        }
         this._removeListeners();
         this._cleanupDrag();
         this._autoScroller.destroy();