eddev 0.3.35 → 2.0.0-beta.2

package/dev-ui/components/panels/ColorEditor.js

@@ -1,128 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-var PanelWrapper_1 = require("../PanelWrapper");
-var useStylesheet_1 = require("../../hooks/useStylesheet");
-var Button_1 = require("../atoms/Button");
-var icons_1 = require("../../icons");
-var Spacer_1 = require("../atoms/Spacer");
-var theme_1 = require("../../theme");
-function colorsToJSON(values) {
-    return JSON.stringify(values, null, 2);
-    // return (
-    //   "{\n" +
-    //   Object.entries(values)
-    //     .map(([token, value]) => {
-    //       const tokenStr = Object.entries(values)
-    //         .map(([breakpoint, value]) => {
-    //           return `\"${breakpoint}\": ${JSON.stringify(value)}`
-    //         })
-    //         .join(", ")
-    //       return `  \"${token}\": { ${tokenStr} }`
-    //     })
-    //     .join(",\n") +
-    //   "\n}"
-    // )
-}
-function colorsToCSS(values) {
-    return "\n    body {\n      ".concat(Object.entries(values)
-        .map(function (_a) {
-        var token = _a[0], value = _a[1];
-        return "--colors-".concat(token, ": ").concat(value.includes("$") ? "var(--colors-".concat(value.replace("$", ""), ")") : value, ";");
-    })
-        .join("\n"), "\n    }\n  ");
-    // const parsedBreakpoints = parseBreakpoints(originalConfig.breakpoints, originalConfig.media)
-    // const { globalResponsive } = parseResponsiveTokens(
-    //   {
-    //     space: space,
-    //   },
-    //   parsedBreakpoints
-    // )
-    // const rules: string[] = []
-    // Object.entries(globalResponsive).forEach(([breakpoint, values]: any) => {
-    //   let rule = ""
-    //   let media = originalConfig.media[breakpoint.replace("@", "")]
-    //   let variables = []
-    //   for (let key in values) {
-    //     variables.push(key + ": " + values[key])
-    //   }
-    //   if (media) {
-    //     rules.push("@media " + media + " {\n:root {" + variables.join(";\n") + "}\n}")
-    //   } else {
-    //     rules.push(":root {\n" + variables.join(";\n") + "\n}")
-    //   }
-    // })
-    // return rules.join("\n")
-}
-function ColorEditor() {
-    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.theme.colors; }), values = _a[0], setValues = _a[1];
-    console.log("COLOR", values, _theme_1.originalConfig);
-    var stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
-    (0, react_1.useEffect)(function () {
-        console.log("Result", colorsToCSS(values));
-        stylesheet.set(colorsToCSS(values));
-    }, [values]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Colour Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            navigator.clipboard.writeText(colorsToJSON(values));
-                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            navigator.clipboard.readText().then(function (text) {
-                                try {
-                                    var data = JSON.parse(text);
-                                    setValues(data);
-                                }
-                                catch (err) {
-                                    alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
-                                }
-                            });
-                        } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            setValues(_theme_1.originalConfig.theme.colors);
-                        } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: Object.entries(values).map(function (_a) {
-                var token = _a[0], value = _a[1];
-                return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["$", token] }), void 0), (0, jsx_runtime_1.jsx)(Cell, __assign({ mono: true, small: true }, { children: value }), void 0), value.includes("$") ? ((0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["\u21AA", value] }), void 0)) : ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
-                                    var _a;
-                                    setValues(__assign(__assign({}, values), (_a = {}, _a[token] = e.target.value, _a)));
-                                } }, void 0) }, void 0))] }, token));
-            }) }), void 0) }, void 0));
-}
-exports.ColorEditor = ColorEditor;
-var ColorRow = (0, theme_1.styled)("div", {
-    display: "flex",
-    borderBottom: "1px solid $$lineColor",
-});
-var Cell = (0, theme_1.styled)("div", {
-    flex: "0 0 150px",
-    variants: {
-        mono: {
-            true: {
-                fontFamily: "$mono",
-                fontSize: "12px",
-                fontWeight: "bold",
-            },
-        },
-        small: {
-            true: {
-                flexBasis: "100px",
-            },
-        },
-        rightAligned: {
-            true: {
-                textAlign: "right",
-            },
-        },
-    },
-});

package/dev-ui/components/panels/PageDataDebugger.d.ts

@@ -1 +0,0 @@
-export declare function PageDataDebugger(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/PageDataDebugger.js

@@ -1,30 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageDataDebugger = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_inspector_1 = require("react-inspector");
-var routing_1 = require("../../../routing");
-var theme_1 = require("../../theme");
-var PanelWrapper_1 = require("../PanelWrapper");
-function PageDataDebugger() {
-    var _a;
-    var route = (0, routing_1.useRoute)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Page Data" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: (_a = route.data) === null || _a === void 0 ? void 0 : _a.viewData.data, expandLevel: 3 }, void 0) }, void 0) }), void 0));
-}
-exports.PageDataDebugger = PageDataDebugger;
-var Wrapper = (0, theme_1.styled)("div", {
-    width: "500px",
-    maxHeight: "calc(100vh - 100px)",
-    overflowY: "auto",
-});

package/dev-ui/components/panels/QueryDebugger.d.ts

@@ -1 +0,0 @@
-export declare function QueryDebugger(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/QueryDebugger.js

@@ -1,46 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QueryDebugger = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@stitches/react");
-var react_2 = require("react");
-var useQueryDebug_1 = require("../../../hooks/useQueryDebug");
-var PanelWrapper_1 = require("../PanelWrapper");
-function QueryDebugger() {
-    var data = (0, useQueryDebug_1.useQueryDebugData)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Query Debugger" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: data ? (0, jsx_runtime_1.jsx)(Item, { item: data, depth: 0 }, void 0) : (0, jsx_runtime_1.jsx)("div", { children: "No data" }, void 0) }, void 0) }), void 0));
-}
-exports.QueryDebugger = QueryDebugger;
-var Item = function (_a) {
-    var item = _a.item, depth = _a.depth;
-    var _b = (0, react_2.useState)(depth < 3), expanded = _b[0], setExpanded = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(ItemStyle, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "query-item-heading" }, { children: ["\u2022 ", (0, jsx_runtime_1.jsx)("strong", { children: item.label }, void 0), " ", (0, jsx_runtime_1.jsx)("code", { children: item.file }, void 0), " (", Number(item.duration).toFixed(1), "s)"] }), void 0), item.errors && item.errors.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "query-errors" }, { children: item.errors.map(function (err, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "query-error-item" }, { children: ["\u2022 ", err] }), i)); }) }), void 0)) : null, item.children && item.children.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "query-children" }, { children: item.children.map(function (child, i) { return ((0, jsx_runtime_1.jsx)(Item, { item: child, depth: depth + 1 }, i)); }) }), void 0)) : null] }, void 0));
-};
-var ItemStyle = (0, react_1.styled)("div", {
-    fontSize: "12px",
-    ".query-children": {
-        paddingLeft: "30px",
-    },
-    ".query-errors": {
-        paddingLeft: "20px",
-        color: "#ff4444",
-        ".query-error-item": {
-            whiteSpace: "pre-wrap",
-        },
-    },
-});
-var Wrapper = (0, react_1.styled)("div", {
-    maxHeight: 500,
-    overflowY: "auto",
-});

package/dev-ui/components/panels/SpacingEditor.d.ts

@@ -1 +0,0 @@
-export declare function SpacingEditor(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/SpacingEditor.js

@@ -1,88 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpacingEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-var style_1 = require("../../../style");
-var PanelWrapper_1 = require("../PanelWrapper");
-var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
-var useStylesheet_1 = require("../../hooks/useStylesheet");
-var Button_1 = require("../atoms/Button");
-var icons_1 = require("../../icons");
-var Spacer_1 = require("../atoms/Spacer");
-function spaceToJSON(space) {
-    return ("{\n" +
-        Object.entries(space)
-            .map(function (_a) {
-            var token = _a[0], values = _a[1];
-            var tokenStr = Object.entries(values)
-                .map(function (_a) {
-                var breakpoint = _a[0], value = _a[1];
-                return "\"".concat(breakpoint, "\": ").concat(JSON.stringify(value));
-            })
-                .join(", ");
-            return "  \"".concat(token, "\": { ").concat(tokenStr, " }");
-        })
-            .join(",\n") +
-        "\n}");
-}
-function spaceToCSS(space) {
-    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    var globalResponsive = (0, style_1.parseResponsiveTokens)({
-        space: space,
-    }, parsedBreakpoints).globalResponsive;
-    var rules = [];
-    Object.entries(globalResponsive).forEach(function (_a) {
-        var breakpoint = _a[0], values = _a[1];
-        var rule = "";
-        var media = _theme_1.originalConfig.media[breakpoint.replace("@", "")];
-        var variables = [];
-        for (var key in values) {
-            variables.push(key + ": " + values[key]);
-        }
-        if (media) {
-            rules.push("@media " + media + " {\n:root {" + variables.join(";\n") + "}\n}");
-        }
-        else {
-            rules.push(":root {\n" + variables.join(";\n") + "\n}");
-        }
-    });
-    return rules.join("\n");
-}
-function SpacingEditor() {
-    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.responsive.space; }), values = _a[0], setValues = _a[1];
-    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    var stylesheet = (0, useStylesheet_1.useStylesheet)("spacing");
-    (0, react_1.useEffect)(function () {
-        stylesheet.set(spaceToCSS(values));
-    }, [values]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Spacing Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            navigator.clipboard.writeText(spaceToJSON(values));
-                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            navigator.clipboard.readText().then(function (text) {
-                                try {
-                                    var data = JSON.parse(text);
-                                    setValues(data);
-                                }
-                                catch (err) {
-                                    alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
-                                }
-                            });
-                        } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            setValues(_theme_1.originalConfig.responsive.space);
-                        } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: values, showBreakpointName: true, showRange: true, showValues: true, related: true, labelWidth: "30px", onChange: setValues, modes: ["px", "multiplier"] }, void 0) }), void 0) }, void 0));
-}
-exports.SpacingEditor = SpacingEditor;

package/dev-ui/components/panels/TypographyEditor.d.ts

@@ -1 +0,0 @@
-export declare function TypographyEditor(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/TypographyEditor.js

@@ -1,97 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypographyEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-var style_1 = require("../../../style");
-var usePersistState_1 = require("../../hooks/usePersistState");
-var icons_1 = require("../../icons");
-var theme_1 = require("../../theme");
-var Button_1 = require("../atoms/Button");
-var Spacer_1 = require("../atoms/Spacer");
-var Text_1 = require("../atoms/Text");
-var PanelWrapper_1 = require("../PanelWrapper");
-var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
-function TypographyEditor() {
-    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.typography; }), values = _a[0], setValues = _a[1];
-    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    var _b = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog"), previewText = _b[0], setPreviewText = _b[1];
-    var reset = function () {
-        setValues(_theme_1.originalConfig.typography);
-        setPreviewText("The quick brown fox jumps over the lazy dog");
-    };
-    // const stylesheet = useStylesheet("spacing")
-    // useEffect(() => {
-    //   stylesheet.set(spaceToCSS(values))
-    // }, [values])
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                        // navigator.clipboard.writeText(spaceToJSON(values))
-                    } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                        // navigator.clipboard.readText().then((text) => {
-                        //   try {
-                        //     const data = JSON.parse(text)
-                        //     setValues(data)
-                        //   } catch (err) {
-                        //     alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
-                        //   }
-                        // })
-                    } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, __assign({ onWheel: function (e) {
-                e.stopPropagation();
-            } }, { children: Object.entries(values).map(function (_a, index) {
-                var name = _a[0], settings = _a[1];
-                return ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: name }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(Details, { children: [(0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
-                                        setPreviewText(e.currentTarget.value);
-                                    } }, void 0), (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: {
-                                        fontSize: settings.fontSize,
-                                        lineHeight: settings.lineHeight,
-                                    }, showBreakpointName: true, showRange: true, showValues: true, labelWidth: "80px", onChange: function (data) {
-                                        var _a;
-                                        setValues(__assign(__assign({}, values), (_a = {}, _a[name] = __assign(__assign({}, settings), { fontSize: data.fontSize, lineHeight: data.lineHeight }), _a)));
-                                    }, modes: ["px", "multiplier"] }, void 0)] }, void 0)] }, index));
-            }) }), void 0) }), void 0));
-}
-exports.TypographyEditor = TypographyEditor;
-var TypographyItem = (0, theme_1.styled)("div", {
-    borderBottom: "1px solid $colors$bgLineStrong",
-    display: "flex",
-    paddingTop: "4px",
-    paddingBottom: "4px",
-});
-var Meta = (0, theme_1.styled)("div", {
-    width: "200px",
-    flex: "0 0 auto",
-});
-var Wrapper = (0, theme_1.styled)("div", {
-    maxHeight: "500px",
-    overflowY: "auto",
-});
-var Details = (0, theme_1.styled)("div", {
-    flex: "1 1 auto",
-});
-var Preview = (0, _theme_1.styled)("input", {
-    appearance: "none",
-    backgroundColor: "transparent",
-    borderLeft: 0,
-    borderRight: 0,
-    borderTop: "1px solid #555555",
-    borderBottom: "1px solid #555555",
-    outline: "0",
-    color: "#ffffff",
-    padding: "0px 6px",
-    borderRadius: "0",
-    width: "100%",
-    marginBottom: "8px",
-});

package/dev-ui/hooks/useBreakpoint.d.ts

@@ -1,11 +0,0 @@
-declare type Result = {
-    name: string;
-    index: number;
-    progress: number;
-    offset: number;
-    width: number;
-    bpMin: number;
-    bpMax: number;
-};
-export declare function useBreakpoint(): Result;
-export {};

package/dev-ui/hooks/useBreakpoint.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBreakpoint = void 0;
-// @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-function useBreakpoint() {
-    // const [value, setValue] = useState(["initial", -1, 0] as [string, number, number])
-    var _a = (0, react_1.useState)({
-        name: "initial",
-        index: -1,
-        progress: 0,
-        offset: 0,
-        width: 0,
-        bpMin: 0,
-        bpMax: 0,
-    }), value = _a[0], setValue = _a[1];
-    (0, react_1.useEffect)(function () {
-        var handle = function () {
-            var width = window.innerWidth;
-            var result = {
-                name: "initial",
-                index: 0,
-                offset: window.innerWidth,
-                progress: window.innerWidth / _theme_1.breakpoints[0].max,
-                width: window.innerWidth,
-                bpMin: 0,
-                bpMax: _theme_1.breakpoints[0].max,
-            };
-            for (var index in _theme_1.breakpoints) {
-                var bp = _theme_1.breakpoints[index];
-                var key = bp.key;
-                var media = _theme_1.config.media[key];
-                if (!media.includes("min-width") || !media)
-                    continue;
-                if (window.matchMedia(media).matches) {
-                    result.name = key;
-                    result.index = Number(index);
-                    result.offset = width - parseFloat(bp.min);
-                    result.progress = result.offset / (parseFloat(bp.max) - parseFloat(bp.min));
-                    result.bpMin = bp.min;
-                    result.bpMax = bp.max;
-                }
-                else {
-                    break;
-                }
-            }
-            setValue(result);
-            // if (breakpoint !== value[0]) {
-            // setValue([breakpoint, matchedIndex, progress])
-            // }
-        };
-        handle();
-        window.addEventListener("resize", handle);
-        return function () { return window.removeEventListener("resize", handle); };
-    }, []);
-    return value;
-}
-exports.useBreakpoint = useBreakpoint;

package/dev-ui/hooks/usePersistState.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePersistState = void 0;
-var react_1 = require("react");
-var get = function (id, fallback) {
-    if (fallback === void 0) { fallback = undefined; }
-    if (typeof localStorage === "undefined") {
-        return fallback;
-    }
-    var value = localStorage.getItem("devui_" + id);
-    if (value !== null) {
-        try {
-            return JSON.parse(value);
-        }
-        catch (err) {
-            return fallback;
-        }
-    }
-    else {
-        return fallback;
-    }
-};
-var set = function (id, value) {
-    localStorage.setItem("devui_" + id, JSON.stringify(value));
-};
-function usePersistState(id, initial) {
-    var _a = (0, react_1.useState)(function () { return get(id, initial); }), value = _a[0], setValue = _a[1];
-    return [
-        value,
-        function (value) {
-            set(id, value);
-            setValue(value);
-        },
-    ];
-}
-exports.usePersistState = usePersistState;

package/dev-ui/hooks/useStylesheet.d.ts

@@ -1,4 +0,0 @@
-export declare function useStylesheet(id: string): {
-    clear(): void;
-    set(value: string): void;
-};

package/dev-ui/hooks/useStylesheet.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStylesheet = void 0;
-var react_1 = require("react");
-function useStylesheet(id) {
-    var _a = (0, react_1.useState)(null), element = _a[0], setElement = _a[1];
-    (0, react_1.useEffect)(function () {
-        if (!element) {
-            var style = document.getElementById("devui-" + id);
-            if (!style) {
-                style = document.createElement("style");
-                style.id = "devui-" + id;
-                document.body.appendChild(style);
-            }
-            setElement(style);
-        }
-    }, [element]);
-    return {
-        clear: function () {
-            if (element) {
-                element.innerHTML = "";
-            }
-        },
-        set: function (value) {
-            if (element) {
-                element.innerHTML = value;
-            }
-        },
-    };
-}
-exports.useStylesheet = useStylesheet;

package/dev-ui/icons.d.ts

@@ -1,15 +0,0 @@
-export declare const bolt: import("react/jsx-runtime").JSX.Element;
-export declare const typography: import("react/jsx-runtime").JSX.Element;
-export declare const ruler: import("react/jsx-runtime").JSX.Element;
-export declare const structure: import("react/jsx-runtime").JSX.Element;
-export declare const code: import("react/jsx-runtime").JSX.Element;
-export declare const share: import("react/jsx-runtime").JSX.Element;
-export declare const close: import("react/jsx-runtime").JSX.Element;
-export declare const check: import("react/jsx-runtime").JSX.Element;
-export declare const checkEmpty: import("react/jsx-runtime").JSX.Element;
-export declare const checkFilled: import("react/jsx-runtime").JSX.Element;
-export declare const line: import("react/jsx-runtime").JSX.Element;
-export declare const copy: import("react/jsx-runtime").JSX.Element;
-export declare const paste: import("react/jsx-runtime").JSX.Element;
-export declare const trash: import("react/jsx-runtime").JSX.Element;
-export declare const color: import("react/jsx-runtime").JSX.Element;

package/dev-ui/icons.js

@@ -1,30 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.color = exports.trash = exports.paste = exports.copy = exports.line = exports.checkFilled = exports.checkEmpty = exports.check = exports.close = exports.share = exports.code = exports.structure = exports.ruler = exports.typography = exports.bolt = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-exports.bolt = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M11,21h-1l1-7H6.74c0,0,3.68-6.46,6.26-11h1l-1,7h4.28L11,21z" }, void 0) }, void 0)] }), void 0));
-exports.typography = ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z" }, void 0) }), void 0));
-exports.ruler = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M23 6H1v12h22V6zm-2 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" }, void 0)] }), void 0));
-exports.structure = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("polygon", { points: "22,11 22,3 15,3 15,6 9,6 9,3 2,3 2,11 9,11 9,8 11,8 11,18 15,18 15,21 22,21 22,13 15,13 15,16 13,16 13,8 15,8 15,11" }, void 0)] }), void 0));
-exports.code = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }, void 0)] }), void 0));
-exports.share = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { points: "23,3 1,3 1,13 3,13 3,5 21,5 21,21 23,21" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "10", r: "4" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M15.39,16.56C13.71,15.7,11.53,15,9,15c-2.53,0-4.71,0.7-6.39,1.56C1.61,17.07,1,18.1,1,19.22V22h16v-2.78 C17,18.1,16.39,17.07,15.39,16.56z" }, void 0) }, void 0)] }, void 0) }, void 0)] }), void 0));
-exports.close = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }, void 0)] }), void 0));
-exports.check = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }, void 0)] }), void 0));
-exports.checkEmpty = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 5v14H5V5h14m2-2H3v18h18V3z" }, void 0)] }), void 0));
-exports.checkFilled = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M21 3H3v18h18V3zM10 17l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }, void 0)] }), void 0));
-exports.line = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24", x: "0" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56 C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9 c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07 l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z" }, void 0) }, void 0) }, void 0)] }), void 0));
-exports.copy = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }, void 0)] }), void 0));
-exports.paste = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }, void 0)] }), void 0));
-exports.trash = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6 21h12V7H6v14zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }, void 0)] }), void 0));
-exports.color = ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "48", width: "48", viewBox: "0 0 48 48" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.25 1.6-7.9 1.6-3.65 4.375-6.35 2.775-2.7 6.5-4.225Q20.2 4 24.45 4q3.95 0 7.5 1.325T38.175 9q2.675 2.35 4.25 5.575Q44 17.8 44 21.65q0 5.4-3.15 8.525T32.5 33.3h-3.75q-.9 0-1.55.7t-.65 1.55q0 1.35.725 2.3.725.95.725 2.2 0 1.9-1.05 2.925T24 44Zm0-20Zm-11.65 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.3-8.5q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm10.7 0q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.55 8.5q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75ZM24 41q.55 0 .775-.225.225-.225.225-.725 0-.7-.725-1.3-.725-.6-.725-2.65 0-2.3 1.5-4.05t3.8-1.75h3.65q3.8 0 6.15-2.225Q41 25.85 41 21.65q0-6.6-5-10.625T24.45 7q-7.3 0-12.375 4.925T7 24q0 7.05 4.975 12.025Q16.95 41 24 41Z" }, void 0) }), void 0));

package/dev-ui/index.d.ts

@@ -1 +0,0 @@
-export * from "./components/DevUI";

package/dev-ui/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components/DevUI"), exports);