uhc-portal-components-react 0.2.17 → 0.2.18

package/CHANGELOG.md

@@ -10,9 +10,14 @@
   animal species context and 21-digit telephone identifier and renders an
   SHC-like identity QR only when the owning provider supplies it already
   signed.
-- Print both faces vertically at 50 x 80 mm, enlarge each QR to the usable
-  card width and remove the unreadable printed DID while preserving it as the
-  exact face-A QR payload.
+- Print both faces vertically at 50 x 80 mm and remove the unreadable printed
+  DID while preserving it as the exact face-A QR payload.
+- Present both physical faces side by side whenever the screen has room and
+  collapse them to one column only on narrow viewports. Use a white face A,
+  one larger SOSCHAIN logo, a compact DID QR, the subject label below it and
+  the provider code needed for manual recovery.
+- Keep the reverse free of repeated subject text and format the indivisible
+  21-digit telephone identifier as `4 4 4 4 5` without line wrapping.
 
 ## 0.2.14 - 2026-10-15
 

package/README.md

@@ -205,5 +205,9 @@ encode only the canonical card `did:web`; face B may encode only an already
 signed provider-issued identity credential. Presentation code never issues or
 signs the credential. When no signed value is available, the reverse side
 fails closed with an explicit unavailable state. Both faces use the vertical
-50 x 80 mm label format. The QR fills the usable width; the long `did:web` is
-not repeated as unreadable microtext.
+50 x 80 mm label format and appear side by side when the viewport permits.
+Face A uses the supplied SOSCHAIN logo without duplicating its wordmark,
+prints the provider code for manual recovery, and keeps the DID QR compact;
+the long `did:web` is not repeated as unreadable microtext. Face B does not
+repeat the localized subject label and keeps the 21 digits together in
+telephone groups of `4 4 4 4 5`.

package/dist/AnimalCardArtifact.d.ts

@@ -20,6 +20,8 @@ export type SoschainSmartIdentityCardArtifactProps = Readonly<{
     subjectKind?: 'animal' | 'personal';
     subjectLabel?: string;
     cardDid: string;
+    /** Nine-digit public provider code printed for manual recovery when the DID QR cannot be read. */
+    providerCode?: string;
     speciesId7?: string;
     cardNumber21?: string;
     /** Host-rendered QR whose exact payload is `cardDid`. */
@@ -36,5 +38,5 @@ export declare function formatSoschainCardNumber21(value: string): string;
  * VetChain. The host owns both QR payloads. Face A is deliberately DID-only;
  * face B never invents or signs a credential in presentation code.
  */
-export declare function SoschainSmartIdentityCardArtifact({ subjectKind, subjectLabel, cardDid, speciesId7, cardNumber21, didQr, identityQr, logoUrl, signedIdentityUnavailableLabel, }: SoschainSmartIdentityCardArtifactProps): import("react").JSX.Element;
+export declare function SoschainSmartIdentityCardArtifact({ subjectKind, subjectLabel, cardDid, providerCode, speciesId7, cardNumber21, didQr, identityQr, logoUrl, signedIdentityUnavailableLabel, }: SoschainSmartIdentityCardArtifactProps): import("react").JSX.Element;
 //# sourceMappingURL=AnimalCardArtifact.d.ts.map

package/dist/AnimalCardArtifact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimalCardArtifact.d.ts","sourceRoot":"","sources":["../src/AnimalCardArtifact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAC,CAAA;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,UAAU,EACV,OAAO,GACR,EAAE,uBAAuB,+BAsBzB;AAED,MAAM,MAAM,sCAAsC,GAAG,QAAQ,CAAC;IAC5D,gHAAgH;IAChH,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAA;IAChB,oFAAoF;IACpF,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,8BAA8B,CAAC,EAAE,MAAM,CAAA;CACxC,CAAC,CAAA;AAEF,8EAA8E;AAC9E,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhE;AAED;;;;GAIG;AACH,wBAAgB,iCAAiC,CAAC,EAChD,WAAsB,EACtB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,YAAY,EACZ,KAAK,EACL,UAAU,EACV,OAAO,EACP,8BAA8D,GAC/D,EAAE,sCAAsC,+BA8BxC"}
+{"version":3,"file":"AnimalCardArtifact.d.ts","sourceRoot":"","sources":["../src/AnimalCardArtifact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAC,CAAA;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,UAAU,EACV,OAAO,GACR,EAAE,uBAAuB,+BAsBzB;AAED,MAAM,MAAM,sCAAsC,GAAG,QAAQ,CAAC;IAC5D,gHAAgH;IAChH,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,kGAAkG;IAClG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAA;IAChB,oFAAoF;IACpF,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,8BAA8B,CAAC,EAAE,MAAM,CAAA;CACxC,CAAC,CAAA;AAEF,8EAA8E;AAC9E,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhE;AAED;;;;GAIG;AACH,wBAAgB,iCAAiC,CAAC,EAChD,WAAsB,EACtB,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,EACL,UAAU,EACV,OAAO,EACP,8BAA8D,GAC/D,EAAE,sCAAsC,+BAsCxC"}

package/dist/AnimalCardArtifact.js

@@ -11,17 +11,21 @@ export function formatSoschainCardNumber21(value) {
     const digits = String(value || '').replace(/[ -]/g, '');
     if (!/^\d{21}$/.test(digits))
         throw new TypeError('cardNumber21 must contain exactly 21 digits.');
-    return `${digits.slice(0, 5)} ${digits.slice(5, 10)} ${digits.slice(10, 15)} ${digits.slice(15, 20)} ${digits.slice(20)}`;
+    return `${digits.slice(0, 4)} ${digits.slice(4, 8)} ${digits.slice(8, 12)} ${digits.slice(12, 16)} ${digits.slice(16)}`;
 }
 /**
  * Two-sided physical identity artifact shared by SOSChain, PetChain and
  * VetChain. The host owns both QR payloads. Face A is deliberately DID-only;
  * face B never invents or signs a credential in presentation code.
  */
-export function SoschainSmartIdentityCardArtifact({ subjectKind = 'animal', subjectLabel, cardDid, speciesId7, cardNumber21, didQr, identityQr, logoUrl, signedIdentityUnavailableLabel = 'Signed identity unavailable', }) {
+export function SoschainSmartIdentityCardArtifact({ subjectKind = 'animal', subjectLabel, cardDid, providerCode, speciesId7, cardNumber21, didQr, identityQr, logoUrl, signedIdentityUnavailableLabel = 'Signed identity unavailable', }) {
     const publicLabel = subjectKind === 'personal' ? 'Personal' : String(subjectLabel || 'Animal').trim();
     const formattedCardNumber = cardNumber21 ? formatSoschainCardNumber21(cardNumber21) : undefined;
-    return _jsxs("div", { className: "uhcp-smart-id-card-set", "aria-label": `SOSCHAIN Smart Identity Card: ${publicLabel}`, children: [_jsxs("article", { className: "uhcp-smart-id-card uhcp-smart-id-card-front", "data-card-face": "front", children: [_jsxs("header", { className: "uhcp-smart-id-brand", children: [_jsx("img", { src: logoUrl, alt: "" }), _jsx("strong", { children: "SOSCHAIN" }), _jsx("span", { children: publicLabel })] }), _jsx("div", { className: "uhcp-smart-id-front-qr", "aria-label": "DID QR code", children: didQr })] }), _jsxs("article", { className: "uhcp-smart-id-card uhcp-smart-id-card-back", "data-card-face": "back", children: [_jsxs("header", { children: [_jsx("strong", { children: "SOSCHAIN SMART IDENTITY CARD" }), _jsx("span", { children: publicLabel })] }), _jsxs("div", { className: "uhcp-smart-id-back-body", children: [_jsxs("dl", { children: [speciesId7 ? _jsxs("div", { children: [_jsx("dt", { children: "Species" }), _jsx("dd", { children: speciesId7 })] }) : null, formattedCardNumber ? _jsxs("div", { children: [_jsx("dt", { children: "Card" }), _jsx("dd", { children: formattedCardNumber })] }) : null] }), identityQr
+    const normalizedProviderCode = providerCode ? String(providerCode).replace(/[ -]/g, '') : undefined;
+    if (normalizedProviderCode && !/^\d{9}$/.test(normalizedProviderCode)) {
+        throw new TypeError('providerCode must contain exactly 9 digits.');
+    }
+    return _jsxs("div", { className: "uhcp-smart-id-card-set", "aria-label": `SOSCHAIN Smart Identity Card: ${publicLabel}`, children: [_jsxs("article", { className: "uhcp-smart-id-card uhcp-smart-id-card-front", "data-card-face": "front", children: [_jsx("header", { className: "uhcp-smart-id-brand", children: _jsx("img", { src: logoUrl, alt: "SOSCHAIN" }) }), _jsxs("div", { className: "uhcp-smart-id-front-body", children: [_jsx("div", { className: "uhcp-smart-id-front-qr", "aria-label": "DID QR code", children: didQr }), _jsx("p", { className: "uhcp-smart-id-subject-label", children: publicLabel })] }), normalizedProviderCode ? _jsxs("footer", { children: [_jsx("span", { children: "Provider" }), _jsx("p", { className: "uhcp-smart-id-provider-code", children: normalizedProviderCode })] }) : null] }), _jsxs("article", { className: "uhcp-smart-id-card uhcp-smart-id-card-back", "data-card-face": "back", children: [_jsx("header", { children: _jsx("strong", { children: "SOSCHAIN SMART IDENTITY CARD" }) }), _jsxs("div", { className: "uhcp-smart-id-back-body", children: [_jsxs("dl", { children: [speciesId7 ? _jsxs("div", { children: [_jsx("dt", { children: "Species" }), _jsx("dd", { children: speciesId7 })] }) : null, formattedCardNumber ? _jsxs("div", { children: [_jsx("dt", { children: "Card" }), _jsx("dd", { children: formattedCardNumber })] }) : null] }), identityQr
                                 ? _jsx("div", { className: "uhcp-smart-id-identity-qr", "aria-label": "Signed identity QR code", children: identityQr })
                                 : _jsx("p", { className: "uhcp-smart-id-unavailable", role: "status", children: signedIdentityUnavailableLabel })] })] })] });
 }

package/dist/styles.css

@@ -835,28 +835,30 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .uhcp-animal-card footer { min-width: 0; }
 .uhcp-animal-card footer code { color: inherit; display: block; font-size: .68rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media(max-width: 480px) { .uhcp-animal-card { aspect-ratio: auto; min-height: 17rem; } .uhcp-animal-card-qr { height: 6.25rem; width: 6.25rem; } }
-.uhcp-smart-id-card-set { display: grid; gap: 1rem; width: min(100%, 19rem); }
-.uhcp-smart-id-card { aspect-ratio: 5 / 8; border: 1px solid #cbd5e1; border-radius: 1.15rem; box-shadow: 0 1rem 2.5rem rgb(2 30 51 / 18%); box-sizing: border-box; overflow: hidden; padding: .75rem; position: relative; width: 100%; }
-.uhcp-smart-id-card-front { background: linear-gradient(145deg, #061c35 0%, #0a4169 58%, #087f8d 100%); color: #fff; display: grid; gap: .75rem; grid-template-rows: auto 1fr; }
-.uhcp-smart-id-card-front::after { background: radial-gradient(circle, rgb(255 255 255 / 16%), transparent 70%); content: ''; height: 18rem; inset: -8rem -7rem auto auto; pointer-events: none; position: absolute; width: 18rem; }
-.uhcp-smart-id-brand { align-items: center; display: grid; gap: .45rem; grid-template-columns: 2rem auto 1fr; position: relative; z-index: 1; }
-.uhcp-smart-id-brand img { background: #fff; border-radius: .48rem; box-sizing: border-box; height: 2rem; object-fit: contain; padding: .16rem; width: 2rem; }
-.uhcp-smart-id-brand strong { font-size: .85rem; letter-spacing: .08em; }
-.uhcp-smart-id-brand span { font-size: .72rem; font-weight: 800; justify-self: end; text-align: end; }
-.uhcp-smart-id-front-qr { align-self: center; aspect-ratio: 1; background: #fff; border: .35rem solid #fff; border-radius: .7rem; box-sizing: border-box; justify-self: center; width: calc(100% - .5rem); }
+.uhcp-smart-id-card-set { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 19rem)); width: min(100%, 39rem); }
+.uhcp-smart-id-card { aspect-ratio: 5 / 8; border: 1px solid #cbd5e1; border-radius: 1.15rem; box-shadow: 0 .8rem 2rem rgb(15 41 66 / 14%); box-sizing: border-box; font-family: Inter, "Helvetica Neue", Arial, sans-serif; line-height: 1.2; overflow: hidden; padding: .9rem; position: relative; width: 100%; }
+.uhcp-smart-id-card-front { background: #fff; color: #0f2942; display: grid; gap: .5rem; grid-template-rows: auto 1fr auto; }
+.uhcp-smart-id-brand { align-items: center; display: flex; justify-content: center; min-height: 4.2rem; }
+.uhcp-smart-id-brand img { display: block; height: 3.7rem; object-fit: contain; width: 5.6rem; }
+.uhcp-smart-id-front-body { align-content: center; display: grid; gap: .55rem; justify-items: center; min-height: 0; }
+.uhcp-smart-id-front-qr { aspect-ratio: 1; background: #fff; border: .2rem solid #fff; box-sizing: border-box; width: 68%; }
 .uhcp-smart-id-front-qr > * { display: block; height: 100%; width: 100%; }
+.uhcp-smart-id-subject-label { color: #0f2942; font-size: 1rem; font-weight: 800; line-height: 1.15; margin: 0; text-align: center; }
+.uhcp-smart-id-card-front > footer { border-top: 1px solid #dbe3eb; display: grid; gap: .12rem; padding-top: .55rem; }
+.uhcp-smart-id-card-front > footer span { color: #526174; font-size: .58rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
+.uhcp-smart-id-provider-code { font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .04em; line-height: 1; margin: 0; white-space: nowrap; }
 .uhcp-smart-id-card-back { background: #fff; color: #0f2942; display: grid; gap: .5rem; grid-template-rows: auto 1fr; }
-.uhcp-smart-id-card-back > header { align-items: baseline; border-bottom: 2px solid #0f9ca8; display: flex; gap: .5rem; justify-content: space-between; padding-bottom: .35rem; }
-.uhcp-smart-id-card-back > header strong { font-size: .68rem; letter-spacing: .08em; }
-.uhcp-smart-id-card-back > header span { color: #087f8d; font-size: .68rem; font-weight: 850; text-align: end; }
-.uhcp-smart-id-back-body { align-items: center; display: grid; gap: .7rem; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
-.uhcp-smart-id-back-body dl { display: grid; gap: .5rem; margin: 0; order: 2; }
+.uhcp-smart-id-card-back > header { border-bottom: 2px solid #0f9ca8; padding-bottom: .45rem; }
+.uhcp-smart-id-card-back > header strong { font-size: .68rem; letter-spacing: .07em; line-height: 1.15; }
+.uhcp-smart-id-back-body { align-content: start; display: grid; gap: .65rem; grid-template-rows: auto auto; min-height: 0; }
+.uhcp-smart-id-back-body dl { display: grid; gap: .4rem; margin: 0; order: 2; }
 .uhcp-smart-id-back-body dt { color: #526174; font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
-.uhcp-smart-id-back-body dd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .72rem; font-weight: 850; margin: .12rem 0 0; overflow-wrap: anywhere; }
-.uhcp-smart-id-identity-qr { align-self: center; aspect-ratio: 1; background: #fff; box-sizing: border-box; justify-self: center; order: 1; width: calc(100% - .5rem); }
+.uhcp-smart-id-back-body dd { font-size: .76rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .025em; line-height: 1.05; margin: .1rem 0 0; white-space: nowrap; }
+.uhcp-smart-id-identity-qr { aspect-ratio: 1; background: #fff; box-sizing: border-box; justify-self: center; order: 1; width: 82%; }
 .uhcp-smart-id-identity-qr > * { display: block; height: 100%; width: 100%; }
-.uhcp-smart-id-unavailable { align-items: center; align-self: center; aspect-ratio: 1; background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: .7rem; box-sizing: border-box; color: #526174; display: flex; font-size: .72rem; justify-content: center; justify-self: center; margin: 0; order: 1; padding: 1rem; text-align: center; width: calc(100% - .5rem); }
-@media print { .uhcp-smart-id-card-set { gap: 0; width: 50mm; } .uhcp-smart-id-card { break-after: page; border-radius: 3mm; box-shadow: none; height: 80mm; padding: 2mm; width: 50mm; } .uhcp-smart-id-front-qr, .uhcp-smart-id-identity-qr, .uhcp-smart-id-unavailable { width: 46mm; } .uhcp-smart-id-card:last-child { break-after: auto; } }
+.uhcp-smart-id-unavailable { background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: .6rem; box-sizing: border-box; color: #526174; font-size: .72rem; line-height: 1.25; margin: 0; order: 1; padding: .7rem; text-align: center; }
+@media (max-width: 40rem) { .uhcp-smart-id-card-set { grid-template-columns: minmax(0, 19rem); width: min(100%, 19rem); } }
+@media print { .uhcp-smart-id-card-set { gap: 0; grid-template-columns: 50mm; width: 50mm; } .uhcp-smart-id-card { break-after: page; border-radius: 3mm; box-shadow: none; height: 80mm; padding: 2.5mm; width: 50mm; } .uhcp-smart-id-front-qr { width: 34mm; } .uhcp-smart-id-identity-qr { width: 42mm; } .uhcp-smart-id-card:last-child { break-after: auto; } }
 .uhcp-animal-controller-attestation { border: 1px solid var(--uhcp-border, #d9dee7); border-radius: 1.25rem; display: grid; gap: 1rem; padding: 1rem; }
 .uhcp-animal-controller-attestation header h2, .uhcp-animal-controller-attestation header p { margin: 0; }
 .uhcp-animal-controller-attestation header p { color: var(--uhcp-muted, #5f6875); margin-top: .35rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhc-portal-components-react",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "Brand-neutral React portal shell, account preferences and protected-profile UI for UHC and VetChain portals.",
   "license": "Apache-2.0",
   "type": "module",