local-first-auth-import-export 0.1.0

package/dist/react.cjs

@@ -0,0 +1,1056 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.tsx
+var react_exports = {};
+__export(react_exports, {
+  EXPORT_FILE_TYPE: () => EXPORT_FILE_TYPE,
+  EXPORT_FILE_VERSION: () => EXPORT_FILE_VERSION,
+  ExportProfile: () => ExportProfile,
+  ImportExport: () => ImportExport,
+  ImportProfile: () => ImportProfile,
+  STORAGE_KEYS: () => STORAGE_KEYS,
+  clearProfile: () => clearProfile,
+  createDidFromPublicKey: () => createDidFromPublicKey,
+  createJWT: () => createJWT,
+  decodeJWT: () => decodeJWT,
+  decodePublicKey: () => decodePublicKey,
+  defaultExportFilename: () => defaultExportFilename,
+  deriveKeysFromPrivateKey: () => deriveKeysFromPrivateKey,
+  downloadProfile: () => downloadProfile,
+  exportProfile: () => exportProfile,
+  exportProfileToJSON: () => exportProfileToJSON,
+  getCurrentProfile: () => getCurrentProfile,
+  getPrivateKey: () => getPrivateKey,
+  hasLocalFirstAuthAPI: () => hasLocalFirstAuthAPI,
+  hasProfile: () => hasProfile,
+  importProfile: () => importProfile,
+  importProfileFromFile: () => importProfileFromFile,
+  injectLocalFirstAuthAPI: () => injectLocalFirstAuthAPI,
+  parseExportedProfile: () => parseExportedProfile,
+  removeLocalFirstAuthAPI: () => removeLocalFirstAuthAPI,
+  useProfile: () => useProfile,
+  validateExportedProfile: () => validateExportedProfile,
+  validatePrivateKey: () => validatePrivateKey,
+  verifyJWT: () => verifyJWT
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/types.ts
+var EXPORT_FILE_TYPE = "local-first-auth:export";
+var EXPORT_FILE_VERSION = 1;
+
+// src/react/components/ImportProfile.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/core/crypto.ts
+var ed25519 = __toESM(require("@stablelib/ed25519"), 1);
+var import_base58_universal = require("base58-universal");
+var base64 = __toESM(require("base64-js"), 1);
+var ED25519_MULTICODEC_PREFIX = new Uint8Array([237, 1]);
+var SECRET_KEY_SIZE = 64;
+var base64url = {
+  encode: (input) => {
+    const base64String = base64.fromByteArray(input);
+    return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+  },
+  decode: (input) => {
+    let base64String = input.replace(/-/g, "+").replace(/_/g, "/");
+    const padding = (4 - base64String.length % 4) % 4;
+    base64String += "=".repeat(padding);
+    return base64.toByteArray(base64String);
+  }
+};
+function createDidFromPublicKey(publicKey) {
+  const multicodecKey = new Uint8Array(ED25519_MULTICODEC_PREFIX.length + publicKey.length);
+  multicodecKey.set(ED25519_MULTICODEC_PREFIX);
+  multicodecKey.set(publicKey, ED25519_MULTICODEC_PREFIX.length);
+  const encoded = (0, import_base58_universal.encode)(multicodecKey);
+  return `did:key:z${encoded}`;
+}
+function validatePrivateKey(privateKey) {
+  if (typeof privateKey !== "string" || privateKey.trim() === "") {
+    return { valid: false, error: "Private key must be a non-empty string" };
+  }
+  let bytes;
+  try {
+    bytes = base64.toByteArray(privateKey.trim());
+  } catch {
+    return { valid: false, error: "Private key is not valid base64" };
+  }
+  if (bytes.length !== SECRET_KEY_SIZE) {
+    return {
+      valid: false,
+      error: `Private key must decode to ${SECRET_KEY_SIZE} bytes, got ${bytes.length}`
+    };
+  }
+  return { valid: true };
+}
+function deriveKeysFromPrivateKey(privateKey) {
+  const { valid, error } = validatePrivateKey(privateKey);
+  if (!valid) {
+    throw new Error(`Invalid private key: ${error}`);
+  }
+  const trimmed = privateKey.trim();
+  const secretKey = base64.toByteArray(trimmed);
+  const publicKey = ed25519.extractPublicKeyFromSecretKey(secretKey);
+  const did = createDidFromPublicKey(publicKey);
+  return {
+    did,
+    publicKey: base64.fromByteArray(publicKey),
+    privateKey: trimmed
+  };
+}
+function decodePublicKey(publicKey) {
+  return base64.toByteArray(publicKey);
+}
+async function createJWT(payload, privateKey) {
+  const privateKeyBytes = base64.toByteArray(privateKey);
+  if (privateKeyBytes.length !== SECRET_KEY_SIZE) {
+    throw new Error("Invalid private key length. Expected 64 bytes.");
+  }
+  const header = {
+    alg: "EdDSA",
+    typ: "JWT"
+  };
+  const headerB64 = base64url.encode(new TextEncoder().encode(JSON.stringify(header)));
+  const payloadB64 = base64url.encode(new TextEncoder().encode(JSON.stringify(payload)));
+  const signingInput = `${headerB64}.${payloadB64}`;
+  const signingInputBytes = new TextEncoder().encode(signingInput);
+  const signature = ed25519.sign(privateKeyBytes, signingInputBytes);
+  const signatureB64 = base64url.encode(signature);
+  return `${signingInput}.${signatureB64}`;
+}
+function decodeJWT(jwt) {
+  const parts = jwt.split(".");
+  if (parts.length !== 3) {
+    throw new Error("Invalid JWT format. Expected 3 parts separated by dots.");
+  }
+  const [encodedHeader, encodedPayload, signature] = parts;
+  if (!encodedHeader || !encodedPayload || !signature) {
+    throw new Error("Invalid JWT format: missing parts");
+  }
+  const headerBytes = base64url.decode(encodedHeader);
+  const payloadBytes = base64url.decode(encodedPayload);
+  const header = JSON.parse(new TextDecoder().decode(headerBytes));
+  const payload = JSON.parse(new TextDecoder().decode(payloadBytes));
+  return { header, payload, signature };
+}
+function verifyJWT(jwt, publicKey) {
+  try {
+    const parts = jwt.split(".");
+    if (parts.length !== 3) {
+      return false;
+    }
+    const [encodedHeader, encodedPayload, encodedSignature] = parts;
+    const signingInput = `${encodedHeader}.${encodedPayload}`;
+    const signingInputBytes = new TextEncoder().encode(signingInput);
+    const signatureBytes = base64url.decode(encodedSignature);
+    return ed25519.verify(publicKey, signingInputBytes, signatureBytes);
+  } catch (error) {
+    console.error("JWT verification error:", error);
+    return false;
+  }
+}
+
+// src/core/storage.ts
+var STORAGE_KEYS = {
+  PROFILE: "local-first-auth:profile",
+  PRIVATE_KEY: "local-first-auth:privateKey"
+};
+function saveProfile(profile) {
+  try {
+    localStorage.setItem(STORAGE_KEYS.PROFILE, JSON.stringify(profile));
+  } catch (error) {
+    console.error("Failed to save profile:", error);
+    throw new Error("Failed to save profile to LocalStorage");
+  }
+}
+function getProfile() {
+  try {
+    const profileString = localStorage.getItem(STORAGE_KEYS.PROFILE);
+    if (!profileString) {
+      return null;
+    }
+    return JSON.parse(profileString);
+  } catch (error) {
+    console.error("Failed to get profile:", error);
+    return null;
+  }
+}
+function savePrivateKey(privateKey) {
+  try {
+    localStorage.setItem(STORAGE_KEYS.PRIVATE_KEY, privateKey);
+  } catch (error) {
+    console.error("Failed to save private key:", error);
+    throw new Error("Failed to save private key to LocalStorage");
+  }
+}
+function getPrivateKey() {
+  try {
+    return localStorage.getItem(STORAGE_KEYS.PRIVATE_KEY);
+  } catch (error) {
+    console.error("Failed to get private key:", error);
+    return null;
+  }
+}
+function clearProfile() {
+  try {
+    localStorage.removeItem(STORAGE_KEYS.PROFILE);
+    localStorage.removeItem(STORAGE_KEYS.PRIVATE_KEY);
+  } catch (error) {
+    console.error("Failed to clear profile:", error);
+  }
+}
+function hasProfile() {
+  return getProfile() !== null && getPrivateKey() !== null;
+}
+function getCurrentProfile() {
+  const storedProfile = getProfile();
+  const privateKey = getPrivateKey();
+  if (!storedProfile || !privateKey) {
+    return null;
+  }
+  return {
+    did: storedProfile.did,
+    name: storedProfile.name,
+    socials: storedProfile.socials,
+    avatar: storedProfile.avatar
+  };
+}
+
+// src/core/api.ts
+var LocalFirstAuthAPI = class {
+  /**
+   * Get profile details as a signed JWT
+   */
+  async getProfileDetails() {
+    const profile = getProfile();
+    const privateKey = getPrivateKey();
+    if (!profile || !privateKey) {
+      throw new Error("No profile found. User must create or import a profile first.");
+    }
+    const now = Math.floor(Date.now() / 1e3);
+    const payload = {
+      iss: profile.did,
+      aud: window.location.origin,
+      iat: now,
+      exp: now + 120,
+      // 2 minutes
+      type: "localFirstAuth:profile:details",
+      data: {
+        did: profile.did,
+        name: profile.name,
+        socials: profile.socials || []
+      }
+    };
+    return createJWT(payload, privateKey);
+  }
+  /**
+   * Get avatar as base64-encoded string in a signed JWT
+   */
+  async getAvatar() {
+    const profile = getProfile();
+    const privateKey = getPrivateKey();
+    if (!profile || !privateKey) {
+      throw new Error("No profile found. User must create or import a profile first.");
+    }
+    if (!profile.avatar) {
+      return null;
+    }
+    const now = Math.floor(Date.now() / 1e3);
+    const payload = {
+      iss: profile.did,
+      aud: window.location.origin,
+      iat: now,
+      exp: now + 120,
+      type: "localFirstAuth:avatar",
+      data: {
+        did: profile.did,
+        avatar: profile.avatar
+      }
+    };
+    return createJWT(payload, privateKey);
+  }
+  getAppDetails() {
+    return {
+      name: "Local First Auth",
+      version: "2.0.0",
+      platform: "browser",
+      supportedPermissions: ["profile"]
+    };
+  }
+  async requestPermission(permission) {
+    if (permission === "profile") {
+      return true;
+    }
+    console.warn(`Permission "${permission}" is not yet supported`);
+    return false;
+  }
+  close() {
+    console.log("close() called - no-op in web version");
+  }
+};
+function injectLocalFirstAuthAPI() {
+  if (typeof window === "undefined") {
+    console.warn("Cannot inject Local First Auth API: window is undefined (not in browser)");
+    return;
+  }
+  if (window.localFirstAuth) {
+    return;
+  }
+  ;
+  window.localFirstAuth = new LocalFirstAuthAPI();
+}
+function removeLocalFirstAuthAPI() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  delete window.localFirstAuth;
+}
+function hasLocalFirstAuthAPI() {
+  return typeof window !== "undefined" && !!window.localFirstAuth;
+}
+
+// src/core/import.ts
+function validateExportedProfile(input) {
+  const errors = [];
+  let value = input;
+  if (typeof value === "string") {
+    try {
+      value = JSON.parse(value);
+    } catch {
+      return { valid: false, errors: ["File is not valid JSON"] };
+    }
+  }
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return { valid: false, errors: ["Expected a JSON object"] };
+  }
+  const candidate = value;
+  if (candidate.type !== EXPORT_FILE_TYPE) {
+    errors.push(
+      `Not a Local First Auth profile export (expected type "${EXPORT_FILE_TYPE}", got ${JSON.stringify(candidate.type)})`
+    );
+  }
+  if (candidate.version !== EXPORT_FILE_VERSION) {
+    errors.push(
+      `Unsupported export version: ${JSON.stringify(candidate.version)} (this package supports version ${EXPORT_FILE_VERSION})`
+    );
+  }
+  const keyCheck = validatePrivateKey(candidate.privateKey);
+  if (!keyCheck.valid) {
+    errors.push(keyCheck.error);
+    return { valid: false, errors };
+  }
+  const derived = deriveKeysFromPrivateKey(candidate.privateKey);
+  if (typeof candidate.did !== "string" || candidate.did !== derived.did) {
+    errors.push(
+      `Profile file is inconsistent: "did" does not match the private key (expected ${derived.did})`
+    );
+  }
+  if (typeof candidate.publicKey !== "string" || candidate.publicKey !== derived.publicKey) {
+    errors.push('Profile file is inconsistent: "publicKey" does not match the private key');
+  }
+  if (candidate.name !== void 0 && typeof candidate.name !== "string") {
+    errors.push('"name" must be a string');
+  }
+  if (candidate.socials !== void 0) {
+    if (!Array.isArray(candidate.socials)) {
+      errors.push('"socials" must be an array');
+    } else {
+      const malformed = candidate.socials.some(
+        (s) => typeof s !== "object" || s === null || typeof s.platform !== "string" || typeof s.handle !== "string"
+      );
+      if (malformed) {
+        errors.push('"socials" entries must each be { platform, handle }');
+      }
+    }
+  }
+  if (candidate.avatar !== void 0 && candidate.avatar !== null && typeof candidate.avatar !== "string") {
+    errors.push('"avatar" must be a string or null');
+  }
+  if (errors.length > 0) {
+    return { valid: false, errors };
+  }
+  return {
+    valid: true,
+    errors: [],
+    profile: candidate
+  };
+}
+function parseExportedProfile(input) {
+  if (typeof input === "string") {
+    const trimmed = input.trim();
+    if (!trimmed) {
+      throw new Error("Nothing to import: input is empty");
+    }
+    const looksLikeJSON = trimmed.startsWith("{");
+    if (!looksLikeJSON) {
+      const keyCheck = validatePrivateKey(trimmed);
+      if (!keyCheck.valid) {
+        throw new Error(
+          `Could not import: input is neither a profile export file nor a valid private key (${keyCheck.error})`
+        );
+      }
+      const { did, publicKey, privateKey } = deriveKeysFromPrivateKey(trimmed);
+      return {
+        type: EXPORT_FILE_TYPE,
+        version: EXPORT_FILE_VERSION,
+        did,
+        publicKey,
+        privateKey
+      };
+    }
+  }
+  const result = validateExportedProfile(input);
+  if (!result.valid || !result.profile) {
+    throw new Error(result.errors.join("; "));
+  }
+  return result.profile;
+}
+async function importProfile(input, options = {}) {
+  const exported = parseExportedProfile(input);
+  const { did, privateKey } = deriveKeysFromPrivateKey(exported.privateKey);
+  if (hasProfile() && !options.overwrite) {
+    const existing = getProfile();
+    if (existing && existing.did !== did) {
+      throw new Error(
+        "A different profile already exists on this device. Pass { overwrite: true } to replace it \u2014 this permanently discards the existing private key."
+      );
+    }
+  }
+  const profile = {
+    did,
+    name: exported.name || "anonymous",
+    socials: exported.socials ?? [],
+    avatar: exported.avatar ?? null
+  };
+  saveProfile({
+    did: profile.did,
+    name: profile.name,
+    socials: profile.socials,
+    avatar: profile.avatar
+  });
+  savePrivateKey(privateKey);
+  injectLocalFirstAuthAPI();
+  return profile;
+}
+async function importProfileFromFile(file, options = {}) {
+  const text = await file.text();
+  return importProfile(text, options);
+}
+
+// src/react/styles.ts
+var DANGER_COLOR = "#ff3b30";
+var WARNING_BG = "#fff8e1";
+var WARNING_BORDER = "#f0c36d";
+function resolveTheme(customStyles = {}) {
+  const {
+    primaryColor = "#403B51",
+    backgroundColor = "#ffffff",
+    textColor = "#403B51",
+    borderRadius = "12px",
+    fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    buttonRadius = "12px",
+    inputRadius = "8px",
+    inputTextColor = "#333333",
+    inputBackgroundColor = "#ffffff",
+    mobileButtonPressScale = 0.95,
+    mobileTapHighlightColor = "transparent",
+    useSafeAreaInsets = true
+  } = customStyles;
+  return {
+    primaryColor,
+    backgroundColor,
+    textColor,
+    borderRadius,
+    fontFamily,
+    buttonRadius,
+    inputRadius,
+    inputTextColor,
+    inputBackgroundColor,
+    mobileButtonPressScale,
+    mobileTapHighlightColor,
+    useSafeAreaInsets
+  };
+}
+function containerPadding(useSafeAreaInsets) {
+  return useSafeAreaInsets ? "calc(48px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))" : "48px 20px";
+}
+function monoBoxStyle(theme) {
+  return {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    fontSize: "12px",
+    lineHeight: 1.5,
+    wordBreak: "break-all",
+    padding: "12px",
+    borderRadius: theme.inputRadius,
+    backgroundColor: "rgba(0, 0, 0, 0.04)",
+    border: "1px solid rgba(0, 0, 0, 0.08)",
+    color: theme.inputTextColor,
+    boxSizing: "border-box"
+  };
+}
+function primaryButtonStyle(theme, pressed, disabled = false) {
+  return {
+    width: "100%",
+    padding: "16px",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#ffffff",
+    backgroundColor: theme.primaryColor,
+    border: "none",
+    borderRadius: theme.buttonRadius,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    fontFamily: theme.fontFamily,
+    transform: pressed && !disabled ? `scale(${theme.mobileButtonPressScale})` : "scale(1)",
+    transition: "transform 0.1s ease, opacity 0.2s",
+    WebkitTapHighlightColor: theme.mobileTapHighlightColor
+  };
+}
+function secondaryButtonStyle(theme, pressed) {
+  return {
+    width: "100%",
+    padding: "14px",
+    fontSize: "15px",
+    fontWeight: 500,
+    color: theme.primaryColor,
+    backgroundColor: "transparent",
+    border: `2px solid ${theme.primaryColor}`,
+    borderRadius: theme.buttonRadius,
+    cursor: "pointer",
+    fontFamily: theme.fontFamily,
+    transform: pressed ? `scale(${theme.mobileButtonPressScale})` : "scale(1)",
+    transition: "transform 0.1s ease",
+    WebkitTapHighlightColor: theme.mobileTapHighlightColor
+  };
+}
+
+// src/react/components/ImportProfile.tsx
+function ImportProfile({ customStyles = {}, onComplete, onBack }) {
+  const theme = resolveTheme(customStyles);
+  const fileInputRef = (0, import_react.useRef)(null);
+  const [text, setText] = (0, import_react.useState)("");
+  const [errors, setErrors] = (0, import_react.useState)([]);
+  const [pressed, setPressed] = (0, import_react.useState)(null);
+  const [confirmOverwrite, setConfirmOverwrite] = (0, import_react.useState)(false);
+  const [isImporting, setIsImporting] = (0, import_react.useState)(false);
+  const [imported, setImported] = (0, import_react.useState)(null);
+  const existing = hasProfile() ? getCurrentProfile() : null;
+  const runImport = async (input) => {
+    setErrors([]);
+    setIsImporting(true);
+    try {
+      const profile = await importProfile(input, { overwrite: confirmOverwrite });
+      setImported(profile);
+      onComplete?.(profile);
+    } catch (error) {
+      setErrors([error instanceof Error ? error.message : String(error)]);
+    } finally {
+      setIsImporting(false);
+    }
+  };
+  const handleFile = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    try {
+      const contents = await file.text();
+      setText(contents);
+      await runImport(contents);
+    } catch {
+      setErrors(["Could not read that file"]);
+    } finally {
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (!text.trim()) {
+      setErrors(["Paste your profile backup, or choose a file"]);
+      return;
+    }
+    void runImport(text);
+  };
+  const blockedByOverwrite = !!existing && !confirmOverwrite;
+  if (imported) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: containerPadding(theme.useSafeAreaInsets),
+          backgroundColor: theme.backgroundColor,
+          color: theme.textColor,
+          fontFamily: theme.fontFamily,
+          minHeight: "100vh",
+          textAlign: "center",
+          boxSizing: "border-box"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", maxWidth: "500px" } }, /* @__PURE__ */ import_react.default.createElement("h1", { style: { fontSize: "28px", color: theme.primaryColor, marginBottom: "12px" } }, "Profile imported"), /* @__PURE__ */ import_react.default.createElement("p", { style: { opacity: 0.7, marginBottom: "16px" } }, "You're signed in as ", /* @__PURE__ */ import_react.default.createElement("strong", null, imported.name), "."), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            fontSize: "12px",
+            wordBreak: "break-all",
+            opacity: 0.6
+          }
+        },
+        imported.did
+      ))
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: containerPadding(theme.useSafeAreaInsets),
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+        fontFamily: theme.fontFamily,
+        minHeight: "100vh",
+        boxSizing: "border-box"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", maxWidth: "500px" } }, /* @__PURE__ */ import_react.default.createElement("header", { style: { textAlign: "center", marginBottom: "32px" } }, /* @__PURE__ */ import_react.default.createElement(
+      "h1",
+      {
+        style: {
+          fontSize: "32px",
+          fontWeight: "bold",
+          color: theme.primaryColor,
+          marginBottom: "8px",
+          lineHeight: 1.2
+        }
+      },
+      "Import your profile"
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { fontSize: "16px", opacity: 0.7, marginTop: "12px" } }, "Restore an identity you already have. Your existing DID is preserved.")), existing && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          padding: "14px",
+          marginBottom: "24px",
+          backgroundColor: WARNING_BG,
+          border: `1px solid ${WARNING_BORDER}`,
+          borderRadius: theme.borderRadius,
+          fontSize: "14px",
+          lineHeight: 1.5,
+          color: "#5c4400"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "0 0 10px" } }, "\u26A0\uFE0F A profile already exists on this device (", /* @__PURE__ */ import_react.default.createElement("strong", null, existing.name), "). Importing a different one permanently discards its private key."),
+      /* @__PURE__ */ import_react.default.createElement("label", { style: { display: "flex", gap: "8px", alignItems: "flex-start", cursor: "pointer" } }, /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "checkbox",
+          checked: confirmOverwrite,
+          onChange: (e) => setConfirmOverwrite(e.target.checked),
+          style: { marginTop: "2px" }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("span", null, "I understand \u2014 replace the existing profile"))
+    ), /* @__PURE__ */ import_react.default.createElement("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "20px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react.default.createElement("label", { style: { fontSize: "14px", fontWeight: 500, opacity: 0.8, paddingLeft: "4px" } }, "Backup file"), /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ".json,application/json",
+        onChange: handleFile,
+        disabled: blockedByOverwrite || isImporting,
+        style: {
+          width: "100%",
+          padding: "14px",
+          fontSize: "15px",
+          color: theme.inputTextColor,
+          backgroundColor: theme.inputBackgroundColor,
+          border: "2px dashed rgba(0, 0, 0, 0.15)",
+          borderRadius: theme.inputRadius,
+          fontFamily: theme.fontFamily,
+          boxSizing: "border-box",
+          cursor: blockedByOverwrite || isImporting ? "not-allowed" : "pointer",
+          opacity: blockedByOverwrite ? 0.5 : 1
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { style: { textAlign: "center", fontSize: "13px", opacity: 0.5 } }, "or paste it"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react.default.createElement(
+      "textarea",
+      {
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        disabled: blockedByOverwrite || isImporting,
+        rows: 6,
+        placeholder: '{ "type": "local-first-auth:export", "version": 1, ... }',
+        style: {
+          width: "100%",
+          padding: "14px",
+          fontSize: "13px",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          color: theme.inputTextColor,
+          backgroundColor: theme.inputBackgroundColor,
+          border: `2px solid ${errors.length ? DANGER_COLOR : "rgba(0, 0, 0, 0.1)"}`,
+          borderRadius: theme.inputRadius,
+          outline: "none",
+          resize: "vertical",
+          boxSizing: "border-box",
+          opacity: blockedByOverwrite ? 0.5 : 1
+        }
+      }
+    )), errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { role: "alert", style: { color: DANGER_COLOR, fontSize: "14px", lineHeight: 1.5 } }, errors.map((error, i) => /* @__PURE__ */ import_react.default.createElement("p", { key: i, style: { margin: "0 0 4px" } }, error))), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "submit",
+        disabled: blockedByOverwrite || isImporting,
+        onMouseDown: () => setPressed("import"),
+        onMouseUp: () => setPressed(null),
+        onMouseLeave: () => setPressed(null),
+        onTouchStart: () => setPressed("import"),
+        onTouchEnd: () => setPressed(null),
+        style: primaryButtonStyle(theme, pressed === "import", blockedByOverwrite || isImporting)
+      },
+      isImporting ? "Importing\u2026" : "Import profile"
+    ), onBack && /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        onMouseDown: () => setPressed("back"),
+        onMouseUp: () => setPressed(null),
+        onMouseLeave: () => setPressed(null),
+        style: secondaryButtonStyle(theme, pressed === "back")
+      },
+      "Back"
+    )))
+  );
+}
+
+// src/react/components/ExportProfile.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/core/export.ts
+function exportProfile() {
+  const profile = getProfile();
+  const privateKey = getPrivateKey();
+  if (!profile || !privateKey) {
+    return null;
+  }
+  const { did, publicKey } = deriveKeysFromPrivateKey(privateKey);
+  return {
+    type: EXPORT_FILE_TYPE,
+    version: EXPORT_FILE_VERSION,
+    did,
+    publicKey,
+    privateKey,
+    name: profile.name,
+    socials: profile.socials ?? [],
+    avatar: profile.avatar ?? null,
+    exportedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function exportProfileToJSON(pretty = true) {
+  const exported = exportProfile();
+  if (!exported) {
+    return null;
+  }
+  return JSON.stringify(exported, null, pretty ? 2 : 0);
+}
+function defaultExportFilename(did) {
+  const key = did.replace(/^did:key:/, "");
+  const shortKey = key.slice(0, 12).replace(/[^a-zA-Z0-9]/g, "");
+  return `local-first-auth-profile-${shortKey}.json`;
+}
+function downloadProfile(filename) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    console.warn("Cannot download profile: not in a browser environment");
+    return null;
+  }
+  const exported = exportProfile();
+  if (!exported) {
+    console.warn("Cannot download profile: no profile found");
+    return null;
+  }
+  const json = JSON.stringify(exported, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename || defaultExportFilename(exported.did);
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+  return exported;
+}
+
+// src/react/components/ExportProfile.tsx
+function ExportProfile({ customStyles = {}, onExport, emptyState }) {
+  const theme = resolveTheme(customStyles);
+  const [revealed, setRevealed] = (0, import_react2.useState)(false);
+  const [pressed, setPressed] = (0, import_react2.useState)(null);
+  const [downloaded, setDownloaded] = (0, import_react2.useState)(false);
+  const profile = exportProfile();
+  if (!profile) {
+    if (emptyState !== void 0) {
+      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, emptyState);
+    }
+    return /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        style: {
+          padding: containerPadding(theme.useSafeAreaInsets),
+          backgroundColor: theme.backgroundColor,
+          color: theme.textColor,
+          fontFamily: theme.fontFamily,
+          textAlign: "center"
+        }
+      },
+      /* @__PURE__ */ import_react2.default.createElement("p", { style: { opacity: 0.7 } }, "No profile on this device yet \u2014 create or import one first.")
+    );
+  }
+  const handleDownload = () => {
+    const exported = downloadProfile();
+    if (exported) {
+      setDownloaded(true);
+      onExport?.(exported);
+    }
+  };
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: containerPadding(theme.useSafeAreaInsets),
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+        fontFamily: theme.fontFamily,
+        minHeight: "100vh",
+        boxSizing: "border-box"
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", maxWidth: "500px" } }, /* @__PURE__ */ import_react2.default.createElement("header", { style: { textAlign: "center", marginBottom: "32px" } }, /* @__PURE__ */ import_react2.default.createElement(
+      "h1",
+      {
+        style: {
+          fontSize: "32px",
+          fontWeight: "bold",
+          color: theme.primaryColor,
+          marginBottom: "8px",
+          lineHeight: 1.2
+        }
+      },
+      "Export your profile"
+    ), /* @__PURE__ */ import_react2.default.createElement("p", { style: { fontSize: "16px", opacity: 0.7, marginTop: "12px" } }, "Save a backup file so you can restore this identity on another device.")), /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        role: "note",
+        style: {
+          display: "flex",
+          gap: "10px",
+          padding: "14px",
+          marginBottom: "24px",
+          backgroundColor: WARNING_BG,
+          border: `1px solid ${WARNING_BORDER}`,
+          borderRadius: theme.borderRadius,
+          fontSize: "14px",
+          lineHeight: 1.5,
+          color: "#5c4400"
+        }
+      },
+      /* @__PURE__ */ import_react2.default.createElement("span", { "aria-hidden": "true" }, "\u26A0\uFE0F"),
+      /* @__PURE__ */ import_react2.default.createElement("span", null, "This file contains your ", /* @__PURE__ */ import_react2.default.createElement("strong", null, "private key"), " in plain text. Anyone who has it can act as you. Store it somewhere safe and never share it.")
+    ), /* @__PURE__ */ import_react2.default.createElement("section", { style: { display: "flex", flexDirection: "column", gap: "20px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react2.default.createElement("label", { style: { fontSize: "14px", fontWeight: 500, opacity: 0.8, paddingLeft: "4px" } }, "Name"), /* @__PURE__ */ import_react2.default.createElement("div", { style: monoBoxStyle(theme) }, profile.name || "anonymous")), /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react2.default.createElement("label", { style: { fontSize: "14px", fontWeight: 500, opacity: 0.8, paddingLeft: "4px" } }, "DID (public \u2014 safe to share)"), /* @__PURE__ */ import_react2.default.createElement("div", { style: monoBoxStyle(theme) }, profile.did)), /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react2.default.createElement("label", { style: { fontSize: "14px", fontWeight: 500, opacity: 0.8, paddingLeft: "4px" } }, "Private key (secret)"), revealed ? /* @__PURE__ */ import_react2.default.createElement("div", { style: { ...monoBoxStyle(theme), border: `1px solid ${DANGER_COLOR}` } }, profile.privateKey) : /* @__PURE__ */ import_react2.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setRevealed(true),
+        onMouseDown: () => setPressed("reveal"),
+        onMouseUp: () => setPressed(null),
+        onMouseLeave: () => setPressed(null),
+        onTouchStart: () => setPressed("reveal"),
+        onTouchEnd: () => setPressed(null),
+        style: secondaryButtonStyle(theme, pressed === "reveal")
+      },
+      "Reveal private key"
+    ))), /* @__PURE__ */ import_react2.default.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ import_react2.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: handleDownload,
+        onMouseDown: () => setPressed("download"),
+        onMouseUp: () => setPressed(null),
+        onMouseLeave: () => setPressed(null),
+        onTouchStart: () => setPressed("download"),
+        onTouchEnd: () => setPressed(null),
+        style: primaryButtonStyle(theme, pressed === "download")
+      },
+      "Download backup (.json)"
+    ), downloaded && /* @__PURE__ */ import_react2.default.createElement(
+      "p",
+      {
+        role: "status",
+        style: { fontSize: "14px", textAlign: "center", marginTop: "12px", opacity: 0.7 }
+      },
+      "Backup downloaded. Keep it somewhere safe."
+    )))
+  );
+}
+
+// src/react/components/ImportExport.tsx
+var import_react3 = __toESM(require("react"), 1);
+function ImportExport({
+  customStyles = {},
+  onComplete,
+  onExport,
+  defaultTab = "import",
+  skipImport = false,
+  skipExport = false
+}) {
+  const theme = resolveTheme(customStyles);
+  const initialTab = skipImport ? "export" : skipExport ? "import" : defaultTab;
+  const [tab, setTab] = (0, import_react3.useState)(initialTab);
+  if (skipImport && skipExport) {
+    return null;
+  }
+  const showTabs = !skipImport && !skipExport;
+  const tabStyle = (active) => ({
+    flex: 1,
+    padding: "12px 16px",
+    fontSize: "15px",
+    fontWeight: active ? 600 : 500,
+    fontFamily: theme.fontFamily,
+    color: active ? "#ffffff" : theme.primaryColor,
+    backgroundColor: active ? theme.primaryColor : "transparent",
+    border: "none",
+    borderRadius: theme.buttonRadius,
+    cursor: "pointer",
+    transition: "background-color 0.15s, color 0.15s",
+    WebkitTapHighlightColor: theme.mobileTapHighlightColor
+  });
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { backgroundColor: theme.backgroundColor, minHeight: "100vh" } }, showTabs && /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      role: "tablist",
+      style: {
+        display: "flex",
+        gap: "4px",
+        padding: "4px",
+        margin: "0 auto",
+        maxWidth: "500px",
+        backgroundColor: "rgba(0, 0, 0, 0.04)",
+        borderRadius: theme.buttonRadius,
+        position: "sticky",
+        top: 0,
+        zIndex: 1
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": tab === "import",
+        onClick: () => setTab("import"),
+        style: tabStyle(tab === "import")
+      },
+      "Import"
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": tab === "export",
+        onClick: () => setTab("export"),
+        style: tabStyle(tab === "export")
+      },
+      "Export"
+    )
+  ), tab === "import" && !skipImport && /* @__PURE__ */ import_react3.default.createElement(ImportProfile, { customStyles, onComplete }), tab === "export" && !skipExport && /* @__PURE__ */ import_react3.default.createElement(ExportProfile, { customStyles, onExport }));
+}
+
+// src/react/hooks/useProfile.ts
+var import_react4 = require("react");
+function useProfile() {
+  const [profile, setProfile] = (0, import_react4.useState)(null);
+  const refresh = (0, import_react4.useCallback)(() => {
+    setProfile(getCurrentProfile());
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    refresh();
+    const handleStorageChange = (e) => {
+      if (e.key === STORAGE_KEYS.PROFILE || e.key === STORAGE_KEYS.PRIVATE_KEY || e.key === null) {
+        refresh();
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [refresh]);
+  return { profile, refresh };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EXPORT_FILE_TYPE,
+  EXPORT_FILE_VERSION,
+  ExportProfile,
+  ImportExport,
+  ImportProfile,
+  STORAGE_KEYS,
+  clearProfile,
+  createDidFromPublicKey,
+  createJWT,
+  decodeJWT,
+  decodePublicKey,
+  defaultExportFilename,
+  deriveKeysFromPrivateKey,
+  downloadProfile,
+  exportProfile,
+  exportProfileToJSON,
+  getCurrentProfile,
+  getPrivateKey,
+  hasLocalFirstAuthAPI,
+  hasProfile,
+  importProfile,
+  importProfileFromFile,
+  injectLocalFirstAuthAPI,
+  parseExportedProfile,
+  removeLocalFirstAuthAPI,
+  useProfile,
+  validateExportedProfile,
+  validatePrivateKey,
+  verifyJWT
+});
+//# sourceMappingURL=react.cjs.map