@apvee/spfx-react-toolkit 1.3.0 → 2.0.0

package/lib/webparts/spFxReactToolkitTest/components/SpFxReactToolkitTest.js

@@ -1,61 +1,15 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import * as React from 'react';
 import styles from './SpFxReactToolkitTest.module.scss';
 import { Stack, Pivot, PivotItem, TextField, PrimaryButton, DefaultButton, MessageBar, MessageBarType, Separator, Label, Icon, } from '@fluentui/react';
 import { InfoRow, StatusBadge } from './shared';
 import { HttpClientDemo, PnPContextDemo, PnPOperationsDemo, PnPListDemo, PnPSearchBasicDemo, PnPSearchAdvancedDemo, PnPSearchRefinersDemo, PnPSearchSuggestionsDemo, } from './demos';
 // Import hooks from SPFx React Toolkit (used in main component)
-import { useSPFxProperties, useSPFxThemeInfo, useSPFxUserInfo, useSPFxEnvironmentInfo, useSPFxSiteInfo, useSPFxDisplayMode, useSPFxInstanceInfo, useSPFxPageContext, useSPFxTeams, useSPFxListInfo, useSPFxLocaleInfo, useSPFxHubSiteInfo, useSPFxCorrelationInfo, useSPFxPermissions, useSPFxCrossSitePermissions, useSPFxContainerSize, useSPFxContainerInfo, useSPFxSessionStorage, useSPFxLocalStorage, useSPFxLogger, useSPFxPageType, useSPFxServiceScope, useSPFxSPHttpClient, useSPFxMSGraphClient, useSPFxAadHttpClient, useSPFxPerformance, useSPFxFluent9ThemeInfo, useSPFxOneDriveAppData, useSPFxTenantProperty, useSPFxUserPhoto, } from '../../../hooks';
+import { useSPFxProperties, useSPFxThemeInfo, useSPFxUserInfo, useSPFxEnvironmentInfo, useSPFxSiteInfo, useSPFxDisplayMode, useSPFxInstanceInfo, useSPFxPageContext, useSPFxTeams, useSPFxListInfo, useSPFxLocaleInfo, useSPFxHubSiteInfo, useSPFxCorrelationInfo, useSPFxPermissions, useSPFxCrossSitePermissions, useSPFxContainerSize, useSPFxContainerInfo, useSPFxSessionStorage, useSPFxLocalStorage, useSPFxLogger, useSPFxPageType, useSPFxServiceScope, useSPFxSPHttpClient, useSPFxMSGraphClient, useSPFxAadHttpClient, useSPFxPerformance, useSPFxFluent9ThemeInfo, useSPFxOneDriveAppData, useSPFxTenantProperty, useSPFxTenantKeyValueStore, useSPFxUserPhoto, } from '../../../hooks';
 import { SPPermission } from '@microsoft/sp-page-context';
 // Helper function to safely stringify objects with circular references
-var safeStringify = function (obj, indent) {
-    if (indent === void 0) { indent = 2; }
-    var seen = new WeakSet();
-    return JSON.stringify(obj, function (key, value) {
+const safeStringify = (obj, indent = 2) => {
+    const seen = new WeakSet();
+    return JSON.stringify(obj, (key, value) => {
         // Skip private properties and service scopes to avoid circular references
         if (typeof key === 'string' && (key.indexOf('_') === 0 || key === 'serviceScope' || key === 'service')) {
             return '[Circular/Private]';
@@ -69,298 +23,254 @@ var safeStringify = function (obj, indent) {
         return value;
     }, indent);
 };
-var SpFxReactToolkitTest = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+const SpFxReactToolkitTest = () => {
     // Core Properties & Display
-    var _q = useSPFxProperties(), properties = _q.properties, setProperties = _q.setProperties;
-    var isEdit = useSPFxDisplayMode().isEdit;
-    var _r = useSPFxInstanceInfo(), id = _r.id, kind = _r.kind;
+    const { properties, setProperties } = useSPFxProperties();
+    const { isEdit } = useSPFxDisplayMode();
+    const { id, kind } = useSPFxInstanceInfo();
     // Theme & Environment
-    var theme = useSPFxThemeInfo();
-    var fluent9ThemeInfo = useSPFxFluent9ThemeInfo();
-    var envType = useSPFxEnvironmentInfo().type;
-    var isDarkTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.isInverted) !== null && _a !== void 0 ? _a : false;
+    const theme = useSPFxThemeInfo();
+    const fluent9ThemeInfo = useSPFxFluent9ThemeInfo();
+    const { type: envType } = useSPFxEnvironmentInfo();
+    const isDarkTheme = theme?.isInverted ?? false;
     // User & Site Info
-    var displayName = useSPFxUserInfo().displayName;
-    var _s = useSPFxSiteInfo(), siteTitle = _s.title, webUrl = _s.webUrl, siteClassification = _s.siteClassification;
-    var localeInfo = useSPFxLocaleInfo();
+    const { displayName } = useSPFxUserInfo();
+    const { title: siteTitle, webUrl, siteClassification } = useSPFxSiteInfo();
+    const localeInfo = useSPFxLocaleInfo();
     // Teams Context
-    var _t = useSPFxTeams(), hasTeamsContext = _t.supported, teamsTheme = _t.theme;
+    const { supported: hasTeamsContext, theme: teamsTheme } = useSPFxTeams();
     // Page Context
-    var pageContext = useSPFxPageContext();
-    var pageTypeInfo = useSPFxPageType();
+    const pageContext = useSPFxPageContext();
+    const pageTypeInfo = useSPFxPageType();
     // List & Hub Info (can be undefined)
-    var listInfo = useSPFxListInfo();
-    var hubInfo = useSPFxHubSiteInfo();
+    const listInfo = useSPFxListInfo();
+    const hubInfo = useSPFxHubSiteInfo();
     // Container & Performance
-    var containerSize = useSPFxContainerSize();
-    var containerInfo = useSPFxContainerInfo();
-    var performance = useSPFxPerformance();
+    const containerSize = useSPFxContainerSize();
+    const containerInfo = useSPFxContainerInfo();
+    const performance = useSPFxPerformance();
     // Permissions
-    var hasWebPermission = useSPFxPermissions().hasWebPermission;
-    var canManageWeb = hasWebPermission(SPPermission.manageWeb);
-    var canManageLists = hasWebPermission(SPPermission.manageLists);
+    const { hasWebPermission } = useSPFxPermissions();
+    const canManageWeb = hasWebPermission(SPPermission.manageWeb);
+    const canManageLists = hasWebPermission(SPPermission.manageLists);
     // Storage
-    var sessionStorage = useSPFxSessionStorage('demo-session-key', '');
-    var localStorage = useSPFxLocalStorage('demo-local-key', '');
+    const sessionStorage = useSPFxSessionStorage('demo-session-key', '');
+    const localStorage = useSPFxLocalStorage('demo-local-key', '');
     // Advanced
-    var correlationInfo = useSPFxCorrelationInfo();
-    var logger = useSPFxLogger();
-    var serviceScope = useSPFxServiceScope();
+    const correlationInfo = useSPFxCorrelationInfo();
+    const logger = useSPFxLogger();
+    const serviceScope = useSPFxServiceScope();
     // HTTP Clients
-    var spHttpClient = useSPFxSPHttpClient();
-    var msGraphClient = useSPFxMSGraphClient();
-    var aadHttpClient = useSPFxAadHttpClient();
+    const spHttpClient = useSPFxSPHttpClient();
+    const msGraphClient = useSPFxMSGraphClient();
+    const aadHttpClient = useSPFxAadHttpClient();
     // OneDrive AppData hook (using hook name as folder for demo)
-    var oneDriveData = useSPFxOneDriveAppData('test-data.json', { autoFetch: false, createIfMissing: true, defaultValue: { message: '', counter: 0, timestamp: 0 }, folder: 'useSPFxOneDriveAppData' });
+    const oneDriveData = useSPFxOneDriveAppData('test-data.json', { autoFetch: false, createIfMissing: true, defaultValue: { message: '', counter: 0, timestamp: 0 }, folder: 'useSPFxOneDriveAppData' });
     // Tenant Property hook (tenant-wide configuration)
-    var tenantVersion = useSPFxTenantProperty('spfx-toolkit-test-version', false);
-    var tenantCounter = useSPFxTenantProperty('spfx-toolkit-test-counter', false);
+    const tenantVersion = useSPFxTenantProperty('spfx-toolkit-test-version', false);
+    const tenantCounter = useSPFxTenantProperty('spfx-toolkit-test-counter', false);
+    // Tenant Key-Value Store hook (REST-based CRUD)
+    const tenantKVStore = useSPFxTenantKeyValueStore();
     // User Photo hook (current user profile photo)
-    var userPhoto = useSPFxUserPhoto();
+    const userPhoto = useSPFxUserPhoto();
     // Local state for interactive demos
-    var _u = React.useState((_b = properties === null || properties === void 0 ? void 0 : properties.description) !== null && _b !== void 0 ? _b : ''), descriptionInput = _u[0], setDescriptionInput = _u[1];
-    var _v = React.useState(''), sessionStorageInput = _v[0], setSessionStorageInput = _v[1];
-    var _w = React.useState(''), localStorageInput = _w[0], setLocalStorageInput = _w[1];
-    var _x = React.useState(''), oneDriveMessage = _x[0], setOneDriveMessage = _x[1];
-    var _y = React.useState(''), tenantVersionInput = _y[0], setTenantVersionInput = _y[1];
-    var _z = React.useState(false), showMessage = _z[0], setShowMessage = _z[1];
-    var _0 = React.useState(''), messageText = _0[0], setMessageText = _0[1];
-    var _1 = React.useState(''), performanceResult = _1[0], setPerformanceResult = _1[1];
-    var _2 = React.useState([]), logMessages = _2[0], setLogMessages = _2[1];
-    var _3 = React.useState(undefined), crossSiteUrl = _3[0], setCrossSiteUrl = _3[1];
+    const [descriptionInput, setDescriptionInput] = React.useState(properties?.description ?? '');
+    const [sessionStorageInput, setSessionStorageInput] = React.useState('');
+    const [localStorageInput, setLocalStorageInput] = React.useState('');
+    const [oneDriveMessage, setOneDriveMessage] = React.useState('');
+    const [tenantVersionInput, setTenantVersionInput] = React.useState('');
+    const [showMessage, setShowMessage] = React.useState(false);
+    const [messageText, setMessageText] = React.useState('');
+    const [performanceResult, setPerformanceResult] = React.useState('');
+    const [logMessages, setLogMessages] = React.useState([]);
+    const [crossSiteUrl, setCrossSiteUrl] = React.useState(undefined);
+    // Tenant Key-Value Store demo state
+    const [kvStoreKey, setKvStoreKey] = React.useState('');
+    const [kvStoreValue, setKvStoreValue] = React.useState('');
+    const [kvStoreDescription, setKvStoreDescription] = React.useState('');
+    const [kvStoreItems, setKvStoreItems] = React.useState([]);
+    const [kvStoreResult, setKvStoreResult] = React.useState('');
     // Cross-site permissions (fetch only when URL is set)
-    var crossSitePermissions = useSPFxCrossSitePermissions(crossSiteUrl);
+    const crossSitePermissions = useSPFxCrossSitePermissions(crossSiteUrl);
     // Sync descriptionInput when properties change
-    React.useEffect(function () {
-        var _a;
-        setDescriptionInput((_a = properties === null || properties === void 0 ? void 0 : properties.description) !== null && _a !== void 0 ? _a : '');
-    }, [properties === null || properties === void 0 ? void 0 : properties.description]);
+    React.useEffect(() => {
+        setDescriptionInput(properties?.description ?? '');
+    }, [properties?.description]);
     // Handlers
-    var handleUpdateProperties = React.useCallback(function () {
+    const handleUpdateProperties = React.useCallback(() => {
         setProperties({ description: descriptionInput });
         setMessageText('Properties updated successfully!');
         setShowMessage(true);
-        setTimeout(function () { return setShowMessage(false); }, 3000);
+        setTimeout(() => setShowMessage(false), 3000);
     }, [descriptionInput, setProperties]);
-    var handleSaveSessionStorage = React.useCallback(function () {
+    const handleSaveSessionStorage = React.useCallback(() => {
         sessionStorage.setValue(sessionStorageInput);
         setSessionStorageInput('');
         setMessageText('Value saved to session storage!');
         setShowMessage(true);
-        setTimeout(function () { return setShowMessage(false); }, 3000);
+        setTimeout(() => setShowMessage(false), 3000);
     }, [sessionStorageInput, sessionStorage]);
-    var handleSaveLocalStorage = React.useCallback(function () {
+    const handleSaveLocalStorage = React.useCallback(() => {
         localStorage.setValue(localStorageInput);
         setLocalStorageInput('');
         setMessageText('Value saved to local storage!');
         setShowMessage(true);
-        setTimeout(function () { return setShowMessage(false); }, 3000);
+        setTimeout(() => setShowMessage(false), 3000);
     }, [localStorageInput, localStorage]);
-    var handlePerformanceTest = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, performance.time('demo-test', function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0: 
-                                // Simulate async operation
-                                return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 500); })];
-                                case 1:
-                                    // Simulate async operation
-                                    _a.sent();
-                                    return [2 /*return*/, 'Test completed'];
-                            }
-                        });
-                    }); })];
-                case 1:
-                    result = _a.sent();
-                    setPerformanceResult("".concat(result.result, " in ").concat(result.durationMs.toFixed(2), "ms"));
-                    return [2 /*return*/];
-            }
+    const handlePerformanceTest = React.useCallback(async () => {
+        const result = await performance.time('demo-test', async () => {
+            // Simulate async operation
+            await new Promise(resolve => setTimeout(resolve, 500));
+            return 'Test completed';
         });
-    }); }, [performance]);
-    var handleLog = React.useCallback(function (level, message) {
+        setPerformanceResult(`${result.result} in ${result.durationMs.toFixed(2)}ms`);
+    }, [performance]);
+    const handleLog = React.useCallback((level, message) => {
         if (level === 'info')
             logger.info(message);
         else if (level === 'warning')
             logger.warn(message);
         else
             logger.error(message);
-        setLogMessages(function (prev) { return __spreadArray(__spreadArray([], prev.slice(-4), true), [{ level: level, message: message }], false); });
+        setLogMessages(prev => [...prev.slice(-4), { level, message }]);
     }, [logger]);
-    var handleLoadOneDrive = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, oneDriveData.load()];
-                case 1:
-                    _a.sent();
-                    setMessageText('OneDrive load completed. Check status below (missing file sets isNotFound=true).');
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [oneDriveData]);
-    var handleSaveOneDrive = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var newData, error_1;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 2, , 3]);
-                    newData = {
-                        message: oneDriveMessage,
-                        counter: ((_b = (_a = oneDriveData.data) === null || _a === void 0 ? void 0 : _a.counter) !== null && _b !== void 0 ? _b : 0) + 1,
-                        timestamp: Date.now(),
-                    };
-                    return [4 /*yield*/, oneDriveData.write(newData)];
-                case 1:
-                    _c.sent();
-                    setOneDriveMessage('');
-                    setMessageText('Data saved to OneDrive successfully!');
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [3 /*break*/, 3];
-                case 2:
-                    error_1 = _c.sent();
-                    setMessageText("Save failed: ".concat(error_1 instanceof Error ? error_1.message : 'Unknown error'));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 5000);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [oneDriveMessage, oneDriveData]);
-    var handleLoadTenantProperty = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, Promise.all([
-                            tenantVersion.load(),
-                            tenantCounter.load()
-                        ])];
-                case 1:
-                    _a.sent();
-                    setMessageText('Tenant properties loaded successfully!');
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [3 /*break*/, 3];
-                case 2:
-                    error_2 = _a.sent();
-                    setMessageText("Load failed: ".concat(error_2 instanceof Error ? error_2.message : 'Unknown error'));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 5000);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [tenantVersion, tenantCounter]);
-    var handleSaveTenantVersion = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_3;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!tenantVersion.canWrite) {
-                        setMessageText('Insufficient permissions to write tenant properties');
-                        setShowMessage(true);
-                        setTimeout(function () { return setShowMessage(false); }, 5000);
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, tenantVersion.write(tenantVersionInput, 'Test version property from SPFx React Toolkit')];
-                case 2:
-                    _a.sent();
-                    setTenantVersionInput('');
-                    setMessageText('Version saved to tenant properties!');
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_3 = _a.sent();
-                    setMessageText("Save failed: ".concat(error_3 instanceof Error ? error_3.message : 'Unknown error'));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 5000);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [tenantVersionInput, tenantVersion]);
-    var handleIncrementTenantCounter = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var newValue, error_4;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (!tenantCounter.canWrite) {
-                        setMessageText('Insufficient permissions to write tenant properties');
-                        setShowMessage(true);
-                        setTimeout(function () { return setShowMessage(false); }, 5000);
-                        return [2 /*return*/];
-                    }
-                    _b.label = 1;
-                case 1:
-                    _b.trys.push([1, 3, , 4]);
-                    newValue = ((_a = tenantCounter.data) !== null && _a !== void 0 ? _a : 0) + 1;
-                    return [4 /*yield*/, tenantCounter.write(newValue, 'Test counter property from SPFx React Toolkit')];
-                case 2:
-                    _b.sent();
-                    setMessageText("Counter incremented to ".concat(newValue, "!"));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_4 = _b.sent();
-                    setMessageText("Increment failed: ".concat(error_4 instanceof Error ? error_4.message : 'Unknown error'));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 5000);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+    const handleLoadOneDrive = React.useCallback(async () => {
+        await oneDriveData.load();
+        setMessageText('OneDrive load completed. Check status below (missing file sets isNotFound=true).');
+        setShowMessage(true);
+        setTimeout(() => setShowMessage(false), 3000);
+    }, [oneDriveData]);
+    const handleSaveOneDrive = React.useCallback(async () => {
+        try {
+            const newData = {
+                message: oneDriveMessage,
+                counter: (oneDriveData.data?.counter ?? 0) + 1,
+                timestamp: Date.now(),
+            };
+            await oneDriveData.write(newData);
+            setOneDriveMessage('');
+            setMessageText('Data saved to OneDrive successfully!');
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+        }
+        catch (error) {
+            setMessageText(`Save failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 5000);
+        }
+    }, [oneDriveMessage, oneDriveData]);
+    const handleLoadTenantProperty = React.useCallback(async () => {
+        try {
+            await Promise.all([
+                tenantVersion.load(),
+                tenantCounter.load()
+            ]);
+            setMessageText('Tenant properties loaded successfully!');
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+        }
+        catch (error) {
+            setMessageText(`Load failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 5000);
+        }
+    }, [tenantVersion, tenantCounter]);
+    const handleSaveTenantVersion = React.useCallback(async () => {
+        setMessageText('Write operations are no longer supported via REST API. Use PowerShell instead.');
+        setShowMessage(true);
+        setTimeout(() => setShowMessage(false), 5000);
+    }, []);
+    const handleIncrementTenantCounter = React.useCallback(async () => {
+        setMessageText('Write operations are no longer supported via REST API. Use PowerShell instead.');
+        setShowMessage(true);
+        setTimeout(() => setShowMessage(false), 5000);
+    }, []);
+    const handleRemoveTenantProperty = React.useCallback(async (_propertyName) => {
+        setMessageText('Remove operations are no longer supported via REST API. Use PowerShell instead.');
+        setShowMessage(true);
+        setTimeout(() => setShowMessage(false), 5000);
+    }, []);
+    // Tenant Key-Value Store handlers
+    const handleKVStoreList = React.useCallback(async () => {
+        try {
+            const items = await tenantKVStore.list();
+            setKvStoreItems(items);
+            setMessageText(`Listed ${items.length} item(s) from tenant key-value store.`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+        }
+        catch (error) {
+            setMessageText(`List failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 5000);
+        }
+    }, [tenantKVStore]);
+    const handleKVStoreGet = React.useCallback(async () => {
+        if (!kvStoreKey) {
+            setMessageText('Please enter a key to look up.');
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+            return;
+        }
+        try {
+            const item = await tenantKVStore.get(kvStoreKey);
+            if (item) {
+                setKvStoreResult(`Key: ${item.key}, Value: ${typeof item.value === 'object' ? JSON.stringify(item.value) : String(item.value)}${item.description ? `, Description: ${item.description}` : ''}`);
             }
-        });
-    }); }, [tenantCounter]);
-    var handleRemoveTenantProperty = React.useCallback(function (propertyName) { return __awaiter(void 0, void 0, void 0, function () {
-        var hook, error_5;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    hook = propertyName === 'version' ? tenantVersion : tenantCounter;
-                    if (!hook.canWrite) {
-                        setMessageText('Insufficient permissions to remove tenant properties');
-                        setShowMessage(true);
-                        setTimeout(function () { return setShowMessage(false); }, 5000);
-                        return [2 /*return*/];
-                    }
-                    if (!confirm("Are you sure you want to remove the ".concat(propertyName, " property?"))) {
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, hook.remove()];
-                case 2:
-                    _a.sent();
-                    setMessageText("".concat(propertyName, " property removed!"));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_5 = _a.sent();
-                    setMessageText("Remove failed: ".concat(error_5 instanceof Error ? error_5.message : 'Unknown error'));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 5000);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+            else {
+                setKvStoreResult('(not found)');
             }
-        });
-    }); }, [tenantVersion, tenantCounter]);
-    return (React.createElement("section", { className: "".concat(styles.spFxReactToolkitTest, " ").concat(hasTeamsContext ? styles.teams : '') },
-        showMessage && (React.createElement(MessageBar, { messageBarType: MessageBarType.success, onDismiss: function () { return setShowMessage(false); } }, messageText)),
+            setMessageText(item ? `Found key "${kvStoreKey}".` : `Key "${kvStoreKey}" not found.`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+        }
+        catch (error) {
+            setMessageText(`Get failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 5000);
+        }
+    }, [tenantKVStore, kvStoreKey]);
+    const handleKVStoreSave = React.useCallback(async () => {
+        if (!kvStoreKey || !kvStoreValue) {
+            setMessageText('Please enter both a key and a value.');
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+            return;
+        }
+        try {
+            await tenantKVStore.save(kvStoreKey, kvStoreValue, kvStoreDescription || undefined);
+            setMessageText(`Saved key "${kvStoreKey}" successfully.`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+        }
+        catch (error) {
+            setMessageText(`Save failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 5000);
+        }
+    }, [tenantKVStore, kvStoreKey, kvStoreValue, kvStoreDescription]);
+    const handleKVStoreRemove = React.useCallback(async () => {
+        if (!kvStoreKey) {
+            setMessageText('Please enter a key to remove.');
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+            return;
+        }
+        try {
+            await tenantKVStore.remove(kvStoreKey);
+            setKvStoreResult('');
+            setMessageText(`Removed key "${kvStoreKey}" successfully.`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 3000);
+        }
+        catch (error) {
+            setMessageText(`Remove failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            setShowMessage(true);
+            setTimeout(() => setShowMessage(false), 5000);
+        }
+    }, [tenantKVStore, kvStoreKey]);
+    return (React.createElement("section", { className: `${styles.spFxReactToolkitTest} ${hasTeamsContext ? styles.teams : ''}` },
+        showMessage && (React.createElement(MessageBar, { messageBarType: MessageBarType.success, onDismiss: () => setShowMessage(false) }, messageText)),
         React.createElement(Pivot, { "aria-label": "SPFx React Toolkit Demo Tabs", style: { marginTop: '20px' } },
             React.createElement(PivotItem, { headerText: "Overview", itemIcon: "Home" },
                 React.createElement(Stack, { tokens: { childrenGap: 4 }, styles: { root: { marginTop: '16px' } } },
@@ -379,7 +289,7 @@ var SpFxReactToolkitTest = function () {
                             React.createElement(Icon, { iconName: "Settings", style: { marginRight: '8px' } }),
                             "Properties Editor",
                             React.createElement(Separator, null)),
-                        React.createElement(TextField, { label: "Description Property", value: descriptionInput, onChange: function (_, newValue) { return setDescriptionInput(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Enter description..." }),
+                        React.createElement(TextField, { label: "Description Property", value: descriptionInput, onChange: (_, newValue) => setDescriptionInput(newValue ?? ''), placeholder: "Enter description..." }),
                         React.createElement(PrimaryButton, { text: "Update Properties", onClick: handleUpdateProperties, iconProps: { iconName: 'Save' } }),
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
@@ -389,8 +299,8 @@ var SpFxReactToolkitTest = function () {
                             React.createElement(Icon, { iconName: "Resize", style: { marginRight: '8px' } }),
                             "Container Information",
                             React.createElement(Separator, null)),
-                        React.createElement(InfoRow, { label: "Width", value: "".concat(containerSize.width, "px"), icon: "ArrowRight" }),
-                        React.createElement(InfoRow, { label: "Height", value: "".concat(containerSize.height, "px"), icon: "ArrowUp" }),
+                        React.createElement(InfoRow, { label: "Width", value: `${containerSize.width}px`, icon: "ArrowRight" }),
+                        React.createElement(InfoRow, { label: "Height", value: `${containerSize.height}px`, icon: "ArrowUp" }),
                         React.createElement(InfoRow, { label: "DOM Element", value: containerInfo.element ? 'Available' : 'N/A', icon: "DOM" }),
                         React.createElement(InfoRow, { label: "Size Tracking", value: containerInfo.size ? 'Active' : 'Inactive', icon: "RadioBullet" }))))),
             React.createElement(PivotItem, { headerText: "Context", itemIcon: "Contact" },
@@ -414,7 +324,7 @@ var SpFxReactToolkitTest = function () {
                         React.createElement(InfoRow, { label: "Text Direction", value: localeInfo.isRtl ? 'Right-to-Left (RTL)' : 'Left-to-Right (LTR)', icon: "TextAlignLeft" }),
                         localeInfo.timeZone && (React.createElement(React.Fragment, null,
                             React.createElement(InfoRow, { label: "Time Zone", value: localeInfo.timeZone.description, icon: "Clock" }),
-                            React.createElement(InfoRow, { label: "UTC Offset", value: "".concat(localeInfo.timeZone.offset, " minutes"), icon: "DateTime" }),
+                            React.createElement(InfoRow, { label: "UTC Offset", value: `${localeInfo.timeZone.offset} minutes`, icon: "DateTime" }),
                             React.createElement(Label, null,
                                 React.createElement(Icon, { iconName: "Info", style: { marginRight: '4px', color: '#0078d4' } }),
                                 "Current time: ",
@@ -435,7 +345,7 @@ var SpFxReactToolkitTest = function () {
                             "Microsoft Teams Context",
                             React.createElement(Separator, null)),
                         React.createElement(InfoRow, { label: "Teams Supported", value: "Yes", icon: "CompletedSolid" }),
-                        React.createElement(InfoRow, { label: "Teams Theme", value: teamsTheme !== null && teamsTheme !== void 0 ? teamsTheme : 'default', icon: "Color" }))),
+                        React.createElement(InfoRow, { label: "Teams Theme", value: teamsTheme ?? 'default', icon: "Color" }))),
                     listInfo && (React.createElement(Stack, { tokens: { childrenGap: 2 } },
                         React.createElement("h3", null,
                             React.createElement(Icon, { iconName: "BulletedList", style: { marginRight: '8px' } }),
@@ -447,7 +357,7 @@ var SpFxReactToolkitTest = function () {
                         listInfo.isDocumentLibrary && (React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "FabricFolder", style: { marginRight: '4px', color: '#0078d4' } }),
                             "Document Library")))),
-                    (hubInfo === null || hubInfo === void 0 ? void 0 : hubInfo.isHubSite) && (React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                    hubInfo?.isHubSite && (React.createElement(Stack, { tokens: { childrenGap: 2 } },
                         React.createElement("h3", null,
                             React.createElement(Icon, { iconName: "NetworkTower", style: { marginRight: '8px' } }),
                             "Hub Site Association",
@@ -474,7 +384,7 @@ var SpFxReactToolkitTest = function () {
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "Info", style: { marginRight: '4px', color: '#0078d4' } }),
                             "Check permissions on a different site (auto-fetch when URL is provided)"),
-                        React.createElement(TextField, { label: "Target Site URL", value: crossSiteUrl || '', onChange: function (_, value) { return setCrossSiteUrl((value === null || value === void 0 ? void 0 : value.trim()) || undefined); }, placeholder: "https://contoso.sharepoint.com/sites/targetsite", description: "Enter a site URL - permissions will be fetched automatically" }),
+                        React.createElement(TextField, { label: "Target Site URL", value: crossSiteUrl || '', onChange: (_, value) => setCrossSiteUrl(value?.trim() || undefined), placeholder: "https://contoso.sharepoint.com/sites/targetsite", description: "Enter a site URL - permissions will be fetched automatically" }),
                         crossSitePermissions.isLoading && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
                             "Loading permissions from ",
                             crossSiteUrl,
@@ -554,7 +464,7 @@ var SpFxReactToolkitTest = function () {
                             React.createElement(InfoRow, { label: "Is Not Found", value: oneDriveData.isNotFound ? 'Yes' : 'No', icon: "BlockedSiteSolid12" }))) : (React.createElement(Label, null, oneDriveData.isNotFound
                             ? 'No file found yet. Click "Save to OneDrive" to create it.'
                             : 'No data loaded yet. Click "Load" to fetch from OneDrive.')),
-                        React.createElement(TextField, { label: "New Message", value: oneDriveMessage, onChange: function (_, newValue) { return setOneDriveMessage(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Enter a message to save...", disabled: oneDriveData.isWriting || oneDriveData.isLoading }),
+                        React.createElement(TextField, { label: "New Message", value: oneDriveMessage, onChange: (_, newValue) => setOneDriveMessage(newValue ?? ''), placeholder: "Enter a message to save...", disabled: oneDriveData.isWriting || oneDriveData.isLoading }),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
                             React.createElement(PrimaryButton, { text: "Load from OneDrive", onClick: handleLoadOneDrive, disabled: oneDriveData.isLoading || oneDriveData.isWriting, iconProps: { iconName: 'CloudDownload' } }),
                             React.createElement(PrimaryButton, { text: oneDriveData.isWriting ? 'Saving...' : 'Save to OneDrive', onClick: handleSaveOneDrive, disabled: !oneDriveMessage || oneDriveData.isWriting || oneDriveData.isLoading, iconProps: { iconName: 'CloudUpload' } })),
@@ -571,38 +481,69 @@ var SpFxReactToolkitTest = function () {
                             React.createElement(Separator, null)),
                         (tenantVersion.error || tenantCounter.error) && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
                             "Load Error: ",
-                            ((_c = tenantVersion.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = tenantCounter.error) === null || _d === void 0 ? void 0 : _d.message))),
-                        (tenantVersion.writeError || tenantCounter.writeError) && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
-                            "Write Error: ",
-                            ((_e = tenantVersion.writeError) === null || _e === void 0 ? void 0 : _e.message) || ((_f = tenantCounter.writeError) === null || _f === void 0 ? void 0 : _f.message))),
+                            tenantVersion.error?.message || tenantCounter.error?.message)),
                         (tenantVersion.isLoading || tenantCounter.isLoading) ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "Loading from tenant app catalog...")) : (tenantVersion.data || tenantCounter.data) ? (React.createElement(Stack, { tokens: { childrenGap: 1 } },
-                            React.createElement(InfoRow, { label: "Version", value: (_g = tenantVersion.data) !== null && _g !== void 0 ? _g : '(not set)', icon: "ServerEnviroment" }),
+                            React.createElement(InfoRow, { label: "Version", value: tenantVersion.data ?? '(not set)', icon: "ServerEnviroment" }),
                             tenantVersion.description && (React.createElement(Label, null,
                                 React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
                                 tenantVersion.description)),
-                            React.createElement(InfoRow, { label: "Counter", value: String((_h = tenantCounter.data) !== null && _h !== void 0 ? _h : 0), icon: "NumberField" }),
+                            React.createElement(InfoRow, { label: "Counter", value: String(tenantCounter.data ?? 0), icon: "NumberField" }),
                             tenantCounter.description && (React.createElement(Label, null,
                                 React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
                                 tenantCounter.description)),
-                            React.createElement(InfoRow, { label: "Can Write", value: tenantVersion.canWrite ? 'Yes' : 'No', icon: "Permissions" }))) : (React.createElement(Label, null, "No data loaded yet. Click \"Load\" to fetch from tenant properties.")),
-                        React.createElement(TextField, { label: "New Version", value: tenantVersionInput, onChange: function (_, newValue) { return setTenantVersionInput(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "e.g., 1.0.0", disabled: tenantVersion.isWriting || tenantVersion.isLoading || !tenantVersion.canWrite }),
+                            React.createElement(InfoRow, { label: "Mode", value: "Read-only (REST write blocked by Microsoft)", icon: "Permissions" }))) : (React.createElement(Label, null, "No data loaded yet. Click \"Load\" to fetch from tenant properties.")),
+                        React.createElement(TextField, { label: "New Version", value: tenantVersionInput, onChange: (_, newValue) => setTenantVersionInput(newValue ?? ''), placeholder: "e.g., 1.0.0", disabled: tenantVersion.isLoading }),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
                             React.createElement(PrimaryButton, { text: "Load Properties", onClick: handleLoadTenantProperty, disabled: tenantVersion.isLoading || tenantCounter.isLoading, iconProps: { iconName: 'CloudDownload' } }),
-                            React.createElement(PrimaryButton, { text: tenantVersion.isWriting ? 'Saving...' : 'Save Version', onClick: handleSaveTenantVersion, disabled: !tenantVersionInput || tenantVersion.isWriting || !tenantVersion.canWrite, iconProps: { iconName: 'Save' } }),
-                            React.createElement(PrimaryButton, { text: tenantCounter.isWriting ? 'Incrementing...' : 'Increment Counter', onClick: handleIncrementTenantCounter, disabled: tenantCounter.isWriting || !tenantCounter.canWrite, iconProps: { iconName: 'Add' } })),
+                            React.createElement(PrimaryButton, { text: "Save Version (disabled)", onClick: handleSaveTenantVersion, disabled: true, iconProps: { iconName: 'Save' } }),
+                            React.createElement(PrimaryButton, { text: "Increment Counter (disabled)", onClick: handleIncrementTenantCounter, disabled: true, iconProps: { iconName: 'Add' } })),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
-                            React.createElement(DefaultButton, { text: "Remove Version", onClick: function () { return handleRemoveTenantProperty('version'); }, disabled: tenantVersion.isWriting || !tenantVersion.canWrite || !tenantVersion.data, iconProps: { iconName: 'Delete' } }),
-                            React.createElement(DefaultButton, { text: "Remove Counter", onClick: function () { return handleRemoveTenantProperty('counter'); }, disabled: tenantCounter.isWriting || !tenantCounter.canWrite || !tenantCounter.data, iconProps: { iconName: 'Delete' } })),
+                            React.createElement(DefaultButton, { text: "Remove Version (disabled)", onClick: () => handleRemoveTenantProperty('version'), disabled: true, iconProps: { iconName: 'Delete' } }),
+                            React.createElement(DefaultButton, { text: "Remove Counter (disabled)", onClick: () => handleRemoveTenantProperty('counter'), disabled: true, iconProps: { iconName: 'Delete' } })),
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-                            "Properties are stored tenant-wide in SharePoint StorageEntity. All users can read, only admins can write."),
+                            "Properties are read-only via REST API. Microsoft has blocked SetStorageEntity and RemoveStorageEntity endpoints."),
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "Info", style: { marginRight: '4px', color: '#0078d4' } }),
                             "Keys: spfx-toolkit-test-version (string), spfx-toolkit-test-counter (number)"),
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "Warning", style: { marginRight: '4px', color: '#d83b01' } }),
-                            "Requires: Tenant app catalog provisioned, Manage Web permissions to write"),
-                        !tenantVersion.canWrite && (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "\u2139\uFE0F You don't have permission to modify tenant properties. Contact your SharePoint administrator."))),
+                            "Use PowerShell (Set-PnPStorageEntity) to write tenant properties. For REST CRUD, use useSPFxTenantKeyValueStore."),
+                        React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "\u2139\uFE0F Write operations require PowerShell. Use useSPFxTenantKeyValueStore for REST-based CRUD.")),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "TableGroup", style: { marginRight: '8px' } }),
+                            "Tenant Key-Value Store Demo",
+                            React.createElement(Separator, null)),
+                        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 8 } },
+                            React.createElement(StatusBadge, { label: "Ready", available: tenantKVStore.isReady }),
+                            React.createElement(StatusBadge, { label: "Can Write", available: tenantKVStore.canWrite })),
+                        tenantKVStore.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+                            "Read Error: ",
+                            tenantKVStore.error.message)),
+                        tenantKVStore.writeError && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+                            "Write Error: ",
+                            tenantKVStore.writeError.message)),
+                        React.createElement(TextField, { label: "Key", value: kvStoreKey, onChange: (_, v) => setKvStoreKey(v ?? ''), placeholder: "e.g., apiEndpoint" }),
+                        React.createElement(TextField, { label: "Value", value: kvStoreValue, onChange: (_, v) => setKvStoreValue(v ?? ''), placeholder: "e.g., https://api.example.com" }),
+                        React.createElement(TextField, { label: "Description (optional)", value: kvStoreDescription, onChange: (_, v) => setKvStoreDescription(v ?? ''), placeholder: "e.g., Production API endpoint" }),
+                        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
+                            React.createElement(PrimaryButton, { text: "List All", onClick: handleKVStoreList, disabled: tenantKVStore.isLoading || !tenantKVStore.isReady, iconProps: { iconName: 'BulletedList' } }),
+                            React.createElement(PrimaryButton, { text: "Get", onClick: handleKVStoreGet, disabled: tenantKVStore.isLoading || !tenantKVStore.isReady, iconProps: { iconName: 'Search' } }),
+                            React.createElement(PrimaryButton, { text: "Save", onClick: handleKVStoreSave, disabled: tenantKVStore.isWriting || !tenantKVStore.isReady, iconProps: { iconName: 'Save' } }),
+                            React.createElement(DefaultButton, { text: "Remove", onClick: handleKVStoreRemove, disabled: tenantKVStore.isWriting || !tenantKVStore.isReady, iconProps: { iconName: 'Delete' } })),
+                        kvStoreResult && (React.createElement(InfoRow, { label: "Get Result", value: kvStoreResult, icon: "StatusCircleCheckmark" })),
+                        kvStoreItems.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 1 } },
+                            React.createElement(Label, null,
+                                React.createElement(Icon, { iconName: "BulletedList", style: { marginRight: '4px' } }),
+                                "All Items (",
+                                kvStoreItems.length,
+                                ")"),
+                            kvStoreItems.map(item => (React.createElement(InfoRow, { key: item.id, label: item.key, value: typeof item.value === 'object' ? JSON.stringify(item.value) : String(item.value), icon: "Variable" }))))),
+                        (tenantKVStore.isLoading || tenantKVStore.isWriting) && (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, tenantKVStore.isWriting ? 'Writing...' : 'Loading...')),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+                            "Uses hidden list \"TenantKeyValueStore\" in tenant app catalog. Requires Site Collection Admin for write.")),
                     React.createElement(Stack, { tokens: { childrenGap: 2 } },
                         React.createElement("h3", null,
                             React.createElement(Icon, { iconName: "Database", style: { marginRight: '8px' } }),
@@ -610,9 +551,9 @@ var SpFxReactToolkitTest = function () {
                             React.createElement(Separator, null)),
                         React.createElement(InfoRow, { label: "Current Value", value: sessionStorage.value || '(empty)', icon: "Variable" }),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
-                            React.createElement(TextField, { value: sessionStorageInput, onChange: function (_, newValue) { return setSessionStorageInput(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Enter value...", styles: { root: { flexGrow: 1 } } }),
+                            React.createElement(TextField, { value: sessionStorageInput, onChange: (_, newValue) => setSessionStorageInput(newValue ?? ''), placeholder: "Enter value...", styles: { root: { flexGrow: 1 } } }),
                             React.createElement(PrimaryButton, { text: "Save", onClick: handleSaveSessionStorage, iconProps: { iconName: 'Save' } }),
-                            React.createElement(DefaultButton, { text: "Clear", onClick: function () { return sessionStorage.remove(); }, iconProps: { iconName: 'Delete' } })),
+                            React.createElement(DefaultButton, { text: "Clear", onClick: () => sessionStorage.remove(), iconProps: { iconName: 'Delete' } })),
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
                             "Persists only for current tab/session")),
@@ -623,9 +564,9 @@ var SpFxReactToolkitTest = function () {
                             React.createElement(Separator, null)),
                         React.createElement(InfoRow, { label: "Current Value", value: localStorage.value || '(empty)', icon: "Variable" }),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
-                            React.createElement(TextField, { value: localStorageInput, onChange: function (_, newValue) { return setLocalStorageInput(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Enter value...", styles: { root: { flexGrow: 1 } } }),
+                            React.createElement(TextField, { value: localStorageInput, onChange: (_, newValue) => setLocalStorageInput(newValue ?? ''), placeholder: "Enter value...", styles: { root: { flexGrow: 1 } } }),
                             React.createElement(PrimaryButton, { text: "Save", onClick: handleSaveLocalStorage, iconProps: { iconName: 'Save' } }),
-                            React.createElement(DefaultButton, { text: "Clear", onClick: function () { return localStorage.remove(); }, iconProps: { iconName: 'Delete' } })),
+                            React.createElement(DefaultButton, { text: "Clear", onClick: () => localStorage.remove(), iconProps: { iconName: 'Delete' } })),
                         React.createElement(Label, null,
                             React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
                             "Persists across sessions and page reloads")),
@@ -642,17 +583,17 @@ var SpFxReactToolkitTest = function () {
                             "Logger Demo",
                             React.createElement(Separator, null)),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
-                            React.createElement(DefaultButton, { text: "Info", onClick: function () { return handleLog('info', 'This is an info message'); }, iconProps: { iconName: 'Info' } }),
-                            React.createElement(DefaultButton, { text: "Warning", onClick: function () { return handleLog('warning', 'This is a warning message'); }, iconProps: { iconName: 'Warning' } }),
-                            React.createElement(DefaultButton, { text: "Error", onClick: function () { return handleLog('error', 'This is an error message'); }, iconProps: { iconName: 'Error' } })),
+                            React.createElement(DefaultButton, { text: "Info", onClick: () => handleLog('info', 'This is an info message'), iconProps: { iconName: 'Info' } }),
+                            React.createElement(DefaultButton, { text: "Warning", onClick: () => handleLog('warning', 'This is a warning message'), iconProps: { iconName: 'Warning' } }),
+                            React.createElement(DefaultButton, { text: "Error", onClick: () => handleLog('error', 'This is an error message'), iconProps: { iconName: 'Error' } })),
                         logMessages.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 2 }, styles: { root: { marginTop: '8px' } } },
                             React.createElement(Label, null, "Recent Logs (check browser console):"),
-                            logMessages.map(function (log, idx) {
-                                var levelClass = log.level === 'info' ? styles.info :
+                            logMessages.map((log, idx) => {
+                                const levelClass = log.level === 'info' ? styles.info :
                                     log.level === 'warning' ? styles.warning :
                                         log.level === 'error' ? styles.error :
                                             styles.verbose;
-                                return (React.createElement("div", { key: idx, className: "".concat(styles.logMessage, " ").concat(levelClass) },
+                                return (React.createElement("div", { key: idx, className: `${styles.logMessage} ${levelClass}` },
                                     React.createElement("strong", null,
                                         "[",
                                         log.level.toUpperCase(),
@@ -674,9 +615,9 @@ var SpFxReactToolkitTest = function () {
                             "Theme Information",
                             React.createElement(Separator, null)),
                         React.createElement(InfoRow, { label: "Is Dark Theme", value: isDarkTheme ? 'Yes' : 'No', icon: "Brightness" }),
-                        React.createElement(InfoRow, { label: "Body Background", value: (_k = (_j = theme === null || theme === void 0 ? void 0 : theme.semanticColors) === null || _j === void 0 ? void 0 : _j.bodyBackground) !== null && _k !== void 0 ? _k : 'N/A', icon: "FabricFolderFill" }),
-                        React.createElement(InfoRow, { label: "Body Text", value: (_m = (_l = theme === null || theme === void 0 ? void 0 : theme.semanticColors) === null || _l === void 0 ? void 0 : _l.bodyText) !== null && _m !== void 0 ? _m : 'N/A', icon: "Font" }),
-                        React.createElement(InfoRow, { label: "Link Color", value: (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.semanticColors) === null || _o === void 0 ? void 0 : _o.link) !== null && _p !== void 0 ? _p : 'N/A', icon: "Link" })),
+                        React.createElement(InfoRow, { label: "Body Background", value: theme?.semanticColors?.bodyBackground ?? 'N/A', icon: "FabricFolderFill" }),
+                        React.createElement(InfoRow, { label: "Body Text", value: theme?.semanticColors?.bodyText ?? 'N/A', icon: "Font" }),
+                        React.createElement(InfoRow, { label: "Link Color", value: theme?.semanticColors?.link ?? 'N/A', icon: "Link" })),
                     React.createElement(Stack, { tokens: { childrenGap: 2 } },
                         React.createElement("h3", null,
                             React.createElement(Icon, { iconName: "Color", style: { marginRight: '8px' } }),