profile-pane 3.1.5 → 3.2.1

package/README.md

@@ -20,6 +20,22 @@ To run all tests:
 npm test
 ```
 
+Focused accessibility check:
+```shell script
+npm test -- test/profile-view.accessibility.test.ts
+```
+
+Accessibility markup baseline checklist:
+[docs/accessibility-baseline-checklist.md](docs/accessibility-baseline-checklist.md)
+
+Refactor test plan (temporary skips and revisit checklist):
+[docs/refactor-test-plan.md](docs/refactor-test-plan.md)
+
+### Legacy Files
+
+Legacy refactor artifacts are kept in [src/legacy](src/legacy).
+These files are intentionally retained for historical/reference purposes and are not part of the active sections-based flow.
+
 If you are a first time developer/user on Windows 10, the repository may give package issues regarding webpack or jest.
 If this is the case, simply run "npm audit fix" and upgrade the repository. It should work fine.
 

package/lib/ChatWithMe.d.ts

@@ -1,6 +1,7 @@
 import { TemplateResult } from 'lit-html';
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
+import { ViewerMode } from './types';
 import './styles/ChatWithMe.css';
-export declare const ChatWithMe: (subject: NamedNode, context: DataBrowserContext) => TemplateResult;
+export declare const ChatWithMe: (subject: NamedNode, context: DataBrowserContext, viewerMode: ViewerMode) => TemplateResult;
 //# sourceMappingURL=ChatWithMe.d.ts.map

package/lib/ChatWithMe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWithMe.d.ts","sourceRoot":"","sources":["../src/ChatWithMe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAMlC,OAAO,yBAAyB,CAAA;AAEhC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cA0FF,CAAA"}
+{"version":3,"file":"ChatWithMe.d.ts","sourceRoot":"","sources":["../src/ChatWithMe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAMlC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,EAC3B,YAAY,UAAU,KACrB,cA0FF,CAAA"}

package/lib/ChatWithMe.js

@@ -11,7 +11,7 @@ var _asyncReplace = require("lit-html/directives/async-replace.js");
 var _texts = require("./texts");
 var _buttonsHelper = require("./buttonsHelper");
 require("./styles/ChatWithMe.css");
-const ChatWithMe = (subject, context) => {
+const ChatWithMe = (subject, context, viewerMode) => {
   const logic = context.session.logic;
   const longChatPane = context.session.paneRegistry.byName('long chat');
   async function* chatContainer() {
@@ -31,7 +31,7 @@ const ChatWithMe = (subject, context) => {
     try {
       yield (0, _litHtml.html)`
       <div class="buttonSubSection">
-        <div class="actionButton loading-text center" role="status" aria-live="polite">
+        <div class="profile__action-button loading-text center" role="status" aria-live="polite">
           ${_texts.loadingMessage.toUpperCase()}
         </div>
       </div>
@@ -79,7 +79,7 @@ const ChatWithMe = (subject, context) => {
       description.id = 'chat-button-description';
       description.className = 'sr-only';
       description.textContent = 'Start a new conversation or sign in to continue existing chat';
-      button.classList.add('actionButton', 'btn-primary', 'action-button-focus');
+      button.classList.add('profile__action-button', 'btn-primary', 'action-button-focus');
       chatContainer.appendChild(button);
       chatContainer.appendChild(description);
       yield chatContainer;

package/lib/ProfileView.d.ts

@@ -2,5 +2,5 @@ import { TemplateResult } from 'lit-html';
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
 import './styles/ProfileView.css';
-export declare function ProfileView(subject: NamedNode, context: DataBrowserContext): Promise<TemplateResult>;
+export declare function ProfileView(subject: NamedNode, context: DataBrowserContext, onSaved?: () => Promise<void> | void): Promise<TemplateResult>;
 //# sourceMappingURL=ProfileView.d.ts.map

package/lib/ProfileView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileView.d.ts","sourceRoot":"","sources":["../src/ProfileView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAC7C,OAAO,0BAA0B,CAAA;AA+BjC,wBAAsB,WAAW,CAC/B,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,GAC1B,OAAO,CAAE,cAAc,CAAC,CAmH1B"}
+{"version":3,"file":"ProfileView.d.ts","sourceRoot":"","sources":["../src/ProfileView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAE7C,OAAO,0BAA0B,CAAA;AAgEjC,wBAAsB,WAAW,CAC/B,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,EAC3B,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GACnC,OAAO,CAAE,cAAc,CAAC,CAsC1B"}

package/lib/ProfileView.js

@@ -5,145 +5,85 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProfileView = ProfileView;
 var _litHtml = require("lit-html");
+var _solidLogic = require("solid-logic");
 require("./styles/ProfileView.css");
-var _ChatWithMe = require("./ChatWithMe");
-var _FriendList = require("./FriendList");
-var _presenter = require("./presenter");
-var _CVPresenter = require("./CVPresenter");
-var _SocialPresenter = require("./SocialPresenter");
-var _StuffPresenter = require("./StuffPresenter");
-var _ProfileCard = require("./ProfileCard");
-var _CVCard = require("./CVCard");
-var _SocialCard = require("./SocialCard");
-var _StuffCard = require("./StuffCard");
-var _texts = require("./texts");
-// 20210527
-// 20210527
-// 20210527
-
-// The edit button switches to the editor pane
-/*
-function renderEditButton (subject) {
-  return 
-    authn.currentUser() && authn.currentUser().sameTerm(subject) ?
-        html `<button type="button" class="ProfilePaneCVEditButton">
-        <img  src="${editButtonURI}">
-        Edit</button>`
-    : html``;
+var _QRCodeCard = require("./QRCodeCard");
+var _ProfileViewModelPresenter = require("./ProfileViewModelPresenter");
+var _ContactInfoSection = require("./sections/contactInfo/ContactInfoSection");
+var _LanguageSection = require("./sections/languages/LanguageSection");
+var _SkillsSection = require("./sections/skills/SkillsSection");
+var _ResumeSection = require("./sections/resume/ResumeSection");
+var _ProjectSection = require("./sections/projects/ProjectSection");
+var _HeadingSection = require("./sections/heading/HeadingSection");
+var _BioSection = require("./sections/bio/BioSection");
+var _SocialSection = require("./sections/social/SocialSection");
+function getViewerMode(subject) {
+  let mode = 'anonymous';
+  if (_solidLogic.authn.currentUser() && _solidLogic.authn.currentUser().sameTerm(subject)) mode = 'owner';
+  if (_solidLogic.authn.currentUser() && !_solidLogic.authn.currentUser().sameTerm(subject)) mode = 'authenticated';
+  return mode;
 }
-*/
-
-async function ProfileView(subject, context) {
+function renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, onSaved) {
+  return (0, _litHtml.html)`
+    <aside 
+      aria-labelledby="sidebar-heading" 
+      class="profile__sidebar p-sm" 
+    >
+      <h2 id="sidebar-heading" class="sr-only">Sidebar</h2>
+      <div aria-label="Sidebar Content" class="flex-column gap-md">
+        ${(0, _SocialSection.renderSocialAccounts)(store, subject, accounts, viewerMode, onSaved)}
+        ${(0, _SkillsSection.renderSkillsSection)(store, subject, skills, viewerMode, onSaved)}
+        ${(0, _LanguageSection.renderLanguageSection)(store, subject, languages, viewerMode, onSaved)}
+        ${(0, _ContactInfoSection.renderContactInfoSection)(store, subject, contactInfo, viewerMode, onSaved)}
+        ${renderQRCode(subject, store)}
+      </div>
+    </aside>
+  `;
+}
+function renderQRCode(subject, store) {
+  return (0, _litHtml.html)`
+      <section class="profile__section border-lighter profile__qr-code" aria-labelledby="qr-heading" tabindex="-1">
+        <h2 id="qr-heading" class="sr-only">QR code</h2>
+        <div class="qrcode-card__frame flex-center">
+          ${(0, _QRCodeCard.QRCodeCard)(subject, store)}
+        </div>
+      </section>
+  `;
+}
+async function ProfileView(subject, context, onSaved) {
   const store = context.session.store;
-  const profileBasics = (0, _presenter.presentProfile)(subject, store);
-  const rolesByType = (0, _CVPresenter.presentCV)(subject, store);
-  const accounts = (0, _SocialPresenter.presentSocial)(subject, store);
-  const stuffData = await (0, _StuffPresenter.presentStuff)(subject);
+  const viewerMode = getViewerMode(subject);
+  const viewModel = await (0, _ProfileViewModelPresenter.presentProfileViewModel)(subject, store);
+  const profileDetails = viewModel.profileDetails;
+  const rolesByType = viewModel.cvDetails;
+  const skills = viewModel.skills;
+  const languages = viewModel.languages;
+  const projects = viewModel.projects;
+  const bioDetails = viewModel.bioDetails;
+  const accounts = viewModel.social;
+  const contactInfo = viewModel.contactInfo;
   return (0, _litHtml.html)` 
-    <main
-      id="main-content"
-      class="profile-grid"
-      style="--profile-grid-bg: radial-gradient(circle, ${profileBasics.backgroundColor} 80%, ${profileBasics.highlightColor} 100%)"
-      role="main"
-      aria-label="Profile for ${profileBasics.name}"
-      tabindex="-1"
-    > 
-
-      <article 
-        aria-labelledby="profile-card-heading" 
-        class="profileSection section-bg" 
-        role="region"
+    <div class="profile-pane-root">
+      <main
+        id="main-content"
+        class="profile-grid"
         tabindex="-1"
-      >
-        <header class="text-center mb-md">
-          <h2 id="profile-card-heading" tabindex="-1">${profileBasics.name}</h2>
-        </header>
-        ${(0, _ProfileCard.ProfileCard)(profileBasics, context, subject)}
-      </article>
+      > 
+        <h1 id="profile-content-heading" class="sr-only">Profile for ${profileDetails.name}</h1>
 
-      ${(() => {
-    const cv = (0, _CVCard.CVCard)(rolesByType);
-    return cv && cv.strings && cv.strings.join('').trim() !== '' ? (0, _litHtml.html)`
-          <section 
-            aria-labelledby="cv-heading" 
-            class="profileSection section-bg" 
-            role="region"
-            tabindex="-1"
+        <section
+          class="profile__main flex-column gap-md p-sm"
           >
-            <header class="text-center mb-md">
-              <h2 id="cv-heading" tabindex="-1">${_texts.resumeHeadingText}</h2>
-            </header>
-            <div>
-              ${cv}
-            </div>
-          </section>
-        ` : '';
-  })()}
-
-      ${accounts.accounts && accounts.accounts.length > 0 ? (0, _litHtml.html)`
-        <aside 
-          aria-labelledby="social-heading" 
-          class="profileSection section-bg" 
-          role="complementary"
-          tabindex="-1"
-        >
-          <header class="text-center mb-md">
-            <h2 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h2>
-          </header>
-          <nav aria-label="Social media links">
-            ${(0, _SocialCard.SocialCard)(accounts)}
-          </nav>
-        </aside>
-      ` : ''}
+          <h2 id="profile-main-heading" class="sr-only">Main Profile Content</h2>
 
-      ${stuffData.stuff && stuffData.stuff.length > 0 ? (0, _litHtml.html)`
-        <section 
-          aria-labelledby="stuff-heading" 
-          class="profileSection section-bg" 
-          role="region"
-          tabindex="-1"
-        >
-          <header class="text-center mb-md">
-            <h2 id="stuff-heading" tabindex="-1">${_texts.sharedItemsHeadingText}</h2>
-          </header>
-          <div>
-            ${(0, _StuffCard.StuffCard)(profileBasics, context, subject, stuffData)}
-          </div>
+          ${(0, _HeadingSection.renderHeadingSection)(context, subject, profileDetails, viewerMode, onSaved)}
+          ${(0, _BioSection.renderBioSection)(store, subject, bioDetails, viewerMode, onSaved)}
+          ${(0, _ResumeSection.renderCVSection)(store, subject, rolesByType, viewerMode, onSaved)}
+          ${(0, _ProjectSection.renderProjectSection)(store, subject, projects, viewerMode, onSaved)}
+          
         </section>
-      ` : ''}
-
-      ${(() => {
-    const friends = (0, _FriendList.FriendList)(subject, context);
-    return friends ? (0, _litHtml.html)`
-          <aside 
-            aria-labelledby="friends-heading" 
-            class="profileSection section-bg" 
-            role="complementary"
-            tabindex="-1"
-          >
-            <header class="text-center mb-md">
-              <h2 id="friends-heading" tabindex="-1">${_texts.friendsHeadingText}</h2>
-            </header>
-            <div role="list" aria-label="Friend connections">
-              ${friends}
-            </div>
-          </aside>
-        ` : '';
-  })()}
-
-      <section 
-        aria-labelledby="chat-heading" 
-        class="profileSection section-bg" 
-        role="region"
-        tabindex="-1"
-      >
-        <header class="text-center mb-md">
-          <h2 id="chat-heading" tabindex="-1">${_texts.contactHeadingText}</h2>
-        </header>
-        <div>
-          ${(0, _ChatWithMe.ChatWithMe)(subject, context)}
-        </div>
-      </section>
-    </main>
+        ${renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, onSaved)}
+      </main>
+    </div>
   `;
 }

package/lib/ProfileViewModelPresenter.d.ts

@@ -0,0 +1,23 @@
+import { NamedNode, LiveStore } from 'rdflib';
+import { ContactInfo } from './sections/contactInfo/types';
+import { SocialPresentation } from './sections/social/types';
+import { SkillDetails } from './sections/skills/types';
+import { LanguageDetails } from './sections/languages/types';
+import { RoleDetails } from './sections/resume/types';
+import { EducationDetails } from './sections/education/types';
+import { ProjectDetails } from './sections/projects/types';
+import { ProfileDetails } from './sections/heading/types';
+import { BioDetails } from './sections/bio/types';
+export type ProfileViewModel = {
+    profileDetails: ProfileDetails;
+    contactInfo: ContactInfo;
+    skills: SkillDetails[];
+    languages: LanguageDetails[];
+    education: EducationDetails[];
+    projects: ProjectDetails[];
+    bioDetails: BioDetails;
+    social: SocialPresentation;
+    cvDetails: RoleDetails[];
+};
+export declare function presentProfileViewModel(subject: NamedNode, store: LiveStore): Promise<ProfileViewModel>;
+//# sourceMappingURL=ProfileViewModelPresenter.d.ts.map

package/lib/ProfileViewModelPresenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileViewModelPresenter.d.ts","sourceRoot":"","sources":["../src/ProfileViewModelPresenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAG,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAG1D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAGjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,SAAS,EAAE,WAAW,EAAE,CAAA;CACzB,CAAA;AAED,wBAAsB,uBAAuB,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAsB7G"}

package/lib/ProfileViewModelPresenter.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presentProfileViewModel = presentProfileViewModel;
+var _selectors = require("./sections/social/selectors");
+var _selectors2 = require("./sections/skills/selectors");
+var _selectors3 = require("./sections/languages/selectors");
+var _selectors4 = require("./sections/resume/selectors");
+var _selectors5 = require("./sections/contactInfo/selectors");
+var _selectors6 = require("./sections/education/selectors");
+var _selectors7 = require("./sections/projects/selectors");
+var _selectors8 = require("./sections/heading/selectors");
+var _selectors9 = require("./sections/bio/selectors");
+async function presentProfileViewModel(subject, store) {
+  const profileDetails = (0, _selectors8.presentProfile)(subject, store);
+  const contactInfo = (0, _selectors5.presentContactInfo)(subject, store);
+  const skills = (0, _selectors2.presentSkillDetails)(subject, store);
+  const languages = (0, _selectors3.presentLanguages)(subject, store);
+  const education = (0, _selectors6.presentEducation)(subject, store);
+  const projects = await (0, _selectors7.presentProjects)(subject, store);
+  const bioDetails = (0, _selectors9.presentBio)(subject, store);
+  const social = (0, _selectors.presentSocial)(subject, store);
+  const cvDetails = (0, _selectors4.presentCV)(subject, store);
+  return {
+    profileDetails,
+    social,
+    contactInfo,
+    skills,
+    languages,
+    education,
+    projects,
+    bioDetails,
+    cvDetails
+  };
+}

package/lib/QRCodeCard.d.ts

@@ -1,5 +1,7 @@
 import { TemplateResult } from 'lit-html';
 import { NamedNode } from 'rdflib';
 import './styles/QRCodeCard.css';
-export declare const QRCodeCard: (highlightColor: string, backgroundColor: string, subject: NamedNode) => TemplateResult;
+type LegacySubjectArg = NamedNode | string;
+export declare const QRCodeCard: (arg1: LegacySubjectArg, arg2?: unknown, arg3?: unknown) => TemplateResult;
+export {};
 //# sourceMappingURL=QRCodeCard.d.ts.map

package/lib/QRCodeCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QRCodeCard.d.ts","sourceRoot":"","sources":["../src/QRCodeCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,OAAO,yBAAyB,CAAA;AAuChC,eAAO,MAAM,UAAU,GACrB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,SAAS,SAAS,KACjB,cA0EF,CAAA"}
+{"version":3,"file":"QRCodeCard.d.ts","sourceRoot":"","sources":["../src/QRCodeCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAa,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,yBAAyB,CAAA;AAMhC,KAAK,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAA;AAyF1C,eAAO,MAAM,UAAU,GACrB,MAAM,gBAAgB,EACtB,OAAO,OAAO,EACd,OAAO,OAAO,KACb,cAiEF,CAAA"}

package/lib/QRCodeCard.js

@@ -8,83 +8,103 @@ var _litHtml = require("lit-html");
 var _solidUi = require("solid-ui");
 require("./styles/QRCodeCard.css");
 var _texts = require("./texts");
-function hexToRgb(hex) {
-  // Remove leading # if present
-  hex = hex.replace(/^#/, '');
-  if (hex.length === 3) {
-    hex = hex.split('').map(x => x + x).join('');
+/* Part of this code was generated by AI Model: GPT-5.3-Codex */
+/* Prompt: The QRCode has a label "link to profile" but it should
+ be a VCARD with name, and link to profile. So when you scan it 
+ it goes into your contacts. That's the current way works, IIRC. */
+
+function isNamedNodeLike(value) {
+  return Boolean(value && typeof value === 'object' && typeof value.uri === 'string');
+}
+function isStoreLike(value) {
+  return Boolean(value && typeof value === 'object' && typeof value.any === 'function');
+}
+function resolveQRCodeArgs(arg1, arg2, arg3) {
+  if (isNamedNodeLike(arg1)) {
+    return {
+      subject: arg1,
+      store: isStoreLike(arg2) ? arg2 : undefined
+    };
   }
-  if (hex.length !== 6) return null;
-  const num = parseInt(hex, 16);
-  return {
-    r: num >> 16 & 255,
-    g: num >> 8 & 255,
-    b: num & 255
-  };
+  if (isNamedNodeLike(arg3)) {
+    return {
+      subject: arg3,
+      store: isStoreLike(arg2) ? arg2 : undefined
+    };
+  }
+  throw new Error('QRCodeCard requires a profile subject NamedNode.');
 }
-function luminance({
-  r,
-  g,
-  b
-}) {
-  const a = [r, g, b].map(function (v) {
-    v /= 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+function normalizeEmail(value) {
+  return (value || '').trim().replace(/^mailto:/i, '');
 }
-function contrastRatio(hex1, hex2) {
-  const rgb1 = hexToRgb(hex1);
-  const rgb2 = hexToRgb(hex2);
-  if (!rgb1 || !rgb2) return 1;
-  const lum1 = luminance(rgb1);
-  const lum2 = luminance(rgb2);
-  const brightest = Math.max(lum1, lum2);
-  const darkest = Math.min(lum1, lum2);
-  return (brightest + 0.05) / (darkest + 0.05);
+function normalizeTelephone(value) {
+  return (value || '').trim().replace(/^tel:/i, '');
 }
-const QRCodeCard = (highlightColor, backgroundColor, subject) => {
-  const hC = highlightColor || '#000000';
-  const bC = backgroundColor || '#ffffff';
-  const name = _solidUi.utils.label(subject);
-
-  // Color contrast check
-  const ratio = contrastRatio(hC, bC);
-  if (ratio < 4.5) {
-    console.warn(`QRCodeCard: The contrast ratio between highlightColor (${hC}) and backgroundColor (${bC}) is ${ratio.toFixed(2)}, which is below the WCAG 2.1 recommended minimum of 4.5:1 for normal text.`);
-  }
-  const BEGIN = 'BEGIN:VCARD\r\n';
-  const END = 'END:VCARD\r\n';
-  const FN = 'FN:' + name + '\r\n';
-  const URL = 'URL:' + subject.uri + 'r\n';
-  const VERSIONV = 'VERSION:4.0\r\n';
-
-  // Accessibility check: Ensure QR code is rendered as an accessible image or canvas
-  // This assumes the QR code is rendered inside the <div> below by another library or script.
-  // If you use a library, ensure it sets role="img" and an appropriate aria-label or alt attribute.
-  // If not, warn the developer.
-  setTimeout(() => {
-    const container = document.querySelector('.QRCode [role="img"]');
-    if (container) {
-      const hasAriaLabel = container.hasAttribute('aria-label');
-      const hasAlt = container.hasAttribute('alt');
-      if (!hasAriaLabel && !hasAlt) {
-        console.warn('QRCodeCard: The QR code element should have an accessible label (aria-label or alt attribute) for screen readers.');
+function isEmailValue(value) {
+  const normalized = (value || '').trim();
+  if (!normalized) return false;
+  if (/^mailto:/i.test(normalized)) return true;
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalized);
+}
+function isPhoneValue(value) {
+  const normalized = (value || '').trim();
+  if (!normalized) return false;
+  if (/^tel:/i.test(normalized)) return true;
+  return /^[+()\-\s\d]{5,}$/.test(normalized);
+}
+function firstContactValue(store, subject, predicate, kind) {
+  if (!store) return '';
+  const candidates = store.each(subject, predicate);
+  const isExpectedValue = kind === 'email' ? isEmailValue : isPhoneValue;
+  for (const node of candidates) {
+    if (!node) continue;
+    const direct = node.value;
+    if (typeof direct === 'string' && isExpectedValue(direct)) {
+      return kind === 'email' ? normalizeEmail(direct) : normalizeTelephone(direct);
+    }
+    if (node.termType === 'NamedNode' || node.termType === 'BlankNode') {
+      const doc = subject.doc();
+      const inDocStatements = store.statementsMatching(node, _solidUi.ns.vcard('value'), null, doc);
+      const anyGraphStatements = store.statementsMatching(node, _solidUi.ns.vcard('value'));
+      for (const statement of [...inDocStatements, ...anyGraphStatements]) {
+        const viaValue = statement.object?.value;
+        if (typeof viaValue === 'string' && isExpectedValue(viaValue)) {
+          return kind === 'email' ? normalizeEmail(viaValue) : normalizeTelephone(viaValue);
+        }
       }
-    } else {
-      console.warn('QRCodeCard: No element with role="img" found for the QR code. Ensure the QR code is rendered as an <img> or <canvas> with proper ARIA attributes.');
     }
-  }, 0);
-  const vCard = BEGIN + FN + URL + END + VERSIONV;
+  }
+  return '';
+}
+const QRCodeCard = (arg1, arg2, arg3) => {
+  const {
+    subject,
+    store
+  } = resolveQRCodeArgs(arg1, arg2, arg3);
+  const name = _solidUi.utils.label(subject);
+  const escapeVCardValue = value => {
+    return (value || '').replace(/\\/g, '\\\\').replace(/;/g, '\\;').replace(/,/g, '\\,').replace(/\r?\n/g, '\\n');
+  };
+  const safeName = escapeVCardValue(name || subject.uri);
+  const safeUrl = escapeVCardValue(subject.uri);
+  const email = firstContactValue(store, subject, _solidUi.ns.vcard('hasEmail'), 'email');
+  const telephone = firstContactValue(store, subject, _solidUi.ns.vcard('hasTelephone'), 'tel');
+  const vCardLines = ['BEGIN:VCARD', 'VERSION:4.0', `FN:${safeName}`, `URL:${safeUrl}`];
+  if (email) {
+    vCardLines.push(`EMAIL;TYPE=internet:${escapeVCardValue(email)}`);
+  }
+  if (telephone) {
+    vCardLines.push(`TEL:${escapeVCardValue(telephone)}`);
+  }
+  vCardLines.push('END:VCARD');
+  const vCard = vCardLines.join('\r\n');
 
   // console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
 
   return (0, _litHtml.html)`
     <figure 
-      class="QRCode"
+      class="qrcode-card flex-column-center"
       data-value="${vCard}"
-      highlightColor="${hC}"
-      backgroundColor="${bC}"
       data-testid="qrcode-card"
       aria-labelledby="qr-code-caption"
       role="img"
@@ -97,7 +117,7 @@ const QRCodeCard = (highlightColor, backgroundColor, subject) => {
       ></div>
       <figcaption 
         id="qr-code-caption" 
-        class="qrCaption"
+        class="qrcode-card__caption"
       >
         ${_texts.scanQrToConnectText}
       </figcaption>