profile-pane 3.2.0 → 3.2.2-test.0

package/lib/ui/dialog.js

@@ -4,19 +4,129 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.alertDialog = alertDialog;
+exports.closeSharedDialog = closeSharedDialog;
+exports.getSharedDialogCancelButton = getSharedDialogCancelButton;
+exports.getSharedDialogSaveButton = getSharedDialogSaveButton;
 exports.openInputDialog = openInputDialog;
-require("../styles/dialog.css");
+exports.setSharedDialogSavingState = setSharedDialogSavingState;
+require("./dialog.css");
+require("solid-ui/components/actions/button");
 var _litHtml = require("lit-html");
 var _profileIcons = require("../icons-svg/profileIcons");
+var _spinner = require("./spinner");
+var _errorDisplay = require("../utils/errorDisplay");
 /* Copied from issue-pane, minor typescript adjustments */
 /* Changed modal from div to dialog element */
 let modalDialog = null;
-let previousFocus = null;
+let scrollLockCount = 0;
+let previousHtmlOverflow = '';
+let previousBodyOverflow = '';
+let removeDocumentScrollGuard = null;
+function getEventTargetElement(target) {
+  if (target instanceof HTMLElement) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
+}
+function getEventPath(event) {
+  if (typeof event.composedPath === 'function') {
+    return event.composedPath();
+  }
+  return event.target ? [event.target] : [];
+}
+function isDialogScrollRegionTarget(event) {
+  const path = getEventPath(event);
+  const description = modalDialog?.querySelector('#modal-desc');
+  if (description && path.includes(description)) {
+    return true;
+  }
+  if (modalDialog && path.includes(modalDialog)) {
+    return true;
+  }
+  const targetElement = getEventTargetElement(event.target);
+  if (!targetElement || !modalDialog || !modalDialog.contains(targetElement)) {
+    return false;
+  }
+  return Boolean(targetElement.closest('#modal-desc'));
+}
+function installDocumentScrollGuard(dom) {
+  if (removeDocumentScrollGuard) return;
+  const preventBackgroundScroll = event => {
+    if (!isDialogScrollRegionTarget(event)) {
+      event.preventDefault();
+    }
+  };
+  dom.addEventListener('wheel', preventBackgroundScroll, {
+    capture: true,
+    passive: false
+  });
+  dom.addEventListener('touchmove', preventBackgroundScroll, {
+    capture: true,
+    passive: false
+  });
+  removeDocumentScrollGuard = () => {
+    dom.removeEventListener('wheel', preventBackgroundScroll, true);
+    dom.removeEventListener('touchmove', preventBackgroundScroll, true);
+    removeDocumentScrollGuard = null;
+  };
+}
+function lockDocumentScroll(dom) {
+  if (scrollLockCount === 0) {
+    previousHtmlOverflow = dom.documentElement.style.overflow;
+    previousBodyOverflow = dom.body.style.overflow;
+    dom.documentElement.style.overflow = 'hidden';
+    dom.body.style.overflow = 'hidden';
+    installDocumentScrollGuard(dom);
+  }
+  scrollLockCount += 1;
+}
+function unlockDocumentScroll(dom) {
+  if (scrollLockCount === 0) return;
+  scrollLockCount -= 1;
+  if (scrollLockCount > 0) return;
+  dom.documentElement.style.overflow = previousHtmlOverflow;
+  dom.body.style.overflow = previousBodyOverflow;
+  removeDocumentScrollGuard?.();
+}
+function getDialogMountTarget(dom) {
+  return dom.body;
+}
+function isSolidUiButton(control) {
+  return control?.tagName === 'SOLID-UI-BUTTON';
+}
+function setDialogActionDisabled(control, disabled) {
+  if (!control) return;
+  control.disabled = disabled;
+  control.toggleAttribute('disabled', disabled);
+}
+function setDialogActionLabel(control, label) {
+  if (!control) return;
+  if (isSolidUiButton(control)) {
+    control.label = label;
+    control.setAttribute('label', label);
+    control.textContent = label;
+    return;
+  }
+  ;
+  control.textContent = label;
+}
+function getSharedDialogSaveButton(root) {
+  return root.querySelector('#modal-buttons [data-dialog-primary="true"]');
+}
+function getSharedDialogCancelButton(root) {
+  return root.querySelector('#modal-buttons [data-cancel="true"]');
+}
 function ensureModalDialog(dom) {
+  const mountTarget = getDialogMountTarget(dom);
+
   // if we previously created a dialog but it was removed from the document
   // (tests clear body), rebuild it. Checking presence ensures our reference
   // doesn't point at a detached element.
-  if (modalDialog && dom.body.contains(modalDialog)) return modalDialog;
+  if (modalDialog && dom.body.contains(modalDialog)) {
+    if (modalDialog.parentElement !== mountTarget) {
+      mountTarget.appendChild(modalDialog);
+    }
+    return modalDialog;
+  }
   modalDialog = null;
   modalDialog = dom.createElement('dialog');
   modalDialog.id = 'profile-modal';
@@ -25,16 +135,17 @@ function ensureModalDialog(dom) {
   modalDialog.setAttribute('aria-describedby', 'modal-desc');
   modalDialog.innerHTML = `
     <div class="modal">
-      <div class="modal-header">
+      <div class="modal-header flex-row align-center justify-between">
         <h2 id="modal-title"></h2>
-        <div id="modal-header-action"></div>
+        <div id="modal-header-action" class="flex-row align-center"></div>
       </div>
       <div id="modal-desc"></div>
-      <section id="modal-error" class="modal__error-section" aria-live="assertive" role="alert" hidden></section>
-      <div id="modal-buttons"></div>
+      <section id="modal-error" class="modal__error-section" aria-live="assertive" aria-atomic="true" aria-hidden="true" role="alert" tabindex="-1" hidden></section>
+      <div id="modal-buttons" class="flex-row align-center justify-end"></div>
+      <div id="modal-saving-overlay" hidden></div>
     </div>
   `;
-  dom.body.appendChild(modalDialog);
+  mountTarget.appendChild(modalDialog);
   return modalDialog;
 }
 function getDialogElements(dialog) {
@@ -44,18 +155,22 @@ function getDialogElements(dialog) {
     headerAction: dialog.querySelector('#modal-header-action'),
     description: dialog.querySelector('#modal-desc'),
     error: dialog.querySelector('#modal-error'),
-    buttons: dialog.querySelector('#modal-buttons')
+    buttons: dialog.querySelector('#modal-buttons'),
+    savingOverlay: dialog.querySelector('#modal-saving-overlay')
   };
 }
 function clearModalError(elements) {
   elements.error.textContent = '';
+  elements.error.setAttribute('aria-hidden', 'true');
   elements.error.hidden = true;
 }
-function setModalError(elements, message) {
-  elements.error.textContent = message;
+function setModalError(elements, error, fallbackMessage) {
+  elements.error.textContent = (0, _errorDisplay.formatDisplayError)(error, fallbackMessage);
+  elements.error.setAttribute('aria-hidden', 'false');
   elements.error.hidden = false;
 }
 function openDialogElement(dialog) {
+  lockDocumentScroll(dialog.ownerDocument);
   if (typeof dialog.showModal === 'function') {
     try {
       if (!dialog.open) dialog.showModal();
@@ -67,32 +182,53 @@ function openDialogElement(dialog) {
   dialog.setAttribute('open', '');
 }
 function closeDialogElement(dialog) {
-  if (typeof dialog.close === 'function' && dialog.open) {
-    dialog.close();
-    return;
+  try {
+    if (typeof dialog.close === 'function' && dialog.open) {
+      dialog.close();
+      return;
+    }
+    dialog.removeAttribute('open');
+  } finally {
+    unlockDocumentScroll(dialog.ownerDocument);
   }
-  dialog.removeAttribute('open');
 }
-function findInitialContentFocusTarget(container) {
-  const focusable = Array.from(container.querySelectorAll('input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'));
-  for (const el of focusable) {
-    const isDisabled = el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true';
-    const hiddenByAttr = el.hasAttribute('hidden') || el.getAttribute('aria-hidden') === 'true';
-    if (!isDisabled && !hiddenByAttr) return el;
+function isMobileDialogLayout(dom) {
+  return Boolean(dom.querySelector('[data-layout=\'mobile\']'));
+}
+function isFocusableElement(element) {
+  if (element.hasAttribute('disabled')) return false;
+  if (element.getAttribute('aria-hidden') === 'true') return false;
+  if (element.getAttribute('hidden') !== null) return false;
+  if (element.tabIndex < 0) return false;
+  return true;
+}
+function findPreferredInitialFocusTarget(container) {
+  const focusableControls = container.querySelectorAll(['input:not([type="hidden"]):not([disabled])', 'textarea:not([disabled])', 'select:not([disabled])', 'solid-ui-select:not([disabled])', 'solid-ui-combobox:not([disabled])', '[contenteditable="true"]', 'button:not([disabled])', 'solid-ui-button:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(','));
+  for (const match of focusableControls) {
+    if (match instanceof HTMLElement && isFocusableElement(match)) return match;
   }
   return null;
 }
-function focusInitialDialogTarget(description, buttons) {
-  const initialInput = findInitialContentFocusTarget(description);
-  if (initialInput) {
-    initialInput.focus();
-    if (initialInput instanceof HTMLInputElement || initialInput instanceof HTMLTextAreaElement) {
-      initialInput.select();
+function focusInitialDialogTarget(dialog, description, buttons) {
+  if (isMobileDialogLayout(dialog.ownerDocument)) {
+    const activeElement = dialog.ownerDocument.activeElement;
+    if (activeElement && dialog.contains(activeElement)) {
+      activeElement.blur();
+    }
+    return;
+  }
+  const initialTarget = findPreferredInitialFocusTarget(description);
+  if (initialTarget) {
+    initialTarget.focus();
+    if (initialTarget instanceof HTMLInputElement || initialTarget instanceof HTMLTextAreaElement) {
+      initialTarget.select();
     }
     return;
   }
-  const firstButton = buttons.querySelector('button');
-  if (firstButton) firstButton.focus();
+  const firstButton = findPreferredInitialFocusTarget(buttons);
+  if (firstButton) {
+    firstButton.focus();
+  }
 }
 function collectFormValues(form) {
   const data = new FormData(form);
@@ -111,7 +247,6 @@ function openModal({
 }) {
   const dialog = ensureModalDialog(dom);
   const elements = getDialogElements(dialog);
-  previousFocus = dom.activeElement;
   openDialogElement(dialog);
   elements.title.textContent = title || '';
   elements.description.innerHTML = '';
@@ -128,7 +263,7 @@ function openModal({
       resolve(value);
     };
     const requestCancel = () => {
-      const cancelBtn = dialog.querySelector('button[data-cancel]');
+      const cancelBtn = getSharedDialogCancelButton(dialog);
       if (cancelBtn) {
         cancelBtn.click();
         return;
@@ -144,17 +279,25 @@ function openModal({
       type: 'close'
     };
     if (resolvedHeaderAction.type === 'close') {
-      const closeButton = dom.createElement('button');
+      const closeButton = dom.createElement('solid-ui-button');
       closeButton.setAttribute('type', 'button');
+      closeButton.setAttribute('variant', 'icon');
+      closeButton.setAttribute('size', 'sm');
       closeButton.setAttribute('aria-label', 'Close dialog');
-      (0, _litHtml.render)(_profileIcons.closeIcon, closeButton);
+      const iconSlot = dom.createElement('span');
+      iconSlot.setAttribute('slot', 'icon');
+      (0, _litHtml.render)(_profileIcons.closeIcon, iconSlot);
+      closeButton.appendChild(iconSlot);
       closeButton.onclick = () => requestCancel();
       elements.headerAction.appendChild(closeButton);
     } else if (resolvedHeaderAction.type === 'button') {
-      const actionButton = dom.createElement('button');
+      const actionButton = dom.createElement('solid-ui-button');
       actionButton.setAttribute('type', 'button');
+      actionButton.setAttribute('variant', 'secondary');
+      actionButton.setAttribute('size', 'sm');
       actionButton.className = resolvedHeaderAction.className || 'modal__header-action-button profile__action-button profile-action-text flex-center';
       actionButton.textContent = resolvedHeaderAction.label;
+      actionButton.setAttribute('label', resolvedHeaderAction.label);
       actionButton.setAttribute('aria-label', resolvedHeaderAction.ariaLabel || resolvedHeaderAction.label);
       actionButton.onclick = async () => {
         if (resolvedHeaderAction.onClick) {
@@ -164,12 +307,16 @@ function openModal({
       elements.headerAction.appendChild(actionButton);
     }
     buttons.forEach(btn => {
-      const b = dom.createElement('button');
+      const b = dom.createElement('solid-ui-button');
       b.setAttribute('type', 'button');
+      b.setAttribute('label', btn.label);
+      b.setAttribute('size', 'md');
+      b.setAttribute('variant', btn.primary ? 'primary' : 'secondary');
       b.textContent = btn.label;
-      if (btn.primary) b.classList.add('btn-primary');
+      if (btn.primary) {
+        b.setAttribute('data-dialog-primary', 'true');
+      }
       if (btn.cancel) {
-        b.classList.add('btn-light');
         b.setAttribute('data-cancel', 'true');
       }
       b.addEventListener('click', async () => {
@@ -181,7 +328,10 @@ function openModal({
       });
       elements.buttons.appendChild(b);
     });
-    focusInitialDialogTarget(elements.description, elements.buttons);
+    const scheduleInitialFocus = dom.defaultView?.requestAnimationFrame ? callback => dom.defaultView?.requestAnimationFrame(() => callback()) : callback => setTimeout(callback, 0);
+    scheduleInitialFocus(() => {
+      focusInitialDialogTarget(dialog, elements.description, elements.buttons);
+    });
   });
 }
 function closeModal(_result) {
@@ -190,9 +340,11 @@ function closeModal(_result) {
     modalDialog.oncancel = null;
     const headerActionButton = modalDialog.querySelector('#modal-header-action button');
     if (headerActionButton) headerActionButton.onclick = null;
-    if (previousFocus && 'focus' in previousFocus) previousFocus.focus();
   }
 }
+function closeSharedDialog() {
+  closeModal(null);
+}
 function alertDialog(message, title = 'Information', dom) {
   return openModal({
     title,
@@ -205,6 +357,42 @@ function alertDialog(message, title = 'Information', dom) {
     dom
   });
 }
+function updateSavingUI(dialog, submitLabel, isSaving) {
+  const elements = getDialogElements(dialog);
+  const saveButton = getSharedDialogSaveButton(dialog);
+  const cancelButton = getSharedDialogCancelButton(dialog);
+  dialog.classList.toggle('modal--saving', isSaving);
+  dialog.setAttribute('aria-busy', String(isSaving));
+  elements.description.toggleAttribute('inert', isSaving);
+  if (isSaving) {
+    const activeElement = dialog.ownerDocument.activeElement;
+    if (activeElement && dialog.contains(activeElement)) {
+      activeElement.blur();
+    }
+  }
+  if (saveButton) {
+    setDialogActionDisabled(saveButton, isSaving);
+    saveButton.setAttribute('aria-busy', String(isSaving));
+    setDialogActionLabel(saveButton, submitLabel);
+  }
+  if (cancelButton) {
+    setDialogActionDisabled(cancelButton, isSaving);
+  }
+  elements.savingOverlay.hidden = !isSaving;
+  if (isSaving) {
+    (0, _litHtml.render)((0, _litHtml.html)`
+      <div class="modal__saving-indicator inline-flex-row justify-center" aria-live="polite" aria-label="Saving changes">
+        ${(0, _spinner.createSpinner)()}
+      </div>
+    `, elements.savingOverlay);
+  } else {
+    (0, _litHtml.render)((0, _litHtml.html)``, elements.savingOverlay);
+  }
+}
+function setSharedDialogSavingState(dom, isSaving, submitLabel = 'Saving Changes') {
+  const dialog = ensureModalDialog(dom);
+  updateSavingUI(dialog, submitLabel, isSaving);
+}
 /* Function below generated by AI Model: GPT-5.3-Codex */
 /* Prompt: write me a reusable function to open a dialog with a form and return the form values on submit. 
 The function should also support validation and display error messages in the dialog. 
@@ -221,11 +409,11 @@ function openInputDialog(options) {
   options.form.appendChild(submitProxy);
   const handleSubmit = event => {
     event.preventDefault();
-    const saveButton = dialog.querySelector('#modal-buttons .btn-primary');
+    const saveButton = getSharedDialogSaveButton(dialog);
     saveButton?.click();
   };
   options.form.addEventListener('submit', handleSubmit);
-  return openModal({
+  const dialogPromise = openModal({
     title: options.title,
     message: options.form,
     headerAction: options.headerAction,
@@ -239,6 +427,9 @@ function openInputDialog(options) {
       primary: true,
       beforeClose: async () => {
         clearModalError(elements);
+        if (options.shouldCloseWithoutSave && (await options.shouldCloseWithoutSave())) {
+          return true;
+        }
         if (options.validate) {
           const validationMessage = await options.validate();
           if (validationMessage) {
@@ -248,21 +439,30 @@ function openInputDialog(options) {
         }
         if (!options.onSave) return true;
         try {
+          updateSavingUI(dialog, submitLabel, true);
           await options.onSave();
           return true;
         } catch (error) {
-          const fallback = error instanceof Error ? error.message : String(error);
-          const message = options.formatSaveError ? options.formatSaveError(error) : fallback;
-          setModalError(elements, message);
+          updateSavingUI(dialog, submitLabel, false);
+          const fallback = options.formatSaveError ? options.formatSaveError(error) : undefined;
+          setModalError(elements, error, fallback);
           return false;
         }
       }
     }],
     dom: options.dom
-  }).then(result => {
+  });
+  const scheduleOpenCallback = options.dom.defaultView?.requestAnimationFrame ? callback => options.dom.defaultView?.requestAnimationFrame(() => callback()) : callback => setTimeout(callback, 0);
+  if (options.onOpen) {
+    scheduleOpenCallback(options.onOpen);
+  }
+  elements.buttons.hidden = Boolean(options.hideFooterButtons);
+  return dialogPromise.then(result => {
     if (result !== 'save') return null;
     return collectFormValues(options.form);
   }).finally(() => {
+    elements.buttons.hidden = false;
+    updateSavingUI(dialog, submitLabel, false);
     options.form.removeEventListener('submit', handleSubmit);
     submitProxy.remove();
   });

package/lib/ui/dialog.responsive.css

@@ -0,0 +1,195 @@
+/* Responsive dialog rules and mobile-affecting overrides live separately from the base modal layout. */
+
+#profile-modal .modal:has(.profile-edit-dialog__social-account-select[popup-open]) #modal-desc,
+#profile-modal .modal:has(#modal-desc > .profile__edit-form solid-ui-combobox:focus-within) #modal-desc {
+  padding-bottom: calc(var(--profile-modal-panel-inline-padding) + 1.875rem);
+}
+
+@media (max-width: 576px) {
+  #profile-modal {
+    --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
+    padding-top: env(safe-area-inset-top);
+    padding-right: 0;
+    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+    padding-left: 0;
+    place-items: center;
+  }
+
+  #profile-modal .modal {
+    width: var(--profile-modal-panel-width);
+    max-width: var(--profile-modal-panel-max-width);
+    min-width: 0;
+    padding: 0;
+    border-radius: var(--border-radius-base);
+    overscroll-behavior: contain;
+    justify-self: center;
+    align-self: center;
+    margin: 0;
+  }
+
+  #profile-modal .modal .modal-header {
+    gap: var(--spacing-lg, 1.5625rem);
+    padding: var(--spacing-sm, 0.938rem);
+  }
+
+  #profile-modal .modal #modal-title {
+    font-size: var(--font-size-lg, 1.125rem);
+    line-height: var(--line-height-tight, 1.4);
+  }
+
+  #profile-modal .modal #modal-desc {
+    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+  }
+
+  #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
+    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+  }
+
+  #profile-modal #modal-desc > .profile__edit-form--bio {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md, 1.25rem);
+  }
+
+  #profile-modal #modal-buttons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--profile-modal-button-gap);
+    padding: var(--profile-modal-compact-padding);
+    width: 100%;
+  }
+
+  #profile-modal #modal-buttons > solid-ui-button {
+    flex: 1 0 0;
+    width: auto;
+    min-width: 0;
+    --button-font-size-md: var(--font-size-md, 1rem);
+  }
+}
+
+html[data-layout='mobile'] #profile-modal {
+  --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
+  padding-top: env(safe-area-inset-top);
+  padding-right: 0;
+  padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+  padding-left: 0;
+  place-items: center;
+}
+
+html[data-layout='mobile'] #profile-modal .modal {
+  width: var(--profile-modal-panel-width);
+  height: auto;
+  max-height: var(--profile-modal-panel-max-height);
+  max-width: var(--profile-modal-panel-max-width);
+  min-width: 0;
+  padding: 0;
+  border-radius: var(--border-radius-base);
+  overscroll-behavior: contain;
+  justify-self: center;
+  align-self: center;
+  margin: 0;
+}
+
+html[data-layout='mobile'] #profile-modal .modal .modal-header {
+  gap: var(--spacing-lg, 1.5625rem);
+  padding: var(--spacing-sm, 0.938rem);
+}
+
+html[data-layout='mobile'] #profile-modal .modal #modal-title {
+  font-size: var(--font-size-lg, 1.125rem);
+  line-height: var(--line-height-tight, 1.4);
+}
+
+html[data-layout='mobile'] #profile-modal .modal #modal-desc {
+  padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+}
+
+html[data-layout='mobile'] #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
+  padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+}
+
+html[data-layout='mobile'] #profile-modal #modal-desc > .profile__edit-form--bio {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 1.25rem);
+}
+
+html[data-layout='mobile'] #profile-modal #modal-buttons {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--profile-modal-button-gap);
+  padding: var(--profile-modal-compact-padding);
+  width: 100%;
+}
+
+html[data-layout='mobile'] #profile-modal #modal-buttons > solid-ui-button {
+  flex: 1 0 0;
+  width: auto;
+  min-width: 0;
+  --button-font-size-md: var(--font-size-md, 1rem);
+}
+
+@container profile-pane (max-width: 576px) {
+  #profile-modal {
+    --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
+    padding-top: env(safe-area-inset-top);
+    padding-right: 0;
+    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+    padding-left: 0;
+    place-items: center;
+  }
+
+  #profile-modal .modal {
+    width: var(--profile-modal-panel-width);
+    max-width: var(--profile-modal-panel-max-width);
+    min-width: 0;
+    padding: 0;
+    border-radius: var(--border-radius-base);
+    overscroll-behavior: contain;
+    justify-self: center;
+    align-self: center;
+    margin: 0;
+  }
+
+  #profile-modal .modal .modal-header {
+    gap: var(--spacing-lg, 1.5625rem);
+    padding: var(--spacing-sm, 0.938rem);
+  }
+
+  #profile-modal .modal #modal-title {
+    font-size: var(--font-size-lg, 1.125rem);
+    line-height: var(--line-height-tight, 1.4);
+  }
+
+  #profile-modal .modal #modal-desc {
+    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+  }
+
+  #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
+    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+  }
+
+  #profile-modal #modal-desc > .profile__edit-form--bio {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md, 1.25rem);
+  }
+
+  #profile-modal #modal-buttons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--profile-modal-button-gap);
+    padding: var(--profile-modal-compact-padding);
+    width: 100%;
+  }
+
+  #profile-modal #modal-buttons > solid-ui-button {
+    flex: 1 0 0;
+    width: auto;
+    min-width: 0;
+    --button-font-size-md: var(--font-size-md, 1rem);
+  }
+}

package/lib/ui/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/ui/errors.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAE,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAE/E"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/ui/errors.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAE,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAE/E"}

package/lib/ui/errors.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.complain = complain;
 var _solidUi = require("solid-ui");
+var _errorDisplay = require("../utils/errorDisplay");
 function complain(div, d, message) {
-  div.appendChild(_solidUi.widgets.errorMessageBlock(d, message, 'pink'));
+  div.appendChild(_solidUi.widgets.errorMessageBlock(d, (0, _errorDisplay.formatDisplayError)(message), 'pink'));
 }

package/lib/ui/spinner.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit-html';
+export declare function createSpinner(): TemplateResult;
+//# sourceMappingURL=spinner.d.ts.map

package/lib/ui/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/ui/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAE/C,wBAAgB,aAAa,IAAK,cAAc,CAK/C"}

package/lib/ui/spinner.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSpinner = createSpinner;
+var _litHtml = require("lit-html");
+function createSpinner() {
+  return (0, _litHtml.html)`
+    <span class="loading-spinner" aria-hidden="true"></span>
+    <span class="sr-only">Saving...</span>
+  `;
+}

package/lib/utils/debug.d.ts

@@ -0,0 +1,5 @@
+export declare function log(...args: any[]): void;
+export declare function warn(...args: any[]): void;
+export declare function error(...args: any[]): void;
+export declare function trace(...args: any[]): void;
+//# sourceMappingURL=debug.d.ts.map

package/lib/utils/debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/utils/debug.ts"],"names":[],"mappings":"AAEA,wBAAgB,GAAG,CAAE,GAAG,IAAI,OAAA,QAE3B;AAED,wBAAgB,IAAI,CAAE,GAAG,IAAI,OAAA,QAE5B;AAED,wBAAgB,KAAK,CAAE,GAAG,IAAI,OAAA,QAE7B;AAED,wBAAgB,KAAK,CAAE,GAAG,IAAI,OAAA,QAE7B"}