@hraness/suite-accounts 0.9.20

package/src/public-profile-form-result.ts

@@ -0,0 +1,82 @@
+import {
+  parseSuiteProfileEditorV2,
+  parseSuiteProfileUpdateV2,
+  type SuiteProfileEditorV2,
+  type SuiteProfileUpdateV2,
+} from "./identity/profiles-v2.js";
+
+export type PublicProfileFormResult =
+  | Readonly<{ status: "saved"; profile: SuiteProfileEditorV2 }>
+  | Readonly<{ status: "conflict"; profile: SuiteProfileEditorV2 }>
+  | Readonly<{ status: "unauthorized" }>
+  | Readonly<{ status: "username_required" }>
+  | Readonly<{ status: "invalid_avatar" }>;
+
+const LINK_KEYS = [
+  "bluesky", "github", "instagram", "linkedin", "telegram", "website", "x",
+] as const;
+
+function matchesRequest(profile: SuiteProfileEditorV2, request: SuiteProfileUpdateV2): boolean {
+  return profile.name === request.name && profile.bio === request.bio
+    && profile.avatarRef === request.avatarRef
+    && profile.publication === (request.publication === "publish" ? "published" : "private")
+    && LINK_KEYS.every((key) => profile.links[key] === request.links[key]);
+}
+
+/** Own the small envelope without invoking property accessors. */
+function snapshot(value: unknown): Record<string, unknown> | null {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return null;
+  const prototype: unknown = Object.getPrototypeOf(value);
+  if (prototype !== null && prototype !== Object.prototype) return null;
+  const keys = Reflect.ownKeys(value);
+  if (keys.length < 1 || keys.length > 2 || !keys.includes("status")) return null;
+  const owned = Object.create(null) as Record<string, unknown>;
+  for (const key of keys) {
+    if (key !== "status" && key !== "profile") return null;
+    const descriptor = Object.getOwnPropertyDescriptor(value, key);
+    if (descriptor === undefined || !descriptor.enumerable
+      || !Object.hasOwn(descriptor, "value")) return null;
+    const field: unknown = descriptor.value;
+    owned[key] = field;
+  }
+  return owned;
+}
+
+/** Validate a save response against its request; this does not authenticate it. */
+export function parsePublicProfileFormResult(
+  value: unknown,
+  currentProfile: SuiteProfileEditorV2,
+  request: SuiteProfileUpdateV2,
+): PublicProfileFormResult | null {
+  try {
+    // Snapshot both expectations before reflecting over a foreign response.
+    const current = parseSuiteProfileEditorV2(currentProfile);
+    const update = parseSuiteProfileUpdateV2(request);
+    if (!current.ok || !update.ok || update.value.expectedRevision !== current.value.revision) return null;
+    const envelope = snapshot(value);
+    if (envelope === null) return null;
+    const status = envelope["status"];
+    if (status === "unauthorized" || status === "username_required" || status === "invalid_avatar") {
+      return Object.hasOwn(envelope, "profile") ? null : Object.freeze({ status });
+    }
+    if (status !== "saved" && status !== "conflict") return null;
+    if (!Object.hasOwn(envelope, "profile")) return null;
+    const parsed = parseSuiteProfileEditorV2(envelope["profile"]);
+    if (!parsed.ok || parsed.value.accountId !== current.value.accountId) return null;
+    const profile = parsed.value;
+    const expected = update.value;
+    if (status === "conflict") {
+      return profile.revision > expected.expectedRevision
+        ? Object.freeze({ status, profile })
+        : null;
+    }
+    const sameRevision = profile.revision === expected.expectedRevision
+      && matchesRequest(current.value, expected);
+    const nextRevision = expected.expectedRevision < Number.MAX_SAFE_INTEGER
+      && profile.revision === expected.expectedRevision + 1;
+    if ((!sameRevision && !nextRevision) || !matchesRequest(profile, expected)) return null;
+    return Object.freeze({ status, profile });
+  } catch {
+    return null;
+  }
+}

package/src/public-profile-form.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+import { useCallback, useEffect, useId, useRef, useState, type FormEvent } from "react";
+import {
+  SUITE_PROFILE_BIO_MAX_LENGTH, SUITE_PROFILE_NAME_MAX_LENGTH,
+  SUITE_PROFILE_URL_MAX_LENGTH,
+} from "./identity/profiles.js";
+import {
+  parseSuiteProfileEditorV2, parseSuiteProfileUpdateV2,
+  type SuiteProfileEditorV2, type SuiteProfileLinkKeyV2,
+  type SuiteProfileUpdateV2, type SuiteProfileV2Issue,
+} from "./identity/profiles-v2.js";
+import { profileFormClasses as classes } from "./profile-form.stylex.js";
+import { parsePublicProfileFormResult } from "./public-profile-form-result.js";
+import {
+  expandSuiteProfileLinkInput,
+  SUITE_PROFILE_LINK_AFFORDANCES,
+  type SuiteProfileLinkGlyph,
+} from "./public-profile-links.js";
+
+export type { PublicProfileFormResult as SuitePublicProfileFormResult } from "./public-profile-form-result.js";
+
+export type SuitePublicProfileFormProps = Readonly<{
+  className?: string;
+  /** Initial snapshot. Remount explicitly to replace a same-account draft. */
+  initialProfile: SuiteProfileEditorV2;
+  /** Captured on mount. The caller owns authenticated transport and session unmount. */
+  onSave: (request: SuiteProfileUpdateV2) => Promise<unknown>;
+  onSaved?: (profile: SuiteProfileEditorV2) => void;
+}>;
+
+type Visibility = SuiteProfileUpdateV2["publication"] | null;
+type LinkInputs = Record<SuiteProfileLinkKeyV2, string>;
+type FieldErrors = Partial<Record<SuiteProfileV2Issue["field"], string>>;
+
+const LINK_FIELDS = [
+  ["x", "X"], ["github", "GitHub"], ["linkedin", "LinkedIn"],
+  ["bluesky", "Bluesky"], ["instagram", "Instagram"],
+  ["telegram", "Telegram"], ["website", "Website"],
+] as const satisfies readonly (readonly [SuiteProfileLinkKeyV2, string])[];
+
+function expandedLinks(links: LinkInputs): LinkInputs {
+  const expanded = { ...links };
+  for (const key of Object.keys(expanded) as SuiteProfileLinkKeyV2[]) {
+    expanded[key] = expandSuiteProfileLinkInput(key, links[key]);
+  }
+  return expanded;
+}
+
+function LinkMark({ glyph }: { readonly glyph: SuiteProfileLinkGlyph }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={classes.mark}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+    >
+      {glyph.map(([tag, attrs], index) => tag === "circle"
+        ? <circle key={index} {...attrs} />
+        : <path key={index} {...attrs} />)}
+    </svg>
+  );
+}
+
+function linkInputs(profile: SuiteProfileEditorV2): LinkInputs {
+  return {
+    x: profile.links.x ?? "", github: profile.links.github ?? "",
+    linkedin: profile.links.linkedin ?? "", website: profile.links.website ?? "",
+    bluesky: profile.links.bluesky ?? "", instagram: profile.links.instagram ?? "",
+    telegram: profile.links.telegram ?? "",
+  };
+}
+
+function issueMessage(issue: SuiteProfileV2Issue): string {
+  if (issue.field === "name") return issue.reason === "required"
+    ? "Enter a public-facing name."
+    : `Use ${SUITE_PROFILE_NAME_MAX_LENGTH} characters or fewer.`;
+  if (issue.field === "bio") return `Use ${SUITE_PROFILE_BIO_MAX_LENGTH} characters or fewer.`;
+  if (issue.field === "publication") return "Choose whether to keep this profile private or publish it.";
+  if (issue.field === "github") return "Enter a GitHub profile URL, such as https://github.com/username.";
+  if (issue.field === "linkedin") return "Enter a LinkedIn profile URL.";
+  if (issue.field === "website") return "Enter a complete HTTPS URL.";
+  const label = LINK_FIELDS.find(([key]) => key === issue.field)?.[1];
+  return label === undefined ? "Check the profile and try again."
+    : `Enter a valid ${label} handle or profile URL.`;
+}
+
+/** Optional editor only. The authority authenticates saves and applies consent. */
+export function SuitePublicProfileForm(props: SuitePublicProfileFormProps) {
+  const parsed = parseSuiteProfileEditorV2(props.initialProfile);
+  if (!parsed.ok) {
+    return <p className={`suite-profile-error ${classes.error}`} role="alert">The profile is unavailable. Reload the page to try again.</p>;
+  }
+  return <PublicProfileEditor {...props} initialProfile={parsed.value} key={parsed.value.accountId} />;
+}
+
+function PublicProfileEditor({ className, initialProfile, onSave, onSaved }: SuitePublicProfileFormProps) {
+  const id = useId();
+  const [transport] = useState(() => ({ onSave, onSaved }));
+  const [profile, setProfile] = useState(initialProfile);
+  const [name, setName] = useState(initialProfile.name);
+  const [bio, setBio] = useState(initialProfile.bio);
+  const [links, setLinks] = useState(() => linkInputs(initialProfile));
+  const [linksOpen, setLinksOpen] = useState(() =>
+    Object.values(linkInputs(initialProfile)).some(value => value !== ""));
+  const [visibility, setVisibility] = useState<Visibility>(initialProfile.publication === "published" ? "publish" : "private");
+  const [pending, setPending] = useState(false);
+  const [ready, setReady] = useState(false);
+  const [conflict, setConflict] = useState<SuiteProfileEditorV2 | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [formError, setFormError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [unconfirmed, setUnconfirmed] = useState(false);
+  const inFlight = useRef<symbol | null>(null);
+  const liveForm = useRef<HTMLFormElement | null>(null);
+  const abandoned = useRef(false);
+  const nameControl = useRef<HTMLInputElement>(null);
+  const focusLoadedProfile = useRef(false);
+  const pendingFocus = useRef<SuiteProfileV2Issue["field"] | null>(null);
+  // A DOM ref detaches during commit, before a retired transport can resolve
+  // in the gap before passive-effect cleanup. Reconnection never resends it.
+  const attachForm = useCallback((node: HTMLFormElement | null) => {
+    liveForm.current = node;
+    if (node === null) {
+      if (inFlight.current !== null) abandoned.current = true;
+      inFlight.current = null;
+    } else if (abandoned.current) {
+      abandoned.current = false;
+      setPending(false);
+      setUnconfirmed(true);
+      setFormError("The save could not be confirmed. Your draft is preserved. Try saving again, or reload the profile to check its saved state.");
+    }
+  }, []);
+  useEffect(() => {
+    setReady(true);
+  }, []);
+  useEffect(() => {
+    if (focusLoadedProfile.current && conflict === null) {
+      focusLoadedProfile.current = false;
+      nameControl.current?.focus();
+    }
+  }, [conflict]);
+  useEffect(() => {
+    const field = pendingFocus.current;
+    if (field === null) return;
+    pendingFocus.current = null;
+    liveForm.current?.querySelector<HTMLElement>(`[id="${id}-${field}"]`)?.focus();
+  });
+
+  function clearField(field: SuiteProfileV2Issue["field"]) {
+    setFieldErrors(current => { const next = { ...current }; delete next[field]; return next; });
+    setNotice(null);
+  }
+
+  function applyProfile(next: SuiteProfileEditorV2, nextVisibility: Visibility) {
+    setProfile(next);
+    setName(next.name);
+    setBio(next.bio);
+    setLinks(linkInputs(next));
+    setVisibility(nextVisibility);
+    setUnconfirmed(false);
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!ready || liveForm.current !== event.currentTarget || inFlight.current !== null || conflict !== null) return;
+    setNotice(null);
+    setFormError(null);
+    setFieldErrors({});
+    const parsed = parseSuiteProfileUpdateV2({
+      schemaVersion: 2, expectedRevision: profile.revision,
+      name, bio, links: expandedLinks(links),
+      avatarRef: profile.avatarRef, publication: visibility,
+    });
+    if (!parsed.ok) {
+      setFieldErrors({ [parsed.error.field]: issueMessage(parsed.error) });
+      if (parsed.error.field in SUITE_PROFILE_LINK_AFFORDANCES) setLinksOpen(true);
+      pendingFocus.current = parsed.error.field;
+      return;
+    }
+    if (parsed.value.publication === "publish" && profile.username === null) {
+      setFieldErrors({ publication: "Choose a username in account settings before publishing." });
+      return;
+    }
+    const dispatch = Symbol();
+    inFlight.current = dispatch;
+    setPending(true);
+    let saved: SuiteProfileEditorV2 | null = null;
+    try {
+      const raw = await transport.onSave(parsed.value);
+      if (liveForm.current === null || inFlight.current !== dispatch) return;
+      const result = parsePublicProfileFormResult(raw, profile, parsed.value);
+      if (result === null) throw new Error("Unconfirmed profile result.");
+      if (result.status === "conflict") {
+        setConflict(result.profile);
+        setVisibility(null);
+        setUnconfirmed(false);
+        setFormError("This profile changed elsewhere. Your draft is still below. Load the latest profile to replace it, then review visibility before saving.");
+      } else if (result.status === "saved") {
+        applyProfile(result.profile, result.profile.publication === "published" ? "publish" : "private");
+        setNotice(result.profile.publication === "published" ? "Public profile saved." : "Private profile saved.");
+        saved = result.profile;
+      } else if (result.status === "unauthorized") {
+        setFormError("Your account session is unavailable. Sign in again before saving.");
+      } else if (result.status === "username_required") {
+        setFormError("Choose a username in account settings, then reload this profile before publishing.");
+      } else {
+        setFormError("Your profile image is unavailable. Reload the profile before saving.");
+      }
+    } catch {
+      if (liveForm.current === null || inFlight.current !== dispatch) return;
+      setUnconfirmed(true);
+      setFormError("The save could not be confirmed. Your draft is preserved. Try saving again, or reload the profile to check its saved state.");
+    } finally {
+      if (liveForm.current !== null && inFlight.current === dispatch) {
+        inFlight.current = null;
+        setPending(false);
+      }
+    }
+    if (saved !== null && liveForm.current !== null) {
+      try { transport.onSaved?.(saved); }
+      catch {
+        if (liveForm.current !== null) setFormError("The profile was saved, but the page could not refresh. Reload the page.");
+      }
+    }
+  }
+
+  const disabled = !ready || pending || conflict !== null;
+  const currentProfile = conflict ?? profile;
+  const action = pending ? "Saving profile" : visibility === "publish"
+    ? profile.publication === "published" ? "Save public profile" : "Publish profile"
+    : visibility === "private" && profile.publication === "published"
+      ? "Make profile private" : visibility === "private" ? "Save private profile" : "Save profile";
+  const formClass = `suite-profile-form suite-public-profile-form ${classes.form}${className === undefined ? "" : ` ${className}`}`;
+  const describedBy = (field: SuiteProfileV2Issue["field"]) => fieldErrors[field] === undefined ? undefined : `${id}-${field}-error`;
+  const fieldError = (field: SuiteProfileV2Issue["field"]) => fieldErrors[field] === undefined ? null
+    : <span className={`suite-profile-error ${classes.error}`} id={`${id}-${field}-error`} role="alert">{fieldErrors[field]}</span>;
+
+  return (
+    <form aria-busy={!ready || pending} className={formClass} method="post" onSubmit={event => { void submit(event); }} ref={attachForm}>
+      <noscript><p className={classes.note}>Enable JavaScript to edit this profile. No changes can be saved from this form without it.</p></noscript>
+      {formError === null ? null : <p className={`suite-profile-error ${classes.error}`} role="alert">{formError}</p>}
+      {conflict === null ? null : <button className={classes.button} onClick={() => {
+        applyProfile(conflict, null);
+        setConflict(null);
+        setFieldErrors({});
+        setFormError(null);
+        setNotice("Latest profile loaded. Choose visibility before saving.");
+        focusLoadedProfile.current = true;
+      }} type="button">Load latest profile</button>}
+      <div className={`suite-profile-field ${classes.field}`}>
+        <label className={classes.label} htmlFor={`${id}-name`}>Public-facing name</label>
+        <input aria-describedby={describedBy("name")} aria-invalid={fieldErrors.name === undefined ? undefined : true}
+          autoComplete="off" className={classes.control} disabled={disabled} id={`${id}-name`}
+          maxLength={SUITE_PROFILE_NAME_MAX_LENGTH} onChange={event => { setName(event.currentTarget.value); clearField("name"); }}
+          placeholder="Ada Lovelace" ref={nameControl} required type="text" value={name} />
+        {fieldError("name")}
+      </div>
+      <div className={`suite-profile-field ${classes.field}`}>
+        <label className={classes.label} htmlFor={`${id}-bio`}>Bio</label>
+        <textarea aria-describedby={describedBy("bio")} aria-invalid={fieldErrors.bio === undefined ? undefined : true}
+          className={classes.textarea} disabled={disabled} id={`${id}-bio`} maxLength={SUITE_PROFILE_BIO_MAX_LENGTH}
+          onChange={event => { setBio(event.currentTarget.value); clearField("bio"); }}
+          placeholder="A short introduction." rows={3} value={bio} />
+        {fieldError("bio")}
+      </div>
+      <details className={`suite-profile-links ${classes.links}`} onToggle={event => { setLinksOpen(event.currentTarget.open); }} open={linksOpen}>
+        <summary className={classes.linksSummary}>Links <span className={classes.linksHint}>optional; a handle is enough</span></summary>
+        <div className={classes.linksBody}>
+          {LINK_FIELDS.map(([key, label]) => {
+            const affordance = SUITE_PROFILE_LINK_AFFORDANCES[key];
+            return (
+              <div className={`suite-profile-field ${classes.field}`} key={key}>
+                <label className={classes.label} htmlFor={`${id}-${key}`}>{label}</label>
+                <div className={classes.affix}>
+                  <span aria-hidden="true" className={classes.affixLead}>
+                    <LinkMark glyph={affordance.glyph} />
+                    <span>{affordance.prefix}</span>
+                  </span>
+                  <input aria-describedby={describedBy(key)} aria-invalid={fieldErrors[key] === undefined ? undefined : true}
+                    autoCapitalize="none" autoComplete="off" className={classes.affixInput} disabled={disabled} id={`${id}-${key}`}
+                    inputMode="url" maxLength={SUITE_PROFILE_URL_MAX_LENGTH} onChange={event => {
+                      const value = event.currentTarget.value;
+                      setLinks(current => ({ ...current, [key]: value })); clearField(key);
+                    }} placeholder={affordance.placeholder} spellCheck={false} type="text" value={links[key]} />
+                </div>
+                {fieldError(key)}
+              </div>
+            );
+          })}
+        </div>
+      </details>
+      <fieldset aria-describedby={`${id}-visibility-note${fieldErrors.publication === undefined ? "" : ` ${id}-publication-error`}`}
+        aria-invalid={fieldErrors.publication === undefined ? undefined : true}
+        className={`suite-profile-visibility ${classes.visibility}`} disabled={disabled} id={`${id}-publication`} tabIndex={-1}>
+        <legend className={classes.label}>Profile visibility</legend>
+        <p className={classes.note} id={`${id}-visibility-note`}>{unconfirmed ? "Publication status is unconfirmed." : currentProfile.publication === "published"
+          ? `The saved profile for @${currentProfile.username} is public.` : "The saved profile is private."} Your choice takes effect when you save.</p>
+        <label className={classes.choice}>
+          <input checked={visibility === "private"} className={classes.radio} name="publication" onChange={() => { setVisibility("private"); clearField("publication"); }} required type="radio" value="private" />
+          <span>Keep private</span>
+        </label>
+        <label className={classes.choice}>
+          <input aria-describedby={`${id}-publication-note`} checked={visibility === "publish"} className={classes.radio}
+            disabled={profile.username === null} name="publication" onChange={() => { setVisibility("publish"); clearField("publication"); }} required type="radio" value="publish" />
+          <span>Publish profile</span>
+        </label>
+        <p className={classes.note} id={`${id}-publication-note`}>{profile.username === null ? "Choose a username in account settings before publishing. You can still save privately." : "Anyone can read your published name, bio, social links, and profile image. Your sign-in email is not included."}</p>
+        {fieldError("publication")}
+      </fieldset>
+      <button className={classes.button} disabled={disabled} type="submit">{action}</button>
+      <p aria-live="polite" className={classes.note} role="status">{notice}</p>
+    </form>
+  );
+}

package/src/public-profile-links.ts

@@ -0,0 +1,100 @@
+import type { SuiteProfileLinkKeyV2 } from "./identity/profiles-v2.js";
+
+/**
+ * Brand glyphs adapted from @hugeicons/core-free-icons (MIT, hugeicons.com).
+ * The geometry is vendored so this opt-in form surface stays free of a
+ * runtime icon dependency; stroke presentation is applied by the renderer.
+ */
+export type SuiteProfileLinkGlyph = ReadonlyArray<
+  | readonly ["path", Readonly<{ d: string }>]
+  | readonly ["circle", Readonly<{ cx: number; cy: number; r: number }>]
+>;
+
+export type SuiteProfileLinkAffordance = Readonly<{
+  glyph: SuiteProfileLinkGlyph;
+  placeholder: string;
+  prefix: string;
+}>;
+
+const X_GLYPH: SuiteProfileLinkGlyph = [
+  ["path", { d: "M3 21L10.5484 13.4516M21 3L13.4516 10.5484M13.4516 10.5484L8 3H3L10.5484 13.4516M13.4516 10.5484L21 21H16L10.5484 13.4516" }],
+];
+
+const GITHUB_GLYPH: SuiteProfileLinkGlyph = [
+  ["path", { d: "M10 20.5675C6.57143 21.7248 3.71429 20.5675 2 17" }],
+  ["path", { d: "M10 22V18.7579C10 18.1596 10.1839 17.6396 10.4804 17.1699C10.6838 16.8476 10.5445 16.3904 10.1771 16.2894C7.13394 15.4528 5 14.1077 5 9.64606C5 8.48611 5.38005 7.39556 6.04811 6.4464C6.21437 6.21018 6.29749 6.09208 6.31748 5.9851C6.33746 5.87813 6.30272 5.73852 6.23322 5.45932C5.95038 4.32292 5.96871 3.11619 6.39322 2.02823C6.39322 2.02823 7.27042 1.74242 9.26698 2.98969C9.72282 3.27447 9.95075 3.41686 10.1515 3.44871C10.3522 3.48056 10.6206 3.41384 11.1573 3.28041C11.8913 3.09795 12.6476 3 13.5 3C14.3524 3 15.1087 3.09795 15.8427 3.28041C16.3794 3.41384 16.6478 3.48056 16.8485 3.44871C17.0493 3.41686 17.2772 3.27447 17.733 2.98969C19.7296 1.74242 20.6068 2.02823 20.6068 2.02823C21.0313 3.11619 21.0496 4.32292 20.7668 5.45932C20.6973 5.73852 20.6625 5.87813 20.6825 5.9851C20.7025 6.09207 20.7856 6.21019 20.9519 6.4464C21.6199 7.39556 22 8.48611 22 9.64606C22 14.1077 19.8661 15.4528 16.8229 16.2894C16.4555 16.3904 16.3162 16.8476 16.5196 17.1699C16.8161 17.6396 17 18.1596 17 18.7579V22" }],
+];
+
+const LINKEDIN_GLYPH: SuiteProfileLinkGlyph = [
+  ["path", { d: "M7 10V17" }],
+  ["path", { d: "M11 13V17M11 13C11 11.3431 12.3431 10 14 10C15.6569 10 17 11.3431 17 13V17M11 13V10" }],
+  ["path", { d: "M7.125 6.75H7M7.25 6.75C7.25 6.88807 7.13807 7 7 7C6.86193 7 6.75 6.88807 6.75 6.75C6.75 6.61193 6.86193 6.5 7 6.5C7.13807 6.5 7.25 6.61193 7.25 6.75Z" }],
+  ["path", { d: "M3 12C3 7.75736 3 5.63604 4.31802 4.31802C5.63604 3 7.75736 3 12 3C16.2426 3 18.364 3 19.682 4.31802C21 5.63604 21 7.75736 21 12C21 16.2426 21 18.364 19.682 19.682C18.364 21 16.2426 21 12 21C7.75736 21 5.63604 21 4.31802 19.682C3 18.364 3 16.2426 3 12Z" }],
+];
+
+const WEBSITE_GLYPH: SuiteProfileLinkGlyph = [
+  ["circle", { cx: 12, cy: 12, r: 10 }],
+  ["path", { d: "M8 12C8 18 12 22 12 22C12 22 16 18 16 12C16 6 12 2 12 2C12 2 8 6 8 12Z" }],
+  ["path", { d: "M21 15H3" }],
+  ["path", { d: "M21 9H3" }],
+];
+
+const BLUESKY_GLYPH: SuiteProfileLinkGlyph = [
+  ["path", { d: "M12 11.4963C11.8936 11.2963 7.45492 3 3.50417 3C1.33647 3 2.00456 8 2.50443 10.5C2.70653 11.5108 3.50417 14.5 8.003 14C8.003 14 4.00404 14.5 4.00404 17C4.00404 18.5 6.50339 21 8.50287 21C10.4606 21 11.9391 16.6859 12 16.5058C12.0609 16.6859 13.5394 21 15.4971 21C17.4966 21 19.996 18.5 19.996 17C19.996 14.5 15.997 14 15.997 14C20.4958 14.5 21.2935 11.5108 21.4956 10.5C21.9954 8 22.6635 3 20.4958 3C16.5451 3 12.1064 11.2963 12 11.4963Z" }],
+];
+
+const INSTAGRAM_GLYPH: SuiteProfileLinkGlyph = [
+  ["path", { d: "M3 12C3 7.75736 3 5.63604 4.31802 4.31802C5.63604 3 7.75736 3 12 3C16.2426 3 18.364 3 19.682 4.31802C21 5.63604 21 7.75736 21 12C21 16.2426 21 18.364 19.682 19.682C18.364 21 16.2426 21 12 21C7.75736 21 5.63604 21 4.31802 19.682C3 18.364 3 16.2426 3 12Z" }],
+  ["path", { d: "M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" }],
+  ["path", { d: "M17.3748 6.75024H17.2498M17.4998 6.75024C17.4998 6.88832 17.3878 7.00024 17.2498 7.00024C17.1117 7.00024 16.9998 6.88832 16.9998 6.75024C16.9998 6.61217 17.1117 6.50024 17.2498 6.50024C17.3878 6.50024 17.4998 6.61217 17.4998 6.75024Z" }],
+];
+
+const TELEGRAM_GLYPH: SuiteProfileLinkGlyph = [
+  ["path", { d: "M11.9854 15.4083L15.2268 19.0936C16.4277 20.4589 17.0282 21.1416 17.6567 20.9754C18.2852 20.8092 18.5008 19.9108 18.9318 18.1138L21.3229 8.1459C21.9868 5.37832 22.3187 3.99454 21.5808 3.312C20.843 2.62947 19.564 3.13725 17.0061 4.15282L5.13876 8.86449C3.09293 9.67674 2.07001 10.0829 2.00507 10.7808C1.99842 10.8522 1.99831 10.9241 2.00474 10.9955C2.06754 11.6937 3.08921 12.1033 5.13255 12.9223C6.05838 13.2934 6.5213 13.479 6.8532 13.8344C6.89052 13.8743 6.9264 13.9157 6.96078 13.9584C7.26658 14.3384 7.39709 14.8371 7.65808 15.8344L8.14653 17.701C8.4005 18.6715 8.52749 19.1568 8.86008 19.223C9.19267 19.2891 9.48225 18.8867 10.0614 18.0819L11.9854 15.4083ZM11.9854 15.4083L11.6676 15.0771C11.3059 14.7001 11.1251 14.5117 11.1251 14.2775C11.1251 14.0433 11.3059 13.8548 11.6676 13.4778L15.2406 9.75409" }],
+];
+
+export const SUITE_PROFILE_LINK_AFFORDANCES = {
+  bluesky: { glyph: BLUESKY_GLYPH, placeholder: "name.bsky.social", prefix: "bsky.app/profile/" },
+  github: { glyph: GITHUB_GLYPH, placeholder: "username", prefix: "github.com/" },
+  instagram: { glyph: INSTAGRAM_GLYPH, placeholder: "handle", prefix: "instagram.com/" },
+  linkedin: { glyph: LINKEDIN_GLYPH, placeholder: "handle", prefix: "linkedin.com/in/" },
+  telegram: { glyph: TELEGRAM_GLYPH, placeholder: "handle", prefix: "t.me/" },
+  website: { glyph: WEBSITE_GLYPH, placeholder: "example.com", prefix: "https://" },
+  x: { glyph: X_GLYPH, placeholder: "handle", prefix: "x.com/" },
+} satisfies Readonly<Record<SuiteProfileLinkKeyV2, SuiteProfileLinkAffordance>>;
+
+const SCHEME = /^https?:\/\//iu;
+
+/**
+ * Expands a bare handle or schemeless URL into the canonical HTTPS form the
+ * parser accepts, so each link field can be filled with just a handle. The
+ * authoritative normalizer still validates the expanded value on save.
+ */
+export function expandSuiteProfileLinkInput(
+  key: SuiteProfileLinkKeyV2,
+  raw: string,
+): string {
+  const trimmed = raw.trim();
+  if (trimmed === "" || SCHEME.test(trimmed)) return trimmed;
+  const withoutAt = trimmed.startsWith("@") ? trimmed.slice(1) : trimmed;
+  if (key === "website") return `https://${trimmed}`;
+  if (withoutAt.includes("/")) return `https://${withoutAt}`;
+  switch (key) {
+    case "bluesky": {
+      const handle = withoutAt.includes(".")
+        ? withoutAt
+        : `${withoutAt}.bsky.social`;
+      return `https://bsky.app/profile/${handle}`;
+    }
+    case "github":
+      return `https://github.com/${withoutAt}`;
+    case "instagram":
+      return `https://www.instagram.com/${withoutAt}`;
+    case "linkedin":
+      return `https://www.linkedin.com/in/${withoutAt}`;
+    case "telegram":
+      return `https://t.me/${withoutAt}`;
+    case "x":
+      return `https://x.com/${withoutAt}`;
+  }
+}