@umituz/web-dashboard 6.3.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description": "Installable app skeleton for the fleet — layouts, analytics (dependency-free SVG charts), calendar, onboarding flow, i18n via @umituz/web-localization, permissions/module registry; udb-* stylesheet on design-system tokens",
   "type": "module",
   "main": "./src/index.ts",
@@ -10,35 +10,36 @@
   ],
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./src/styles/dashboard.css",
-    "./permissions": "./src/domains/permissions/index.ts",
-    "./modules": "./src/domains/modules/index.ts",
-    "./layouts": "./src/domains/layouts/index.ts",
-    "./layouts/components": "./src/domains/layouts/components/index.ts",
-    "./layouts/hooks": "./src/domains/layouts/hooks/index.ts",
-    "./layouts/utils": "./src/domains/layouts/utils/index.ts",
-    "./layouts/types": "./src/domains/layouts/types/index.ts",
-    "./layouts/theme": "./src/domains/layouts/theme/index.ts",
-    "./settings": "./src/domains/settings/index.ts",
-    "./settings/components": "./src/domains/settings/components/index.ts",
-    "./settings/hooks": "./src/domains/settings/hooks/index.ts",
-    "./settings/utils": "./src/domains/settings/utils/index.ts",
-    "./settings/types": "./src/domains/settings/types/index.ts",
     "./analytics": "./src/domains/analytics/index.ts",
     "./analytics/components": "./src/domains/analytics/components/index.ts",
     "./analytics/hooks": "./src/domains/analytics/hooks/index.ts",
-    "./analytics/utils": "./src/domains/analytics/utils/index.ts",
-    "./analytics/types": "./src/domains/analytics/types/index.ts",
     "./analytics/services": "./src/domains/analytics/services/index.ts",
+    "./analytics/types": "./src/domains/analytics/types/index.ts",
+    "./analytics/utils": "./src/domains/analytics/utils/index.ts",
     "./calendar": "./src/domains/calendar/index.ts",
-    "./calendar/types": "./src/domains/calendar/types/calendar.types.ts",
-    "./calendar/services": "./src/domains/calendar/services/index.ts",
     "./calendar/hooks": "./src/domains/calendar/hooks/index.ts",
+    "./calendar/services": "./src/domains/calendar/services/index.ts",
+    "./calendar/types": "./src/domains/calendar/types/calendar.types.ts",
     "./calendar/utils": "./src/domains/calendar/utils/index.ts",
+    "./charts": "./src/domains/charts/index.ts",
+    "./chrome.css": "./src/styles/chrome.css",
     "./config": "./src/config/index.ts",
+    "./layouts": "./src/domains/layouts/index.ts",
+    "./layouts/components": "./src/domains/layouts/components/index.ts",
+    "./layouts/hooks": "./src/domains/layouts/hooks/index.ts",
+    "./layouts/theme": "./src/domains/layouts/theme/index.ts",
+    "./layouts/types": "./src/domains/layouts/types/index.ts",
+    "./layouts/utils": "./src/domains/layouts/utils/index.ts",
+    "./modules": "./src/domains/modules/index.ts",
+    "./onboarding": "./src/domains/onboarding/index.ts",
     "./package.json": "./package.json",
-    "./charts": "./src/domains/charts/index.ts",
-    "./onboarding": "./src/domains/onboarding/index.ts"
+    "./permissions": "./src/domains/permissions/index.ts",
+    "./settings": "./src/domains/settings/index.ts",
+    "./settings/components": "./src/domains/settings/components/index.ts",
+    "./settings/hooks": "./src/domains/settings/hooks/index.ts",
+    "./settings/types": "./src/domains/settings/types/index.ts",
+    "./settings/utils": "./src/domains/settings/utils/index.ts",
+    "./styles.css": "./src/styles/dashboard.css"
   },
   "files": [
     "src",

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

@@ -29,4 +29,17 @@ describe('PageHeader markup smoke', () => {
     expect(html).toContain('udb-pageheader__actions');
     expect(html).toContain('New claim');
   });
+
+  it('renders meta under the title block and omits it when undefined', () => {
+    const html = renderToString(
+      <PageHeader title="Policy AC-123" meta={<span>Renews 2027-01-15</span>} />,
+    );
+    const metaAt = html.indexOf('udb-pageheader__meta');
+    expect(metaAt).toBeGreaterThan(-1);
+    expect(html.indexOf('udb-pageheader__subtitle')).toBe(-1);
+    expect(html).toContain('Renews 2027-01-15');
+
+    const bare = renderToString(<PageHeader title="Policy AC-123" />);
+    expect(bare).not.toContain('udb-pageheader__meta');
+  });
 });

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

@@ -10,6 +10,8 @@ export interface PageHeaderProps {
   title?: ReactNode;
   subtitle?: ReactNode;
   description?: ReactNode;
+  /** Small facts row (dates, counts, IDs…) under the title block. */
+  meta?: ReactNode;
   breadcrumbs?: ReactNode | readonly PageHeaderCrumb[];
   actions?: ReactNode;
   className?: string;
@@ -18,7 +20,16 @@ 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 = ({ kicker, title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
+export const PageHeader = ({
+  kicker,
+  title,
+  subtitle,
+  description,
+  meta,
+  breadcrumbs,
+  actions,
+  className,
+}: PageHeaderProps) => {
   const crumbNode =
     breadcrumbs === undefined
       ? undefined
@@ -38,6 +49,7 @@ export const PageHeader = ({ kicker, title, subtitle, description, breadcrumbs,
         {(subtitle ?? description) !== undefined && (
           <p className="udb-pageheader__subtitle">{subtitle ?? description}</p>
         )}
+        {meta !== undefined && <div className="udb-pageheader__meta">{meta}</div>}
       </div>
       {actions !== undefined && <div className="udb-pageheader__actions">{actions}</div>}
     </div>

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

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { SectionHeader } from './SectionHeader';
+
+describe('SectionHeader markup smoke', () => {
+  it('renders an h2 title with optional kicker before it', () => {
+    const html = renderToString(
+      <SectionHeader kicker="This week" title="Reading" subtitle="Long-form practice" />,
+    );
+    const kickerAt = html.indexOf('udb-sectionheader__kicker');
+    const titleAt = html.indexOf('<h2 class="udb-sectionheader__title"');
+    expect(kickerAt).toBeGreaterThan(-1);
+    expect(kickerAt).toBeLessThan(titleAt);
+    expect(html).toContain('Long-form practice');
+
+    const bare = renderToString(<SectionHeader title="Reading" />);
+    expect(bare).not.toContain('udb-sectionheader__kicker');
+    expect(bare).not.toContain('udb-sectionheader__subtitle');
+  });
+
+  it('renders actions in their slot and accepts description as subtitle alias', () => {
+    const html = renderToString(
+      <SectionHeader title="Writing" description="Timed tasks" actions={<button type="button">New</button>} />,
+    );
+    expect(html).toContain('udb-sectionheader__actions');
+    expect(html).toContain('udb-sectionheader__subtitle');
+    expect(html).toContain('New');
+  });
+});

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+
+export interface SectionHeaderProps {
+  /** Small uppercase label above the title. */
+  kicker?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+/** Section-level heading (h2) with an optional actions row — the in-page
+ *  counterpart to PageHeader for stacked dashboard sections. */
+export const SectionHeader = ({
+  kicker,
+  title,
+  subtitle,
+  description,
+  actions,
+  className,
+}: SectionHeaderProps) => (
+  <div className={`udb-sectionheader${className ? ` ${className}` : ""}`}>
+    <div className="udb-sectionheader__main">
+      {kicker !== undefined && <p className="udb-sectionheader__kicker">{kicker}</p>}
+      {title !== undefined && <h2 className="udb-sectionheader__title">{title}</h2>}
+      {(subtitle ?? description) !== undefined && (
+        <p className="udb-sectionheader__subtitle">{subtitle ?? description}</p>
+      )}
+    </div>
+    {actions !== undefined && <div className="udb-sectionheader__actions">{actions}</div>}
+  </div>
+);

package/src/domains/layouts/components/index.ts

@@ -4,3 +4,5 @@ export { DashboardSidebar } from './DashboardSidebar';
 export { BrandLogo } from './BrandLogo';
 export { PageHeader } from './PageHeader';
 export type { PageHeaderProps, PageHeaderCrumb } from './PageHeader';
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps } from './SectionHeader';