eddev 0.2.0-beta.11 → 0.2.0-beta.12

package/build/get-webpack-config.js

@@ -77,13 +77,15 @@ var plugin_name_defined_components_1 = __importDefault(require("./babel/plugin-n
 var manifest_blocks_1 = require("./manifests/manifest-blocks");
 var manifest_fields_1 = require("./manifests/manifest-fields");
 var manifest_views_1 = require("./manifests/manifest-views");
+var get_config_1 = require("../config/get-config");
 function getWebpackConfig(opts) {
     return __awaiter(this, void 0, void 0, function () {
-        var compiling, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, manifestLoaders, buildID;
+        var compiling, config, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, manifestLoaders, buildID;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     compiling = false;
+                    config = (0, get_config_1.getEDConfigUnwrapped)();
                     ALIAS = {};
                     ENTRY = {};
                     PLUGINS = [];
@@ -329,6 +331,7 @@ function getWebpackConfig(opts) {
                     if (isDev && opts.isAdmin) {
                         DEFINES["process.BLOCK_MANIFEST_FILE"] = JSON.stringify(ALIAS["@manifest/blocks"]);
                     }
+                    DEFINES["process.devUI"] = config.devUI === "enabled";
                     if (isBrowser) {
                         DEFINES["process.env.themePath"] = "window.THEME_PATH || ".concat(DEFINES["process.env.themePath"]);
                     }

package/cli/cli.js

@@ -86,7 +86,7 @@ program
 //   })
 program
     .command("next")
-    .description("Create a Next.js project in .serverless")
+    .description("Run the serverless app in standalone mode")
     .action(function (options) {
     (0, create_next_app_1.createNextApp)({
         baseDirectory: process.cwd(),

package/config/config-schema.d.ts

@@ -11,55 +11,40 @@ export declare const EDConfigSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     }, {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     }>>;
-    favicon: z.ZodOptional<z.ZodObject<{
-        icoSource: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodArray<z.ZodString, "many">]>>;
-        svg: z.ZodOptional<z.ZodString>;
-    }, "strip", z.ZodTypeAny, {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    }, {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    }>>;
+    devUI: z.ZodEnum<["disabled", "enabled"]>;
 }, "strip", z.ZodTypeAny, {
     $schema?: string | undefined;
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 }, {
     $schema?: string | undefined;
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 }>;
 export declare type EDConfig = z.infer<typeof EDConfigSchema>;

package/config/config-schema.js

@@ -14,10 +14,5 @@ exports.EDConfigSchema = zod_1.z.object({
         apiOnly: zod_1.z.boolean().optional(),
     })
         .optional(),
-    favicon: zod_1.z
-        .object({
-        icoSource: zod_1.z.union([zod_1.z.string(), zod_1.z.array(zod_1.z.string())]).optional(),
-        svg: zod_1.z.string().optional(),
-    })
-        .optional(),
+    devUI: zod_1.z.enum(["disabled", "enabled"]),
 });

package/config/get-config.d.ts

@@ -3,43 +3,34 @@ export declare function getEDConfig(dir?: string): import("zod").SafeParseReturn
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 }, {
     $schema?: string | undefined;
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 }>;
 export declare function getEDConfigUnwrapped(dir?: string): {
     $schema?: string | undefined;
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 };
 export declare function getEDConfigFile(dir?: string): string;

package/config/parse-config.d.ts

@@ -3,27 +3,21 @@ export declare function parseConfig(config: any): import("zod").SafeParseReturnT
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 }, {
     $schema?: string | undefined;
     serverless?: {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
-        plugins: "proxy" | "remote";
         enabled: boolean;
         uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
     } | undefined;
-    favicon?: {
-        svg?: string | undefined;
-        icoSource?: string | string[] | undefined;
-    } | undefined;
+    devUI: "disabled" | "enabled";
 }>;

package/dev-ui/components/BreakpointItemHeader.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Props = {
+    lerpStart?: boolean;
+    lerps?: boolean;
+    name: string;
+    defined: boolean;
+    onLerpChange?(lerpStart: boolean): void;
+    onDefinedChange?(defined: boolean): void;
+};
+export declare function BreakpointColumnHeader(props: Props): JSX.Element;
+export {};

package/dev-ui/components/BreakpointItemHeader.js

@@ -0,0 +1,50 @@
+"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.BreakpointColumnHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_1 = require("../icons");
+var theme_1 = require("../theme");
+function BreakpointColumnHeader(props) {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(NameWrapper, { children: props.name }, void 0), (0, jsx_runtime_1.jsx)(ToggleButton, __assign({ onClick: function () { var _a; return (_a = props.onDefinedChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.defined); } }, { children: props.lerpStart ? icons_1.checkFilled : icons_1.checkEmpty }), void 0), (0, jsx_runtime_1.jsx)(ToggleButton, __assign({ onClick: function () { var _a; return (_a = props.onDefinedChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.defined); } }, { children: props.defined ? icons_1.checkFilled : icons_1.checkEmpty }), void 0)] }, void 0));
+}
+exports.BreakpointColumnHeader = BreakpointColumnHeader;
+var Wrapper = (0, theme_1.styled)("div", {
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+});
+var ToggleButton = (0, theme_1.styled)("button", {
+    appearance: "none",
+    background: "transparent",
+    border: "0px",
+    padding: "3px",
+    height: "auto",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&:hover": {
+    // backgroundColor: "$bgHover",
+    },
+    svg: {
+        fill: "$fg",
+        width: "14px",
+        height: "14px",
+        display: "block",
+    },
+});
+var NameWrapper = (0, theme_1.styled)("div", {
+    fontFamily: "$body",
+    fontSize: "$sm",
+    textAlign: "center",
+});

package/dev-ui/components/BreakpointList.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+declare type Props = {
+    renderBreakpoint: (breakpoint: string, index: number) => ReactNode;
+};
+export declare function BreakpointList(props: Props): JSX.Element;
+export {};

package/dev-ui/components/BreakpointList.js

@@ -0,0 +1,38 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreakpointList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var _theme_1 = require("@theme");
+var theme_1 = require("../theme");
+function BreakpointList(props) {
+    var breakpoints = __spreadArray(["initial"], _theme_1.originalConfig.breakpoints, true);
+    return ((0, jsx_runtime_1.jsx)(Row, { children: breakpoints.map(function (breakpoint, index) {
+            return (0, jsx_runtime_1.jsx)(Cell, { children: props.renderBreakpoint(breakpoint, index) }, void 0);
+        }) }, void 0));
+}
+exports.BreakpointList = BreakpointList;
+var Row = (0, theme_1.styled)("div", {
+    display: "flex",
+});
+var Cell = (0, theme_1.styled)("div", {
+    flex: "1 1 auto",
+    width: "100px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderLeft: "1px solid $colors$bgHoverLight",
+    borderBottom: "1px solid $colors$bgHoverLight",
+    "&:hover": {
+    // backgroundColor: "$bgHoverLight",
+    },
+});

package/dev-ui/components/DevUI.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DevUI(): JSX.Element;

package/dev-ui/components/DevUI.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevUI = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var usePersistState_1 = require("../hooks/usePersistState");
+var panels_1 = require("../panels");
+var Launcher_1 = require("./Launcher");
+var PanelWrapper_1 = require("./PanelWrapper");
+function DevUI() {
+    var _a = (0, usePersistState_1.usePersistState)("launcher-is-open", false), open = _a[0], setOpen = _a[1];
+    var _b = (0, usePersistState_1.usePersistState)("panel", undefined), panel = _b[0], setPanel = _b[1];
+    var PanelComponent = panel && panel in panels_1.DEV_UI_PANELS ? panels_1.DEV_UI_PANELS[panel].component : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Launcher_1.Launcher, { panel: panel, open: open, onChange: function (open, panel) {
+                    setOpen(open);
+                    setPanel(panel);
+                } }, void 0), open && PanelComponent && ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { children: (0, jsx_runtime_1.jsx)(PanelComponent, {}, void 0) }, void 0))] }, void 0));
+}
+exports.DevUI = DevUI;

package/dev-ui/components/Launcher.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PanelID } from "../panels";
+declare type Props = {
+    open: boolean;
+    panel: PanelID | undefined;
+    onChange: (open: boolean, panel: PanelID | undefined) => void;
+};
+export declare function Launcher(props: Props): JSX.Element;
+export {};

package/dev-ui/components/Launcher.js

@@ -0,0 +1,118 @@
+"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.Launcher = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_1 = require("../icons");
+var panels_1 = require("../panels");
+var theme_1 = require("../theme");
+function Launcher(props) {
+    return ((0, jsx_runtime_1.jsxs)(LauncherWrapper, { children: [(0, jsx_runtime_1.jsx)(LauncherButton, __assign({ onClick: function (e) {
+                    props.onChange(!props.open, props.panel);
+                } }, { children: props.open ? icons_1.close : icons_1.bolt }), void 0), (0, jsx_runtime_1.jsx)(Menu, __assign({ open: props.open }, { children: Object.entries(panels_1.DEV_UI_PANELS).map(function (_a) {
+                    var key = _a[0], panel = _a[1];
+                    return ((0, jsx_runtime_1.jsxs)(MenuItem, __assign({ state: key === props.panel ? "active" : props.panel ? "inactive" : undefined, onClick: function () { return props.onChange(true, key); } }, { children: [panel.icon, panel.label] }), key));
+                }) }), void 0)] }, void 0));
+}
+exports.Launcher = Launcher;
+var LauncherWrapper = (0, theme_1.styled)("div", {
+    position: "fixed",
+    bottom: "5px",
+    left: "5px",
+    zIndex: 100000000,
+    fontFamily: "$body",
+    fontSize: "$md",
+    pointerEvents: "none",
+    $$height: "$space$buttonHeight",
+    userSelect: "none",
+});
+var LauncherButton = (0, theme_1.styled)("div", {
+    borderRadius: "100px",
+    width: "$$height",
+    height: "$$height",
+    bottom: "5px",
+    left: "5px",
+    background: "$bg",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "all",
+    "&:hover": {
+        backgroundColor: "$bgHover",
+    },
+    svg: {
+        fill: "$fg",
+        display: "block",
+        width: "16px",
+        height: "16px",
+    },
+    cursor: "pointer",
+});
+var Menu = (0, theme_1.styled)("div", {
+    position: "absolute",
+    left: "calc($$height + 4px)",
+    bottom: 0,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    width: "calc(100vw - 40px)",
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+        width: 0,
+        height: 0,
+        background: "transparent",
+    },
+    variants: {
+        open: {
+            true: {
+                opacity: 1,
+                pointerEvents: "all",
+            },
+            false: {
+                opacity: 0,
+            },
+        },
+    },
+});
+var MenuItem = (0, theme_1.styled)("div", {
+    background: "$bg",
+    color: "$fg",
+    borderRadius: "100px",
+    whiteSpace: "nowrap",
+    marginRight: "4px",
+    padding: "4px 8px",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    height: "$$height",
+    "&:hover": {
+        backgroundColor: "$bgHover",
+        color: "$fg",
+    },
+    svg: {
+        display: "block",
+        fill: "currentColor",
+        marginRight: "5px",
+        width: "14px",
+        height: "14px",
+    },
+    variants: {
+        state: {
+            active: {},
+            inactive: {
+                color: "$fgFaded",
+            },
+        },
+    },
+});

package/dev-ui/components/PanelWrapper.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+declare type Props = PropsWithChildren<{}>;
+export declare function PanelWrapper(props: Props): JSX.Element;
+export {};

package/dev-ui/components/PanelWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelWrapper = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_1 = require("../theme");
+function PanelWrapper(props) {
+    return (0, jsx_runtime_1.jsx)(Wrapper, { children: props.children }, void 0);
+}
+exports.PanelWrapper = PanelWrapper;
+var Wrapper = (0, theme_1.styled)("div", {
+    position: "fixed",
+    left: "5px",
+    bottom: "calc($space$buttonHeight + 10px)",
+    backgroundColor: "$bg",
+    color: "$fg",
+    borderRadius: "$sm",
+    maxWidth: "calc(100vw - 10px)",
+    fontFamily: "$body",
+    fontSize: "$md",
+    zIndex: 10000000,
+});

package/dev-ui/components/Pill.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SpacingEditor(): JSX.Element;

package/dev-ui/components/SpacingEditor.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpacingEditor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var _theme_1 = require("@theme");
+function SpacingEditor() {
+    console.log("CONFIG", _theme_1.config);
+    return (0, jsx_runtime_1.jsx)("div", { children: "Spacing" }, void 0);
+}
+exports.SpacingEditor = SpacingEditor;

package/dev-ui/components/Text.d.ts

@@ -0,0 +1,39 @@
+export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    variant?: "h1" | undefined;
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    space: {
+        buttonHeight: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    colors: {
+        bg: string;
+        bgHover: string;
+        bgHoverLight: string;
+        fg: string;
+        fgFaded: string;
+    };
+    fontSizes: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    transitions: {
+        default: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;

package/dev-ui/components/Text.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+var theme_1 = require("../theme");
+exports.Text = (0, theme_1.styled)("div", {
+    variants: {
+        variant: {
+            h1: {
+                fontSize: "$xl",
+            }
+        },
+    },
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SpacingEditor(): JSX.Element;

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

@@ -0,0 +1,56 @@
+"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 theme_1 = require("../../theme");
+var BreakpointItemHeader_1 = require("../BreakpointItemHeader");
+var BreakpointList_1 = require("../BreakpointList");
+function SpacingEditor() {
+    // const [values, setValues] = usePersistState<ResponsiveSpace | undefined>("spacing", undefined)
+    var _a = (0, react_1.useState)(function () {
+        return __assign({}, _theme_1.originalConfig.responsive.space);
+    }), values = _a[0], setValues = _a[1];
+    console.log("CONFIG", _theme_1.originalConfig);
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    console.log("A");
+    var info = (0, style_1.parseResponsiveObject)(parsedBreakpoints, values ? values[0] : {});
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(SpacingTable, { children: [(0, jsx_runtime_1.jsxs)(TableHeaderRow, { children: [(0, jsx_runtime_1.jsx)(TableCell, { children: "Token" }, void 0), (0, jsx_runtime_1.jsx)(TableCell, { children: (0, jsx_runtime_1.jsx)(BreakpointList_1.BreakpointList, { renderBreakpoint: function (bp, i) {
+                                    var bpInfo = info.find(function (item) { return item.breakpoint === bp; });
+                                    return (0, jsx_runtime_1.jsx)(BreakpointItemHeader_1.BreakpointColumnHeader, { name: bp, defined: !!(bpInfo === null || bpInfo === void 0 ? void 0 : bpInfo.defined) }, void 0);
+                                } }, void 0) }, void 0)] }, void 0), Object.entries(values || {}).map(function (_a) {
+                    var token = _a[0], value = _a[1];
+                    console.log("B", token, value);
+                    var info = (0, style_1.parseResponsiveObject)(parsedBreakpoints, value);
+                    return ((0, jsx_runtime_1.jsxs)(TableRow, { children: [(0, jsx_runtime_1.jsx)(TableCell, { children: token }, void 0), (0, jsx_runtime_1.jsx)(TableCell, { children: (0, jsx_runtime_1.jsx)(BreakpointList_1.BreakpointList, { renderBreakpoint: function (bp, i) {
+                                        console.log("VALUE", value);
+                                        var bpInfo = info.find(function (item) { return item.breakpoint === bp; });
+                                        return value["@" + bp];
+                                    } }, void 0) }, void 0)] }, token));
+                })] }, void 0) }, void 0));
+}
+exports.SpacingEditor = SpacingEditor;
+var SpacingTable = (0, theme_1.styled)("div", {
+    display: "table",
+});
+var TableRow = (0, theme_1.styled)("div", {
+    display: "table-row",
+});
+var TableHeaderRow = (0, theme_1.styled)(TableRow, {});
+var TableCell = (0, theme_1.styled)("div", {
+    display: "table-cell",
+});

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

@@ -0,0 +1 @@
+export declare function usePersistState<T>(id: string, initial: T): [T, (value: T) => void];

package/dev-ui/hooks/usePersistState.js

@@ -0,0 +1,28 @@
+"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; }
+    var value = localStorage.getItem("devui_" + id);
+    if (value !== null) {
+        return JSON.parse(value);
+    }
+    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;