@umituz/web-dashboard 4.6.3 → 4.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.6.3",
+  "version": "4.6.5",
   "description": "Installable app skeleton for the fleet — layouts, auth, onboarding, analytics (dependency-free SVG charts), calendar, i18n injection, permissions/session/module registry; ships its own udb-* stylesheet and --u-* tokens",
   "type": "module",
   "main": "./src/index.ts",

package/src/domains/charts/components.tsx

@@ -82,7 +82,7 @@ export function Sparkline({
   width = 110,
   color = 'currentColor',
 }: {
-  data: number[];
+  data: readonly number[];
   height?: number;
   width?: number;
   color?: string;
@@ -143,8 +143,8 @@ export function HBars({ rows, formatValue = (n: number) => String(n) }: { rows:
 export interface BarSeries {
   key?: string;
   label: string;
-  values?: number[];
-  data?: number[];
+  values?: readonly number[];
+  data?: readonly number[];
   tone?: string;
   color?: string;
 }
@@ -156,7 +156,7 @@ export function BarChart({
   formatValue = (v: number) => String(v),
   formatLabel = (l: string) => l,
 }: {
-  labels: string[];
+  labels: readonly string[];
   series: BarSeries[];
   height?: number;
   formatValue?: (v: number) => string;
@@ -304,8 +304,8 @@ export function Donut({
 export interface LineSeries {
   key?: string;
   label: string;
-  values?: number[];
-  data?: number[];
+  values?: readonly number[];
+  data?: readonly number[];
   tone?: string;
   color?: string;
   kind?: 'line' | 'bars';
@@ -329,8 +329,8 @@ export function LineChart({
   yLabelLeft,
   yLabelRight,
 }: {
-  points?: LineChartPoint[];
-  labels?: string[];
+  points?: readonly LineChartPoint[];
+  labels?: readonly string[];
   series: LineSeries[];
   height?: number;
   formatLeft?: (v: number) => string;

package/src/domains/layouts/components/PageHeader.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { PageHeader } from './PageHeader';
+
+describe('PageHeader markup smoke', () => {
+  it('renders kicker before title and omits it when undefined', () => {
+    const html = renderToString(
+      <PageHeader kicker="Customer area" title="Policies" subtitle="Your coverage at a glance" />,
+    );
+    const kickerAt = html.indexOf('udb-pageheader__kicker');
+    const titleAt = html.indexOf('udb-pageheader__title');
+    expect(kickerAt).toBeGreaterThan(-1);
+    expect(kickerAt).toBeLessThan(titleAt);
+    expect(html).toContain('Customer area');
+
+    const bare = renderToString(<PageHeader title="Policies" />);
+    expect(bare).not.toContain('udb-pageheader__kicker');
+  });
+
+  it('renders actions and breadcrumb nodes in their slots', () => {
+    const html = renderToString(
+      <PageHeader
+        title="Claims"
+        breadcrumbs={<a href="/policies">Policies</a>}
+        actions={<button type="button">New claim</button>}
+      />,
+    );
+    expect(html).toContain('udb-pageheader__breadcrumbs');
+    expect(html).toContain('udb-pageheader__actions');
+    expect(html).toContain('New claim');
+  });
+});

package/src/domains/layouts/components/PageHeader.tsx

@@ -6,6 +6,7 @@ export interface PageHeaderCrumb {
 }
 
 export interface PageHeaderProps {
+  kicker?: ReactNode;
   title?: ReactNode;
   subtitle?: ReactNode;
   description?: ReactNode;
@@ -17,7 +18,7 @@ export interface PageHeaderProps {
 const isCrumbList = (value: ReactNode | readonly PageHeaderCrumb[]): value is readonly PageHeaderCrumb[] =>
   Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null && "label" in item);
 
-export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
+export const PageHeader = ({ kicker, title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
   const crumbNode =
     breadcrumbs === undefined
       ? undefined
@@ -32,6 +33,7 @@ export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions,
     <div className={`udb-pageheader${className ? ` ${className}` : ""}`}>
       {crumbNode !== undefined && <div className="udb-pageheader__breadcrumbs">{crumbNode}</div>}
       <div className="udb-pageheader__main">
+        {kicker !== undefined && <p className="udb-pageheader__kicker">{kicker}</p>}
         {title !== undefined && <h1 className="udb-pageheader__title">{title}</h1>}
         {(subtitle ?? description) !== undefined && (
           <p className="udb-pageheader__subtitle">{subtitle ?? description}</p>

package/src/styles/dashboard.css

@@ -3196,6 +3196,15 @@
   min-width: 0;
 }
 
+.udb-pageheader__kicker {
+  margin: 0 0 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted-foreground);
+}
+
 .udb-pageheader__title {
   margin: 0;
   font-size: 1.375rem;