uhc-portal-components-react 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,34 @@
+# Changelog
+
+## 0.1.3
+
+- Add the brand-neutral `ClinicalSectionSummary` renderer for resolved IPS
+  cards. Clinical terminology tokens remain translation keys and are never
+  derived into editable or visible names by the component.
+
+## 0.1.2 - 2026-07-29
+
+- Added a framework-neutral branding module for official light/dark surface
+  artwork with explicit intrinsic dimensions.
+- Replaced synthetic text monograms and forced gradient shapes in the shared
+  header and hero with undistorted brand-provided assets.
+- Added regression coverage for official asset paths, surface variants and
+  intrinsic proportions.
+
+## 0.1.1 - 2026-07-29
+
+- Added publishable shell, entry hero and real-page access chooser modules.
+- Added account/profile slots so personal and professional portals share the
+  same UI behavior while host runtimes retain authentication and authorization.
+- Defined the brand-only reuse contract for UHC and VetChain portal families.
+- Ported the corrected UHC Personal light/dark tokens: dark mode changes
+  surfaces and text contrast while primary/selected controls retain the exact
+  light-mode turquoise-to-blue gradient.
+
+## 0.1.0 - 2026-07-29
+
+- Add a brand-neutral account/preferences header with theme, S/M/L density,
+  language, guest and sign-out actions.
+- Add a fail-closed protected-profile/PIN gate driven by host-owned
+  `ProfileRuntime` state.
+- Add theme tokens configurable for UHC and VetChain portal families.

package/README.md

@@ -0,0 +1,63 @@
+# UHC Portal Components React
+
+Publishable, brand-neutral React components shared by:
+
+- UHC Personal
+- UHC Professional
+- VetChain Personal
+- VetChain Professional
+
+The package owns visual shell behavior only. Authentication, protected-profile
+storage, PIN verification and actor authorization remain in the host portal
+through `ProfileRuntime`, `LoadedProfileWorkspace` and actor-scoped SDK facades.
+
+```tsx
+import {
+  PortalShell,
+  PortalHeader,
+  PortalEntryHero,
+  PortalAccessChooser,
+  ProfileProtectionGate,
+} from 'uhc-portal-components-react'
+import 'uhc-portal-components-react/styles.css'
+```
+
+Brand differences are supplied through `PortalBrand`: product name,
+organization, official artwork and CSS variables. Artwork declares its
+light/dark-surface files and intrinsic dimensions; the shell preserves those
+proportions and never synthesizes a text monogram. Components do not import
+Firebase, Next.js or any GDC/UHC SDK runtime.
+
+```tsx
+const brand = {
+  family: 'professional',
+  productName: 'UNID Professional',
+  organizationName: 'Fundación UNID',
+  homeHref: '/es',
+  mark: {
+    lightSurface: { src: '/logos/uhc-logo.svg', alt: 'UHC', width: 100, height: 100 },
+    darkSurface: { src: '/logos/uhc-logo.svg', alt: 'UHC', width: 100, height: 100 },
+  },
+} satisfies PortalBrand
+```
+
+The package deliberately exposes modules instead of a cloned application:
+
+- `PortalShell`: persistent account/preferences chrome and protected content.
+- `PortalEntryHero`: identical product entry composition for every brand.
+- `PortalAccessChooser`: real-page navigation for professional access paths.
+- `ProfileProtectionGate`: fail-closed PIN unlock presentation.
+- `ClinicalSectionSummary`: brand-neutral rendering of already-resolved IPS
+  cards for personal and professional portals.
+
+Clinical label semantics stay in `gdc-common-utils-ts` / the SDK reader. Hosts
+pass human titles to `ClinicalSectionSummary`: local `CodeableConcept.text`
+when the UI matches the resource language, English `Coding.display` for
+English, or a terminology translation keyed by `system|code` for another
+locale. The terminology token is never a visible or editable title.
+
+UHC Personal and VetChain Personal must compose the same personal route
+modules. UHC Professional and VetChain Professional must compose the same
+professional route modules. A brand adapter may change only tokens, logo,
+product names, descriptions and route destinations; it must not fork flow,
+profile or authorization behavior.

package/dist/ClinicalSectionSummary.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type ClinicalSummaryCard = Readonly<{
+    key: string;
+    title: string;
+    resourceType: string;
+    date?: string;
+}>;
+export type ClinicalSectionSummaryProps = Readonly<{
+    code: string;
+    title: string;
+    resources: readonly ClinicalSummaryCard[];
+    emptyLabel: string;
+    resourceTypeLabel?: (resourceType: string) => string;
+    actions?: ReactNode;
+}>;
+/**
+ * Brand-neutral renderer for one already-resolved IPS section.
+ *
+ * Hosts must resolve clinical labels with the shared SDK reader before passing
+ * cards here. In particular, `title` is human text; `system|code` is a
+ * terminology identity/translation key and must never be supplied as a
+ * replacement for manually authored text.
+ */
+export declare function ClinicalSectionSummary({ code, title, resources, emptyLabel, resourceTypeLabel, actions, }: ClinicalSectionSummaryProps): import("react").JSX.Element;
+//# sourceMappingURL=ClinicalSectionSummary.d.ts.map

package/dist/ClinicalSectionSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClinicalSectionSummary.d.ts","sourceRoot":"","sources":["../src/ClinicalSectionSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,MAAM,MAAM,2BAA2B,GAAG,QAAQ,CAAC;IACjD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,SAAS,mBAAmB,EAAE,CAAA;IACzC,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAC,CAAA;AAEF;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,UAAU,EACV,iBAAkD,EAClD,OAAO,GACR,EAAE,2BAA2B,+BAsB7B"}

package/dist/ClinicalSectionSummary.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Brand-neutral renderer for one already-resolved IPS section.
+ *
+ * Hosts must resolve clinical labels with the shared SDK reader before passing
+ * cards here. In particular, `title` is human text; `system|code` is a
+ * terminology identity/translation key and must never be supplied as a
+ * replacement for manually authored text.
+ */
+export function ClinicalSectionSummary({ code, title, resources, emptyLabel, resourceTypeLabel = (resourceType) => resourceType, actions, }) {
+    return (_jsxs("section", { className: "uhcp-clinical-section", "data-ips-section": code, "aria-labelledby": `uhcp-section-${code}`, children: [_jsxs("header", { children: [_jsxs("h3", { id: `uhcp-section-${code}`, children: [title, " ", _jsxs("span", { children: ["(", resources.length, ")"] })] }), actions] }), resources.length === 0
+                ? _jsx("p", { className: "uhcp-clinical-empty", children: emptyLabel })
+                : (_jsx("div", { className: "uhcp-clinical-grid", children: resources.map((resource) => (_jsxs("article", { className: "uhcp-clinical-card", "data-resource-type": resource.resourceType, children: [_jsx("p", { className: "uhcp-clinical-title", dir: "auto", children: _jsx("bdi", { children: resource.title }) }), _jsx("p", { className: "uhcp-clinical-type", children: resourceTypeLabel(resource.resourceType) }), resource.date && _jsx("p", { className: "uhcp-clinical-date", children: resource.date })] }, resource.key))) }))] }));
+}

package/dist/PortalBrandArtwork.d.ts

@@ -0,0 +1,13 @@
+import type { PortalBrandArtworkSet } from './contracts.js';
+export type PortalBrandArtworkProps = Readonly<{
+    artwork: PortalBrandArtworkSet;
+    className?: string;
+}>;
+/**
+ * Render official artwork without reconstructing or distorting the brand.
+ *
+ * Both surface variants remain in the DOM so CSS can follow the effective
+ * light/dark theme without coupling this brand module to a framework.
+ */
+export declare function PortalBrandArtwork({ artwork, className, }: PortalBrandArtworkProps): import("react").JSX.Element;
+//# sourceMappingURL=PortalBrandArtwork.d.ts.map

package/dist/PortalBrandArtwork.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalBrandArtwork.d.ts","sourceRoot":"","sources":["../src/PortalBrandArtwork.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAE3D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,OAAO,EAAE,qBAAqB,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,SAAc,GACf,EAAE,uBAAuB,+BAmBzB"}

package/dist/PortalBrandArtwork.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Render official artwork without reconstructing or distorting the brand.
+ *
+ * Both surface variants remain in the DOM so CSS can follow the effective
+ * light/dark theme without coupling this brand module to a framework.
+ */
+export function PortalBrandArtwork({ artwork, className = '', }) {
+    return (_jsxs("span", { className: `uhcp-brand-artwork ${className}`.trim(), children: [_jsx("img", { className: "uhcp-brand-artwork-light", src: artwork.lightSurface.src, alt: artwork.lightSurface.alt, width: artwork.lightSurface.width, height: artwork.lightSurface.height }), _jsx("img", { className: "uhcp-brand-artwork-dark", src: artwork.darkSurface.src, alt: artwork.darkSurface.alt, width: artwork.darkSurface.width, height: artwork.darkSurface.height })] }));
+}

package/dist/PortalEntry.d.ts

@@ -0,0 +1,23 @@
+import type { PortalAccessOption, PortalBrand } from './contracts.js';
+export type PortalEntryHeroProps = Readonly<{
+    brand: PortalBrand;
+    eyebrow: string;
+    title: string;
+    description: string;
+}>;
+/**
+ * Shared product-entry hero. Brand adapters supply only identity and copy.
+ */
+export declare function PortalEntryHero({ brand, eyebrow, title, description, }: PortalEntryHeroProps): import("react").JSX.Element;
+export type PortalAccessChooserProps = Readonly<{
+    label: string;
+    options: readonly PortalAccessOption[];
+}>;
+/**
+ * Reusable navigation for product-owned access paths.
+ *
+ * Every option is a real link so the destination becomes a distinct page and
+ * keyboard/screen-reader users receive navigation rather than hidden content.
+ */
+export declare function PortalAccessChooser({ label, options }: PortalAccessChooserProps): import("react").JSX.Element;
+//# sourceMappingURL=PortalEntry.d.ts.map

package/dist/PortalEntry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalEntry.d.ts","sourceRoot":"","sources":["../src/PortalEntry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAGrE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC,CAAA;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,GACZ,EAAE,oBAAoB,+BAgBtB;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAA;CACvC,CAAC,CAAA;AAEF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAa/E"}

package/dist/PortalEntry.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PortalBrandArtwork } from './PortalBrandArtwork.js';
+/**
+ * Shared product-entry hero. Brand adapters supply only identity and copy.
+ */
+export function PortalEntryHero({ brand, eyebrow, title, description, }) {
+    return (_jsxs("section", { className: "uhcp-entry-hero", style: brand.variables, children: [_jsx("div", { className: "uhcp-hero-orbit", "aria-hidden": "true", children: _jsx(PortalBrandArtwork, { artwork: brand.heroArtwork || brand.mark, className: "uhcp-hero-logo" }) }), _jsxs("div", { className: "uhcp-entry-copy", children: [_jsx("div", { className: "uhcp-badge", children: eyebrow }), _jsx("h1", { children: title }), _jsx("p", { children: description })] })] }));
+}
+/**
+ * Reusable navigation for product-owned access paths.
+ *
+ * Every option is a real link so the destination becomes a distinct page and
+ * keyboard/screen-reader users receive navigation rather than hidden content.
+ */
+export function PortalAccessChooser({ label, options }) {
+    return (_jsx("nav", { className: "uhcp-access-grid", "aria-label": label, children: options.map((option, index) => (_jsxs("a", { className: "uhcp-access-card", href: option.href, children: [_jsx("span", { className: "uhcp-access-number", children: String(index + 1).padStart(2, '0') }), _jsx("strong", { children: option.title }), _jsx("span", { children: option.description }), _jsx("small", { children: option.requirement })] }, option.id))) }));
+}

package/dist/PortalHeader.d.ts

@@ -0,0 +1,22 @@
+import { type PortalBrand, type PortalAccountOption, type PortalLanguageOption, type PortalMenuAction, type PortalShellCopy } from './contracts.js';
+export type PortalHeaderProps = Readonly<{
+    brand: PortalBrand;
+    copy: PortalShellCopy;
+    accountIdentifier?: string | null;
+    languageHref?: string;
+    languageOptions?: readonly PortalLanguageOption[];
+    guestActionHref: string;
+    accountOptions?: readonly PortalAccountOption[];
+    onSelectAccount?: (id: string) => void;
+    menuActions?: readonly PortalMenuAction[];
+    onSignOut?: () => void | Promise<void>;
+    storageNamespace?: string;
+}>;
+/**
+ * Shared account/preferences header.
+ *
+ * Authentication is deliberately supplied as data and callbacks. The
+ * component never imports Firebase and never treats browser state as a role.
+ */
+export declare function PortalHeader({ brand, copy, accountIdentifier, languageHref, languageOptions, guestActionHref, accountOptions, onSelectAccount, menuActions, onSignOut, storageNamespace, }: PortalHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=PortalHeader.d.ts.map

package/dist/PortalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalHeader.d.ts","sourceRoot":"","sources":["../src/PortalHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAA;AAQvB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,eAAe,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACjD,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;IAC/C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAC,CAAA;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,eAAoB,EACpB,eAAe,EACf,cAAmB,EACnB,eAAe,EACf,WAAgB,EAChB,SAAS,EACT,gBAA+B,GAChC,EAAE,iBAAiB,+BAmKnB"}

package/dist/PortalHeader.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { portalUiDensities, portalUiThemes, } from './contracts.js';
+import { resolvePortalUiDensity, resolvePortalUiTheme, resolveRenderedPortalTheme, } from './preferences.js';
+import { PortalBrandArtwork } from './PortalBrandArtwork.js';
+/**
+ * Shared account/preferences header.
+ *
+ * Authentication is deliberately supplied as data and callbacks. The
+ * component never imports Firebase and never treats browser state as a role.
+ */
+export function PortalHeader({ brand, copy, accountIdentifier, languageHref, languageOptions = [], guestActionHref, accountOptions = [], onSelectAccount, menuActions = [], onSignOut, storageNamespace = 'uhc-portal', }) {
+    const [open, setOpen] = useState(false);
+    const [density, setDensity] = useState('medium');
+    const [theme, setTheme] = useState('system');
+    const ref = useRef(null);
+    const densityKey = `${storageNamespace}.density`;
+    const themeKey = `${storageNamespace}.theme`;
+    useEffect(() => {
+        const savedDensity = resolvePortalUiDensity(localStorage.getItem(densityKey));
+        const savedTheme = resolvePortalUiTheme(localStorage.getItem(themeKey));
+        setDensity(savedDensity);
+        setTheme(savedTheme);
+        document.documentElement.dataset.density = savedDensity;
+    }, [densityKey, themeKey]);
+    useEffect(() => {
+        const media = matchMedia('(prefers-color-scheme: dark)');
+        const apply = () => {
+            const rendered = resolveRenderedPortalTheme(theme, media.matches);
+            document.documentElement.dataset.theme = rendered;
+            document.documentElement.style.colorScheme = rendered;
+        };
+        apply();
+        media.addEventListener('change', apply);
+        return () => media.removeEventListener('change', apply);
+    }, [theme]);
+    useEffect(() => {
+        const closeOutside = (event) => {
+            if (!ref.current?.contains(event.target))
+                setOpen(false);
+        };
+        const closeEscape = (event) => {
+            if (event.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', closeOutside);
+        window.addEventListener('keydown', closeEscape);
+        return () => {
+            document.removeEventListener('mousedown', closeOutside);
+            window.removeEventListener('keydown', closeEscape);
+        };
+    }, []);
+    function changeDensity(value) {
+        setDensity(value);
+        localStorage.setItem(densityKey, value);
+        document.documentElement.dataset.density = value;
+    }
+    function changeTheme(value) {
+        setTheme(value);
+        localStorage.setItem(themeKey, value);
+    }
+    return (_jsxs("header", { className: "uhcp-header", style: brand.variables, children: [_jsxs("a", { className: "uhcp-brand", href: brand.homeHref, "aria-label": copy.home, children: [_jsx(PortalBrandArtwork, { artwork: brand.mark, className: "uhcp-brand-mark" }), _jsxs("span", { children: [_jsx("strong", { children: brand.productName }), _jsx("small", { children: brand.organizationName })] })] }), _jsxs("div", { className: "uhcp-account-menu", ref: ref, children: [_jsxs("button", { type: "button", className: "uhcp-trigger", onClick: () => setOpen((value) => !value), "aria-label": copy.accountAndPreferences, "aria-expanded": open, children: [_jsx(PersonIcon, {}), accountIdentifier && _jsx("span", { className: "uhcp-account-id", children: accountIdentifier }), _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), open && (_jsxs("section", { className: "uhcp-menu", "aria-label": copy.accountAndPreferences, children: [_jsxs("div", { className: "uhcp-account-state", children: [_jsx("strong", { children: copy.accountAndPreferences }), _jsx("small", { children: accountIdentifier || copy.notSignedIn })] }), accountOptions.length > 0 && (_jsx("div", { className: "uhcp-account-options", children: accountOptions.map((option) => (_jsxs("button", { type: "button", disabled: option.disabled, "aria-pressed": Boolean(option.selected), onClick: () => {
+                                        onSelectAccount?.(option.id);
+                                        setOpen(false);
+                                    }, children: [_jsx("span", { children: option.label }), option.description && _jsx("small", { children: option.description })] }, option.id))) })), _jsx(PreferenceGroup, { label: copy.appearance, children: portalUiThemes.map((value) => (_jsxs("button", { type: "button", "aria-pressed": theme === value, onClick: () => changeTheme(value), children: [_jsx("span", { "aria-hidden": "true", children: value === 'light' ? '☀' : value === 'dark' ? '☾' : '◫' }), copy.themes[value]] }, value))) }), _jsx(PreferenceGroup, { label: copy.textSize, children: portalUiDensities.map((value) => (_jsx("button", { type: "button", "aria-pressed": density === value, onClick: () => changeDensity(value), children: value === 'small' ? 'S' : value === 'medium' ? 'M' : 'L' }, value))) }), _jsxs("div", { className: "uhcp-menu-actions", children: [languageOptions.length > 0
+                                        ? languageOptions.map((option) => (_jsxs("a", { href: option.href, hrefLang: option.id, "aria-current": option.current ? 'page' : undefined, onClick: () => setOpen(false), children: ["\u25CE ", option.label] }, option.id)))
+                                        : languageHref && _jsxs("a", { href: languageHref, onClick: () => setOpen(false), children: ["\u25CE ", copy.language] }), menuActions.map((action) => action.href
+                                        ? (_jsx("a", { href: action.href, onClick: () => setOpen(false), children: action.label }, action.id))
+                                        : (_jsx("button", { type: "button", onClick: () => {
+                                                setOpen(false);
+                                                void action.onSelect?.();
+                                            }, children: action.label }, action.id))), accountIdentifier && onSignOut
+                                        ? _jsxs("button", { type: "button", onClick: () => { setOpen(false); void onSignOut(); }, children: ["\u21AA ", copy.signOut] })
+                                        : _jsxs("a", { href: guestActionHref, onClick: () => setOpen(false), children: [_jsx(PersonIcon, {}), " ", copy.chooseAccess] })] })] }))] })] }));
+}
+function PreferenceGroup({ label, children }) {
+    return _jsxs("fieldset", { className: "uhcp-preferences", children: [_jsx("legend", { children: label }), _jsx("div", { children: children })] });
+}
+function PersonIcon() {
+    return (_jsxs("svg", { className: "uhcp-person-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z", stroke: "currentColor", strokeWidth: "1.8" }), _jsx("path", { d: "M4.5 21a7.5 7.5 0 0 1 15 0", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })] }));
+}

package/dist/PortalShell.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { type PortalHeaderProps } from './PortalHeader.js';
+import { type ProfileProtectionGateProps } from './ProfileProtectionGate.js';
+export type PortalShellProps = Readonly<{
+    header: PortalHeaderProps;
+    profileProtection?: Omit<ProfileProtectionGateProps, 'children'>;
+    children: ReactNode;
+    backAction?: Readonly<{
+        label: string;
+        href: string;
+    }>;
+    assistantAction?: Readonly<{
+        label: string;
+        onSelect: () => void;
+    }>;
+}>;
+/**
+ * Brand-neutral portal chrome shared by personal and professional products.
+ *
+ * Ordered flow:
+ * 1. Keep account and device preferences available in the persistent header.
+ * 2. Fail closed behind the host-supplied protected-profile state.
+ * 3. Render product-owned content only after the host reports an unlocked
+ *    profile, or immediately when that route explicitly needs no profile.
+ *
+ * Authentication, authorization, PIN verification and actor selection remain
+ * host responsibilities. Product brands may change tokens and copy only.
+ */
+export declare function PortalShell({ header, profileProtection, children, backAction, assistantAction, }: PortalShellProps): import("react").JSX.Element;
+//# sourceMappingURL=PortalShell.d.ts.map

package/dist/PortalShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalShell.d.ts","sourceRoot":"","sources":["../src/PortalShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAA;AAEnC,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,MAAM,EAAE,iBAAiB,CAAA;IACzB,iBAAiB,CAAC,EAAE,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC,CAAA;IAChE,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACtD,eAAe,CAAC,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;CACpE,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,UAAU,EACV,eAAe,GAChB,EAAE,gBAAgB,+BA2BlB"}

package/dist/PortalShell.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PortalHeader, } from './PortalHeader.js';
+import { ProfileProtectionGate, } from './ProfileProtectionGate.js';
+/**
+ * Brand-neutral portal chrome shared by personal and professional products.
+ *
+ * Ordered flow:
+ * 1. Keep account and device preferences available in the persistent header.
+ * 2. Fail closed behind the host-supplied protected-profile state.
+ * 3. Render product-owned content only after the host reports an unlocked
+ *    profile, or immediately when that route explicitly needs no profile.
+ *
+ * Authentication, authorization, PIN verification and actor selection remain
+ * host responsibilities. Product brands may change tokens and copy only.
+ */
+export function PortalShell({ header, profileProtection, children, backAction, assistantAction, }) {
+    const content = profileProtection
+        ? _jsx(ProfileProtectionGate, { ...profileProtection, children: children })
+        : children;
+    return (_jsxs("div", { className: "uhcp-shell", "data-portal-family": header.brand.family, style: header.brand.variables, children: [_jsx(PortalHeader, { ...header }), _jsx("main", { className: "uhcp-main", children: content }), backAction && (_jsx("a", { className: "uhcp-floating-action uhcp-floating-back", href: backAction.href, "aria-label": backAction.label, children: _jsx("span", { "aria-hidden": "true", children: "\u2190" }) })), assistantAction && (_jsxs("button", { className: "uhcp-floating-action uhcp-floating-assistant", type: "button", onClick: assistantAction.onSelect, "aria-label": assistantAction.label, children: [_jsx("span", { "aria-hidden": "true", children: "\u2726" }), _jsx("span", { children: assistantAction.label })] }))] }));
+}

package/dist/ProfileProtectionGate.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { ProfileProtectionCopy, ProfileProtectionState, ProfileUnlockResult } from './contracts.js';
+export type ProfileProtectionGateProps = Readonly<{
+    state: ProfileProtectionState;
+    copy: ProfileProtectionCopy;
+    onUnlock?: (pin: string) => ProfileUnlockResult | Promise<ProfileUnlockResult>;
+    onRetry?: () => void;
+    children: ReactNode;
+}>;
+/**
+ * Fail-closed protected-profile gate shared by portal products.
+ *
+ * The host owns ProfileRuntime and supplies authoritative state/callbacks.
+ * Children are never rendered while protection is unresolved or locked.
+ */
+export declare function ProfileProtectionGate({ state, copy, onUnlock, onRetry, children, }: ProfileProtectionGateProps): import("react").JSX.Element;
+//# sourceMappingURL=ProfileProtectionGate.d.ts.map

package/dist/ProfileProtectionGate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileProtectionGate.d.ts","sourceRoot":"","sources":["../src/ProfileProtectionGate.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACnF,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,gBAAgB,CAAA;AAEvB,MAAM,MAAM,0BAA0B,GAAG,QAAQ,CAAC;IAChD,KAAK,EAAE,sBAAsB,CAAA;IAC7B,IAAI,EAAE,qBAAqB,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,mBAAmB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAC,CAAA;AAEF;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,+BAiF5B"}

package/dist/ProfileProtectionGate.js

@@ -0,0 +1,66 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Fail-closed protected-profile gate shared by portal products.
+ *
+ * The host owns ProfileRuntime and supplies authoritative state/callbacks.
+ * Children are never rendered while protection is unresolved or locked.
+ */
+export function ProfileProtectionGate({ state, copy, onUnlock, onRetry, children, }) {
+    const [pin, setPin] = useState('');
+    const [error, setError] = useState('');
+    const [busy, setBusy] = useState(false);
+    const input = useRef(null);
+    useEffect(() => {
+        setPin('');
+        setError('');
+        if (state === 'locked')
+            input.current?.focus();
+    }, [state]);
+    async function unlock(event) {
+        event.preventDefault();
+        if (pin.length < 6) {
+            setError(copy.pinRequired);
+            return;
+        }
+        if (!onUnlock) {
+            setError(copy.unlockUnavailable);
+            return;
+        }
+        setBusy(true);
+        try {
+            const result = await onUnlock(pin);
+            if (result === 'unlocked') {
+                setPin('');
+                setError('');
+                return;
+            }
+            setError(result === 'invalid-pin'
+                ? copy.invalidPin
+                : result === 'temporarily-locked'
+                    ? copy.temporarilyLocked
+                    : copy.unlockUnavailable);
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    if (state === 'not-required')
+        return _jsx(_Fragment, { children: children });
+    const title = state === 'checking'
+        ? copy.checkingTitle
+        : state === 'setup-required'
+            ? copy.setupTitle
+            : state === 'unavailable'
+                ? copy.unavailableTitle
+                : copy.unlockTitle;
+    const body = state === 'checking'
+        ? copy.checkingBody
+        : state === 'setup-required'
+            ? copy.setupBody
+            : state === 'unavailable'
+                ? copy.unavailableBody
+                : copy.unlockBody;
+    return (_jsxs("section", { className: "uhcp-profile-gate", "aria-live": "polite", children: [_jsx("span", { className: "uhcp-lock", "aria-hidden": "true", children: "\u233E" }), _jsx("h1", { children: title }), _jsx("p", { children: body }), state === 'locked' && (_jsxs("form", { onSubmit: unlock, children: [_jsxs("label", { children: [copy.pinLabel, _jsx("input", { ref: input, type: "password", minLength: 6, autoComplete: "current-password", value: pin, onChange: (event) => setPin(event.target.value) })] }), error && _jsx("p", { role: "alert", className: "uhcp-error", children: error }), _jsx("button", { type: "submit", disabled: busy, children: copy.unlock })] })), state === 'unavailable' && onRetry && _jsx("button", { type: "button", onClick: onRetry, children: copy.retry })] }));
+}

package/dist/contracts.d.ts

@@ -0,0 +1,90 @@
+import type { CSSProperties } from 'react';
+export declare const portalUiDensities: readonly ["small", "medium", "large"];
+export type PortalUiDensity = (typeof portalUiDensities)[number];
+export declare const portalUiThemes: readonly ["light", "dark", "system"];
+export type PortalUiTheme = (typeof portalUiThemes)[number];
+export type PortalBrandAsset = Readonly<{
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}>;
+/**
+ * Official artwork selected from the surface where it is rendered.
+ *
+ * A portal must preserve the asset's intrinsic proportions. The shared shell
+ * never reconstructs a brand from text or forces artwork into a generic shape.
+ */
+export type PortalBrandArtworkSet = Readonly<{
+    darkSurface: PortalBrandAsset;
+    lightSurface: PortalBrandAsset;
+}>;
+export type PortalBrand = Readonly<{
+    /** Product family is presentation metadata, never an authorization input. */
+    family: 'personal' | 'professional';
+    productName: string;
+    organizationName: string;
+    homeHref: string;
+    /** Compact official mark for navigation chrome. */
+    mark: PortalBrandArtworkSet;
+    /** Optional official hero artwork; the compact mark is used when omitted. */
+    heroArtwork?: PortalBrandArtworkSet;
+    variables?: CSSProperties;
+}>;
+export type PortalLanguageOption = Readonly<{
+    id: string;
+    label: string;
+    href: string;
+    current?: boolean;
+}>;
+export type PortalAccountOption = Readonly<{
+    id: string;
+    label: string;
+    description?: string;
+    selected?: boolean;
+    disabled?: boolean;
+}>;
+export type PortalMenuAction = Readonly<{
+    id: string;
+    label: string;
+    href?: string;
+    onSelect?: () => void | Promise<void>;
+}>;
+export type PortalAccessOption = Readonly<{
+    id: string;
+    href: string;
+    title: string;
+    description: string;
+    requirement: string;
+}>;
+export type PortalShellCopy = Readonly<{
+    home: string;
+    accountAndPreferences: string;
+    notSignedIn: string;
+    appearance: string;
+    textSize: string;
+    themes: Record<PortalUiTheme, string>;
+    language: string;
+    chooseAccess: string;
+    signOut: string;
+}>;
+export type ProfileProtectionState = 'not-required' | 'checking' | 'setup-required' | 'locked' | 'unavailable';
+export type ProfileUnlockResult = 'unlocked' | 'invalid-pin' | 'temporarily-locked' | 'unavailable';
+export type ProfileProtectionCopy = Readonly<{
+    checkingTitle: string;
+    checkingBody: string;
+    setupTitle: string;
+    setupBody: string;
+    unavailableTitle: string;
+    unavailableBody: string;
+    unlockTitle: string;
+    unlockBody: string;
+    pinLabel: string;
+    pinRequired: string;
+    invalidPin: string;
+    temporarilyLocked: string;
+    unlockUnavailable: string;
+    unlock: string;
+    retry: string;
+}>;
+//# sourceMappingURL=contracts.d.ts.map

package/dist/contracts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contracts.d.ts","sourceRoot":"","sources":["../src/contracts.ts"],"names":[],"mappings":"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"}

package/dist/contracts.js

@@ -0,0 +1,2 @@
+export const portalUiDensities = ['small', 'medium', 'large'];
+export const portalUiThemes = ['light', 'dark', 'system'];

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './contracts.js';
+export * from './preferences.js';
+export * from './PortalBrandArtwork.js';
+export * from './PortalHeader.js';
+export * from './PortalShell.js';
+export * from './PortalEntry.js';
+export * from './ProfileProtectionGate.js';
+export * from './ClinicalSectionSummary.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+export * from './contracts.js';
+export * from './preferences.js';
+export * from './PortalBrandArtwork.js';
+export * from './PortalHeader.js';
+export * from './PortalShell.js';
+export * from './PortalEntry.js';
+export * from './ProfileProtectionGate.js';
+export * from './ClinicalSectionSummary.js';

package/dist/preferences.d.ts

@@ -0,0 +1,5 @@
+import { type PortalUiDensity, type PortalUiTheme } from './contracts.js';
+export declare function resolvePortalUiDensity(value: string | null): PortalUiDensity;
+export declare function resolvePortalUiTheme(value: string | null): PortalUiTheme;
+export declare function resolveRenderedPortalTheme(theme: PortalUiTheme, prefersDark: boolean): 'light' | 'dark';
+//# sourceMappingURL=preferences.d.ts.map

package/dist/preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.d.ts","sourceRoot":"","sources":["../src/preferences.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAA;AAEvB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,eAAe,CAI5E;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,aAAa,CAIxE;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,OAAO,GACnB,OAAO,GAAG,MAAM,CAElB"}

package/dist/preferences.js

@@ -0,0 +1,14 @@
+import { portalUiDensities, portalUiThemes, } from './contracts.js';
+export function resolvePortalUiDensity(value) {
+    return portalUiDensities.includes(value)
+        ? value
+        : 'medium';
+}
+export function resolvePortalUiTheme(value) {
+    return portalUiThemes.includes(value)
+        ? value
+        : 'system';
+}
+export function resolveRenderedPortalTheme(theme, prefersDark) {
+    return theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
+}

package/dist/styles.css

@@ -0,0 +1,234 @@
+:root {
+  --uhcp-surface: hsl(210 28% 96%);
+  --uhcp-surface-muted: hsl(210 22% 91%);
+  --uhcp-surface-accent: hsl(188 45% 90%);
+  --uhcp-panel: hsl(0 0% 100%);
+  --uhcp-panel-muted: hsl(210 26% 94%);
+  --uhcp-text: hsl(218 39% 15%);
+  --uhcp-muted: hsl(216 15% 38%);
+  --uhcp-border: hsl(212 21% 80%);
+  --uhcp-turquoise: hsl(184 74% 34%);
+  --uhcp-emerald: hsl(157 67% 31%);
+  --uhcp-attention: hsl(29 82% 61%);
+  /* Intentionally invariant across light/dark, matching UHC Personal. */
+  --uhcp-action-start: hsl(184 74% 34% / .96);
+  --uhcp-action-end: hsl(214 70% 42% / .9);
+}
+html[data-density='small'] { font-size: 15px; }
+html[data-density='medium'] { font-size: 16px; }
+html[data-density='large'] { font-size: 18px; }
+html[data-theme='dark'] {
+  --uhcp-surface: hsl(218 46% 9%);
+  --uhcp-surface-muted: hsl(218 37% 13%);
+  --uhcp-surface-accent: hsl(188 42% 16%);
+  --uhcp-panel: hsl(218 38% 13%);
+  --uhcp-panel-muted: hsl(218 34% 17%);
+  --uhcp-text: hsl(196 28% 94%);
+  --uhcp-muted: hsl(204 15% 70%);
+  --uhcp-border: hsl(210 24% 25%);
+  --uhcp-turquoise: hsl(185 70% 51%);
+  --uhcp-emerald: hsl(153 59% 48%);
+  --uhcp-attention: hsl(30 76% 65%);
+}
+.uhcp-header {
+  align-items: center;
+  backdrop-filter: blur(18px);
+  background: color-mix(in srgb, var(--uhcp-panel) 92%, transparent);
+  border-bottom: 1px solid var(--uhcp-border);
+  display: flex;
+  justify-content: space-between;
+  min-height: 4.5rem;
+  padding: .75rem max(1rem, calc((100vw - 1160px) / 2));
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+.uhcp-brand { align-items: center; color: var(--uhcp-text); display: flex; gap: .75rem; text-decoration: none; }
+.uhcp-brand > span:last-child { display: grid; line-height: 1.15; }
+.uhcp-brand small { color: var(--uhcp-muted); }
+.uhcp-brand-mark {
+  align-items: center;
+  display: inline-flex;
+  height: 2.75rem;
+  justify-content: center;
+  width: 2.75rem;
+}
+.uhcp-brand-artwork { display: inline-flex; }
+.uhcp-brand-artwork img {
+  display: block;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  width: 100%;
+}
+.uhcp-brand-artwork-dark { display: none !important; }
+html[data-theme='dark'] .uhcp-brand-artwork-light { display: none !important; }
+html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
+.uhcp-account-menu { position: relative; }
+.uhcp-trigger {
+  align-items: center;
+  background: var(--uhcp-panel);
+  border: 1px solid var(--uhcp-border);
+  border-radius: 999px;
+  color: var(--uhcp-text);
+  cursor: pointer;
+  display: flex;
+  gap: .5rem;
+  max-width: min(19rem, 48vw);
+  padding: .7rem .85rem;
+}
+.uhcp-person-icon { height: 1.25rem; min-width: 1.25rem; width: 1.25rem; }
+.uhcp-account-id { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uhcp-menu {
+  background: var(--uhcp-panel);
+  border: 1px solid var(--uhcp-border);
+  border-radius: 1.5rem;
+  box-shadow: 0 20px 55px rgb(0 0 0 / 18%);
+  max-height: calc(100vh - 6rem);
+  overflow-y: auto;
+  padding: 1rem;
+  position: absolute;
+  right: 0;
+  top: 3.5rem;
+  width: min(23rem, calc(100vw - 2rem));
+}
+.uhcp-account-state { border-bottom: 1px solid var(--uhcp-border); color: var(--uhcp-text); display: grid; gap: .25rem; padding-bottom: 1rem; }
+.uhcp-account-state small { color: var(--uhcp-muted); overflow: hidden; text-overflow: ellipsis; }
+.uhcp-account-options { border-bottom: 1px solid var(--uhcp-border); display: grid; gap: .25rem; padding: .75rem 0; }
+.uhcp-account-options button {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: .75rem;
+  color: var(--uhcp-text);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: .2rem;
+  padding: .7rem;
+  text-align: left;
+}
+.uhcp-account-options button[aria-pressed='true'] { background: var(--uhcp-surface); border-color: var(--uhcp-accent); }
+.uhcp-account-options button:disabled { cursor: not-allowed; opacity: .55; }
+.uhcp-account-options small { color: var(--uhcp-muted); }
+.uhcp-preferences { border: 0; margin: 1rem 0 0; padding: 0; }
+.uhcp-preferences legend { color: var(--uhcp-text); font-weight: 800; }
+.uhcp-preferences > div { background: var(--uhcp-surface-muted); border-radius: 1rem; display: grid; gap: .25rem; grid-template-columns: repeat(3, 1fr); margin-top: .5rem; padding: .25rem; }
+.uhcp-preferences button {
+  background: transparent;
+  border: 0;
+  border-radius: .75rem;
+  color: var(--uhcp-muted);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  font-size: .72rem;
+  gap: .2rem;
+  padding: .55rem .25rem;
+}
+.uhcp-preferences button[aria-pressed='true'] { background: linear-gradient(135deg, var(--uhcp-action-start), var(--uhcp-action-end)); color: #fff; }
+.uhcp-menu-actions { border-top: 1px solid var(--uhcp-border); display: grid; gap: .2rem; margin-top: 1rem; padding-top: .75rem; }
+.uhcp-menu-actions a, .uhcp-menu-actions button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: .75rem;
+  color: var(--uhcp-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: 700;
+  gap: .7rem;
+  padding: .7rem;
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+.uhcp-menu-actions a:hover, .uhcp-menu-actions button:hover { background: var(--uhcp-surface-muted); color: var(--uhcp-turquoise); }
+.uhcp-profile-gate {
+  background: var(--uhcp-panel);
+  border: 1px solid var(--uhcp-border);
+  border-radius: 2rem;
+  color: var(--uhcp-text);
+  margin: 2rem auto;
+  max-width: 36rem;
+  padding: 2rem;
+  text-align: center;
+}
+.uhcp-profile-gate > p { color: var(--uhcp-muted); line-height: 1.6; }
+.uhcp-lock { color: var(--uhcp-turquoise); font-size: 2.5rem; }
+.uhcp-profile-gate form { display: grid; gap: 1rem; margin-top: 1.5rem; text-align: left; }
+.uhcp-profile-gate label { color: var(--uhcp-muted); display: grid; gap: .45rem; }
+.uhcp-profile-gate input { background: var(--uhcp-panel); border: 1px solid var(--uhcp-border); border-radius: .75rem; color: var(--uhcp-text); padding: .8rem; }
+.uhcp-profile-gate button { background: linear-gradient(135deg, var(--uhcp-action-start), var(--uhcp-action-end)); border: 0; border-radius: .75rem; color: #fff; cursor: pointer; font: inherit; font-weight: 800; padding: .8rem 1rem; }
+.uhcp-error { color: #c64747 !important; }
+.uhcp-shell { background: var(--uhcp-surface); color: var(--uhcp-text); min-height: 100vh; }
+.uhcp-main { min-height: calc(100vh - 4.5rem); }
+.uhcp-clinical-section {
+  background: var(--uhcp-panel);
+  border: 1px solid var(--uhcp-border);
+  border-radius: 2rem;
+  color: var(--uhcp-text);
+  padding: 1.25rem;
+}
+.uhcp-clinical-section > header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
+.uhcp-clinical-section h3 { font-size: 1.125rem; margin: 0; }
+.uhcp-clinical-section h3 span { color: var(--uhcp-muted); }
+.uhcp-clinical-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 1rem; }
+.uhcp-clinical-card { background: var(--uhcp-panel-muted); border-radius: 1rem; padding: 1rem; }
+.uhcp-clinical-title { font-weight: 800; margin: 0; }
+.uhcp-clinical-type { color: var(--uhcp-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; margin: .35rem 0 0; text-transform: uppercase; }
+.uhcp-clinical-date, .uhcp-clinical-empty { color: var(--uhcp-muted); margin: .35rem 0 0; }
+.uhcp-entry-hero {
+  align-items: center;
+  background:
+    radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--uhcp-turquoise) 25%, transparent), transparent 35%),
+    linear-gradient(135deg, color-mix(in srgb, var(--uhcp-action-end) 14%, var(--uhcp-surface)), var(--uhcp-surface));
+  display: grid;
+  gap: clamp(2rem, 7vw, 6rem);
+  grid-template-columns: minmax(12rem, .65fr) minmax(18rem, 1.35fr);
+  min-height: 26rem;
+  padding: clamp(2rem, 7vw, 6rem) max(1rem, calc((100vw - 1160px) / 2));
+}
+.uhcp-hero-orbit { border: 1px solid var(--uhcp-border); border-radius: 50%; display: grid; justify-self: center; padding: clamp(2rem, 6vw, 4.5rem); }
+.uhcp-hero-logo {
+  align-items: center;
+  display: flex;
+  height: clamp(8rem, 18vw, 12rem);
+  justify-content: center;
+  width: clamp(8rem, 18vw, 12rem);
+}
+.uhcp-entry-copy { max-width: 48rem; }
+.uhcp-entry-copy h1 { font-size: clamp(2.25rem, 5vw, 4.75rem); letter-spacing: -.045em; line-height: .98; margin: 1rem 0; }
+.uhcp-entry-copy p { color: var(--uhcp-muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; }
+.uhcp-badge { color: var(--uhcp-emerald); font-size: .78rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
+.uhcp-access-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 auto; max-width: 1160px; padding: clamp(1rem, 4vw, 3rem); }
+.uhcp-access-card {
+  background: var(--uhcp-panel);
+  border: 1px solid var(--uhcp-border);
+  border-radius: 2rem;
+  color: var(--uhcp-text);
+  display: grid;
+  gap: .75rem;
+  min-height: 15rem;
+  padding: clamp(1.5rem, 4vw, 2.5rem);
+  text-decoration: none;
+  transition: border-color .2s, transform .2s;
+}
+.uhcp-access-card:hover { border-color: var(--uhcp-turquoise); transform: translateY(-2px); }
+.uhcp-access-card:focus-visible, .uhcp-trigger:focus-visible, .uhcp-menu a:focus-visible, .uhcp-menu button:focus-visible { outline: 3px solid var(--uhcp-turquoise); outline-offset: 3px; }
+.uhcp-access-card strong { font-size: 1.45rem; }
+.uhcp-access-card > span:not(.uhcp-access-number) { color: var(--uhcp-muted); line-height: 1.6; }
+.uhcp-access-card small { color: var(--uhcp-emerald); font-weight: 800; }
+.uhcp-access-number { color: var(--uhcp-turquoise); font-size: .8rem; font-weight: 900; letter-spacing: .16em; }
+.uhcp-floating-action { align-items: center; background: linear-gradient(135deg, var(--uhcp-action-start), var(--uhcp-action-end)); border: 0; box-shadow: 0 12px 30px rgb(0 0 0 / 20%); color: #fff; display: flex; font: inherit; font-weight: 800; justify-content: center; position: fixed; text-decoration: none; z-index: 30; }
+.uhcp-floating-back { border-radius: 50%; bottom: 1.25rem; height: 3.5rem; left: 1.25rem; width: 3.5rem; }
+.uhcp-floating-assistant { border-radius: 999px; bottom: 1.25rem; gap: .5rem; padding: 1rem 1.25rem; right: 1.25rem; }
+@media (max-width: 620px) {
+  .uhcp-account-id, .uhcp-brand small { display: none; }
+  .uhcp-entry-hero { grid-template-columns: 1fr; }
+  .uhcp-access-grid { grid-template-columns: 1fr; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .uhcp-access-card { transition: none; }
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "uhc-portal-components-react",
+  "version": "0.1.3",
+  "description": "Brand-neutral React portal shell, account preferences and protected-profile UI for UHC and VetChain portals.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "files": ["dist", "README.md", "CHANGELOG.md"],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "check": "npm run typecheck && npm test && npm run build",
+    "prepack": "npm run check"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "^5.5.4",
+    "vitest": "^4.1.10"
+  }
+}