eddev 0.2.0-beta.11 → 0.2.0-beta.15

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/BreakpointColumnHeader.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/BreakpointColumnHeader.js

@@ -0,0 +1,47 @@
+"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");
+var Text_1 = require("./atoms/Text");
+function BreakpointColumnHeader(props) {
+    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", {
+    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",
+    color: "inherit",
+    "&:hover": {
+    // backgroundColor: "$bgHover",
+    },
+    svg: {
+        fill: "$fg",
+        width: "14px",
+        height: "14px",
+        display: "block",
+    },
+});

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

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

package/dev-ui/components/DevUI.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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);
+                }, 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.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

@@ -0,0 +1,98 @@
+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 {};

package/dev-ui/components/Launcher.js

@@ -0,0 +1,94 @@
+"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.MenuItem = 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");
+var Button_1 = require("./atoms/Button");
+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.jsxs)(Menu, { children: [props.open &&
+                        Object.entries(panels_1.DEV_UI_PANELS).map(function (_a) {
+                            var key = _a[0], panel = _a[1];
+                            return ((0, jsx_runtime_1.jsxs)(exports.MenuItem, __assign({ state: key === props.panel ? "active" : props.panel ? "inactive" : undefined, onClick: function () { return props.onChange(true, props.panel === key ? undefined : key); } }, { children: [panel.icon, panel.label] }), key));
+                        }), props.extras] }, 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: "$sm",
+    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)",
+    "&::-webkit-scrollbar": {
+        width: 0,
+        height: 0,
+        background: "transparent",
+    },
+    variants: {
+        open: {
+            true: {
+                opacity: 1,
+                pointerEvents: "all",
+            },
+            false: {
+                opacity: 0,
+            },
+        },
+    },
+});
+exports.MenuItem = (0, theme_1.styled)(Button_1.Button, {
+    marginRight: "4px",
+    defaultVariants: {
+        color: "dark",
+    },
+    flex: "0 0 auto",
+});

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactNode } from "react";
+declare type Props = PropsWithChildren<{
+    padded?: boolean;
+    title?: string;
+    buttons?: ReactNode;
+}>;
+export declare function PanelWrapper(props: Props): JSX.Element;
+export {};

package/dev-ui/components/PanelWrapper.js

@@ -0,0 +1,37 @@
+"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.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsxs)(Header, { children: [props.title && (0, jsx_runtime_1.jsx)(Title, { children: props.title }, void 0), " ", (0, jsx_runtime_1.jsx)(Buttons, { children: props.buttons }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Contents, { children: props.children }, void 0)] }, void 0));
+}
+exports.PanelWrapper = PanelWrapper;
+var Wrapper = (0, theme_1.styled)("div", {
+    backgroundColor: "$bg",
+    color: "$fg",
+    borderRadius: "$md",
+    maxWidth: "calc(100vw - 10px)",
+    fontFamily: "$body",
+    fontSize: "$md",
+    margin: "5px",
+});
+var Header = (0, theme_1.styled)("div", {
+    borderBottom: "1px solid $colors$bgHover",
+    padding: "$2",
+    display: "flex",
+});
+var Title = (0, theme_1.styled)("div", {
+    fontSize: "$lg",
+    flex: "1 1 auto",
+});
+var Contents = (0, theme_1.styled)("div", {
+    padding: "$2",
+});
+var Buttons = (0, theme_1.styled)("div", {
+    display: "flex",
+    alignItems: "center",
+    "> *": {
+        marginLeft: "5px",
+    },
+});