roamjs-components 0.42.4 → 0.43.0

package/components/ConfigPage.js

@@ -1,30 +1,33 @@
-import { __awaiter } from "tslib";
-import { Alert, Button, Card, Checkbox, InputGroup, Intent, Label, NumericInput, Switch, Tab, Tabs, } from "@blueprintjs/core";
-import { TimePicker } from "@blueprintjs/datetime";
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import ReactDOM from "react-dom";
-import { addOldRoamJSDependency, createHTMLObserver } from "../dom";
-import { createBlock, createPage, deleteBlock } from "../writes";
-import { getBasicTreeByParentUid, getFirstChildUidByBlockUid, getPageUidByPageTitle, getShallowTreeByParentUid, getTextByBlockUid, } from "../queries";
-import localStorageGet from "../util/localStorageGet";
-import localStorageRemove from "../util/localStorageRemove";
-import localStorageSet from "../util/localStorageSet";
-import startOfDay from "date-fns/startOfDay";
-import Description from "./Description";
-import ExternalLogin from "./ExternalLogin";
-import idToTitle from "../util/idToTitle";
-import MenuItemSelect from "./MenuItemSelect";
-import PageInput from "./PageInput";
-import format from "date-fns/format";
-import axios from "axios";
-import Color from "color";
-import { useRoamJSTokenWarning } from "..";
-import getAuthorizationHeader from "../util/getAuthorizationHeader";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfigObserver = 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 __1 = require("..");
+const getAuthorizationHeader_1 = (0, tslib_1.__importDefault)(require("../util/getAuthorizationHeader"));
 const useSingleChildValue = ({ defaultValue, uid: initialUid, title, parentUid, order, transform, toStr, }) => {
-    const [uid, setUid] = useState(initialUid);
-    const [valueUid, setValueUid] = useState(uid && getFirstChildUidByBlockUid(uid));
-    const [value, setValue] = useState((valueUid && transform(getTextByBlockUid(valueUid))) || defaultValue);
-    const onChange = useCallback((v) => {
+    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({
@@ -57,16 +60,16 @@ const useSingleChildValue = ({ defaultValue, uid: initialUid, title, parentUid,
     return { value, onChange };
 };
 const MultiChildPanel = ({ uid: initialUid, title, description, order, parentUid, InputComponent, }) => {
-    const [uid, setUid] = useState(initialUid);
-    const [texts, setTexts] = useState(() => uid ? getShallowTreeByParentUid(uid) : []);
-    const [value, setValue] = useState("");
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Label, null,
-            idToTitle(title),
-            React.createElement(Description, { description: description }),
-            React.createElement("div", { style: { display: "flex" } },
-                React.createElement(InputComponent, { value: value, setValue: setValue }),
-                React.createElement(Button, { icon: "plus", minimal: true, disabled: !value, onClick: () => {
+    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({
@@ -89,17 +92,17 @@ const MultiChildPanel = ({ uid: initialUid, title, description, order, parentUid
                         setTexts([...texts, { text: value, uid: valueUid }]);
                         setValue("");
                     } }))),
-        texts.map((p) => (React.createElement("div", { key: p.uid, style: {
+        texts.map((p) => (react_1.default.createElement("div", { key: p.uid, style: {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "space-between",
             } },
-            React.createElement("span", { style: {
+            react_1.default.createElement("span", { style: {
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                 } }, p.text),
-            React.createElement(Button, { icon: "trash", minimal: true, onClick: () => {
+            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));
                 } }))))));
@@ -114,12 +117,12 @@ const TextPanel = ({ title, uid, parentUid, order, description, defaultValue = "
         transform: (s) => s,
         toStr: (s) => s,
     });
-    return (React.createElement(Label, null,
-        idToTitle(title),
-        React.createElement(Description, { description: description }),
-        React.createElement(InputGroup, { value: value, onChange: (e) => onChange(e.target.value) })));
+    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 = startOfDay(new Date()), }) => {
+const TimePanel = ({ title, uid, parentUid, order, description, defaultValue = (0, startOfDay_1.default)(new Date()), }) => {
     const { value, onChange } = useSingleChildValue({
         defaultValue,
         title,
@@ -133,12 +136,12 @@ const TimePanel = ({ title, uid, parentUid, order, description, defaultValue = s
             d.setMinutes(Number(minutes));
             return d;
         },
-        toStr: (v) => format(v, "HH:mm"),
+        toStr: (v) => (0, format_1.default)(v, "HH:mm"),
     });
-    return (React.createElement(Label, null,
-        idToTitle(title),
-        React.createElement(Description, { description: description }),
-        React.createElement(TimePicker, { value: value, onChange: onChange, showArrowButtons: true })));
+    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({
@@ -150,10 +153,10 @@ const NumberPanel = ({ title, uid, parentUid, order, description, defaultValue =
         transform: parseInt,
         toStr: (v) => `${v}`,
     });
-    return (React.createElement(Label, null,
-        idToTitle(title),
-        React.createElement(Description, { description: description }),
-        React.createElement(NumericInput, { value: value, onValueChange: onChange })));
+    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({
@@ -165,14 +168,14 @@ const SelectPanel = ({ title, uid, parentUid, order, description, defaultValue =
         transform: (s) => s,
         toStr: (s) => s,
     });
-    return (React.createElement(Label, null,
-        idToTitle(title),
-        React.createElement(Description, { description: description }),
-        React.createElement(MenuItemSelect, { activeItem: value, onItemSelect: (e) => onChange(e), items: items })));
+    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] = useState(initialUid);
-    return (React.createElement(Checkbox, { checked: !!uid, onChange: (e) => {
+    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) {
@@ -188,23 +191,23 @@ const FlagPanel = ({ title, uid: initialUid, parentUid, order, description, opti
                 setUid("");
             }
             (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, checked);
-        }, labelElement: React.createElement(React.Fragment, null,
-            idToTitle(title),
-            React.createElement(Description, { description: description })) }));
+        }, 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.createElement(MultiChildPanel, Object.assign({}, props, { InputComponent: ({ value, setValue }) => (React.createElement(InputGroup, { value: value, onChange: (e) => setValue(e.target.value) })) })));
+    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.createElement(MultiChildPanel, Object.assign({}, props, { InputComponent: (inputProps) => (React.createElement(PageInput, Object.assign({ extra: ["{all}"] }, inputProps))) })));
+    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] = useState(!!localStorageGet(key));
-    const [accounts, setAccounts] = useState(() => useLocal
-        ? JSON.parse(localStorageGet(key))
+    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
-            ? getBasicTreeByParentUid(uid).map((v) => {
+            ? (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",
@@ -213,17 +216,17 @@ const OauthPanel = ({ uid, parentUid, options }) => {
                 });
             })
             : []);
-    const onCheck = useCallback((e) => {
+    const onCheck = (0, react_1.useCallback)((e) => {
         const checked = e.target.checked;
         setUseLocal(checked);
         if (checked) {
             if (uid) {
-                getShallowTreeByParentUid(uid).forEach(({ uid: u }) => deleteBlock(u));
+                (0, queries_1.getShallowTreeByParentUid)(uid).forEach(({ uid: u }) => (0, writes_1.deleteBlock)(u));
             }
-            localStorageSet(key, JSON.stringify(accounts));
+            (0, localStorageSet_1.default)(key, JSON.stringify(accounts));
         }
         else {
-            localStorageRemove(key);
+            (0, localStorageRemove_1.default)(key);
             if (uid) {
                 accounts.forEach(({ text, uid: u, data }, order) => {
                     window.roamAlphaAPI.createBlock({
@@ -238,42 +241,42 @@ const OauthPanel = ({ uid, parentUid, options }) => {
             }
         }
     }, [setUseLocal, accounts, uid, key]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Checkbox, { labelElement: React.createElement(React.Fragment, null,
+    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.createElement(Description, { 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.createElement(ExternalLogin, Object.assign({ useLocal: useLocal, onSuccess: (acc) => setAccounts([...accounts, acc]), parentUid: parentUid, loggedIn: !!accounts.length }, options)),
-        !!accounts.length && (React.createElement(React.Fragment, null,
-            React.createElement("h5", { style: { marginTop: 8 } }, "Accounts"),
-            React.createElement("hr", null),
-            React.createElement("ul", { style: { marginTop: 8, padding: 0 } }, accounts.map((act) => (React.createElement("li", { key: act.uid, style: {
+                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.createElement("span", { style: { minWidth: 192 } }, act.text),
-                React.createElement(Button, { text: "Log Out", onClick: () => {
+                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(localStorageGet(key));
-                            localStorageSet(key, JSON.stringify(accts.filter((a) => act.uid !== a.uid)));
+                            const accts = JSON.parse((0, localStorageGet_1.default)(key));
+                            (0, localStorageSet_1.default)(key, JSON.stringify(accts.filter((a) => act.uid !== a.uid)));
                         }
                         else {
-                            deleteBlock(act.uid);
+                            (0, writes_1.deleteBlock)(act.uid);
                         }
                         setAccounts(accounts.filter((a) => act.uid !== a.uid));
                     } })))))))));
 };
 const BlockPanel = ({ uid: initialUid, parentUid, title, defaultValue, description, }) => {
-    const containerRef = useRef(null);
-    useEffect(() => {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
         if (containerRef.current) {
             const el = containerRef.current;
             (initialUid
                 ? Promise.resolve(initialUid)
-                : createBlock({ node: { text: title, children: [] }, parentUid }))
-                .then((formatUid) => getFirstChildUidByBlockUid(formatUid) ||
-                createBlock({
+                : (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,
                 }))
@@ -285,73 +288,77 @@ const BlockPanel = ({ uid: initialUid, parentUid, title, defaultValue, descripti
             });
         }
     }, [containerRef, defaultValue]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Label, null,
-            idToTitle(title),
-            React.createElement(Description, { description: description })),
-        React.createElement("div", { ref: containerRef, style: {
+    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 CustomPanel = ({ description, title, uid: inputUid, options: { component: Component }, parentUid, defaultValue = [], order, }) => {
-    const uid = useMemo(() => {
+    const uid = (0, react_1.useMemo)(() => {
         if (inputUid)
             return inputUid;
         const newUid = window.roamAlphaAPI.util.generateUID();
-        createBlock({ node: { text: title, uid: newUid }, parentUid, order });
+        (0, writes_1.createBlock)({ node: { text: title, uid: newUid }, parentUid, order });
         return newUid;
     }, [inputUid]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Label, null,
-            idToTitle(title),
-            React.createElement(Description, { description: description })),
-        React.createElement(Component, { uid: uid, parentUid: parentUid, title: title, defaultValue: 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(Component, { uid: uid, parentUid: parentUid, title: title, defaultValue: defaultValue })));
 };
 const RoamJSTokenWarning = () => {
-    useRoamJSTokenWarning();
-    return React.createElement(React.Fragment, null);
+    (0, __1.useRoamJSTokenWarning)();
+    return react_1.default.createElement(react_1.default.Fragment, null);
 };
-const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId, setUid, uid, toggleable, }) => {
-    const initialUid = useRef(uid);
-    const isPremium = useMemo(() => toggleable !== true, [toggleable]);
-    const dev = useMemo(() => ["dev", "ngrok", "localhost"].some((s) => (process.env.API_URL || "").includes(s))
+const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId, setUid, uid, toggleable, onEnable, onDisable, }) => {
+    const initialUid = (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] = useState("");
-    const [productDescription, setProductDescription] = useState("");
-    const [error, setError] = useState("");
-    const [loading, setLoading] = useState(false);
-    const enableCallback = useCallback((checked, uid) => {
+    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)(false);
+    const enableCallback = (0, react_1.useCallback)((checked, uid) => {
         setEnabled(checked);
         if (checked) {
-            createBlock({
+            (0, writes_1.createBlock)({
                 parentUid: pageUid,
                 order,
                 node: { text: id },
-            }).then((newUid) => setUid(newUid));
+            })
+                .then((newUid) => setUid(newUid))
+                .then(() => onEnable === null || onEnable === void 0 ? void 0 : onEnable());
         }
         else {
-            deleteBlock(uid).then(() => setUid(""));
+            (0, writes_1.deleteBlock)(uid)
+                .then(() => setUid(""))
+                .then(() => onDisable === null || onDisable === void 0 ? void 0 : onDisable());
         }
-    }, [setUid, setEnabled, id, pageUid, order]);
-    const [isOpen, setIsOpen] = useState(false);
-    const intervalListener = useRef(0);
-    const catchError = 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]);
-    useEffect(() => {
+    }, [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
+            axios_1.default
                 .get(`https://lambda.roamjs.com/price?extensionId=${extensionId}${dev}`, {
-                headers: { Authorization: getAuthorizationHeader() },
+                headers: { Authorization: (0, getAuthorizationHeader_1.default)() },
             })
                 .then((r) => {
                 setPricingMessage(`$${r.data.price / 100}${r.data.perUse ? " per use" : ""}${r.data.isMonthly ? " per month" : " per year"}`);
                 setProductDescription(r.data.description);
             })
                 .catch(catchError);
-            axios
-                .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, { headers: { Authorization: getAuthorizationHeader() } })
+            axios_1.default
+                .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
                 .then((r) => {
                 if (!r.data.success && initialUid.current) {
                     enableCallback(false, initialUid.current);
@@ -373,25 +380,25 @@ const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId,
         enableCallback,
         setPricingMessage,
     ]);
-    return (React.createElement(React.Fragment, null,
-        isPremium && React.createElement(RoamJSTokenWarning, null),
-        React.createElement(Switch, { labelElement: "Enabled", checked: enabled, onChange: (e) => isPremium
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isPremium && react_1.default.createElement(RoamJSTokenWarning, null),
+        react_1.default.createElement(core_1.Switch, { labelElement: "Enabled", checked: enabled, onChange: (e) => isPremium
                 ? setIsOpen(true)
                 : enableCallback(e.target.checked, uid) }),
-        React.createElement("p", { style: { whiteSpace: "pre-wrap" } }, isPremium &&
+        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.createElement("p", { style: { color: "red" } }, error),
-        React.createElement(Alert, { isOpen: isOpen, onConfirm: () => {
+        react_1.default.createElement("p", { style: { color: "red" } }, error),
+        react_1.default.createElement(core_1.Alert, { isOpen: isOpen, onConfirm: () => {
                 setLoading(true);
                 setError("");
                 if (enabled) {
-                    axios
+                    axios_1.default
                         .post(`https://lambda.roamjs.com/unsubscribe`, {
                         extensionId,
                         dev: !!dev,
-                    }, { headers: { Authorization: getAuthorizationHeader() } })
+                    }, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
                         .then(() => {
                         enableCallback(false, uid);
                     })
@@ -402,11 +409,11 @@ const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId,
                     });
                 }
                 else {
-                    axios
+                    axios_1.default
                         .post(`https://lambda.roamjs.com/subscribe`, {
                         extensionId,
                         dev: !!dev,
-                    }, { headers: { Authorization: getAuthorizationHeader() } })
+                    }, { headers: { Authorization: (0, getAuthorizationHeader_1.default)() } })
                         .then((r) => {
                         if (r.data.url) {
                             const width = 600;
@@ -415,8 +422,8 @@ const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId,
                             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
-                                    .get(`https://lambda.roamjs.com/check?extensionId=${extensionId}${dev}`, { headers: { Authorization: getAuthorizationHeader() } })
+                                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);
@@ -452,9 +459,9 @@ const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId,
                         setIsOpen(false);
                     });
                 }
-            }, confirmButtonText: "Submit", cancelButtonText: "Cancel", intent: Intent.PRIMARY, loading: loading, onCancel: () => setIsOpen(false) }, enabled
-            ? `By clicking submit below, you will unsubscribe from the premium features of the RoamJS Extension: ${idToTitle(extensionId)}`
-            : `By clicking submit below, you will subscribe to the premium features of the RoamJS Extension: ${idToTitle(extensionId)} for ${pricingMessage}. A window may appear for checkout if this is your first premium extension`)));
+            }, confirmButtonText: "Submit", cancelButtonText: "Cancel", intent: core_1.Intent.PRIMARY, loading: loading, 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,
@@ -472,15 +479,15 @@ const tryColor = (s) => {
     if (!s)
         return undefined;
     try {
-        return Color(s);
+        return (0, color_1.default)(s);
     }
     catch (e) {
         return undefined;
     }
 };
-const FieldTabs = ({ id, fields, uid: initialUid, pageUid, order, toggleable, extensionId, }) => {
-    const [uid, setUid] = useState(initialUid);
-    const parentUid = useMemo(() => {
+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;
         }
@@ -491,28 +498,28 @@ const FieldTabs = ({ id, fields, uid: initialUid, pageUid, order, toggleable, ex
             return "";
         }
         const newUid = window.roamAlphaAPI.util.generateUID();
-        createBlock({
+        (0, writes_1.createBlock)({
             parentUid: pageUid,
             order,
             node: { text: id, uid: newUid },
         });
         return newUid;
     }, [pageUid, uid, id, toggleable]);
-    const childUids = Object.fromEntries(getShallowTreeByParentUid(parentUid).map(({ text, uid }) => [
+    const childUids = Object.fromEntries((0, queries_1.getShallowTreeByParentUid)(parentUid).map(({ text, uid }) => [
         text.toLowerCase().trim(),
         uid,
     ]));
-    const [enabled, setEnabled] = useState(!toggleable || !!parentUid);
-    const [selectedTabId, setSelectedTabId] = useState(enabled && fields.length && typeof toggleable !== "string"
+    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 = useCallback((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
-    return (React.createElement(Tabs, { vertical: true, id: `${id}-field-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true },
-        toggleable && (React.createElement(Tab, { id: "enabled", title: "enabled", panel: selectedTabId === "enabled" ? (React.createElement(ToggleablePanel, { id: id, uid: uid, pageUid: pageUid, extensionId: extensionId, enabled: enabled, order: order, toggleable: toggleable, setUid: setUid, setEnabled: setEnabled })) : undefined })),
+    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.createElement(Tab, { id: title, key: title, title: idToTitle(title), disabled: !enabled, panel: React.createElement(Panel, Object.assign({}, field, { 
+            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()] })) }));
@@ -521,14 +528,14 @@ const FieldTabs = ({ id, fields, uid: initialUid, pageUid, order, toggleable, ex
 const ConfigPage = ({ id, config, pageUid, }) => {
     var _a;
     const userTabs = config.tabs.filter((t) => t.fields.length || t.toggleable);
-    const [selectedTabId, setSelectedTabId] = useState((_a = userTabs[0]) === null || _a === void 0 ? void 0 : _a.id);
-    const onTabsChange = useCallback((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
-    const tree = getBasicTreeByParentUid(pageUid);
-    const [currentVersion, setCurrentVersion] = useState("");
-    useEffect(() => {
+    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)("");
+    (0, react_1.useEffect)(() => {
         var _a, _b;
         if (config.versioning) {
-            addOldRoamJSDependency("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);
@@ -539,8 +546,8 @@ const ConfigPage = ({ id, config, pageUid, }) => {
         }
     }, [config.versioning, id, setCurrentVersion]);
     const brandColor = tryColor(config.brand);
-    return (React.createElement(Card, { style: { color: "#202B33" }, className: "roamjs-config-panel" },
-        React.createElement("style", null, `.roamjs-config-panel .bp3-tab-panel {
+    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;
 }
@@ -568,15 +575,15 @@ ${brandColor &&
                 .lightness(brandColor.lightness() + 5)
                 .toString()}
 }`}`),
-        React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
-            React.createElement("h4", { style: { padding: 4 } },
-                idToTitle(id),
+        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
+            react_1.default.createElement("h4", { style: { padding: 4 } },
+                (0, idToTitle_1.default)(id),
                 " Configuration"),
-            currentVersion && (React.createElement("span", null,
-                React.createElement("span", { style: { color: "#cccccc", fontSize: 8 } },
+            currentVersion && (react_1.default.createElement("span", null,
+                react_1.default.createElement("span", { style: { color: "#cccccc", fontSize: 8 } },
                     "v",
                     currentVersion),
-                React.createElement(Button, { icon: "git-branch", minimal: true, onClick: () => {
+                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({
@@ -584,10 +591,10 @@ ${brandColor &&
                                 currentVersion,
                             }));
                     }, style: { marginLeft: 4 } })))),
-        React.createElement("style", null, `.roamjs-config-tabs {\npadding: 4px;\n}`),
-        React.createElement(Tabs, { id: `${id}-config-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true, className: "roamjs-config-tabs" }, userTabs.map(({ id: tabId, fields, toggleable, development = false }, i) => {
+        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.createElement(Tab, { id: tabId, key: tabId, title: idToTitle(tabId), disabled: development, panel: React.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 }) }));
+            return (react_1.default.createElement(core_1.Tab, { id: tabId, key: tabId, title: (0, idToTitle_1.default)(tabId), disabled: development, 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
@@ -620,26 +627,26 @@ const createConfigPage = ({ title, config, }) => {
             children: fieldsToChildren(t),
         })),
     ];
-    return createPage({
+    return (0, writes_1.createPage)({
         title,
         tree: rawTree.length ? rawTree : [{ text: " " }],
     });
 };
-export const createConfigObserver = ({ title, config, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const pageUid = getPageUidByPageTitle(title) ||
+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) {
-        createHTMLObserver({
+        (0, dom_1.createHTMLObserver)({
             className: "rm-title-display",
             tag: "H1",
             callback: (d) => {
                 var _a, _b;
                 const h = d;
                 if (h.innerText === title) {
-                    const uid = getPageUidByPageTitle(title);
+                    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)) {
@@ -647,7 +654,7 @@ export const createConfigObserver = ({ title, config, }) => __awaiter(void 0, vo
                         const parent = document.createElement("div");
                         parent.id = `${title.replace("roam/js/", "roamjs-")}-config`;
                         containerParent.insertBefore(parent, ((_b = d.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling) || null);
-                        ReactDOM.render(React.createElement(ConfigPage, { id: title.replace("roam/js/", ""), config: config, pageUid: pageUid }), parent);
+                        react_dom_1.default.render(react_1.default.createElement(ConfigPage, { id: title.replace("roam/js/", ""), config: config, pageUid: pageUid }), parent);
                     }
                 }
             },
@@ -657,5 +664,6 @@ export const createConfigObserver = ({ title, config, }) => __awaiter(void 0, vo
         pageUid,
     };
 });
-export default ConfigPage;
+exports.createConfigObserver = createConfigObserver;
+exports.default = ConfigPage;
 //# sourceMappingURL=ConfigPage.js.map