@apvee/spfx-react-toolkit 1.0.0

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

@@ -0,0 +1,1351 @@
+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 all hooks from SPFx React Toolkit
+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, useSPFxPnPContext, useSPFxPnP, useSPFxPnPList, useSPFxPnPSearch, SearchVerticals, } from '../../../hooks';
+import '@pnp/sp/webs';
+import '@pnp/sp/lists';
+import '@pnp/sp/items';
+import '@pnp/sp/site-users';
+import { SPPermission } from '@microsoft/sp-page-context';
+// =============================================
+// Helper Components (Must be defined first)
+// =============================================
+// Helper component for displaying info rows
+var InfoRow = function (_a) {
+    var label = _a.label, value = _a.value, icon = _a.icon;
+    return (React.createElement("div", { className: styles.infoRow },
+        icon && React.createElement(Icon, { iconName: icon }),
+        React.createElement(Label, null,
+            label,
+            ":"),
+        React.createElement("span", null, value || 'N/A')));
+};
+// Helper component for status badges
+var StatusBadge = function (_a) {
+    var available = _a.available, label = _a.label;
+    return (React.createElement("div", { className: "".concat(styles.statusBadge, " ").concat(available ? styles.success : styles.error) },
+        React.createElement(Icon, { iconName: available ? 'Completed' : 'ErrorBadge' }),
+        label));
+};
+// =============================================
+// PnPjs Example Components
+// =============================================
+/**
+ * Example 1: useSPFxPnPContext
+ * Shows how to create PnP contexts for current and cross-site scenarios
+ */
+var PnPContextExample = function () {
+    var _a = React.useState(''), crossSiteUrl = _a[0], setCrossSiteUrl = _a[1];
+    var _b = React.useState(null), siteInfo = _b[0], setSiteInfo = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = React.useState(null), errorMsg = _d[0], setErrorMsg = _d[1];
+    // Current site context (default)
+    var currentContext = useSPFxPnPContext();
+    // Cross-site context (only when URL is provided)
+    var crossSiteContext = useSPFxPnPContext(crossSiteUrl || undefined);
+    var handleLoadCurrentSite = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var web, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!currentContext.sp)
+                        return [2 /*return*/];
+                    setLoading(true);
+                    setErrorMsg(null);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, currentContext.sp.web.select('Title', 'Url', 'Description')()];
+                case 2:
+                    web = _a.sent();
+                    setSiteInfo({
+                        title: web.Title,
+                        url: web.Url,
+                        description: web.Description || '(no description)'
+                    });
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('Error loading site:', error_1);
+                    setErrorMsg(error_1 instanceof Error ? error_1.message : 'Unknown error');
+                    setSiteInfo(null);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [currentContext.sp]);
+    var handleLoadCrossSite = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var web, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!crossSiteContext.sp || !crossSiteUrl)
+                        return [2 /*return*/];
+                    setLoading(true);
+                    setErrorMsg(null);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, crossSiteContext.sp.web.select('Title', 'Url', 'Description')()];
+                case 2:
+                    web = _a.sent();
+                    setSiteInfo({
+                        title: web.Title,
+                        url: web.Url,
+                        description: web.Description || '(no description)'
+                    });
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_2 = _a.sent();
+                    console.error('Error loading cross-site:', error_2);
+                    setErrorMsg(error_2 instanceof Error ? error_2.message : 'Unknown error');
+                    setSiteInfo(null);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [crossSiteContext.sp, crossSiteUrl]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "Globe", style: { marginRight: '8px' } }),
+            "Example 1: useSPFxPnPContext - Site Information"),
+        React.createElement(Separator, null),
+        errorMsg && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: function () { return setErrorMsg(null); } }, errorMsg)),
+        React.createElement(Stack, { tokens: { childrenGap: 8 } },
+            React.createElement(Label, null, "Current Site Context"),
+            React.createElement(InfoRow, { label: "Effective URL", value: currentContext.siteUrl, icon: "Link" }),
+            React.createElement(InfoRow, { label: "Is Initialized", value: currentContext.isInitialized ? 'Yes' : 'No', icon: "CheckMark" }),
+            currentContext.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
+                "Init Error: ",
+                currentContext.error.message)),
+            React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Load Current Site Info', onClick: handleLoadCurrentSite, disabled: !currentContext.isInitialized || loading, iconProps: { iconName: 'CloudDownload' } })),
+        React.createElement(Stack, { tokens: { childrenGap: 8 } },
+            React.createElement(Label, null, "Cross-Site Context (Optional)"),
+            React.createElement(TextField, { label: "Site URL", value: crossSiteUrl, onChange: function (_, newValue) { return setCrossSiteUrl(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "e.g., /sites/hr or https://contoso.sharepoint.com/sites/hr", description: "Leave empty to use current site" }),
+            crossSiteUrl && (React.createElement(React.Fragment, null,
+                React.createElement(InfoRow, { label: "Resolved URL", value: crossSiteContext.siteUrl, icon: "Link" }),
+                React.createElement(InfoRow, { label: "Is Initialized", value: crossSiteContext.isInitialized ? 'Yes' : 'No', icon: "CheckMark" }),
+                crossSiteContext.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
+                    "Init Error: ",
+                    crossSiteContext.error.message)),
+                React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Load Cross-Site Info', onClick: handleLoadCrossSite, disabled: !crossSiteContext.isInitialized || loading, iconProps: { iconName: 'Globe' } })))),
+        siteInfo && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { padding: '12px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+            React.createElement(Label, { style: { fontWeight: 600 } },
+                React.createElement(Icon, { iconName: "CheckMark", style: { marginRight: '4px', color: '#107c10' } }),
+                "Site Information Loaded:"),
+            React.createElement(InfoRow, { label: "Title", value: siteInfo.title, icon: "CityNext" }),
+            React.createElement(InfoRow, { label: "URL", value: siteInfo.url, icon: "Link" }),
+            React.createElement(InfoRow, { label: "Description", value: siteInfo.description, icon: "Info" }))),
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "useSPFxPnPContext creates configured SPFI instances. Use for cross-site scenarios or when you need custom cache/batch config.")));
+};
+/**
+ * Example 2: useSPFxPnP
+ * Shows invoke() for single operations and batch() for multiple operations
+ */
+var PnPOperationsExample = function () {
+    var _a = useSPFxPnP(), invoke = _a.invoke, batch = _a.batch, isLoading = _a.isLoading, error = _a.error, clearError = _a.clearError;
+    var _b = React.useState([]), lists = _b[0], setLists = _b[1];
+    var _c = React.useState(null), batchData = _c[0], setBatchData = _c[1];
+    var handleInvokeLists = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var result, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    clearError();
+                    return [4 /*yield*/, invoke(function (sp) {
+                            return sp.web.lists
+                                .select('Title', 'ItemCount')
+                                .filter('Hidden eq false')
+                                .top(10)();
+                        })];
+                case 1:
+                    result = _a.sent();
+                    setLists(result);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _a.sent();
+                    console.error('Invoke error:', err_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [invoke, clearError]);
+    var handleBatchOperations = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var results, listsResult, userResult, webResult, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    clearError();
+                    return [4 /*yield*/, batch(function (batchedSP) { return __awaiter(void 0, void 0, void 0, function () {
+                            var listsPromise, userPromise, webPromise;
+                            return __generator(this, function (_a) {
+                                listsPromise = batchedSP.web.lists.select('Title').top(5)();
+                                userPromise = batchedSP.web.currentUser.select('Title')();
+                                webPromise = batchedSP.web.select('Title')();
+                                // Wait for all batched operations to complete
+                                return [2 /*return*/, Promise.all([listsPromise, userPromise, webPromise])];
+                            });
+                        }); })];
+                case 1:
+                    results = _a.sent();
+                    listsResult = results[0], userResult = results[1], webResult = results[2];
+                    setBatchData({
+                        lists: listsResult,
+                        user: userResult,
+                        webTitle: webResult.Title
+                    });
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_2 = _a.sent();
+                    console.error('Batch error:', err_2);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [batch, clearError]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "CloudUpload", style: { marginRight: '8px' } }),
+            "Example 2: useSPFxPnP - Operations & Batching"),
+        React.createElement(Separator, null),
+        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
+        React.createElement(Stack, { tokens: { childrenGap: 8 } },
+            React.createElement(Label, null, "Single Operation with invoke()"),
+            React.createElement(PrimaryButton, { text: isLoading ? 'Loading...' : 'Load Lists (invoke)', onClick: handleInvokeLists, disabled: isLoading, iconProps: { iconName: 'BulletedList' } }),
+            lists.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 4 }, styles: { root: { padding: '12px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+                React.createElement(Label, null, "Lists (top 10, non-hidden):"),
+                lists.map(function (list, idx) { return (React.createElement("div", { key: idx, style: { padding: '4px 0', borderBottom: idx < lists.length - 1 ? '1px solid #edebe9' : 'none' } },
+                    React.createElement("strong", null, list.Title),
+                    " - ",
+                    list.ItemCount,
+                    " items")); })))),
+        React.createElement(Stack, { tokens: { childrenGap: 8 } },
+            React.createElement(Label, null, "Batch Operations with batch()"),
+            React.createElement(PrimaryButton, { text: isLoading ? 'Loading...' : 'Load Multiple (batch)', onClick: handleBatchOperations, disabled: isLoading, iconProps: { iconName: 'Streaming' } }),
+            batchData && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { padding: '12px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+                React.createElement(InfoRow, { label: "Web Title", value: batchData.webTitle, icon: "CityNext" }),
+                React.createElement(InfoRow, { label: "Current User", value: batchData.user.Title, icon: "Contact" }),
+                React.createElement(Label, null, "Lists (top 5):"),
+                batchData.lists.map(function (list, idx) { return (React.createElement("div", { key: idx, style: { paddingLeft: '16px' } },
+                    "\u2022 ",
+                    list.Title)); })))),
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "invoke() for single operations, batch() combines multiple requests into ONE HTTP call for better performance.")));
+};
+/**
+ * Example 3: useSPFxPnPSearch - Basic Search
+ */
+var PnPSearchBasicExample = function () {
+    var _a = React.useState(''), searchText = _a[0], setSearchText = _a[1];
+    var _b = useSPFxPnPSearch({
+        pageSize: 10
+    }), search = _b.search, results = _b.results, totalResults = _b.totalResults, loading = _b.loading, error = _b.error, clearError = _b.clearError;
+    var handleSearch = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var searchResults, err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!searchText.trim())
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, search(searchText)];
+                case 2:
+                    searchResults = _a.sent();
+                    console.log('[PnPSearchBasic] Search completed:', {
+                        returnedResults: searchResults.length,
+                        stateResults: results.length,
+                        totalResults: totalResults
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_3 = _a.sent();
+                    console.error('Search error:', err_3);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [searchText, search, results.length, totalResults]);
+    // Debug: log quando results cambia
+    React.useEffect(function () {
+        console.log('[PnPSearchBasic] Results state updated:', {
+            resultsLength: results.length,
+            totalResults: totalResults,
+            loading: loading
+        });
+    }, [results, totalResults, loading]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "Search", style: { marginRight: '8px' } }),
+            "Example 1: Basic Search"),
+        React.createElement(Separator, null),
+        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 8 } },
+            React.createElement(TextField, { value: searchText, onChange: function (_, newValue) { return setSearchText(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Search SharePoint...", styles: { root: { flexGrow: 1 } }, onKeyDown: function (e) {
+                    if (e.key === 'Enter') {
+                        handleSearch().catch(function (err) { return console.error('Search error:', err); });
+                    }
+                } }),
+            React.createElement(PrimaryButton, { text: loading ? 'Searching...' : 'Search', onClick: handleSearch, disabled: !searchText.trim() || loading, iconProps: { iconName: 'Search' } })),
+        totalResults !== undefined && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+            "Found ",
+            totalResults,
+            " result",
+            totalResults !== 1 ? 's' : '')),
+        results.length > 0 ? (React.createElement(Stack, { tokens: { childrenGap: 6 } }, results.map(function (result) { return (React.createElement(Stack, { key: result.id, tokens: { childrenGap: 4 }, styles: { root: { padding: '10px', backgroundColor: '#faf9f8', borderRadius: '4px' } } },
+            React.createElement("div", { style: { fontWeight: 600 } }, result.data.Title || '(No Title)'),
+            React.createElement("a", { href: result.data.Path, target: "_blank", rel: "noopener noreferrer", style: { fontSize: '12px' } }, result.data.Path),
+            result.data.FileType && React.createElement(Label, null,
+                "Type: ",
+                result.data.FileType))); }))) : totalResults === 0 ? (React.createElement(MessageBar, null, "No results found. Try a different query.")) : null,
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "Simple text search. Try: \"document\", \"report\", \"ContentType:Document\"")));
+};
+/**
+ * Example 4: Advanced Search with Builder and Verticals
+ */
+var PnPSearchAdvancedExample = function () {
+    var _a = React.useState('All'), selectedVertical = _a[0], setSelectedVertical = _a[1];
+    var _b = useSPFxPnPSearch({
+        pageSize: 5,
+        selectProperties: ['Title', 'Path', 'Author', 'LastModifiedTime', 'FileType']
+    }), search = _b.search, results = _b.results, totalResults = _b.totalResults, loading = _b.loading, loadMore = _b.loadMore, hasMore = _b.hasMore, error = _b.error, clearError = _b.clearError;
+    var getVerticalSourceId = function (vertical) {
+        switch (vertical) {
+            case 'People': return SearchVerticals.People;
+            case 'Documents': return SearchVerticals.Documents;
+            case 'Pages': return SearchVerticals.Pages;
+            case 'Videos': return SearchVerticals.Videos;
+            default: return undefined;
+        }
+    };
+    var handleSearch = React.useCallback(function (query) {
+        search(function (builder) {
+            var result = builder.text(query).sortList({ Property: 'LastModifiedTime', Direction: 1 });
+            var sourceId = getVerticalSourceId(selectedVertical);
+            if (sourceId)
+                result = result.sourceId(sourceId);
+            return result;
+        }).catch(function (err) { return console.error('Search error:', err); });
+    }, [search, selectedVertical]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "SearchAndApps", style: { marginRight: '8px' } }),
+            "Example 2: Advanced Search with Builder"),
+        React.createElement(Separator, null),
+        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 }, wrap: true }, ['All', 'Documents', 'Pages', 'People', 'Videos'].map(function (v) { return (React.createElement(DefaultButton, { key: v, text: v, onClick: function () { return setSelectedVertical(v); }, primary: selectedVertical === v })); })),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 } },
+            React.createElement(PrimaryButton, { text: "Search All", onClick: function () { return handleSearch('*'); }, disabled: loading }),
+            React.createElement(DefaultButton, { text: "Search Documents", onClick: function () { return handleSearch('filetype:docx OR filetype:pdf'); }, disabled: loading })),
+        totalResults !== undefined && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+            "Found ",
+            totalResults,
+            " result",
+            totalResults !== 1 ? 's' : '',
+            " in \"",
+            selectedVertical,
+            "\"")),
+        results.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 6 } },
+            results.map(function (result) { return (React.createElement(Stack, { key: result.id, tokens: { childrenGap: 2 }, styles: { root: { padding: '10px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+                React.createElement("div", { style: { fontWeight: 600 } }, result.data.Title || '(No Title)'),
+                React.createElement(Label, null,
+                    result.data.Author,
+                    " - ",
+                    result.data.LastModifiedTime ? new Date(result.data.LastModifiedTime).toLocaleDateString() : 'N/A'),
+                React.createElement("a", { href: result.data.Path, target: "_blank", rel: "noopener noreferrer", style: { fontSize: '11px' } }, result.data.Path))); }),
+            hasMore && (React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Load More', onClick: loadMore, disabled: loading })))),
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "Builder API with verticals (People, Documents, Pages, Videos) and pagination.")));
+};
+/**
+ * Example 5: Faceted Search with Refiners
+ */
+var PnPSearchRefinersExample = function () {
+    var _a = useSPFxPnPSearch({
+        pageSize: 10,
+        selectProperties: ['Title', 'Path', 'FileType', 'Author'],
+        refiners: 'FileType,Author'
+    }), search = _a.search, results = _a.results, refiners = _a.refiners, totalResults = _a.totalResults, loading = _a.loading, applyRefiner = _a.applyRefiner, error = _a.error, clearError = _a.clearError;
+    var handleSearch = React.useCallback(function () {
+        search('*').catch(function (err) { return console.error('Search error:', err); });
+    }, [search]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "FilterSettings", style: { marginRight: '8px' } }),
+            "Example 3: Faceted Search with Refiners"),
+        React.createElement(Separator, null),
+        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
+        React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Search All Content', onClick: handleSearch, disabled: loading, iconProps: { iconName: 'Search' } }),
+        totalResults !== undefined && (React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "SearchIssue", style: { marginRight: '4px', color: '#0078d4' } }),
+            "Found ",
+            totalResults,
+            " results")),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 12 }, styles: { root: { alignItems: 'flex-start' } } },
+            refiners.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { width: '200px', padding: '8px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+                React.createElement(Label, { style: { fontWeight: 600 } }, "Filters"),
+                refiners.map(function (refiner) { return (React.createElement(Stack, { key: refiner.name, tokens: { childrenGap: 2 } },
+                    React.createElement(Label, null, refiner.name),
+                    refiner.entries.slice(0, 5).map(function (entry) { return (React.createElement(DefaultButton, { key: entry.value, text: "".concat(entry.value, " (").concat(entry.count, ")"), onClick: function () { return applyRefiner(refiner.name, entry.value); }, styles: { root: { height: '28px', fontSize: '12px' } } })); }))); }))),
+            React.createElement(Stack, { tokens: { childrenGap: 6 }, styles: { root: { flexGrow: 1 } } }, results.length > 0 ? (results.map(function (result) { return (React.createElement(Stack, { key: result.id, tokens: { childrenGap: 2 }, styles: { root: { padding: '8px', backgroundColor: '#faf9f8', borderRadius: '4px' } } },
+                React.createElement("div", { style: { fontWeight: 600 } }, result.data.Title || '(No Title)'),
+                React.createElement(Label, null,
+                    result.data.FileType,
+                    " | ",
+                    result.data.Author),
+                React.createElement("a", { href: result.data.Path, target: "_blank", rel: "noopener noreferrer", style: { fontSize: '11px' } }, result.data.Path))); })) : (React.createElement(Label, null, "Click \"Search All Content\" to see results.")))),
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "Faceted search with FileType and Author refiners. Click to filter/toggle.")));
+};
+/**
+ * Example 6: Search Suggestions (Autocomplete)
+ */
+var PnPSearchSuggestionsExample = function () {
+    var _a = React.useState(''), query = _a[0], setQuery = _a[1];
+    var _b = React.useState([]), suggestions = _b[0], setSuggestions = _b[1];
+    var suggest = useSPFxPnPSearch().suggest;
+    // Track if component is mounted to prevent state updates after unmount
+    var mountedRef = React.useRef(true);
+    // Cleanup on unmount
+    React.useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    var handleSuggest = React.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var results, err_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!value || value.length < 2) {
+                        if (mountedRef.current) {
+                            setSuggestions([]);
+                        }
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, suggest(value)];
+                case 2:
+                    results = _a.sent();
+                    if (mountedRef.current) {
+                        setSuggestions(results);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_4 = _a.sent();
+                    console.error('[PnPSearchSuggestions] Error:', err_4);
+                    if (mountedRef.current) {
+                        setSuggestions([]);
+                    }
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [suggest]);
+    // Debounced suggest with proper cleanup
+    var debouncedSuggest = React.useMemo(function () {
+        var timeoutId;
+        // Return debounced function
+        var debounced = function (value) {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = window.setTimeout(function () { return handleSuggest(value); }, 300);
+        };
+        // Cleanup function stored in the debounced function
+        debounced.cancel = function () {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+                timeoutId = undefined;
+            }
+        };
+        return debounced;
+    }, [handleSuggest]);
+    // Cleanup timeout on unmount
+    React.useEffect(function () {
+        return function () {
+            var _a;
+            (_a = debouncedSuggest.cancel) === null || _a === void 0 ? void 0 : _a.call(debouncedSuggest);
+        };
+    }, [debouncedSuggest]);
+    var handleQueryChange = React.useCallback(function (value) {
+        setQuery(value);
+        debouncedSuggest(value);
+    }, [debouncedSuggest]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "SearchBookmark", style: { marginRight: '8px' } }),
+            "Example 4: Search Suggestions (Autocomplete)"),
+        React.createElement(Separator, null),
+        React.createElement(TextField, { label: "Search with Autocomplete", value: query, onChange: function (_, newValue) { return handleQueryChange(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Type at least 2 characters..." }),
+        suggestions.length > 0 ? (React.createElement(Stack, { tokens: { childrenGap: 2 }, styles: { root: { padding: '8px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+            React.createElement(Label, null,
+                "Suggestions (",
+                suggestions.length,
+                "):"),
+            suggestions.map(function (s, idx) { return (React.createElement("div", { key: idx, style: { padding: '6px', backgroundColor: '#fff', borderRadius: '2px', cursor: 'pointer' }, onClick: function () { return setQuery(s); } }, s)); }))) : query.length >= 2 ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "No suggestions available. This is normal in dev/test environments where there isn't enough indexed content. Try in a production environment with more search activity.")) : null,
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "Real-time autocomplete with 300ms debounce. Requires indexed content and search activity.")));
+};
+/**
+ * Example 7: useSPFxPnPList - CRUD Operations
+ */
+var PnPListExample = function () {
+    var _a = React.useState(''), listTitle = _a[0], setListTitle = _a[1];
+    var _b = React.useState(''), newTitle = _b[0], setNewTitle = _b[1];
+    var _c = React.useState(null), editingId = _c[0], setEditingId = _c[1];
+    var _d = React.useState(''), editTitle = _d[0], setEditTitle = _d[1];
+    var _e = useSPFxPnPList(listTitle, { pageSize: 10 }), query = _e.query, items = _e.items, loading = _e.loading, error = _e.error, isEmpty = _e.isEmpty, hasMore = _e.hasMore, loadMore = _e.loadMore, clearError = _e.clearError, create = _e.create, update = _e.update, remove = _e.remove;
+    var handleLoadList = React.useCallback(function () {
+        query(function (q) { return q.select('Id', 'Title').orderBy('Id', false); }).catch(function (err) { return console.error('Load error:', err); });
+    }, [query]);
+    var handleCreate = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var err_5;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!newTitle || !listTitle)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, create({ Title: newTitle })];
+                case 2:
+                    _a.sent();
+                    setNewTitle('');
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_5 = _a.sent();
+                    console.error('Create error:', err_5);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [create, newTitle, listTitle]);
+    var handleUpdate = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_6;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!editTitle)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, update(id, { Title: editTitle })];
+                case 2:
+                    _a.sent();
+                    setEditingId(null);
+                    setEditTitle('');
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_6 = _a.sent();
+                    console.error('Update error:', err_6);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [update, editTitle]);
+    var handleDelete = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_7;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!confirm('Delete this item?'))
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, remove(id)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_7 = _a.sent();
+                    console.error('Delete error:', err_7);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [remove]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "BulletedList", style: { marginRight: '8px' } }),
+            "Example 3: useSPFxPnPList - CRUD Operations"),
+        React.createElement(Separator, null),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 } },
+            React.createElement(TextField, { label: "List Title", value: listTitle, onChange: function (_, newValue) { return setListTitle(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "e.g., Site Pages", styles: { root: { flexGrow: 1 } } }),
+            React.createElement(PrimaryButton, { text: "Load", onClick: handleLoadList, disabled: !listTitle || loading, styles: { root: { marginTop: '28px' } } })),
+        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
+        listTitle && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 }, styles: { root: { padding: '8px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
+            React.createElement(TextField, { value: newTitle, onChange: function (_, newValue) { return setNewTitle(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "New item title...", styles: { root: { flexGrow: 1 } } }),
+            React.createElement(PrimaryButton, { text: "Create", onClick: handleCreate, disabled: !newTitle || loading }))),
+        loading && React.createElement(MessageBar, null, "Loading..."),
+        isEmpty && !loading && React.createElement(MessageBar, null, "No items found."),
+        items.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 3 } },
+            React.createElement(Label, null,
+                "Items (",
+                items.length,
+                "):"),
+            items.map(function (item) { return (React.createElement(Stack, { key: item.Id, horizontal: true, tokens: { childrenGap: 6 }, styles: { root: { padding: '6px', backgroundColor: '#faf9f8', borderRadius: '4px' } } }, editingId === item.Id ? (React.createElement(React.Fragment, null,
+                React.createElement(TextField, { value: editTitle, onChange: function (_, v) { return setEditTitle(v !== null && v !== void 0 ? v : ''); }, styles: { root: { flexGrow: 1 } } }),
+                React.createElement(DefaultButton, { text: "Save", onClick: function () { return handleUpdate(item.Id); } }),
+                React.createElement(DefaultButton, { text: "Cancel", onClick: function () { setEditingId(null); setEditTitle(''); } }))) : (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: { flexGrow: 1 } },
+                    "#",
+                    item.Id,
+                    " - ",
+                    item.Title),
+                React.createElement(DefaultButton, { text: "Edit", onClick: function () { setEditingId(item.Id); setEditTitle(item.Title); } }),
+                React.createElement(DefaultButton, { text: "Delete", onClick: function () { return handleDelete(item.Id); } }))))); }),
+            hasMore && React.createElement(PrimaryButton, { text: "Load More", onClick: loadMore, disabled: loading }))),
+        React.createElement(Label, null,
+            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+            "Complete CRUD with auto-refetch. Try with \"Site Pages\" or \"Documents\".")));
+};
+// 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) {
+        // Skip private properties and service scopes to avoid circular references
+        if (typeof key === 'string' && (key.indexOf('_') === 0 || key === 'serviceScope' || key === 'service')) {
+            return '[Circular/Private]';
+        }
+        if (typeof value === 'object' && value !== null) {
+            if (seen.has(value)) {
+                return '[Circular Reference]';
+            }
+            seen.add(value);
+        }
+        return value;
+    }, indent);
+};
+var SpFxReactToolkitTest = function () {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    // 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;
+    // 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;
+    // User & Site Info
+    var displayName = useSPFxUserInfo().displayName;
+    var _s = useSPFxSiteInfo(), siteTitle = _s.title, webUrl = _s.webUrl, siteClassification = _s.siteClassification;
+    var localeInfo = useSPFxLocaleInfo();
+    // Teams Context
+    var _t = useSPFxTeams(), hasTeamsContext = _t.supported, teamsTheme = _t.theme;
+    // Page Context
+    var pageContext = useSPFxPageContext();
+    var pageTypeInfo = useSPFxPageType();
+    // List & Hub Info (can be undefined)
+    var listInfo = useSPFxListInfo();
+    var hubInfo = useSPFxHubSiteInfo();
+    // Container & Performance
+    var containerSize = useSPFxContainerSize();
+    var containerInfo = useSPFxContainerInfo();
+    var performance = useSPFxPerformance();
+    // Permissions
+    var hasWebPermission = useSPFxPermissions().hasWebPermission;
+    var canManageWeb = hasWebPermission(SPPermission.manageWeb);
+    var canManageLists = hasWebPermission(SPPermission.manageLists);
+    // Storage
+    var sessionStorage = useSPFxSessionStorage('demo-session-key', '');
+    var localStorage = useSPFxLocalStorage('demo-local-key', '');
+    // Advanced
+    var correlationInfo = useSPFxCorrelationInfo();
+    var logger = useSPFxLogger();
+    var serviceScope = useSPFxServiceScope();
+    // HTTP Clients
+    var spHttpClient = useSPFxSPHttpClient();
+    var msGraphClient = useSPFxMSGraphClient();
+    var aadHttpClient = useSPFxAadHttpClient();
+    // OneDrive AppData hook (using instance id as folder for isolation)
+    var oneDriveData = useSPFxOneDriveAppData('test-data.json', id, // Use instance ID as folder for multi-instance support
+    false // Manual load for demo purposes
+    );
+    // Tenant Property hook (tenant-wide configuration)
+    var tenantVersion = useSPFxTenantProperty('spfx-toolkit-test-version', false);
+    var tenantCounter = useSPFxTenantProperty('spfx-toolkit-test-counter', false);
+    // User Photo hook (current user profile photo)
+    var 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];
+    // Cross-site permissions (fetch only when URL is set)
+    var 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]);
+    // Handlers
+    var handleUpdateProperties = React.useCallback(function () {
+        setProperties({ description: descriptionInput });
+        setMessageText('Properties updated successfully!');
+        setShowMessage(true);
+        setTimeout(function () { return setShowMessage(false); }, 3000);
+    }, [descriptionInput, setProperties]);
+    var handleSaveSessionStorage = React.useCallback(function () {
+        sessionStorage.setValue(sessionStorageInput);
+        setSessionStorageInput('');
+        setMessageText('Value saved to session storage!');
+        setShowMessage(true);
+        setTimeout(function () { return setShowMessage(false); }, 3000);
+    }, [sessionStorageInput, sessionStorage]);
+    var handleSaveLocalStorage = React.useCallback(function () {
+        localStorage.setValue(localStorageInput);
+        setLocalStorageInput('');
+        setMessageText('Value saved to local storage!');
+        setShowMessage(true);
+        setTimeout(function () { return 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*/];
+            }
+        });
+    }); }, [performance]);
+    var handleLog = React.useCallback(function (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); });
+    }, [logger]);
+    var handleLoadOneDrive = 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:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, oneDriveData.load()];
+                case 1:
+                    _a.sent();
+                    setMessageText('Data loaded from OneDrive successfully!');
+                    setShowMessage(true);
+                    setTimeout(function () { return setShowMessage(false); }, 3000);
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_3 = _a.sent();
+                    setMessageText("Load failed: ".concat(error_3 instanceof Error ? error_3.message : 'Unknown error'));
+                    setShowMessage(true);
+                    setTimeout(function () { return setShowMessage(false); }, 5000);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [oneDriveData]);
+    var handleSaveOneDrive = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var newData, error_4;
+        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_4 = _c.sent();
+                    setMessageText("Save failed: ".concat(error_4 instanceof Error ? error_4.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_5;
+        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_5 = _a.sent();
+                    setMessageText("Load failed: ".concat(error_5 instanceof Error ? error_5.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_6;
+        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_6 = _a.sent();
+                    setMessageText("Save failed: ".concat(error_6 instanceof Error ? error_6.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_7;
+        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_7 = _b.sent();
+                    setMessageText("Increment failed: ".concat(error_7 instanceof Error ? error_7.message : 'Unknown error'));
+                    setShowMessage(true);
+                    setTimeout(function () { return setShowMessage(false); }, 5000);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [tenantCounter]);
+    var handleRemoveTenantProperty = React.useCallback(function (propertyName) { return __awaiter(void 0, void 0, void 0, function () {
+        var hook, error_8;
+        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_8 = _a.sent();
+                    setMessageText("Remove failed: ".concat(error_8 instanceof Error ? error_8.message : 'Unknown error'));
+                    setShowMessage(true);
+                    setTimeout(function () { return setShowMessage(false); }, 5000);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [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)),
+        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' } } },
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Info", style: { marginRight: '8px' } }),
+                            "Core Information",
+                            React.createElement(Separator, null)),
+                        React.createElement(InfoRow, { label: "Instance ID", value: id, icon: "Fingerprint" }),
+                        React.createElement(InfoRow, { label: "Component Kind", value: kind, icon: "CubeShape" }),
+                        React.createElement(InfoRow, { label: "Display Mode", value: isEdit ? 'Edit' : 'Read', icon: "Edit" }),
+                        React.createElement(InfoRow, { label: "Environment Type", value: envType, icon: "Globe" }),
+                        React.createElement(InfoRow, { label: "Page Type", value: pageTypeInfo.pageType, icon: "Page" })),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            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(PrimaryButton, { text: "Update Properties", onClick: handleUpdateProperties, iconProps: { iconName: 'Save' } }),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+                            "Changes will update the WebPart properties and trigger Property Pane refresh")),
+                    containerSize && (React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            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: "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" },
+                React.createElement(Stack, { tokens: { childrenGap: 4 }, styles: { root: { marginTop: '16px' } } },
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "People", style: { marginRight: '8px' } }),
+                            "User & Site Information",
+                            React.createElement(Separator, null)),
+                        React.createElement(InfoRow, { label: "User Name", value: displayName, icon: "Contact" }),
+                        React.createElement(InfoRow, { label: "Site Title", value: siteTitle, icon: "CityNext" }),
+                        React.createElement(InfoRow, { label: "Site URL", value: webUrl, icon: "Link" }),
+                        siteClassification && (React.createElement(InfoRow, { label: "Classification", value: siteClassification, icon: "Tag" }))),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "LocaleLanguage", style: { marginRight: '8px' } }),
+                            "Locale & Regional Settings",
+                            React.createElement(Separator, null)),
+                        React.createElement(InfoRow, { label: "Content Locale", value: localeInfo.locale, icon: "Globe" }),
+                        React.createElement(InfoRow, { label: "UI Locale", value: localeInfo.uiLocale, icon: "LocaleLanguage" }),
+                        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(Label, null,
+                                React.createElement(Icon, { iconName: "Info", style: { marginRight: '4px', color: '#0078d4' } }),
+                                "Current time: ",
+                                new Intl.DateTimeFormat(localeInfo.locale, {
+                                    weekday: 'long',
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit'
+                                }).format(new Date())))),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+                            "Use with JavaScript Intl APIs for i18n (dates, numbers, currencies)")),
+                    hasTeamsContext && (React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "TeamsLogo", style: { marginRight: '8px' } }),
+                            "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" }))),
+                    listInfo && (React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "BulletedList", style: { marginRight: '8px' } }),
+                            "List Context",
+                            React.createElement(Separator, null)),
+                        React.createElement(InfoRow, { label: "List ID", value: listInfo.id, icon: "Fingerprint" }),
+                        React.createElement(InfoRow, { label: "List Title", value: listInfo.title, icon: "FabricTextHighlight" }),
+                        listInfo.baseTemplate && (React.createElement(InfoRow, { label: "Base Template", value: String(listInfo.baseTemplate), icon: "PageData" })),
+                        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 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "NetworkTower", style: { marginRight: '8px' } }),
+                            "Hub Site Association",
+                            React.createElement(Separator, null)),
+                        hubInfo.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+                            "Failed to load hub site URL: ",
+                            hubInfo.error.message)),
+                        React.createElement(InfoRow, { label: "Hub Site ID", value: hubInfo.hubSiteId, icon: "Fingerprint" }),
+                        hubInfo.isLoading ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "Loading hub site URL...")) : hubInfo.hubSiteUrl ? (React.createElement(InfoRow, { label: "Hub Site URL", value: hubInfo.hubSiteUrl, icon: "Link" })) : null)))),
+            React.createElement(PivotItem, { headerText: "Advanced", itemIcon: "DeveloperTools" },
+                React.createElement(Stack, { tokens: { childrenGap: 4 }, styles: { root: { marginTop: '16px' } } },
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Permissions", style: { marginRight: '8px' } }),
+                            "Permissions (Current Site)",
+                            React.createElement(Separator, null)),
+                        React.createElement(StatusBadge, { label: "Can Manage Web", available: canManageWeb }),
+                        React.createElement(StatusBadge, { label: "Can Manage Lists", available: canManageLists })),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Globe", style: { marginRight: '8px' } }),
+                            "Cross-Site Permissions",
+                            React.createElement(Separator, null)),
+                        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" }),
+                        crossSitePermissions.isLoading && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+                            "Loading permissions from ",
+                            crossSiteUrl,
+                            "...")),
+                        crossSitePermissions.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+                            "Error: ",
+                            crossSitePermissions.error.message)),
+                        crossSiteUrl && !crossSitePermissions.isLoading && !crossSitePermissions.error && (React.createElement(Stack, { tokens: { childrenGap: 1 } },
+                            React.createElement(InfoRow, { label: "Target Site", value: crossSiteUrl, icon: "Globe" }),
+                            React.createElement(StatusBadge, { label: "Can Manage Web (Cross-Site)", available: crossSitePermissions.hasWebPermission(SPPermission.manageWeb) }),
+                            React.createElement(StatusBadge, { label: "Can Manage Lists (Cross-Site)", available: crossSitePermissions.hasWebPermission(SPPermission.manageLists) }),
+                            React.createElement(StatusBadge, { label: "Can Add Items (Cross-Site)", available: crossSitePermissions.hasWebPermission(SPPermission.addListItems) })))),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "ContactCard", style: { marginRight: '8px' } }),
+                            "User Photo Demo",
+                            React.createElement(Separator, null)),
+                        userPhoto.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+                            "Load Error: ",
+                            userPhoto.error.message)),
+                        userPhoto.isLoading ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "Loading photo from Microsoft Graph...")) : userPhoto.photoUrl ? (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 10 }, verticalAlign: "center" },
+                            React.createElement("img", { src: userPhoto.photoUrl, alt: displayName, style: {
+                                    width: 120,
+                                    height: 120,
+                                    borderRadius: '50%',
+                                    objectFit: 'cover',
+                                    border: '3px solid #0078d4',
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+                                } }),
+                            React.createElement(Stack, { tokens: { childrenGap: 1 } },
+                                React.createElement(InfoRow, { label: "Display Name", value: displayName, icon: "Contact" }),
+                                React.createElement(InfoRow, { label: "Photo Size", value: "240x240 (default)", icon: "ResizeMouseMedium" }),
+                                React.createElement(InfoRow, { label: "Photo Format", value: "Blob URL", icon: "FileImage" }),
+                                React.createElement(InfoRow, { label: "Is Ready", value: userPhoto.isReady ? 'Yes' : 'No', icon: "CheckMark" })))) : (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 10 }, verticalAlign: "center" },
+                            React.createElement("div", { style: {
+                                    width: 120,
+                                    height: 120,
+                                    borderRadius: '50%',
+                                    backgroundColor: '#0078d4',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    color: 'white',
+                                    fontSize: 48,
+                                    fontWeight: 'bold'
+                                } }, displayName ? displayName.charAt(0).toUpperCase() : '?'),
+                            React.createElement(Label, null,
+                                React.createElement(Icon, { iconName: "Info", style: { marginRight: '4px', color: '#0078d4' } }),
+                                "No profile photo available. Showing initials fallback."))),
+                        React.createElement(PrimaryButton, { text: userPhoto.isLoading ? 'Loading...' : 'Reload Photo', onClick: userPhoto.reload, disabled: userPhoto.isLoading, iconProps: { iconName: 'Refresh' } }),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+                            "Photo loaded from Microsoft Graph API (/me/photos/240x240/$value)"),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "Warning", style: { marginRight: '4px', color: '#d83b01' } }),
+                            "Requires Microsoft Graph permissions: User.Read"),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "LightningBolt", style: { marginRight: '4px', color: '#107c10' } }),
+                            "Blob URL automatically cleaned up on unmount (memory safe)")),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "OneDrive", style: { marginRight: '8px' } }),
+                            "OneDrive AppData Demo",
+                            React.createElement(Separator, null)),
+                        oneDriveData.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+                            "Load Error: ",
+                            oneDriveData.error.message)),
+                        oneDriveData.writeError && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
+                            "Write Error: ",
+                            oneDriveData.writeError.message)),
+                        oneDriveData.isLoading ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "Loading from OneDrive...")) : oneDriveData.data ? (React.createElement(Stack, { tokens: { childrenGap: 1 } },
+                            React.createElement(InfoRow, { label: "Message", value: oneDriveData.data.message, icon: "Message" }),
+                            React.createElement(InfoRow, { label: "Counter", value: String(oneDriveData.data.counter), icon: "NumberField" }),
+                            React.createElement(InfoRow, { label: "Last Updated", value: new Date(oneDriveData.data.timestamp).toLocaleString(), icon: "DateTime" }),
+                            React.createElement(InfoRow, { label: "Is Ready", value: oneDriveData.isReady ? 'Yes' : 'No', icon: "CheckMark" }))) : (React.createElement(Label, null, "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(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' } })),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
+                            "Data is stored in your OneDrive (appRoot:/",
+                            id,
+                            "/test-data.json). Each WebPart instance has its own file."),
+                        React.createElement(Label, null,
+                            React.createElement(Icon, { iconName: "Warning", style: { marginRight: '4px', color: '#d83b01' } }),
+                            "Requires Microsoft Graph permissions: Files.ReadWrite or Files.ReadWrite.AppFolder")),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Org", style: { marginRight: '8px' } }),
+                            "Tenant Property Demo",
+                            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.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" }),
+                            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" }),
+                            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(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(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(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."),
+                        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."))),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Database", style: { marginRight: '8px' } }),
+                            "Session Storage Demo",
+                            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(PrimaryButton, { text: "Save", onClick: handleSaveSessionStorage, iconProps: { iconName: 'Save' } }),
+                            React.createElement(DefaultButton, { text: "Clear", onClick: function () { return 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")),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Save", style: { marginRight: '8px' } }),
+                            "Local Storage Demo",
+                            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(PrimaryButton, { text: "Save", onClick: handleSaveLocalStorage, iconProps: { iconName: 'Save' } }),
+                            React.createElement(DefaultButton, { text: "Clear", onClick: function () { return 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")),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "SpeedHigh", style: { marginRight: '8px' } }),
+                            "Performance Test",
+                            React.createElement(Separator, null)),
+                        performanceResult && (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, performanceResult)),
+                        React.createElement(PrimaryButton, { text: "Run Performance Test", onClick: handlePerformanceTest, iconProps: { iconName: 'LightningBolt' } })),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Code", style: { marginRight: '8px' } }),
+                            "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' } })),
+                        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 :
+                                    log.level === 'warning' ? styles.warning :
+                                        log.level === 'error' ? styles.error :
+                                            styles.verbose;
+                                return (React.createElement("div", { key: idx, className: "".concat(styles.logMessage, " ").concat(levelClass) },
+                                    React.createElement("strong", null,
+                                        "[",
+                                        log.level.toUpperCase(),
+                                        "]"),
+                                    ": ",
+                                    log.message));
+                            })))),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "CloudUpload", style: { marginRight: '8px' } }),
+                            "HTTP Clients Status",
+                            React.createElement(Separator, null)),
+                        React.createElement(StatusBadge, { label: "SPHttpClient", available: !!spHttpClient }),
+                        React.createElement(StatusBadge, { label: "MSGraphClient", available: !!msGraphClient }),
+                        React.createElement(StatusBadge, { label: "AadHttpClient", available: !!aadHttpClient })),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Color", style: { marginRight: '8px' } }),
+                            "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(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "Color", style: { marginRight: '8px' } }),
+                            "Fluent UI 9 Theme Information",
+                            React.createElement(Separator, null)),
+                        React.createElement(InfoRow, { label: "Is Teams Context", value: fluent9ThemeInfo.isTeams ? 'Yes' : 'No', icon: "TeamsLogo" }),
+                        fluent9ThemeInfo.isTeams && fluent9ThemeInfo.teamsTheme && (React.createElement(InfoRow, { label: "Teams Theme", value: fluent9ThemeInfo.teamsTheme, icon: "Color" })),
+                        React.createElement("details", { className: styles.detailsSection },
+                            React.createElement("summary", null, "Click to expand Fluent UI 9 Theme (JSON)"),
+                            React.createElement("pre", null, safeStringify(fluent9ThemeInfo.theme, 2)))),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "DeveloperTools", style: { marginRight: '8px' } }),
+                            "Advanced Diagnostics",
+                            React.createElement(Separator, null)),
+                        React.createElement(InfoRow, { label: "Correlation ID", value: correlationInfo.correlationId, icon: "TrackersMirrored" }),
+                        React.createElement(InfoRow, { label: "Tenant ID", value: correlationInfo.tenantId, icon: "CityNext" }),
+                        React.createElement(InfoRow, { label: "ServiceScope", value: serviceScope ? 'Available' : 'N/A', icon: "Settings" })),
+                    React.createElement(Stack, { tokens: { childrenGap: 2 } },
+                        React.createElement("h3", null,
+                            React.createElement(Icon, { iconName: "FileCode", style: { marginRight: '8px' } }),
+                            "Page Context (Raw JSON)",
+                            React.createElement(Separator, null)),
+                        React.createElement("details", { className: styles.detailsSection },
+                            React.createElement("summary", null, "Click to expand/collapse"),
+                            React.createElement("pre", null, safeStringify(pageContext, 2)))))),
+            React.createElement(PivotItem, { headerText: "PnPjs", itemIcon: "CloudDownload" },
+                React.createElement(Stack, { tokens: { childrenGap: 20 }, styles: { root: { marginTop: '16px' } } },
+                    React.createElement(PnPContextExample, null),
+                    React.createElement(PnPOperationsExample, null),
+                    React.createElement(PnPListExample, null))),
+            React.createElement(PivotItem, { headerText: "Search", itemIcon: "Search" },
+                React.createElement(Stack, { tokens: { childrenGap: 20 }, styles: { root: { marginTop: '16px' } } },
+                    React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+                        React.createElement("strong", null, "useSPFxPnPSearch Hook Examples"),
+                        React.createElement("br", null),
+                        "These examples demonstrate SharePoint Search capabilities using the native PnPjs SearchQueryBuilder API."),
+                    React.createElement(PnPSearchBasicExample, null),
+                    React.createElement(PnPSearchAdvancedExample, null),
+                    React.createElement(PnPSearchRefinersExample, null),
+                    React.createElement(PnPSearchSuggestionsExample, null))))));
+};
+export default SpFxReactToolkitTest;
+//# sourceMappingURL=SpFxReactToolkitTest.js.map