roamjs-components 0.62.5 → 0.63.0

package/backend/putRoamJSUser.d.ts

@@ -23,7 +23,7 @@ export declare const awsPutRoamJSUser: (event: {
     };
 } | {
     statusCode: number;
-    body: any;
+    body: string;
     headers: {
         "Access-Control-Allow-Origin": string;
         "Access-Control-Allow-Methods": string;

package/backend/putRoamJSUser.js

@@ -42,14 +42,11 @@ const awsPutRoamJSUser = (event, data) => putRoamJSUser({
     body: JSON.stringify(data),
     headers: headers_1.default,
 }))
-    .catch((e) => {
-    var _a;
-    return ({
-        statusCode: 401,
-        body: (_a = e.response) === null || _a === void 0 ? void 0 : _a.data,
-        headers: headers_1.default,
-    });
-});
+    .catch((e) => ({
+    statusCode: 401,
+    body: e.message,
+    headers: headers_1.default,
+}));
 exports.awsPutRoamJSUser = awsPutRoamJSUser;
 exports.default = putRoamJSUser;
 //# sourceMappingURL=putRoamJSUser.js.map

package/backend/putRoamJSUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"putRoamJSUser.js","sourceRoot":"","sources":["../src/backend/putRoamJSUser.ts"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,gEAAgC;AAEhC,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,mBAAmB,IAAI,EAAE,EACnD,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,EAChC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,GAO7C,EAAE,EAAE,CACH,IAAI,OAAO,CAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IACpD,MAAM,GAAG,GAAG,eAAK;SACd,OAAO,CACN,gCAAgC,EAChC;QACE,MAAM,EAAE,KAAK;QACb,OAAO,kBACL,aAAa,EAAE,UAAU,MAAM,CAAC,IAAI,CAClC,GAAG,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,CACjD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EACtB,gBAAgB,EAAE,KAAK,EACvB,oBAAoB,EAAE,WAAW,IAC9B,CAAC,GAAG;YACL,CAAC,CAAC;gBACE,cAAc,EAAE,MAAM;aACvB;YACH,CAAC,CAAC,EAAE,CAAC,CACR;KACF,EACD,CAAC,GAAG,EAAE,EAAE;QACN,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,IAAI,GAAG,EAAE,CAAC;QACd,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;YACtB,IAAI,IAAI,IAAI,CAAC;QACf,CAAC,CAAC,CAAC;QACH,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE;YACjB,IAAI,CAAC,GAAG,CAAC,UAAU;gBAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC;iBAC9C,IAAI,GAAG,CAAC,UAAU,IAAI,GAAG,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG;gBACpD,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAyB,CAAC,CAAC;;gBAC/C,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC1B,CAAC,CACF;SACA,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACvB,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChC,GAAG,CAAC,GAAG,EAAE,CAAC;AACZ,CAAC,CAAC,CAAC;AAEE,MAAM,gBAAgB,GAAG,CAC9B,KAA2C,EAC3C,IAA6B,EAC7B,EAAE,CACF,aAAa,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,EAAE;IACvE,IAAI;CACL,CAAC;KACC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACf,UAAU,EAAE,GAAG;IACf,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,EAAP,iBAAO;CACR,CAAC,CAAC;KACF,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;;IAAC,OAAA,CAAC;QACb,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI;QACtB,OAAO,EAAP,iBAAO;KACR,CAAC,CAAA;CAAA,CAAC,CAAC;AAjBK,QAAA,gBAAgB,oBAiBrB;AAER,kBAAe,aAAa,CAAC"}
+{"version":3,"file":"putRoamJSUser.js","sourceRoot":"","sources":["../src/backend/putRoamJSUser.ts"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,gEAAgC;AAEhC,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,mBAAmB,IAAI,EAAE,EACnD,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,EAChC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,GAO7C,EAAE,EAAE,CACH,IAAI,OAAO,CAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IACpD,MAAM,GAAG,GAAG,eAAK;SACd,OAAO,CACN,gCAAgC,EAChC;QACE,MAAM,EAAE,KAAK;QACb,OAAO,kBACL,aAAa,EAAE,UAAU,MAAM,CAAC,IAAI,CAClC,GAAG,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,CACjD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EACtB,gBAAgB,EAAE,KAAK,EACvB,oBAAoB,EAAE,WAAW,IAC9B,CAAC,GAAG;YACL,CAAC,CAAC;gBACE,cAAc,EAAE,MAAM;aACvB;YACH,CAAC,CAAC,EAAE,CAAC,CACR;KACF,EACD,CAAC,GAAG,EAAE,EAAE;QACN,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,IAAI,GAAG,EAAE,CAAC;QACd,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;YACtB,IAAI,IAAI,IAAI,CAAC;QACf,CAAC,CAAC,CAAC;QACH,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE;YACjB,IAAI,CAAC,GAAG,CAAC,UAAU;gBAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC;iBAC9C,IAAI,GAAG,CAAC,UAAU,IAAI,GAAG,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG;gBACpD,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAyB,CAAC,CAAC;;gBAC/C,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC1B,CAAC,CACF;SACA,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACvB,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChC,GAAG,CAAC,GAAG,EAAE,CAAC;AACZ,CAAC,CAAC,CAAC;AAEE,MAAM,gBAAgB,GAAG,CAC9B,KAA2C,EAC3C,IAA6B,EAC7B,EAAE,CACF,aAAa,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,EAAE;IACvE,IAAI;CACL,CAAC;KACC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACf,UAAU,EAAE,GAAG;IACf,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,EAAP,iBAAO;CACR,CAAC,CAAC;KACF,KAAK,CAAC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC;IACpB,UAAU,EAAE,GAAG;IACf,IAAI,EAAE,CAAC,CAAC,OAAO;IACf,OAAO,EAAP,iBAAO;CACR,CAAC,CAAC,CAAC;AAjBK,QAAA,gBAAgB,oBAiBrB;AAER,kBAAe,aAAa,CAAC"}

package/components/ConfigPage.d.ts

@@ -1,71 +1,6 @@
 import React from "react";
-import type { InputTextNode } from "../types";
-import { ExternalLoginOptions } from "./ExternalLogin";
-declare type TextField = {
-    type: "text";
-    defaultValue?: string;
-};
-declare type TimeField = {
-    type: "time";
-    defaultValue?: Date;
-};
-declare type NumberField = {
-    type: "number";
-    defaultValue?: number;
-};
-declare type FlagField = {
-    type: "flag";
-    defaultValue?: boolean;
-    options?: {
-        onChange?: (f: boolean) => void;
-    };
-};
-declare type MultiTextField = {
-    type: "multitext";
-    defaultValue?: string[];
-};
-declare type PagesField = {
-    type: "pages";
-    defaultValue?: string[];
-};
-declare type OauthField = {
-    type: "oauth";
-    defaultValue?: [];
-    options: ExternalLoginOptions;
-};
-declare type SelectField = {
-    type: "select";
-    defaultValue?: string;
-    options: {
-        items: string[] | (() => string[]);
-    };
-};
-declare type BlockField = {
-    type: "block";
-    defaultValue?: InputTextNode;
-};
-declare type BlocksField = {
-    type: "blocks";
-    defaultValue?: InputTextNode[];
-};
-declare type CustomField = {
-    type: "custom";
-    defaultValue?: InputTextNode[];
-    options: {
-        component: React.FC<{
-            parentUid: string;
-            uid: string;
-            defaultValue: InputTextNode[];
-            title: string;
-        }>;
-    };
-};
-declare type ArrayField = PagesField | MultiTextField | CustomField | BlocksField;
-declare type UnionField = ArrayField | TextField | TimeField | NumberField | OauthField | FlagField | SelectField | BlockField;
-declare type Field<T extends UnionField> = T & {
-    title: string;
-    description: string;
-};
+import type { Field, UnionField } from "./ConfigPanels/types";
+import { Brand } from "./ConfigPanels/getBrandColors";
 declare type ConfigTab = {
     id: string;
     toggleable?: boolean | "premium";
@@ -77,7 +12,7 @@ declare type ConfigTab = {
 declare type Config = {
     tabs: ConfigTab[];
     versioning?: boolean;
-    brand?: string;
+    brand?: Brand;
 };
 declare const ConfigPage: ({ id, config, pageUid, }: {
     id: string;

package/components/ConfigPage.js

@@ -3,7 +3,6 @@ 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 = tslib_1.__importStar(require("react"));
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
 const addOldRoamJSDependency_1 = tslib_1.__importDefault(require("../dom/addOldRoamJSDependency"));
@@ -12,363 +11,13 @@ const createBlock_1 = tslib_1.__importDefault(require("../writes/createBlock"));
 const createPage_1 = tslib_1.__importDefault(require("../writes/createPage"));
 const deleteBlock_1 = tslib_1.__importDefault(require("../writes/deleteBlock"));
 const getBasicTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getBasicTreeByParentUid"));
-const getFirstChildUidByBlockUid_1 = tslib_1.__importDefault(require("../queries/getFirstChildUidByBlockUid"));
 const getPageUidByPageTitle_1 = tslib_1.__importDefault(require("../queries/getPageUidByPageTitle"));
 const getShallowTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getShallowTreeByParentUid"));
-const getTextByBlockUid_1 = tslib_1.__importDefault(require("../queries/getTextByBlockUid"));
 const localStorageGet_1 = tslib_1.__importDefault(require("../util/localStorageGet"));
-const localStorageRemove_1 = tslib_1.__importDefault(require("../util/localStorageRemove"));
-const localStorageSet_1 = tslib_1.__importDefault(require("../util/localStorageSet"));
-const startOfDay_1 = tslib_1.__importDefault(require("date-fns/startOfDay"));
-const Description_1 = tslib_1.__importDefault(require("./Description"));
-const ExternalLogin_1 = tslib_1.__importDefault(require("./ExternalLogin"));
 const idToTitle_1 = tslib_1.__importDefault(require("../util/idToTitle"));
-const MenuItemSelect_1 = tslib_1.__importDefault(require("./MenuItemSelect"));
-const PageInput_1 = tslib_1.__importDefault(require("./PageInput"));
-const format_1 = tslib_1.__importDefault(require("date-fns/format"));
-const color_1 = tslib_1.__importDefault(require("color"));
 const TokenDialog_1 = require("./TokenDialog");
 const apiGet_1 = tslib_1.__importDefault(require("../util/apiGet"));
 const apiPost_1 = tslib_1.__importDefault(require("../util/apiPost"));
-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, getFirstChildUidByBlockUid_1.default)(uid));
-    const [value, setValue] = (0, react_1.useState)((valueUid && transform((0, getTextByBlockUid_1.default)(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, getShallowTreeByParentUid_1.default)(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 optionItems = (0, react_1.useMemo)(() => (typeof items === "function" ? items() : items), [items]);
-    const { value, onChange } = useSingleChildValue({
-        defaultValue: defaultValue || optionItems[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: optionItems })));
-};
-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, getBasicTreeByParentUid_1.default)(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, getShallowTreeByParentUid_1.default)(uid).forEach(({ uid: u }) => (0, deleteBlock_1.default)(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, deleteBlock_1.default)(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, createBlock_1.default)({ node: { text: title, children: [] }, parentUid }))
-                .then((formatUid) => (0, getFirstChildUidByBlockUid_1.default)(formatUid) ||
-                (0, createBlock_1.default)({
-                    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, createBlock_1.default)({ node: { text: title, children: [] }, parentUid }))
-                .then((formatUid) => (0, getFirstChildUidByBlockUid_1.default)(formatUid)
-                ? formatUid
-                : ((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length)
-                    ? Promise.all(defaultValue.map((node, order) => (0, createBlock_1.default)({
-                        node,
-                        parentUid: formatUid,
-                        order,
-                    })))
-                    : (0, createBlock_1.default)({
-                        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;
-}
-
-.roamjs-config-blocks > div > .rm-block-children > .rm-multibar {
-  display: none;
-}
-
-.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, createBlock_1.default)({ 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]);
@@ -541,29 +190,6 @@ const ToggleablePanel = ({ enabled, setEnabled, pageUid, order, id, extensionId,
             ? `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)}.\n\nA 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)(() => {
@@ -596,8 +222,7 @@ const FieldTabs = ({ id, fields, uid: initialUid, pageUid, order, toggleable, ex
     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];
+            const { Panel, title, defaultValue } = 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
@@ -626,7 +251,6 @@ const ConfigPage = ({ id, config, pageUid, }) => {
             }
         }
     }, [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%;
@@ -635,26 +259,21 @@ const ConfigPage = ({ id, config, pageUid, }) => {
 .roamjs-external-login {
   margin-bottom: 16px;
 }
-${brandColor &&
+${config.brand &&
             `div.bp3-tab[aria-selected="true"], div.bp3-tab:not([aria-disabled="true"]):hover {
-  color: ${brandColor.toString()};
+  color: ${config.brand.base};
 }
 
 .bp3-tab-indicator-wrapper div.bp3-tab-indicator, .bp3-control:hover input:checked ~ span.bp3-control-indicator {
-  background-color: ${brandColor.toString()};
+  background-color: ${config.brand.base};
 }
 
 .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)
-                .toString()};
+  background-color: ${config.brand.faded};
 }
 
 .bp3-control input:checked ~ span.bp3-control-indicator {
-  background-color: ${brandColor
-                .lightness(brandColor.lightness() + 5)
-                .toString()}
+  background-color: ${config.brand.bright}
 }`}`),
         react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" }, ref: titleRef, tabIndex: -1 },
             react_1.default.createElement("h4", { style: { padding: 4 } },
@@ -678,19 +297,20 @@ ${brandColor &&
             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 }) }));
         }))));
 };
+// TODO: better nested type discrimination here
 const fieldsToChildren = (t) => t.fields
     .filter((f) => !!f.defaultValue)
     .map((f) => {
     var _a;
     return ({
         text: f.title,
-        children: f.type === "flag"
+        children: f.Panel.type === "flag"
             ? []
-            : f.type === "custom"
+            : f.Panel.type === "custom"
                 ? f.defaultValue || []
-                : f.type === "pages" || f.type === "multitext"
+                : f.Panel.type === "pages" || f.Panel.type === "multitext"
                     ? (_a = f.defaultValue) === null || _a === void 0 ? void 0 : _a.map((v) => ({ text: v }))
-                    : f.type === "block"
+                    : f.Panel.type === "block"
                         ? f.defaultValue
                             ? [f.defaultValue]
                             : []