eddev 0.2.0-beta.12 → 0.2.0-beta.16

package/build/get-webpack-config.js

@@ -332,6 +332,7 @@ function getWebpackConfig(opts) {
                         DEFINES["process.BLOCK_MANIFEST_FILE"] = JSON.stringify(ALIAS["@manifest/blocks"]);
                     }
                     DEFINES["process.devUI"] = config.devUI === "enabled";
+                    DEFINES["process.serverlessEndpoint"] = "window.SERVERLESS_ENDPOINT";
                     if (isBrowser) {
                         DEFINES["process.env.themePath"] = "window.THEME_PATH || ".concat(DEFINES["process.env.themePath"]);
                     }

package/build/serverless/create-next-app.js

@@ -88,6 +88,7 @@ var manifest_blocks_1 = require("../manifests/manifest-blocks");
 var promises_1 = require("fs/promises");
 var manifest_views_1 = require("../manifests/manifest-views");
 var getRepoName_1 = require("../../utils/getRepoName");
+var updateEnvFile_1 = require("../../utils/updateEnvFile");
 function requireConfig(dir) {
     var configPath = (0, path_1.resolve)(dir, "ed.config.json");
     return require(configPath);
@@ -123,7 +124,7 @@ function createNextApp(opts) {
                     _b.sent();
                     _b.label = 5;
                 case 5:
-                    if (!!isVercel) return [3 /*break*/, 9];
+                    if (!!isVercel) return [3 /*break*/, 10];
                     // Sync important files during development, as they change
                     return [4 /*yield*/, syncFiles(opts.baseDirectory, serverlessDirectory, __spreadArray([
                             "blocks/**/*",
@@ -152,40 +153,58 @@ function createNextApp(opts) {
                     // Also sync APIs into the APIs folder
                     _b.sent();
                     // And public folder
-                    return [4 /*yield*/, syncFiles((0, path_1.join)(opts.baseDirectory, "assets"), (0, path_1.join)(serverlessDirectory, "public/wp-content/themes/".concat(repoName.repoName, "/assets")), ["**/*"])];
+                    return [4 /*yield*/, syncFiles((0, path_1.join)(opts.baseDirectory, "assets"), (0, path_1.join)(serverlessDirectory, "public/wp-content/themes/".concat(repoName.repoName, "/assets")), ["**/*"])
+                        // Sync favicon
+                    ];
                 case 8:
                     // And public folder
                     _b.sent();
-                    _b.label = 9;
+                    // Sync favicon
+                    return [4 /*yield*/, syncFiles((0, path_1.join)(opts.baseDirectory), (0, path_1.join)(serverlessDirectory, "public/"), ["favicon.ico"])];
                 case 9:
-                    if (!!isVercel) return [3 /*break*/, 11];
+                    // Sync favicon
+                    _b.sent();
+                    _b.label = 10;
+                case 10:
+                    if (!!isVercel) return [3 /*break*/, 12];
                     sendSignal({ code: "packaging" });
                     return [4 /*yield*/, updatePackages(serverlessDirectory)];
-                case 10:
-                    _b.sent();
-                    _b.label = 11;
                 case 11:
+                    _b.sent();
+                    _b.label = 12;
+                case 12:
                     sendSignal({ code: "compiling" });
                     // Create manifests
-                    initManifests(serverlessDirectory, opts.dev);
-                    if (!opts.dev) return [3 /*break*/, 14];
-                    return [4 /*yield*/, getPort(3000)];
-                case 12:
-                    port = _b.sent();
-                    sendSignal({ code: "url", url: "http://127.0.0.1:".concat(port) });
-                    return [4 /*yield*/, devNext(serverlessDirectory, port)
-                        // await runScript(serverlessDirectory, "dev")
+                    return [4 /*yield*/, initManifests(serverlessDirectory, opts.dev)
+                        // Start
                     ];
                 case 13:
+                    // Create manifests
                     _b.sent();
-                    return [3 /*break*/, 16];
+                    if (!opts.dev) return [3 /*break*/, 16];
+                    return [4 /*yield*/, getPort(3000)
+                        // Write the endpoint URL to .env
+                    ];
                 case 14:
-                    if (!opts.build) return [3 /*break*/, 16];
-                    return [4 /*yield*/, runScript(serverlessDirectory, "build")];
+                    port = _b.sent();
+                    // Write the endpoint URL to .env
+                    (0, updateEnvFile_1.updateEnvFile)({
+                        DEBUG_SERVERLESS_ENDPOINT: "http://localhost:".concat(port),
+                    }, opts.baseDirectory);
+                    sendSignal({ code: "url", url: "http://127.0.0.1:".concat(port) });
+                    // await devNext(serverlessDirectory, port)
+                    return [4 /*yield*/, runScript(serverlessDirectory, ["dev", "--port", String(port)])];
                 case 15:
+                    // await devNext(serverlessDirectory, port)
+                    _b.sent();
+                    return [3 /*break*/, 18];
+                case 16:
+                    if (!opts.build) return [3 /*break*/, 18];
+                    return [4 /*yield*/, runScript(serverlessDirectory, ["build"])];
+                case 17:
                     _b.sent();
-                    _b.label = 16;
-                case 16: return [2 /*return*/];
+                    _b.label = 18;
+                case 18: return [2 /*return*/];
             }
         });
     });
@@ -261,7 +280,7 @@ function updatePackagesFile(sourceFolder, targetFolder) {
             targetPackageFile = (0, path_1.resolve)(targetFolder, "package.json");
             sourcePackage = require(sourcePackageFile);
             targetPackage = require(targetPackageFile);
-            mergedPackage = __assign(__assign({}, targetPackage), { dependencies: __assign(__assign({}, (sourcePackage.dependencies || {})), (targetPackage.dependencies || {})), devDependencies: __assign(__assign({}, (sourcePackage.devDependencies || {})), (targetPackage.devDependencies || {})) });
+            mergedPackage = __assign(__assign({}, targetPackage), { dependencies: __assign(__assign({}, (targetPackage.dependencies || {})), (sourcePackage.dependencies || {})), devDependencies: __assign(__assign({}, (targetPackage.devDependencies || {})), (sourcePackage.devDependencies || {})) });
             (0, fs_extra_1.writeJSON)(targetPackageFile, mergedPackage, {
                 spaces: 2,
             });
@@ -303,45 +322,30 @@ function syncFiles(sourceFolder, targetFolder, patterns) {
         });
     });
 }
-function devNext(dir, port) {
-    return __awaiter(this, void 0, void 0, function () {
-        var createServer, parse, next, app, handle;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("http")); })];
-                case 1:
-                    createServer = (_a.sent()).createServer;
-                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("url")); })];
-                case 2:
-                    parse = (_a.sent()).parse;
-                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("next")); })];
-                case 3:
-                    next = (_a.sent()).default;
-                    app = next({
-                        dev: true,
-                        dir: dir,
-                        minimalMode: true,
-                        customServer: true,
-                        port: port,
-                    });
-                    handle = app.getRequestHandler();
-                    app.prepare().then(function () {
-                        console.log("http://127.0.0.1:".concat(port));
-                        createServer(function (req, res) {
-                            handle(req, res, parse(req.url || "", true));
-                        }).listen(app.port);
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function runScript(dir, script) {
+// async function devNext(dir: string, port: number) {
+//   const { createServer } = await import("http")
+//   const { parse } = await import("url")
+//   const { default: next } = await import("next")
+//   const app = next({
+//     dev: true,
+//     dir: dir,
+//     minimalMode: true,
+//     customServer: true,
+//     port: port,
+//   })
+//   const handle = app.getRequestHandler()
+//   app.prepare().then(() => {
+//     createServer((req, res) => {
+//       handle(req, res, parse(req.url || "", true))
+//     }).listen(app.port)
+//   })
+// }
+function runScript(dir, args) {
     var _a, _b;
     return __awaiter(this, void 0, void 0, function () {
         var proc;
         return __generator(this, function (_c) {
-            proc = (0, child_process_1.spawn)("yarn", [script], {
+            proc = (0, child_process_1.spawn)("yarn", args, {
                 cwd: dir,
             });
             (_a = proc.stdout) === null || _a === void 0 ? void 0 : _a.pipe(process.stdout);

package/cli/cli.js

@@ -38,8 +38,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var commander_1 = require("commander");
 var create_next_app_1 = require("../build/serverless/create-next-app");
-var build_dev_1 = require("./build.dev");
-var build_prod_1 = require("./build.prod");
 var setup_1 = require("./setup");
 var program = new commander_1.Command();
 program.version("0.0.1");
@@ -51,7 +49,8 @@ program
     .option("-m, --mode <mode>", 'Defaults to all modes, but use "frontend", "admin" or "codegen" to run in just one mode', undefined)
     .option("--verbose", "Enables log retention", false)
     .action(function (options) {
-    (0, build_dev_1.devCommand)({
+    var devCommand = require("./build.dev").devCommand;
+    devCommand({
         serverless: options.serverless,
         mode: options.mode,
         retainLog: options.verbose,
@@ -69,7 +68,8 @@ program
         });
     }
     else {
-        (0, build_prod_1.prodCommand)({
+        var prodCommand = require("./build.prod").prodCommand;
+        prodCommand({
             serverless: options.serverless,
         });
     }

package/components/PageHead.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/PageHead.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/PageMeta.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/PageMeta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/PageMeta.monolith.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/PageMeta.monolith.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/ServerlessPageMeta.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/ServerlessPageMeta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/config/config-schema.d.ts

@@ -8,6 +8,7 @@ export declare const EDConfigSchema: z.ZodObject<{
         theme: z.ZodEnum<["proxy", "copy", "remote"]>;
         devAssets: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
         apiOnly: z.ZodOptional<z.ZodBoolean>;
+        endpoints: z.ZodRecord<z.ZodString, z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
@@ -15,6 +16,7 @@ export declare const EDConfigSchema: z.ZodObject<{
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     }, {
         devAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
@@ -22,6 +24,7 @@ export declare const EDConfigSchema: z.ZodObject<{
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     }>>;
     devUI: z.ZodEnum<["disabled", "enabled"]>;
 }, "strip", z.ZodTypeAny, {
@@ -33,6 +36,7 @@ export declare const EDConfigSchema: z.ZodObject<{
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }, {
@@ -44,6 +48,7 @@ export declare const EDConfigSchema: z.ZodObject<{
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }>;

package/config/config-schema.js

@@ -12,6 +12,7 @@ exports.EDConfigSchema = zod_1.z.object({
         theme: zod_1.z.enum(["proxy", "copy", "remote"]),
         devAssets: zod_1.z.array(zod_1.z.string()).optional(),
         apiOnly: zod_1.z.boolean().optional(),
+        endpoints: zod_1.z.record(zod_1.z.string(), zod_1.z.string()),
     })
         .optional(),
     devUI: zod_1.z.enum(["disabled", "enabled"]),

package/config/get-config.d.ts

@@ -7,6 +7,7 @@ export declare function getEDConfig(dir?: string): import("zod").SafeParseReturn
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }, {
@@ -18,6 +19,7 @@ export declare function getEDConfig(dir?: string): import("zod").SafeParseReturn
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }>;
@@ -30,6 +32,7 @@ export declare function getEDConfigUnwrapped(dir?: string): {
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 };

package/config/parse-config.d.ts

@@ -7,6 +7,7 @@ export declare function parseConfig(config: any): import("zod").SafeParseReturnT
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }, {
@@ -18,6 +19,7 @@ export declare function parseConfig(config: any): import("zod").SafeParseReturnT
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "copy" | "proxy" | "remote";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }>;

package/dev-ui/components/{BreakpointItemHeader.js → BreakpointColumnHeader.js}

@@ -15,8 +15,9 @@ exports.BreakpointColumnHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var icons_1 = require("../icons");
 var theme_1 = require("../theme");
+var Text_1 = require("./atoms/Text");
 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));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ align: "center", variant: "monoBold" }, { 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.defined ? icons_1.checkFilled : icons_1.checkEmpty }), void 0)] }, void 0));
 }
 exports.BreakpointColumnHeader = BreakpointColumnHeader;
 var Wrapper = (0, theme_1.styled)("div", {
@@ -33,6 +34,7 @@ var ToggleButton = (0, theme_1.styled)("button", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    color: "inherit",
     "&:hover": {
     // backgroundColor: "$bgHover",
     },
@@ -43,8 +45,3 @@ var ToggleButton = (0, theme_1.styled)("button", {
         display: "block",
     },
 });
-var NameWrapper = (0, theme_1.styled)("div", {
-    fontFamily: "$body",
-    fontSize: "$sm",
-    textAlign: "center",
-});

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

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

package/dev-ui/components/BreakpointIndicator.js

@@ -0,0 +1,138 @@
+"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.BreakpointIndicator = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useBreakpoint_1 = require("../hooks/useBreakpoint");
+var usePersistState_1 = require("../hooks/usePersistState");
+var theme_1 = require("../theme");
+var Launcher_1 = require("./Launcher");
+var Text_1 = require("./atoms/Text");
+// @ts-ignore
+var _theme_1 = require("@theme");
+var Tooltip_1 = require("./atoms/Tooltip");
+var colors = [
+    { $$bg: "#ff5555", $$fg: "#ffffff" },
+    { $$bg: "#55ff55", $$fg: "#000000" },
+    { $$bg: "#5555ff", $$fg: "#ffffff" },
+    { $$bg: "#ff55ff", $$fg: "#ffffff" },
+    { $$bg: "#ffff55", $$fg: "#000000" },
+    { $$bg: "#55ffff", $$fg: "#000000" },
+];
+function BreakpointIndicator() {
+    var bpState = (0, useBreakpoint_1.useBreakpoint)();
+    var maxSize = parseFloat(_theme_1.breakpoints[_theme_1.breakpoints.length - 1].min);
+    var _a = (0, usePersistState_1.usePersistState)("breakpoint_indicator", false), expanded = _a[0], setExpanded = _a[1];
+    if (!expanded) {
+        return ((0, jsx_runtime_1.jsx)(Simple, __assign({ onClick: function () { return setExpanded(true); }, css: colors[bpState.index % colors.length] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: bpState.name }), void 0) }), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)(Expanded, __assign({ onClick: function () { return setExpanded(false); } }, { children: (0, jsx_runtime_1.jsxs)(Items, { children: [_theme_1.breakpoints.map(function (bp, index) {
+                    return ((0, jsx_runtime_1.jsx)(Item, __assign({ css: __assign(__assign({}, colors[index % colors.length]), { $$offset: parseFloat(bp.min) / maxSize, $$size: bp.max ? (parseFloat(bp.max) - parseFloat(bp.min)) / maxSize : 0 }), last: index === _theme_1.breakpoints.length - 1, active: bpState.name === bp.key }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: "".concat(bp.min, " - ").concat(bp.max || "∞"), nowrap: true, offset: 3 }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoTiny", align: "left" }, { children: bp.key }), void 0) }), void 0) }), index));
+                }), (0, jsx_runtime_1.jsx)(Indicator, __assign({ style: { "--eddev--position": Math.min(1, bpState.width / maxSize) }, flipped: bpState.width > maxSize * 0.9 }, { children: (0, jsx_runtime_1.jsxs)(Text_1.Text, __assign({ variant: "monoTiny" }, { children: [bpState.width, "px"] }), void 0) }), void 0)] }, void 0) }), void 0));
+}
+exports.BreakpointIndicator = BreakpointIndicator;
+var Expanded = (0, theme_1.styled)(Launcher_1.MenuItem, {
+    position: "relative",
+    width: "400px",
+    // height: "100%",
+    inset: 0,
+    $$bg: "black !important",
+    $$bgHover: "black !important",
+});
+var Simple = (0, theme_1.styled)(Launcher_1.MenuItem, {
+    $$bgHover: "$$bg !important",
+});
+var Items = (0, theme_1.styled)("div", {
+    position: "absolute",
+    inset: "2px 8px",
+    paddingBottom: "10px",
+    borderRadius: "100px",
+});
+var Item = (0, theme_1.styled)("div", {
+    position: "absolute",
+    top: 0,
+    left: "calc($$offset * 100%)",
+    width: "calc($$size * 100%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingBottom: "2px",
+    color: "#c0c0c0",
+    "&:after": {
+        content: " ",
+        display: "block",
+        position: "absolute",
+        left: 1,
+        right: 1,
+        bottom: 0,
+        height: "2px",
+        backgroundColor: "$$bg",
+        borderRadius: "10px",
+    },
+    variants: {
+        last: {
+            true: {
+                flexGrow: "0",
+                paddingLeft: 0,
+                right: 0,
+                width: "auto",
+                backgroundColor: "transparent",
+                left: "auto",
+                "&:after": {
+                    display: "none",
+                },
+            },
+        },
+        active: {
+            true: {
+                color: "$$bg",
+                fontWeight: "bold",
+            },
+        },
+    },
+});
+var Indicator = (0, theme_1.styled)("div", {
+    position: "absolute",
+    bottom: 0,
+    left: "calc($$position * 100%)",
+    height: "9px",
+    div: {
+        position: "absolute",
+        left: "5px",
+    },
+    "&:before": {
+        content: " ",
+        display: "block",
+        position: "absolute",
+        left: 0,
+        top: "3px",
+        width: 0,
+        height: 0,
+        borderStyle: "solid",
+        borderWidth: "0 3px 5.2px 3px",
+        borderColor: "transparent transparent white transparent",
+        transform: "translateX(-50%)",
+    },
+    variants: {
+        flipped: {
+            true: {
+                div: {
+                    left: "auto",
+                    right: "5px",
+                },
+            },
+        },
+    },
+});

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

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

package/dev-ui/components/DevUI.js

@@ -1,12 +1,12 @@
 "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 theme_1 = require("../theme");
+var BreakpointIndicator_1 = require("./BreakpointIndicator");
 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];
@@ -14,6 +14,15 @@ function DevUI() {
     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));
+                }, extras: (0, jsx_runtime_1.jsx)(BreakpointIndicator_1.BreakpointIndicator, {}, void 0) }, void 0), open && PanelComponent && ((0, jsx_runtime_1.jsx)(PanelPosition, { children: (0, jsx_runtime_1.jsx)(PanelComponent, {}, void 0) }, void 0))] }, void 0));
 }
-exports.DevUI = DevUI;
+exports.default = DevUI;
+var PanelPosition = (0, theme_1.styled)("div", {
+    position: "fixed",
+    left: "0px",
+    bottom: "calc($space$buttonHeight + 5px)",
+    zIndex: 10000000,
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "flex-end",
+});

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

@@ -1,9 +1,98 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 import { PanelID } from "../panels";
 declare type Props = {
     open: boolean;
     panel: PanelID | undefined;
+    extras?: ReactNode;
     onChange: (open: boolean, panel: PanelID | undefined) => void;
 };
 export declare function Launcher(props: Props): JSX.Element;
+export declare const MenuItem: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    state?: "active" | "inactive" | undefined;
+    color?: "default" | "black" | undefined;
+    small?: boolean | "true" | undefined;
+    tiny?: boolean | "true" | undefined;
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    space: {
+        smallButtonHeight: string;
+        buttonHeight: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    colors: {
+        bg: string;
+        bgHover: string;
+        bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: 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, {}>>, {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    space: {
+        smallButtonHeight: string;
+        buttonHeight: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    colors: {
+        bg: string;
+        bgHover: string;
+        bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: 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, {}>>;
 export {};