profile-pane 3.2.0 → 3.2.2-test.0

package/lib/rdfFormsHelper.d.ts

@@ -1,4 +1,16 @@
-/** Project-local: currently unused component. Keep temporarily; do not add new usage. */
+/**
+ * Solid-UI form bridge used by the edit-profile flows and by shared helpers that
+ * need ontology/form documents loaded into an RDF store.
+ *
+ * This file is intentionally kept in src because it is still active production
+ * code, even though the main form rendering path is currently concentrated in
+ * editProfilePane. In particular:
+ * - editProfilePane imports renderForm and skipLabelsFromTabbing
+ * - social helpers import loadDocument for ontology-backed option loading
+ *
+ * If forms are reworked later, this module is the current integration boundary
+ * to replace rather than dormant legacy code to remove blindly.
+ */
 import { NamedNode, Store } from 'rdflib';
 export default function renderForm(div: HTMLElement, subject: NamedNode, // Represents the RDF that fills the form
 formSource: string, // The imported form Turtle source

package/lib/rdfFormsHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rdfFormsHelper.d.ts","sourceRoot":"","sources":["../src/rdfFormsHelper.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAyB,MAAM,QAAQ,CAAA;AAKhE,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,SAAS,EAAE,yCAAyC;AAC7D,UAAU,EAAE,MAAM,EAAE,kCAAkC;AACtD,QAAQ,EAAE,MAAM,EAAI,sDAAsD;AAC1E,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,eAAe,EAAE,SAAS,GAAG,IAAI,EACjC,SAAS,CAAC,EAAE,MAAM,QAqFjB;AA0DH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,WAAW,CAAC,EAAE,MAAM,QAUrB;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA2B7D"}
+{"version":3,"file":"rdfFormsHelper.d.ts","sourceRoot":"","sources":["../src/rdfFormsHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAyB,MAAM,QAAQ,CAAA;AAKhE,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,SAAS,EAAE,yCAAyC;AAC7D,UAAU,EAAE,MAAM,EAAE,kCAAkC;AACtD,QAAQ,EAAE,MAAM,EAAI,sDAAsD;AAC1E,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,eAAe,EAAE,SAAS,GAAG,IAAI,EACjC,SAAS,CAAC,EAAE,MAAM,QAqFjB;AA0DH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,WAAW,CAAC,EAAE,MAAM,QAUrB;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA2B7D"}

package/lib/rdfFormsHelper.js

@@ -8,7 +8,19 @@ exports.loadDocument = loadDocument;
 exports.skipLabelsFromTabbing = skipLabelsFromTabbing;
 var _rdflib = require("rdflib");
 var _solidUi = require("solid-ui");
-/** Project-local: currently unused component. Keep temporarily; do not add new usage. */
+/**
+ * Solid-UI form bridge used by the edit-profile flows and by shared helpers that
+ * need ontology/form documents loaded into an RDF store.
+ *
+ * This file is intentionally kept in src because it is still active production
+ * code, even though the main form rendering path is currently concentrated in
+ * editProfilePane. In particular:
+ * - editProfilePane imports renderForm and skipLabelsFromTabbing
+ * - social helpers import loadDocument for ontology-backed option loading
+ *
+ * If forms are reworked later, this module is the current integration boundary
+ * to replace rather than dormant legacy code to remove blindly.
+ */
 
 const baseUri = 'https://solidos.github.io/profile-pane/src/ontology/';
 function renderForm(div, subject,

package/lib/sections/bio/BioEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BioEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/BioEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAU,MAAM,SAAS,CAAA;AACjD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA2FxC,wBAAsB,mBAAmB,CACvC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAqCrC"}
+{"version":3,"file":"BioEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/BioEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAU,MAAM,SAAS,CAAA;AACjD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4FxC,wBAAsB,mBAAmB,CACvC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAqCrC"}

package/lib/sections/bio/BioEditDialog.js

@@ -71,7 +71,7 @@ function renderBioEditTemplate(form, formState, viewerMode) {
 }
 function createBioEditForm(bioData, viewerMode) {
   const form = document.createElement('form');
-  form.classList.add('profile__edit-form');
+  form.classList.add('profile__edit-form', 'profile__edit-form--bio');
   const formState = toFormState(bioData);
   renderBioEditTemplate(form, formState, viewerMode);
   return {
@@ -86,7 +86,7 @@ async function createBioEditDialog(event, store, subject, bioData, viewerMode, o
     formState
   } = createBioEditForm(bioData, viewerMode);
   const result = await (0, _dialog.openInputDialog)({
-    title: 'Edit Bio',
+    title: _texts.editBioDialogTitleText,
     dom,
     form,
     headerAction: {
@@ -94,13 +94,14 @@ async function createBioEditDialog(event, store, subject, bioData, viewerMode, o
     },
     submitLabel: _texts.dialogSubmitLabelText,
     cancelLabel: _texts.dialogCancelLabelText,
+    shouldCloseWithoutSave: () => {
+      const bioOps = (0, _rowState.summarizeRowOps)([formState.bio], rowHasContent);
+      return bioOps.create.length === 0 && bioOps.update.length === 0 && bioOps.remove.length === 0;
+    },
     validate: () => {
       if (viewerMode !== 'owner') {
         return _texts.ownerLoginRequiredDialogMessageText;
       }
-      const bioOps = (0, _rowState.summarizeRowOps)([formState.bio], rowHasContent);
-      const hasChanges = bioOps.create.length > 0 || bioOps.update.length > 0 || bioOps.remove.length > 0;
-      if (!hasChanges) return 'No bio changes detected.';
       return null;
     },
     onSave: async () => {
@@ -108,8 +109,7 @@ async function createBioEditDialog(event, store, subject, bioData, viewerMode, o
       await (0, _mutations.processBioMutations)(store, subject, bioOps);
     },
     formatSaveError: error => {
-      const message = error instanceof Error ? error.message : String(error);
-      return `${_texts.saveBioUpdatesFailedPrefixText} ${message}`;
+      return error instanceof Error ? error.message : _texts.saveBioUpdatesFailedMessageText;
     }
   });
   if (!result) return;

package/lib/sections/bio/BioSection.css

@@ -0,0 +1,300 @@
+.bio-card,
+.bio-card__section {
+	width: 100%;
+	max-width: 100%;
+	min-width: 0;
+	box-sizing: border-box;
+}
+
+.profile-grid [data-profile-section='bio'].profile__section,
+.profile-grid [data-profile-section='bio'].profile__section--empty {
+	--bio-section-content-gap-desktop: var(--spacing-lg, 1.5625rem);
+	--bio-section-content-gap-mobile: var(--spacing-sm, 0.9375rem);
+}
+
+.bio-card__description-wrap {
+	margin: 0;
+	position: relative;
+	isolation: isolate;
+	--bio-description-toggle-top: calc(100% - 1.5em + 0.28em - 11px);
+	--bio-description-toggle-transform: translateY(7px);
+}
+
+.bio-section__edit-button,
+solid-ui-button.bio-section__edit-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.bio-section--empty {
+	border-radius: var(--border-radius-md, 0.5rem);
+	gap: var(--bio-section-content-gap-desktop);
+}
+
+.profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
+	margin-top: var(--bio-section-content-gap-desktop);
+}
+
+.profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
+	gap: var(--spacing-2xs, 0.625rem);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-section--empty {
+	gap: var(--bio-section-content-gap-mobile);
+}
+
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
+	margin-top: var(--bio-section-content-gap-mobile);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
+	gap: var(--bio-section-content-gap-mobile);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-section__edit-button.profile-section-collapsible__edit-button,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button {
+	min-width: var(--min-touch-target, 44px);
+	min-height: var(--min-touch-target, 44px);
+	--button-width-sm: var(--min-touch-target, 44px);
+	--button-height-sm: var(--min-touch-target, 44px);
+	--button-background: transparent;
+	--button-border-width: 0;
+	--button-border: transparent;
+	--button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+	--button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+	--button-hover-border: transparent;
+	--button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
+	width: var(--min-touch-target, 44px);
+	min-width: var(--min-touch-target, 44px);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus-visible {
+	background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+	text-decoration: none;
+}
+
+.bio-card__description-text {
+	margin: 0;
+	width: 100%;
+	max-width: none;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	line-height: var(--line-height-base, 1.5);
+	overflow: hidden;
+}
+
+.bio-card__description-text--overflowing {
+	padding-right: 4.5rem;
+}
+
+.bio-card__description-text--expanded {
+	display: block;
+	-webkit-line-clamp: unset;
+	line-clamp: unset;
+	padding-right: 0;
+	overflow: visible;
+}
+
+.bio-card__description-toggle,
+solid-ui-button.bio-card__description-toggle {
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	background-color: var(--color-card-bg, #FFFFFF);
+	white-space: nowrap;
+	z-index: 0;
+}
+
+.bio-card__description-toggle {
+	border: 0;
+	background: none;
+	color: var(--color-primary, #7C4DFF);
+	cursor: var(--profile-interactive-cursor, pointer);
+	font: inherit;
+	font-size: var(--font-size-sm, 0.875rem);
+	line-height: var(--line-height-base, 1.5);
+	min-height: auto;
+	min-width: auto;
+	padding-left: 0;
+	padding-right: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+solid-ui-button.bio-card__description-toggle {
+	min-height: 0;
+	min-width: 0;
+	--button-height-sm: 0;
+	--button-padding-sm: 0;
+	--button-font-size-sm: var(--font-size-sm, 0.875rem);
+	--button-line-height: var(--line-height-base, 1.5);
+	--button-background: none;
+	--button-border-width: 0;
+	--button-border: transparent;
+	--button-text: var(--color-primary, #7C4DFF);
+	--button-hover-background: none;
+	--button-hover-border: transparent;
+	--button-hover-text: var(--color-primary, #7C4DFF);
+}
+
+.bio-card__description-wrap .bio-card__description-text:not(.bio-card__description-text--expanded) + .bio-card__description-toggle {
+	top: var(--bio-description-toggle-top);
+	bottom: auto;
+	transform: var(--bio-description-toggle-transform);
+}
+
+.bio-card__description-text--expanded + .bio-card__description-toggle,
+.bio-card__description-text--expanded + solid-ui-button.bio-card__description-toggle {
+	position: static;
+	display: block;
+	width: fit-content;
+	margin-left: auto;
+	padding-left: 0;
+	top: auto;
+	bottom: auto;
+	transform: none;
+}
+
+.bio-card__description-text--expanded + solid-ui-button.bio-card__description-toggle::part(button) {
+	position: static;
+	display: inline-flex;
+	padding-left: 0;
+	top: auto;
+	bottom: auto;
+	transform: none;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-card__description-text {
+	font-size: var(--font-size-sm, 0.875rem);
+	line-height: var(--line-height-base, 1.5);
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+}
+
+@container profile-pane (max-width: 576px) {
+	.bio-section--empty {
+		gap: var(--bio-section-content-gap-mobile);
+	}
+
+	.profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
+		margin-top: var(--bio-section-content-gap-mobile);
+	}
+
+	.profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
+		gap: var(--bio-section-content-gap-mobile);
+	}
+
+	.bio-card__description-text {
+		font-size: var(--font-size-sm, 0.875rem);
+		line-height: var(--line-height-base, 1.5);
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+	}
+
+	.bio-card__description-wrap {
+		--bio-description-toggle-top: calc(100% - 1.5em);
+		--bio-description-toggle-transform: none;
+	}
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-card__description-wrap {
+	--bio-description-toggle-top: calc(100% - 1.5em);
+	--bio-description-toggle-transform: none;
+}
+
+@media (max-width: 576px) {
+	.bio-section--empty {
+		gap: var(--bio-section-content-gap-mobile);
+	}
+
+	.profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
+		margin-top: var(--bio-section-content-gap-mobile);
+	}
+
+	.profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
+		gap: var(--bio-section-content-gap-mobile);
+	}
+
+	.bio-card__description-text {
+		font-size: var(--font-size-sm, 0.875rem);
+		line-height: var(--line-height-base, 1.5);
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+	}
+
+	.bio-card__description-wrap {
+		--bio-description-toggle-top: calc(100% - 1.5em);
+		--bio-description-toggle-transform: none;
+	}
+}
+
+@media (max-width: 768px) {
+	.bio-section__edit-button.profile-section-collapsible__edit-button,
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button {
+		min-width: var(--min-touch-target, 44px);
+		min-height: var(--min-touch-target, 44px);
+		--button-width-sm: var(--min-touch-target, 44px);
+		--button-height-sm: var(--min-touch-target, 44px);
+		--button-background: transparent;
+		--button-border-width: 0;
+		--button-border: transparent;
+		--button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+		--button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+		--button-hover-border: transparent;
+		--button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+	}
+
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
+		width: var(--min-touch-target, 44px);
+		min-width: var(--min-touch-target, 44px);
+	}
+
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus-visible {
+		background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+		text-decoration: none;
+	}
+}
+
+@container profile-pane (max-width: 768px) {
+	.bio-section__edit-button.profile-section-collapsible__edit-button,
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button {
+		min-width: var(--min-touch-target, 44px);
+		min-height: var(--min-touch-target, 44px);
+		--button-width-sm: var(--min-touch-target, 44px);
+		--button-height-sm: var(--min-touch-target, 44px);
+		--button-background: transparent;
+		--button-border-width: 0;
+		--button-border: transparent;
+		--button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+		--button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+		--button-hover-border: transparent;
+		--button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+	}
+
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
+		width: var(--min-touch-target, 44px);
+		min-width: var(--min-touch-target, 44px);
+	}
+
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
+	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus-visible {
+		background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+		text-decoration: none;
+	}
+}

package/lib/sections/bio/BioSection.d.ts

@@ -1,7 +1,8 @@
+import 'solid-ui/components/actions/button';
 import { BioDetails } from './types';
 import { ViewerMode } from '../../types';
-import '../../styles/BioSection.css';
+import './BioSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
-export declare const BioCard: (bioData: BioDetails, viewerMode: ViewerMode) => import("lit-html").TemplateResult<1>;
+export declare const BioCard: (bioData: BioDetails) => import("lit-html").TemplateResult<1>;
 export declare function renderBioSection(store: LiveStore, subject: NamedNode, bioData: BioDetails, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
 //# sourceMappingURL=BioSection.d.ts.map

package/lib/sections/bio/BioSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BioSection.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/BioSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAqC7C,eAAO,MAAM,OAAO,GAClB,SAAS,UAAU,EACnB,YAAY,UAAU,yCAWvB,CAAA;AAwHD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAcrC"}
+{"version":3,"file":"BioSection.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/BioSection.ts"],"names":[],"mappings":"AACA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAwC7C,eAAO,MAAM,OAAO,GAClB,SAAS,UAAU,yCASpB,CAAA;AA4HD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAcrC"}

package/lib/sections/bio/BioSection.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.BioCard = void 0;
 exports.renderBioSection = renderBioSection;
 var _litHtml = require("lit-html");
-require("../../styles/BioSection.css");
+require("solid-ui/components/actions/button");
+require("./BioSection.css");
 var _texts = require("../../texts");
 var _sectionCardHelpers = require("../shared/sectionCardHelpers");
 var _BioEditDialog = require("./BioEditDialog");
@@ -16,18 +17,21 @@ function renderBio(bioData) {
   const bioDescriptionId = 'bio-description';
   return (0, _litHtml.html)`
       ${bioData.description ? (0, _litHtml.html)`
-        <div class="bioDescriptionWrap">
-          <p class="bioDescriptionText" id=${bioDescriptionId}>${bioData.description}</p>
-          <button
+        <div class="bio-card__description-wrap">
+          <p class="bio-card__description-text" id=${bioDescriptionId}>${bioData.description}</p>
+          <solid-ui-button
             type="button"
-            class="bioDescriptionToggle"
+            variant="secondary"
+            size="sm"
+            label="...more"
+            class="bio-card__description-toggle"
             aria-controls=${bioDescriptionId}
             aria-expanded="false"
             hidden
             @click=${_sectionCardHelpers.toggleDescription}
           >
             ...more
-          </button>
+          </solid-ui-button>
         </div>
       ` : ''}
   `;
@@ -35,11 +39,10 @@ function renderBio(bioData) {
 function hasBioContent(bioData) {
   return Boolean((bioData?.description || '').trim());
 }
-const BioCard = (bioData, viewerMode) => {
-  void viewerMode;
+const BioCard = bioData => {
   return (0, _litHtml.html)`
-    <article class="bioCard" aria-label="Bio" data-testid="bio-card">
-      <section class="bioSection">
+    <article class="bio-card" aria-label="Bio" data-testid="bio-card">
+      <section class="bio-card__section">
         ${renderBio(bioData)}
       </section>
     </article>
@@ -47,16 +50,18 @@ const BioCard = (bioData, viewerMode) => {
 };
 exports.BioCard = BioCard;
 function renderBioSectionContent(store, subject, bioData, viewerMode, onSaved) {
-  const bio = BioCard(bioData, viewerMode);
+  const bio = BioCard(bioData);
   const bioDetails = bioData;
   const isOwner = viewerMode === 'owner';
   return (0, _litHtml.html)`
     <header class="profile__section-header profile-section-collapsible__header">
       <h2 id="bio-heading" tabindex="-1">${_texts.bioHeadingText}</h2>
       ${isOwner ? (0, _litHtml.html)`
-        <button
+        <solid-ui-button
           type="button"
-          class="profile__action-button profile-action-text flex-center"
+          variant="secondary"
+          size="sm"
+          class="profile__action-button profile-action-text bio-section__edit-button profile-section-collapsible__edit-button"
           aria-label="Edit bio details"
           @click=${event => {
     return (0, _BioEditDialog.createBioEditDialog)(event, store, subject, bioDetails, viewerMode, onSaved);
@@ -64,7 +69,7 @@ function renderBioSectionContent(store, subject, bioData, viewerMode, onSaved) {
         >
           <span class="profile-section-collapsible__edit-label profile__action-icon">${_profileIcons.editIcon} Edit</span>
           <span class="profile-section-collapsible__edit-icon profile__action-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-        </button>
+        </solid-ui-button>
       ` : (0, _litHtml.html)``}
     </header>
     <div class="profile-section-collapsible__content">
@@ -77,7 +82,7 @@ function renderBioSectionDefault(store, subject, bioData, viewerMode, onSaved) {
     <section 
       aria-labelledby="bio-heading" 
       data-profile-section="bio"
-      class="profile__section border-lighter" 
+      class="profile__section" 
       role="region"
       tabindex="-1"
     >
@@ -88,14 +93,16 @@ function renderBioSectionDefault(store, subject, bioData, viewerMode, onSaved) {
 function renderOwnerEmptyBioContent(store, subject, bioData, viewerMode, onSaved) {
   const bioDetails = bioData;
   return (0, _litHtml.html)`
-    <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty bio section">
+    <div class="profile__empty-state-content" role="group" aria-label="Empty bio section">
       <h2 id="bio-heading" tabindex="-1">${_texts.bioHeadingText}</h2>
       <p class="profile__empty-state-message">
         You haven't added any professional experience yet. Adding work history can boost your Bio.
       </p>
     </div>
-    <button
+    <solid-ui-button
       type="button"
+      variant="secondary"
+      size="sm"
       class="profile__action-button--empty"
       aria-label="Add bio details"
       @click=${event => {
@@ -103,7 +110,7 @@ function renderOwnerEmptyBioContent(store, subject, bioData, viewerMode, onSaved
   }}
     >
       <span class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon} Add Bio</span>
-    </button>
+    </solid-ui-button>
 
   `;
 }
@@ -112,7 +119,7 @@ function renderOwnerEmptyBioSection(store, subject, bioData, viewerMode, onSaved
     <section 
       aria-labelledby="bio-heading" 
       data-profile-section="bio"
-      class="profile__section--empty border-lighter flex-column-center rounded-md gap-lg" 
+      class="profile__section--empty profile__section--empty-main bio-section--empty" 
       role="region"
       tabindex="-1"
     >

package/lib/sections/bio/mutations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAU,MAAM,SAAS,CAAA;AAsCjD,wBAAsB,mBAAmB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,iBAO5G"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAU,MAAM,SAAS,CAAA;AA+CjD,wBAAsB,mBAAmB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,iBAQ5G"}

package/lib/sections/bio/mutations.js

@@ -8,6 +8,7 @@ var _rdflib = require("rdflib");
 var _solidUi = require("solid-ui");
 var _rdfMutationHelpers = require("../shared/rdfMutationHelpers");
 var _texts = require("../../texts");
+var _debug = require("../../utils/debug");
 // Need to find out if this is really how we should store the data
 async function mutateBioEntry(store, subject, bioOps) {
   const doc = subject.doc();
@@ -31,13 +32,23 @@ async function mutateBioEntry(store, subject, bioOps) {
   if (selectedBio) {
     applyBasics(selectedBio, Boolean(removeBio && !updateBio && !createBio));
   }
-  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+  const shouldSerializeDocument = await (0, _rdfMutationHelpers.shouldForceDocumentPutForStatements)(store, doc, insertions);
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, insertions, {
+    unsupportedMessage: _texts.updaterUnsupportedStoreErrorMessageText,
+    failureMessage: 'Failed to save bio updates',
+    useDavFallback: false,
+    usePutFallback: shouldSerializeDocument,
+    forcePut: shouldSerializeDocument
+  });
 }
 async function processBioMutations(store, subject, mutationPlan) {
   try {
     await mutateBioEntry(store, subject, mutationPlan);
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`${_texts.saveBioUpdatesFailedPrefixText} ${message}`);
+    const rootError = error instanceof Error ? error : new Error(String(error));
+    (0, _debug.error)(_texts.bioMutationSaveFailedDebugText, rootError);
+    throw new Error(_texts.saveBioUpdatesFailedMessageText, {
+      cause: rootError
+    });
   }
 }