@pontive/pontkit-core 1.1.3 → 1.2.0

package/dist/components/renderers/visuals/watermark/_watermark.d.ts

@@ -42,6 +42,27 @@ export declare class PontWatermark extends LitElement implements Props {
     get labelId(): string;
     get logoId(): string;
     private _renderLabel;
+    /**
+     * The Pontive lockup: the mark, then the wordmark.
+     *
+     * This replaced a square 800x800 tile — a rounded indigo rect with a white
+     * glyph knocked out of it — and the two recolour hooks had to change with it.
+     * `.pontive-logo-rect` has nothing to fill any more, and `.pontive-logo-path`
+     * was white only because it sat on that coloured tile; white letterforms on a
+     * page background would be invisible.
+     *
+     * So: `.pontive-logo-mark` carries the brand colour the tile used to, and
+     * `.pontive-logo-wordmark` follows the label's own colour, which keeps
+     * "Powered by" and "Pontive" reading as one line and keeps the theme and
+     * muted variants meaning something.
+     *
+     * The supplied artwork puts two greys on the mark. They are flattened to one
+     * fill deliberately: this renders 16px tall, where a two-tone split is noise,
+     * and the brief was to keep the colours the watermark already used.
+     *
+     * No width/height attributes — the lockup is roughly 5:1 and the CSS sizes it
+     * by height, so it cannot be squeezed into the square slot the tile left.
+     */
     private _renderLogo;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/widgets/index.d.ts

@@ -3,4 +3,4 @@ export * from './pont-member-management';
 export * from './pont-preview/pont-preview';
 export * from './pont-signin/pont-signin';
 export * from './pont-signup/pont-signup';
-export * from './pont-nav-user';
+export * from './pont-account-menu';

package/dist/components/widgets/pont-account-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './pont-account-menu';

package/dist/components/widgets/{pont-nav-user/pont-nav-user.d.ts → pont-account-menu/pont-account-menu.d.ts}

@@ -1,5 +1,11 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { AuthState } from '../../../context';
+/** The three fields this menu shows for whoever is signed in. */
+export type MenuUser = {
+    name?: string;
+    email?: string;
+    avatar_url?: string;
+};
 type MenuItem = {
     id?: string;
     label: string;
@@ -19,10 +25,10 @@ type MenuItem = {
 export declare class PontUserSnippet extends LitElement {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     isTrigger: boolean;
-    user: {};
+    user: MenuUser;
     render(): TemplateResult<1>;
 }
-export declare class PontNavUser extends LitElement {
+export declare class PontAccountMenu extends LitElement {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     accountSettingsPath: string;
     menuItems: MenuItem[];
@@ -53,7 +59,34 @@ export declare class PontNavUser extends LitElement {
     private _renderToggleItem;
     private _renderSelectItem;
     render(): TemplateResult<1>;
+    /**
+     * Leaves for `path`, but only as a last resort.
+     *
+     * `window.location.href` is a full document navigation. Inside a SPA that
+     * discards every bit of client state and re-runs the whole boot, including
+     * the session restore round trip — so choosing "Account settings" reloaded
+     * the page, blanked the settings widget while it re-fetched, and silently
+     * dropped whatever the user had half-typed into a card. When the menu points
+     * at the page it is already on, the reload bought nothing at all.
+     *
+     * So: nothing to do if we are already there, and the host gets first refusal
+     * (see _handleAccountSettings) so a client-side router can move without a
+     * reload. This stays as the fallback for a plain multi-page site.
+     */
     private _navigate;
+    /**
+     * The `account-settings` event is cancelable, and that is the point.
+     *
+     * A host with a client-side router calls preventDefault() and does its own
+     * push — the difference between a reload and a transition. Without that hook
+     * this element's only move was a hard navigation, and a custom element cannot
+     * know about next/router or any other.
+     *
+     * With no path configured and nobody cancelling, fall back to asking a
+     * modal-mode pont-account-settings to open: the same event the SDK's own
+     * openAccountSettingsModal() sends. If nothing is mounted to hear that
+     * either, say so once rather than appearing to do nothing.
+     */
     private _handleAccountSettings;
     private _handleLogout;
     private _handleMenuItemClick;

package/dist/components/widgets/pont-account-settings/pont-account-settings.d.ts

@@ -56,6 +56,18 @@ export declare class PontAccountSettings extends LitElement {
     private renderWatermark;
     private renderMainContent;
     private renderTabContent;
+    /**
+     * What the widget occupies while the profile is on its way.
+     *
+     * It used to render nothing at all until `_userLoaded`, so a page that
+     * embeds it showed a hole for the length of the /mgmt/v1/me round trip and
+     * then jumped when the real content arrived. A skeleton of the same shape
+     * costs nothing and keeps the page's layout still.
+     *
+     * Only page mode needs this: a modal is not on screen until someone opens
+     * it, and by then the fetch has almost always settled.
+     */
+    private renderLoadingSkeleton;
     render(): import('lit-html/directive.js').DirectiveResult<{
         new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/keyed.js').Keyed<import('lit-html').TemplateResult<1>>;
     }>;

package/dist/components/widgets/pont-account-settings/profile/classes.d.ts

@@ -7,3 +7,12 @@ export declare const CARD_EDITABLE_INPUT_CLASS = "pont-account-settings-card-edi
 export declare const CARD_DEFAULT_BUTTON = "pont-account-settings-card-button-full";
 export declare const CARD_OUTLINE_BUTTON = "pont-account-settings-card-button-full";
 export declare const CARD_EDIT_BUTTON = "pont-account-settings-card-edit-button pont-text-muted-foreground pont-flex pont-items-center";
+/**
+ * The "Not Added" placeholder every card shows for an empty field.
+ *
+ * It used to be a raw `<p class="…label…">` nested INSIDE a
+ * `<pont-typography-p>`, which itself renders a `<p>` — a paragraph inside a
+ * paragraph, four cards over. pont-typography-muted is the design system's own
+ * element for exactly this: de-emphasised text that is not a value.
+ */
+export declare const notAddedPlaceholder: () => import('lit-html').TemplateResult<1>;

package/dist/components/widgets/pont-account-settings/profile/components/account-info.d.ts

@@ -13,13 +13,7 @@ export declare class PontAccountInfo extends LitElement {
     onAvatarRemove: () => void;
     showIcons: boolean;
     content: IProfileWidgetCustomization | null;
-    otpVariant: "simple" | "with_spacing" | "with_separator" | "digits_only";
-    otpLength: number;
     layout: USER_ACCOUNT_SETTINGS_WIDGETS_LAYOUT;
-    private isEditingEmail;
-    private isVerifyingEmail;
-    private isEditingPhone;
-    private isVerifyingPhone;
     private isUploadingImage;
     private isEditingAvatarMobile;
     private isMobile;
@@ -28,7 +22,6 @@ export declare class PontAccountInfo extends LitElement {
     private _intentionalClose;
     private avatarDraft;
     private _committedAvatar;
-    private formData;
     private userContextValue;
     private _mobileQuery;
     private _onMobileChange;
@@ -45,10 +38,40 @@ export declare class PontAccountInfo extends LitElement {
     private handleAvatarInput;
     private handleCancelAvatar;
     private handleSaveAvatar;
+    /**
+     * One label/value row, whatever the value happens to be.
+     *
+     * Photo, Email and Phone all go through here, which is what keeps this card's
+     * label column at the same x as Personal Info, Location and Links. It was
+     * previously inlined per field, so the avatar could quietly grow its own
+     * column and take Email and Phone with it.
+     */
+    private renderRow;
+    /** A read-only value row. See renderEmailSection for why there is no edit. */
     private renderDisplayRow;
-    private renderEditForm;
-    private renderVerificationForm;
-    private updateField;
+    /**
+     * Email and phone are READ-ONLY, deliberately.
+     *
+     * Both are login identifiers and must stay verified. Letting someone change
+     * one in place would change what they sign in with while the new value is
+     * still unproven, which can lock a user out of their own account — so the
+     * Login Info card renders values and no edit affordance, and is the only card
+     * here without an Edit button.
+     *
+     * This is a product decision, not an unfinished one. An earlier draft carried
+     * an inline edit form and a six-digit OTP verification form for each field,
+     * but nothing ever rendered the button that would reach them: the row's
+     * action cell is empty, so `isEditingEmail` and `isEditingPhone` could never
+     * become true. Roughly 120 lines of form and OTP markup sat here looking like
+     * a feature someone forgot to finish, which is an invitation to "fix" it by
+     * wiring a button up — exactly the change that would be unsafe.
+     *
+     * The forms are gone rather than commented out; git history has them for
+     * whenever the real flow is built. DO NOT reintroduce an edit affordance here
+     * until there is an update flow that asks the user to verify the new address
+     * or number AFTER the change, and that keeps the old identifier usable until
+     * they do.
+     */
     private renderEmailSection;
     private renderPhoneSection;
     private renderAvatarFooter;
@@ -59,8 +82,32 @@ export declare class PontAccountInfo extends LitElement {
      * keystroke and restored on cancel.
      */
     private renderAvatarFormBody;
-    private renderAvatarDesktop;
-    private renderAvatarMobile;
+    /**
+     * Initials for the image-less case.
+     *
+     * The fallback used to be rendered childless — `<pont-avatar-fallback>` puts
+     * its children in the slot and has nothing of its own to show — so every user
+     * without a photo got a blank 148px disc. pont-account-menu has always passed
+     * initials through the same helper; this is the header avatar's own rule,
+     * applied to the one place that skipped it, so the two agree.
+     */
+    private get avatarInitials();
+    /** The disc itself: photo when there is one, initials when there is not. */
+    private renderAvatarVisual;
+    /**
+     * The avatar as a field of this card rather than a column beside it.
+     *
+     * It used to sit in a flex row next to the whole details block, so the
+     * avatar's own width pushed Email and Phone 180px to the right of where every
+     * other card on the page starts its labels — Login Info was the one card that
+     * did not line up with the rest. Rendering it through the same row helper as
+     * the other fields makes that alignment structural instead of something to
+     * keep re-tuning, and collapses the desktop and mobile trees into one shape.
+     *
+     * Desktop opens the editor in a popover, mobile inline underneath: that split
+     * is a real input-modality difference and stays.
+     */
+    private renderPhotoRow;
     private renderHeader;
     private renderAccountDetails;
     render(): TemplateResult<1>;

package/dist/components/widgets/pont-account-settings/profile/components/location-info.d.ts

@@ -18,8 +18,21 @@ export declare class PontLocationInfo extends LitElement {
     private handleEdit;
     private handleCancel;
     private updateField;
+    /** See personal-info.validate for why this stopped being a no-op. */
     private validate;
     private handleSave;
+    private fieldId;
+    /**
+     * Zone Info is an IANA timezone name, not free text.
+     *
+     * It goes straight to the OIDC `zoneinfo` claim, which is defined as an IANA
+     * Time Zone Database name ("Australia/Sydney"). As a text box it collected
+     * whatever people typed — "GMT+3", "AEST", "Sydney" — none of which any
+     * consumer of that claim can resolve. The list comes from the browser's own
+     * tz database rather than a hardcoded copy that would rot.
+     */
+    private get timeZones();
+    private renderControl;
     private renderField;
     private renderFooter;
     render(): TemplateResult<1>;

package/dist/components/widgets/pont-account-settings/profile/components/personal-info.d.ts

@@ -22,9 +22,28 @@ export declare class PontPersonalInfo extends LitElement {
     private handleEdit;
     private handleCancel;
     private updateField;
+    /**
+     * These are the rules the server will apply anyway; running them here is what
+     * turns a rejected save into a message beside the offending field instead of
+     * a toast that does not say which one.
+     *
+     * Everything is optional — this card has no required field — so a rule only
+     * fires on a value the user actually typed. It used to build an empty object
+     * and return true, which left the pont-field `invalid` / pont-field-error
+     * wiring below permanently unreachable.
+     */
     private validate;
     private handleSave;
     createRenderRoot(): this;
+    /**
+     * Ids are namespaced rather than the bare field key.
+     *
+     * A `<label for>` needs an id that is unique in the DOCUMENT, and these used
+     * to be "username", "bio", "first" — names any host page might already use,
+     * and which collide with themselves the moment the widget is mounted twice
+     * (a page instance and a modal instance both exist in the supported setup).
+     */
+    private fieldId;
     private renderControl;
     private renderField;
     private renderFooter;

package/dist/components/widgets/pont-account-settings/profile/components/urls-info.d.ts

@@ -17,8 +17,14 @@ export declare class PontUrlsInfo extends LitElement {
     private handleEdit;
     private handleCancel;
     private updateField;
+    /**
+     * Website took any string at all. "not a url", a javascript: URI, a bare
+     * "example.com" that no consumer can link to — all saved happily, because
+     * this returned true without looking. See personal-info.validate.
+     */
     private validate;
     private handleSave;
+    private fieldId;
     private renderField;
     private renderFooter;
     private handleLinkClick;

package/dist/components/widgets/pont-account-settings/sidebar/classes.d.ts

@@ -4,6 +4,5 @@ export declare const SIDEBAR_CONTAINER_CLASSES: {
     horizontalBurger: string;
 };
 export declare const BURGER_BUTTON_CLASSES = "pont-account-settings-sidebar-burger-button pont-rounded-lg pont-cursor-pointer";
-export declare const BURGER_LABEL_CLASSES = "pont-account-settings-sidebar-burger-label pont-font-medium";
 export declare const MOBILE_DRAWER_CLASSES = "mobile-sidebar-drawer pont-account-settings-sidebar-mobile-drawer pont-transform pont-transition-all pont-duration-300 pont-ease-in-out";
 export declare const MOBILE_OVERLAY_CLASSES = "mobile-sidebar-overlay pont-account-settings-sidebar-mobile-overlay pont-transition-opacity pont-duration-300 pont-ease-in-out";

package/dist/element-tag-map.d.ts

@@ -1,4 +1,5 @@
 import { PontAccountInfo } from './components/widgets/pont-account-settings/profile/components/account-info';
+import { PontAccountMenu, PontUserSnippet } from './components/widgets/pont-account-menu/pont-account-menu';
 import { PontAccountSettings } from './components/widgets/pont-account-settings/pont-account-settings';
 import { PontAlert } from './components/renderers/feedback/alert/_alert';
 import { AuthStateElement } from './components/wrappers/pont-auth-state/pont-auth-state';
@@ -20,7 +21,6 @@ import { PontLink } from './components/renderers/navigation/link/_link';
 import { PontLogo } from './components/renderers/visuals/logo/_logo';
 import { PontModal } from './components/ui/modal/index';
 import { PontNameField } from './components/renderers/auth/field/_name-field';
-import { PontNavUser, PontUserSnippet } from './components/widgets/pont-nav-user/pont-nav-user';
 import { PontOtp } from './components/renderers/auth/otp/_otp';
 import { PontOtpResend } from './components/renderers/auth/otp/_otp-resend';
 import { PontPasskeyButton } from './components/renderers/auth/button/_passkey-button';
@@ -45,6 +45,7 @@ import { PontWatermark } from './components/renderers/visuals/watermark/_waterma
 declare global {
     interface HTMLElementTagNameMap {
         "pont-account-info": PontAccountInfo;
+        "pont-account-menu": PontAccountMenu;
         "pont-account-settings": PontAccountSettings;
         "pont-alert": PontAlert;
         "pont-auth-state": AuthStateElement;
@@ -66,7 +67,6 @@ declare global {
         "pont-logo": PontLogo;
         "pont-modal": PontModal;
         "pont-name-field": PontNameField;
-        "pont-nav-user": PontNavUser;
         "pont-otp": PontOtp;
         "pont-otp-resend": PontOtpResend;
         "pont-passkey-button": PontPasskeyButton;