@powerhousedao/builder-tools 0.2.0

package/dist/editor-utils/components/editorWorksheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorWorksheet.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/editorWorksheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,2CAO/C"}

package/dist/editor-utils/components/editorWorksheet.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function EditorWorksheet(props) {
+    return (_jsx("div", { className: "editor-worksheet", children: _jsx("div", { className: "editor-worksheet--page", children: props.children }) }));
+}

package/dist/editor-utils/components/index.d.ts

@@ -0,0 +1,9 @@
+export { DocumentEditor } from "./documentEditor.js";
+export { EditorToolbar } from "./editorToolbar.js";
+export { EditorWorksheet } from "./editorWorksheet.js";
+export * as styles from "./styles.js";
+export * as stylesVariant from "./stylesVariant.js";
+export { TextInput } from "./textInput.js";
+export { TextInputVariant } from "./textInputVariant.js";
+export { ToolbarButton } from "./toolbarButton.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/editor-utils/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/editor-utils/components/index.js

@@ -0,0 +1,9 @@
+export { DocumentEditor } from "./documentEditor.js";
+export { EditorToolbar } from "./editorToolbar.js";
+export { EditorWorksheet } from "./editorWorksheet.js";
+export * as styles from "./styles.js";
+export * as stylesVariant from "./stylesVariant.js";
+export { TextInput } from "./textInput.js";
+export { TextInputVariant } from "./textInputVariant.js";
+export { ToolbarButton } from "./toolbarButton.js";
+// import "./styles.css";

package/dist/editor-utils/components/styles.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties } from "react";
+type ColorTheme = "light" | "dark";
+declare const colorScheme: {
+    light: {
+        color: string;
+        bgColor: string;
+        border: string;
+        shadow: string;
+        inputColor: string;
+        inputBg: string;
+    };
+    dark: {
+        color: string;
+        bgColor: string;
+        border: string;
+        shadow: string;
+        inputColor: string;
+        inputBg: string;
+    };
+};
+type TypographySize = "huge" | "larger" | "large" | "medium" | "small" | "smaller" | "tiny";
+type TypographyScheme = {
+    [K in TypographySize]: CSSProperties;
+};
+declare const typographySizes: TypographyScheme;
+declare const inputStyle: (mode?: keyof typeof colorScheme, focus?: boolean) => {
+    width: string;
+    border: string;
+    boxSizing: "border-box";
+    backgroundColor: string;
+    outline: string;
+    color: string;
+    resize: "none";
+    fontFamily: "Roboto, sans-serif";
+    overflow: "hidden";
+    lineHeight: string;
+};
+export type { ColorTheme, TypographyScheme, TypographySize };
+export { colorScheme, inputStyle, typographySizes };
+//# sourceMappingURL=styles.d.ts.map

package/dist/editor-utils/components/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnC,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;CAiBhB,CAAC;AAEF,KAAK,cAAc,GACf,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AACX,KAAK,gBAAgB,GAAG;KAAG,CAAC,IAAI,cAAc,GAAG,aAAa;CAAE,CAAC;AAEjE,QAAA,MAAM,eAAe,EAAE,gBA2CtB,CAAC;AAEF,QAAA,MAAM,UAAU,UACR,MAAM,OAAO,WAAW;;;;;;;;;;;CAiB/B,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/dist/editor-utils/components/styles.js

@@ -0,0 +1,78 @@
+const colorScheme = {
+    light: {
+        color: "#222222",
+        bgColor: "#FFFFFF",
+        border: "#EEEEEE",
+        shadow: "rgba(128,128,128,0.65)",
+        inputColor: "#222222",
+        inputBg: "#F6F6F6",
+    },
+    dark: {
+        color: "#E6E6E6",
+        bgColor: "#181818",
+        border: "#181818",
+        shadow: "rgba(0, 0, 0, 0.25)",
+        inputColor: "#E6E6E6",
+        inputBg: "#222222",
+    },
+};
+const typographySizes = {
+    huge: {
+        fontSize: "36pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "30pt 0 0 0",
+    },
+    larger: {
+        fontSize: "24pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "18pt 0 0 0",
+    },
+    large: {
+        fontSize: "18pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "12pt 0 0 0",
+    },
+    medium: {
+        fontSize: "11pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "5pt 0 0 0",
+    },
+    small: {
+        fontSize: "10pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "0",
+    },
+    smaller: {
+        fontSize: "9pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "0",
+    },
+    tiny: {
+        fontSize: "8pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "0",
+    },
+};
+const inputStyle = (mode = "light", focus = false) => {
+    const scheme = colorScheme[mode];
+    return {
+        width: "100%",
+        border: "none",
+        boxSizing: "border-box",
+        backgroundColor: focus ? scheme.inputBg : scheme.bgColor,
+        outline: "none",
+        color: scheme.inputColor,
+        resize: "none",
+        fontFamily: "Roboto, sans-serif",
+        overflow: "hidden",
+        lineHeight: "1.5",
+    };
+};
+export { colorScheme, inputStyle, typographySizes };

package/dist/editor-utils/components/stylesVariant.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties } from "react";
+type ColorTheme = "light" | "dark";
+declare const colorScheme: {
+    light: {
+        color: string;
+        bgColor: string;
+        border: string;
+        shadow: string;
+        inputColor: string;
+        inputBg: string;
+    };
+    dark: {
+        color: string;
+        bgColor: string;
+        border: string;
+        shadow: string;
+        inputColor: string;
+        inputBg: string;
+    };
+};
+type TypographySize = "chapter" | "huge" | "larger" | "large" | "medium" | "small" | "smaller" | "tiny";
+type TypographyScheme = {
+    [K in TypographySize]: CSSProperties;
+};
+declare const typographySizes: TypographyScheme;
+declare const inputStyle: (mode?: keyof typeof colorScheme, focus?: boolean) => {
+    width: string;
+    border: string;
+    boxSizing: "border-box";
+    backgroundColor: string;
+    outline: string;
+    color: string;
+    resize: "none";
+    fontFamily: "Roboto, sans-serif";
+    overflow: "hidden";
+    lineHeight: string;
+};
+export type { ColorTheme, TypographyScheme, TypographySize };
+export { colorScheme, inputStyle, typographySizes };
+//# sourceMappingURL=stylesVariant.d.ts.map

package/dist/editor-utils/components/stylesVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesVariant.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/stylesVariant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnC,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;CAiBhB,CAAC;AAEF,KAAK,cAAc,GACf,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AACX,KAAK,gBAAgB,GAAG;KAAG,CAAC,IAAI,cAAc,GAAG,aAAa;CAAE,CAAC;AAEjE,QAAA,MAAM,eAAe,EAAE,gBAqDtB,CAAC;AAEF,QAAA,MAAM,UAAU,UACR,MAAM,OAAO,WAAW;;;;;;;;;;;CAiB/B,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/dist/editor-utils/components/stylesVariant.js

@@ -0,0 +1,88 @@
+const colorScheme = {
+    light: {
+        color: "#222222",
+        bgColor: "#FFFFFF",
+        border: "#EEEEEE",
+        shadow: "rgba(128,128,128,0.65)",
+        inputColor: "#222222",
+        inputBg: "#F6F6F6",
+    },
+    dark: {
+        color: "#CCCCCC",
+        bgColor: "#0A0A0A",
+        border: "#181818",
+        shadow: "rgba(255, 255, 255, 0.25)",
+        inputColor: "#CCCCCC",
+        inputBg: "#1A1D1F",
+    },
+};
+const typographySizes = {
+    chapter: {
+        fontSize: "64pt",
+        fontWeight: "bold",
+        padding: "6pt 24pt",
+        margin: "0",
+        lineHeight: 1,
+        textAlign: "right",
+        borderLeft: "4px solid",
+    },
+    huge: {
+        fontSize: "32pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "0 0 0 -6pt",
+        lineHeight: 1,
+    },
+    larger: {
+        fontSize: "24pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "-12pt 0 0 0",
+    },
+    large: {
+        fontSize: "18pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "-10.5pt 0 0 0",
+    },
+    medium: {
+        fontSize: "11pt",
+        fontWeight: "bold",
+        padding: "6pt",
+        margin: "-8pt 0 0 0",
+    },
+    small: {
+        fontSize: "10pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "-6pt 0 0 0",
+    },
+    smaller: {
+        fontSize: "9pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "-5pt 0 0 0",
+    },
+    tiny: {
+        fontSize: "8pt",
+        fontWeight: "normal",
+        padding: "6pt",
+        margin: "-8pt 0 0 0",
+    },
+};
+const inputStyle = (mode = "light", focus = false) => {
+    const scheme = colorScheme[mode];
+    return {
+        width: "100%",
+        border: "none",
+        boxSizing: "border-box",
+        backgroundColor: focus ? scheme.inputBg : scheme.bgColor,
+        outline: "none",
+        color: scheme.inputColor,
+        resize: "none",
+        fontFamily: "Roboto, sans-serif",
+        overflow: "hidden",
+        lineHeight: "1.5",
+    };
+};
+export { colorScheme, inputStyle, typographySizes };

package/dist/editor-utils/components/textInput.d.ts

@@ -0,0 +1,20 @@
+import { TypographySize } from "./styles.js";
+interface TextInputProps {
+    readonly theme: "light" | "dark";
+    readonly size?: TypographySize;
+    readonly horizontalLine?: boolean;
+    readonly id?: string;
+    readonly value?: string;
+    readonly placeholder?: string;
+    readonly autoFocus?: boolean;
+    readonly clearOnSubmit?: boolean;
+    readonly onSubmit?: {
+        (value: string): void;
+    };
+    readonly onEmpty?: {
+        (id: string): void;
+    };
+}
+export declare function TextInput(props: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=textInput.d.ts.map

package/dist/editor-utils/components/textInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/textInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE1E,UAAU,cAAc;IACtB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CAC3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAuH9C"}

package/dist/editor-utils/components/textInput.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { inputStyle, typographySizes } from "./styles.js";
+export function TextInput(props) {
+    const [state, setState] = useState({
+        value: props.value || "",
+        hasFocus: false,
+        pressingEnter: false,
+    });
+    useEffect(() => {
+        setState((state) => state.value !== props.value
+            ? { ...state, value: props.value || "" }
+            : state);
+    }, [props.value]);
+    const onKeyDown = (e) => {
+        if (e.key === "Enter") {
+            setState({ ...state, pressingEnter: true });
+            e.preventDefault();
+        }
+    };
+    const onKeyUp = (e) => {
+        if (e.key === "Enter") {
+            if (e.target && props.onSubmit) {
+                props.onSubmit(e.target.value);
+            }
+            if (props.clearOnSubmit) {
+                setState({ ...state, value: "", pressingEnter: false });
+            }
+            else {
+                setState({ ...state, pressingEnter: false });
+            }
+            e.preventDefault();
+        }
+        if (e.key === "Backspace" || e.key === "Delete") {
+            if (props.onEmpty && e.target.value.length < 1) {
+                props.onEmpty(props.id || "");
+            }
+            e.preventDefault();
+        }
+    };
+    const onInput = (e) => {
+        if (!state.pressingEnter) {
+            const target = e.target;
+            setState({ ...state, value: target.value });
+            target.style.height = "1px";
+            target.style.height = target.scrollHeight + "px";
+        }
+    };
+    const setFocus = (f) => {
+        setState((state) => ({ ...state, hasFocus: f }));
+        if (!f) {
+            const newValue = ref.current?.value || "";
+            const origValue = props.value || "";
+            if (newValue != origValue && props.onSubmit) {
+                props.onSubmit(newValue);
+                if (props.clearOnSubmit) {
+                    setState((state) => ({ ...state, value: "" }));
+                }
+            }
+        }
+    };
+    const ref = useRef(null);
+    useEffect(() => {
+        const resizeTextArea = () => {
+            if (ref.current) {
+                ref.current.style.height = "1px";
+                ref.current.style.height = ref.current.scrollHeight + "px";
+            }
+        };
+        window.addEventListener("resize", resizeTextArea);
+        resizeTextArea();
+        return () => {
+            window.removeEventListener("resize", resizeTextArea);
+        };
+    });
+    const style = {
+        ...inputStyle(props.theme, state.hasFocus),
+        ...typographySizes[props.size || "small"],
+    };
+    return (_jsxs("div", { children: [props.horizontalLine ? (_jsx("hr", { style: {
+                    borderColor: inputStyle(props.theme, false).backgroundColor,
+                } }, "line")) : (""), _jsx("textarea", { autoFocus: props.autoFocus || false, onBlur: (e) => setFocus(false), onFocus: (e) => setFocus(true), onInput: onInput, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: props.placeholder || "", ref: ref, style: style, value: state.value }, "text")] }));
+}

package/dist/editor-utils/components/textInputVariant.d.ts

@@ -0,0 +1,21 @@
+import { TypographySize } from "./stylesVariant.js";
+interface TextInputProps {
+    readonly theme: "light" | "dark";
+    readonly size?: TypographySize;
+    readonly horizontalLine?: boolean;
+    readonly id?: string;
+    readonly value?: string;
+    readonly placeholder?: string;
+    readonly autoFocus?: boolean;
+    readonly clearOnSubmit?: boolean;
+    readonly onSubmit?: {
+        (value: string): void;
+    };
+    readonly onEmpty?: {
+        (id: string): void;
+    };
+    readonly labelStyle?: boolean;
+}
+export declare function TextInputVariant(props: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=textInputVariant.d.ts.map

package/dist/editor-utils/components/textInputVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textInputVariant.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/textInputVariant.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EAEf,MAAM,oBAAoB,CAAC;AAE5B,UAAU,cAAc;IACtB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,2CAiIrD"}

package/dist/editor-utils/components/textInputVariant.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { inputStyle, typographySizes, } from "./stylesVariant.js";
+export function TextInputVariant(props) {
+    const [state, setState] = useState({
+        value: props.value || "",
+        hasFocus: false,
+        pressingEnter: false,
+    });
+    useEffect(() => {
+        setState({ ...state, value: props.value || "" });
+    }, [props.value]);
+    const onKeyDown = (e) => {
+        if (e.key === "Enter") {
+            setState({ ...state, pressingEnter: true });
+            e.preventDefault();
+        }
+    };
+    const onKeyUp = (e) => {
+        if (e.key === "Enter") {
+            if (e.target && props.onSubmit) {
+                props.onSubmit(e.target.value);
+            }
+            if (props.clearOnSubmit) {
+                setState({ ...state, value: "", pressingEnter: false });
+            }
+            else {
+                setState({ ...state, pressingEnter: false });
+            }
+            e.preventDefault();
+        }
+        if (e.key === "Backspace" || e.key === "Delete") {
+            if (props.onEmpty && e.target.value.length < 1) {
+                props.onEmpty(props.id || "");
+            }
+            e.preventDefault();
+        }
+    };
+    const onInput = (e) => {
+        if (!state.pressingEnter) {
+            const target = e.target;
+            setState({ ...state, value: target.value });
+            target.style.height = "1px";
+            target.style.height = target.scrollHeight + "px";
+        }
+    };
+    const setFocus = (f) => {
+        setState({ ...state, hasFocus: f });
+        if (!f) {
+            const newValue = ref.current?.value || "";
+            const origValue = props.value || "";
+            if (newValue != origValue && props.onSubmit) {
+                props.onSubmit(newValue);
+            }
+        }
+    };
+    const ref = useRef(null);
+    useEffect(() => {
+        const resizeTextArea = () => {
+            if (ref.current) {
+                ref.current.style.height = "1px";
+                ref.current.style.height = ref.current.scrollHeight + "px";
+            }
+        };
+        window.addEventListener("resize", resizeTextArea);
+        resizeTextArea();
+        return () => {
+            window.removeEventListener("resize", resizeTextArea);
+        };
+    });
+    const style = {
+        ...inputStyle(props.theme, state.hasFocus),
+        ...typographySizes[props.size || "small"],
+    };
+    if (props.labelStyle) {
+        style.textAlign = "center";
+        style.textTransform = "uppercase";
+        style.backgroundColor = "rgba(0, 0, 255, 0.05)";
+        style.borderRadius = "8px";
+        style.padding = "1px 0 4px 0";
+        style.margin = "0";
+        style.fontWeight = "bold";
+        style.fontSize = "8pt";
+        style.color = "#518EBE";
+        style.border = "2px solid #518EBE";
+        style.cursor = "pointer";
+        style.lineHeight = "1.5";
+    }
+    return (_jsxs("div", { children: [props.horizontalLine ? (_jsx("hr", { style: {
+                    borderColor: inputStyle(props.theme, false).backgroundColor,
+                } }, "line")) : (""), _jsx("textarea", { autoFocus: props.autoFocus || false, onBlur: (e) => setFocus(false), onFocus: (e) => setFocus(true), onInput: onInput, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: props.placeholder || "", ref: ref, spellCheck: state.hasFocus, style: style, tabIndex: props.labelStyle ? -1 : 1, value: state.value }, "text")] }));
+}

package/dist/editor-utils/components/toolbarButton.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+interface ToolbarButtonProps {
+    readonly onClick?: () => void;
+}
+export declare function ToolbarButton(props: PropsWithChildren<ToolbarButtonProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=toolbarButton.d.ts.map

package/dist/editor-utils/components/toolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarButton.d.ts","sourceRoot":"","sources":["../../../editor-utils/components/toolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAgBzE"}

package/dist/editor-utils/components/toolbarButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ToolbarButton(props) {
+    const handleClick = props.onClick ||
+        (() => {
+            console.log("No onClick handler attached to button.");
+        });
+    return (_jsx("div", { className: "toolbar-button", onClick: handleClick, style: { userSelect: "none" }, children: props.children }));
+}

package/dist/editor-utils/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useEnsInfo } from "./useEnsInfo.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/editor-utils/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editor-utils/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/editor-utils/hooks/index.js

@@ -0,0 +1 @@
+export { useEnsInfo } from "./useEnsInfo.js";

package/dist/editor-utils/hooks/useEnsInfo.d.ts

@@ -0,0 +1,15 @@
+import { Address } from "viem";
+import * as chains from "viem/chains";
+export type { Address } from "viem";
+export type Chain = chains.Chain;
+export declare function getChain(id: number): Chain | undefined;
+export type ENSInfo = {
+    name?: string;
+    avatarUrl?: string;
+};
+export declare const getEnsInfo: (address: Address, chainId: number) => Promise<ENSInfo>;
+export declare function useEnsInfo(address?: `0x${string}`, chainId?: number): {
+    info: ENSInfo | undefined;
+    loading: boolean;
+};
+//# sourceMappingURL=useEnsInfo.d.ts.map

package/dist/editor-utils/hooks/useEnsInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnsInfo.d.ts","sourceRoot":"","sources":["../../../editor-utils/hooks/useEnsInfo.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAA0C,MAAM,MAAM,CAAC;AAEvE,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AACpC,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AAEjC,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAItD;AA6BD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,YACZ,OAAO,WACP,MAAM,KACd,OAAO,CAAC,OAAO,CAiBjB,CAAC;AAEF,wBAAgB,UAAU,CACxB,OAAO,CAAC,EAAE,KAAK,MAAM,EAAE,EACvB,OAAO,CAAC,EAAE,MAAM,GACf;IAAE,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAgBjD"}

package/dist/editor-utils/hooks/useEnsInfo.js

@@ -0,0 +1,63 @@
+import { useEffect, useMemo, useState } from "react";
+import { createPublicClient, http } from "viem";
+import { getEnsAvatar, getEnsName } from "viem/actions";
+import * as chains from "viem/chains";
+export function getChain(id) {
+    return Object.values(chains).find((x) => "id" in x && x.id === id);
+}
+let client = createPublicClient({
+    chain: chains.mainnet,
+    batch: {
+        multicall: true,
+    },
+    transport: http(),
+});
+function updateChain(chainId) {
+    if (client.chain?.id === chainId) {
+        return;
+    }
+    const chain = getChain(chainId);
+    if (!chain) {
+        throw new Error(`Invalid chain id: ${chainId}`);
+    }
+    client = createPublicClient({
+        chain,
+        batch: {
+            multicall: true,
+        },
+        transport: http(),
+    });
+}
+export const getEnsInfo = async (address, chainId) => {
+    const result = {};
+    try {
+        updateChain(chainId);
+        const name = await getEnsName(client, { address });
+        if (name) {
+            result.name = name;
+            const avatarUrl = await getEnsAvatar(client, { name });
+            if (avatarUrl) {
+                result.avatarUrl = avatarUrl;
+            }
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+    return result;
+};
+export function useEnsInfo(address, chainId) {
+    const [info, setInfo] = useState(undefined);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!address || !chainId) {
+            return;
+        }
+        setLoading(true);
+        getEnsInfo(address, chainId)
+            .then((info) => setInfo(info))
+            .catch(console.error)
+            .finally(() => setLoading(false));
+    }, [address, chainId]);
+    return useMemo(() => ({ info, loading }), [info, loading]);
+}

package/dist/editor-utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components/index.js";
+export * from "./hooks/index.js";
+export * from "./reducer.js";
+export * from "./storybook.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/editor-utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../editor-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/dist/editor-utils/index.js

@@ -0,0 +1,4 @@
+export * from "./components/index.js";
+export * from "./hooks/index.js";
+export * from "./reducer.js";
+export * from "./storybook.js";

package/dist/editor-utils/reducer.d.ts

@@ -0,0 +1,3 @@
+import type { ActionFromDocument, PHDocument, Reducer } from "document-model";
+export declare function useDocumentReducer<TDocument extends PHDocument>(reducer: Reducer<TDocument>, initialState: TDocument, onError?: (error: unknown) => void): readonly [TDocument, (action: ActionFromDocument<TDocument>) => void];
+//# sourceMappingURL=reducer.d.ts.map

package/dist/editor-utils/reducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../editor-utils/reducer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,kBAAkB,EAElB,UAAU,EACV,OAAO,EACR,MAAM,gBAAgB,CAAC;AAGxB,wBAAgB,kBAAkB,CAAC,SAAS,SAAS,UAAU,EAC7D,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,EAC3B,YAAY,EAAE,SAAS,EACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GACjC,SAAS,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,CA6BvE"}