@applocale/react 0.0.0-stage → 0.1.0-beta.4

package/README.md

@@ -1,3 +1,9 @@
-# Temporary Holding Version
+# AppLocale React SDK
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Install with `npm install @applocale/react@beta`. React 18+ is a peer dependency. Wrap the app in `LingoProvider` with `projectId`, `cdnBaseUrl` and `sourceLocale`. `LocaleProvider` is a compatible alias. `useT()` returns the translation function; `useLocale()` provides active locale, loading/error state and locale changes. Approved empty translations remain empty; missing keys fall back to the key name.
+
+For authenticated staging sites, export `initVisualEditor({ projectId, apiKey, apiBaseUrl, defaultLocale })`. Mark text elements with `data-locale-key` and optional `data-locale-namespace`. Use an expiring Write-scoped key and call the returned editor's `destroy()` on unmount. Browser-visible keys can be read by site users; revoke them when review ends. See the repository deployment guide for complete integration and release instructions.
+
+### Loading and retry feedback
+
+Use `useTranslationStatus()` inside `LingoProvider` (or `LocaleProvider`) to show delivery feedback. It returns `{ status, error, retry }`, where `status` is `loading`, `ready`, or `error`. Call `retry()` after a failed request. A language change immediately clears the previous dictionary while the new locale loads; `t()` falls back to the key until it is ready. Apps can supply readable fallback copy during this interval. Intentional empty translations remain empty.

package/dist/chunk-SOQNEZ4L.js

@@ -0,0 +1,99 @@
+// src/visual-editor.ts
+var AppLocaleVisualEditor = class {
+  constructor(config) {
+    this.active = false;
+    this.destroyed = false;
+    this.pending = false;
+    this.toggle = () => {
+      if (this.destroyed) return;
+      this.active = !this.active;
+      this.button.textContent = this.active ? "Disable Visual Editor" : "Enable Visual Editor";
+      this.button.setAttribute("aria-pressed", String(this.active));
+      if (this.active) {
+        document.body.addEventListener("mouseover", this.over);
+        document.body.addEventListener("mouseout", this.out);
+        document.body.addEventListener("click", this.click, true);
+      } else this.detach();
+    };
+    this.over = (event) => {
+      this.target(event)?.classList.add("locale-edge-hover");
+    };
+    this.out = (event) => {
+      this.target(event)?.classList.remove("locale-edge-hover");
+    };
+    this.click = async (event) => {
+      const target = this.target(event);
+      if (!this.active || !target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.pending) return;
+      const keyName = target.getAttribute("data-locale-key");
+      if (!keyName?.trim()) return;
+      const current = target.textContent ?? "";
+      const value = window.prompt(`Edit translation: ${keyName}`, current);
+      if (value === null || value === current) return;
+      const base = (this.config.apiBaseUrl ?? "https://api.applocale.com/api").replace(/\/$/, "");
+      try {
+        const url = new URL(base);
+        const local = ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
+        if (url.protocol !== "https:" && !(url.protocol === "http:" && local)) throw new Error("Use an HTTPS API URL or a local development server.");
+        this.pending = true;
+        this.status.textContent = "Saving translation\u2026";
+        const response = await fetch(`${base}/projects/${encodeURIComponent(this.config.projectId)}/keys/visual-sync`, { method: "POST", headers: { "Content-Type": "application/json", "X-AppLocale-Key": this.config.apiKey }, body: JSON.stringify({ keyName, value, localeCode: this.config.defaultLocale ?? "en-US", namespace: target.getAttribute("data-locale-namespace") ?? this.config.namespace ?? "default" }) });
+        if (!response.ok) throw new Error(`Save failed (HTTP ${response.status}). Check the project key, scope and locale.`);
+        if (!this.destroyed) {
+          target.textContent = value;
+          this.status.textContent = "Translation saved.";
+        }
+      } catch (error) {
+        if (!this.destroyed) this.status.textContent = error instanceof Error ? error.message : "Unable to save translation. Please try again.";
+      } finally {
+        this.pending = false;
+      }
+    };
+    this.config = config;
+    this.style = document.createElement("style");
+    this.style.textContent = ".locale-edge-hover{outline:2px dashed #ffae50!important;cursor:pointer!important}.locale-edge-btn{position:fixed;bottom:24px;right:24px;background:#292724;color:#fff4df;border:1px solid #c48e52;padding:12px 20px;border-radius:16px;font:600 14px system-ui;box-shadow:0 8px 32px #0004;z-index:2147483646}.locale-edge-status{position:fixed;right:24px;bottom:80px;max-width:320px;background:#292724;color:#fff4df;padding:12px;border-radius:12px;font:14px system-ui;z-index:2147483646}.locale-edge-status:empty{display:none}";
+    document.head.appendChild(this.style);
+    this.status = document.createElement("div");
+    this.status.className = "locale-edge-status";
+    this.status.setAttribute("role", "status");
+    this.status.setAttribute("aria-live", "polite");
+    document.body.appendChild(this.status);
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.className = "locale-edge-btn";
+    this.button.textContent = "Enable Visual Editor";
+    this.button.setAttribute("aria-pressed", "false");
+    this.button.addEventListener("click", this.toggle);
+    document.body.appendChild(this.button);
+  }
+  target(event) {
+    return event.target instanceof Element ? event.target.closest("[data-locale-key]") : null;
+  }
+  detach() {
+    document.body.removeEventListener("mouseover", this.over);
+    document.body.removeEventListener("mouseout", this.out);
+    document.body.removeEventListener("click", this.click, true);
+    document.querySelectorAll(".locale-edge-hover").forEach((element) => element.classList.remove("locale-edge-hover"));
+  }
+  /** Call when unmounting the staging app/editor. Removes every owned element and listener. */
+  destroy() {
+    this.destroyed = true;
+    this.active = false;
+    this.detach();
+    this.button.removeEventListener("click", this.toggle);
+    this.button.remove();
+    this.status.remove();
+    this.style.remove();
+  }
+};
+var initAppLocale = (config) => new AppLocaleVisualEditor(config);
+var initVisualEditor = initAppLocale;
+
+export {
+  AppLocaleVisualEditor,
+  initAppLocale,
+  initVisualEditor
+};
+//# sourceMappingURL=chunk-SOQNEZ4L.js.map

package/dist/chunk-SOQNEZ4L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visual-editor.ts"],"sourcesContent":["/** Staging-only in-context editor. Give it an expiring project-scoped write key. */\nexport interface AppLocaleConfig {\n  apiKey: string;\n  projectId: string;\n  apiBaseUrl?: string;\n  defaultLocale?: string;\n  namespace?: string;\n}\nexport class AppLocaleVisualEditor {\n  private active = false;\n  private destroyed = false;\n  private pending = false;\n  private readonly button: HTMLButtonElement;\n  private readonly status: HTMLDivElement;\n  private readonly style: HTMLStyleElement;\n  private readonly config: AppLocaleConfig;\n  constructor(config: AppLocaleConfig) {\n    this.config = config;\n    this.style = document.createElement('style');\n    this.style.textContent = '.locale-edge-hover{outline:2px dashed #ffae50!important;cursor:pointer!important}.locale-edge-btn{position:fixed;bottom:24px;right:24px;background:#292724;color:#fff4df;border:1px solid #c48e52;padding:12px 20px;border-radius:16px;font:600 14px system-ui;box-shadow:0 8px 32px #0004;z-index:2147483646}.locale-edge-status{position:fixed;right:24px;bottom:80px;max-width:320px;background:#292724;color:#fff4df;padding:12px;border-radius:12px;font:14px system-ui;z-index:2147483646}.locale-edge-status:empty{display:none}';\n    document.head.appendChild(this.style);\n    this.status = document.createElement('div'); this.status.className = 'locale-edge-status'; this.status.setAttribute('role', 'status'); this.status.setAttribute('aria-live', 'polite'); document.body.appendChild(this.status);\n    this.button = document.createElement('button'); this.button.type = 'button'; this.button.className = 'locale-edge-btn'; this.button.textContent = 'Enable Visual Editor'; this.button.setAttribute('aria-pressed', 'false'); this.button.addEventListener('click', this.toggle); document.body.appendChild(this.button);\n  }\n  private toggle = () => {\n    if (this.destroyed) return;\n    this.active = !this.active; this.button.textContent = this.active ? 'Disable Visual Editor' : 'Enable Visual Editor'; this.button.setAttribute('aria-pressed', String(this.active));\n    if (this.active) { document.body.addEventListener('mouseover', this.over); document.body.addEventListener('mouseout', this.out); document.body.addEventListener('click', this.click, true); }\n    else this.detach();\n  };\n  private target(event: MouseEvent): HTMLElement | null {\n    return event.target instanceof Element ? event.target.closest<HTMLElement>('[data-locale-key]') : null;\n  }\n  private over = (event: MouseEvent) => { this.target(event)?.classList.add('locale-edge-hover'); };\n  private out = (event: MouseEvent) => { this.target(event)?.classList.remove('locale-edge-hover'); };\n  private click = async (event: MouseEvent) => {\n    const target = this.target(event); if (!this.active || !target) return;\n    event.preventDefault(); event.stopPropagation(); if (this.pending) return;\n    const keyName = target.getAttribute('data-locale-key'); if (!keyName?.trim()) return;\n    const current = target.textContent ?? ''; const value = window.prompt(`Edit translation: ${keyName}`, current);\n    if (value === null || value === current) return;\n    const base = (this.config.apiBaseUrl ?? 'https://api.applocale.com/api').replace(/\\/$/, '');\n    try {\n      const url = new URL(base); const local = ['localhost','127.0.0.1','[::1]'].includes(url.hostname);\n      if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) throw new Error('Use an HTTPS API URL or a local development server.');\n      this.pending = true; this.status.textContent = 'Saving translation…';\n      const response = await fetch(`${base}/projects/${encodeURIComponent(this.config.projectId)}/keys/visual-sync`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-AppLocale-Key': this.config.apiKey }, body: JSON.stringify({ keyName, value, localeCode: this.config.defaultLocale ?? 'en-US', namespace: target.getAttribute('data-locale-namespace') ?? this.config.namespace ?? 'default' }) });\n      if (!response.ok) throw new Error(`Save failed (HTTP ${response.status}). Check the project key, scope and locale.`);\n      if (!this.destroyed) { target.textContent = value; this.status.textContent = 'Translation saved.'; }\n    } catch (error) { if (!this.destroyed) this.status.textContent = error instanceof Error ? error.message : 'Unable to save translation. Please try again.'; }\n    finally { this.pending = false; }\n  };\n  private detach() {\n    document.body.removeEventListener('mouseover', this.over); document.body.removeEventListener('mouseout', this.out); document.body.removeEventListener('click', this.click, true);\n    document.querySelectorAll('.locale-edge-hover').forEach(element => element.classList.remove('locale-edge-hover'));\n  }\n  /** Call when unmounting the staging app/editor. Removes every owned element and listener. */\n  destroy() { this.destroyed = true; this.active = false; this.detach(); this.button.removeEventListener('click', this.toggle); this.button.remove(); this.status.remove(); this.style.remove(); }\n}\nexport const initAppLocale = (config: AppLocaleConfig) => new AppLocaleVisualEditor(config);\nexport const initVisualEditor = initAppLocale;\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -0,0 +1,200 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppLocaleVisualEditor: () => AppLocaleVisualEditor,
+  DEFAULT_CDN_BASE_URL: () => DEFAULT_CDN_BASE_URL,
+  LingoProvider: () => LingoProvider,
+  LocaleProvider: () => LingoProvider,
+  initAppLocale: () => initAppLocale,
+  initVisualEditor: () => initVisualEditor,
+  useLocale: () => useLocale,
+  useT: () => useT,
+  useTranslationStatus: () => useTranslationStatus
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/LingoProvider.tsx
+var import_react2 = require("react");
+
+// src/context.ts
+var import_react = require("react");
+var LingoContext = (0, import_react.createContext)(null);
+
+// src/types.ts
+var DEFAULT_CDN_BASE_URL = "https://cdn.applocale.com";
+
+// src/LingoProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LingoProvider = ({ projectId, defaultLocale = "en-US", cdnBaseUrl = DEFAULT_CDN_BASE_URL, sourceLocale, children }) => {
+  const [locale, setLocale] = (0, import_react2.useState)(defaultLocale);
+  const [attempt, setAttempt] = (0, import_react2.useState)(0);
+  const edgeUrl = sourceLocale ? `${cdnBaseUrl}/${projectId}/${locale}.json?fallback=${encodeURIComponent(sourceLocale)}` : `${cdnBaseUrl}/${projectId}/${locale}.json`;
+  const request = JSON.stringify([edgeUrl, attempt]);
+  const [result, setResult] = (0, import_react2.useState)({ request: "", status: "loading", error: null, translations: {} });
+  const current = result.request === request ? result : { status: "loading", error: null, translations: {} };
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    fetch(edgeUrl).then(async (response) => {
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const translations = await response.json();
+      if (!cancelled) setResult({ request, status: "ready", error: null, translations });
+    }).catch((error) => {
+      if (cancelled) return;
+      console.warn(`[AppLocale SDK] Failed to load locale ${locale}`, error);
+      setResult({ request, status: "error", error: `Could not load translations for ${locale}. Check the project is published, then try again.`, translations: {} });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [edgeUrl, locale, request]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LingoContext.Provider, { value: {
+    t: (key) => current.translations[key] ?? key,
+    locale,
+    setLocale,
+    delivery: { status: current.status, error: current.error, retry: () => setAttempt((value) => value + 1) }
+  }, children });
+};
+
+// src/hooks.ts
+var import_react3 = require("react");
+function useLingoContext() {
+  const context = (0, import_react3.useContext)(LingoContext);
+  if (!context) {
+    throw new Error("AppLocale hooks must be used within a <LingoProvider>; must be used within a <LocaleProvider> when using the compatibility API");
+  }
+  return context;
+}
+var useT = () => {
+  return useLingoContext().t;
+};
+var useLocale = () => {
+  const { locale, setLocale } = useLingoContext();
+  return [locale, setLocale];
+};
+var useTranslationStatus = () => useLingoContext().delivery ?? { status: "ready", error: null, retry: () => {
+} };
+
+// src/visual-editor.ts
+var AppLocaleVisualEditor = class {
+  constructor(config) {
+    this.active = false;
+    this.destroyed = false;
+    this.pending = false;
+    this.toggle = () => {
+      if (this.destroyed) return;
+      this.active = !this.active;
+      this.button.textContent = this.active ? "Disable Visual Editor" : "Enable Visual Editor";
+      this.button.setAttribute("aria-pressed", String(this.active));
+      if (this.active) {
+        document.body.addEventListener("mouseover", this.over);
+        document.body.addEventListener("mouseout", this.out);
+        document.body.addEventListener("click", this.click, true);
+      } else this.detach();
+    };
+    this.over = (event) => {
+      this.target(event)?.classList.add("locale-edge-hover");
+    };
+    this.out = (event) => {
+      this.target(event)?.classList.remove("locale-edge-hover");
+    };
+    this.click = async (event) => {
+      const target = this.target(event);
+      if (!this.active || !target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.pending) return;
+      const keyName = target.getAttribute("data-locale-key");
+      if (!keyName?.trim()) return;
+      const current = target.textContent ?? "";
+      const value = window.prompt(`Edit translation: ${keyName}`, current);
+      if (value === null || value === current) return;
+      const base = (this.config.apiBaseUrl ?? "https://api.applocale.com/api").replace(/\/$/, "");
+      try {
+        const url = new URL(base);
+        const local = ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
+        if (url.protocol !== "https:" && !(url.protocol === "http:" && local)) throw new Error("Use an HTTPS API URL or a local development server.");
+        this.pending = true;
+        this.status.textContent = "Saving translation\u2026";
+        const response = await fetch(`${base}/projects/${encodeURIComponent(this.config.projectId)}/keys/visual-sync`, { method: "POST", headers: { "Content-Type": "application/json", "X-AppLocale-Key": this.config.apiKey }, body: JSON.stringify({ keyName, value, localeCode: this.config.defaultLocale ?? "en-US", namespace: target.getAttribute("data-locale-namespace") ?? this.config.namespace ?? "default" }) });
+        if (!response.ok) throw new Error(`Save failed (HTTP ${response.status}). Check the project key, scope and locale.`);
+        if (!this.destroyed) {
+          target.textContent = value;
+          this.status.textContent = "Translation saved.";
+        }
+      } catch (error) {
+        if (!this.destroyed) this.status.textContent = error instanceof Error ? error.message : "Unable to save translation. Please try again.";
+      } finally {
+        this.pending = false;
+      }
+    };
+    this.config = config;
+    this.style = document.createElement("style");
+    this.style.textContent = ".locale-edge-hover{outline:2px dashed #ffae50!important;cursor:pointer!important}.locale-edge-btn{position:fixed;bottom:24px;right:24px;background:#292724;color:#fff4df;border:1px solid #c48e52;padding:12px 20px;border-radius:16px;font:600 14px system-ui;box-shadow:0 8px 32px #0004;z-index:2147483646}.locale-edge-status{position:fixed;right:24px;bottom:80px;max-width:320px;background:#292724;color:#fff4df;padding:12px;border-radius:12px;font:14px system-ui;z-index:2147483646}.locale-edge-status:empty{display:none}";
+    document.head.appendChild(this.style);
+    this.status = document.createElement("div");
+    this.status.className = "locale-edge-status";
+    this.status.setAttribute("role", "status");
+    this.status.setAttribute("aria-live", "polite");
+    document.body.appendChild(this.status);
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.className = "locale-edge-btn";
+    this.button.textContent = "Enable Visual Editor";
+    this.button.setAttribute("aria-pressed", "false");
+    this.button.addEventListener("click", this.toggle);
+    document.body.appendChild(this.button);
+  }
+  target(event) {
+    return event.target instanceof Element ? event.target.closest("[data-locale-key]") : null;
+  }
+  detach() {
+    document.body.removeEventListener("mouseover", this.over);
+    document.body.removeEventListener("mouseout", this.out);
+    document.body.removeEventListener("click", this.click, true);
+    document.querySelectorAll(".locale-edge-hover").forEach((element) => element.classList.remove("locale-edge-hover"));
+  }
+  /** Call when unmounting the staging app/editor. Removes every owned element and listener. */
+  destroy() {
+    this.destroyed = true;
+    this.active = false;
+    this.detach();
+    this.button.removeEventListener("click", this.toggle);
+    this.button.remove();
+    this.status.remove();
+    this.style.remove();
+  }
+};
+var initAppLocale = (config) => new AppLocaleVisualEditor(config);
+var initVisualEditor = initAppLocale;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppLocaleVisualEditor,
+  DEFAULT_CDN_BASE_URL,
+  LingoProvider,
+  LocaleProvider,
+  initAppLocale,
+  initVisualEditor,
+  useLocale,
+  useT,
+  useTranslationStatus
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/LingoProvider.tsx","../src/context.ts","../src/types.ts","../src/hooks.ts","../src/visual-editor.ts"],"sourcesContent":["export { LingoProvider } from './LingoProvider';\nexport { useT, useLocale, useTranslationStatus } from './hooks';\nexport { DEFAULT_CDN_BASE_URL } from './types';\nexport type { LingoProviderProps, LingoContextValue, TranslationDelivery } from './types';\nexport { LocaleProvider } from './LocaleProvider';\nexport type { LocaleProviderProps, LocaleContextValue } from './types';\nexport { AppLocaleVisualEditor, initAppLocale, initVisualEditor } from './visual-editor';\nexport type { AppLocaleConfig } from './visual-editor';\n","import React, { useState, useEffect } from 'react';\nimport { LingoContext } from './context';\nimport { DEFAULT_CDN_BASE_URL } from './types';\nimport type { LingoProviderProps, TranslationDelivery } from './types';\n\ntype DeliveryResult = { request: string; status: TranslationDelivery['status']; error: string | null; translations: Record<string, string> };\n\nexport const LingoProvider = ({ projectId, defaultLocale = 'en-US', cdnBaseUrl = DEFAULT_CDN_BASE_URL, sourceLocale, children }: LingoProviderProps) => {\n  const [locale, setLocale] = useState(defaultLocale);\n  const [attempt, setAttempt] = useState(0);\n  const edgeUrl = sourceLocale\n    ? `${cdnBaseUrl}/${projectId}/${locale}.json?fallback=${encodeURIComponent(sourceLocale)}`\n    : `${cdnBaseUrl}/${projectId}/${locale}.json`;\n  const request = JSON.stringify([edgeUrl, attempt]);\n  const [result, setResult] = useState<DeliveryResult>({ request: '', status: 'loading', error: null, translations: {} });\n  // A new language immediately stops displaying the previous language's copy.\n  const current: Pick<DeliveryResult, 'status' | 'error' | 'translations'> = result.request === request ? result : { status: 'loading', error: null, translations: {} };\n\n  useEffect(() => {\n    let cancelled = false;\n    fetch(edgeUrl).then(async response => {\n      if (!response.ok) throw new Error(`HTTP ${response.status}`);\n      const translations = await response.json() as Record<string, string>;\n      if (!cancelled) setResult({ request, status: 'ready', error: null, translations });\n    }).catch(error => {\n      if (cancelled) return;\n      console.warn(`[AppLocale SDK] Failed to load locale ${locale}`, error);\n      setResult({ request, status: 'error', error: `Could not load translations for ${locale}. Check the project is published, then try again.`, translations: {} });\n    });\n    return () => { cancelled = true; };\n  }, [edgeUrl, locale, request]);\n\n  return <LingoContext.Provider value={{\n    t: key => current.translations[key] ?? key,\n    locale,\n    setLocale,\n    delivery: { status: current.status, error: current.error, retry: () => setAttempt(value => value + 1) },\n  }}>{children}</LingoContext.Provider>;\n};\n","import { createContext } from 'react';\nimport type { LingoContextValue } from './types';\n\nexport const LingoContext = createContext<LingoContextValue | null>(null);\n","import type { ReactNode } from 'react';\n\n/** Default CDN base URL used when none is provided to the LingoProvider. */\nexport const DEFAULT_CDN_BASE_URL = 'https://cdn.applocale.com';\n\n/**\n * Props accepted by the LingoProvider component.\n *\n * If `sourceLocale` is set, the SDK appends `?fallback=<sourceLocale>` to\n * fetch requests so the edge worker can fall back to the project's source\n * locale when a target locale is missing. Recommended to set to your\n * project's source locale code (e.g. `\"en-US\"`).\n */\nexport interface LingoProviderProps {\n  /** The project’s public UUID from AppLocale (numeric database IDs are not accepted). */\n  projectId: string;\n  /** Initial locale to load. Defaults to \"en-US\". */\n  defaultLocale?: string;\n  /**\n   * Base URL for the translations CDN / edge worker.\n   * Translations are fetched from `${cdnBaseUrl}/${projectId}/${locale}.json`.\n   * Defaults to {@link DEFAULT_CDN_BASE_URL}.\n   */\n  cdnBaseUrl?: string;\n  /**\n   * Optional. If set, the SDK appends `?fallback=<sourceLocale>` to fetch\n   * requests so the edge worker can fall back to the project's source locale\n   * when a target locale is missing. Recommended to set to your project's\n   * source locale code (e.g. `\"en-US\"`). When omitted, no `?fallback=` query\n   * parameter is appended and the edge worker uses its own default (`\"en\"`).\n   */\n  sourceLocale?: string;\n  children: ReactNode;\n}\n\n/** Value exposed through the Lingo context. */\nexport interface LingoContextValue {\n  /** Translate a key, falling back to the key itself when missing. */\n  t: (key: string) => string;\n  /** The currently active locale. */\n  locale: string;\n  /** Change the active locale (triggers a re-fetch of translations). */\n  setLocale: (locale: string) => void;\n  /** Delivery feedback for applications that show loading/retry controls. */\n  delivery?: TranslationDelivery;\n}\n\nexport interface TranslationDelivery {\n  status: 'loading' | 'ready' | 'error';\n  error: string | null;\n  retry: () => void;\n}\n\n/** AppLocale compatibility aliases; both provider names share the same context. */\nexport type LocaleProviderProps = LingoProviderProps;\nexport type LocaleContextValue = LingoContextValue;\n","import { useContext } from 'react';\nimport { LingoContext } from './context';\n\nfunction useLingoContext() {\n  const context = useContext(LingoContext);\n  if (!context) {\n    throw new Error('AppLocale hooks must be used within a <LingoProvider>; must be used within a <LocaleProvider> when using the compatibility API');\n  }\n  return context;\n}\n\n/**\n * Returns the translation function `t(key) => string`.\n * Falls back to the key name when a translation is missing.\n */\nexport const useT = () => {\n  return useLingoContext().t;\n};\n\n/**\n * Returns the current locale and a setter to change it.\n * Changing the locale triggers a re-fetch of the translations.\n */\nexport const useLocale = (): [string, (locale: string) => void] => {\n  const { locale, setLocale } = useLingoContext();\n  return [locale, setLocale];\n};\n\n/** Loading and recovery feedback from the provider; existing t/locale APIs stay compatible. */\nexport const useTranslationStatus = () => useLingoContext().delivery ?? { status: 'ready' as const, error: null, retry: () => {} };\n","/** Staging-only in-context editor. Give it an expiring project-scoped write key. */\nexport interface AppLocaleConfig {\n  apiKey: string;\n  projectId: string;\n  apiBaseUrl?: string;\n  defaultLocale?: string;\n  namespace?: string;\n}\nexport class AppLocaleVisualEditor {\n  private active = false;\n  private destroyed = false;\n  private pending = false;\n  private readonly button: HTMLButtonElement;\n  private readonly status: HTMLDivElement;\n  private readonly style: HTMLStyleElement;\n  private readonly config: AppLocaleConfig;\n  constructor(config: AppLocaleConfig) {\n    this.config = config;\n    this.style = document.createElement('style');\n    this.style.textContent = '.locale-edge-hover{outline:2px dashed #ffae50!important;cursor:pointer!important}.locale-edge-btn{position:fixed;bottom:24px;right:24px;background:#292724;color:#fff4df;border:1px solid #c48e52;padding:12px 20px;border-radius:16px;font:600 14px system-ui;box-shadow:0 8px 32px #0004;z-index:2147483646}.locale-edge-status{position:fixed;right:24px;bottom:80px;max-width:320px;background:#292724;color:#fff4df;padding:12px;border-radius:12px;font:14px system-ui;z-index:2147483646}.locale-edge-status:empty{display:none}';\n    document.head.appendChild(this.style);\n    this.status = document.createElement('div'); this.status.className = 'locale-edge-status'; this.status.setAttribute('role', 'status'); this.status.setAttribute('aria-live', 'polite'); document.body.appendChild(this.status);\n    this.button = document.createElement('button'); this.button.type = 'button'; this.button.className = 'locale-edge-btn'; this.button.textContent = 'Enable Visual Editor'; this.button.setAttribute('aria-pressed', 'false'); this.button.addEventListener('click', this.toggle); document.body.appendChild(this.button);\n  }\n  private toggle = () => {\n    if (this.destroyed) return;\n    this.active = !this.active; this.button.textContent = this.active ? 'Disable Visual Editor' : 'Enable Visual Editor'; this.button.setAttribute('aria-pressed', String(this.active));\n    if (this.active) { document.body.addEventListener('mouseover', this.over); document.body.addEventListener('mouseout', this.out); document.body.addEventListener('click', this.click, true); }\n    else this.detach();\n  };\n  private target(event: MouseEvent): HTMLElement | null {\n    return event.target instanceof Element ? event.target.closest<HTMLElement>('[data-locale-key]') : null;\n  }\n  private over = (event: MouseEvent) => { this.target(event)?.classList.add('locale-edge-hover'); };\n  private out = (event: MouseEvent) => { this.target(event)?.classList.remove('locale-edge-hover'); };\n  private click = async (event: MouseEvent) => {\n    const target = this.target(event); if (!this.active || !target) return;\n    event.preventDefault(); event.stopPropagation(); if (this.pending) return;\n    const keyName = target.getAttribute('data-locale-key'); if (!keyName?.trim()) return;\n    const current = target.textContent ?? ''; const value = window.prompt(`Edit translation: ${keyName}`, current);\n    if (value === null || value === current) return;\n    const base = (this.config.apiBaseUrl ?? 'https://api.applocale.com/api').replace(/\\/$/, '');\n    try {\n      const url = new URL(base); const local = ['localhost','127.0.0.1','[::1]'].includes(url.hostname);\n      if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) throw new Error('Use an HTTPS API URL or a local development server.');\n      this.pending = true; this.status.textContent = 'Saving translation…';\n      const response = await fetch(`${base}/projects/${encodeURIComponent(this.config.projectId)}/keys/visual-sync`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-AppLocale-Key': this.config.apiKey }, body: JSON.stringify({ keyName, value, localeCode: this.config.defaultLocale ?? 'en-US', namespace: target.getAttribute('data-locale-namespace') ?? this.config.namespace ?? 'default' }) });\n      if (!response.ok) throw new Error(`Save failed (HTTP ${response.status}). Check the project key, scope and locale.`);\n      if (!this.destroyed) { target.textContent = value; this.status.textContent = 'Translation saved.'; }\n    } catch (error) { if (!this.destroyed) this.status.textContent = error instanceof Error ? error.message : 'Unable to save translation. Please try again.'; }\n    finally { this.pending = false; }\n  };\n  private detach() {\n    document.body.removeEventListener('mouseover', this.over); document.body.removeEventListener('mouseout', this.out); document.body.removeEventListener('click', this.click, true);\n    document.querySelectorAll('.locale-edge-hover').forEach(element => element.classList.remove('locale-edge-hover'));\n  }\n  /** Call when unmounting the staging app/editor. Removes every owned element and listener. */\n  destroy() { this.destroyed = true; this.active = false; this.detach(); this.button.removeEventListener('click', this.toggle); this.button.remove(); this.status.remove(); this.style.remove(); }\n}\nexport const initAppLocale = (config: AppLocaleConfig) => new AppLocaleVisualEditor(config);\nexport const initVisualEditor = initAppLocale;\n"],"mappings":"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","names":["import_react","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+export { AppLocaleConfig, AppLocaleVisualEditor, initAppLocale, initVisualEditor } from './visual-editor.cjs';
+
+/** Default CDN base URL used when none is provided to the LingoProvider. */
+declare const DEFAULT_CDN_BASE_URL = "https://cdn.applocale.com";
+/**
+ * Props accepted by the LingoProvider component.
+ *
+ * If `sourceLocale` is set, the SDK appends `?fallback=<sourceLocale>` to
+ * fetch requests so the edge worker can fall back to the project's source
+ * locale when a target locale is missing. Recommended to set to your
+ * project's source locale code (e.g. `"en-US"`).
+ */
+interface LingoProviderProps {
+    /** The project’s public UUID from AppLocale (numeric database IDs are not accepted). */
+    projectId: string;
+    /** Initial locale to load. Defaults to "en-US". */
+    defaultLocale?: string;
+    /**
+     * Base URL for the translations CDN / edge worker.
+     * Translations are fetched from `${cdnBaseUrl}/${projectId}/${locale}.json`.
+     * Defaults to {@link DEFAULT_CDN_BASE_URL}.
+     */
+    cdnBaseUrl?: string;
+    /**
+     * Optional. If set, the SDK appends `?fallback=<sourceLocale>` to fetch
+     * requests so the edge worker can fall back to the project's source locale
+     * when a target locale is missing. Recommended to set to your project's
+     * source locale code (e.g. `"en-US"`). When omitted, no `?fallback=` query
+     * parameter is appended and the edge worker uses its own default (`"en"`).
+     */
+    sourceLocale?: string;
+    children: ReactNode;
+}
+/** Value exposed through the Lingo context. */
+interface LingoContextValue {
+    /** Translate a key, falling back to the key itself when missing. */
+    t: (key: string) => string;
+    /** The currently active locale. */
+    locale: string;
+    /** Change the active locale (triggers a re-fetch of translations). */
+    setLocale: (locale: string) => void;
+    /** Delivery feedback for applications that show loading/retry controls. */
+    delivery?: TranslationDelivery;
+}
+interface TranslationDelivery {
+    status: 'loading' | 'ready' | 'error';
+    error: string | null;
+    retry: () => void;
+}
+/** AppLocale compatibility aliases; both provider names share the same context. */
+type LocaleProviderProps = LingoProviderProps;
+type LocaleContextValue = LingoContextValue;
+
+declare const LingoProvider: ({ projectId, defaultLocale, cdnBaseUrl, sourceLocale, children }: LingoProviderProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Returns the translation function `t(key) => string`.
+ * Falls back to the key name when a translation is missing.
+ */
+declare const useT: () => (key: string) => string;
+/**
+ * Returns the current locale and a setter to change it.
+ * Changing the locale triggers a re-fetch of the translations.
+ */
+declare const useLocale: () => [string, (locale: string) => void];
+/** Loading and recovery feedback from the provider; existing t/locale APIs stay compatible. */
+declare const useTranslationStatus: () => TranslationDelivery;
+
+export { DEFAULT_CDN_BASE_URL, type LingoContextValue, LingoProvider, type LingoProviderProps, type LocaleContextValue, LingoProvider as LocaleProvider, type LocaleProviderProps, type TranslationDelivery, useLocale, useT, useTranslationStatus };

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+export { AppLocaleConfig, AppLocaleVisualEditor, initAppLocale, initVisualEditor } from './visual-editor.js';
+
+/** Default CDN base URL used when none is provided to the LingoProvider. */
+declare const DEFAULT_CDN_BASE_URL = "https://cdn.applocale.com";
+/**
+ * Props accepted by the LingoProvider component.
+ *
+ * If `sourceLocale` is set, the SDK appends `?fallback=<sourceLocale>` to
+ * fetch requests so the edge worker can fall back to the project's source
+ * locale when a target locale is missing. Recommended to set to your
+ * project's source locale code (e.g. `"en-US"`).
+ */
+interface LingoProviderProps {
+    /** The project’s public UUID from AppLocale (numeric database IDs are not accepted). */
+    projectId: string;
+    /** Initial locale to load. Defaults to "en-US". */
+    defaultLocale?: string;
+    /**
+     * Base URL for the translations CDN / edge worker.
+     * Translations are fetched from `${cdnBaseUrl}/${projectId}/${locale}.json`.
+     * Defaults to {@link DEFAULT_CDN_BASE_URL}.
+     */
+    cdnBaseUrl?: string;
+    /**
+     * Optional. If set, the SDK appends `?fallback=<sourceLocale>` to fetch
+     * requests so the edge worker can fall back to the project's source locale
+     * when a target locale is missing. Recommended to set to your project's
+     * source locale code (e.g. `"en-US"`). When omitted, no `?fallback=` query
+     * parameter is appended and the edge worker uses its own default (`"en"`).
+     */
+    sourceLocale?: string;
+    children: ReactNode;
+}
+/** Value exposed through the Lingo context. */
+interface LingoContextValue {
+    /** Translate a key, falling back to the key itself when missing. */
+    t: (key: string) => string;
+    /** The currently active locale. */
+    locale: string;
+    /** Change the active locale (triggers a re-fetch of translations). */
+    setLocale: (locale: string) => void;
+    /** Delivery feedback for applications that show loading/retry controls. */
+    delivery?: TranslationDelivery;
+}
+interface TranslationDelivery {
+    status: 'loading' | 'ready' | 'error';
+    error: string | null;
+    retry: () => void;
+}
+/** AppLocale compatibility aliases; both provider names share the same context. */
+type LocaleProviderProps = LingoProviderProps;
+type LocaleContextValue = LingoContextValue;
+
+declare const LingoProvider: ({ projectId, defaultLocale, cdnBaseUrl, sourceLocale, children }: LingoProviderProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Returns the translation function `t(key) => string`.
+ * Falls back to the key name when a translation is missing.
+ */
+declare const useT: () => (key: string) => string;
+/**
+ * Returns the current locale and a setter to change it.
+ * Changing the locale triggers a re-fetch of the translations.
+ */
+declare const useLocale: () => [string, (locale: string) => void];
+/** Loading and recovery feedback from the provider; existing t/locale APIs stay compatible. */
+declare const useTranslationStatus: () => TranslationDelivery;
+
+export { DEFAULT_CDN_BASE_URL, type LingoContextValue, LingoProvider, type LingoProviderProps, type LocaleContextValue, LingoProvider as LocaleProvider, type LocaleProviderProps, type TranslationDelivery, useLocale, useT, useTranslationStatus };

package/dist/index.js

@@ -0,0 +1,78 @@
+import {
+  AppLocaleVisualEditor,
+  initAppLocale,
+  initVisualEditor
+} from "./chunk-SOQNEZ4L.js";
+
+// src/LingoProvider.tsx
+import { useState, useEffect } from "react";
+
+// src/context.ts
+import { createContext } from "react";
+var LingoContext = createContext(null);
+
+// src/types.ts
+var DEFAULT_CDN_BASE_URL = "https://cdn.applocale.com";
+
+// src/LingoProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var LingoProvider = ({ projectId, defaultLocale = "en-US", cdnBaseUrl = DEFAULT_CDN_BASE_URL, sourceLocale, children }) => {
+  const [locale, setLocale] = useState(defaultLocale);
+  const [attempt, setAttempt] = useState(0);
+  const edgeUrl = sourceLocale ? `${cdnBaseUrl}/${projectId}/${locale}.json?fallback=${encodeURIComponent(sourceLocale)}` : `${cdnBaseUrl}/${projectId}/${locale}.json`;
+  const request = JSON.stringify([edgeUrl, attempt]);
+  const [result, setResult] = useState({ request: "", status: "loading", error: null, translations: {} });
+  const current = result.request === request ? result : { status: "loading", error: null, translations: {} };
+  useEffect(() => {
+    let cancelled = false;
+    fetch(edgeUrl).then(async (response) => {
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const translations = await response.json();
+      if (!cancelled) setResult({ request, status: "ready", error: null, translations });
+    }).catch((error) => {
+      if (cancelled) return;
+      console.warn(`[AppLocale SDK] Failed to load locale ${locale}`, error);
+      setResult({ request, status: "error", error: `Could not load translations for ${locale}. Check the project is published, then try again.`, translations: {} });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [edgeUrl, locale, request]);
+  return /* @__PURE__ */ jsx(LingoContext.Provider, { value: {
+    t: (key) => current.translations[key] ?? key,
+    locale,
+    setLocale,
+    delivery: { status: current.status, error: current.error, retry: () => setAttempt((value) => value + 1) }
+  }, children });
+};
+
+// src/hooks.ts
+import { useContext } from "react";
+function useLingoContext() {
+  const context = useContext(LingoContext);
+  if (!context) {
+    throw new Error("AppLocale hooks must be used within a <LingoProvider>; must be used within a <LocaleProvider> when using the compatibility API");
+  }
+  return context;
+}
+var useT = () => {
+  return useLingoContext().t;
+};
+var useLocale = () => {
+  const { locale, setLocale } = useLingoContext();
+  return [locale, setLocale];
+};
+var useTranslationStatus = () => useLingoContext().delivery ?? { status: "ready", error: null, retry: () => {
+} };
+export {
+  AppLocaleVisualEditor,
+  DEFAULT_CDN_BASE_URL,
+  LingoProvider,
+  LingoProvider as LocaleProvider,
+  initAppLocale,
+  initVisualEditor,
+  useLocale,
+  useT,
+  useTranslationStatus
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LingoProvider.tsx","../src/context.ts","../src/types.ts","../src/hooks.ts"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { LingoContext } from './context';\nimport { DEFAULT_CDN_BASE_URL } from './types';\nimport type { LingoProviderProps, TranslationDelivery } from './types';\n\ntype DeliveryResult = { request: string; status: TranslationDelivery['status']; error: string | null; translations: Record<string, string> };\n\nexport const LingoProvider = ({ projectId, defaultLocale = 'en-US', cdnBaseUrl = DEFAULT_CDN_BASE_URL, sourceLocale, children }: LingoProviderProps) => {\n  const [locale, setLocale] = useState(defaultLocale);\n  const [attempt, setAttempt] = useState(0);\n  const edgeUrl = sourceLocale\n    ? `${cdnBaseUrl}/${projectId}/${locale}.json?fallback=${encodeURIComponent(sourceLocale)}`\n    : `${cdnBaseUrl}/${projectId}/${locale}.json`;\n  const request = JSON.stringify([edgeUrl, attempt]);\n  const [result, setResult] = useState<DeliveryResult>({ request: '', status: 'loading', error: null, translations: {} });\n  // A new language immediately stops displaying the previous language's copy.\n  const current: Pick<DeliveryResult, 'status' | 'error' | 'translations'> = result.request === request ? result : { status: 'loading', error: null, translations: {} };\n\n  useEffect(() => {\n    let cancelled = false;\n    fetch(edgeUrl).then(async response => {\n      if (!response.ok) throw new Error(`HTTP ${response.status}`);\n      const translations = await response.json() as Record<string, string>;\n      if (!cancelled) setResult({ request, status: 'ready', error: null, translations });\n    }).catch(error => {\n      if (cancelled) return;\n      console.warn(`[AppLocale SDK] Failed to load locale ${locale}`, error);\n      setResult({ request, status: 'error', error: `Could not load translations for ${locale}. Check the project is published, then try again.`, translations: {} });\n    });\n    return () => { cancelled = true; };\n  }, [edgeUrl, locale, request]);\n\n  return <LingoContext.Provider value={{\n    t: key => current.translations[key] ?? key,\n    locale,\n    setLocale,\n    delivery: { status: current.status, error: current.error, retry: () => setAttempt(value => value + 1) },\n  }}>{children}</LingoContext.Provider>;\n};\n","import { createContext } from 'react';\nimport type { LingoContextValue } from './types';\n\nexport const LingoContext = createContext<LingoContextValue | null>(null);\n","import type { ReactNode } from 'react';\n\n/** Default CDN base URL used when none is provided to the LingoProvider. */\nexport const DEFAULT_CDN_BASE_URL = 'https://cdn.applocale.com';\n\n/**\n * Props accepted by the LingoProvider component.\n *\n * If `sourceLocale` is set, the SDK appends `?fallback=<sourceLocale>` to\n * fetch requests so the edge worker can fall back to the project's source\n * locale when a target locale is missing. Recommended to set to your\n * project's source locale code (e.g. `\"en-US\"`).\n */\nexport interface LingoProviderProps {\n  /** The project’s public UUID from AppLocale (numeric database IDs are not accepted). */\n  projectId: string;\n  /** Initial locale to load. Defaults to \"en-US\". */\n  defaultLocale?: string;\n  /**\n   * Base URL for the translations CDN / edge worker.\n   * Translations are fetched from `${cdnBaseUrl}/${projectId}/${locale}.json`.\n   * Defaults to {@link DEFAULT_CDN_BASE_URL}.\n   */\n  cdnBaseUrl?: string;\n  /**\n   * Optional. If set, the SDK appends `?fallback=<sourceLocale>` to fetch\n   * requests so the edge worker can fall back to the project's source locale\n   * when a target locale is missing. Recommended to set to your project's\n   * source locale code (e.g. `\"en-US\"`). When omitted, no `?fallback=` query\n   * parameter is appended and the edge worker uses its own default (`\"en\"`).\n   */\n  sourceLocale?: string;\n  children: ReactNode;\n}\n\n/** Value exposed through the Lingo context. */\nexport interface LingoContextValue {\n  /** Translate a key, falling back to the key itself when missing. */\n  t: (key: string) => string;\n  /** The currently active locale. */\n  locale: string;\n  /** Change the active locale (triggers a re-fetch of translations). */\n  setLocale: (locale: string) => void;\n  /** Delivery feedback for applications that show loading/retry controls. */\n  delivery?: TranslationDelivery;\n}\n\nexport interface TranslationDelivery {\n  status: 'loading' | 'ready' | 'error';\n  error: string | null;\n  retry: () => void;\n}\n\n/** AppLocale compatibility aliases; both provider names share the same context. */\nexport type LocaleProviderProps = LingoProviderProps;\nexport type LocaleContextValue = LingoContextValue;\n","import { useContext } from 'react';\nimport { LingoContext } from './context';\n\nfunction useLingoContext() {\n  const context = useContext(LingoContext);\n  if (!context) {\n    throw new Error('AppLocale hooks must be used within a <LingoProvider>; must be used within a <LocaleProvider> when using the compatibility API');\n  }\n  return context;\n}\n\n/**\n * Returns the translation function `t(key) => string`.\n * Falls back to the key name when a translation is missing.\n */\nexport const useT = () => {\n  return useLingoContext().t;\n};\n\n/**\n * Returns the current locale and a setter to change it.\n * Changing the locale triggers a re-fetch of the translations.\n */\nexport const useLocale = (): [string, (locale: string) => void] => {\n  const { locale, setLocale } = useLingoContext();\n  return [locale, setLocale];\n};\n\n/** Loading and recovery feedback from the provider; existing t/locale APIs stay compatible. */\nexport const useTranslationStatus = () => useLingoContext().delivery ?? { status: 'ready' as const, error: null, retry: () => {} };\n"],"mappings":";;;;;;;AAAA,SAAgB,UAAU,iBAAiB;;;ACA3C,SAAS,qBAAqB;AAGvB,IAAM,eAAe,cAAwC,IAAI;;;ACAjE,IAAM,uBAAuB;;;AF6B3B;AAzBF,IAAM,gBAAgB,CAAC,EAAE,WAAW,gBAAgB,SAAS,aAAa,sBAAsB,cAAc,SAAS,MAA0B;AACtJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AACxC,QAAM,UAAU,eACZ,GAAG,UAAU,IAAI,SAAS,IAAI,MAAM,kBAAkB,mBAAmB,YAAY,CAAC,KACtF,GAAG,UAAU,IAAI,SAAS,IAAI,MAAM;AACxC,QAAM,UAAU,KAAK,UAAU,CAAC,SAAS,OAAO,CAAC;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAyB,EAAE,SAAS,IAAI,QAAQ,WAAW,OAAO,MAAM,cAAc,CAAC,EAAE,CAAC;AAEtH,QAAM,UAAqE,OAAO,YAAY,UAAU,SAAS,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,CAAC,EAAE;AAEpK,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,UAAM,OAAO,EAAE,KAAK,OAAM,aAAY;AACpC,UAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,QAAQ,SAAS,MAAM,EAAE;AAC3D,YAAM,eAAe,MAAM,SAAS,KAAK;AACzC,UAAI,CAAC,UAAW,WAAU,EAAE,SAAS,QAAQ,SAAS,OAAO,MAAM,aAAa,CAAC;AAAA,IACnF,CAAC,EAAE,MAAM,WAAS;AAChB,UAAI,UAAW;AACf,cAAQ,KAAK,yCAAyC,MAAM,IAAI,KAAK;AACrE,gBAAU,EAAE,SAAS,QAAQ,SAAS,OAAO,mCAAmC,MAAM,qDAAqD,cAAc,CAAC,EAAE,CAAC;AAAA,IAC/J,CAAC;AACD,WAAO,MAAM;AAAE,kBAAY;AAAA,IAAM;AAAA,EACnC,GAAG,CAAC,SAAS,QAAQ,OAAO,CAAC;AAE7B,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAO;AAAA,IACnC,GAAG,SAAO,QAAQ,aAAa,GAAG,KAAK;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU,EAAE,QAAQ,QAAQ,QAAQ,OAAO,QAAQ,OAAO,OAAO,MAAM,WAAW,WAAS,QAAQ,CAAC,EAAE;AAAA,EACxG,GAAI,UAAS;AACf;;;AGtCA,SAAS,kBAAkB;AAG3B,SAAS,kBAAkB;AACzB,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gIAAgI;AAAA,EAClJ;AACA,SAAO;AACT;AAMO,IAAM,OAAO,MAAM;AACxB,SAAO,gBAAgB,EAAE;AAC3B;AAMO,IAAM,YAAY,MAA0C;AACjE,QAAM,EAAE,QAAQ,UAAU,IAAI,gBAAgB;AAC9C,SAAO,CAAC,QAAQ,SAAS;AAC3B;AAGO,IAAM,uBAAuB,MAAM,gBAAgB,EAAE,YAAY,EAAE,QAAQ,SAAkB,OAAO,MAAM,OAAO,MAAM;AAAC,EAAE;","names":[]}

package/dist/visual-editor.cjs

@@ -0,0 +1,125 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visual-editor.ts
+var visual_editor_exports = {};
+__export(visual_editor_exports, {
+  AppLocaleVisualEditor: () => AppLocaleVisualEditor,
+  initAppLocale: () => initAppLocale,
+  initVisualEditor: () => initVisualEditor
+});
+module.exports = __toCommonJS(visual_editor_exports);
+var AppLocaleVisualEditor = class {
+  constructor(config) {
+    this.active = false;
+    this.destroyed = false;
+    this.pending = false;
+    this.toggle = () => {
+      if (this.destroyed) return;
+      this.active = !this.active;
+      this.button.textContent = this.active ? "Disable Visual Editor" : "Enable Visual Editor";
+      this.button.setAttribute("aria-pressed", String(this.active));
+      if (this.active) {
+        document.body.addEventListener("mouseover", this.over);
+        document.body.addEventListener("mouseout", this.out);
+        document.body.addEventListener("click", this.click, true);
+      } else this.detach();
+    };
+    this.over = (event) => {
+      this.target(event)?.classList.add("locale-edge-hover");
+    };
+    this.out = (event) => {
+      this.target(event)?.classList.remove("locale-edge-hover");
+    };
+    this.click = async (event) => {
+      const target = this.target(event);
+      if (!this.active || !target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.pending) return;
+      const keyName = target.getAttribute("data-locale-key");
+      if (!keyName?.trim()) return;
+      const current = target.textContent ?? "";
+      const value = window.prompt(`Edit translation: ${keyName}`, current);
+      if (value === null || value === current) return;
+      const base = (this.config.apiBaseUrl ?? "https://api.applocale.com/api").replace(/\/$/, "");
+      try {
+        const url = new URL(base);
+        const local = ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
+        if (url.protocol !== "https:" && !(url.protocol === "http:" && local)) throw new Error("Use an HTTPS API URL or a local development server.");
+        this.pending = true;
+        this.status.textContent = "Saving translation\u2026";
+        const response = await fetch(`${base}/projects/${encodeURIComponent(this.config.projectId)}/keys/visual-sync`, { method: "POST", headers: { "Content-Type": "application/json", "X-AppLocale-Key": this.config.apiKey }, body: JSON.stringify({ keyName, value, localeCode: this.config.defaultLocale ?? "en-US", namespace: target.getAttribute("data-locale-namespace") ?? this.config.namespace ?? "default" }) });
+        if (!response.ok) throw new Error(`Save failed (HTTP ${response.status}). Check the project key, scope and locale.`);
+        if (!this.destroyed) {
+          target.textContent = value;
+          this.status.textContent = "Translation saved.";
+        }
+      } catch (error) {
+        if (!this.destroyed) this.status.textContent = error instanceof Error ? error.message : "Unable to save translation. Please try again.";
+      } finally {
+        this.pending = false;
+      }
+    };
+    this.config = config;
+    this.style = document.createElement("style");
+    this.style.textContent = ".locale-edge-hover{outline:2px dashed #ffae50!important;cursor:pointer!important}.locale-edge-btn{position:fixed;bottom:24px;right:24px;background:#292724;color:#fff4df;border:1px solid #c48e52;padding:12px 20px;border-radius:16px;font:600 14px system-ui;box-shadow:0 8px 32px #0004;z-index:2147483646}.locale-edge-status{position:fixed;right:24px;bottom:80px;max-width:320px;background:#292724;color:#fff4df;padding:12px;border-radius:12px;font:14px system-ui;z-index:2147483646}.locale-edge-status:empty{display:none}";
+    document.head.appendChild(this.style);
+    this.status = document.createElement("div");
+    this.status.className = "locale-edge-status";
+    this.status.setAttribute("role", "status");
+    this.status.setAttribute("aria-live", "polite");
+    document.body.appendChild(this.status);
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.className = "locale-edge-btn";
+    this.button.textContent = "Enable Visual Editor";
+    this.button.setAttribute("aria-pressed", "false");
+    this.button.addEventListener("click", this.toggle);
+    document.body.appendChild(this.button);
+  }
+  target(event) {
+    return event.target instanceof Element ? event.target.closest("[data-locale-key]") : null;
+  }
+  detach() {
+    document.body.removeEventListener("mouseover", this.over);
+    document.body.removeEventListener("mouseout", this.out);
+    document.body.removeEventListener("click", this.click, true);
+    document.querySelectorAll(".locale-edge-hover").forEach((element) => element.classList.remove("locale-edge-hover"));
+  }
+  /** Call when unmounting the staging app/editor. Removes every owned element and listener. */
+  destroy() {
+    this.destroyed = true;
+    this.active = false;
+    this.detach();
+    this.button.removeEventListener("click", this.toggle);
+    this.button.remove();
+    this.status.remove();
+    this.style.remove();
+  }
+};
+var initAppLocale = (config) => new AppLocaleVisualEditor(config);
+var initVisualEditor = initAppLocale;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppLocaleVisualEditor,
+  initAppLocale,
+  initVisualEditor
+});
+//# sourceMappingURL=visual-editor.cjs.map

package/dist/visual-editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visual-editor.ts"],"sourcesContent":["/** Staging-only in-context editor. Give it an expiring project-scoped write key. */\nexport interface AppLocaleConfig {\n  apiKey: string;\n  projectId: string;\n  apiBaseUrl?: string;\n  defaultLocale?: string;\n  namespace?: string;\n}\nexport class AppLocaleVisualEditor {\n  private active = false;\n  private destroyed = false;\n  private pending = false;\n  private readonly button: HTMLButtonElement;\n  private readonly status: HTMLDivElement;\n  private readonly style: HTMLStyleElement;\n  private readonly config: AppLocaleConfig;\n  constructor(config: AppLocaleConfig) {\n    this.config = config;\n    this.style = document.createElement('style');\n    this.style.textContent = '.locale-edge-hover{outline:2px dashed #ffae50!important;cursor:pointer!important}.locale-edge-btn{position:fixed;bottom:24px;right:24px;background:#292724;color:#fff4df;border:1px solid #c48e52;padding:12px 20px;border-radius:16px;font:600 14px system-ui;box-shadow:0 8px 32px #0004;z-index:2147483646}.locale-edge-status{position:fixed;right:24px;bottom:80px;max-width:320px;background:#292724;color:#fff4df;padding:12px;border-radius:12px;font:14px system-ui;z-index:2147483646}.locale-edge-status:empty{display:none}';\n    document.head.appendChild(this.style);\n    this.status = document.createElement('div'); this.status.className = 'locale-edge-status'; this.status.setAttribute('role', 'status'); this.status.setAttribute('aria-live', 'polite'); document.body.appendChild(this.status);\n    this.button = document.createElement('button'); this.button.type = 'button'; this.button.className = 'locale-edge-btn'; this.button.textContent = 'Enable Visual Editor'; this.button.setAttribute('aria-pressed', 'false'); this.button.addEventListener('click', this.toggle); document.body.appendChild(this.button);\n  }\n  private toggle = () => {\n    if (this.destroyed) return;\n    this.active = !this.active; this.button.textContent = this.active ? 'Disable Visual Editor' : 'Enable Visual Editor'; this.button.setAttribute('aria-pressed', String(this.active));\n    if (this.active) { document.body.addEventListener('mouseover', this.over); document.body.addEventListener('mouseout', this.out); document.body.addEventListener('click', this.click, true); }\n    else this.detach();\n  };\n  private target(event: MouseEvent): HTMLElement | null {\n    return event.target instanceof Element ? event.target.closest<HTMLElement>('[data-locale-key]') : null;\n  }\n  private over = (event: MouseEvent) => { this.target(event)?.classList.add('locale-edge-hover'); };\n  private out = (event: MouseEvent) => { this.target(event)?.classList.remove('locale-edge-hover'); };\n  private click = async (event: MouseEvent) => {\n    const target = this.target(event); if (!this.active || !target) return;\n    event.preventDefault(); event.stopPropagation(); if (this.pending) return;\n    const keyName = target.getAttribute('data-locale-key'); if (!keyName?.trim()) return;\n    const current = target.textContent ?? ''; const value = window.prompt(`Edit translation: ${keyName}`, current);\n    if (value === null || value === current) return;\n    const base = (this.config.apiBaseUrl ?? 'https://api.applocale.com/api').replace(/\\/$/, '');\n    try {\n      const url = new URL(base); const local = ['localhost','127.0.0.1','[::1]'].includes(url.hostname);\n      if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) throw new Error('Use an HTTPS API URL or a local development server.');\n      this.pending = true; this.status.textContent = 'Saving translation…';\n      const response = await fetch(`${base}/projects/${encodeURIComponent(this.config.projectId)}/keys/visual-sync`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-AppLocale-Key': this.config.apiKey }, body: JSON.stringify({ keyName, value, localeCode: this.config.defaultLocale ?? 'en-US', namespace: target.getAttribute('data-locale-namespace') ?? this.config.namespace ?? 'default' }) });\n      if (!response.ok) throw new Error(`Save failed (HTTP ${response.status}). Check the project key, scope and locale.`);\n      if (!this.destroyed) { target.textContent = value; this.status.textContent = 'Translation saved.'; }\n    } catch (error) { if (!this.destroyed) this.status.textContent = error instanceof Error ? error.message : 'Unable to save translation. Please try again.'; }\n    finally { this.pending = false; }\n  };\n  private detach() {\n    document.body.removeEventListener('mouseover', this.over); document.body.removeEventListener('mouseout', this.out); document.body.removeEventListener('click', this.click, true);\n    document.querySelectorAll('.locale-edge-hover').forEach(element => element.classList.remove('locale-edge-hover'));\n  }\n  /** Call when unmounting the staging app/editor. Removes every owned element and listener. */\n  destroy() { this.destroyed = true; this.active = false; this.detach(); this.button.removeEventListener('click', this.toggle); this.button.remove(); this.status.remove(); this.style.remove(); }\n}\nexport const initAppLocale = (config: AppLocaleConfig) => new AppLocaleVisualEditor(config);\nexport const initVisualEditor = initAppLocale;\n"],"mappings":"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","names":[]}

package/dist/visual-editor.d.cts

@@ -0,0 +1,30 @@
+/** Staging-only in-context editor. Give it an expiring project-scoped write key. */
+interface AppLocaleConfig {
+    apiKey: string;
+    projectId: string;
+    apiBaseUrl?: string;
+    defaultLocale?: string;
+    namespace?: string;
+}
+declare class AppLocaleVisualEditor {
+    private active;
+    private destroyed;
+    private pending;
+    private readonly button;
+    private readonly status;
+    private readonly style;
+    private readonly config;
+    constructor(config: AppLocaleConfig);
+    private toggle;
+    private target;
+    private over;
+    private out;
+    private click;
+    private detach;
+    /** Call when unmounting the staging app/editor. Removes every owned element and listener. */
+    destroy(): void;
+}
+declare const initAppLocale: (config: AppLocaleConfig) => AppLocaleVisualEditor;
+declare const initVisualEditor: (config: AppLocaleConfig) => AppLocaleVisualEditor;
+
+export { type AppLocaleConfig, AppLocaleVisualEditor, initAppLocale, initVisualEditor };

package/dist/visual-editor.d.ts

@@ -0,0 +1,30 @@
+/** Staging-only in-context editor. Give it an expiring project-scoped write key. */
+interface AppLocaleConfig {
+    apiKey: string;
+    projectId: string;
+    apiBaseUrl?: string;
+    defaultLocale?: string;
+    namespace?: string;
+}
+declare class AppLocaleVisualEditor {
+    private active;
+    private destroyed;
+    private pending;
+    private readonly button;
+    private readonly status;
+    private readonly style;
+    private readonly config;
+    constructor(config: AppLocaleConfig);
+    private toggle;
+    private target;
+    private over;
+    private out;
+    private click;
+    private detach;
+    /** Call when unmounting the staging app/editor. Removes every owned element and listener. */
+    destroy(): void;
+}
+declare const initAppLocale: (config: AppLocaleConfig) => AppLocaleVisualEditor;
+declare const initVisualEditor: (config: AppLocaleConfig) => AppLocaleVisualEditor;
+
+export { type AppLocaleConfig, AppLocaleVisualEditor, initAppLocale, initVisualEditor };

package/dist/visual-editor.js

@@ -0,0 +1,11 @@
+import {
+  AppLocaleVisualEditor,
+  initAppLocale,
+  initVisualEditor
+} from "./chunk-SOQNEZ4L.js";
+export {
+  AppLocaleVisualEditor,
+  initAppLocale,
+  initVisualEditor
+};
+//# sourceMappingURL=visual-editor.js.map

package/dist/visual-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@applocale/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-beta.4",
+  "description": "AppLocale React translation and staging visual editor SDK",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "prepare": "npm run build",
+    "dev": "tsup --watch",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.6",
+    "@vitest/coverage-v8": "^4.1.12",
+    "esbuild": "^0.28.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.12"
+  },
+  "overrides": {
+    "tsup": {
+      "esbuild": "^0.28.1"
+    }
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}