@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/domain/components/settings/change-confirmation-modal/change-confirmation-modal.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export type ChangeConfirmationModalProps = {
+    /** Controls whether the dialog is visible */
+    open: boolean;
+    /** Dialog header title */
+    title: string;
+    /** Called when the user clicks the confirm button */
+    onConfirm: VoidFunction;
+    /** Called when the user cancels or dismisses the dialog */
+    onClose: VoidFunction;
+    /** Body content — use to describe the change being confirmed */
+    children: ReactNode;
+    /**
+     * Label for the confirm button
+     * @default "Confirm"
+     */
+    confirmText?: string;
+    /**
+     * When `true`, the confirm button uses the danger variant
+     * @default false
+     */
+    destructive?: boolean;
+};
+/**
+ * Generic confirmation modal that shows a diff or summary of pending changes before applying them.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const ChangeConfirmationModal: ({ open, title, onConfirm, onClose, children, confirmText, destructive, }: ChangeConfirmationModalProps) => import("react").JSX.Element;

package/dist/domain/components/settings/change-confirmation-modal/change-confirmation-modal.example.d.ts

@@ -0,0 +1 @@
+export declare const ChangeConfirmationModalExample: () => import("react").JSX.Element;

package/dist/domain/components/settings/change-confirmation-modal/change-confirmation-modal.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChangeConfirmationModal } from '@tetherto/mdk-react-devkit';
+export const ChangeConfirmationModalExample = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "mdk-example-row", children: [_jsx("button", { onClick: () => setOpen(true), children: "Confirm Change" }), _jsx(ChangeConfirmationModal, { open: open, title: "Apply Configuration Changes?", onConfirm: () => {
+                    console.warn('confirmed');
+                    setOpen(false);
+                }, onClose: () => setOpen(false), confirmText: "Apply", children: "This will update pool assignments for 12 devices." })] }));
+};

package/dist/domain/components/settings/change-confirmation-modal/change-confirmation-modal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogFooter } from '../../../../primitives/index.js';
+/**
+ * Generic confirmation modal that shows a diff or summary of pending changes before applying them.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const ChangeConfirmationModal = ({ open, title, onConfirm, onClose, children, confirmText = 'Confirm', destructive = false, }) => (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && onClose(), children: _jsxs(DialogContent, { title: title, closable: true, onClose: onClose, closeOnClickOutside: false, children: [_jsx("div", { className: "mdk-settings-confirmation-modal__body", children: children }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: destructive ? 'danger' : 'primary', onClick: onConfirm, children: confirmText })] })] }) }));

package/dist/domain/components/settings/change-confirmation-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { ChangeConfirmationModal } from './change-confirmation-modal';
+export type { ChangeConfirmationModalProps } from './change-confirmation-modal';

package/dist/domain/components/settings/change-confirmation-modal/index.js

@@ -0,0 +1 @@
+export { ChangeConfirmationModal } from './change-confirmation-modal';

package/dist/domain/components/settings/feature-flags/feature-flags-settings.d.ts

@@ -0,0 +1,30 @@
+import './feature-flags-settings.scss';
+export type FeatureFlagsSettingsProps = {
+    /** Current flag values keyed by flag name */
+    featureFlags: Record<string, boolean>;
+    /** Whether editing is permitted */
+    isEditingEnabled: boolean;
+    /**
+     * Show loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Show saving spinner on save button
+     * @default false
+     */
+    isSaving?: boolean;
+    /** Called with updated flags when saved */
+    onSave: (flags: Record<string, boolean>) => void;
+    /** Additional CSS class */
+    className?: string;
+};
+/**
+ * Settings panel listing every feature flag with per-flag enable/disable toggle and description.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const FeatureFlagsSettings: ({ featureFlags, isEditingEnabled, isLoading, isSaving, onSave, className, }: FeatureFlagsSettingsProps) => import("react").JSX.Element;

package/dist/domain/components/settings/feature-flags/feature-flags-settings.example.d.ts

@@ -0,0 +1 @@
+export declare const FeatureFlagsSettingsExample: () => import("react").JSX.Element;

package/dist/domain/components/settings/feature-flags/feature-flags-settings.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FeatureFlagsSettings } from '@tetherto/mdk-react-devkit';
+export const FeatureFlagsSettingsExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(FeatureFlagsSettings, { featureFlags: { 'new-dashboard': true, 'beta-charts': false, 'pool-manager': true }, isEditingEnabled: true, onSave: (flags) => console.warn('saved flags', flags) }) }));

package/dist/domain/components/settings/feature-flags/feature-flags-settings.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrashIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import { Button, EmptyState, Input, Switch } from '../../../../primitives/index.js';
+/**
+ * Settings panel listing every feature flag with per-flag enable/disable toggle and description.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const FeatureFlagsSettings = ({ featureFlags, isEditingEnabled, isLoading = false, isSaving = false, onSave, className, }) => {
+    const [localFlags, setLocalFlags] = useState(featureFlags);
+    const [newFlagInput, setNewFlagInput] = useState('');
+    if (!isEditingEnabled) {
+        return _jsx(EmptyState, { description: "Update feature flags not enabled" });
+    }
+    const handleToggle = (flag, checked) => {
+        setLocalFlags((prev) => ({ ...prev, [flag]: checked }));
+    };
+    const handleAddFlag = () => {
+        if (!newFlagInput)
+            return;
+        const newFlags = newFlagInput
+            .split(',')
+            .map((f) => f.trim())
+            .filter(Boolean)
+            .reduce((acc, flag) => ({ ...acc, [flag]: false }), localFlags);
+        setLocalFlags(newFlags);
+        setNewFlagInput('');
+    };
+    const handleDelete = (flag) => {
+        const { [flag]: _, ...rest } = localFlags;
+        setLocalFlags(rest);
+    };
+    const handleSave = () => {
+        onSave(localFlags);
+    };
+    const flagKeys = Object.keys(localFlags);
+    return (_jsxs("div", { className: `mdk-settings-feature-flags ${className || ''}`, children: [_jsxs("div", { className: "mdk-settings-feature-flags__add-row", children: [_jsx(Input, { placeholder: "Add new feature flag, Use comma separated values for multiple flags", value: newFlagInput, onChange: (e) => setNewFlagInput(e.target.value), className: "mdk-settings-feature-flags__input" }), _jsx(Button, { variant: "secondary", disabled: !newFlagInput, onClick: handleAddFlag, children: _jsx("span", { className: "mdk-settings-feature-flags__add-btn-text", children: "Add flag" }) })] }), _jsx("div", { className: "mdk-settings-feature-flags__toggles", children: flagKeys.map((flag) => (_jsxs("div", { className: "mdk-settings-feature-flags__flag-item", children: [_jsx("span", { className: "mdk-settings-feature-flags__flag-name", children: flag }), _jsx(Switch, { color: "primary", checked: Boolean(localFlags[flag]), onCheckedChange: (checked) => handleToggle(flag, checked) }), _jsx("button", { type: "button", className: "mdk-settings-feature-flags__flag-delete", onClick: () => handleDelete(flag), "aria-label": `Delete ${flag}`, children: _jsx(TrashIcon, { width: 18, height: 18 }) })] }, flag))) }), _jsx("div", { className: "mdk-settings-feature-flags__save", children: _jsx(Button, { variant: "primary", disabled: isSaving || isLoading, onClick: handleSave, children: isSaving ? 'Saving...' : 'Save' }) })] }));
+};

package/dist/domain/components/settings/feature-flags/index.d.ts

@@ -0,0 +1,2 @@
+export { FeatureFlagsSettings } from './feature-flags-settings';
+export type { FeatureFlagsSettingsProps } from './feature-flags-settings';

package/dist/domain/components/settings/feature-flags/index.js

@@ -0,0 +1 @@
+export { FeatureFlagsSettings } from './feature-flags-settings';

package/dist/domain/components/settings/header-controls/header-controls-settings.d.ts

@@ -0,0 +1,26 @@
+import type { HeaderPreferences } from '../../../constants/header-controls.constants';
+import './header-controls-settings.scss';
+export type HeaderControlsSettingsProps = {
+    /** Current header preference values */
+    preferences: HeaderPreferences;
+    /**
+     * Show loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Called when a preference toggle changes */
+    onToggle: (key: keyof HeaderPreferences, value: boolean) => void;
+    /** Reset all preferences to defaults */
+    onReset: VoidFunction;
+    /** Additional CSS class */
+    className?: string;
+};
+/**
+ * Settings panel for the global app header — toggle controls, sticky behaviour, and theme defaults.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const HeaderControlsSettings: ({ preferences, isLoading, onToggle, onReset, className, }: HeaderControlsSettingsProps) => import("react").JSX.Element;

package/dist/domain/components/settings/header-controls/header-controls-settings.example.d.ts

@@ -0,0 +1 @@
+export declare const HeaderControlsSettingsExample: () => import("react").JSX.Element;

package/dist/domain/components/settings/header-controls/header-controls-settings.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeaderControlsSettings } from '@tetherto/mdk-react-devkit';
+export const HeaderControlsSettingsExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(HeaderControlsSettings, { preferences: { sticky: true, showTimezone: true }, onToggle: (key, value) => console.warn(key, value), onReset: () => console.warn('reset') }) }));

package/dist/domain/components/settings/header-controls/header-controls-settings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Spinner, Switch } from '../../../../primitives/index.js';
+import { HEADER_ITEMS } from '../../../constants/header-controls.constants';
+/**
+ * Settings panel for the global app header — toggle controls, sticky behaviour, and theme defaults.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const HeaderControlsSettings = ({ preferences, isLoading = false, onToggle, onReset, className, }) => {
+    if (isLoading && !preferences)
+        return _jsx(Spinner, {});
+    return (_jsxs("div", { className: `mdk-settings-header-controls ${className || ''}`, children: [_jsx("p", { className: "mdk-settings-header-controls__description", children: "Customize which metrics appear in your global header. Changes apply instantly." }), _jsxs("div", { className: "mdk-settings-header-controls__table", children: [_jsxs("div", { className: "mdk-settings-header-controls__table-header", children: [_jsx("div", { className: "mdk-settings-header-controls__header-column--wide", children: "Header Item" }), _jsx("div", { className: "mdk-settings-header-controls__header-column", children: "Visibility Toggle" })] }), HEADER_ITEMS.map((item) => (_jsxs("div", { className: "mdk-settings-header-controls__table-row", children: [_jsx("div", { className: "mdk-settings-header-controls__row-column--wide", children: item.label }), _jsx("div", { className: "mdk-settings-header-controls__toggle-column", children: _jsx(Switch, { color: "primary", checked: preferences[item.key], onCheckedChange: (checked) => onToggle(item.key, checked), disabled: isLoading }) })] }, item.key)))] }), _jsx("div", { className: "mdk-settings-header-controls__actions", children: _jsx(Button, { variant: "secondary", onClick: onReset, disabled: isLoading, children: "Reset to Default" }) })] }));
+};

package/dist/domain/components/settings/header-controls/index.d.ts

@@ -0,0 +1,3 @@
+export { HeaderControlsSettings } from './header-controls-settings';
+export type { HeaderControlsSettingsProps } from './header-controls-settings';
+export { useHeaderControls } from './use-header-controls';

package/dist/domain/components/settings/header-controls/index.js

@@ -0,0 +1,2 @@
+export { HeaderControlsSettings } from './header-controls-settings';
+export { useHeaderControls } from './use-header-controls';

package/dist/domain/components/settings/header-controls/use-header-controls.d.ts

@@ -0,0 +1,23 @@
+import type { HeaderPreferences } from '../../../constants/header-controls.constants';
+/**
+ * Read/write hook for the global header-controls store (toggles, sticky flag, theme).
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const useHeaderControls: () => {
+    preferences: {
+        poolMiners: boolean;
+        appMiners: boolean;
+        poolHashrate: boolean;
+        appHashrate: boolean;
+        consumption: boolean;
+        efficiency: boolean;
+    };
+    isLoading: boolean;
+    error: null;
+    handleToggle: (key: keyof HeaderPreferences, value: boolean) => void;
+    handleReset: () => void;
+};

package/dist/domain/components/settings/header-controls/use-header-controls.js

@@ -0,0 +1,34 @@
+import { useLocalStorage } from '@tetherto/mdk-react-adapter';
+import { DEFAULT_HEADER_PREFERENCES, HEADER_PREFERENCES_STORAGE_KEY, } from '../../../constants/header-controls.constants';
+import { useNotification } from '../../../utils/use-notification';
+/**
+ * Read/write hook for the global header-controls store (toggles, sticky flag, theme).
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const useHeaderControls = () => {
+    const { notifySuccess } = useNotification();
+    const [storedPreferences, setPreferences] = useLocalStorage(HEADER_PREFERENCES_STORAGE_KEY, DEFAULT_HEADER_PREFERENCES);
+    /* Stored entries may predate newly added (or renamed) preference keys —
+     * merge over the defaults so missing keys fall back instead of reading
+     * as `undefined` (which would render every affected toggle as off). */
+    const preferences = { ...DEFAULT_HEADER_PREFERENCES, ...storedPreferences };
+    const handleToggle = (key, value) => {
+        setPreferences({ ...preferences, [key]: value });
+        notifySuccess('Header preference updated', '');
+    };
+    const handleReset = () => {
+        setPreferences(DEFAULT_HEADER_PREFERENCES);
+        notifySuccess('Header preferences reset to default', '');
+    };
+    return {
+        preferences,
+        isLoading: false,
+        error: null,
+        handleToggle,
+        handleReset,
+    };
+};

package/dist/domain/components/settings/import-export/import-export-settings.d.ts

@@ -0,0 +1,31 @@
+import type { SettingsExportData } from '@tetherto/mdk-ui-foundation';
+import './import-export-settings.scss';
+export type ImportExportSettingsProps = {
+    /** Trigger configuration export */
+    onExport: VoidFunction;
+    /** Apply imported configuration */
+    onImport: (data: SettingsExportData) => void;
+    /** Custom file-parsing function */
+    onParseFile?: (file: File) => Promise<SettingsExportData>;
+    /**
+     * Show export loading state
+     * @default false
+     */
+    isExporting?: boolean;
+    /**
+     * Show import loading state
+     * @default false
+     */
+    isImporting?: boolean;
+    /** Additional CSS class */
+    className?: string;
+};
+/**
+ * Settings panel for exporting site configuration as JSON and importing a previously saved snapshot.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const ImportExportSettings: ({ onExport, onImport, onParseFile, isExporting, isImporting, className, }: ImportExportSettingsProps) => import("react").JSX.Element;

package/dist/domain/components/settings/import-export/import-export-settings.example.d.ts

@@ -0,0 +1 @@
+export declare const ImportExportSettingsExample: () => import("react").JSX.Element;

package/dist/domain/components/settings/import-export/import-export-settings.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ImportExportSettings } from '@tetherto/mdk-react-devkit';
+export const ImportExportSettingsExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(ImportExportSettings, { onExport: () => console.warn('export'), onImport: (data) => console.warn('import', data) }) }));

package/dist/domain/components/settings/import-export/import-export-settings.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UploadIcon } from '@radix-ui/react-icons';
+import { useRef, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogFooter, ExportIcon } from '../../../../primitives/index.js';
+/**
+ * Settings panel for exporting site configuration as JSON and importing a previously saved snapshot.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const ImportExportSettings = ({ onExport, onImport, onParseFile, isExporting = false, isImporting = false, className, }) => {
+    const [importModalOpen, setImportModalOpen] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [pendingData, setPendingData] = useState(null);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    const fileInputRef = useRef(null);
+    const handleFileSelect = (e) => {
+        const file = e.target.files?.[0];
+        if (file)
+            setSelectedFile(file);
+    };
+    const handleUpload = async () => {
+        if (!selectedFile || !onParseFile)
+            return;
+        setUploading(true);
+        try {
+            const data = await onParseFile(selectedFile);
+            setPendingData(data);
+            setImportModalOpen(false);
+            setConfirmOpen(true);
+        }
+        catch {
+            // Parse error handled by consumer
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleConfirmImport = () => {
+        if (pendingData) {
+            onImport(pendingData);
+        }
+        setConfirmOpen(false);
+        setPendingData(null);
+        setSelectedFile(null);
+    };
+    const handleCancelImport = () => {
+        setConfirmOpen(false);
+        setPendingData(null);
+    };
+    return (_jsxs("div", { className: `mdk-settings-import-export ${className || ''}`, children: [_jsx("p", { className: "mdk-settings-import-export__description", children: "Save or restore all OS-level configuration in JSON format. Export your current settings to back them up, or import a previously saved configuration." }), _jsxs("div", { className: "mdk-settings-import-export__actions", children: [_jsx(Button, { variant: "primary", icon: _jsx(ExportIcon, { width: 18, height: 18 }), onClick: onExport, loading: isExporting, disabled: isImporting, children: "Export JSON" }), _jsx(Button, { variant: "secondary", icon: _jsx(UploadIcon, { width: 18, height: 18 }), onClick: () => setImportModalOpen(true), loading: isImporting, disabled: isExporting, children: "Import JSON" })] }), _jsx("p", { className: "mdk-settings-import-export__warning", children: "Warning: Importing settings will overwrite your current configuration. Make sure to export your current settings before importing." }), _jsx(Dialog, { open: importModalOpen, onOpenChange: (isOpen) => !isOpen && setImportModalOpen(false), children: _jsxs(DialogContent, { title: "Import OS Settings", closable: true, onClose: () => setImportModalOpen(false), children: [_jsxs("div", { className: "mdk-settings-import-export__upload-area", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".json,.csv", onChange: handleFileSelect, className: "mdk-settings-import-export__file-input" }), _jsx("p", { className: "mdk-settings-import-export__upload-text", children: selectedFile ? selectedFile.name : 'Choose a file or drag & drop it here' }), _jsx("p", { className: "mdk-settings-import-export__upload-hint", children: "Accepted formats: .json, .csv" })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => setImportModalOpen(false), children: "Cancel" }), _jsx(Button, { onClick: handleUpload, loading: uploading, disabled: !selectedFile, children: "Upload" })] })] }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: (isOpen) => !isOpen && handleCancelImport(), children: _jsxs(DialogContent, { title: "Confirm Settings Import", closable: true, onClose: handleCancelImport, children: [_jsx("p", { children: "Are you sure you want to import these settings? This will overwrite your current configuration." }), pendingData && (_jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Settings to import:" }) }), _jsxs("ul", { children: [pendingData.headerControls && _jsx("li", { children: "Header Controls" }), pendingData.featureFlags && _jsx("li", { children: "Feature Flags" }), pendingData.timestamp && (_jsxs("li", { children: ["Exported: ", new Date(pendingData.timestamp).toLocaleString()] }))] })] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: handleCancelImport, children: "Cancel" }), _jsx(Button, { variant: "danger", onClick: handleConfirmImport, children: "Import" })] })] }) })] }));
+};

package/dist/domain/components/settings/import-export/index.d.ts

@@ -0,0 +1,2 @@
+export { ImportExportSettings } from './import-export-settings';
+export type { ImportExportSettingsProps } from './import-export-settings';

package/dist/domain/components/settings/import-export/index.js

@@ -0,0 +1 @@
+export { ImportExportSettings } from './import-export-settings';

package/dist/domain/components/settings/index.d.ts

@@ -0,0 +1,8 @@
+export * from './add-user-modal';
+export * from './change-confirmation-modal';
+export * from './feature-flags';
+export * from './header-controls';
+export * from './import-export';
+export * from './manage-user-modal';
+export * from './rbac-control';
+export * from './settings-dashboard';

package/dist/domain/components/settings/index.js

@@ -0,0 +1,8 @@
+export * from './add-user-modal';
+export * from './change-confirmation-modal';
+export * from './feature-flags';
+export * from './header-controls';
+export * from './import-export';
+export * from './manage-user-modal';
+export * from './rbac-control';
+export * from './settings-dashboard';

package/dist/domain/components/settings/manage-user-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { ManageUserModal } from './manage-user-modal';
+export type { ManageUserModalProps } from './manage-user-modal';

package/dist/domain/components/settings/manage-user-modal/index.js

@@ -0,0 +1 @@
+export { ManageUserModal } from './manage-user-modal';

package/dist/domain/components/settings/manage-user-modal/manage-user-modal.d.ts

@@ -0,0 +1,37 @@
+import type { PermLevel, RoleOption, SettingsUser } from '@tetherto/mdk-ui-foundation';
+import './manage-user-modal.scss';
+export type ManageUserModalProps = {
+    /** Controls dialog visibility */
+    open: boolean;
+    /** Called when the dialog closes */
+    onClose: VoidFunction;
+    /** The user being edited */
+    user: SettingsUser;
+    /** Available role options */
+    roles: RoleOption[];
+    /** Permission levels per role */
+    rolePermissions: Record<string, Record<string, PermLevel>>;
+    /** Display labels for permission keys */
+    permissionLabels: Record<string, string>;
+    /** Save handler */
+    onSubmit: (data: {
+        id: string;
+        name: string;
+        email: string;
+        role: string;
+    }) => Promise<void>;
+    /**
+     * Show loading on submit button
+     * @default false
+     */
+    isSubmitting?: boolean;
+};
+/**
+ * Modal for editing an existing user's role, status, or team membership.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const ManageUserModal: ({ open, onClose, user, roles, rolePermissions, permissionLabels, onSubmit, isSubmitting, }: ManageUserModalProps) => import("react").JSX.Element;

package/dist/domain/components/settings/manage-user-modal/manage-user-modal.example.d.ts

@@ -0,0 +1 @@
+export declare const ManageUserModalExample: () => import("react").JSX.Element;

package/dist/domain/components/settings/manage-user-modal/manage-user-modal.example.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ManageUserModal } from '@tetherto/mdk-react-devkit';
+const mockRoles = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'operator', label: 'Operator' },
+];
+const mockUser = { id: '1', name: 'Alice', email: 'alice@example.com', role: 'admin' };
+export const ManageUserModalExample = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "mdk-example-row", children: [_jsx("button", { onClick: () => setOpen(true), children: "Manage User" }), _jsx(ManageUserModal, { open: open, onClose: () => setOpen(false), user: mockUser, roles: mockRoles, rolePermissions: {
+                    admin: { read: 'full' },
+                    operator: { read: 'limited' },
+                }, permissionLabels: { read: 'Read Access' }, onSubmit: async () => setOpen(false) })] }));
+};

package/dist/domain/components/settings/manage-user-modal/manage-user-modal.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button, Dialog, DialogContent, DialogFooter, Form, FormInput, FormSelect, } from '../../../../primitives/index.js';
+import { PERM_LEVEL_LABELS } from '../../../constants/settings.constants';
+import { WEBAPP_SHORT_NAME } from '../../../constants';
+const manageUserSchema = z.object({
+    name: z.string().min(1, 'Name is required').trim(),
+    email: z.string().email('This should be a valid email').min(1, 'Email is required').trim(),
+    role: z.string().min(1, 'Role is required'),
+});
+const PermissionIcon = ({ level }) => {
+    if (level === 'rw') {
+        return (_jsx("span", { className: "mdk-settings-manage-user__perm-icon mdk-settings-manage-user__perm-icon--rw", children: PERM_LEVEL_LABELS.rw }));
+    }
+    if (level === 'r') {
+        return (_jsx("span", { className: "mdk-settings-manage-user__perm-icon mdk-settings-manage-user__perm-icon--r", children: PERM_LEVEL_LABELS.r }));
+    }
+    return (_jsx("span", { className: "mdk-settings-manage-user__perm-icon mdk-settings-manage-user__perm-icon--none", children: PERM_LEVEL_LABELS.none }));
+};
+/**
+ * Modal for editing an existing user's role, status, or team membership.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const ManageUserModal = ({ open, onClose, user, roles, rolePermissions, permissionLabels, onSubmit, isSubmitting = false, }) => {
+    const [selectedRole, setSelectedRole] = useState(user.role);
+    const form = useForm({
+        resolver: zodResolver(manageUserSchema),
+        defaultValues: {
+            name: user.name || '',
+            email: user.email,
+            role: user.role,
+        },
+        mode: 'onSubmit',
+    });
+    useEffect(() => {
+        form.reset({
+            name: user.name || '',
+            email: user.email,
+            role: user.role,
+        });
+        setSelectedRole(user.role);
+    }, [user, form]);
+    const watchedRole = form.watch('role');
+    useEffect(() => {
+        setSelectedRole(watchedRole);
+    }, [watchedRole]);
+    const rolePerms = rolePermissions[selectedRole] || {};
+    const permissionKeys = Object.keys(permissionLabels);
+    const handleSubmit = async (values) => {
+        await onSubmit({
+            id: user.id,
+            name: values.name.trim(),
+            email: values.email.trim(),
+            role: values.role,
+        });
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && onClose(), children: _jsx(DialogContent, { title: "Manage User", closable: true, onClose: onClose, closeOnClickOutside: true, className: "mdk-settings-manage-user__dialog", children: _jsxs(Form, { form: form, className: "mdk-settings-manage-user__form", onSubmit: form.handleSubmit(handleSubmit), children: [_jsxs("div", { className: "mdk-settings-manage-user__section", children: [_jsx("h4", { className: "mdk-settings-manage-user__section-title", children: "User Information" }), _jsx("p", { className: "mdk-settings-manage-user__section-desc", children: "Edit the user's basic details." }), _jsx(FormInput, { control: form.control, name: "name", label: "Name", placeholder: "Enter full name" }), _jsx(FormInput, { control: form.control, name: "email", label: "Email", type: "email", placeholder: "Enter email address" }), _jsx("p", { className: "mdk-settings-manage-user__helper", children: "Changes to name or email are saved along with the selected role." })] }), _jsxs("div", { className: "mdk-settings-manage-user__section", children: [_jsx("h4", { className: "mdk-settings-manage-user__section-title", children: "Assigned Role" }), _jsxs("p", { className: "mdk-settings-manage-user__section-desc", children: ["Select the user's access level within ", WEBAPP_SHORT_NAME, "."] }), _jsx(FormSelect, { control: form.control, name: "role", label: "Role", placeholder: "Select role", options: roles.map((r) => ({ value: r.value, label: r.label })), description: "The permissions summary below updates automatically when changing this selection." })] }), _jsxs("div", { className: "mdk-settings-manage-user__section", children: [_jsx("h4", { className: "mdk-settings-manage-user__section-title", children: "Effective Permissions" }), _jsxs("p", { className: "mdk-settings-manage-user__section-desc", children: ["The actions available to this user as a", ' ', roles.find((r) => r.value === selectedRole)?.label || selectedRole, "."] }), _jsxs("div", { className: "mdk-settings-manage-user__perms-table", children: [_jsxs("div", { className: "mdk-settings-manage-user__perms-header", children: [_jsx("div", { className: "mdk-settings-manage-user__perms-cell--flex", children: "Permission" }), _jsx("div", { className: "mdk-settings-manage-user__perms-cell--fixed", children: "Access Level" })] }), permissionKeys.map((key) => (_jsxs("div", { className: "mdk-settings-manage-user__perms-row", children: [_jsx("div", { className: "mdk-settings-manage-user__perms-cell--flex", children: permissionLabels[key] }), _jsx("div", { className: "mdk-settings-manage-user__perms-cell--fixed", children: _jsx(PermissionIcon, { level: rolePerms[key] ?? false }) })] }, key)))] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, type: "button", children: "Cancel" }), _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? 'Saving...' : 'Save Changes' })] })] }) }) }));
+};

package/dist/domain/components/settings/rbac-control/index.d.ts

@@ -0,0 +1,2 @@
+export { RBACControlSettings } from './rbac-control-settings';
+export type { RBACControlSettingsProps } from './rbac-control-settings';

package/dist/domain/components/settings/rbac-control/index.js

@@ -0,0 +1 @@
+export { RBACControlSettings } from './rbac-control-settings';

package/dist/domain/components/settings/rbac-control/rbac-control-settings.d.ts

@@ -0,0 +1,45 @@
+import type { PermLevel, RoleOption, SettingsUser } from '@tetherto/mdk-ui-foundation';
+import './rbac-control-settings.scss';
+export type RBACControlSettingsProps = {
+    /** List of current users */
+    users: SettingsUser[];
+    /** Available role options */
+    roles: RoleOption[];
+    /** Permission levels per role */
+    rolePermissions: Record<string, Record<string, PermLevel>>;
+    /** Display labels for permission keys */
+    permissionLabels: Record<string, string>;
+    /** Whether the current user may edit access settings */
+    canWrite: boolean;
+    /**
+     * Show loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Create a new user */
+    onCreateUser: (data: {
+        name: string;
+        email: string;
+        role: string;
+    }) => Promise<void>;
+    /** Update an existing user's role */
+    onUpdateUser: (data: {
+        id: string;
+        name: string;
+        email: string;
+        role: string;
+    }) => Promise<void>;
+    /** Delete a user */
+    onDeleteUser: (userId: string) => Promise<void>;
+    /** Additional CSS class */
+    className?: string;
+};
+/**
+ * Settings panel listing roles and their permissions; supports editing role-permission grants.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const RBACControlSettings: ({ users, roles, rolePermissions, permissionLabels, canWrite, isLoading, onCreateUser, onUpdateUser, onDeleteUser, className, }: RBACControlSettingsProps) => import("react").JSX.Element;

package/dist/domain/components/settings/rbac-control/rbac-control-settings.example.d.ts

@@ -0,0 +1 @@
+export declare const RBACControlSettingsExample: () => import("react").JSX.Element;

package/dist/domain/components/settings/rbac-control/rbac-control-settings.example.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RBACControlSettings } from '@tetherto/mdk-react-devkit';
+const mockRoles = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'operator', label: 'Operator' },
+    { value: 'viewer', label: 'Viewer' },
+];
+const mockUsers = [
+    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'admin' },
+    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'operator' },
+];
+const mockPermissions = {
+    admin: { read: 'full', write: 'full' },
+    operator: { read: 'full', write: 'limited' },
+    viewer: { read: 'full', write: 'none' },
+};
+export const RBACControlSettingsExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(RBACControlSettings, { users: mockUsers, roles: mockRoles, rolePermissions: mockPermissions, permissionLabels: { read: 'Read', write: 'Write' }, canWrite: true, onCreateUser: async () => { }, onUpdateUser: async () => { }, onDeleteUser: async () => { } }) }));