mogh_ui 0.1.0

package/dist/color.cjs

@@ -0,0 +1,62 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_exports = {};
+__export(color_exports, {
+  colorByIntention: () => colorByIntention,
+  hexColorByIntention: () => hexColorByIntention
+});
+module.exports = __toCommonJS(color_exports);
+function colorByIntention(intention) {
+  switch (intention) {
+    case "Good":
+      return "green";
+    case "Neutral":
+      return "blue";
+    case "Warning":
+      return "yellow";
+    case "Critical":
+      return "red";
+    case "Unknown":
+      return "purple";
+    case "None":
+      return void 0;
+  }
+}
+function hexColorByIntention(intention) {
+  switch (intention) {
+    case "Good":
+      return "#22C55E";
+    case "Neutral":
+      return "#3B82F6";
+    case "Warning":
+      return "#EAB308";
+    case "Critical":
+      return "#EF0044";
+    case "Unknown":
+      return "#A855F7";
+    case "None":
+      return void 0;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colorByIntention,
+  hexColorByIntention
+});
+//# sourceMappingURL=color.cjs.map

package/dist/color.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color.ts"],"sourcesContent":["export type ColorIntention =\n  | \"Good\"\n  | \"Neutral\"\n  | \"Warning\"\n  | \"Critical\"\n  | \"Unknown\"\n  | \"None\";\n\nexport function colorByIntention(intention: ColorIntention) {\n  switch (intention) {\n    case \"Good\":\n      return \"green\";\n    case \"Neutral\":\n      return \"blue\";\n    case \"Warning\":\n      return \"yellow\";\n    case \"Critical\":\n      return \"red\";\n    case \"Unknown\":\n      return \"purple\";\n    case \"None\":\n      return undefined;\n  }\n}\n\nexport function hexColorByIntention(intention: ColorIntention) {\n  switch (intention) {\n    case \"Good\":\n      return \"#22C55E\";\n    case \"Neutral\":\n      return \"#3B82F6\";\n    case \"Warning\":\n      return \"#EAB308\";\n    case \"Critical\":\n      return \"#EF0044\";\n    case \"Unknown\":\n      return \"#A855F7\";\n    case \"None\":\n      return undefined;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,iBAAiB,WAA2B;AAC1D,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAEO,SAAS,oBAAoB,WAA2B;AAC7D,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/color.d.cts

@@ -0,0 +1,5 @@
+type ColorIntention = "Good" | "Neutral" | "Warning" | "Critical" | "Unknown" | "None";
+declare function colorByIntention(intention: ColorIntention): "green" | "blue" | "yellow" | "red" | "purple" | undefined;
+declare function hexColorByIntention(intention: ColorIntention): "#22C55E" | "#3B82F6" | "#EAB308" | "#EF0044" | "#A855F7" | undefined;
+
+export { type ColorIntention, colorByIntention, hexColorByIntention };

package/dist/color.d.ts

@@ -0,0 +1,5 @@
+type ColorIntention = "Good" | "Neutral" | "Warning" | "Critical" | "Unknown" | "None";
+declare function colorByIntention(intention: ColorIntention): "green" | "blue" | "yellow" | "red" | "purple" | undefined;
+declare function hexColorByIntention(intention: ColorIntention): "#22C55E" | "#3B82F6" | "#EAB308" | "#EF0044" | "#A855F7" | undefined;
+
+export { type ColorIntention, colorByIntention, hexColorByIntention };

package/dist/color.js

@@ -0,0 +1,37 @@
+function colorByIntention(intention) {
+  switch (intention) {
+    case "Good":
+      return "green";
+    case "Neutral":
+      return "blue";
+    case "Warning":
+      return "yellow";
+    case "Critical":
+      return "red";
+    case "Unknown":
+      return "purple";
+    case "None":
+      return void 0;
+  }
+}
+function hexColorByIntention(intention) {
+  switch (intention) {
+    case "Good":
+      return "#22C55E";
+    case "Neutral":
+      return "#3B82F6";
+    case "Warning":
+      return "#EAB308";
+    case "Critical":
+      return "#EF0044";
+    case "Unknown":
+      return "#A855F7";
+    case "None":
+      return void 0;
+  }
+}
+export {
+  colorByIntention,
+  hexColorByIntention
+};
+//# sourceMappingURL=color.js.map

package/dist/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color.ts"],"sourcesContent":["export type ColorIntention =\n  | \"Good\"\n  | \"Neutral\"\n  | \"Warning\"\n  | \"Critical\"\n  | \"Unknown\"\n  | \"None\";\n\nexport function colorByIntention(intention: ColorIntention) {\n  switch (intention) {\n    case \"Good\":\n      return \"green\";\n    case \"Neutral\":\n      return \"blue\";\n    case \"Warning\":\n      return \"yellow\";\n    case \"Critical\":\n      return \"red\";\n    case \"Unknown\":\n      return \"purple\";\n    case \"None\":\n      return undefined;\n  }\n}\n\nexport function hexColorByIntention(intention: ColorIntention) {\n  switch (intention) {\n    case \"Good\":\n      return \"#22C55E\";\n    case \"Neutral\":\n      return \"#3B82F6\";\n    case \"Warning\":\n      return \"#EAB308\";\n    case \"Critical\":\n      return \"#EF0044\";\n    case \"Unknown\":\n      return \"#A855F7\";\n    case \"None\":\n      return undefined;\n  }\n}\n"],"mappings":"AAQO,SAAS,iBAAiB,WAA2B;AAC1D,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAEO,SAAS,oBAAoB,WAA2B;AAC7D,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/components/back-button.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var back_button_exports = {};
+__export(back_button_exports, {
+  BackButton: () => BackButton
+});
+module.exports = __toCommonJS(back_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@mantine/core");
+var import_lucide_react = require("lucide-react");
+var import_react_router_dom = require("react-router-dom");
+function BackButton({ to = -1, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.Button,
+    {
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { size: "1rem" }),
+      renderRoot: (props2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Link, { to, ...props2 }),
+      ...props,
+      children: "Back"
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackButton
+});
+//# sourceMappingURL=back-button.cjs.map

package/dist/components/back-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/back-button.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@mantine/core\";\nimport { ChevronLeft } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\n\nexport interface BackButtonProps extends ButtonProps {\n  to?: string | number;\n}\n\nexport function BackButton({ to = -1, ...props }: BackButtonProps) {\n  return (\n    <Button\n      leftSection={<ChevronLeft size=\"1rem\" />}\n      renderRoot={(props) => <Link to={to} {...props} />}\n      {...props}\n    >\n      Back\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWmB;AAXnB,kBAAoC;AACpC,0BAA4B;AAC5B,8BAAqB;AAMd,SAAS,WAAW,EAAE,KAAK,IAAI,GAAG,MAAM,GAAoB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,4CAAC,mCAAY,MAAK,QAAO;AAAA,MACtC,YAAY,CAACA,WAAU,4CAAC,gCAAK,IAAS,GAAGA,QAAO;AAAA,MAC/C,GAAG;AAAA,MACL;AAAA;AAAA,EAED;AAEJ;","names":["props"]}

package/dist/components/back-button.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@mantine/core';
+
+interface BackButtonProps extends ButtonProps {
+    to?: string | number;
+}
+declare function BackButton({ to, ...props }: BackButtonProps): react_jsx_runtime.JSX.Element;
+
+export { BackButton, type BackButtonProps };

package/dist/components/back-button.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@mantine/core';
+
+interface BackButtonProps extends ButtonProps {
+    to?: string | number;
+}
+declare function BackButton({ to, ...props }: BackButtonProps): react_jsx_runtime.JSX.Element;
+
+export { BackButton, type BackButtonProps };

package/dist/components/back-button.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@mantine/core";
+import { ChevronLeft } from "lucide-react";
+import { Link } from "react-router-dom";
+function BackButton({ to = -1, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      leftSection: /* @__PURE__ */ jsx(ChevronLeft, { size: "1rem" }),
+      renderRoot: (props2) => /* @__PURE__ */ jsx(Link, { to, ...props2 }),
+      ...props,
+      children: "Back"
+    }
+  );
+}
+export {
+  BackButton
+};
+//# sourceMappingURL=back-button.js.map

package/dist/components/back-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/back-button.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@mantine/core\";\nimport { ChevronLeft } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\n\nexport interface BackButtonProps extends ButtonProps {\n  to?: string | number;\n}\n\nexport function BackButton({ to = -1, ...props }: BackButtonProps) {\n  return (\n    <Button\n      leftSection={<ChevronLeft size=\"1rem\" />}\n      renderRoot={(props) => <Link to={to} {...props} />}\n      {...props}\n    >\n      Back\n    </Button>\n  );\n}\n"],"mappings":"AAWmB;AAXnB,SAAS,cAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AAMd,SAAS,WAAW,EAAE,KAAK,IAAI,GAAG,MAAM,GAAoB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,oBAAC,eAAY,MAAK,QAAO;AAAA,MACtC,YAAY,CAACA,WAAU,oBAAC,QAAK,IAAS,GAAGA,QAAO;AAAA,MAC/C,GAAG;AAAA,MACL;AAAA;AAAA,EAED;AAEJ;","names":["props"]}

package/dist/components/config/confirm.cjs

@@ -0,0 +1,191 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var confirm_exports = {};
+__export(confirm_exports, {
+  ConfirmUpdate: () => ConfirmUpdate
+});
+module.exports = __toCommonJS(confirm_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_hooks = require("@mantine/hooks");
+var import_core = require("@mantine/core");
+var import_lucide_react = require("lucide-react");
+var import_show_hide_button = require("../show-hide-button");
+var import_monaco = require("../monaco");
+var import_utils = require("../../utils");
+var import_formatting = require("../../formatting");
+var import_hooks2 = require("../../hooks");
+function ConfirmUpdate({
+  original,
+  update,
+  onConfirm,
+  loading,
+  disabled,
+  language,
+  fileContentsLanguage,
+  fullWidth,
+  openKeyListener = true,
+  confirmKeyListener = true,
+  enableFancyToml
+}) {
+  const [opened, { open, close }] = (0, import_hooks.useDisclosure)();
+  const handleConfirm = async () => {
+    await onConfirm();
+    close();
+  };
+  (0, import_hooks2.useKeyListener)("Enter", () => {
+    if (!opened || !confirmKeyListener) {
+      return;
+    }
+    handleConfirm();
+  });
+  (0, import_hooks2.useCtrlKeyListener)("Enter", () => {
+    if (opened || !openKeyListener) {
+      return;
+    }
+    open();
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Modal,
+      {
+        title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xl", children: "Confirm Update" }),
+        opened,
+        onClose: close,
+        size: "auto",
+        styles: { content: { overflowY: "hidden" } },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_core.Stack,
+          {
+            gap: "xl",
+            w: 1400,
+            maw: {
+              base: "calc(100vw - 100px)",
+              xs: "calc(100vw - 150px)",
+              sm: "calc(100vw - 200px)",
+              md: "calc(100vw - 250px)"
+            },
+            my: "lg",
+            style: { overflowY: "hidden" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.Stack,
+                {
+                  mah: "min(calc(100vh - 300px), 800px)",
+                  style: { overflowY: "auto" },
+                  children: Object.entries(update).filter(([key, val]) => !(0, import_utils.deepCompare)(original[key], val)).map(([key, val], i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    ConfirmUpdateItem,
+                    {
+                      _key: key,
+                      val,
+                      previous: original,
+                      language,
+                      fileContentsLanguage,
+                      enableFancyToml
+                    },
+                    i
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Group, { justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.Button,
+                {
+                  leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Save, { size: "1rem" }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleConfirm();
+                  },
+                  w: { base: "100%", xs: 200 },
+                  loading,
+                  children: "Save"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Button,
+      {
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Save, { size: "1rem" }),
+        onClick: (e) => {
+          e.stopPropagation();
+          open();
+        },
+        disabled,
+        w: fullWidth ? void 0 : 100,
+        fullWidth,
+        children: "Save"
+      }
+    )
+  ] });
+}
+function ConfirmUpdateItem({
+  _key,
+  val: _val,
+  previous,
+  language,
+  fileContentsLanguage,
+  fileContentsKeys = ["file_contents"],
+  keyValueFields,
+  enableFancyToml
+}) {
+  const [show, setShow] = (0, import_react.useState)(true);
+  const val = typeof _val === "string" ? _val : Array.isArray(_val) ? _val.length > 0 && ["string", "number", "boolean"].includes(typeof _val[0]) ? JSON.stringify(_val) : JSON.stringify(_val, null, 2) : JSON.stringify(_val, null, 2);
+  const prev_val = typeof previous[_key] === "string" ? previous[_key] : Array.isArray(previous[_key]) ? previous[_key].length > 0 && ["string", "number", "boolean"].includes(typeof previous[_key][0]) ? JSON.stringify(previous[_key]) : JSON.stringify(previous[_key], null, 2) : JSON.stringify(previous[_key], null, 2);
+  const showDiff = val?.includes("\n") || prev_val?.includes("\n") || Math.max(val?.length ?? 0, prev_val?.length ?? 0) > 30;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.Stack,
+    {
+      hidden: val === prev_val,
+      gap: "xs",
+      p: "xl",
+      className: "bordered-light",
+      bdrs: "md",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { justify: "space-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { c: "Neutral", children: (0, import_formatting.fmtSnakeCaseToUpperSpaceCase)(_key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_show_hide_button.ShowHideButton, { show, setShow })
+        ] }),
+        show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: showDiff ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_monaco.MonacoDiffEditor,
+          {
+            original: prev_val,
+            modified: val,
+            language: language ?? (keyValueFields?.includes(_key) ? "key_value" : fileContentsKeys?.includes(_key) ? fileContentsLanguage : "json"),
+            enableFancyToml,
+            readOnly: true
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Box, { component: "pre", mih: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { component: "span", c: "Critical", children: prev_val || "None" }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { component: "span", c: "dimmed", children: "->" }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { component: "span", c: "Good", children: val || "None" })
+        ] }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfirmUpdate
+});
+//# sourceMappingURL=confirm.cjs.map

package/dist/components/config/confirm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/confirm.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useDisclosure } from \"@mantine/hooks\";\nimport { Box, Button, Group, Modal, Stack, Text } from \"@mantine/core\";\nimport { Save } from \"lucide-react\";\nimport { ShowHideButton } from \"../show-hide-button\";\nimport { MonacoDiffEditor, MonacoLanguage } from \"../monaco\";\nimport { deepCompare } from \"../../utils\";\nimport { fmtSnakeCaseToUpperSpaceCase } from \"../../formatting\";\nimport { useCtrlKeyListener, useKeyListener } from \"../../hooks\";\n\nexport interface ConfirmUpdateProps<T> {\n  original: T;\n  update: Partial<T>;\n  onConfirm: () => Promise<unknown>;\n  loading?: boolean;\n  disabled: boolean;\n  language?: MonacoLanguage;\n  fileContentsLanguage?: MonacoLanguage;\n  fullWidth?: boolean;\n  openKeyListener?: boolean;\n  confirmKeyListener?: boolean;\n  enableFancyToml?: boolean;\n}\n\nexport function ConfirmUpdate<T>({\n  original,\n  update,\n  onConfirm,\n  loading,\n  disabled,\n  language,\n  fileContentsLanguage,\n  fullWidth,\n  openKeyListener = true,\n  confirmKeyListener = true,\n  enableFancyToml,\n}: ConfirmUpdateProps<T>) {\n  const [opened, { open, close }] = useDisclosure();\n\n  const handleConfirm = async () => {\n    await onConfirm();\n    close();\n  };\n\n  useKeyListener(\"Enter\", () => {\n    if (!opened || !confirmKeyListener) {\n      return;\n    }\n    handleConfirm();\n  });\n\n  useCtrlKeyListener(\"Enter\", () => {\n    if (opened || !openKeyListener) {\n      return;\n    }\n    open();\n  });\n\n  return (\n    <>\n      <Modal\n        title={<Text size=\"xl\">Confirm Update</Text>}\n        opened={opened}\n        onClose={close}\n        size=\"auto\"\n        styles={{ content: { overflowY: \"hidden\" } }}\n      >\n        <Stack\n          gap=\"xl\"\n          w={1400}\n          maw={{\n            base: \"calc(100vw - 100px)\",\n            xs: \"calc(100vw - 150px)\",\n            sm: \"calc(100vw - 200px)\",\n            md: \"calc(100vw - 250px)\",\n          }}\n          my=\"lg\"\n          style={{ overflowY: \"hidden\" }}\n        >\n          <Stack\n            mah=\"min(calc(100vh - 300px), 800px)\"\n            style={{ overflowY: \"auto\" }}\n          >\n            {Object.entries(update)\n              .filter(([key, val]) => !deepCompare((original as any)[key], val))\n              .map(([key, val], i) => (\n                <ConfirmUpdateItem\n                  key={i}\n                  _key={key as any}\n                  val={val as any}\n                  previous={original}\n                  language={language}\n                  fileContentsLanguage={fileContentsLanguage}\n                  enableFancyToml={enableFancyToml}\n                />\n              ))}\n          </Stack>\n          <Group justify=\"flex-end\">\n            <Button\n              leftSection={<Save size=\"1rem\" />}\n              onClick={(e) => {\n                e.stopPropagation();\n                handleConfirm();\n              }}\n              w={{ base: \"100%\", xs: 200 }}\n              loading={loading}\n            >\n              Save\n            </Button>\n          </Group>\n        </Stack>\n      </Modal>\n\n      <Button\n        leftSection={<Save size=\"1rem\" />}\n        onClick={(e) => {\n          e.stopPropagation();\n          open();\n        }}\n        disabled={disabled}\n        w={fullWidth ? undefined : 100}\n        fullWidth={fullWidth}\n      >\n        Save\n      </Button>\n    </>\n  );\n}\n\nfunction ConfirmUpdateItem<T>({\n  _key,\n  val: _val,\n  previous,\n  language,\n  fileContentsLanguage,\n  fileContentsKeys = [\"file_contents\"],\n  keyValueFields,\n  enableFancyToml,\n}: {\n  _key: keyof T;\n  val: T[keyof T];\n  previous: T;\n  language?: MonacoLanguage;\n  fileContentsLanguage?: MonacoLanguage;\n  fileContentsKeys?: string[];\n  keyValueFields?: string[];\n  enableFancyToml?: boolean;\n}) {\n  const [show, setShow] = useState(true);\n  const val =\n    typeof _val === \"string\"\n      ? _val\n      : Array.isArray(_val)\n        ? _val.length > 0 &&\n          [\"string\", \"number\", \"boolean\"].includes(typeof _val[0])\n          ? JSON.stringify(_val)\n          : JSON.stringify(_val, null, 2)\n        : JSON.stringify(_val, null, 2);\n  const prev_val =\n    typeof previous[_key] === \"string\"\n      ? previous[_key]\n      : Array.isArray(previous[_key])\n        ? previous[_key].length > 0 &&\n          [\"string\", \"number\", \"boolean\"].includes(typeof previous[_key][0])\n          ? JSON.stringify(previous[_key])\n          : JSON.stringify(previous[_key], null, 2)\n        : JSON.stringify(previous[_key], null, 2);\n  const showDiff =\n    val?.includes(\"\\n\") ||\n    prev_val?.includes(\"\\n\") ||\n    Math.max(val?.length ?? 0, prev_val?.length ?? 0) > 30;\n\n  return (\n    <Stack\n      hidden={val === prev_val}\n      gap=\"xs\"\n      p=\"xl\"\n      className=\"bordered-light\"\n      bdrs=\"md\"\n    >\n      <Group justify=\"space-between\">\n        <Text c=\"Neutral\">{fmtSnakeCaseToUpperSpaceCase(_key as string)}</Text>\n        <ShowHideButton show={show} setShow={setShow} />\n      </Group>\n      {show && (\n        <>\n          {showDiff ? (\n            <MonacoDiffEditor\n              original={prev_val}\n              modified={val}\n              language={\n                language ??\n                (keyValueFields?.includes(_key as string)\n                  ? \"key_value\"\n                  : fileContentsKeys?.includes(_key as string)\n                    ? fileContentsLanguage\n                    : \"json\")\n              }\n              enableFancyToml={enableFancyToml}\n              readOnly\n            />\n          ) : (\n            <Box component=\"pre\" mih={0}>\n              <Text component=\"span\" c=\"Critical\">\n                {prev_val || \"None\"}\n              </Text>{\" \"}\n              <Text component=\"span\" c=\"dimmed\">\n                {\"->\"}\n              </Text>{\" \"}\n              <Text component=\"span\" c=\"Good\">\n                {val || \"None\"}\n              </Text>\n            </Box>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"mappings":"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","names":["import_hooks"]}

package/dist/components/config/confirm.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MonacoLanguage } from '../monaco/index.cjs';
+import '@mantine/core';
+
+interface ConfirmUpdateProps<T> {
+    original: T;
+    update: Partial<T>;
+    onConfirm: () => Promise<unknown>;
+    loading?: boolean;
+    disabled: boolean;
+    language?: MonacoLanguage;
+    fileContentsLanguage?: MonacoLanguage;
+    fullWidth?: boolean;
+    openKeyListener?: boolean;
+    confirmKeyListener?: boolean;
+    enableFancyToml?: boolean;
+}
+declare function ConfirmUpdate<T>({ original, update, onConfirm, loading, disabled, language, fileContentsLanguage, fullWidth, openKeyListener, confirmKeyListener, enableFancyToml, }: ConfirmUpdateProps<T>): react_jsx_runtime.JSX.Element;
+
+export { ConfirmUpdate, type ConfirmUpdateProps };

package/dist/components/config/confirm.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MonacoLanguage } from '../monaco/index.js';
+import '@mantine/core';
+
+interface ConfirmUpdateProps<T> {
+    original: T;
+    update: Partial<T>;
+    onConfirm: () => Promise<unknown>;
+    loading?: boolean;
+    disabled: boolean;
+    language?: MonacoLanguage;
+    fileContentsLanguage?: MonacoLanguage;
+    fullWidth?: boolean;
+    openKeyListener?: boolean;
+    confirmKeyListener?: boolean;
+    enableFancyToml?: boolean;
+}
+declare function ConfirmUpdate<T>({ original, update, onConfirm, loading, disabled, language, fileContentsLanguage, fullWidth, openKeyListener, confirmKeyListener, enableFancyToml, }: ConfirmUpdateProps<T>): react_jsx_runtime.JSX.Element;
+
+export { ConfirmUpdate, type ConfirmUpdateProps };

package/dist/components/config/confirm.js

@@ -0,0 +1,167 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import { Box, Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { Save } from "lucide-react";
+import { ShowHideButton } from "../show-hide-button";
+import { MonacoDiffEditor } from "../monaco";
+import { deepCompare } from "../../utils";
+import { fmtSnakeCaseToUpperSpaceCase } from "../../formatting";
+import { useCtrlKeyListener, useKeyListener } from "../../hooks";
+function ConfirmUpdate({
+  original,
+  update,
+  onConfirm,
+  loading,
+  disabled,
+  language,
+  fileContentsLanguage,
+  fullWidth,
+  openKeyListener = true,
+  confirmKeyListener = true,
+  enableFancyToml
+}) {
+  const [opened, { open, close }] = useDisclosure();
+  const handleConfirm = async () => {
+    await onConfirm();
+    close();
+  };
+  useKeyListener("Enter", () => {
+    if (!opened || !confirmKeyListener) {
+      return;
+    }
+    handleConfirm();
+  });
+  useCtrlKeyListener("Enter", () => {
+    if (opened || !openKeyListener) {
+      return;
+    }
+    open();
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        title: /* @__PURE__ */ jsx(Text, { size: "xl", children: "Confirm Update" }),
+        opened,
+        onClose: close,
+        size: "auto",
+        styles: { content: { overflowY: "hidden" } },
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            gap: "xl",
+            w: 1400,
+            maw: {
+              base: "calc(100vw - 100px)",
+              xs: "calc(100vw - 150px)",
+              sm: "calc(100vw - 200px)",
+              md: "calc(100vw - 250px)"
+            },
+            my: "lg",
+            style: { overflowY: "hidden" },
+            children: [
+              /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  mah: "min(calc(100vh - 300px), 800px)",
+                  style: { overflowY: "auto" },
+                  children: Object.entries(update).filter(([key, val]) => !deepCompare(original[key], val)).map(([key, val], i) => /* @__PURE__ */ jsx(
+                    ConfirmUpdateItem,
+                    {
+                      _key: key,
+                      val,
+                      previous: original,
+                      language,
+                      fileContentsLanguage,
+                      enableFancyToml
+                    },
+                    i
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  leftSection: /* @__PURE__ */ jsx(Save, { size: "1rem" }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleConfirm();
+                  },
+                  w: { base: "100%", xs: 200 },
+                  loading,
+                  children: "Save"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        leftSection: /* @__PURE__ */ jsx(Save, { size: "1rem" }),
+        onClick: (e) => {
+          e.stopPropagation();
+          open();
+        },
+        disabled,
+        w: fullWidth ? void 0 : 100,
+        fullWidth,
+        children: "Save"
+      }
+    )
+  ] });
+}
+function ConfirmUpdateItem({
+  _key,
+  val: _val,
+  previous,
+  language,
+  fileContentsLanguage,
+  fileContentsKeys = ["file_contents"],
+  keyValueFields,
+  enableFancyToml
+}) {
+  const [show, setShow] = useState(true);
+  const val = typeof _val === "string" ? _val : Array.isArray(_val) ? _val.length > 0 && ["string", "number", "boolean"].includes(typeof _val[0]) ? JSON.stringify(_val) : JSON.stringify(_val, null, 2) : JSON.stringify(_val, null, 2);
+  const prev_val = typeof previous[_key] === "string" ? previous[_key] : Array.isArray(previous[_key]) ? previous[_key].length > 0 && ["string", "number", "boolean"].includes(typeof previous[_key][0]) ? JSON.stringify(previous[_key]) : JSON.stringify(previous[_key], null, 2) : JSON.stringify(previous[_key], null, 2);
+  const showDiff = val?.includes("\n") || prev_val?.includes("\n") || Math.max(val?.length ?? 0, prev_val?.length ?? 0) > 30;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      hidden: val === prev_val,
+      gap: "xs",
+      p: "xl",
+      className: "bordered-light",
+      bdrs: "md",
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx(Text, { c: "Neutral", children: fmtSnakeCaseToUpperSpaceCase(_key) }),
+          /* @__PURE__ */ jsx(ShowHideButton, { show, setShow })
+        ] }),
+        show && /* @__PURE__ */ jsx(Fragment, { children: showDiff ? /* @__PURE__ */ jsx(
+          MonacoDiffEditor,
+          {
+            original: prev_val,
+            modified: val,
+            language: language ?? (keyValueFields?.includes(_key) ? "key_value" : fileContentsKeys?.includes(_key) ? fileContentsLanguage : "json"),
+            enableFancyToml,
+            readOnly: true
+          }
+        ) : /* @__PURE__ */ jsxs(Box, { component: "pre", mih: 0, children: [
+          /* @__PURE__ */ jsx(Text, { component: "span", c: "Critical", children: prev_val || "None" }),
+          " ",
+          /* @__PURE__ */ jsx(Text, { component: "span", c: "dimmed", children: "->" }),
+          " ",
+          /* @__PURE__ */ jsx(Text, { component: "span", c: "Good", children: val || "None" })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  ConfirmUpdate
+};
+//# sourceMappingURL=confirm.js.map