@plasius/profile 1.0.4

package/dist-cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UserProvider.js"), exports);
+__exportStar(require("./SettingsProvider.js"), exports);
+__exportStar(require("./Pages/Settings/index.js"), exports);

package/docs/adrs/adr-0001-profile-package-scope.md

@@ -0,0 +1,21 @@
+# ADR-0001: Standalone @plasius/profile Package Scope
+
+- Date: 2026-02-11
+- Status: Accepted
+
+## Context
+
+This package was previously maintained as a workspace-only module inside
+`plasius-ltd-site`. External consumers and remote builds require it to be
+installable from npm without monorepo-local links.
+
+## Decision
+
+Move `@plasius/profile` to a standalone root package with independent build,
+test, governance, CI, and publish workflows.
+
+## Consequences
+
+- The package can be versioned and released independently.
+- `plasius-ltd-site` and other repositories can depend on npm-published versions.
+- Build and lint rules must no longer rely on monorepo-relative tsconfig paths.

package/docs/adrs/adr-0002-public-repo-governance.md

@@ -0,0 +1,24 @@
+# ADR-0002: Public Repository Governance Baseline
+
+- Date: 2026-02-11
+- Status: Accepted
+
+## Context
+
+Public npm distribution requires transparent contributor and security policy
+artifacts and consistent release automation.
+
+## Decision
+
+Include these baseline governance assets:
+
+- `CODE_OF_CONDUCT.md`
+- `CONTRIBUTORS.md`
+- `SECURITY.md`
+- `legal/` CLA documents
+- CI/CD GitHub Actions workflows
+
+## Consequences
+
+- Public contributors and consumers can follow a predictable governance process.
+- Release quality gates (build, test, coverage, publish) are standardized.

package/docs/adrs/adr-template.md

@@ -0,0 +1,35 @@
+# Architectural Decision Record (ADR)
+
+## Title
+
+> Concise, descriptive title of the decision.
+
+## Status
+
+- Proposed | Accepted | Rejected | Superseded | Deprecated
+- Date: YYYY-MM-DD
+- Version: 1.0
+
+## Context
+
+Describe the problem, constraints, and relevant background.
+
+## Decision
+
+Clear statement of the selected approach.
+
+## Alternatives Considered
+
+- Option A
+- Option B
+- Option C
+
+## Consequences
+
+- Positive outcomes
+- Negative outcomes / trade-offs
+- Follow-up work
+
+## References
+
+- https://adr.github.io/

package/legal/CLA-REGISTRY.csv

@@ -0,0 +1 @@
+type,github_handle,full_name,company,email,date,approver

package/legal/CLA.md

@@ -0,0 +1,22 @@
+# Contributor License Agreements (CLA)
+
+To protect the intellectual property of this project and ensure clarity of rights, all contributors must sign a Contributor License Agreement (CLA) before their first contribution.
+
+## Which CLA should I sign?
+
+- **Individual CLA**: If you are contributing personally and not on behalf of an employer, sign the [Individual CLA](INDIVIDUAL_CLA.md).
+- **Corporate CLA**: If you are contributing as part of your work for a company, the company should sign the [Corporate CLA](CORPORATE_CLA.md).
+
+## How to sign
+
+1. Download the appropriate CLA file (Individual or Corporate).
+2. Fill in the required details, sign, and date it.
+3. Email a PDF copy of the signed document to **[contributors@plasius.co.uk](mailto:contributors@plasius.co.uk)** with subject: `CLA – Individual` or `CLA – Corporate`.
+
+## Registry
+
+All signed CLAs are logged internally in the CLA registry (`CLA-REGISTRY.csv`).
+
+## Questions?
+
+If you have any questions about which CLA to sign or how the process works, please email **[contributors@plasius.co.uk](mailto:contributors@plasius.co.uk)**.

package/legal/CORPORATE_CLA.md

@@ -0,0 +1,57 @@
+# Corporate Contributor License Agreement (CLA)
+
+## Purpose
+
+This Corporate Contributor License Agreement ("Agreement") is intended to protect the intellectual property rights of the contributors and the project, ensure clear licensing terms for contributions, and maintain trust within the community. By signing this Agreement, the corporation agrees to the terms that facilitate the use, distribution, and modification of contributions under the project's licensing framework.
+
+## Agreement
+
+1. **Representation of Authority**  
+   The undersigned individual represents and warrants that they have the full legal authority to enter into this Agreement on behalf of the corporation named below ("Corporation") and to grant the rights contained herein.
+
+2. **Grant of Copyright License**  
+   The Corporation hereby grants to the project maintainers and users a perpetual, worldwide, non-exclusive, royalty-free, irrevocable copyright license to use, reproduce, prepare derivative works of, publicly display, publicly perform, sublicense, and distribute the contributions submitted to the project.
+
+3. **Grant of Patent License**  
+   The Corporation hereby grants to the project maintainers and users a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under any patent claims that are necessarily infringed by the contributions to make, use, sell, offer for sale, import, and otherwise dispose of the contributions or derivative works thereof.
+
+4. **Warranties and Representations**  
+   The Corporation represents and warrants that:
+
+- The contributions are the original work of the Corporation or that the Corporation has sufficient rights to grant the licenses herein.
+- The submission of the contributions does not violate any agreements or rights of third parties.
+
+5. **No Revocation**  
+   This license is granted on a perpetual basis and cannot be revoked, provided that the terms of this Agreement are met.
+
+6. **Governing Law**
+   This Agreement shall be governed by and construed in accordance with the laws of the United Kingdom, without regard to its conflict of laws principles.
+
+7. **Execution**
+
+This Agreement is effective upon signature by the authorized representative of the Corporation. Please sign and date this document, then email a scanned PDF copy to [contributors@plasius.co.uk](mailto:contributors@plasius.co.uk).
+
+---
+
+### **@plasius/api**
+
+**Corporation Legal Name:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Authorized Representative:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Title:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Email:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Date:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Signature:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+---
+
+## How to Sign
+
+- Download this file as a template.
+- Fill in the Corporation’s legal name, authorized representative, title, email, date, and provide a signature.
+- Sign and date the document.
+- Send a scanned copy of the signed Agreement to [contributors@plasius.co.uk](mailto:contributors@plasius.co.uk).

package/legal/INDIVIDUAL_CLA.md

@@ -0,0 +1,91 @@
+# Individual Contributor License Agreement (CLA)
+
+**Project:** @plasius/api (Plasius LTD)  
+**Version:** 1.0 — 2025‑09‑12  
+**Contact:** [contributors@plasius.co.uk](mailto:contributors@plasius.co.uk)
+
+---
+
+## 1. Definitions
+
+- **"You"** (or **"Contributor"**) means the individual signing this CLA and submitting Contributions to the Project.
+- **"Contribution"** means any original work of authorship, including code, documentation, data, designs, or feedback that You submit to the Project in any form (e.g., pull request, issue comment, email, file upload).
+- **"Project"** means the @plasius/api repositories and related materials owned or managed by **Plasius LTD**.
+
+## 2. Copyright License Grant
+
+You hereby grant to Plasius LTD a **perpetual, worldwide, non‑exclusive, transferable, sublicensable, royalty‑free, irrevocable** copyright license to:
+
+- use, reproduce, publicly display, publicly perform, modify, create derivative works of, and
+- distribute Contributions in source and object form,
+- and to **sublicense** these rights under any terms Plasius LTD chooses, including proprietary or open‑source licenses.
+
+## 3. Patent License Grant
+
+You hereby grant to Plasius LTD and its sublicensees a **perpetual, worldwide, non‑exclusive, transferable, royalty‑free, irrevocable** patent license to **make, have made, use, offer to sell, sell, import, and otherwise transfer** the Contribution and derivative works thereof, where such license applies only to patent claims that You **own or control** and that would be infringed by Your Contribution or its combination with the Project.
+
+## 4. Moral Rights & Attribution
+
+To the maximum extent permitted by applicable law, You **waive** and agree not to assert any moral rights (e.g., rights of attribution or integrity) in or to the Contribution against Plasius LTD. Plasius LTD may, but is not required to, credit You.
+
+## 5. Representations & Warranties
+
+You represent that:
+
+1. **Originality / Rights:** Each Contribution is Your original creation, or You have sufficient rights to submit it and grant the licenses above.
+2. **No Confidential Info:** Contributions **do not** include confidential information or trade secrets of any third party.
+3. **No Infringement:** To the best of Your knowledge, Contributions do not infringe any third‑party IP rights.
+4. **Employment / Contractor Status:** If Your employer or a third party might claim rights in Your Contribution, You have obtained **written permission** to make the Contribution and grant these licenses (attach or reference below), or Your Contribution is made **outside the scope** of your employment and without using your employer’s confidential information or resources.
+5. **Compliance:** You will follow the Project’s policies (e.g., Code of Conduct, Security Policy) and applicable laws.
+
+## 6. Third‑Party Code
+
+If Your Contribution includes code, data, or other material from a third party, You will **identify the material and its license** in the pull request or submission, and ensure it is **compatible** with the Project’s licensing model. You will not submit material subject to terms that require the Project to disclose proprietary source code (e.g., certain copyleft obligations) unless the Project has **pre‑approved** such inclusion in writing.
+
+## 7. Scope & Duration
+
+- This CLA covers **all past and future** Contributions You submit to the Project, unless and until You provide written notice to **revoke** it.
+- Revocation is **not retroactive**: rights granted for prior Contributions remain in effect.
+
+## 8. Disclaimer
+
+THE CONTRIBUTION IS PROVIDED “AS IS” WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON‑INFRINGEMENT.
+
+## 9. Governing Law & Jurisdiction
+
+This CLA is governed by the **laws of England and Wales**, and the courts of England and Wales shall have **exclusive jurisdiction** over any dispute arising out of or relating to it.
+
+## 10. Entire Agreement
+
+This CLA is the entire agreement between You and Plasius LTD regarding Contributions. It supersedes any prior discussions relating to Contributions. If any provision is held unenforceable, the remaining provisions remain in full force.
+
+---
+
+## 11. Contributor Information & Signature
+
+By signing below, You agree to the terms of this CLA for Your Contributions to the Project.
+
+**Full Name:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Email:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**GitHub Handle:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Address (optional):** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Employer (if applicable):** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**If employed:** ☐ I confirm Contributions are made outside the scope of employment **or** ☐ I have attached my employer’s written permission.
+
+**Signature:** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+**Date (YYYY‑MM‑DD):** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
+
+_Electronic signatures are accepted. You may type your name in the Signature field and email a PDF copy._
+
+**Submission:** Please email the signed CLA to **[contributors@plasius.co.uk](mailto:contributors@plasius.co.uk)** with subject line: `CLA – Individual – <GitHubHandle>`.
+
+**(Optional) Attachments / Notes:**
+
+- Employer permission letter (if required)
+- Third‑party license disclosures (if any)

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@plasius/profile",
+  "version": "1.0.4",
+  "main": "./dist-cjs/index.js",
+  "types": "./dist/index.d.ts",
+  "private": false,
+  "type": "module",
+  "description": "User Profile component for Plasius projects",
+  "scripts": {
+    "build": "tsc --build --listEmittedFiles && rsync -av --include '*/' --include '*.module.css' --exclude '*' src/ dist/ || true && npm run build:cjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:watch": "vitest --coverage",
+    "clean": "rimraf dist-cjs dist tsconfig.tsbuildinfo",
+    "reset:clean": "rm -rf node_modules package-lock.json && npm run clean",
+    "audit:ts": "tsc --noEmit --pretty",
+    "audit:eslint": "eslint \"{src,apps,packages}/**/*.{ts,tsx}\" --max-warnings=0 --ext .ts,.tsx",
+    "audit:deps": "depcheck --skip-missing=true",
+    "audit:npm": "npm audit --audit-level=moderate || true",
+    "audit:test": "vitest run --coverage",
+    "audit:all": "npm-run-all -l audit:ts audit:eslint audit:deps audit:npm audit:test",
+    "build:cjs": "tsc -p tsconfig.json --module commonjs --moduleResolution node --outDir dist-cjs --tsBuildInfoFile dist-cjs/tsconfig.tsbuildinfo --listEmittedFiles && rsync -av --include '*/' --include '*.module.css' --exclude '*' src/ dist-cjs/ || true",
+    "lint": "eslint .",
+    "prepare": "npm run build"
+  },
+  "author": "Plasius LTD <development@plasius.co.uk>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^19.1.0"
+  },
+  "dependencies": {
+    "@plasius/auth": "^1.0.0",
+    "@plasius/entity-manager": "^1.0.4",
+    "@plasius/environment": "^1.0.0",
+    "@plasius/react-query": "^1.0.0",
+    "@plasius/react-state": "^1.2.0",
+    "@plasius/schema": "^1.0.0",
+    "@plasius/translations": "^1.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.8",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "ajv": "^6.12.6",
+    "depcheck": "^1.4.7",
+    "eslint": "^9.33.0",
+    "npm-run-all": "^4.1.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "zod": "^4.0.17",
+    "rimraf": "^6.0.1"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist-cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "./dist/index.js",
+  "files": [
+    "dist",
+    "dist-cjs",
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "SECURITY.md",
+    "CODE_OF_CONDUCT.md",
+    "CONTRIBUTORS.md",
+    "docs",
+    "legal"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Plasius-LTD/profile.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Plasius-LTD/profile/issues"
+  },
+  "homepage": "https://github.com/Plasius-LTD/profile#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": [
+    {
+      "type": "patreon",
+      "url": "https://www.patreon.com/c/plasiusltd/membership"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/Plasius-LTD"
+    }
+  ],
+  "engines": {
+    "node": ">=22.12"
+  }
+}

package/src/Pages/Settings/Settings.module.css

@@ -0,0 +1,13 @@
+.avatarPreview {
+  margin-top: 10px;
+  border-radius: 50%;
+  overflow: hidden;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-surface-muted);
+  box-shadow: var(--shadow-elevation-low);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}

package/src/Pages/Settings/Settings.tsx

@@ -0,0 +1,228 @@
+import React, { useEffect } from "react";
+import type { UserAvatarEntity, UserName } from "@plasius/entity-manager";
+import {
+  userEntitySchema,
+  userAvatarSchema,
+  UserEmailPreferences,
+  PreferredDisplayOrder,
+} from "@plasius/entity-manager";
+import { useAuthorizedFetch } from "@plasius/auth";
+import { useI18n } from "@plasius/translations";
+import { UserStore } from "../../UserProvider.js";
+
+import styles from "./Settings.module.css";
+
+const getEmailPreferenceOptions = () =>
+  Object.entries(UserEmailPreferences).map(([key, value]) => ({
+    label: key.replace(/([a-z])([A-Z])/g, "$1 $2"), // Optional: format nicely
+    value,
+  }));
+
+const getPreferredDisplayOrder = () =>
+  Object.entries(PreferredDisplayOrder).map(([key, value]) => ({
+    label: key.replace(/([a-z])([A-Z])/g, "$1 $2"), // Optional: format nicely
+    value,
+  }));
+
+export function SettingsPage() {
+  const authorizedFetch = useAuthorizedFetch();
+  const { t } = useI18n();
+  const { user } = UserStore.useStore();
+  const dispatch = UserStore.useDispatch();
+
+  useEffect(() => {
+    if (user) {
+      const res = userEntitySchema.validate(user);
+      if (!res.valid || res.errors?.length != 0) {
+        throw new Error(
+          `Invalid user ${String(user)}. Errors: ${res.errors?.join("\n") ?? "unknown"}`
+        );
+      }
+    }
+  }, [user]);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+
+    if (name.startsWith("name.")) {
+      const [, field] = name.split(".");
+      dispatch({ type: "updateNameField", payload: { field, value } });
+    } else {
+      dispatch({ type: "updateField", payload: { field: name, value } });
+    }
+  };
+
+  const uploadAvatar = async (file: File): Promise<unknown> => {
+    const formData = new FormData();
+    formData.append("avatar", file); // "avatar" must match the expected server-side field
+
+    const response = await authorizedFetch(`/user/avatar`, {
+      method: "POST",
+      body: formData,
+      headers: {
+        // Do NOT set Content-Type explicitly; browser will set it with boundary
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to upload avatar");
+    }
+
+    const data: unknown = await response.json();
+    return data; // e.g. { imageUrl: "...uploaded file url..." }
+  };
+
+  const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const uploadedAvatar = await uploadAvatar(file);
+      const validatedAvatar = userAvatarSchema.validate(uploadedAvatar);
+
+      if (!validatedAvatar.valid || validatedAvatar.errors?.length) {
+        throw new Error(
+          (validatedAvatar.errors ?? []).map((e) => String(e)).join("; ")
+        );
+      }
+
+      const base = validatedAvatar.value as unknown as UserAvatarEntity;
+      const userAvatar: UserAvatarEntity = {
+        ...base,
+        originalName: file.name,
+      };
+
+      dispatch({
+        type: "updateField",
+        payload: {
+          field: "avatar",
+          value: userAvatar,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const errors = userEntitySchema.validate(user);
+    if (errors) {
+      console.warn("Validation failed", errors);
+      return;
+    }
+
+    console.info("Saved:", user);
+  };
+
+  return (
+    <div className={styles.settingsContainer}>
+      <form onSubmit={handleSubmit} className={styles.settingsForm}>
+        <h2>{t("profile_settings")}</h2>
+        <label className={styles.label}>
+          {t("upload_avatar")}
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleAvatarChange}
+            className={styles.input}
+          />
+        </label>
+
+        {user?.avatar?.url && (
+          <div>
+            <img
+              src={(user?.avatar as UserAvatarEntity)?.url as string}
+              alt={t("avatar_preview")}
+              className={styles.avatarPreview}
+            />
+          </div>
+        )}
+        <label className={styles.label}>
+          {t("first_name")}
+          <input
+            name="name.firstName"
+            value={(user?.name as UserName)?.firstName as string}
+            onChange={handleChange}
+            className={styles.input}
+          />
+        </label>
+        <label className={styles.label}>
+          {t("middle_name")}
+          <input
+            name="name.middleName"
+            value={(user?.name as UserName)?.middleName as string}
+            onChange={handleChange}
+            className={styles.input}
+          />
+        </label>
+        <label className={styles.label}>
+          {t("last_name")}
+          <input
+            name="name.lastName"
+            value={(user?.name as UserName)?.lastName as string}
+            onChange={handleChange}
+            className={styles.input}
+          />
+        </label>
+        <label className={styles.label}>
+          {t("display_name")}
+          <input
+            name="name.displayName"
+            value={(user?.name as UserName)?.displayName as string}
+            onChange={handleChange}
+            className={styles.input}
+          />
+        </label>
+        <label className={styles.label}>
+          {t("preferred_name_display")}
+          <select
+            name="displayPreferences"
+            value={(user?.name as UserName).preferredDisplayOrder as PreferredDisplayOrder}
+            onChange={handleChange}
+            className={styles.select}
+          >
+            <option value="">{t("select_preference")}</option>
+            {getPreferredDisplayOrder().map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className={styles.label}>
+          {t("email")}
+          <input
+            name="email"
+            value={user?.email}
+            onChange={handleChange}
+            className={styles.input}
+          />
+        </label>
+        <label className={styles.label}>
+          {t("email_preferences")}
+          <select
+            name="emailPreferences"
+            value={user?.emailPreferences as UserEmailPreferences[]}
+            onChange={handleChange}
+            className={styles.select}
+          >
+            <option value="">{t("select_preference")}</option>
+            {getEmailPreferenceOptions().map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button type="submit" className={styles.submitButton}>
+          {t("save_settings")}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default SettingsPage;

package/src/Pages/Settings/index.ts

@@ -0,0 +1 @@
+export * from "./Settings.js";