@fastbackr/react 0.0.0-stage → 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+
+import { FastbackrOptions, GetToken, GetToken as GetToken$1 } from "@fastbackr/core/boot";
+import { ReactNode, Ref } from "react";
+import { CreateTokenResponse, ErrorCode, ErrorEnvelope, GuestIdentity, Reviewer } from "@fastbackr/core/contract";
+//#region src/fastbackr.d.ts
+type FastbackrHandle = Readonly<{
+  show(): void;
+  hide(): void;
+}>;
+type FastbackrProps = FastbackrOptions & Readonly<{
+  ref?: Ref<FastbackrHandle>;
+}>;
+//#endregion
+//#region src/provider.d.ts
+type FastbackrProviderProps = Omit<FastbackrProps, "getToken" | "ref"> & Readonly<{
+  tokenUrl?: string;
+  getToken?: GetToken$1;
+  children?: ReactNode;
+}>;
+export declare function FastbackrProvider({ tokenUrl, getToken, children, ...options }: FastbackrProviderProps): import("react").JSX.Element;
+export declare function useFastbackr(): FastbackrHandle;
+//#endregion
+export type { CreateTokenResponse, ErrorCode, ErrorEnvelope, FastbackrHandle, FastbackrProviderProps, GetToken, GuestIdentity, Reviewer };

package/dist/index.js

@@ -0,0 +1,132 @@
+"use client";
+import { DEFAULT_ENDPOINT, Fab, isHidden, normalizeEndpoint, rememberHidden, rememberVisible, shouldRevealOnLoad, tokenRoute, watchCsp, watchRevealGesture } from "@fastbackr/core/boot";
+import { Component, Suspense, createContext, lazy, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/fastbackr.tsx
+const App = lazy(() => import("./app-Cw3fHqqr.js"));
+const instanceKey = Symbol.for("fastbackr.instance");
+function Fastbackr({ ref, ...props }) {
+	if (typeof props.getToken !== "function") throw new TypeError("<FastbackrProvider>'s getToken must be a function that calls your own token route.");
+	const latest = useRef(props);
+	useEffect(() => {
+		latest.current = props;
+	});
+	const [options] = useState(() => ({
+		...props,
+		endpoint: normalizeEndpoint(props.endpoint ?? DEFAULT_ENDPOINT),
+		getToken: (guest) => latest.current.getToken(guest),
+		signIn: props.signIn && (() => latest.current.signIn?.())
+	}));
+	const [open, setOpen] = useState(false);
+	const [commentRequest, setCommentRequest] = useState(0);
+	const [flashRequest, setFlashRequest] = useState(0);
+	const fab = useRef(null);
+	const [drafts] = useState(() => /* @__PURE__ */ new Map());
+	useEffect(() => {
+		const state = globalThis;
+		if (state[instanceKey]) return;
+		const owner = {};
+		state[instanceKey] = owner;
+		const abort = new AbortController();
+		const button = new Fab(() => {
+			setOpen(true);
+			setCommentRequest((count) => count + 1);
+		});
+		fab.current = button;
+		watchRevealGesture(() => {
+			rememberHidden(false);
+			setOpen(true);
+		}, abort.signal);
+		watchCsp(new URL(options.endpoint).origin, abort.signal);
+		if (shouldRevealOnLoad()) setOpen(true);
+		else if (!isHidden()) button.show();
+		return () => {
+			abort.abort();
+			button.hide();
+			fab.current = null;
+			setOpen(false);
+			if (state[instanceKey] === owner) delete state[instanceKey];
+		};
+	}, [options]);
+	useEffect(() => {
+		if (open) rememberVisible(true);
+	}, [open]);
+	const hideFab = useCallback(() => fab.current?.hide(), []);
+	const showFab = useCallback(() => {
+		if (!isHidden()) fab.current?.show();
+	}, []);
+	const minimize = () => {
+		setOpen(false);
+		rememberVisible(false);
+		showFab();
+	};
+	const close = () => {
+		setOpen(false);
+		fab.current?.hide();
+		rememberVisible(false);
+		rememberHidden(true);
+	};
+	useImperativeHandle(ref, () => ({
+		show() {
+			rememberHidden(false);
+			if (open) setFlashRequest((count) => count + 1);
+			else {
+				fab.current?.show();
+				fab.current?.flash();
+			}
+		},
+		hide: close
+	}));
+	if (!open) return null;
+	return /* @__PURE__ */ jsx(LoadFailure, { children: /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(App, {
+			options,
+			drafts,
+			commentRequest,
+			flashRequest,
+			hideFab,
+			showFab,
+			minimize,
+			close
+		})
+	}) });
+}
+var LoadFailure = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error) {
+		console.error("Fastbackr could not load:", error instanceof Error ? error.message : "Unknown error");
+	}
+	render() {
+		return this.state.failed ? null : this.props.children;
+	}
+};
+//#endregion
+//#region src/provider.tsx
+const FastbackrContext = createContext(null);
+function FastbackrProvider({ tokenUrl, getToken, children, ...options }) {
+	const sdk = useRef(null);
+	const [handle] = useState(() => ({
+		show: () => sdk.current?.show(),
+		hide: () => sdk.current?.hide()
+	}));
+	const fromRoute = useMemo(() => tokenRoute(tokenUrl), [tokenUrl]);
+	return /* @__PURE__ */ jsxs(FastbackrContext, {
+		value: handle,
+		children: [children, /* @__PURE__ */ jsx(Fastbackr, {
+			ref: sdk,
+			getToken: getToken ?? fromRoute,
+			...options
+		})]
+	});
+}
+function useFastbackr() {
+	const handle = useContext(FastbackrContext);
+	if (!handle) throw new Error("useFastbackr() must be used inside <FastbackrProvider>.");
+	return handle;
+}
+//#endregion
+export { FastbackrProvider, useFastbackr };

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@fastbackr/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.3",
+  "description": "Comment on any element of a web page. The React SDK for Fastbackr.",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://fastbackr.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HuggerHustle/fastbackr.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@fastbackr/core": "0.0.3",
+    "@remixicon/react": "^4.9.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.4.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.2",
+    "@fastbackr/config-biome": "0.0.3",
+    "@fastbackr/config-typescript": "0.0.3",
+    "@fastbackr/ui": "0.0.3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "shadcn": "^4.21.1",
+    "tailwind-animations": "^1.0.2",
+    "tailwindcss": "^4",
+    "tsdown": "^0.23.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test --experimental-strip-types \"src/**/*.test.ts\"",
+    "lint": "biome check",
+    "format": "biome format --write"
+  }
 }