eddev 0.2.0-beta.0 → 0.2.0-beta.12

package/cli/display/components/ServerlessDisplay.js

@@ -0,0 +1,68 @@
+"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.ServerlessLog = exports.ServerlessDisplay = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ink_1 = require("ink");
+var react_1 = require("react");
+var useObservable_1 = require("../../../utils/useObservable");
+var StatusIcon_1 = require("./StatusIcon");
+var statusLabels = {
+    starting: "Starting",
+    compiling: "Compiling...",
+    error: "Error! See log for details.",
+    packaging: "Updating packages...",
+    preparing: "Preparing...",
+    success: "Success!",
+    waiting: "Waiting...",
+};
+function StatusLabel(props) {
+    var color = (0, react_1.useMemo)(function () {
+        if (props.status === "packaging" ||
+            props.status === "preparing" ||
+            props.status === "waiting" ||
+            props.status === "compiling") {
+            return "yellowBright";
+        }
+        else if (props.status === "error") {
+            return "redBright";
+        }
+        else if (props.status === "success") {
+            return "greenBright";
+        }
+        else {
+            return "whiteBright";
+        }
+    }, [props.status]);
+    var label = props.statusLabel || statusLabels[props.status];
+    if (props.duration) {
+        label += " (".concat(props.duration, "ms)");
+    }
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, __assign({ paddingX: 1, width: "100%", flexGrow: 1, flexDirection: "row", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, __assign({ color: color }, { children: label }), void 0), props.url && (0, jsx_runtime_1.jsxs)(ink_1.Text, __assign({ color: "white" }, { children: ["\u2728 ", props.url] }), void 0)] }), void 0));
+}
+function ServerlessDisplay(props) {
+    var data = (0, useObservable_1.useObservable)(props.serverless);
+    return ((0, jsx_runtime_1.jsx)(ink_1.Box, __assign({ width: "100%", flexDirection: "column" }, { children: (0, jsx_runtime_1.jsxs)(ink_1.Box, __assign({ width: "100%", paddingX: 1, borderStyle: "round", borderColor: data.status === "success" ? "green" : data.status === "error" ? "red" : "yellow", flexDirection: "row" }, { children: [(0, jsx_runtime_1.jsx)(ink_1.Box, __assign({ width: 2, flexGrow: 0, flexShrink: 0 }, { children: (0, jsx_runtime_1.jsx)(StatusIcon_1.StatusIcon, { icon: data.status === "success"
+                            ? "tick"
+                            : data.status === "preparing" || data.status === "packaging" || data.status === "compiling"
+                                ? "loading"
+                                : data.status === "error"
+                                    ? "error"
+                                    : "none" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ink_1.Box, { children: (0, jsx_runtime_1.jsxs)(ink_1.Box, __assign({ flexDirection: "row" }, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, __assign({ bold: true }, { children: data.title }), void 0), (0, jsx_runtime_1.jsx)(StatusLabel, { status: data.status, statusLabel: "", duration: data.status === "success" ? data.duration : undefined, url: data.url }, void 0)] }), void 0) }, void 0)] }), void 0) }), void 0));
+}
+exports.ServerlessDisplay = ServerlessDisplay;
+function ServerlessLog(props) {
+    var log = (0, useObservable_1.useObservable)(props.serverless).log;
+    return (0, jsx_runtime_1.jsx)(ink_1.Text, { children: log }, void 0);
+}
+exports.ServerlessLog = ServerlessLog;

package/components/NextRouter.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { RouteData } from "../routing/remoteProps";
+declare type Props = {
+    children: ReactNode;
+    path: string;
+    data: RouteData;
+};
+export declare function NextRouter({ children, path, data }: Props): JSX.Element;
+export {};

package/components/NextRouter.js

@@ -0,0 +1,36 @@
+"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.NextRouter = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var routing_1 = require("../routing");
+var router_1 = require("next/router");
+function NextRouter(_a) {
+    var children = _a.children, path = _a.path, data = _a.data;
+    var route = (0, router_1.useRouter)();
+    return ((0, jsx_runtime_1.jsx)(routing_1.RouterRoot, __assign({ url: path, data: data, onNavigateRequest: function (url) {
+            route.push(url);
+            // setPendingUrl({ popped: false, url })
+        }, onPreload: function (url) {
+            // if (isSameOrigin(url)) {
+            //   fetchProps(url)
+            // }
+        }, onNavigated: function () {
+            // if (pending && typeof pending.scrollPosition === "number") {
+            //   setScrollPosition({ value: pending.scrollPosition })
+            // } else {
+            //   setScrollPosition({ value: 0 })
+            // }
+        } }, { children: children }), void 0));
+}
+exports.NextRouter = NextRouter;

package/config/config-schema.d.ts

@@ -0,0 +1,50 @@
+import { z } from "zod";
+export declare const EDConfigSchema: z.ZodObject<{
+    $schema: z.ZodOptional<z.ZodString>;
+    serverless: z.ZodOptional<z.ZodObject<{
+        enabled: z.ZodBoolean;
+        uploads: z.ZodEnum<["proxy", "remote"]>;
+        plugins: z.ZodEnum<["proxy", "remote"]>;
+        theme: z.ZodEnum<["proxy", "copy", "remote"]>;
+        devAssets: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        apiOnly: z.ZodOptional<z.ZodBoolean>;
+    }, "strip", z.ZodTypeAny, {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    }, {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    }>>;
+    devUI: z.ZodEnum<["disabled", "enabled"]>;
+}, "strip", z.ZodTypeAny, {
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+}, {
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+}>;
+export declare type EDConfig = z.infer<typeof EDConfigSchema>;

package/config/config-schema.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EDConfigSchema = void 0;
+var zod_1 = require("zod");
+exports.EDConfigSchema = zod_1.z.object({
+    $schema: zod_1.z.string().optional(),
+    serverless: zod_1.z
+        .object({
+        enabled: zod_1.z.boolean(),
+        uploads: zod_1.z.enum(["proxy", "remote"]),
+        plugins: zod_1.z.enum(["proxy", "remote"]),
+        theme: zod_1.z.enum(["proxy", "copy", "remote"]),
+        devAssets: zod_1.z.array(zod_1.z.string()).optional(),
+        apiOnly: zod_1.z.boolean().optional(),
+    })
+        .optional(),
+    devUI: zod_1.z.enum(["disabled", "enabled"]),
+});

package/config/create-schema-file.d.ts

@@ -0,0 +1 @@
+export declare function createConfigSchemaFile(location: string): void;

package/config/create-schema-file.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfigSchemaFile = void 0;
+var fs_1 = require("fs");
+var zod_to_json_schema_1 = __importDefault(require("zod-to-json-schema"));
+var config_schema_1 = require("./config-schema");
+function createConfigSchemaFile(location) {
+    var schema = (0, zod_to_json_schema_1.default)(config_schema_1.EDConfigSchema);
+    var content = JSON.stringify(schema, null, 2);
+    if ((0, fs_1.existsSync)(location)) {
+        var existingContent = (0, fs_1.readFileSync)(location).toString();
+        if (existingContent === content)
+            return;
+    }
+    (0, fs_1.writeFileSync)(location, content);
+}
+exports.createConfigSchemaFile = createConfigSchemaFile;

package/config/get-config.d.ts

@@ -0,0 +1,36 @@
+export declare function getEDConfig(dir?: string): import("zod").SafeParseReturnType<{
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+}, {
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+}>;
+export declare function getEDConfigUnwrapped(dir?: string): {
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+};
+export declare function getEDConfigFile(dir?: string): string;

package/config/get-config.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEDConfigFile = exports.getEDConfigUnwrapped = exports.getEDConfig = void 0;
+var fs_1 = require("fs");
+var path_1 = require("path");
+var parse_config_1 = require("./parse-config");
+function getEDConfig(dir) {
+    if (dir === void 0) { dir = process.cwd(); }
+    var configFile = getEDConfigFile(dir);
+    if (!(0, fs_1.existsSync)(configFile)) {
+        throw new Error("No config file found at ".concat(configFile));
+    }
+    var config = JSON.parse((0, fs_1.readFileSync)(configFile).toString());
+    return (0, parse_config_1.parseConfig)(config);
+}
+exports.getEDConfig = getEDConfig;
+function getEDConfigUnwrapped(dir) {
+    if (dir === void 0) { dir = process.cwd(); }
+    var result = getEDConfig(dir);
+    if (result.success) {
+        return result.data;
+    }
+    else {
+        throw new Error(result.error.toString());
+    }
+}
+exports.getEDConfigUnwrapped = getEDConfigUnwrapped;
+function getEDConfigFile(dir) {
+    if (dir === void 0) { dir = process.cwd(); }
+    return (0, path_1.join)(dir, "ed.config.json");
+}
+exports.getEDConfigFile = getEDConfigFile;

package/config/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./config-schema";
+export * from "./parse-config";

package/config/index.js

@@ -0,0 +1,14 @@
+"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("./config-schema"), exports);
+__exportStar(require("./parse-config"), exports);

package/config/parse-config.d.ts

@@ -0,0 +1,23 @@
+export declare function parseConfig(config: any): import("zod").SafeParseReturnType<{
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+}, {
+    $schema?: string | undefined;
+    serverless?: {
+        devAssets?: string[] | undefined;
+        apiOnly?: boolean | undefined;
+        enabled: boolean;
+        uploads: "proxy" | "remote";
+        plugins: "proxy" | "remote";
+        theme: "copy" | "proxy" | "remote";
+    } | undefined;
+    devUI: "disabled" | "enabled";
+}>;

package/config/parse-config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseConfig = void 0;
+var config_schema_1 = require("./config-schema");
+function parseConfig(config) {
+    return config_schema_1.EDConfigSchema.safeParse(config);
+}
+exports.parseConfig = parseConfig;

package/config/print-zod-errors.d.ts

@@ -0,0 +1,2 @@
+import type { ZodError } from "zod";
+export declare function printZodErrors(err: ZodError): void;

package/config/print-zod-errors.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.printZodErrors = void 0;
+var chalk_1 = __importDefault(require("chalk"));
+function printZodErrors(err) {
+    console.log(chalk_1.default.red("Error parsing ed.config.json:"));
+    err.issues.forEach(function (issue) {
+        console.log("- ".concat(issue.path.join("."), ": ").concat(issue.message));
+    });
+}
+exports.printZodErrors = printZodErrors;

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;