sales-frontend-components 0.0.58 → 0.0.60

package/dist/index.cjs.js

@@ -6,6 +6,10 @@ var salesFrontendDesignSystem = require('sales-frontend-design-system');
 var React = require('react');
 var styles = require('./step-indicator/step-indicator.module.scss');
 var styles$1 = require('./camera/camera.module.scss');
+var styles$2 = require('./debug-tool/debug-tool.module.scss');
+var salesFrontendUtils = require('sales-frontend-utils');
+var salesFrontendApi = require('sales-frontend-api');
+var styles$3 = require('./debug-tool/features/network-log/network-log.module.scss');
 
 const FormCheckboxButton = ({
   name,
@@ -793,7 +797,729 @@ function useCanvasPaint(paintProps = {}) {
 
 const testSignatureBase64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAABkCAYAAACoy2Z3AAAQAElEQVR4AeydV6g2ORnHj733smvBiliws9jbhYoFREVQsYIFVBBRUBQRvbCgKIgFCyqoCCqiXiioN/ZesKEXYlkVXV11Xdde/z+/L/u95z0zSeadlmT+h+RkJvMkeZ5/kudJm3kveeQ/I1AvAncX67+S/+8B/glKM6X7uzIbwofI7YxA3QjYgNRdf1vl/p4S/Dz5L8qfLT/UfVkJLpSfymE8LjtVZs7HCNSCgA1ILTVlPkHg4/r3Z/nPy19XPteh4En7ICW4sjwzl48qHOMwQP9RBsw6hhoP0h0dKbGdEagZARuQmmuvfd6fLhF/Kv9veRT1gxVeUT7HMUN5nwjvKn95+YfKf0IeA6RglIOfqyiHS8jnun+IEHr8pXRtZwSqR8AGpPoqbE6Ar0miv8pjMN6q8Mbyue30t6J9vjxKmqWtx+n6q/JTOWYy8JXDz67BgJ/LTcWE8zECpSCQ0xFK4XWPD982gsBLJMfv5VHM+HN0zYxBQbY7V5S3l2dZ6zUKp3bMWuAtd6nqn2LABkMg2LWNgA1I2/VbqnTvFmP/kkcpv0zhNeQPcT9SolvIM0v5rsKpXTAcuctmyMPMI9fQTM2v8zMCiyJgA7Io3JstjKUolpcYmaNkOUJ76D4A6X8oJK8vj/HAiOhyUjfUcDCDYpmK/rSJmcekaDuzahGgwVfLvBkvFoEPiTNOGqHs8WyGX1txl5Y/xGF4vqWEN5Knzd5aIe9/KJjUYdTgd8iMA8NxrUm5cGZGoBIE6IyVsGo2K0DgXeIRBfxIhShWBQc7Nqw/otTkw5LQnXX9c/k5HKeq4Jtltdz84c/9Jxct0zWJgDvAGtXaXpm/kUgo4CcrHONYCnqeMsBosJH+CF3P5cJJL/ge0g8wHIG/uXhzvkagCgSGdJwqBDKTiyDA+xi7Cvg6B5bKhvNXlBaFjGcp6HW6n9sx48BADSnnLyKGx6HplMzOCLSJgA1Im/U6h1SPV6bsRTBi563uQxUpeyNvUV4oYzac76brpdwHVRD8D2n3f1IaeL2SQrv6EbAEEyIwpCNNWKyzqgiBq4tXlP57FB6yCc7y1quVFiWMZ6P6Gbpf2nGy6lGZhWJk+FQJ/F41M43JjMDmELAB2VyVZwuMsWDG8QelQJEqyHYYHE5eke4spXqB/FruIhWMQcg5WcXSFjzTL66mdHbtIsBeFu1i1xPXrsQzSEZHmSFbZ1k5Aoy+MR4YkWOiJG44xXQf0TDLeLvCNV0wHDlLTxeIUQzHUHmVzK5wBGgHDGh2DQXXnOzbZ504G5F9VCL3NiARcDb46AeSmc7FhwJ1meX+Jiq+cosCvoyuPye/pmOzGxlyDAd8YuwOfROe9PZlIsCSZWgHtM1cLjEitOlc+k3T2YBsuvovFv5puqKz3UphjuOtcjol/gpKwFduFazqguGAnxxGGJXCP2EOvWnqQCAYjpwlyz6JONzR92zF+PKKtgEpr06W5IiNcQzH2zIL/YnoULp8tFCXRbhwnDjXcMA0x4eZeXBt3wYC/M4LbXmM4dhFwktZu2j0XNuA9ADTeHQ4zsrR3BxRmdJjOG6WQ7wQTTAcQ44TYziQwyPMhSpp5mJ48ZQZJIaD49ZTFsdS1pT5NZmXDUiT1dor1Mf0hM425Dgrs40ho3sVMavj44kojSGGAwNowzFrtSyaOfVJO2bvinodUzhtaUz6Tae1AdlG9QfD8ZAB4j5GtLQP9jt0WYTjmO3NxUmu0mBfBNqSDKDYtxuBAAp/6AwytAPawr5nKRNjNIKl7SZFQWxX+vYlP8RwsC9CJ3t/QfCwHk0nz22vQWHknsQqSFSz0oNAmHXQNntITkTntoMheZ4oZMsRuR3yaMsgVSg7HYKR2pAZBwaDdE8sSN6fiRcMR+56NCdwkMGGQ8A14pht0JYJc0SivfxahG4HAmFuZwMyN8LL588v89Hh6EA5pYcZB0tWOfRL0bBcxe9/5JTHDAV5OYmTQ2+aOhDgZVZmHtRtiuPzRAAdOu16urZbAAHAXqAYF7EAArdTGRiO2yrMccFwlDTjgG+MAaPInLaJvCiNIRvqlFGZ3xy74YXWnC8DhGWqs0egRHvrSv6lrkjHnUEgp5OeofZVqQicL8a+I48yVRB1pRoOjhZjEHKXq86VlGyAKrBrCAFmnjkvtEJHe59iuZKl0i4I79oV6bgzCNiAnMGixiuO4zJ64nc0Uvy/VwR0uNJmHGLriKUKZIE/7mMeWuhuHCPys+oQ4KOdtOUcnfQFSZczOxFZlrtpDxXtjLJ6Hjs6p7JqR6lV/tkwZtSeku/HIqAjPEFhae4XYgilkaMMmJ0gR+4MRVnbVYIAswl+NiDFLh/rpA3cK0V4wPNv9KS5e0+8o4WADYhAqMw9U/yidFOfbICGzsZ7E0pSnEMZ3CCTKy9XZQJVGdlrxS/tNKWHoHm2aPlYp4JZ3DnKlXIUHHP0Id54Pxbpm1MIpCruFJX/l4IAG8xvymDmHaIptW7DrCNn/8LLVarIql0/87Tl5/Y/vvgJdLTlN1wcM9/F13uyzpkd9SRtO5qKaVvCNqSjozE6Si3fhCOPTy1UbJYqcmYdXq4qtAInYouBQaothzaw5Am7u0g++pmCY45ZyLEI35xCwAbkFA4l/2cExlQ/xeOzRFDqJzuQgY6Z0968XKWKbNhhPFJ7XnwoM2eGOgdMfHCzK1/acFf8puNyOvSmAVpR+BcdHR2hdFMjNRo8I6Q3r8hrX9GsHefIQHo6KHK0droKucBgjGfmBka1e9pqyniwZ5fa35sTh74ZT6ofzslTsXnbgJRZNXS0l2ewxqwj9xMPGdlNRsK5epYg+FpqKlPoMBx9HTeVvuTnGI8pFE8L/RQsYpvgoR1wanDtOsXYd/EAj13xm41roWG2VHkvkjA03lhHE8kRBgalW+KsA974BAn8wWvMcxR5raWKGF9jnjFboA7xUxiPMbyUkJbf6UhhQZspqR18GeA6PG36hx3xm42yASmn6hmh1TzrAElGaCnjBx0Khc7Y2rerUJbuU9Tw0VFYvkzVMe2+tFn0PSQCbVnBCXfLEzEbjnBjX7/yeVEJhZoarTJKQ+mWOOsARWSAP65jHoXRartLKcsYLi094zRgzvIldKUuXcZmRJ9sqbLGyNJqRx6DyZJp+ez0FzMKLHWvA9ZRAhgPrs/4k1cYDgxMqQrjJMf5MX8UaQ4GIjvIMXg4KOEKiajnnBkF7abUU4MBNk6Dhevd8P67N1u+tgFZp/ZRpEyRz0oUj+KAttRZB+v9KWWBokCGFg0H1YfCvCoXCR/qEix2PfGxpBimFMax9Es+A4vUTBp++O5V6cYDPjkNBv5c73rqj3a9G7fJaxuQ5audDTqMB40wVvqr9LBUxfEC8UbHSrWfd4quBkUhNg9yuQoTI7Ffl2HWklK4qXZyEOMzJMrBgj0i5LnmDOXPleVnezKmPvtmKD1JFoterKCUAliMkY0UhOFIfSIaxUwne2GhmKAMMW4x9oIMT4kRVf4sR2GykUxdomx2xWX0mjNrIQ1thrBEzwyUusbHDCFYgUOuzCXJer8IM8yq+T2SCEnbj2xAlqnfN6oYOhmdSJe97it6UnKdYDxSp6xQKiXLIIhHu4uUQ0xhUte/FE3XZ/ZRpvsGRaTHHDjTVvCxzdxjiVa4yalnZEHRrsDeZEX+JpITM2zaQ4Sk3Uc5DaBd6ZeRjE83sAkeKw2Fg7K4W4xo5WcovpTxYGSdetN4ZTHSxWdQxH7ECJzoVzfsyAfjGjM8JCF9ysBAt7b/cAYDGI8aZEmJwl4lsvTRxdpDX5om4mnoTQhSoBCvEE8YhpRC/ZXoSq8HlFpK8T1QcjAaU9CsYw2fOu0TECXTNdr+nRKQLlXPF4iuK72ii3J8EfrhCY7AogXjEcREFgZI4X4/pH4/sh/Z+n2qQbcu/1zy8VsXOXsYvANy/bmYmCjflPFgjZ7Z06cmKq/UbJg9xN7z2FeYGA2wQbGkNo3BGAxz3p1YAx9+bAk5guc3aWJ87GMRo63pGQMkMOjj+WF9D1qNn96AtIpUnlxh1pFat2Ykg8LgRFZezutQodhiMw8URUrWdTifvtRYX0GpMEKl1DBLwWhQx8TFPEucJc46eFkuGMA7xwTYe0abCFjsPWrilrruE4T6pv77njcXH+sUzQk7s0B0nJxZB58rYSQzMzujss85Yoq8LSuKIQDyXgOncVAusVnKfp4MJGIGep9+zvsvKPNgMJDjAbpHISoY5F45iLo+YgZM346wTf3TfyIk7TyyARlfl/dVFnS41AYzy1p0yBeLvmSHUksdt9ya8WAm1ldnzCCYbQwZFNBeaAtD0vSVvxufe/1NEe4aC/jh+0/wpEcHO/L59MGp60l4R7Eaw4r+w6BCZP93L9V/sNn1xCm6bmcDMq7++BRJTofhxbuUgRnHyTSpUZSpWUUOzTTclJNLbJYwpF5RIBz5XKvffV+QwsOdFMYUoB5nO/Jjfwj/PaXK6Q8iW93BL7x3+VzmfhIh5Gdw2QeLkNT/aK2GXD9yR0eM4DjeF5MlzDpeHSMq5BmGIaYoYZPZSYnr9fBWsj9fzKGw6W9X0fVS7jwVRDsNSvI2up/CkR+f1wkycdIQf/spMl8oD+pibFE3Uwb8JIGCTsfMlHdIul5G7IrrzKTkyClALFm+QbxlEjPCogPReWJJ3q2HQ0anIl/N5RgPjpiuteSyGjAjC2ZfhHZynZH5DEn+MREHo3FdXVO+gknct5QL+aE3Uu82ibRYR3ufijn2PC6MZEbds8y9T3KT/Yga72kINfK9Fs9Me7sawy4/wbg8aTey8OvYzIPOhtIo9YhpidAGwzH3C2Y/lfDBWNDu8A9RHPWlYJQjL45mk1fwQ05jjSp8psTMFsAr1t4pGtnxXOf4q4mIAZaCbTkbkLz6fq7IaFApvH4uuhSNSKpxbJZvfclqyDr2EobjfWo9LI3SHvn9eJS7okY78uOnBcgPTzvm5dDRGedlMCkV+GAokGnX83VdZJu0sNOZMcAa0lbYIzmdtN6ARlIv98twzqjltRlFMTq7UQZdaSTMMLp4ouOlNtS70rUQx8kq5Mezjp0rEwqKNKTPTZOi+6gImPmSL/6xuucoqYJR7jtKjTINHl1wT8XV6DAYYBM8+CDX0rJcWwX+Vj7HNTEwo9HkCLtFmptKaEYxKAVd9joaL42V9eFeokIfYDz6pvObeiHqdP0ERc2G8OmogwLSo8zI75AMMECkx/N281T9lPy+K4Zor3dQWLPjU+r0T2TCYEwtC3kfkif7ThxeOCRtdWmmapjVCZ5g+Ed6/mN5OpqCXlfKRnkvg4kHfcaDZKzrErbu3yoBURYooqn7A/mRL56BRmxP5DM7fGCAdDvavUU50IaDh5+aTkqJ/WMOxRzqihE8ch0jmOCGZVvyHWOUzhYf1LmCth0Nqm0Jh0v3NSW5uXzM0ThoZDVtlMfk2X/Gst1+XGv3vC2MMnq6/zM/RAAABkxJREFUBKMuFWQ70mUTnyZEIfEOCG2H9D87Hc+7BMTdR/dD+VCSE468GACR1zNOPK0nYneGgUx4RvfINZcUGI+plm1Ts0/0zFxyLJavDchJqM85GXUsprWN8mPC6YaOytFEXTbpwvIQbwsPVUZgw7swGANC7g8BiXLZLyP9mOOcpH+9GCC/4OnTt1BcbY5BC0oX44pcc80wunDp++GvLtqTcd0xHOEPdfKeDpJ7d8RVF0Vjq47pGRl+QyJvjvDS8RNkVT+m0VctQAfztPOgmIYuD5EOgwou5BPehSHknng8dB1FTx6Fkt3l5zmTlzBvhswsWM5DDjDDWODZawx4zsvBmdwpt++Hv85Qjb96orLoMiKKrttRYXVLMC33HNelUe/nSmNHSXx2/4Hvi0aAekNJEFJ/ucySBno8sw1Gx6m00EGPJ32KPuc5+dAePyBi8sVjAHP4UZJVHAqZWR6Ywzsy7HpmFmCF7kGesUySN0tPQ/MBQ3jo+uGvoXnl0DdpRAAwR/it0NDwadw0bEZJyE0DpdNyvRVPx0cB8GNXM8s8afacKoN36gw/tH1T59T90HS7QvBCGXnsxh16HfJ59KEZzJSOzWywAms8WAfP79vQX8Aw8D81G5TFJ0LCMmTsMMh+2Rgb+GIWt/9s7vtgRNAzc5e1SP5U8iIFVVhIWMPcIkZ0MOQOp0nosKU1+qDEMHRBiaFI4H1Ic0M2PkVBOup8SFpoMRihfPKa+vQa9UC+eGRFAVLuEp6yKHNXPvhgMzsMtMBtCV4ol30nyoMfeKDecssmPfJMtUmeW+4+HUaEdrofX+U9jbNKxs304ggwqqQT7ns6M6PRsQwxe+hSVvvlhXsUCEqMNoxSGVo+fJOO9EOVPrwGPkhLPkPLP4QeXjFyoWxC5AA36gCjmsoXOtKQNuUpizKXkm+XdwYslIvnGl5Z/iKk3ndpY9dhgxw51jYeMT5XeTa2UEAdm4fT14sAnXEs93RwOjR5jfGMymiP5DeWp1h6RqGUAc8xur5nGA947Xu+dDyygBvyYFRTdQAdaZbms688+MWgMbvgUzBcE4fxIsRzjYx9eXTFs8eBnNfqeui4aRAYWinTlOpcSkGA+kch0klL4WkOPpDvXGWMQhk7CkWZKSu7iRCgTmiHzC6mOInFuzbkucYex0SQ1JMNFVcPt+Z0DgTouLQDOh1LIXOUsUaejGSvp4KRC/n48KBuRzvyOpWJ/5eCAAME9kOo6yV/b6UU+Vfjw51hNeiLLJh9Djohnh9BQgnTOYtkdo8p+MQAwjuepRp+MXKPzLcNIUD7pK7RY+xFNSRaHaIAfB2cmsulEeCHcFDCtBE6KS+AoaSX5mO3PMpHabARzDFO+AoePjGAu/S+bhMBNtWpd9pnmxJWIhWdbiVWXWxlCOyuT9N5dz3rzYz+UfBDxIIegxA2tnfz7LqmvaI02Ic4a0hBpq0OgdA2GCzst4WSDjFUB+yUDNMhp8zPeW0TAU68MPqnPe139tg99BiEsRvbS6Mek6nGZ7w9jqLGmKO4l8aTMik77GOAYWgbDBaW5sflZSJAJWWSmswIGIFWENiTg895oKgx5ugEFPiSnjIp2/sYexVT+i0VVzqP5s8IGAEjYAQKRMAGpMBKMUtGwAgYgRoQsAE5pJacxggYASNgBI5sQNwIjIARMAJG4CAEbEAOgs2JjIARWAkBF1sQAjYgBVWGWTECRsAI1ISADUhNtWVejYARMAIFIWADUlBlLMGKyzACRsAITIWADchUSDofI2AEjMDGELAB2ViFW1wjYATWQqC9cm1A2qtTS2QEjIARWAQBG5BFYHYhRsAIGIH2ELABaa9OW5XIchkBI1AYAjYghVWI2TECRsAI1IKADUgtNWU+jYARMAJrIdBTrg1IDzCONgJGwAgYgTgCNiBxfPzUCBgBI2AEehCwAekBxtFGYDoEnJMRaBMBG5A269VSGQEjYARmR8AGZHaIXYARMAJGoE0EajAgbSJvqYyAETAClSNgA1J5BZp9I2AEjMBaCNiArIW8yzUCNSBgHo1ABAEbkAg4fmQEjIARMAL9CNiA9GPjJ0bACBgBIxBBwAYkAs74R87BCBgBI9AuAjYg7datJTMCRsAIzIqADcis8DpzI2AE1kLA5c6PwP8AAAD//+3/3TsAAAAGSURBVAMAJI6e9smFlTAAAAAASUVORK5CYII=";
 
+const FloatingButton = ({ onClick }) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragHappened = React.useRef(false);
+  const dragStartPos = React.useRef({ x: 0, y: 0 });
+  const elementStartPos = React.useRef({ x: 0, y: 0 });
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) {
+      return;
+    }
+    dragHappened.current = false;
+    setIsDragging(true);
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    elementStartPos.current = { ...position };
+    const handleMouseMove = (event) => {
+      const dx = event.clientX - dragStartPos.current.x;
+      const dy = event.clientY - dragStartPos.current.y;
+      if (!dragHappened.current && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+        dragHappened.current = true;
+      }
+      setPosition({
+        x: elementStartPos.current.x + dx,
+        y: elementStartPos.current.y + dy
+      });
+    };
+    const handleMouseUp = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      setIsDragging(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleClick = (e) => {
+    if (dragHappened.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.Button,
+    {
+      variant: "secondary",
+      appearance: "filled",
+      size: "xsmall",
+      className: styles$2["debug-floating-button"],
+      style: {
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        cursor: isDragging ? "grabbing" : "grab"
+      },
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      children: "DEBUG"
+    }
+  );
+};
+
+const MenuPanel = ({ menuItems, onMenuItemClick, onClose }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "small", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "Debug Menu", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { selectable: true, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.ListItem, { onClick: () => onMenuItemClick(item.component), children: item.label }, item.id)) }) })
+    ] })
+  ] });
+};
+
+let globalLogs = [];
+let listeners = [];
+const originalConsoleMethods = {};
+let isConsoleOverridden = false;
+const addLog = (type, ...args) => {
+  const newLog = {
+    id: Date.now() + Math.random(),
+    type,
+    timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+    message: args
+  };
+  globalLogs = [...globalLogs, newLog];
+  listeners.forEach((listener) => listener([...globalLogs]));
+};
+const initializeConsoleLogOverride = () => {
+  if (!salesFrontendUtils.isClient() || isConsoleOverridden) {
+    return;
+  }
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    originalConsoleMethods[type] = console[type];
+    console[type] = (...args) => {
+      if (originalConsoleMethods[type]) {
+        originalConsoleMethods[type]?.apply(console, args);
+      }
+      addLog(type, ...args);
+    };
+  });
+  isConsoleOverridden = true;
+};
+const restoreConsoleLog = () => {
+  if (!salesFrontendUtils.isClient() || !isConsoleOverridden) {
+    return;
+  }
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    if (originalConsoleMethods[type]) {
+      console[type] = originalConsoleMethods[type];
+    }
+  });
+  isConsoleOverridden = false;
+};
+const useConsoleLog = () => {
+  const [logs, setLogs] = React.useState(globalLogs);
+  React.useEffect(() => {
+    listeners.push(setLogs);
+    return () => {
+      listeners = listeners.filter((l) => l !== setLogs);
+    };
+  }, []);
+  const clearLogs = React.useCallback(() => {
+    globalLogs = [];
+    listeners.forEach((listener) => listener([]));
+  }, []);
+  return { logs, clearLogs };
+};
+
+const safeStringify$1 = (obj) => {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch (e) {
+    return "[Unserializable Object]";
+  }
+};
+const LogMessage = ({ entry }) => {
+  const messageParts = entry.message.map((part) => {
+    if (typeof part === "object" && part !== null) {
+      return safeStringify$1(part);
+    }
+    return String(part);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: `${styles$2["log-message"]} ${styles$2[`log-${entry.type}`]}`, children: messageParts.join(" ") });
+};
+const ConsoleLogPanel = ({ onClose }) => {
+  const { logs, clearLogs } = useConsoleLog();
+  const [filter, setFilter] = React.useState("all");
+  const logContainerRef = React.useRef(null);
+  const filteredLogs = React.useMemo(() => {
+    if (filter === "all") {
+      return logs;
+    }
+    return logs.filter((log) => log.type === filter);
+  }, [logs, filter]);
+  React.useEffect(() => {
+    if (logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [filteredLogs]);
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "Console Logs", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["panel-toolbar"], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          salesFrontendDesignSystem.Segment.Root,
+          {
+            size: "xsmall",
+            appearance: "outline",
+            align: "left",
+            defaultValue: filter,
+            onValueChange: (value) => setFilter(value),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "all", children: "All" }),
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "log", children: "Log" }),
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "warn", children: "Warn" }),
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "error", children: "Error" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Button,
+          {
+            variant: "neutral",
+            appearance: "outline",
+            size: "xsmall",
+            onClick: clearLogs,
+            style: { marginLeft: "auto" },
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["log-list-container"], ref: logContainerRef, children: filteredLogs.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["log-item"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2["log-timestamp"], children: log.timestamp }),
+        /* @__PURE__ */ jsxRuntime.jsx(LogMessage, { entry: log })
+      ] }, log.id)) })
+    ] })
+  ] }) });
+};
+
+const LoginPanel = ({ onClose, onLogin }) => {
+  const [selectedTypeId, setSelectedTypeId] = React.useState(loginTypes[0]?.id || "");
+  const [formData, setFormData] = React.useState({});
+  const selectedType = React.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (selectedType) {
+      onLogin(selectedType.id, formData);
+      onClose();
+    }
+  };
+  React.useEffect(() => {
+    setFormData({});
+  }, [selectedType]);
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uAC04\uD3B8 \uB85C\uADF8\uC778", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: styles$2["login-form-container"], onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.FormField.FieldControl, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: "login-type-select", children: "\uB85C\uADF8\uC778 \uC720\uD615" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Select,
+          {
+            value: selectedTypeId,
+            onChange: setSelectedTypeId,
+            size: "xsmall",
+            rootProps: { style: { width: "100%" } },
+            children: loginTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: type.id, children: type.label }, type.id))
+          }
+        )
+      ] }),
+      selectedType?.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.FormField.FieldControl, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: field.name, children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.FormField.TextField,
+          {
+            size: "xsmall",
+            type: field.type,
+            id: field.name,
+            name: field.name,
+            placeholder: field.placeholder,
+            value: formData[field.name] || "",
+            onChange: handleInputChange,
+            required: true
+          }
+        )
+      ] }, field.name)),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["form-actions"], children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { type: "submit", variant: "primary", appearance: "filled", size: "xsmall", children: "\uB85C\uADF8\uC778" }) })
+    ] }) })
+  ] }) });
+};
+
+const SEARCH_SECTIONS = [
+  { value: "all", label: "\uC804\uCCB4" },
+  { value: "url", label: "\uC8FC\uC18C" },
+  { value: "headers", label: "\uD5E4\uB354" },
+  { value: "params", label: "\uD30C\uB77C\uBBF8\uD130" },
+  { value: "data", label: "\uC694\uCCAD" },
+  { value: "response", label: "\uC751\uB2F5" },
+  { value: "error", label: "\uC5D0\uB7EC" }
+];
+const NetworkLog = ({ onClose }) => {
+  const { requests, responses, errors, clear } = salesFrontendApi.useDebugStore();
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [searchSection, setSearchSection] = React.useState(SEARCH_SECTIONS[0]?.value);
+  const allLogs = React.useMemo(() => {
+    const logs = [];
+    requests.forEach((req) => logs.push({ ...req, type: "request" }));
+    responses.forEach((res) => logs.push({ ...res, type: "response" }));
+    errors.forEach((err) => logs.push({ ...err, type: "error" }));
+    logs.sort((a, b) => {
+      const aTime = "startTime" in a ? a.startTime : 0;
+      const bTime = "startTime" in b ? b.startTime : 0;
+      return bTime - aTime;
+    });
+    return logs;
+  }, [requests, responses, errors]);
+  const filteredLogs = React.useMemo(() => {
+    if (!searchTerm) {
+      return allLogs;
+    }
+    const lowercasedTerm = searchTerm.toLowerCase();
+    return allLogs.filter((log) => {
+      switch (searchSection) {
+        case "url":
+          return log.url?.toLowerCase().includes(lowercasedTerm);
+        case "headers":
+          return "headers" in log && log.headers && JSON.stringify(log.headers)?.toLowerCase().includes(lowercasedTerm);
+        case "params":
+          return "params" in log && log.params && JSON.stringify(log.params)?.toLowerCase().includes(lowercasedTerm);
+        case "data":
+          return "data" in log && log.data && log.type === "request" && JSON.stringify(log.data)?.toLowerCase().includes(lowercasedTerm);
+        case "response":
+          return "data" in log && log.data && log.type === "response" && JSON.stringify(log.data)?.toLowerCase().includes(lowercasedTerm);
+        case "error":
+          return log.type === "error" && JSON.stringify(log)?.toLowerCase().includes(lowercasedTerm);
+        case "all":
+        default:
+          return JSON.stringify(log).toLowerCase().includes(lowercasedTerm);
+      }
+    });
+  }, [allLogs, searchTerm, searchSection]);
+  const renderLogSummary = (log) => {
+    if (log.type === "request") {
+      return `[REQ] ${log.method.toUpperCase()} ${log.url}`;
+    }
+    if (log.type === "response" && "status" in log) {
+      return `[RES] ${log.method.toUpperCase()} ${log.url} - ${log.status}`;
+    }
+    if (log.type === "error" && "message" in log) {
+      return `[ERR] ${log.method.toUpperCase()} ${log.url} - ${log.message}`;
+    }
+    return "Unknown Log";
+  };
+  const renderLogContent = (log) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(log, null, 2) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["search-container"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select, { value: searchSection, onChange: (value) => setSearchSection(value), size: "xsmall", children: SEARCH_SECTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: option.value, children: option.label }, option.value)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            salesFrontendDesignSystem.FormField.TextField,
+            {
+              placeholder: "\uAC80\uC0C9...",
+              value: searchTerm,
+              size: "xsmall",
+              onChange: (e) => setSearchTerm(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: clear, children: "clear" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderButton, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$3["log-summary"], children: renderLogSummary(log) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-content"], children: renderLogContent(log) }) })
+        ] }, index)) }) })
+      ] })
+    ] })
+  ] });
+};
+
+const PageNavigationPanel = ({ onClose }) => {
+  const [url, setUrl] = React.useState("");
+  const handleNavigate = () => {
+    if (url) {
+      self.location.href = url;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uD398\uC774\uC9C0 \uC774\uB3D9", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["page-navigation-content"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        salesFrontendDesignSystem.FormField.TextField,
+        {
+          size: "xsmall",
+          type: "text",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
+          rootProps: { style: { flex: 1 } }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", appearance: "filled", size: "xsmall", onClick: handleNavigate, children: "\uC774\uB3D9" })
+    ] }) })
+  ] }) });
+};
+
+const safeStringify = (obj) => {
+  try {
+    const replacer = (key, value) => typeof value === "bigint" ? value.toString() : value;
+    return JSON.stringify(obj, replacer, 2);
+  } catch (e) {
+    return "[Unserializable Object]";
+  }
+};
+const ResultMessage = ({ log }) => {
+  const messageParts = log.message.map((part) => {
+    if (typeof part === "object" && part !== null) {
+      return safeStringify(part);
+    }
+    return String(part);
+  });
+  const prefix = log.type === "return" ? "\u21A9 " : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: `${styles$2["log-message"]} ${styles$2[`log-${log.type}`]}`, children: [
+    prefix,
+    messageParts.join(" ")
+  ] });
+};
+const ScriptExecutorPanel = ({ onClose }) => {
+  const [code, setCode] = React.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
+  const [results, setResults] = React.useState([]);
+  const addResult = (type, ...args) => {
+    setResults((prevResults) => [
+      ...prevResults,
+      {
+        id: Date.now() + Math.random(),
+        type,
+        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+        message: args
+      }
+    ]);
+  };
+  const handleExecute = () => {
+    const originalConsole = { ...console };
+    const newConsole = {
+      log: (...args) => {
+        originalConsole.log(...args);
+        addResult("log", ...args);
+      },
+      warn: (...args) => {
+        originalConsole.warn(...args);
+        addResult("warn", ...args);
+      },
+      error: (...args) => {
+        originalConsole.error(...args);
+        addResult("error", ...args);
+      }
+    };
+    try {
+      Object.assign(console, newConsole);
+      const result = new Function(code)();
+      if (result !== void 0) {
+        addResult("return", result);
+      }
+    } catch (e) {
+      addResult("error", e.name, e.message);
+    } finally {
+      Object.assign(console, originalConsole);
+    }
+  };
+  const handleClear = () => {
+    setResults([]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$2["debug-feature-panel"]} ${styles$2["script-executor-panel"]}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-executor-content"], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-input-section"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            className: styles$2["script-textarea"],
+            value: code,
+            onChange: (e) => setCode(e.target.value),
+            spellCheck: "false"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-actions"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleExecute, children: "\uC2E4\uD589 (\u25B6)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleClear, children: "\uACB0\uACFC \uC9C0\uC6B0\uAE30" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-output-section"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["panel-header"], children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "\uACB0\uACFC" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["log-list-container"], children: results.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["log-item"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2["log-timestamp"], children: log.timestamp }),
+          /* @__PURE__ */ jsxRuntime.jsx(ResultMessage, { log })
+        ] }, log.id)) })
+      ] })
+    ] }) }) })
+  ] }) });
+};
+
+const setCookie = (name, value) => {
+  document.cookie = `${name}=${encodeURIComponent(value)};path=/`;
+};
+const removeCookie = (name) => {
+  document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+};
+const useStorage = (storageType) => {
+  const [items, setItems] = React.useState([]);
+  const loadItems = React.useCallback(() => {
+    const newItems = [];
+    if (storageType === "localStorage") {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key) {
+          newItems.push({ key, value: localStorage.getItem(key) || "" });
+        }
+      }
+    } else {
+      const cookies = document.cookie.split(";");
+      cookies.forEach((cookie) => {
+        const parts = cookie.split("=");
+        const key = parts.shift()?.trim();
+        if (key) {
+          newItems.push({ key, value: decodeURIComponent(parts.join("=")) });
+        }
+      });
+    }
+    setItems(newItems);
+  }, [storageType]);
+  React.useEffect(() => {
+    loadItems();
+  }, [loadItems]);
+  const setItem = React.useCallback(
+    (key, value) => {
+      if (storageType === "localStorage") {
+        localStorage.setItem(key, value);
+      } else {
+        setCookie(key, value);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  const removeItem = React.useCallback(
+    (key) => {
+      if (storageType === "localStorage") {
+        localStorage.removeItem(key);
+      } else {
+        removeCookie(key);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  return { items, setItem, removeItem, loadItems };
+};
+
+const ValueDisplay = ({ value }) => {
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed !== null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles$2["log-content"], children: JSON.stringify(parsed, null, 2) });
+    }
+  } catch (e) {
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["log-content"], children: value });
+};
+const EditableRow = ({ item, onSave, onRemove }) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [value, setValue] = React.useState(item.value);
+  const handleSave = () => {
+    onSave(item.key, value);
+    setIsEditing(false);
+  };
+  const handleEdit = () => {
+    setValue(item.value);
+    setIsEditing(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.HeaderButton, { children: [
+      " ",
+      item.key
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Content, { variant: "text", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleSave, children: "Save" }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleEdit, children: "Edit" }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: () => onRemove(item.key), children: "Remove" }),
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { value, onChange: (e) => setValue(e.target.value) }) : /* @__PURE__ */ jsxRuntime.jsx(ValueDisplay, { value: item.value })
+    ] })
+  ] }) });
+};
+const StoragePanel = ({ onClose, storageType }) => {
+  const { items, setItem, removeItem } = useStorage(storageType);
+  const [filter, setFilter] = React.useState("");
+  const filteredItems = React.useMemo(() => {
+    if (!filter) {
+      return items;
+    }
+    return items.filter(
+      (item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
+    );
+  }, [items, filter]);
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: storageType === "localStorage" ? "Local Storage" : "Cookies", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["panel-toolbar"], children: /* @__PURE__ */ jsxRuntime.jsx(
+        salesFrontendDesignSystem.FormField.TextField,
+        {
+          placeholder: "Search key or value...",
+          size: "xsmall",
+          value: filter,
+          onChange: (e) => setFilter(e.target.value),
+          rootProps: { style: { width: "100%" } }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(EditableRow, { item, onSave: setItem, onRemove: removeItem }) }, item.key)) })
+    ] })
+  ] }) });
+};
+
+const loginTypes = [
+  {
+    id: "fp",
+    label: "FP \uB85C\uADF8\uC778",
+    fields: [{ name: "employeeId", label: "\uC0AC\uBC88", type: "text", placeholder: "\uC0AC\uBC88\uC744 \uC785\uB825\uD558\uC138\uC694" }]
+  },
+  {
+    id: "customer",
+    label: "\uACE0\uAC1D \uB85C\uADF8\uC778",
+    fields: [
+      { name: "name", label: "\uC774\uB984", type: "text", placeholder: "\uC774\uB984" },
+      { name: "phone", label: "\uC804\uD654\uBC88\uD638", type: "tel", placeholder: "\uC804\uD654\uBC88\uD638" },
+      { name: "residentNumber", label: "\uC8FC\uBBFC\uBC88\uD638", type: "text", placeholder: "\uC8FC\uBBFC\uBC88\uD638 \uC55E 7\uC790\uB9AC" },
+      { name: "userId", label: "\uC544\uC774\uB514", type: "text", placeholder: "\uC544\uC774\uB514" },
+      { name: "password", label: "\uBE44\uBC00\uBC88\uD638", type: "password", placeholder: "\uBE44\uBC00\uBC88\uD638" }
+    ]
+  }
+];
+const menuItems = [
+  {
+    id: "network-log",
+    label: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8",
+    component: NetworkLog,
+    display: true
+  },
+  {
+    id: "console-log",
+    label: "\uCF58\uC194 \uB85C\uADF8 \uD655\uC778",
+    component: ConsoleLogPanel,
+    display: true
+  },
+  {
+    id: "local-storage",
+    label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
+    // StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
+    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StoragePanel, { ...props, storageType: "localStorage" }),
+    display: true
+  },
+  {
+    id: "cookie-management",
+    label: "\uCFE0\uD0A4 \uAD00\uB9AC",
+    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StoragePanel, { ...props, storageType: "cookie" }),
+    display: true
+  },
+  {
+    id: "quick-login",
+    label: "\uAC04\uD3B8 \uB85C\uADF8\uC778",
+    component: LoginPanel,
+    display: true
+    // 실제 표시는 DebugTool.tsx에서 onLogin prop 존재 여부에 따라 결정됩니다.
+  },
+  {
+    id: "script-executor",
+    label: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589",
+    component: ScriptExecutorPanel,
+    display: true
+  },
+  {
+    id: "page-navigation",
+    label: "\uD398\uC774\uC9C0 \uC774\uB3D9",
+    component: PageNavigationPanel,
+    display: true
+  }
+];
+
+const useEnvironment = () => {
+  const [envInfo, setEnvInfo] = React.useState({
+    env: "unknown"
+  });
+  React.useEffect(() => {
+    const { hostname } = window.location;
+    let currentEnv = "unknown";
+    if (hostname.includes("localhost") || hostname.includes("127.0.0.1")) {
+      currentEnv = "local";
+    } else if (hostname.includes("dev.")) {
+      currentEnv = "dev";
+    } else if (hostname.includes("stg.")) {
+      currentEnv = "stage";
+    } else {
+      currentEnv = "prod";
+    }
+    setEnvInfo({ env: currentEnv });
+  }, []);
+  return envInfo;
+};
+
+const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
+  React.useEffect(() => {
+    initializeConsoleLogOverride();
+    return () => {
+      restoreConsoleLog();
+    };
+  }, []);
+  const environment = useEnvironment();
+  const env = envOverride || environment.env;
+  const menuItems$1 = menuItemsOverride || menuItems;
+  const [isMenuOpen, setMenuOpen] = React.useState(false);
+  const [activeFeature, setActiveFeature] = React.useState(null);
+  const isVisible = ["local", "dev", "stage"].includes(env);
+  const handleMenuClick = (itemComponent) => {
+    setActiveFeature(() => itemComponent);
+    setMenuOpen(false);
+  };
+  const handleCloseFeature = () => {
+    setActiveFeature(null);
+  };
+  if (!isVisible) {
+    return null;
+  }
+  const toggleMenu = () => {
+    setMenuOpen((prev) => !prev);
+    if (!isMenuOpen) {
+      setActiveFeature(null);
+    }
+  };
+  const availableMenuItems = menuItems$1.filter(
+    (item) => item.display && // config에서 display가 true인 항목만 필터링합니다.
+    // 'quick-login' 기능은 onLogin prop이 제공된 경우에만 활성화합니다.
+    (item.id !== "quick-login" || item.id === "quick-login" && onLogin)
+  );
+  if (activeFeature) {
+    const FeatureComponent = activeFeature;
+    return /* @__PURE__ */ jsxRuntime.jsx(FeatureComponent, { onClose: handleCloseFeature, onLogin });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tool-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FloatingButton, { onClick: toggleMenu }),
+    isMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      MenuPanel,
+      {
+        menuItems: availableMenuItems,
+        onMenuItemClick: handleMenuClick,
+        onClose: () => setMenuOpen(false)
+      }
+    )
+  ] });
+};
+
 exports.Attachment = Attachment;
+exports.DebugTool = DebugTool;
 exports.FormCheckbox = FormCheckbox;
 exports.FormCheckboxButton = FormCheckboxButton;
 exports.FormDatePicker = FormDatePicker;