profile-pane 3.2.1 → 3.2.2-test.0

package/lib/ProfileView.d.ts

@@ -1,6 +1,7 @@
 import { TemplateResult } from 'lit-html';
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
-import './styles/ProfileView.css';
+import './ProfileView.css';
+import './styles/CollapsibleSection.css';
 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;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"}
+{"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,mBAAmB,CAAA;AAC1B,OAAO,iCAAiC,CAAA;AAiDxC,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,CA8E1B"}

package/lib/ProfileView.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.ProfileView = ProfileView;
 var _litHtml = require("lit-html");
 var _solidLogic = require("solid-logic");
-require("./styles/ProfileView.css");
-var _QRCodeCard = require("./QRCodeCard");
+require("./ProfileView.css");
+require("./styles/CollapsibleSection.css");
 var _ProfileViewModelPresenter = require("./ProfileViewModelPresenter");
 var _ContactInfoSection = require("./sections/contactInfo/ContactInfoSection");
 var _LanguageSection = require("./sections/languages/LanguageSection");
@@ -17,6 +17,7 @@ var _ProjectSection = require("./sections/projects/ProjectSection");
 var _HeadingSection = require("./sections/heading/HeadingSection");
 var _BioSection = require("./sections/bio/BioSection");
 var _SocialSection = require("./sections/social/SocialSection");
+var _QRCodeSection = require("./sections/qrcode/QRCodeSection");
 function getViewerMode(subject) {
   let mode = 'anonymous';
   if (_solidLogic.authn.currentUser() && _solidLogic.authn.currentUser().sameTerm(subject)) mode = 'owner';
@@ -25,34 +26,26 @@ function getViewerMode(subject) {
 }
 function renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, onSaved) {
   return (0, _litHtml.html)`
-    <aside 
-      aria-labelledby="sidebar-heading" 
-      class="profile__sidebar p-sm" 
+    <div
+      class="profile__sidebar"
     >
-      <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)}
+      <aside class="profile__sidebar-content" aria-labelledby="profile-sidebar-heading">
+        <h2 id="profile-sidebar-heading" class="sr-only">Profile sidebar</h2>
+        ${(0, _SocialSection.renderSocialSection)(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>
+        ${(0, _QRCodeSection.renderQRCodeSection)(subject, store)}
+      </aside>
+    </div>
   `;
 }
 async function ProfileView(subject, context, onSaved) {
   const store = context.session.store;
   const viewerMode = getViewerMode(subject);
+  const layout = context.environment?.layout ?? 'desktop';
+  const theme = context.environment?.theme ?? 'light';
+  const inputMode = context.environment?.inputMode ?? 'pointer';
   const viewModel = await (0, _ProfileViewModelPresenter.presentProfileViewModel)(subject, store);
   const profileDetails = viewModel.profileDetails;
   const rolesByType = viewModel.cvDetails;
@@ -62,28 +55,63 @@ async function ProfileView(subject, context, onSaved) {
   const bioDetails = viewModel.bioDetails;
   const accounts = viewModel.social;
   const contactInfo = viewModel.contactInfo;
-  return (0, _litHtml.html)` 
-    <div class="profile-pane-root">
-      <main
+  const headingSection = await (0, _HeadingSection.renderHeadingSection)(context, subject, profileDetails, viewerMode, onSaved);
+  const bioSection = (0, _BioSection.renderBioSection)(store, subject, bioDetails, viewerMode, onSaved);
+  const skillsSection = (0, _SkillsSection.renderSkillsSection)(store, subject, skills, viewerMode, onSaved);
+  const languageSection = (0, _LanguageSection.renderLanguageSection)(store, subject, languages, viewerMode, onSaved);
+  const cvSection = (0, _ResumeSection.renderCVSection)(store, subject, rolesByType, viewerMode, onSaved);
+  const projectSection = (0, _ProjectSection.renderProjectSection)(store, subject, projects, viewerMode, onSaved);
+  const socialSection = (0, _SocialSection.renderSocialSection)(store, subject, accounts, viewerMode, onSaved);
+  const contactInfoSection = (0, _ContactInfoSection.renderContactInfoSection)(store, subject, contactInfo, viewerMode, onSaved);
+  const qrCodeSection = (0, _QRCodeSection.renderQRCodeSection)(subject, store);
+  if (layout === 'mobile') {
+    return (0, _litHtml.html)`
+      <div
+        class="profile-pane-root"
+        data-layout=${layout}
+        data-theme=${theme}
+        data-input-mode=${inputMode}
+      >
+        <main
+          id="main-content"
+          class="profile-grid"
+          tabindex="-1"
+        >
+          ${headingSection}
+          ${bioSection}
+          ${skillsSection}
+          ${languageSection}
+          ${cvSection}
+          ${projectSection}
+          ${socialSection}
+          ${contactInfoSection}
+          ${qrCodeSection}
+        </main>
+      </div>
+    `;
+  }
+  return (0, _litHtml.html)`
+    <div
+      class="profile-pane-root"
+      data-layout=${layout}
+      data-theme=${theme}
+      data-input-mode=${inputMode}
+    >
+      <div
         id="main-content"
         class="profile-grid"
         tabindex="-1"
-      > 
-        <h1 id="profile-content-heading" class="sr-only">Profile for ${profileDetails.name}</h1>
+      >
 
-        <section
-          class="profile__main flex-column gap-md p-sm"
-          >
-          <h2 id="profile-main-heading" class="sr-only">Main Profile Content</h2>
+        <section class="profile__main">
+          ${headingSection}
+          ${bioSection}
+          ${cvSection}
+          ${projectSection}
 
-          ${(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>
         ${renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, onSaved)}
-      </main>
+      </div>
     </div>
   `;
 }

package/lib/buttonsHelper.d.ts

@@ -1,6 +1,6 @@
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
-declare function complain(buttonContainer: HTMLDivElement, context: DataBrowserContext, error: string): void;
+declare function complain(buttonContainer: HTMLDivElement, context: DataBrowserContext, error: unknown): void;
 declare function mention(buttonContainer: HTMLDivElement, message: string): void;
 declare function clearPreviousMessage(buttonContainer: HTMLDivElement): void;
 declare function checkIfAnyUserLoggedIn(me: NamedNode): boolean;

package/lib/buttonsHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonsHelper.d.ts","sourceRoot":"","sources":["../src/buttonsHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,iBAAS,QAAQ,CACf,eAAe,EAAE,cAAc,EAC/B,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,MAAM,GACZ,IAAI,CAYN;AAED,iBAAS,OAAO,CAAC,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAcvE;AAED,iBAAS,oBAAoB,CAAC,eAAe,EAAE,cAAc,GAAG,IAAI,CAInE;AAED,iBAAS,sBAAsB,CAAC,EAAE,EAAE,SAAS,GAAG,OAAO,CAGtD;AAED,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAA"}
+{"version":3,"file":"buttonsHelper.d.ts","sourceRoot":"","sources":["../src/buttonsHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGlC,iBAAS,QAAQ,CACf,eAAe,EAAE,cAAc,EAC/B,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,OAAO,GACb,IAAI,CAYN;AAED,iBAAS,OAAO,CAAC,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAcvE;AAED,iBAAS,oBAAoB,CAAC,eAAe,EAAE,cAAc,GAAG,IAAI,CAInE;AAED,iBAAS,sBAAsB,CAAC,EAAE,EAAE,SAAS,GAAG,OAAO,CAGtD;AAED,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAA"}

package/lib/buttonsHelper.js

@@ -8,8 +8,9 @@ exports.clearPreviousMessage = clearPreviousMessage;
 exports.complain = complain;
 exports.mention = mention;
 var _solidUi = require("solid-ui");
+var _errorDisplay = require("./utils/errorDisplay");
 function complain(buttonContainer, context, error) {
-  const errorBlock = _solidUi.widgets.errorMessageBlock(context.dom, error);
+  const errorBlock = _solidUi.widgets.errorMessageBlock(context.dom, (0, _errorDisplay.formatDisplayError)(error));
   errorBlock.setAttribute('role', 'alert');
   errorBlock.setAttribute('aria-live', 'assertive');
   errorBlock.setAttribute('tabindex', '0');

package/lib/editProfilePane/EditCVCard.js

@@ -9,7 +9,7 @@ var _texts = require("../texts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* babel-plugin-inline-import '../ontology/resumeForm.ttl' */
 /** Project-local: currently unused component. Keep temporarily; do not add new usage. */
-const resumeForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n@prefix l: <https://www.w3.org/ns/iana/language-code/>.\n\n@prefix : <#>.\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n    a ui:Form ;\n    ui:parts (\n      :CVGroup\n      :SkillsHeading :SkillsForm\n      :LanguagesHeading :LanguagesForm\n      ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :ResumeHeading \n        :involvementWithOrganizationsForm \n    ).\n\n:ResumeHeading a ui:Heading; \n    ui:contents  \"Add your work experience\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n    ui:label \"work experience\";\n    ui:property org:member; \n    ui:reverse true; # link back from role to member\n    ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n    ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Work experience\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n    ui:weight 3; \n    ui:parts ( \n        :MembershipFormHeading\n        :RoleClassifier  \n        :roleNameField\n        :escoOccupationField \n        :orgField \n        :RoleDatesForm \n        :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n    ui:contents \"Details of the role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n    ui:label \"Job title\";\n    ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n    ui:label \"Find in occupation catalog\";\n    ui:property org:role;\n    ui:dataSource :ESCO_Occupation_DataSource;\n    ui:targetClass schema:Occupation .\n\n    :ESCO_Occupation_DataSource a ui:DataSource;\n        schema:name \"ESCO\";\n        ui:targetClass schema:Occupation ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n    ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n    ui:canMintNew true; \n    ui:use :OrganizationCreationForm ;\n    ui:property org:organization;\n    ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n    ui:label \"Job type\"@en;\n    ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n        [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n        [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n        [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n    :TwoDateForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( :StartDateForm :EndDateForm ) .\n    :StartDateForm a ui:DateField; \n        ui:label \"Start\"@en,\"D\xE9but\"@fr;\n        ui:property schema:startDate .\n    :EndDateForm a ui:DateField; \n        ui:label \"End\"@en,\"Fin\"@fr;\n        ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n    owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n    owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien r\xF4le\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"R\xF4le actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"R\xF4le \xE0 venir\"@fr, \"Zuk\xFCnftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n    ui:property schema:description;\n    ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n    schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( \n        :OrgClassifier \n        :OrganizationNameField\n        :OrgSwitch\n        :homePageURIField  ) .\n\n:OrgClassifier a ui:Classifier; \n    ui:label \"Type\"@en;\n    ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n    ui:dependingOn rdf:type;\n    ui:case\n        [ ui:for schema:Corporation; ui:use :CorporationForm ],\n        [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n        [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n        [ ui:for schema:Project; ui:use :ProjectForm ],\n        [ ui:for schema:NGO; ui:use :NGOForm ],\n        [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n        [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n        [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n    ui:label \"Homepage\"@en;\n    ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf  (\n    # Airline - a Corporation\n    # Consortium - a Corporation or a NGO\n    schema:Corporation\n    schema:EducationalOrganization\n    schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n    # FundingScheme - eh?\n    schema:GovernmentOrganization\n    # LibrarySystem\n    # LocalBusiness - Corporation\n    # MedicalOrganization - a Corporation or a NGO\n    schema:NGO\n    # NewsMediaOrganization - a Corporation or a NGO\n    schema:PerformingGroup # a band\n    schema:Project # like Solid\n    schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n    rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organizaci\xF3n de investigaci\xF3n\"@es, \n    \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n#####  Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :CorporationAutocomplete ) .\n\n    :CorporationAutocomplete a ui:AutocompleteField; \n        ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n        ui:property solid:publicId; \n        ui:dataSource :WikidataInstancesByName.\n\n        :WikidataInstancesByName a ui:DataSource ;\n            schema:name \"Wikidata instances by name\";\n            ui:endpoint \"https://query.wikidata.org/sparql\" ;\n            ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n            WHERE {\n                ?klass wdt:P279* $(targetClass) .\n                ?subject wdt:P31 ?klass .\n                ?subject rdfs:label ?name.\n                FILTER regex(?name, \"$(name)\", \"i\")\n            } LIMIT $(limit) \"\"\" ;\n\n            # Note this form of the query is very experimental\n            ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                ui:where { ?klass wdt:P279 ?targetClass .\n                            ?subject wdt:P31 ?klass; rdfs:label ?name .\n                            };\n            ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :GovernmentOrganizationAutocomplete ) .\n\n    :GovernmentOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n            ui:property solid:publicId; \n            ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :EducationalOrganizationAutocomplete ) .\n\n    :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n                ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n                ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ResearchOrganizationAutocomplete ) .\n\n    :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n    ui:parts ( \n        :NGOAutocomplete ) .\n\n    :NGOAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :PerformingGroupAutocomplete ) .\n\n    :PerformingGroupAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n    :ProjectAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n    :SportsOrganizationForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( \n            :SportsOrganizationAutocomplete ) .\n\n    :SportsOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n    ui:contents  \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n    ui:label \"skill\";\n    ui:property schema:skills;\n    ui:ordered false; # Allow reader to order skills\n    ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n    :escoSkillField a ui:AutocompleteField;\n            ui:label \"Find in skills catalog\";\n            ui:property solid:publicId;\n            ui:dataSource :ESCO_Skill_DataSource;\n            ui:targetClass schema:Skill .\n\n    :ESCO_Skill_DataSource a ui:DataSource;\n        schema:name \"ESCO skill\";\n        ui:targetClass esco:Skill ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents  \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"language\";\n    ui:property schema:knowsLanguage; \n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\";\n          ui:property solid:publicId; \n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Find in wikidata\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n        ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n            WHERE\n            { ?item wdt:P305 ?subject .\n            OPTIONAL {?item rdfs:label ?name}\n            OPTIONAL {?item wdt:P1705 ?name}\n            FILTER regex(?name, \"$(name)\", \"i\")\n            FILTER regex(?subject, \"^..$\", \"i\")\n            }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
+const resumeForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n@prefix l: <https://www.w3.org/ns/iana/language-code/>.\n\n@prefix : <#>.\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n    a ui:Form ;\n    ui:parts (\n      :CVGroup\n      :SkillsHeading :SkillsForm\n      :LanguagesHeading :LanguagesForm\n      ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :ResumeHeading \n        :involvementWithOrganizationsForm \n    ).\n\n:ResumeHeading a ui:Heading; \n    ui:contents  \"Add your work experience\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n    ui:label \"work experience\";\n    ui:property org:member; \n    ui:reverse true; # link back from role to member\n    ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n    ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Work experience\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n    ui:weight 3; \n    ui:parts ( \n        :MembershipFormHeading\n        :RoleClassifier  \n        :roleNameField\n        :escoOccupationField \n        :orgField \n        :RoleDatesForm \n        :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n    ui:contents \"Details of the role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n    ui:label \"Job title\";\n    ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n    ui:label \"Find in occupation catalog\";\n    ui:property org:role;\n    ui:dataSource :ESCO_Occupation_DataSource;\n    ui:targetClass schema:Occupation .\n\n    :ESCO_Occupation_DataSource a ui:DataSource;\n        schema:name \"ESCO\";\n        ui:targetClass schema:Occupation ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)&selectedVersion=v1.2.0\".\n\n:orgField a ui:Choice; \n    ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n    ui:canMintNew true; \n    ui:use :OrganizationCreationForm ;\n    ui:property org:organization;\n    ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n    ui:label \"Job type\"@en;\n    ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n        [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n        [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n        [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n    :TwoDateForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( :StartDateForm :EndDateForm ) .\n    :StartDateForm a ui:DateField; \n        ui:label \"Start\"@en,\"D\xE9but\"@fr;\n        ui:property schema:startDate .\n    :EndDateForm a ui:DateField; \n        ui:label \"End\"@en,\"Fin\"@fr;\n        ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n    owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n    owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien r\xF4le\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"R\xF4le actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"R\xF4le \xE0 venir\"@fr, \"Zuk\xFCnftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n    ui:property schema:description;\n    ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n    schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( \n        :OrgClassifier \n        :OrganizationNameField\n        :OrgSwitch\n        :homePageURIField  ) .\n\n:OrgClassifier a ui:Classifier; \n    ui:label \"Type\"@en;\n    ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n    ui:dependingOn rdf:type;\n    ui:case\n        [ ui:for schema:Corporation; ui:use :CorporationForm ],\n        [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n        [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n        [ ui:for schema:Project; ui:use :ProjectForm ],\n        [ ui:for schema:NGO; ui:use :NGOForm ],\n        [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n        [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n        [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n    ui:label \"Homepage\"@en;\n    ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf  (\n    # Airline - a Corporation\n    # Consortium - a Corporation or a NGO\n    schema:Corporation\n    schema:EducationalOrganization\n    schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n    # FundingScheme - eh?\n    schema:GovernmentOrganization\n    # LibrarySystem\n    # LocalBusiness - Corporation\n    # MedicalOrganization - a Corporation or a NGO\n    schema:NGO\n    # NewsMediaOrganization - a Corporation or a NGO\n    schema:PerformingGroup # a band\n    schema:Project # like Solid\n    schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n    rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organizaci\xF3n de investigaci\xF3n\"@es, \n    \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n#####  Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :CorporationAutocomplete ) .\n\n    :CorporationAutocomplete a ui:AutocompleteField; \n        ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n        ui:property solid:publicId; \n        ui:dataSource :WikidataInstancesByName.\n\n        :WikidataInstancesByName a ui:DataSource ;\n            schema:name \"Wikidata instances by name\";\n            ui:endpoint \"https://query.wikidata.org/sparql\" ;\n            ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n            WHERE {\n                ?klass wdt:P279* $(targetClass) .\n                ?subject wdt:P31 ?klass .\n                ?subject rdfs:label ?name.\n                FILTER regex(?name, \"$(name)\", \"i\")\n            } LIMIT $(limit) \"\"\" ;\n\n            # Note this form of the query is very experimental\n            ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                ui:where { ?klass wdt:P279 ?targetClass .\n                            ?subject wdt:P31 ?klass; rdfs:label ?name .\n                            };\n            ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :GovernmentOrganizationAutocomplete ) .\n\n    :GovernmentOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n            ui:property solid:publicId; \n            ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :EducationalOrganizationAutocomplete ) .\n\n    :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n                ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n                ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ResearchOrganizationAutocomplete ) .\n\n    :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n    ui:parts ( \n        :NGOAutocomplete ) .\n\n    :NGOAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :PerformingGroupAutocomplete ) .\n\n    :PerformingGroupAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n    :ProjectAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n    :SportsOrganizationForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( \n            :SportsOrganizationAutocomplete ) .\n\n    :SportsOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n    ui:contents  \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n    ui:label \"skill\";\n    ui:property schema:skills;\n    ui:ordered false; # Allow reader to order skills\n    ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n    :escoSkillField a ui:AutocompleteField;\n            ui:label \"Find in skills catalog\";\n            ui:property solid:publicId;\n            ui:dataSource :ESCO_Skill_DataSource;\n            ui:targetClass schema:Skill .\n\n    :ESCO_Skill_DataSource a ui:DataSource;\n        schema:name \"ESCO skill\";\n        ui:targetClass esco:Skill ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)&selectedVersion=v1.2.0\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents  \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"language\";\n    ui:property schema:knowsLanguage; \n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\";\n          ui:property solid:publicId; \n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Find in wikidata\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n        ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n            WHERE\n            { ?item wdt:P305 ?subject .\n            OPTIONAL {?item rdfs:label ?name}\n            OPTIONAL {?item wdt:P1705 ?name}\n            FILTER regex(?name, \"$(name)\", \"i\")\n            FILTER regex(?subject, \"^..$\", \"i\")\n            }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
 const resumeFormName = 'resumeForm.ttl'; // The name of the form file
 
 function EditCVSection(context, me, editableProfile, store) {

package/lib/editProfilePane/EditCommunitiesCard.js

@@ -9,7 +9,7 @@ var _texts = require("../texts");
 var _solidLogic = require("solid-logic");
 require("../styles/editProfile.css");
 var _buttonsHelper = require("../buttonsHelper");
-var _addMeToYourFriends = require("../addMeToYourFriends");
+var _addMeToYourFriends = require("../specialButtons/addMeToYourFriends");
 var _editProfilePresenter = require("./editProfilePresenter");
 /** Project-local: currently unused component. Keep temporarily; do not add new usage. */
 

package/lib/editProfilePane/EditFriendsCard.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EditFriendsSection = EditFriendsSection;
 var _solidUi = require("solid-ui");
 var _texts = require("../texts");
-var _addMeToYourFriends = require("../addMeToYourFriends");
+var _addMeToYourFriends = require("../specialButtons/addMeToYourFriends");
 require("../styles/editProfile.css");
 var _solidLogic = require("solid-logic");
 var _buttonsHelper = require("../buttonsHelper");

package/lib/editProfilePane/EditProfileView.d.ts

@@ -9,7 +9,7 @@
  * or standalone script adding onto existing mashlib.
  */
 import { PaneDefinition } from 'pane-registry';
-import '../styles/utilities.css';
+import '../ProfileView.css';
 declare const editProfileView: PaneDefinition;
 export default editProfileView;
 //# sourceMappingURL=EditProfileView.d.ts.map

package/lib/editProfilePane/EditProfileView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditProfileView.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditProfileView.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF;;;;;;;;GAQG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAO9C,OAAO,yBAAyB,CAAA;AAKhC,QAAA,MAAM,eAAe,EAAE,cAuGtB,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"EditProfileView.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditProfileView.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF;;;;;;;;GAQG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAO9C,OAAO,oBAAoB,CAAA;AAK3B,QAAA,MAAM,eAAe,EAAE,cAsGtB,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/editProfilePane/EditProfileView.js

@@ -9,7 +9,7 @@ var _EditContactsCard = require("./EditContactsCard");
 var _EditFriendsCard = require("./EditFriendsCard");
 var _EditSocialCard = require("./EditSocialCard");
 var _EditCommunitiesCard = require("./EditCommunitiesCard");
-require("../styles/utilities.css");
+require("../ProfileView.css");
 var _EditCVCard = require("./EditCVCard");
 var _EditOtherPreferences = require("./EditOtherPreferences");
 var _rdfFormsHelper = require("../rdfFormsHelper");
@@ -31,8 +31,7 @@ const editProfileView = {
   label: () => null,
   // don't use this in the normal solid-panes dispatching
 
-  render: function (subject, context) {
-    //console.log('@@@ render edit profile pane:  subject, context', subject, context)
+  render: function (_subject, context) {
     const dom = context.dom;
     const store = context.session.store;
 
@@ -43,8 +42,8 @@ const editProfileView = {
     div.setAttribute('aria-label', 'Edit your profile');
     let editableProfile;
 
-    // Use <main> for the main content area, styled as a grid like ProfileView
-    const main = dom.createElement('main');
+    // Pane root content. The page-level <main> landmark is on the shell's #MainContent.
+    const main = dom.createElement('div');
     main.setAttribute('id', 'profile-edit-main-content');
     main.setAttribute('aria-busy', 'true');
     main.setAttribute('tabindex', '-1');

package/lib/editProfilePane/editProfilePresenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editProfilePresenter.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/editProfilePresenter.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,OAAO,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAMvC,wBAAgB,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,eAAe,EAAE,gBAAgB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,QAmB/I;AAiFD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,SAAS,GAAG,OAAO,CAMpD"}
+{"version":3,"file":"editProfilePresenter.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/editProfilePresenter.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,OAAO,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAOvC,wBAAgB,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,eAAe,EAAE,gBAAgB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,QAmB/I;AAiFD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,SAAS,GAAG,OAAO,CAMpD"}

package/lib/editProfilePane/editProfilePresenter.js

@@ -8,6 +8,7 @@ exports.refresh = refresh;
 var _rdflib = require("rdflib");
 var _solidLogic = require("solid-logic");
 var _solidUi = require("solid-ui");
+var _debug = require("../utils/debug");
 /** Project-local: currently unused component. Keep temporarily; do not add new usage. */
 
 const DEFAULT_ICON_URI = _solidUi.icons.iconBase + 'noun_10636_grey.svg'; // grey disc
@@ -64,7 +65,7 @@ async function deleteAttachment(dom, attachmentTable, me, editableProfile, targe
   // Delete the exact statements in the store so we don't rely on doc() matching
   const statementsToDelete = _solidLogic.store.statementsMatching(me, predicate, target, null);
   if (!statementsToDelete.length) {
-    console.warn('No matching statement found to delete for', target.value);
+    (0, _debug.warn)('No matching statement found to delete for', target.value);
     refresh(dom, attachmentTable, me, editableProfile, predicate);
     return;
   }
@@ -77,7 +78,7 @@ async function deleteAttachment(dom, attachmentTable, me, editableProfile, targe
       if (stillThere) {
         try {
           _solidLogic.store.removeStatements(statementsToDelete);
-        } catch (e) {
+        } catch (_error) {
           // Ignore if already gone
         }
       }
@@ -87,13 +88,13 @@ async function deleteAttachment(dom, attachmentTable, me, editableProfile, targe
     if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
     refresh(dom, attachmentTable, me, editableProfile, predicate);
   } catch (error) {
-    console.error('Error deleting:', error);
+    (0, _debug.error)('Error deleting:', error);
 
     // If update failed, try to keep UI in sync anyway
     if (typeof _solidLogic.store.removeStatements === 'function') {
       try {
         _solidLogic.store.removeStatements(statementsToDelete);
-      } catch (e) {
+      } catch (_error) {
         /* ignore */
       }
     }

package/lib/icons-svg/profileIcons.d.ts

@@ -3,11 +3,11 @@ export declare const locationIcon: import("lit-html").TemplateResult<1>;
 export declare const checkMarkIcon: import("lit-html").TemplateResult<1>;
 export declare const plusDarkIcon: import("lit-html").TemplateResult<1>;
 export declare const plusIcon: import("lit-html").TemplateResult<1>;
-export declare const searchIcon: import("lit-html").TemplateResult<1>;
 export declare const trashIcon: import("lit-html").TemplateResult<1>;
 export declare const bentoIcon: import("lit-html").TemplateResult<1>;
 export declare const starIcon: import("lit-html").TemplateResult<1>;
 export declare const addIcon: import("lit-html").TemplateResult<1>;
+export declare const chevronDownIcon: import("lit-html").TemplateResult<1>;
 export declare const personInCircleIcon: import("lit-html").TemplateResult<1>;
 export declare const globeIcon: import("lit-html").TemplateResult<1>;
 export declare const lighteningIcon: import("lit-html").TemplateResult<1>;

package/lib/icons-svg/profileIcons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profileIcons.d.ts","sourceRoot":"","sources":["../../src/icons-svg/profileIcons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,sCAoBxB,CAAA;AACD,eAAO,MAAM,YAAY,sCAYxB,CAAA;AACD,eAAO,MAAM,aAAa,sCAWzB,CAAA;AACD,eAAO,MAAM,YAAY,sCAYxB,CAAA;AAED,eAAO,MAAM,QAAQ,sCAkBpB,CAAA;AACD,eAAO,MAAM,UAAU,sCAYtB,CAAA;AACD,eAAO,MAAM,SAAS,sCAerB,CAAA;AACD,eAAO,MAAM,SAAS,sCAgBrB,CAAA;AACD,eAAO,MAAM,QAAQ,sCAYpB,CAAA;AACD,eAAO,MAAM,OAAO,sCAkBnB,CAAA;AACD,eAAO,MAAM,kBAAkB,sCAa9B,CAAA;AACD,eAAO,MAAM,SAAS,sCAarB,CAAA;AACD,eAAO,MAAM,cAAc,sCAiB1B,CAAA;AACD,eAAO,MAAM,WAAW,sCAWvB,CAAA;AACD,eAAO,MAAM,YAAY,sCAYxB,CAAA;AACD,eAAO,MAAM,SAAS,sCAWrB,CAAA;AAED,eAAO,MAAM,SAAS,sCAWrB,CAAA;AAED,eAAO,MAAM,QAAQ,sCAWpB,CAAA;AACD,eAAO,MAAM,UAAU,sCAYtB,CAAA;AACD,eAAO,MAAM,UAAU,sCAYtB,CAAA;AAED,eAAO,MAAM,iBAAiB,sCAY7B,CAAA"}
+{"version":3,"file":"profileIcons.d.ts","sourceRoot":"","sources":["../../src/icons-svg/profileIcons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,sCAoBxB,CAAA;AACD,eAAO,MAAM,YAAY,sCAYxB,CAAA;AACD,eAAO,MAAM,aAAa,sCAWzB,CAAA;AACD,eAAO,MAAM,YAAY,sCAYxB,CAAA;AAED,eAAO,MAAM,QAAQ,sCAkBpB,CAAA;AACD,eAAO,MAAM,SAAS,sCAerB,CAAA;AACD,eAAO,MAAM,SAAS,sCAgBrB,CAAA;AACD,eAAO,MAAM,QAAQ,sCAYpB,CAAA;AACD,eAAO,MAAM,OAAO,sCAkBnB,CAAA;AAED,eAAO,MAAM,eAAe,sCAI3B,CAAA;AACD,eAAO,MAAM,kBAAkB,sCAa9B,CAAA;AACD,eAAO,MAAM,SAAS,sCAarB,CAAA;AACD,eAAO,MAAM,cAAc,sCAiB1B,CAAA;AACD,eAAO,MAAM,WAAW,sCAWvB,CAAA;AACD,eAAO,MAAM,YAAY,sCAYxB,CAAA;AACD,eAAO,MAAM,SAAS,sCAWrB,CAAA;AAED,eAAO,MAAM,SAAS,sCAWrB,CAAA;AAED,eAAO,MAAM,QAAQ,sCAWpB,CAAA;AACD,eAAO,MAAM,UAAU,sCAYtB,CAAA;AACD,eAAO,MAAM,UAAU,sCAYtB,CAAA;AAED,eAAO,MAAM,iBAAiB,sCAY7B,CAAA"}

package/lib/icons-svg/profileIcons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.twoDownArrowsIcon = exports.trashIcon = exports.starIcon = exports.searchIcon = exports.plusIcon = exports.plusDarkIcon = exports.personInCircleIcon = exports.pasteIcon = exports.locationIcon = exports.lighteningIcon = exports.globeIcon = exports.envelopeIcon = exports.editIcon = exports.deleteIcon = exports.commentIcon = exports.closeIcon = exports.checkMarkIcon = exports.cameraIcon = exports.birthdayIcon = exports.bentoIcon = exports.addIcon = void 0;
+exports.twoDownArrowsIcon = exports.trashIcon = exports.starIcon = exports.plusIcon = exports.plusDarkIcon = exports.personInCircleIcon = exports.pasteIcon = exports.locationIcon = exports.lighteningIcon = exports.globeIcon = exports.envelopeIcon = exports.editIcon = exports.deleteIcon = exports.commentIcon = exports.closeIcon = exports.chevronDownIcon = exports.checkMarkIcon = exports.cameraIcon = exports.birthdayIcon = exports.bentoIcon = exports.addIcon = void 0;
 var _litHtml = require("lit-html");
 const birthdayIcon = exports.birthdayIcon = (0, _litHtml.html)`
   <svg
@@ -83,19 +83,6 @@ const plusIcon = exports.plusIcon = (0, _litHtml.html)`
     </defs>
   </svg>
 `;
-const searchIcon = exports.searchIcon = (0, _litHtml.html)`
-  <svg xmlns="http://www.w3.org/2000/svg" 
-    width="13" 
-    height="13" 
-    viewBox="0 0 13 13" 
-    fill="none"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <circle cx="5.5" cy="5.5" r="4.5" stroke="#99A1AF" stroke-width="1.2" fill="none"/>
-    <path d="M9.1 9.1L12 12" stroke="#99A1AF" stroke-width="1.2" stroke-linecap="round"/>
-  </svg>
-`;
 const trashIcon = exports.trashIcon = (0, _litHtml.html)`
   <svg xmlns="http://www.w3.org/2000/svg" 
     width="20" 
@@ -161,6 +148,11 @@ const addIcon = exports.addIcon = (0, _litHtml.html)`
     </defs>
   </svg>
 `;
+const chevronDownIcon = exports.chevronDownIcon = (0, _litHtml.html)`
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none" aria-hidden="true" focusable="false">
+    <path d="M10.1831 0.183058C10.4271 -0.061018 10.8228 -0.061015 11.0668 0.183058C11.3109 0.427136 11.3109 0.82277 11.0668 1.06685L6.06685 6.06685C5.82277 6.31093 5.42714 6.31093 5.18306 6.06685L0.183058 1.06685C-0.0610194 0.82277 -0.0610194 0.427136 0.183058 0.183058C0.427136 -0.0610194 0.82277 -0.0610194 1.06685 0.183058L5.62495 4.74116L10.1831 0.183058Z" fill="#6A7282"/>
+  </svg>
+`;
 const personInCircleIcon = exports.personInCircleIcon = (0, _litHtml.html)`
   <svg xmlns="http://www.w3.org/2000/svg" 
     width="64" 
@@ -258,9 +250,9 @@ const closeIcon = exports.closeIcon = (0, _litHtml.html)`
 `;
 const editIcon = exports.editIcon = (0, _litHtml.html)`
   <svg xmlns="http://www.w3.org/2000/svg" 
-    width="20" 
-    height="20" 
-    viewBox="0 0 20 20" 
+    width="14" 
+    height="14" 
+    viewBox="3 3 14 14" 
     fill="none"
     aria-hidden="true" 
     focusable="false"

package/lib/index.d.ts

@@ -1,13 +1,6 @@
 import { DataBrowserContext } from 'pane-registry';
-import './styles/CVCard.css';
-import './styles/ChatWithMe.css';
-import './styles/ProfileCard.css';
-import './styles/ProfileView.css';
-import './styles/QRCodeCard.css';
-import './styles/SocialCard.css';
-import './styles/utilities.css';
 import { NamedNode } from 'rdflib';
-export { addMeToYourFriendsDiv, createAddMeToYourFriendsButton, saveNewThing, checkIfThingExists } from './addMeToYourFriends';
+export { addMeToYourFriendsDiv, createAddMeToYourFriendsButton, saveNewThing, checkIfThingExists } from './specialButtons/addMeToYourFriends';
 declare const Pane: {
     global: boolean;
     icon: string;

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,qBAAqB,CAAA;AAC5B,OAAO,yBAAyB,CAAA;AAChC,OAAO,0BAA0B,CAAA;AACjC,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAChC,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAK7C,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,MAAM,sBAAsB,CAAA;AAe7B,QAAA,MAAM,IAAI;;;;qBAKG,SAAS,WACT,kBAAkB,KAC1B,MAAM,GAAG,IAAI;sBAWE,SAAS,WAAW,kBAAkB,KAAG,WAAW;CA4CvE,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAK7C,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,MAAM,qCAAqC,CAAA;AAsG5C,QAAA,MAAM,IAAI;;;;qBAKG,SAAS,WACT,kBAAkB,KAC1B,MAAM,GAAG,IAAI;sBAWE,SAAS,WAAW,kBAAkB,KAAG,WAAW;CAqBvE,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/index.js

@@ -28,25 +28,81 @@ Object.defineProperty(exports, "saveNewThing", {
     return _addMeToYourFriends.saveNewThing;
   }
 });
-require("./styles/CVCard.css");
-require("./styles/ChatWithMe.css");
-require("./styles/ProfileCard.css");
-require("./styles/ProfileView.css");
-require("./styles/QRCodeCard.css");
-require("./styles/SocialCard.css");
-require("./styles/utilities.css");
 var _litHtml = require("lit-html");
-var _ProfileView2 = require("./ProfileView");
+var _ProfileView = require("./ProfileView");
 var _solidUi = require("solid-ui");
-var qrcode = _interopRequireWildcard(require("qrcode"));
-var _addMeToYourFriends = require("./addMeToYourFriends");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _QRCodeCard = require("./sections/qrcode/QRCodeCard");
+var _addMeToYourFriends = require("./specialButtons/addMeToYourFriends");
 async function loadExtendedProfile(store, subject) {
   const otherProfiles = store.each(subject, _solidUi.ns.rdfs('seeAlso'), null, subject.doc());
   if (otherProfiles.length > 0) {
     await store.fetcher.load(otherProfiles);
   }
 }
+const HEADING_SECTION_SELECTOR = '[data-profile-section="heading"]';
+const SOCIAL_SECTION_SELECTOR = '[data-profile-section="social"]';
+function syncSocialSectionHeight(root) {
+  let animationFrameId = 0;
+  const updateHeight = () => {
+    animationFrameId = 0;
+    const grid = root.querySelector('.profile-grid');
+    const headingSection = root.querySelector(HEADING_SECTION_SELECTOR);
+    const socialSection = root.querySelector(SOCIAL_SECTION_SELECTOR);
+    if (!grid || !headingSection || !socialSection) {
+      return;
+    }
+    const isDesktopGrid = root.dataset.layout !== 'mobile' && getComputedStyle(grid).display === 'grid';
+    if (!isDesktopGrid) {
+      socialSection.style.removeProperty('min-height');
+      return;
+    }
+    const nextMinHeight = `${Math.ceil(headingSection.getBoundingClientRect().height)}px`;
+    if (socialSection.style.minHeight !== nextMinHeight) {
+      socialSection.style.minHeight = nextMinHeight;
+    }
+  };
+  const scheduleUpdate = () => {
+    if (animationFrameId !== 0) {
+      return;
+    }
+    animationFrameId = window.requestAnimationFrame(updateHeight);
+  };
+  updateHeight();
+  if (typeof ResizeObserver === 'undefined') {
+    window.addEventListener('resize', scheduleUpdate);
+    return () => {
+      if (animationFrameId !== 0) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+      window.removeEventListener('resize', scheduleUpdate);
+    };
+  }
+  const resizeObserver = new ResizeObserver(scheduleUpdate);
+  resizeObserver.observe(root);
+  const headingSection = root.querySelector(HEADING_SECTION_SELECTOR);
+  const socialSection = root.querySelector(SOCIAL_SECTION_SELECTOR);
+  if (headingSection) {
+    resizeObserver.observe(headingSection);
+  }
+  if (socialSection) {
+    resizeObserver.observe(socialSection);
+  }
+  return () => {
+    if (animationFrameId !== 0) {
+      window.cancelAnimationFrame(animationFrameId);
+    }
+    resizeObserver.disconnect();
+  };
+}
+function applyEnvironmentAttributes(element, context) {
+  const layout = context.environment?.layout ?? 'desktop';
+  const theme = context.environment?.theme ?? 'light';
+  const inputMode = context.environment?.inputMode ?? 'pointer';
+  element.classList.add('profile-pane-host');
+  element.dataset.layout = layout;
+  element.dataset.theme = theme;
+  element.dataset.inputMode = inputMode;
+}
 const Pane = {
   global: false,
   icon: _solidUi.icons.iconBase + 'noun_15059.svg',
@@ -61,36 +117,14 @@ const Pane = {
   render: (subject, context) => {
     const target = context.dom.createElement('div');
     const store = context.session.store;
+    let cleanupSocialSectionHeightSync = null;
+    applyEnvironmentAttributes(target, context);
     const renderWithData = async () => {
-      (0, _litHtml.render)(await (0, _ProfileView2.ProfileView)(subject, context, renderWithData), target);
-      const QRCodeEles = Array.from(target.getElementsByClassName('qrcode-card'));
-      if (!QRCodeEles.length) return console.error('QRCode Ele missing');
-      for (const QRCodeElement of QRCodeEles) {
-        const value = QRCodeElement.getAttribute('data-value');
-        if (!value) return console.error('QRCode data-value missing');
-        const options = {
-          type: 'svg',
-          color: {
-            dark: '#000000',
-            light: '#ffffff'
-          }
-        };
-        qrcode.toString(value, options, function (error, svg) {
-          if (error) {
-            console.error('QRcode error!', error);
-          } else {
-            const imageContainer = QRCodeElement.querySelector('div[role="img"]');
-            if (!imageContainer) {
-              console.error('QRCode image container missing');
-              return;
-            }
-            imageContainer.innerHTML = svg;
-            imageContainer.style.width = '100%';
-            imageContainer.style.height = '100%';
-            imageContainer.style.margin = '0';
-          }
-        });
-      }
+      applyEnvironmentAttributes(target, context);
+      (0, _litHtml.render)(await (0, _ProfileView.ProfileView)(subject, context, renderWithData), target);
+      cleanupSocialSectionHeightSync?.();
+      cleanupSocialSectionHeightSync = syncSocialSectionHeight(target);
+      await (0, _QRCodeCard.hydrateQRCodes)(target);
     };
     loadExtendedProfile(store, subject).then(async () => {
       await renderWithData();