@nubitio/admin 0.5.13 → 0.5.15

package/dist/index.cjs

@@ -383,8 +383,213 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 	});
 };
 //#endregion
+//#region packages/admin/auth/SessionContext.tsx
+const SessionContext = (0, react.createContext)(null);
+function joinApiPath$1(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "auth/logout", children }) {
+	const [session, setSession] = (0, react.useState)({ status: "loading" });
+	const refresh = (0, react.useCallback)(async () => {
+		try {
+			const response = await fetch(joinApiPath$1(apiBaseUrl, mePath), { credentials: "include" });
+			if (!response.ok) {
+				setSession({ status: "anonymous" });
+				return;
+			}
+			setSession({
+				status: "authenticated",
+				profile: await response.json()
+			});
+		} catch {
+			setSession({ status: "anonymous" });
+		}
+	}, [apiBaseUrl, mePath]);
+	(0, react.useEffect)(() => {
+		refresh();
+	}, [refresh]);
+	const logout = (0, react.useCallback)(async () => {
+		await fetch(joinApiPath$1(apiBaseUrl, logoutPath), {
+			method: "POST",
+			credentials: "include"
+		});
+		setSession({ status: "anonymous" });
+	}, [apiBaseUrl, logoutPath]);
+	const value = (0, react.useMemo)(() => ({
+		session,
+		refresh,
+		logout,
+		roles: session.status === "authenticated" ? session.profile.roles : [],
+		username: session.status === "authenticated" ? session.profile.username : null
+	}), [
+		logout,
+		refresh,
+		session
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionContext.Provider, {
+		value,
+		children
+	});
+}
+function useSession() {
+	const context = (0, react.useContext)(SessionContext);
+	if (!context) throw new Error("useSession must be used within a <SessionProvider>.");
+	return context;
+}
+//#endregion
+//#region packages/admin/auth/LoginPage.tsx
+function joinApiPath(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
+	const [username, setUsername] = (0, react.useState)(defaultUsername);
+	const [password, setPassword] = (0, react.useState)("");
+	const [error, setError] = (0, react.useState)(null);
+	const [busy, setBusy] = (0, react.useState)(false);
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath(apiBaseUrl, loginPath), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({
+					username,
+					password
+				})
+			});
+			if (!response.ok) {
+				setError((await response.json().catch(() => null))?.message ?? "Login failed");
+				return;
+			}
+			onLoggedIn();
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Card, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 320,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					style: { margin: 0 },
+					children: title
+				}),
+				hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: hint
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.TextField, {
+					placeholder: "Email",
+					value: username,
+					autoComplete: "username",
+					onChange: (e) => setUsername(e.target.value)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.TextField, {
+					placeholder: "Password",
+					type: "password",
+					value: password,
+					autoComplete: "current-password",
+					onChange: (e) => setPassword(e.target.value)
+				}),
+				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy,
+					children: busy ? "Signing in…" : "Sign in"
+				})
+			]
+		}) })
+	});
+}
+//#endregion
+//#region packages/admin/runtime/useAppRuntime.ts
+function useAppRuntime() {
+	const [toasts, setToasts] = (0, react.useState)([]);
+	const dismiss = (0, react.useCallback)((id) => {
+		setToasts((current) => current.filter((toast) => toast.id !== id));
+	}, []);
+	const notify = (0, react.useCallback)((message, type = "info", durationMs = 4e3) => {
+		const id = Date.now() + Math.floor(Math.random() * 1e3);
+		setToasts((current) => [...current, {
+			id,
+			message,
+			type
+		}]);
+		window.setTimeout(() => dismiss(id), durationMs);
+	}, [dismiss]);
+	const confirm = (0, react.useCallback)((message) => {
+		if (typeof window === "undefined") return false;
+		return window.confirm(message);
+	}, []);
+	return {
+		runtime: (0, react.useMemo)(() => ({
+			notify,
+			confirm
+		}), [confirm, notify]),
+		toasts,
+		dismiss
+	};
+}
+//#endregion
+//#region packages/admin/runtime/ToastHost.tsx
+const TYPE_CLASS = {
+	success: "nb-toast--success",
+	error: "nb-toast--error",
+	warning: "nb-toast--warning",
+	info: "nb-toast--info"
+};
+function ToastHost({ toasts, onDismiss }) {
+	if (toasts.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "nb-toast-host",
+		"aria-live": "polite",
+		children: toasts.map((toast) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `nb-toast ${TYPE_CLASS[toast.type]}`,
+			role: "status",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: toast.message }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "nb-toast__close",
+				onClick: () => onDismiss(toast.id),
+				children: "×"
+			})]
+		}, toast.id))
+	});
+}
+//#endregion
 exports.AdminHeader = AdminHeader;
 exports.AdminShell = AdminShell;
 exports.AdminSidebarMenu = AdminSidebarMenu;
+exports.LoginPage = LoginPage;
+exports.SessionProvider = SessionProvider;
+exports.ToastHost = ToastHost;
+exports.useAppRuntime = useAppRuntime;
 exports.useScreenSize = useScreenSize;
 exports.useScreenSizeClass = useScreenSizeClass;
+exports.useSession = useSession;

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import React from "react";
+import { CoreRuntime } from "@nubitio/core";
 
 //#region packages/admin/AdminHeader.d.ts
 interface AdminHeaderAction {
@@ -95,4 +96,83 @@ declare const useScreenSize: () => {
 };
 declare const useScreenSizeClass: () => "screen-large" | "screen-medium" | "screen-small" | "screen-x-small";
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, useScreenSize, useScreenSizeClass };
+//#region packages/admin/auth/SessionContext.d.ts
+type SessionProfile = {
+  username: string;
+  roles: string[];
+};
+type SessionState = {
+  status: 'loading';
+} | {
+  status: 'anonymous';
+} | {
+  status: 'authenticated';
+  profile: SessionProfile;
+};
+interface SessionProviderConfig {
+  /** API base URL, e.g. `/api/`. */
+  apiBaseUrl?: string;
+  /** Profile endpoint relative to apiBaseUrl. @default `me` */
+  mePath?: string;
+  /** Logout endpoint relative to apiBaseUrl. @default `auth/logout` */
+  logoutPath?: string;
+}
+interface SessionContextValue {
+  session: SessionState;
+  refresh: () => Promise<void>;
+  logout: () => Promise<void>;
+  roles: string[];
+  username: string | null;
+}
+declare function SessionProvider({
+  apiBaseUrl,
+  mePath,
+  logoutPath,
+  children
+}: SessionProviderConfig & {
+  children: React.ReactNode;
+}): React.JSX.Element;
+declare function useSession(): SessionContextValue;
+//#endregion
+//#region packages/admin/auth/LoginPage.d.ts
+interface LoginPageProps {
+  onLoggedIn: () => void;
+  apiBaseUrl?: string;
+  loginPath?: string;
+  title?: string;
+  hint?: string;
+  defaultUsername?: string;
+}
+declare function LoginPage({
+  onLoggedIn,
+  apiBaseUrl,
+  loginPath,
+  title,
+  hint,
+  defaultUsername
+}: LoginPageProps): import("react").JSX.Element;
+//#endregion
+//#region packages/admin/runtime/useAppRuntime.d.ts
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
+type ToastItem = {
+  id: number;
+  message: string;
+  type: NotificationType;
+};
+declare function useAppRuntime(): {
+  runtime: CoreRuntime;
+  toasts: ToastItem[];
+  dismiss: (id: number) => void;
+};
+//#endregion
+//#region packages/admin/runtime/ToastHost.d.ts
+interface ToastHostProps {
+  toasts: ToastItem[];
+  onDismiss: (id: number) => void;
+}
+declare function ToastHost({
+  toasts,
+  onDismiss
+}: ToastHostProps): import("react").JSX.Element | null;
+//#endregion
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, LoginPage, type LoginPageProps, type NotificationType, type SessionContextValue, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, ToastHost, type ToastHostProps, type ToastItem, useAppRuntime, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import React from "react";
+import { CoreRuntime } from "@nubitio/core";
 
 //#region packages/admin/AdminHeader.d.ts
 interface AdminHeaderAction {
@@ -95,4 +96,83 @@ declare const useScreenSize: () => {
 };
 declare const useScreenSizeClass: () => "screen-large" | "screen-medium" | "screen-small" | "screen-x-small";
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, useScreenSize, useScreenSizeClass };
+//#region packages/admin/auth/SessionContext.d.ts
+type SessionProfile = {
+  username: string;
+  roles: string[];
+};
+type SessionState = {
+  status: 'loading';
+} | {
+  status: 'anonymous';
+} | {
+  status: 'authenticated';
+  profile: SessionProfile;
+};
+interface SessionProviderConfig {
+  /** API base URL, e.g. `/api/`. */
+  apiBaseUrl?: string;
+  /** Profile endpoint relative to apiBaseUrl. @default `me` */
+  mePath?: string;
+  /** Logout endpoint relative to apiBaseUrl. @default `auth/logout` */
+  logoutPath?: string;
+}
+interface SessionContextValue {
+  session: SessionState;
+  refresh: () => Promise<void>;
+  logout: () => Promise<void>;
+  roles: string[];
+  username: string | null;
+}
+declare function SessionProvider({
+  apiBaseUrl,
+  mePath,
+  logoutPath,
+  children
+}: SessionProviderConfig & {
+  children: React.ReactNode;
+}): React.JSX.Element;
+declare function useSession(): SessionContextValue;
+//#endregion
+//#region packages/admin/auth/LoginPage.d.ts
+interface LoginPageProps {
+  onLoggedIn: () => void;
+  apiBaseUrl?: string;
+  loginPath?: string;
+  title?: string;
+  hint?: string;
+  defaultUsername?: string;
+}
+declare function LoginPage({
+  onLoggedIn,
+  apiBaseUrl,
+  loginPath,
+  title,
+  hint,
+  defaultUsername
+}: LoginPageProps): import("react").JSX.Element;
+//#endregion
+//#region packages/admin/runtime/useAppRuntime.d.ts
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
+type ToastItem = {
+  id: number;
+  message: string;
+  type: NotificationType;
+};
+declare function useAppRuntime(): {
+  runtime: CoreRuntime;
+  toasts: ToastItem[];
+  dismiss: (id: number) => void;
+};
+//#endregion
+//#region packages/admin/runtime/ToastHost.d.ts
+interface ToastHostProps {
+  toasts: ToastItem[];
+  onDismiss: (id: number) => void;
+}
+declare function ToastHost({
+  toasts,
+  onDismiss
+}: ToastHostProps): import("react").JSX.Element | null;
+//#endregion
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, LoginPage, type LoginPageProps, type NotificationType, type SessionContextValue, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, ToastHost, type ToastHostProps, type ToastItem, useAppRuntime, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { Badge, IconButton, useFloatingPanel } from "@nubitio/ui";
+import { Badge, Button, Card, IconButton, TextField, useFloatingPanel } from "@nubitio/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/admin/AdminHeader.tsx
 function ActionPopover({ action }) {
@@ -359,4 +359,204 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 	});
 };
 //#endregion
-export { AdminHeader, AdminShell, AdminSidebarMenu, useScreenSize, useScreenSizeClass };
+//#region packages/admin/auth/SessionContext.tsx
+const SessionContext = createContext(null);
+function joinApiPath$1(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "auth/logout", children }) {
+	const [session, setSession] = useState({ status: "loading" });
+	const refresh = useCallback(async () => {
+		try {
+			const response = await fetch(joinApiPath$1(apiBaseUrl, mePath), { credentials: "include" });
+			if (!response.ok) {
+				setSession({ status: "anonymous" });
+				return;
+			}
+			setSession({
+				status: "authenticated",
+				profile: await response.json()
+			});
+		} catch {
+			setSession({ status: "anonymous" });
+		}
+	}, [apiBaseUrl, mePath]);
+	useEffect(() => {
+		refresh();
+	}, [refresh]);
+	const logout = useCallback(async () => {
+		await fetch(joinApiPath$1(apiBaseUrl, logoutPath), {
+			method: "POST",
+			credentials: "include"
+		});
+		setSession({ status: "anonymous" });
+	}, [apiBaseUrl, logoutPath]);
+	const value = useMemo(() => ({
+		session,
+		refresh,
+		logout,
+		roles: session.status === "authenticated" ? session.profile.roles : [],
+		username: session.status === "authenticated" ? session.profile.username : null
+	}), [
+		logout,
+		refresh,
+		session
+	]);
+	return /* @__PURE__ */ jsx(SessionContext.Provider, {
+		value,
+		children
+	});
+}
+function useSession() {
+	const context = useContext(SessionContext);
+	if (!context) throw new Error("useSession must be used within a <SessionProvider>.");
+	return context;
+}
+//#endregion
+//#region packages/admin/auth/LoginPage.tsx
+function joinApiPath(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
+	const [username, setUsername] = useState(defaultUsername);
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath(apiBaseUrl, loginPath), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({
+					username,
+					password
+				})
+			});
+			if (!response.ok) {
+				setError((await response.json().catch(() => null))?.message ?? "Login failed");
+				return;
+			}
+			onLoggedIn();
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 320,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					style: { margin: 0 },
+					children: title
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: hint
+				}),
+				/* @__PURE__ */ jsx(TextField, {
+					placeholder: "Email",
+					value: username,
+					autoComplete: "username",
+					onChange: (e) => setUsername(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(TextField, {
+					placeholder: "Password",
+					type: "password",
+					value: password,
+					autoComplete: "current-password",
+					onChange: (e) => setPassword(e.target.value)
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy,
+					children: busy ? "Signing in…" : "Sign in"
+				})
+			]
+		}) })
+	});
+}
+//#endregion
+//#region packages/admin/runtime/useAppRuntime.ts
+function useAppRuntime() {
+	const [toasts, setToasts] = useState([]);
+	const dismiss = useCallback((id) => {
+		setToasts((current) => current.filter((toast) => toast.id !== id));
+	}, []);
+	const notify = useCallback((message, type = "info", durationMs = 4e3) => {
+		const id = Date.now() + Math.floor(Math.random() * 1e3);
+		setToasts((current) => [...current, {
+			id,
+			message,
+			type
+		}]);
+		window.setTimeout(() => dismiss(id), durationMs);
+	}, [dismiss]);
+	const confirm = useCallback((message) => {
+		if (typeof window === "undefined") return false;
+		return window.confirm(message);
+	}, []);
+	return {
+		runtime: useMemo(() => ({
+			notify,
+			confirm
+		}), [confirm, notify]),
+		toasts,
+		dismiss
+	};
+}
+//#endregion
+//#region packages/admin/runtime/ToastHost.tsx
+const TYPE_CLASS = {
+	success: "nb-toast--success",
+	error: "nb-toast--error",
+	warning: "nb-toast--warning",
+	info: "nb-toast--info"
+};
+function ToastHost({ toasts, onDismiss }) {
+	if (toasts.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "nb-toast-host",
+		"aria-live": "polite",
+		children: toasts.map((toast) => /* @__PURE__ */ jsxs("div", {
+			className: `nb-toast ${TYPE_CLASS[toast.type]}`,
+			role: "status",
+			children: [/* @__PURE__ */ jsx("span", { children: toast.message }), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "nb-toast__close",
+				onClick: () => onDismiss(toast.id),
+				children: "×"
+			})]
+		}, toast.id))
+	});
+}
+//#endregion
+export { AdminHeader, AdminShell, AdminSidebarMenu, LoginPage, SessionProvider, ToastHost, useAppRuntime, useScreenSize, useScreenSizeClass, useSession };

package/dist/style.css

@@ -369,3 +369,49 @@
   opacity: 0;
   pointer-events: none;
 }
+.nb-toast-host {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: min(24rem, 100vw - 2rem);
+}
+
+.nb-toast {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md, 0.5rem);
+  border: 1px solid var(--border-subtle);
+  background: var(--surface-2);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
+  font-size: 0.875rem;
+}
+
+.nb-toast--success {
+  border-color: color-mix(in srgb, var(--success-color, #16a34a) 35%, var(--border-subtle));
+}
+
+.nb-toast--error {
+  border-color: color-mix(in srgb, var(--error-color, #dc2626) 35%, var(--border-subtle));
+}
+
+.nb-toast--warning {
+  border-color: color-mix(in srgb, var(--warning-color, #d97706) 35%, var(--border-subtle));
+}
+
+.nb-toast__close {
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 1.125rem;
+  line-height: 1;
+  padding: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/admin",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "type": "module",
   "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/ui": "^0.5.13"
+    "@nubitio/ui": "^0.5.15",
+    "@nubitio/core": "^0.5.15"
   }
 }