roamjs-components 0.53.2 → 0.53.5

package/components/ConfigPage.js

@@ -1,335 +1,335 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createConfigObserver = exports.render = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@blueprintjs/core");
-const datetime_1 = require("@blueprintjs/datetime");
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
-const dom_1 = require("../dom");
-const writes_1 = require("../writes");
-const queries_1 = require("../queries");
-const localStorageGet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageGet"));
-const localStorageRemove_1 = (0, tslib_1.__importDefault)(require("../util/localStorageRemove"));
-const localStorageSet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageSet"));
-const startOfDay_1 = (0, tslib_1.__importDefault)(require("date-fns/startOfDay"));
-const Description_1 = (0, tslib_1.__importDefault)(require("./Description"));
-const ExternalLogin_1 = (0, tslib_1.__importDefault)(require("./ExternalLogin"));
-const idToTitle_1 = (0, tslib_1.__importDefault)(require("../util/idToTitle"));
-const MenuItemSelect_1 = (0, tslib_1.__importDefault)(require("./MenuItemSelect"));
-const PageInput_1 = (0, tslib_1.__importDefault)(require("./PageInput"));
-const format_1 = (0, tslib_1.__importDefault)(require("date-fns/format"));
-const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
-const color_1 = (0, tslib_1.__importDefault)(require("color"));
-const getAuthorizationHeader_1 = (0, tslib_1.__importDefault)(require("../util/getAuthorizationHeader"));
-const TokenDialog_1 = require("./TokenDialog");
-const useSingleChildValue = ({ defaultValue, uid: initialUid, title, parentUid, order, transform, toStr, }) => {
-    const [uid, setUid] = (0, react_1.useState)(initialUid);
-    const [valueUid, setValueUid] = (0, react_1.useState)(uid && (0, queries_1.getFirstChildUidByBlockUid)(uid));
-    const [value, setValue] = (0, react_1.useState)((valueUid && transform((0, queries_1.getTextByBlockUid)(valueUid))) || defaultValue);
-    const onChange = (0, react_1.useCallback)((v) => {
-        setValue(v);
-        if (valueUid) {
-            window.roamAlphaAPI.updateBlock({
-                block: { string: toStr(v), uid: valueUid },
-            });
-        }
-        else if (uid) {
-            const newValueUid = window.roamAlphaAPI.util.generateUID();
-            window.roamAlphaAPI.createBlock({
-                block: { string: toStr(v), uid: newValueUid },
-                location: { order: 0, "parent-uid": uid },
-            });
-            setValueUid(newValueUid);
-        }
-        else {
-            const newUid = window.roamAlphaAPI.util.generateUID();
-            window.roamAlphaAPI.createBlock({
-                block: { string: title, uid: newUid },
-                location: { order, "parent-uid": parentUid },
-            });
-            setTimeout(() => setUid(newUid));
-            const newValueUid = window.roamAlphaAPI.util.generateUID();
-            window.roamAlphaAPI.createBlock({
-                block: { string: toStr(v), uid: newValueUid },
-                location: { order: 0, "parent-uid": newUid },
-            });
-            setValueUid(newValueUid);
-        }
-    }, [setValue, setValueUid, title, parentUid, order, uid, valueUid, setUid]);
-    return { value, onChange };
-};
-const MultiChildPanel = ({ uid: initialUid, title, description, order, parentUid, InputComponent, }) => {
-    const [uid, setUid] = (0, react_1.useState)(initialUid);
-    const [texts, setTexts] = (0, react_1.useState)(() => uid ? (0, queries_1.getShallowTreeByParentUid)(uid) : []);
-    const [value, setValue] = (0, react_1.useState)("");
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Label, null,
-            (0, idToTitle_1.default)(title),
-            react_1.default.createElement(Description_1.default, { description: description }),
-            react_1.default.createElement("div", { style: { display: "flex" } },
-                react_1.default.createElement(InputComponent, { value: value, setValue: setValue }),
-                react_1.default.createElement(core_1.Button, { icon: "plus", minimal: true, disabled: !value, onClick: () => {
-                        const valueUid = window.roamAlphaAPI.util.generateUID();
-                        if (uid) {
-                            window.roamAlphaAPI.createBlock({
-                                location: { "parent-uid": uid, order: texts.length },
-                                block: { string: value, uid: valueUid },
-                            });
-                        }
-                        else {
-                            const newUid = window.roamAlphaAPI.util.generateUID();
-                            window.roamAlphaAPI.createBlock({
-                                block: { string: title, uid: newUid },
-                                location: { order, "parent-uid": parentUid },
-                            });
-                            setTimeout(() => setUid(newUid));
-                            window.roamAlphaAPI.createBlock({
-                                block: { string: value, uid: valueUid },
-                                location: { order: 0, "parent-uid": newUid },
-                            });
-                        }
-                        setTexts([...texts, { text: value, uid: valueUid }]);
-                        setValue("");
-                    } }))),
-        texts.map((p) => (react_1.default.createElement("div", { key: p.uid, style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-            } },
-            react_1.default.createElement("span", { style: {
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                } }, p.text),
-            react_1.default.createElement(core_1.Button, { icon: "trash", minimal: true, onClick: () => {
-                    window.roamAlphaAPI.deleteBlock({ block: { uid: p.uid } });
-                    setTexts(texts.filter((f) => f.uid !== p.uid));
-                } }))))));
-};
-const TextPanel = ({ title, uid, parentUid, order, description, defaultValue = "", }) => {
-    const { value, onChange } = useSingleChildValue({
-        defaultValue,
-        title,
-        uid,
-        parentUid,
-        order,
-        transform: (s) => s,
-        toStr: (s) => s,
-    });
-    return (react_1.default.createElement(core_1.Label, null,
-        (0, idToTitle_1.default)(title),
-        react_1.default.createElement(Description_1.default, { description: description }),
-        react_1.default.createElement(core_1.InputGroup, { value: value, onChange: (e) => onChange(e.target.value) })));
-};
-const TimePanel = ({ title, uid, parentUid, order, description, defaultValue = (0, startOfDay_1.default)(new Date()), }) => {
-    const { value, onChange } = useSingleChildValue({
-        defaultValue,
-        title,
-        uid,
-        parentUid,
-        order,
-        transform: (s) => {
-            const d = new Date();
-            const [hours, minutes] = s.split(":");
-            d.setHours(Number(hours));
-            d.setMinutes(Number(minutes));
-            return d;
-        },
-        toStr: (v) => (0, format_1.default)(v, "HH:mm"),
-    });
-    return (react_1.default.createElement(core_1.Label, null,
-        (0, idToTitle_1.default)(title),
-        react_1.default.createElement(Description_1.default, { description: description }),
-        react_1.default.createElement(datetime_1.TimePicker, { value: value, onChange: onChange, showArrowButtons: true })));
-};
-const NumberPanel = ({ title, uid, parentUid, order, description, defaultValue = 0, }) => {
-    const { value, onChange } = useSingleChildValue({
-        defaultValue,
-        title,
-        uid,
-        parentUid,
-        order,
-        transform: parseInt,
-        toStr: (v) => `${v}`,
-    });
-    return (react_1.default.createElement(core_1.Label, null,
-        (0, idToTitle_1.default)(title),
-        react_1.default.createElement(Description_1.default, { description: description }),
-        react_1.default.createElement(core_1.NumericInput, { value: value, onValueChange: onChange })));
-};
-const SelectPanel = ({ title, uid, parentUid, order, description, defaultValue = "", options: { items }, }) => {
-    const { value, onChange } = useSingleChildValue({
-        defaultValue: defaultValue || items[0],
-        title,
-        uid,
-        parentUid,
-        order,
-        transform: (s) => s,
-        toStr: (s) => s,
-    });
-    return (react_1.default.createElement(core_1.Label, null,
-        (0, idToTitle_1.default)(title),
-        react_1.default.createElement(Description_1.default, { description: description }),
-        react_1.default.createElement(MenuItemSelect_1.default, { activeItem: value, onItemSelect: (e) => onChange(e), items: items })));
-};
-const FlagPanel = ({ title, uid: initialUid, parentUid, order, description, options = {}, }) => {
-    const [uid, setUid] = (0, react_1.useState)(initialUid);
-    return (react_1.default.createElement(core_1.Checkbox, { checked: !!uid, onChange: (e) => {
-            var _a;
-            const { checked } = e.target;
-            if (checked) {
-                const newUid = window.roamAlphaAPI.util.generateUID();
-                window.roamAlphaAPI.createBlock({
-                    block: { string: title, uid: newUid },
-                    location: { order, "parent-uid": parentUid },
-                });
-                setTimeout(() => setUid(newUid), 1);
-            }
-            else {
-                window.roamAlphaAPI.deleteBlock({ block: { uid } });
-                setUid("");
-            }
-            (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, checked);
-        }, labelElement: react_1.default.createElement(react_1.default.Fragment, null,
-            (0, idToTitle_1.default)(title),
-            react_1.default.createElement(Description_1.default, { description: description })) }));
-};
-const MultiTextPanel = (props) => {
-    return (react_1.default.createElement(MultiChildPanel, Object.assign({}, props, { InputComponent: ({ value, setValue }) => (react_1.default.createElement(core_1.InputGroup, { value: value, onChange: (e) => setValue(e.target.value) })) })));
-};
-const PagesPanel = (props) => {
-    return (react_1.default.createElement(MultiChildPanel, Object.assign({}, props, { InputComponent: (inputProps) => (react_1.default.createElement(PageInput_1.default, Object.assign({ extra: ["{all}"] }, inputProps))) })));
-};
-const OauthPanel = ({ uid, parentUid, options }) => {
-    const key = `oauth-${options.service}`;
-    const [useLocal, setUseLocal] = (0, react_1.useState)(!!(0, localStorageGet_1.default)(key));
-    const [accounts, setAccounts] = (0, react_1.useState)(() => useLocal
-        ? JSON.parse((0, localStorageGet_1.default)(key))
-        : uid
-            ? (0, queries_1.getBasicTreeByParentUid)(uid).map((v) => {
-                var _a, _b;
-                return ({
-                    text: ((_a = v.children[0]) === null || _a === void 0 ? void 0 : _a.text) ? v.text : "Default Account",
-                    uid: v.uid,
-                    data: ((_b = v.children[0]) === null || _b === void 0 ? void 0 : _b.text) || v.text,
-                });
-            })
-            : []);
-    const onCheck = (0, react_1.useCallback)((e) => {
-        const checked = e.target.checked;
-        setUseLocal(checked);
-        if (checked) {
-            if (uid) {
-                (0, queries_1.getShallowTreeByParentUid)(uid).forEach(({ uid: u }) => (0, writes_1.deleteBlock)(u));
-            }
-            (0, localStorageSet_1.default)(key, JSON.stringify(accounts));
-        }
-        else {
-            (0, localStorageRemove_1.default)(key);
-            if (uid) {
-                accounts.forEach(({ text, uid: u, data }, order) => {
-                    window.roamAlphaAPI.createBlock({
-                        location: { "parent-uid": uid, order },
-                        block: { string: text, uid: u },
-                    });
-                    window.roamAlphaAPI.createBlock({
-                        location: { "parent-uid": u, order: 0 },
-                        block: { string: data },
-                    });
-                });
-            }
-        }
-    }, [setUseLocal, accounts, uid, key]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Checkbox, { labelElement: react_1.default.createElement(react_1.default.Fragment, null,
-                "Store Locally",
-                react_1.default.createElement(Description_1.default, { description: "If checked, sensitive authentication data will be stored locally on your machine and will require re-logging in per device. If unchecked, sensitive authentication data will be stored in your Roam Graph." })), checked: useLocal, onChange: onCheck }),
-        react_1.default.createElement(ExternalLogin_1.default, Object.assign({ useLocal: useLocal, onSuccess: (acc) => setAccounts([...accounts, acc]), parentUid: parentUid, loggedIn: !!accounts.length }, options)),
-        !!accounts.length && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("h5", { style: { marginTop: 8 } }, "Accounts"),
-            react_1.default.createElement("hr", null),
-            react_1.default.createElement("ul", { style: { marginTop: 8, padding: 0 } }, accounts.map((act) => (react_1.default.createElement("li", { key: act.uid, style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginTop: 8,
-                } },
-                react_1.default.createElement("span", { style: { minWidth: 192 } }, act.text),
-                react_1.default.createElement(core_1.Button, { text: "Log Out", onClick: () => {
-                        if (useLocal) {
-                            const accts = JSON.parse((0, localStorageGet_1.default)(key));
-                            (0, localStorageSet_1.default)(key, JSON.stringify(accts.filter((a) => act.uid !== a.uid)));
-                        }
-                        else {
-                            (0, writes_1.deleteBlock)(act.uid);
-                        }
-                        setAccounts(accounts.filter((a) => act.uid !== a.uid));
-                    } })))))))));
-};
-const BlockPanel = ({ uid: initialUid, parentUid, title, defaultValue, description, }) => {
-    const containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (containerRef.current) {
-            const el = containerRef.current;
-            (initialUid
-                ? Promise.resolve(initialUid)
-                : (0, writes_1.createBlock)({ node: { text: title, children: [] }, parentUid }))
-                .then((formatUid) => (0, queries_1.getFirstChildUidByBlockUid)(formatUid) ||
-                (0, writes_1.createBlock)({
-                    node: defaultValue || { text: " " },
-                    parentUid: formatUid,
-                }))
-                .then((uid) => {
-                window.roamAlphaAPI.ui.components.renderBlock({
-                    uid,
-                    el,
-                });
-            });
-        }
-    }, [containerRef, defaultValue]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Label, null,
-            (0, idToTitle_1.default)(title),
-            react_1.default.createElement(Description_1.default, { description: description })),
-        react_1.default.createElement("div", { ref: containerRef, style: {
-                border: "1px solid #33333333",
-                padding: "8px 0",
-                borderRadius: 4,
-            } })));
-};
-const BlocksPanel = ({ uid: initialUid, parentUid, title, defaultValue, description, }) => {
-    const containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (containerRef.current) {
-            const el = containerRef.current;
-            (initialUid
-                ? Promise.resolve(initialUid)
-                : (0, writes_1.createBlock)({ node: { text: title, children: [] }, parentUid }))
-                .then((formatUid) => (0, queries_1.getFirstChildUidByBlockUid)(formatUid)
-                ? formatUid
-                : ((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length)
-                    ? Promise.all(defaultValue.map((node, order) => (0, writes_1.createBlock)({
-                        node,
-                        parentUid: formatUid,
-                        order,
-                    })))
-                    : (0, writes_1.createBlock)({
-                        node: { text: " " },
-                        parentUid: formatUid,
-                    })).then(() => formatUid))
-                .then((uid) => {
-                window.roamAlphaAPI.ui.components.renderBlock({
-                    uid,
-                    el,
-                });
-            });
-        }
-    }, [containerRef, defaultValue]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Label, null,
-            (0, idToTitle_1.default)(title),
-            react_1.default.createElement(Description_1.default, { description: description })),
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfigObserver = exports.render = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const datetime_1 = require("@blueprintjs/datetime");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
+const dom_1 = require("../dom");
+const writes_1 = require("../writes");
+const queries_1 = require("../queries");
+const localStorageGet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageGet"));
+const localStorageRemove_1 = (0, tslib_1.__importDefault)(require("../util/localStorageRemove"));
+const localStorageSet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageSet"));
+const startOfDay_1 = (0, tslib_1.__importDefault)(require("date-fns/startOfDay"));
+const Description_1 = (0, tslib_1.__importDefault)(require("./Description"));
+const ExternalLogin_1 = (0, tslib_1.__importDefault)(require("./ExternalLogin"));
+const idToTitle_1 = (0, tslib_1.__importDefault)(require("../util/idToTitle"));
+const MenuItemSelect_1 = (0, tslib_1.__importDefault)(require("./MenuItemSelect"));
+const PageInput_1 = (0, tslib_1.__importDefault)(require("./PageInput"));
+const format_1 = (0, tslib_1.__importDefault)(require("date-fns/format"));
+const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
+const color_1 = (0, tslib_1.__importDefault)(require("color"));
+const getAuthorizationHeader_1 = (0, tslib_1.__importDefault)(require("../util/getAuthorizationHeader"));
+const TokenDialog_1 = require("./TokenDialog");
+const useSingleChildValue = ({ defaultValue, uid: initialUid, title, parentUid, order, transform, toStr, }) => {
+    const [uid, setUid] = (0, react_1.useState)(initialUid);
+    const [valueUid, setValueUid] = (0, react_1.useState)(uid && (0, queries_1.getFirstChildUidByBlockUid)(uid));
+    const [value, setValue] = (0, react_1.useState)((valueUid && transform((0, queries_1.getTextByBlockUid)(valueUid))) || defaultValue);
+    const onChange = (0, react_1.useCallback)((v) => {
+        setValue(v);
+        if (valueUid) {
+            window.roamAlphaAPI.updateBlock({
+                block: { string: toStr(v), uid: valueUid },
+            });
+        }
+        else if (uid) {
+            const newValueUid = window.roamAlphaAPI.util.generateUID();
+            window.roamAlphaAPI.createBlock({
+                block: { string: toStr(v), uid: newValueUid },
+                location: { order: 0, "parent-uid": uid },
+            });
+            setValueUid(newValueUid);
+        }
+        else {
+            const newUid = window.roamAlphaAPI.util.generateUID();
+            window.roamAlphaAPI.createBlock({
+                block: { string: title, uid: newUid },
+                location: { order, "parent-uid": parentUid },
+            });
+            setTimeout(() => setUid(newUid));
+            const newValueUid = window.roamAlphaAPI.util.generateUID();
+            window.roamAlphaAPI.createBlock({
+                block: { string: toStr(v), uid: newValueUid },
+                location: { order: 0, "parent-uid": newUid },
+            });
+            setValueUid(newValueUid);
+        }
+    }, [setValue, setValueUid, title, parentUid, order, uid, valueUid, setUid]);
+    return { value, onChange };
+};
+const MultiChildPanel = ({ uid: initialUid, title, description, order, parentUid, InputComponent, }) => {
+    const [uid, setUid] = (0, react_1.useState)(initialUid);
+    const [texts, setTexts] = (0, react_1.useState)(() => uid ? (0, queries_1.getShallowTreeByParentUid)(uid) : []);
+    const [value, setValue] = (0, react_1.useState)("");
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Label, null,
+            (0, idToTitle_1.default)(title),
+            react_1.default.createElement(Description_1.default, { description: description }),
+            react_1.default.createElement("div", { style: { display: "flex" } },
+                react_1.default.createElement(InputComponent, { value: value, setValue: setValue }),
+                react_1.default.createElement(core_1.Button, { icon: "plus", minimal: true, disabled: !value, onClick: () => {
+                        const valueUid = window.roamAlphaAPI.util.generateUID();
+                        if (uid) {
+                            window.roamAlphaAPI.createBlock({
+                                location: { "parent-uid": uid, order: texts.length },
+                                block: { string: value, uid: valueUid },
+                            });
+                        }
+                        else {
+                            const newUid = window.roamAlphaAPI.util.generateUID();
+                            window.roamAlphaAPI.createBlock({
+                                block: { string: title, uid: newUid },
+                                location: { order, "parent-uid": parentUid },
+                            });
+                            setTimeout(() => setUid(newUid));
+                            window.roamAlphaAPI.createBlock({
+                                block: { string: value, uid: valueUid },
+                                location: { order: 0, "parent-uid": newUid },
+                            });
+                        }
+                        setTexts([...texts, { text: value, uid: valueUid }]);
+                        setValue("");
+                    } }))),
+        texts.map((p) => (react_1.default.createElement("div", { key: p.uid, style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+            } },
+            react_1.default.createElement("span", { style: {
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                } }, p.text),
+            react_1.default.createElement(core_1.Button, { icon: "trash", minimal: true, onClick: () => {
+                    window.roamAlphaAPI.deleteBlock({ block: { uid: p.uid } });
+                    setTexts(texts.filter((f) => f.uid !== p.uid));
+                } }))))));
+};
+const TextPanel = ({ title, uid, parentUid, order, description, defaultValue = "", }) => {
+    const { value, onChange } = useSingleChildValue({
+        defaultValue,
+        title,
+        uid,
+        parentUid,
+        order,
+        transform: (s) => s,
+        toStr: (s) => s,
+    });
+    return (react_1.default.createElement(core_1.Label, null,
+        (0, idToTitle_1.default)(title),
+        react_1.default.createElement(Description_1.default, { description: description }),
+        react_1.default.createElement(core_1.InputGroup, { value: value, onChange: (e) => onChange(e.target.value) })));
+};
+const TimePanel = ({ title, uid, parentUid, order, description, defaultValue = (0, startOfDay_1.default)(new Date()), }) => {
+    const { value, onChange } = useSingleChildValue({
+        defaultValue,
+        title,
+        uid,
+        parentUid,
+        order,
+        transform: (s) => {
+            const d = new Date();
+            const [hours, minutes] = s.split(":");
+            d.setHours(Number(hours));
+            d.setMinutes(Number(minutes));
+            return d;
+        },
+        toStr: (v) => (0, format_1.default)(v, "HH:mm"),
+    });
+    return (react_1.default.createElement(core_1.Label, null,
+        (0, idToTitle_1.default)(title),
+        react_1.default.createElement(Description_1.default, { description: description }),
+        react_1.default.createElement(datetime_1.TimePicker, { value: value, onChange: onChange, showArrowButtons: true })));
+};
+const NumberPanel = ({ title, uid, parentUid, order, description, defaultValue = 0, }) => {
+    const { value, onChange } = useSingleChildValue({
+        defaultValue,
+        title,
+        uid,
+        parentUid,
+        order,
+        transform: parseInt,
+        toStr: (v) => `${v}`,
+    });
+    return (react_1.default.createElement(core_1.Label, null,
+        (0, idToTitle_1.default)(title),
+        react_1.default.createElement(Description_1.default, { description: description }),
+        react_1.default.createElement(core_1.NumericInput, { value: value, onValueChange: onChange })));
+};
+const SelectPanel = ({ title, uid, parentUid, order, description, defaultValue = "", options: { items }, }) => {
+    const { value, onChange } = useSingleChildValue({
+        defaultValue: defaultValue || items[0],
+        title,
+        uid,
+        parentUid,
+        order,
+        transform: (s) => s,
+        toStr: (s) => s,
+    });
+    return (react_1.default.createElement(core_1.Label, null,
+        (0, idToTitle_1.default)(title),
+        react_1.default.createElement(Description_1.default, { description: description }),
+        react_1.default.createElement(MenuItemSelect_1.default, { activeItem: value, onItemSelect: (e) => onChange(e), items: items })));
+};
+const FlagPanel = ({ title, uid: initialUid, parentUid, order, description, options = {}, }) => {
+    const [uid, setUid] = (0, react_1.useState)(initialUid);
+    return (react_1.default.createElement(core_1.Checkbox, { checked: !!uid, onChange: (e) => {
+            var _a;
+            const { checked } = e.target;
+            if (checked) {
+                const newUid = window.roamAlphaAPI.util.generateUID();
+                window.roamAlphaAPI.createBlock({
+                    block: { string: title, uid: newUid },
+                    location: { order, "parent-uid": parentUid },
+                });
+                setTimeout(() => setUid(newUid), 1);
+            }
+            else {
+                window.roamAlphaAPI.deleteBlock({ block: { uid } });
+                setUid("");
+            }
+            (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, checked);
+        }, labelElement: react_1.default.createElement(react_1.default.Fragment, null,
+            (0, idToTitle_1.default)(title),
+            react_1.default.createElement(Description_1.default, { description: description })) }));
+};
+const MultiTextPanel = (props) => {
+    return (react_1.default.createElement(MultiChildPanel, Object.assign({}, props, { InputComponent: ({ value, setValue }) => (react_1.default.createElement(core_1.InputGroup, { value: value, onChange: (e) => setValue(e.target.value) })) })));
+};
+const PagesPanel = (props) => {
+    return (react_1.default.createElement(MultiChildPanel, Object.assign({}, props, { InputComponent: (inputProps) => (react_1.default.createElement(PageInput_1.default, Object.assign({ extra: ["{all}"] }, inputProps))) })));
+};
+const OauthPanel = ({ uid, parentUid, options }) => {
+    const key = `oauth-${options.service}`;
+    const [useLocal, setUseLocal] = (0, react_1.useState)(!!(0, localStorageGet_1.default)(key));
+    const [accounts, setAccounts] = (0, react_1.useState)(() => useLocal
+        ? JSON.parse((0, localStorageGet_1.default)(key))
+        : uid
+            ? (0, queries_1.getBasicTreeByParentUid)(uid).map((v) => {
+                var _a, _b;
+                return ({
+                    text: ((_a = v.children[0]) === null || _a === void 0 ? void 0 : _a.text) ? v.text : "Default Account",
+                    uid: v.uid,
+                    data: ((_b = v.children[0]) === null || _b === void 0 ? void 0 : _b.text) || v.text,
+                });
+            })
+            : []);
+    const onCheck = (0, react_1.useCallback)((e) => {
+        const checked = e.target.checked;
+        setUseLocal(checked);
+        if (checked) {
+            if (uid) {
+                (0, queries_1.getShallowTreeByParentUid)(uid).forEach(({ uid: u }) => (0, writes_1.deleteBlock)(u));
+            }
+            (0, localStorageSet_1.default)(key, JSON.stringify(accounts));
+        }
+        else {
+            (0, localStorageRemove_1.default)(key);
+            if (uid) {
+                accounts.forEach(({ text, uid: u, data }, order) => {
+                    window.roamAlphaAPI.createBlock({
+                        location: { "parent-uid": uid, order },
+                        block: { string: text, uid: u },
+                    });
+                    window.roamAlphaAPI.createBlock({
+                        location: { "parent-uid": u, order: 0 },
+                        block: { string: data },
+                    });
+                });
+            }
+        }
+    }, [setUseLocal, accounts, uid, key]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Checkbox, { labelElement: react_1.default.createElement(react_1.default.Fragment, null,
+                "Store Locally",
+                react_1.default.createElement(Description_1.default, { description: "If checked, sensitive authentication data will be stored locally on your machine and will require re-logging in per device. If unchecked, sensitive authentication data will be stored in your Roam Graph." })), checked: useLocal, onChange: onCheck }),
+        react_1.default.createElement(ExternalLogin_1.default, Object.assign({ useLocal: useLocal, onSuccess: (acc) => setAccounts([...accounts, acc]), parentUid: parentUid, loggedIn: !!accounts.length }, options)),
+        !!accounts.length && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h5", { style: { marginTop: 8 } }, "Accounts"),
+            react_1.default.createElement("hr", null),
+            react_1.default.createElement("ul", { style: { marginTop: 8, padding: 0 } }, accounts.map((act) => (react_1.default.createElement("li", { key: act.uid, style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: 8,
+                } },
+                react_1.default.createElement("span", { style: { minWidth: 192 } }, act.text),
+                react_1.default.createElement(core_1.Button, { text: "Log Out", onClick: () => {
+                        if (useLocal) {
+                            const accts = JSON.parse((0, localStorageGet_1.default)(key));
+                            (0, localStorageSet_1.default)(key, JSON.stringify(accts.filter((a) => act.uid !== a.uid)));
+                        }
+                        else {
+                            (0, writes_1.deleteBlock)(act.uid);
+                        }
+                        setAccounts(accounts.filter((a) => act.uid !== a.uid));
+                    } })))))))));
+};
+const BlockPanel = ({ uid: initialUid, parentUid, title, defaultValue, description, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (containerRef.current) {
+            const el = containerRef.current;
+            (initialUid
+                ? Promise.resolve(initialUid)
+                : (0, writes_1.createBlock)({ node: { text: title, children: [] }, parentUid }))
+                .then((formatUid) => (0, queries_1.getFirstChildUidByBlockUid)(formatUid) ||
+                (0, writes_1.createBlock)({
+                    node: defaultValue || { text: " " },
+                    parentUid: formatUid,
+                }))
+                .then((uid) => {
+                window.roamAlphaAPI.ui.components.renderBlock({
+                    uid,
+                    el,
+                });
+            });
+        }
+    }, [containerRef, defaultValue]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Label, null,
+            (0, idToTitle_1.default)(title),
+            react_1.default.createElement(Description_1.default, { description: description })),
+        react_1.default.createElement("div", { ref: containerRef, style: {
+                border: "1px solid #33333333",
+                padding: "8px 0",
+                borderRadius: 4,
+            } })));
+};
+const BlocksPanel = ({ uid: initialUid, parentUid, title, defaultValue, description, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (containerRef.current) {
+            const el = containerRef.current;
+            (initialUid
+                ? Promise.resolve(initialUid)
+                : (0, writes_1.createBlock)({ node: { text: title, children: [] }, parentUid }))
+                .then((formatUid) => (0, queries_1.getFirstChildUidByBlockUid)(formatUid)
+                ? formatUid
+                : ((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length)
+                    ? Promise.all(defaultValue.map((node, order) => (0, writes_1.createBlock)({
+                        node,
+                        parentUid: formatUid,
+                        order,
+                    })))
+                    : (0, writes_1.createBlock)({
+                        node: { text: " " },
+                        parentUid: formatUid,
+                    })).then(() => formatUid))
+                .then((uid) => {
+                window.roamAlphaAPI.ui.components.renderBlock({
+                    uid,
+                    el,
+                });
+            });
+        }
+    }, [containerRef, defaultValue]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Label, null,
+            (0, idToTitle_1.default)(title),
+            react_1.default.createElement(Description_1.default, { description: description })),
         react_1.default.createElement("style", null, `.roamjs-config-blocks > div > .rm-block-main {
   display: none;
 }
@@ -340,309 +340,309 @@ const BlocksPanel = ({ uid: initialUid, parentUid, title, defaultValue, descript
 
 .roamjs-config-blocks > div > .rm-block-children {
   margin-left: -4px;
-}`),
-        react_1.default.createElement("div", { ref: containerRef, style: {
-                border: "1px solid #33333333",
-                padding: "8px 0",
-                borderRadius: 4,
-            }, className: "roamjs-config-blocks" })));
-};
-const CustomPanel = ({ description, title, uid: inputUid, options: { component: Component }, parentUid, defaultValue = [], order, }) => {
-    const uid = (0, react_1.useMemo)(() => {
-        if (inputUid)
-            return inputUid;
-        const newUid = window.roamAlphaAPI.util.generateUID();
-        (0, writes_1.createBlock)({ node: { text: title, uid: newUid }, parentUid, order });
-        return newUid;
-    }, [inputUid]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Label, null,
-            (0, idToTitle_1.default)(title),
-            react_1.default.createElement(Description_1.default, { description: description })),
-        react_1.default.createElement(Component, { uid: uid, parentUid: parentUid, title: title, defaultValue: defaultValue })));
-};
-const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId, setUid, uid, toggleable, onEnable, onDisable, }) => {
-    const uidRef = (0, react_1.useRef)(uid);
-    const isPremium = (0, react_1.useMemo)(() => toggleable !== true, [toggleable]);
-    const dev = (0, react_1.useMemo)(() => ["dev", "ngrok", "localhost"].some((s) => (process.env.API_URL || "").includes(s))
-        ? "&dev=true"
-        : "", []);
-    const [pricingMessage, setPricingMessage] = (0, react_1.useState)("");
-    const [productDescription, setProductDescription] = (0, react_1.useState)("");
-    const [error, setError] = (0, react_1.useState)("");
-    const [loading, setLoading] = (0, react_1.useState)(isPremium);
-    const [alertLoading, setAlertLoading] = (0, react_1.useState)(false);
-    const enableCallback = (0, react_1.useCallback)((checked, uid) => {
-        setEnabled(checked);
-        if (checked) {
-            (0, writes_1.createBlock)({
-                parentUid: pageUid,
-                order,
-                node: { text: id },
-            })
-                .then((newUid) => {
-                setUid(newUid);
-                uidRef.current = newUid;
-            })
-                .then(() => onEnable === null || onEnable === void 0 ? void 0 : onEnable());
-        }
-        else {
-            (0, writes_1.deleteBlock)(uid)
-                .then(() => {
-                setUid("");
-                uidRef.current = "";
-            })
-                .then(() => onDisable === null || onDisable === void 0 ? void 0 : onDisable());
-        }
-    }, [setUid, setEnabled, id, pageUid, order, onEnable, onDisable]);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const intervalListener = (0, react_1.useRef)(0);
-    const catchError = (0, react_1.useCallback)((e) => { var _a, _b, _c; return setError(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || ((_c = e.response) === null || _c === void 0 ? void 0 : _c.data) || e.message); }, [setError]);
-    (0, react_1.useEffect)(() => {
-        if (isPremium) {
-            axios_1.default
-                .get(`https://lambda.roamjs.com/price?extensionId=${extensionId}${dev}`)
-                .then((r) => {
-                setPricingMessage(`$${r.data.price / 100}${r.data.perUse ? " per use" : ""}${r.data.isMonthly ? " per month" : " per year"}`);
-                setProductDescription(r.data.description || "No extension specific description found.");
-            })
-                .catch(catchError);
-        }
-    }, [isPremium, setPricingMessage, setProductDescription, dev]);
-    const checkSubscription = (0, react_1.useCallback)((token) => {
-        setLoading(true);
-        setError("");
-        setEnabled(false);
-        (token
-            ? axios_1.default
-                .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, {
-                headers: { Authorization: (0, getAuthorizationHeader_1.default)() },
-            })
-                .then((r) => {
-                if (!r.data.success && uidRef.current) {
-                    enableCallback(false, uidRef.current);
-                }
-                else if (r.data.success && !uidRef.current) {
-                    enableCallback(true, uidRef.current);
-                }
-                else {
-                    setEnabled(r.data.success);
-                }
-            })
-            : Promise.reject(new Error(`Must set a RoamJS token in order to use these features. To set your RoamJS token, open the Roam command palette and enter "Set RoamJS Token"`)))
-            .catch((e) => {
-            if (uidRef.current)
-                enableCallback(false, uidRef.current);
-            catchError(e);
-        })
-            .finally(() => setLoading(false));
-    }, [catchError, extensionId, dev, uidRef, enableCallback, setLoading, setError]);
-    const containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (isPremium) {
-            (0, TokenDialog_1.checkRoamJSTokenWarning)().then(checkSubscription);
-            if (containerRef.current)
-                (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("roamjs:token:set", ((e) => checkSubscription(e.detail)));
-        }
-        return () => clearTimeout(intervalListener.current);
-    }, [isPremium, checkSubscription]);
-    return (react_1.default.createElement("div", { id: "roamjs-toggleable-container", ref: containerRef },
-        loading ? (react_1.default.createElement("div", { style: {
-                whiteSpace: "pre-wrap",
-                display: "flex",
-                justifyContent: "space-between",
-            } },
-            react_1.default.createElement("span", { style: { opacity: 0.75 } },
-                "Checking to see if you are subscribed to RoamJS",
-                " ",
-                (0, idToTitle_1.default)(extensionId),
-                "..."),
-            react_1.default.createElement(core_1.Spinner, { size: 16 }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(core_1.Switch, { labelElement: "Enabled", checked: enabled, onChange: (e) => isPremium
-                    ? setIsOpen(true)
-                    : enableCallback(e.target.checked, uid) }),
-            react_1.default.createElement("p", { style: { whiteSpace: "pre-wrap" } }, isPremium &&
-                (enabled
-                    ? `You have sucessfully subscribed!\n\nConfigure this feature with the tabs on the left.`
-                    : `This is a premium feature and will require a paid subscription to enable.\n\n${productDescription}`)))),
-        react_1.default.createElement("p", { style: { color: "red" } }, error),
-        react_1.default.createElement(core_1.Alert, { isOpen: isOpen, onConfirm: () => {
-                setAlertLoading(true);
-                setError("");
-                if (enabled) {
-                    axios_1.default
-                        .post(`https://lambda.roamjs.com/unsubscribe`, {
-                        extensionId,
-                        dev: !!dev,
-                    }, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
-                        .then(() => {
-                        enableCallback(false, uid);
-                    })
-                        .catch(catchError)
-                        .finally(() => {
-                        setAlertLoading(false);
-                        setIsOpen(false);
-                    });
-                }
-                else {
-                    axios_1.default
-                        .post(`https://lambda.roamjs.com/subscribe`, {
-                        extensionId,
-                        dev: !!dev,
-                    }, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
-                        .then((r) => {
-                        if (r.data.url) {
-                            const width = 600;
-                            const height = 525;
-                            const left = window.screenX + (window.innerWidth - width) / 2;
-                            const top = window.screenY + (window.innerHeight - height) / 2;
-                            window.open(r.data.url, `roamjs:roamjs:stripe`, `left=${left},top=${top},width=${width},height=${height},status=1`);
-                            const authInterval = () => {
-                                axios_1.default
-                                    .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
-                                    .then((r) => {
-                                    if (r.data.success) {
-                                        enableCallback(true, uid);
-                                        setAlertLoading(false);
-                                        setIsOpen(false);
-                                    }
-                                    else {
-                                        intervalListener.current = window.setTimeout(authInterval, 2000);
-                                    }
-                                })
-                                    .catch((e) => {
-                                    catchError(e);
-                                    setAlertLoading(false);
-                                    setIsOpen(false);
-                                });
-                            };
-                            authInterval();
-                        }
-                        else if (r.data.success) {
-                            enableCallback(true, uid);
-                            setAlertLoading(false);
-                            setIsOpen(false);
-                        }
-                        else {
-                            setError("Something went wrong with the subscription. Please contact support@roamjs.com for help!");
-                            setAlertLoading(false);
-                            setIsOpen(false);
-                        }
-                    })
-                        .catch(catchError)
-                        .finally(() => {
-                        setAlertLoading(false);
-                        setIsOpen(false);
-                    });
-                }
-            }, confirmButtonText: "Submit", cancelButtonText: "Cancel", intent: core_1.Intent.PRIMARY, loading: alertLoading, onCancel: () => setIsOpen(false) }, enabled
-            ? `By clicking submit below, you will unsubscribe from the premium features of the RoamJS Extension: ${(0, idToTitle_1.default)(extensionId)}`
-            : `By clicking submit below, you will subscribe to the premium features of the RoamJS Extension: ${(0, idToTitle_1.default)(extensionId)} for ${pricingMessage}. A window may appear for checkout if this is your first premium extension`)));
-};
-const Panels = {
-    text: TextPanel,
-    time: TimePanel,
-    number: NumberPanel,
-    flag: FlagPanel,
-    pages: PagesPanel,
-    oauth: OauthPanel,
-    multitext: MultiTextPanel,
-    select: SelectPanel,
-    block: BlockPanel,
-    blocks: BlocksPanel,
-    custom: CustomPanel,
-};
-const tryColor = (s) => {
-    if (!s)
-        return undefined;
-    try {
-        return (0, color_1.default)(s);
-    }
-    catch (e) {
-        return undefined;
-    }
-};
-const FieldTabs = ({ id, fields, uid: initialUid, pageUid, order, toggleable, extensionId, onEnable, onDisable, }) => {
-    const [uid, setUid] = (0, react_1.useState)(initialUid);
-    const parentUid = (0, react_1.useMemo)(() => {
-        if (/home/i.test(id)) {
-            return pageUid;
-        }
-        if (uid) {
-            return uid;
-        }
-        if (toggleable) {
-            return "";
-        }
-        const newUid = window.roamAlphaAPI.util.generateUID();
-        (0, writes_1.createBlock)({
-            parentUid: pageUid,
-            order,
-            node: { text: id, uid: newUid },
-        });
-        return newUid;
-    }, [pageUid, uid, id, toggleable]);
-    const childUids = Object.fromEntries((0, queries_1.getShallowTreeByParentUid)(parentUid).map(({ text, uid }) => [
-        text.toLowerCase().trim(),
-        uid,
-    ]));
-    const [enabled, setEnabled] = (0, react_1.useState)(!toggleable || !!parentUid);
-    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)(enabled && fields.length && typeof toggleable !== "string"
-        ? fields[0].title
-        : "enabled");
-    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
-    return (react_1.default.createElement(core_1.Tabs, { vertical: true, id: `${id}-field-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true },
-        toggleable && (react_1.default.createElement(core_1.Tab, { id: "enabled", title: "enabled", panel: selectedTabId === "enabled" ? (react_1.default.createElement(ToggleablePanel, { id: id, uid: uid, pageUid: pageUid, extensionId: extensionId, enabled: enabled, order: order, toggleable: toggleable, setUid: setUid, setEnabled: setEnabled, onEnable: onEnable, onDisable: onDisable })) : undefined })),
-        fields.map((field, i) => {
-            const { type, title, defaultValue } = field;
-            const Panel = Panels[type];
-            return (react_1.default.createElement(core_1.Tab, { id: title, key: title, title: (0, idToTitle_1.default)(title), disabled: !enabled, panel: react_1.default.createElement(Panel, Object.assign({}, field, { 
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore 4.3.0
-                    defaultValue: defaultValue, order: i, parentUid: parentUid, uid: childUids[title.toLowerCase()] })) }));
-        })));
-};
-const ConfigPage = ({ id, config, pageUid, }) => {
-    var _a;
-    const userTabs = config.tabs.filter((t) => t.fields.length || t.toggleable);
-    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)((_a = userTabs[0]) === null || _a === void 0 ? void 0 : _a.id);
-    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
-    const tree = (0, queries_1.getBasicTreeByParentUid)(pageUid);
-    const [currentVersion, setCurrentVersion] = (0, react_1.useState)("");
-    const [experimentalMode, setExperimentalMode] = (0, react_1.useState)(!!(0, localStorageGet_1.default)("experimental"));
-    const titleRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        if (config.versioning) {
-            (0, dom_1.addOldRoamJSDependency)("versioning");
-            const scriptVersionMatch = (_b = (_a = window.roamjs) === null || _a === void 0 ? void 0 : _a.version) === null || _b === void 0 ? void 0 : _b[id];
-            if (scriptVersionMatch) {
-                setCurrentVersion(scriptVersionMatch);
-            }
-            else {
-                setCurrentVersion("Version Not Found");
-            }
-        }
-        if (userTabs.some((t) => t.development)) {
-            (_c = titleRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener("keydown", (e) => {
-                if (e.ctrlKey &&
-                    e.metaKey &&
-                    e.shiftKey &&
-                    e.altKey &&
-                    e.key === "KeyM") {
-                    const newVal = !(0, localStorageGet_1.default)("experimental");
-                    setExperimentalMode(newVal);
-                    if (newVal)
-                        (0, localStorageSet_1.default)("experimental", "true");
-                    else
-                        (0, localStorageRemove_1.default)("experimental");
-                }
-            });
-        }
-    }, [config.versioning, id, setCurrentVersion, userTabs, titleRef]);
-    const brandColor = tryColor(config.brand);
-    return (react_1.default.createElement(core_1.Card, { style: { color: "#202B33" }, className: "roamjs-config-panel" },
+}`),
+        react_1.default.createElement("div", { ref: containerRef, style: {
+                border: "1px solid #33333333",
+                padding: "8px 0",
+                borderRadius: 4,
+            }, className: "roamjs-config-blocks" })));
+};
+const CustomPanel = ({ description, title, uid: inputUid, options: { component: Component }, parentUid, defaultValue = [], order, }) => {
+    const uid = (0, react_1.useMemo)(() => {
+        if (inputUid)
+            return inputUid;
+        const newUid = window.roamAlphaAPI.util.generateUID();
+        (0, writes_1.createBlock)({ node: { text: title, uid: newUid }, parentUid, order });
+        return newUid;
+    }, [inputUid]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Label, null,
+            (0, idToTitle_1.default)(title),
+            react_1.default.createElement(Description_1.default, { description: description })),
+        react_1.default.createElement(Component, { uid: uid, parentUid: parentUid, title: title, defaultValue: defaultValue })));
+};
+const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId, setUid, uid, toggleable, onEnable, onDisable, }) => {
+    const uidRef = (0, react_1.useRef)(uid);
+    const isPremium = (0, react_1.useMemo)(() => toggleable !== true, [toggleable]);
+    const dev = (0, react_1.useMemo)(() => ["dev", "ngrok", "localhost"].some((s) => (process.env.API_URL || "").includes(s))
+        ? "&dev=true"
+        : "", []);
+    const [pricingMessage, setPricingMessage] = (0, react_1.useState)("");
+    const [productDescription, setProductDescription] = (0, react_1.useState)("");
+    const [error, setError] = (0, react_1.useState)("");
+    const [loading, setLoading] = (0, react_1.useState)(isPremium);
+    const [alertLoading, setAlertLoading] = (0, react_1.useState)(false);
+    const enableCallback = (0, react_1.useCallback)((checked, uid) => {
+        setEnabled(checked);
+        if (checked) {
+            (0, writes_1.createBlock)({
+                parentUid: pageUid,
+                order,
+                node: { text: id },
+            })
+                .then((newUid) => {
+                setUid(newUid);
+                uidRef.current = newUid;
+            })
+                .then(() => onEnable === null || onEnable === void 0 ? void 0 : onEnable());
+        }
+        else {
+            (0, writes_1.deleteBlock)(uid)
+                .then(() => {
+                setUid("");
+                uidRef.current = "";
+            })
+                .then(() => onDisable === null || onDisable === void 0 ? void 0 : onDisable());
+        }
+    }, [setUid, setEnabled, id, pageUid, order, onEnable, onDisable]);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const intervalListener = (0, react_1.useRef)(0);
+    const catchError = (0, react_1.useCallback)((e) => { var _a, _b, _c; return setError(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || ((_c = e.response) === null || _c === void 0 ? void 0 : _c.data) || e.message); }, [setError]);
+    (0, react_1.useEffect)(() => {
+        if (isPremium) {
+            axios_1.default
+                .get(`https://lambda.roamjs.com/price?extensionId=${extensionId}${dev}`)
+                .then((r) => {
+                setPricingMessage(`$${r.data.price / 100}${r.data.perUse ? " per use" : ""}${r.data.isMonthly ? " per month" : " per year"}`);
+                setProductDescription(r.data.description || "No extension specific description found.");
+            })
+                .catch(catchError);
+        }
+    }, [isPremium, setPricingMessage, setProductDescription, dev]);
+    const checkSubscription = (0, react_1.useCallback)((token) => {
+        setLoading(true);
+        setError("");
+        setEnabled(false);
+        (token
+            ? axios_1.default
+                .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, {
+                headers: { Authorization: (0, getAuthorizationHeader_1.default)() },
+            })
+                .then((r) => {
+                if (!r.data.success && uidRef.current) {
+                    enableCallback(false, uidRef.current);
+                }
+                else if (r.data.success && !uidRef.current) {
+                    enableCallback(true, uidRef.current);
+                }
+                else {
+                    setEnabled(r.data.success);
+                }
+            })
+            : Promise.reject(new Error(`Must set a RoamJS token in order to use these features. To set your RoamJS token, open the Roam command palette and enter "Set RoamJS Token"`)))
+            .catch((e) => {
+            if (uidRef.current)
+                enableCallback(false, uidRef.current);
+            catchError(e);
+        })
+            .finally(() => setLoading(false));
+    }, [catchError, extensionId, dev, uidRef, enableCallback, setLoading, setError]);
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isPremium) {
+            (0, TokenDialog_1.checkRoamJSTokenWarning)().then(checkSubscription);
+            if (containerRef.current)
+                (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("roamjs:token:set", ((e) => checkSubscription(e.detail)));
+        }
+        return () => clearTimeout(intervalListener.current);
+    }, [isPremium, checkSubscription]);
+    return (react_1.default.createElement("div", { id: "roamjs-toggleable-container", ref: containerRef },
+        loading ? (react_1.default.createElement("div", { style: {
+                whiteSpace: "pre-wrap",
+                display: "flex",
+                justifyContent: "space-between",
+            } },
+            react_1.default.createElement("span", { style: { opacity: 0.75 } },
+                "Checking to see if you are subscribed to RoamJS",
+                " ",
+                (0, idToTitle_1.default)(extensionId),
+                "..."),
+            react_1.default.createElement(core_1.Spinner, { size: 16 }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(core_1.Switch, { labelElement: "Enabled", checked: enabled, onChange: (e) => isPremium
+                    ? setIsOpen(true)
+                    : enableCallback(e.target.checked, uid) }),
+            react_1.default.createElement("p", { style: { whiteSpace: "pre-wrap" } }, isPremium &&
+                (enabled
+                    ? `You have sucessfully subscribed!\n\nConfigure this feature with the tabs on the left.`
+                    : `This is a premium feature and will require a paid subscription to enable.\n\n${productDescription}`)))),
+        react_1.default.createElement("p", { style: { color: "red" } }, error),
+        react_1.default.createElement(core_1.Alert, { isOpen: isOpen, onConfirm: () => {
+                setAlertLoading(true);
+                setError("");
+                if (enabled) {
+                    axios_1.default
+                        .post(`https://lambda.roamjs.com/unsubscribe`, {
+                        extensionId,
+                        dev: !!dev,
+                    }, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
+                        .then(() => {
+                        enableCallback(false, uid);
+                    })
+                        .catch(catchError)
+                        .finally(() => {
+                        setAlertLoading(false);
+                        setIsOpen(false);
+                    });
+                }
+                else {
+                    axios_1.default
+                        .post(`https://lambda.roamjs.com/subscribe`, {
+                        extensionId,
+                        dev: !!dev,
+                    }, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
+                        .then((r) => {
+                        if (r.data.url) {
+                            const width = 600;
+                            const height = 525;
+                            const left = window.screenX + (window.innerWidth - width) / 2;
+                            const top = window.screenY + (window.innerHeight - height) / 2;
+                            window.open(r.data.url, `roamjs:roamjs:stripe`, `left=${left},top=${top},width=${width},height=${height},status=1`);
+                            const authInterval = () => {
+                                axios_1.default
+                                    .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
+                                    .then((r) => {
+                                    if (r.data.success) {
+                                        enableCallback(true, uid);
+                                        setAlertLoading(false);
+                                        setIsOpen(false);
+                                    }
+                                    else {
+                                        intervalListener.current = window.setTimeout(authInterval, 2000);
+                                    }
+                                })
+                                    .catch((e) => {
+                                    catchError(e);
+                                    setAlertLoading(false);
+                                    setIsOpen(false);
+                                });
+                            };
+                            authInterval();
+                        }
+                        else if (r.data.success) {
+                            enableCallback(true, uid);
+                            setAlertLoading(false);
+                            setIsOpen(false);
+                        }
+                        else {
+                            setError("Something went wrong with the subscription. Please contact support@roamjs.com for help!");
+                            setAlertLoading(false);
+                            setIsOpen(false);
+                        }
+                    })
+                        .catch(catchError)
+                        .finally(() => {
+                        setAlertLoading(false);
+                        setIsOpen(false);
+                    });
+                }
+            }, confirmButtonText: "Submit", cancelButtonText: "Cancel", intent: core_1.Intent.PRIMARY, loading: alertLoading, onCancel: () => setIsOpen(false) }, enabled
+            ? `By clicking submit below, you will unsubscribe from the premium features of the RoamJS Extension: ${(0, idToTitle_1.default)(extensionId)}`
+            : `By clicking submit below, you will subscribe to the premium features of the RoamJS Extension: ${(0, idToTitle_1.default)(extensionId)} for ${pricingMessage}. A window may appear for checkout if this is your first premium extension`)));
+};
+const Panels = {
+    text: TextPanel,
+    time: TimePanel,
+    number: NumberPanel,
+    flag: FlagPanel,
+    pages: PagesPanel,
+    oauth: OauthPanel,
+    multitext: MultiTextPanel,
+    select: SelectPanel,
+    block: BlockPanel,
+    blocks: BlocksPanel,
+    custom: CustomPanel,
+};
+const tryColor = (s) => {
+    if (!s)
+        return undefined;
+    try {
+        return (0, color_1.default)(s);
+    }
+    catch (e) {
+        return undefined;
+    }
+};
+const FieldTabs = ({ id, fields, uid: initialUid, pageUid, order, toggleable, extensionId, onEnable, onDisable, }) => {
+    const [uid, setUid] = (0, react_1.useState)(initialUid);
+    const parentUid = (0, react_1.useMemo)(() => {
+        if (/home/i.test(id)) {
+            return pageUid;
+        }
+        if (uid) {
+            return uid;
+        }
+        if (toggleable) {
+            return "";
+        }
+        const newUid = window.roamAlphaAPI.util.generateUID();
+        (0, writes_1.createBlock)({
+            parentUid: pageUid,
+            order,
+            node: { text: id, uid: newUid },
+        });
+        return newUid;
+    }, [pageUid, uid, id, toggleable]);
+    const childUids = Object.fromEntries((0, queries_1.getShallowTreeByParentUid)(parentUid).map(({ text, uid }) => [
+        text.toLowerCase().trim(),
+        uid,
+    ]));
+    const [enabled, setEnabled] = (0, react_1.useState)(!toggleable || !!parentUid);
+    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)(enabled && fields.length && typeof toggleable !== "string"
+        ? fields[0].title
+        : "enabled");
+    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
+    return (react_1.default.createElement(core_1.Tabs, { vertical: true, id: `${id}-field-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true },
+        toggleable && (react_1.default.createElement(core_1.Tab, { id: "enabled", title: "enabled", panel: selectedTabId === "enabled" ? (react_1.default.createElement(ToggleablePanel, { id: id, uid: uid, pageUid: pageUid, extensionId: extensionId, enabled: enabled, order: order, toggleable: toggleable, setUid: setUid, setEnabled: setEnabled, onEnable: onEnable, onDisable: onDisable })) : undefined })),
+        fields.map((field, i) => {
+            const { type, title, defaultValue } = field;
+            const Panel = Panels[type];
+            return (react_1.default.createElement(core_1.Tab, { id: title, key: title, title: (0, idToTitle_1.default)(title), disabled: !enabled, panel: react_1.default.createElement(Panel, Object.assign({}, field, { 
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore 4.3.0
+                    defaultValue: defaultValue, order: i, parentUid: parentUid, uid: childUids[title.toLowerCase()] })) }));
+        })));
+};
+const ConfigPage = ({ id, config, pageUid, }) => {
+    var _a;
+    const userTabs = config.tabs.filter((t) => t.fields.length || t.toggleable);
+    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)((_a = userTabs[0]) === null || _a === void 0 ? void 0 : _a.id);
+    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
+    const tree = (0, queries_1.getBasicTreeByParentUid)(pageUid);
+    const [currentVersion, setCurrentVersion] = (0, react_1.useState)("");
+    const [experimentalMode, setExperimentalMode] = (0, react_1.useState)(!!(0, localStorageGet_1.default)("experimental"));
+    const titleRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        if (config.versioning) {
+            (0, dom_1.addOldRoamJSDependency)("versioning");
+            const scriptVersionMatch = (_b = (_a = window.roamjs) === null || _a === void 0 ? void 0 : _a.version) === null || _b === void 0 ? void 0 : _b[id];
+            if (scriptVersionMatch) {
+                setCurrentVersion(scriptVersionMatch);
+            }
+            else {
+                setCurrentVersion("Version Not Found");
+            }
+        }
+        if (userTabs.some((t) => t.development)) {
+            (_c = titleRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener("keydown", (e) => {
+                if (e.ctrlKey &&
+                    e.metaKey &&
+                    e.shiftKey &&
+                    e.altKey &&
+                    e.key === "KeyM") {
+                    const newVal = !(0, localStorageGet_1.default)("experimental");
+                    setExperimentalMode(newVal);
+                    if (newVal)
+                        (0, localStorageSet_1.default)("experimental", "true");
+                    else
+                        (0, localStorageRemove_1.default)("experimental");
+                }
+            });
+        }
+    }, [config.versioning, id, setCurrentVersion, userTabs, titleRef]);
+    const brandColor = tryColor(config.brand);
+    return (react_1.default.createElement(core_1.Card, { style: { color: "#202B33" }, className: "roamjs-config-panel" },
         react_1.default.createElement("style", null, `.roamjs-config-panel .bp3-tab-panel {
   width: 100%;
   position: relative;
@@ -650,7 +650,7 @@ const ConfigPage = ({ id, config, pageUid, }) => {
 .roamjs-external-login {
   margin-bottom: 16px;
 }
-${brandColor &&
+${brandColor &&
             `div.bp3-tab[aria-selected="true"], div.bp3-tab:not([aria-disabled="true"]):hover {
   color: ${brandColor.toString()};
 }
@@ -660,124 +660,124 @@ ${brandColor &&
 }
 
 .bp3-tabs.bp3-vertical>.bp3-tab-list .bp3-tab-indicator-wrapper div.bp3-tab-indicator {
-  background-color: ${brandColor
-                .alpha(0.2)
-                .lightness(brandColor.lightness() + 5)
+  background-color: ${brandColor
+                .alpha(0.2)
+                .lightness(brandColor.lightness() + 5)
                 .toString()};
 }
 
 .bp3-control input:checked ~ span.bp3-control-indicator {
-  background-color: ${brandColor
-                .lightness(brandColor.lightness() + 5)
+  background-color: ${brandColor
+                .lightness(brandColor.lightness() + 5)
                 .toString()}
-}`}`),
-        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" }, ref: titleRef, tabIndex: -1 },
-            react_1.default.createElement("h4", { style: { padding: 4 } },
-                (0, idToTitle_1.default)(id),
-                " Configuration"),
-            currentVersion && (react_1.default.createElement("span", null,
-                react_1.default.createElement("span", { style: { color: "#cccccc", fontSize: 8 } },
-                    "v",
-                    currentVersion),
-                react_1.default.createElement(core_1.Button, { icon: "git-branch", minimal: true, onClick: () => {
-                        var _a, _b;
-                        return ((_a = window.roamjs) === null || _a === void 0 ? void 0 : _a.extension.versioning) &&
-                            ((_b = window.roamjs) === null || _b === void 0 ? void 0 : _b.extension.versioning.switch({
-                                id,
-                                currentVersion,
-                            }));
-                    }, style: { marginLeft: 4 } })))),
-        react_1.default.createElement("style", null, `.roamjs-config-tabs {\npadding: 4px;\n}`),
-        react_1.default.createElement(core_1.Tabs, { id: `${id}-config-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true, className: "roamjs-config-tabs" }, userTabs.map(({ id: tabId, fields, toggleable, development = false, onEnable, onDisable, }, i) => {
-            var _a;
-            return (react_1.default.createElement(core_1.Tab, { id: tabId, key: tabId, title: (0, idToTitle_1.default)(tabId), disabled: development && !experimentalMode, panel: react_1.default.createElement(FieldTabs, { id: tabId, extensionId: id, fields: fields, uid: ((_a = tree.find((t) => new RegExp(tabId, "i").test(t.text))) === null || _a === void 0 ? void 0 : _a.uid) || "", pageUid: pageUid, order: i, toggleable: toggleable, onEnable: onEnable, onDisable: onDisable }) }));
-        }))));
-};
-const fieldsToChildren = (t) => t.fields
-    .filter((f) => !!f.defaultValue)
-    .map((f) => {
-    var _a;
-    return ({
-        text: f.title,
-        children: f.type === "flag"
-            ? []
-            : f.type === "custom"
-                ? f.defaultValue || []
-                : f.type === "pages" || f.type === "multitext"
-                    ? (_a = f.defaultValue) === null || _a === void 0 ? void 0 : _a.map((v) => ({ text: v }))
-                    : f.type === "block"
-                        ? f.defaultValue
-                            ? [f.defaultValue]
-                            : []
-                        : [{ text: `${f.defaultValue}` }],
-    });
-});
-const createConfigPage = ({ title, config, }) => {
-    const homeTab = config.tabs.find((t) => /home/i.test(t.id));
-    const rawTree = [
-        ...(homeTab ? fieldsToChildren(homeTab) : []),
-        ...config.tabs
-            .filter((t) => !/home/i.test(t.id) && !t.toggleable && !t.development)
-            .map((t) => ({
-            text: t.id,
-            children: fieldsToChildren(t),
-        })),
-    ];
-    return (0, writes_1.createPage)({
-        title,
-        tree: rawTree.length ? rawTree : [{ text: " " }],
-    });
-};
-const render = ({ h, title, pageUid = (0, queries_1.getPageUidByPageTitle)(title), config, }) => {
-    var _a, _b;
-    const uid = (0, queries_1.getPageUidByPageTitle)(title);
-    const attribute = `data-roamjs-${uid}`;
-    const containerParent = (_a = h.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
-    if (containerParent && !containerParent.hasAttribute(attribute)) {
-        containerParent.setAttribute(attribute, "true");
-        const parent = document.createElement("div");
-        const configPageId = title.split("/").slice(-1)[0];
-        parent.id = `${configPageId}-config`;
-        containerParent.insertBefore(parent, ((_b = h.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling) || null);
-        react_dom_1.default.render(react_1.default.createElement(ConfigPage, { id: configPageId, config: config, pageUid: pageUid }), parent);
-    }
-};
-exports.render = render;
-const createConfigObserver = ({ title, config, }) => (0, tslib_1.__awaiter)(void 0, void 0, void 0, function* () {
-    const pageUid = (0, queries_1.getPageUidByPageTitle)(title) ||
-        (yield createConfigPage({
-            title,
-            config,
-        }));
-    if (config.tabs.length) {
-        if (config.tabs.some((t) => t.toggleable === "premium"))
-            (0, TokenDialog_1.addTokenDialogCommand)({
-                onEnter: (token) => {
-                    const toggleablePanel = document.getElementById("roamjs-toggleable-container");
-                    if (toggleablePanel)
-                        toggleablePanel.dispatchEvent(new CustomEvent("roamjs:token:set", { detail: token }));
-                },
-            });
-        (0, dom_1.createHTMLObserver)({
-            className: "rm-title-display",
-            tag: "H1",
-            callback: (d) => {
-                const h = d;
-                if (h.innerText === title) {
-                    (0, exports.render)({
-                        pageUid,
-                        config,
-                        title,
-                        h,
-                    });
-                }
-            },
-        });
-    }
-    return {
-        pageUid,
-    };
-});
-exports.createConfigObserver = createConfigObserver;
-exports.default = ConfigPage;
+}`}`),
+        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" }, ref: titleRef, tabIndex: -1 },
+            react_1.default.createElement("h4", { style: { padding: 4 } },
+                (0, idToTitle_1.default)(id),
+                " Configuration"),
+            currentVersion && (react_1.default.createElement("span", null,
+                react_1.default.createElement("span", { style: { color: "#cccccc", fontSize: 8 } },
+                    "v",
+                    currentVersion),
+                react_1.default.createElement(core_1.Button, { icon: "git-branch", minimal: true, onClick: () => {
+                        var _a, _b;
+                        return ((_a = window.roamjs) === null || _a === void 0 ? void 0 : _a.extension.versioning) &&
+                            ((_b = window.roamjs) === null || _b === void 0 ? void 0 : _b.extension.versioning.switch({
+                                id,
+                                currentVersion,
+                            }));
+                    }, style: { marginLeft: 4 } })))),
+        react_1.default.createElement("style", null, `.roamjs-config-tabs {\npadding: 4px;\n}`),
+        react_1.default.createElement(core_1.Tabs, { id: `${id}-config-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true, className: "roamjs-config-tabs" }, userTabs.map(({ id: tabId, fields, toggleable, development = false, onEnable, onDisable, }, i) => {
+            var _a;
+            return (react_1.default.createElement(core_1.Tab, { id: tabId, key: tabId, title: (0, idToTitle_1.default)(tabId), disabled: development && !experimentalMode, panel: react_1.default.createElement(FieldTabs, { id: tabId, extensionId: id, fields: fields, uid: ((_a = tree.find((t) => new RegExp(tabId, "i").test(t.text))) === null || _a === void 0 ? void 0 : _a.uid) || "", pageUid: pageUid, order: i, toggleable: toggleable, onEnable: onEnable, onDisable: onDisable }) }));
+        }))));
+};
+const fieldsToChildren = (t) => t.fields
+    .filter((f) => !!f.defaultValue)
+    .map((f) => {
+    var _a;
+    return ({
+        text: f.title,
+        children: f.type === "flag"
+            ? []
+            : f.type === "custom"
+                ? f.defaultValue || []
+                : f.type === "pages" || f.type === "multitext"
+                    ? (_a = f.defaultValue) === null || _a === void 0 ? void 0 : _a.map((v) => ({ text: v }))
+                    : f.type === "block"
+                        ? f.defaultValue
+                            ? [f.defaultValue]
+                            : []
+                        : [{ text: `${f.defaultValue}` }],
+    });
+});
+const createConfigPage = ({ title, config, }) => {
+    const homeTab = config.tabs.find((t) => /home/i.test(t.id));
+    const rawTree = [
+        ...(homeTab ? fieldsToChildren(homeTab) : []),
+        ...config.tabs
+            .filter((t) => !/home/i.test(t.id) && !t.toggleable && !t.development)
+            .map((t) => ({
+            text: t.id,
+            children: fieldsToChildren(t),
+        })),
+    ];
+    return (0, writes_1.createPage)({
+        title,
+        tree: rawTree.length ? rawTree : [{ text: " " }],
+    });
+};
+const render = ({ h, title, pageUid = (0, queries_1.getPageUidByPageTitle)(title), config, }) => {
+    var _a, _b;
+    const uid = (0, queries_1.getPageUidByPageTitle)(title);
+    const attribute = `data-roamjs-${uid}`;
+    const containerParent = (_a = h.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (containerParent && !containerParent.hasAttribute(attribute)) {
+        containerParent.setAttribute(attribute, "true");
+        const parent = document.createElement("div");
+        const configPageId = title.split("/").slice(-1)[0];
+        parent.id = `${configPageId}-config`;
+        containerParent.insertBefore(parent, ((_b = h.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling) || null);
+        react_dom_1.default.render(react_1.default.createElement(ConfigPage, { id: configPageId, config: config, pageUid: pageUid }), parent);
+    }
+};
+exports.render = render;
+const createConfigObserver = ({ title, config, }) => (0, tslib_1.__awaiter)(void 0, void 0, void 0, function* () {
+    const pageUid = (0, queries_1.getPageUidByPageTitle)(title) ||
+        (yield createConfigPage({
+            title,
+            config,
+        }));
+    if (config.tabs.length) {
+        if (config.tabs.some((t) => t.toggleable === "premium"))
+            (0, TokenDialog_1.addTokenDialogCommand)({
+                onEnter: (token) => {
+                    const toggleablePanel = document.getElementById("roamjs-toggleable-container");
+                    if (toggleablePanel)
+                        toggleablePanel.dispatchEvent(new CustomEvent("roamjs:token:set", { detail: token }));
+                },
+            });
+        (0, dom_1.createHTMLObserver)({
+            className: "rm-title-display",
+            tag: "H1",
+            callback: (d) => {
+                const h = d;
+                if (h.innerText === title) {
+                    (0, exports.render)({
+                        pageUid,
+                        config,
+                        title,
+                        h,
+                    });
+                }
+            },
+        });
+    }
+    return {
+        pageUid,
+    };
+});
+exports.createConfigObserver = createConfigObserver;
+exports.default = ConfigPage;
 //# sourceMappingURL=ConfigPage.js.map