@kickd0wn/react-dev-companion 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -1,6 +1,34 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactDevCompanion={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t,t.exports),e=null),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),l(r(i,`default`,{value:e,enumerable:!0}),e)))(t,1);var u=e=>{let t=window.fetch;window.fetch=async(...n)=>{let[r,i]=n,a=typeof r==`string`?r:r instanceof Request?r.url:String(r),o=i?.method||`GET`,s={id:Math.random().toString(36).substring(2,9),url:a,method:o.toUpperCase(),timestamp:new Date().toLocaleTimeString()};try{let r=await t(...n);return s.status=r.status,e(s),r}catch(t){throw s.status=0,e(s),t}}},d=()=>{let e=[];for(let t=0;t<localStorage.length;t++){let n=localStorage.key(t);n&&e.push({key:n,value:localStorage.getItem(n)||``,type:`local`})}return e},f=()=>{let e=[];for(let t=0;t<sessionStorage.length;t++){let n=sessionStorage.key(t);n&&e.push({key:n,value:sessionStorage.getItem(n)||``,type:`session`})}return e},p=()=>document.cookie?document.cookie.split(`; `).map(e=>{let[t,...n]=e.split(`=`);return{key:t.trim(),value:decodeURIComponent(n.join(`=`)),type:`cookie`}}):[],m=(e,t)=>{t===`local`?localStorage.removeItem(e):t===`session`?sessionStorage.removeItem(e):t===`cookie`&&(document.cookie=`${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`)},h=(e,t,n)=>{n===`local`?localStorage.setItem(e,t):n===`session`?sessionStorage.setItem(e,t):n===`cookie`&&(document.cookie=`${e}=${encodeURIComponent(t)}; path=/;`)},g=c((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),_=c((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===k?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`;case O:return`ViewTransition`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=A.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(j.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){P||(P=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return F[e]||(F[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0){if(o){if(M(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`)}else f(p)}if(j.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,R[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactDevCompanion={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t,t.exports),e=null),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),l(r(i,`default`,{value:e,enumerable:!0}),e)))(t,1);var u=!1,d={isOffline:!1,delayMs:0},f=e=>{if(u||typeof window>`u`)return;u=!0;let t=window.fetch;window.fetch=async(...n)=>{let r=performance.now(),i=Math.random().toString(36).substring(2,9),a=``,o=`GET`;if(typeof n[0]==`string`?a=n[0]:n[0]instanceof URL?a=n[0].toString():n[0]instanceof Request&&(a=n[0].url,o=n[0].method||`GET`),n[1]&&n[1].method&&(o=n[1].method.toUpperCase()),d.delayMs>0&&await new Promise(e=>setTimeout(e,d.delayMs)),d.isOffline){let t=performance.now();throw e({id:i,url:a,method:o,status:0,duration:Math.round(t-r),timestamp:new Date().toLocaleTimeString()}),TypeError(`Failed to fetch (Simulated Offline Mode)`)}try{let s=await t(...n),c=performance.now();return e({id:i,url:a,method:o,status:s.status,duration:Math.round(c-r),timestamp:new Date().toLocaleTimeString()}),s}catch(t){let n=performance.now();throw e({id:i,url:a,method:o,status:0,duration:Math.round(n-r),timestamp:new Date().toLocaleTimeString()}),t}}},p=()=>typeof document>`u`||!document.cookie?[]:document.cookie.split(`; `).map(e=>{let[t,...n]=e.split(`=`);return{key:t,value:decodeURIComponent(n.join(`=`))}}),m=(e,t,n=7)=>{if(typeof document>`u`)return;let r=new Date(Date.now()+n*864e5).toUTCString();document.cookie=`${encodeURIComponent(e)}=${encodeURIComponent(t)}; expires=${r}; path=/`},h=e=>{typeof document<`u`&&(document.cookie=`${encodeURIComponent(e)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`)},g=e=>{let t={};e===`localStorage`?t={...localStorage}:e===`sessionStorage`?t={...sessionStorage}:e===`cookie`&&p().forEach(e=>{t[e.key]=e.value});let n={type:e,timestamp:new Date().toISOString(),data:t},r=new Blob([JSON.stringify(n,null,2)],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`dev-companion-${e}-${Date.now()}.json`,a.click(),URL.revokeObjectURL(i)},_={bg:`#0f172a`,cardBg:`#1e293b`,hoverBg:`#334155`,border:`#334155`,borderSubtle:`#1e293b`,textPrimary:`#f8fafc`,textSecondary:`#94a3b8`,accent:`#0284c7`,accentHover:`#0369a1`,success:`#4ade80`,warning:`#facc15`,danger:`#f87171`,methodGet:`#38bdf8`,methodPost:`#4ade80`,methodPut:`#facc15`,methodDelete:`#f87171`},v=()=>{if(typeof document>`u`)return;let e=`dev-companion-custom-styles`;if(document.getElementById(e))return;let t=document.createElement(`style`);t.id=e,t.innerHTML=`
+    .dev-companion-scroll::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    .dev-companion-scroll::-webkit-scrollbar-track {
+      background: #0f172a;
+    }
+    .dev-companion-scroll::-webkit-scrollbar-thumb {
+      background: #334155;
+      border-radius: 4px;
+    }
+    .dev-companion-scroll::-webkit-scrollbar-thumb:hover {
+      background: #475569;
+    }
+    @keyframes devCompanionSlideUp {
+      from {
+        opacity: 0;
+        transform: translateY(8px) scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    .dev-companion-panel-animate {
+      animation: devCompanionSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+  `,document.head.appendChild(t)},y=c((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),b=c((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===k?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`;case O:return`ViewTransition`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=A.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(j.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){P||(P=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return F[e]||(F[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0){if(o){if(M(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`)}else f(p)}if(j.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,R[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),R[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.view_transition`),k=Symbol.for(`react.client.reference`),A=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=m.react_stack_bottom_frame.bind(m,o)(),L=N(i(o)),R={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!1,o,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!0,o,r?N(i(e)):L)}})()})),v=c(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?g():_()}))(),y=()=>{let[e,n]=(0,t.useState)(`local`),[r,i]=(0,t.useState)([]),[a,o]=(0,t.useState)(``),[s,c]=(0,t.useState)(``),l=()=>{e===`local`?i(d()):e===`session`?i(f()):e===`cookie`&&i(p())};(0,t.useEffect)(()=>{l()},[e]);let u=t=>{m(t,e),l()};return(0,v.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`10px`},children:[(0,v.jsx)(`div`,{style:{display:`flex`,gap:`6px`,borderBottom:`1px solid #334155`,paddingBottom:`6px`},children:[`local`,`session`,`cookie`].map(t=>(0,v.jsx)(`button`,{onClick:()=>n(t),style:{background:e===t?`#3b82f6`:`#1e293b`,color:`#fff`,border:`none`,padding:`4px 8px`,borderRadius:`4px`,fontSize:`11px`,cursor:`pointer`},children:t.toUpperCase()},t))}),(0,v.jsxs)(`form`,{onSubmit:t=>{t.preventDefault(),a.trim()&&(h(a.trim(),s.trim(),e),o(``),c(``),l())},style:{display:`flex`,gap:`4px`},children:[(0,v.jsx)(`input`,{placeholder:`Key`,value:a,onChange:e=>o(e.target.value),style:{flex:1,padding:`4px`,fontSize:`11px`,background:`#1e293b`,color:`#fff`,border:`1px solid #334155`,borderRadius:`4px`}}),(0,v.jsx)(`input`,{placeholder:`Value`,value:s,onChange:e=>c(e.target.value),style:{flex:1,padding:`4px`,fontSize:`11px`,background:`#1e293b`,color:`#fff`,border:`1px solid #334155`,borderRadius:`4px`}}),(0,v.jsx)(`button`,{type:`submit`,style:{background:`#22c55e`,color:`#fff`,border:`none`,padding:`4px 8px`,borderRadius:`4px`,fontSize:`11px`,cursor:`pointer`},children:`Add`})]}),(0,v.jsx)(`div`,{style:{maxHeight:`180px`,overflowY:`auto`},children:r.length===0?(0,v.jsx)(`p`,{style:{color:`#94a3b8`,fontSize:`12px`},children:`No items found.`}):r.map(e=>(0,v.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,padding:`4px 0`,borderBottom:`1px solid #1e293b`,fontSize:`11px`},children:[(0,v.jsxs)(`div`,{style:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,maxWidth:`220px`},children:[(0,v.jsxs)(`strong`,{style:{color:`#38bdf8`},children:[e.key,`:`]}),` `,e.value]}),(0,v.jsx)(`button`,{onClick:()=>u(e.key),style:{background:`#ef4444`,color:`#fff`,border:`none`,padding:`2px 6px`,borderRadius:`4px`,fontSize:`10px`,cursor:`pointer`},children:`Del`})]},e.key))})]})};e.DevCompanion=()=>{let[e,n]=(0,t.useState)(!1),[r,i]=(0,t.useState)(`network`),[a,o]=(0,t.useState)([]);return(0,t.useEffect)(()=>{u(e=>{o(t=>[e,...t])})},[]),(0,v.jsxs)(`div`,{style:{position:`fixed`,bottom:16,right:16,zIndex:99999,fontFamily:`sans-serif`},children:[(0,v.jsxs)(`button`,{onClick:()=>n(!e),style:{background:`#1e293b`,color:`#fff`,border:`none`,padding:`10px 14px`,borderRadius:`8px`,cursor:`pointer`,fontWeight:`bold`,boxShadow:`0 4px 12px rgba(0,0,0,0.15)`},children:[`Dev Companion (`,a.length,`)`]}),e&&(0,v.jsxs)(`div`,{style:{position:`absolute`,bottom:50,right:0,width:380,height:340,background:`#0f172a`,color:`#f8fafc`,borderRadius:`8px`,padding:`12px`,boxShadow:`0 8px 24px rgba(0,0,0,0.3)`,display:`flex`,flexDirection:`column`},children:[(0,v.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,borderBottom:`1px solid #334155`,paddingBottom:`8px`,marginBottom:`8px`},children:[(0,v.jsx)(`button`,{onClick:()=>i(`network`),style:{background:r===`network`?`#0284c7`:`#1e293b`,color:`#fff`,border:`none`,padding:`6px 12px`,borderRadius:`4px`,fontSize:`12px`,fontWeight:`bold`,cursor:`pointer`},children:`Network`}),(0,v.jsx)(`button`,{onClick:()=>i(`storage`),style:{background:r===`storage`?`#0284c7`:`#1e293b`,color:`#fff`,border:`none`,padding:`6px 12px`,borderRadius:`4px`,fontSize:`12px`,fontWeight:`bold`,cursor:`pointer`},children:`Storage`})]}),r===`network`?(0,v.jsx)(`div`,{style:{flex:1,overflowY:`auto`},children:a.length===0?(0,v.jsx)(`p`,{style:{color:`#94a3b8`,fontSize:`13px`},children:`No requests captured yet.`}):a.map(e=>(0,v.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,padding:`6px 0`,borderBottom:`1px solid #1e293b`,fontSize:`12px`},children:[(0,v.jsxs)(`span`,{style:{fontWeight:`bold`,color:e.method===`GET`?`#38bdf8`:`#4ade80`},children:[`[`,e.method,`]`]}),(0,v.jsx)(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,maxWidth:`180px`},children:e.url}),(0,v.jsx)(`span`,{style:{color:e.status&&e.status>=400?`#f87171`:`#facc15`},children:e.status||`PENDING`})]},e.id))}):(0,v.jsx)(y,{})]})]})}});
+  <%s key={someKey} {...props} />`,o,p,m,p),R[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.view_transition`),k=Symbol.for(`react.client.reference`),A=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=m.react_stack_bottom_frame.bind(m,o)(),L=N(i(o)),R={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!1,o,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!0,o,r?N(i(e)):L)}})()})),x=c(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?y():b()}))(),S=()=>{let[e,n]=(0,t.useState)(`localStorage`),[r,i]=(0,t.useState)([]),[a,o]=(0,t.useState)(null),[s,c]=(0,t.useState)(``);(0,t.useEffect)(()=>{v()},[]);let l=()=>{if(typeof window>`u`)return;let t=[];if(e===`localStorage`)for(let e=0;e<localStorage.length;e++){let n=localStorage.key(e);n&&t.push({key:n,value:localStorage.getItem(n)||``})}else if(e===`sessionStorage`)for(let e=0;e<sessionStorage.length;e++){let n=sessionStorage.key(e);n&&t.push({key:n,value:sessionStorage.getItem(n)||``})}else e===`cookie`&&t.push(...p());i(t)};(0,t.useEffect)(()=>{l()},[e]);let u=t=>{e===`localStorage`?localStorage.setItem(t,s):e===`sessionStorage`?sessionStorage.setItem(t,s):e===`cookie`&&m(t,s),o(null),l()},d=t=>{e===`localStorage`?localStorage.removeItem(t):e===`sessionStorage`?sessionStorage.removeItem(t):e===`cookie`&&h(t),l()};return(0,x.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`10px`,height:`100%`},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`},children:[(0,x.jsx)(`div`,{style:{display:`flex`,gap:`4px`,background:_.cardBg,padding:`3px`,borderRadius:`6px`,border:`1px solid ${_.border}`},children:[`localStorage`,`sessionStorage`,`cookie`].map(t=>(0,x.jsx)(`button`,{onClick:()=>n(t),style:{padding:`4px 8px`,borderRadius:`4px`,border:`none`,background:e===t?_.accent:`transparent`,color:e===t?`#fff`:_.textSecondary,cursor:`pointer`,fontSize:`11px`,fontWeight:600,transition:`all 0.15s ease`},children:t===`localStorage`?`Local`:t===`sessionStorage`?`Session`:`Cookies`},t))}),(0,x.jsxs)(`div`,{style:{display:`flex`,gap:`6px`,alignItems:`center`},children:[(0,x.jsx)(`button`,{onClick:l,title:`Refresh storage data`,style:{padding:`5px 8px`,fontSize:`11px`,background:_.cardBg,color:_.accent,border:`1px solid ${_.border}`,borderRadius:`6px`,cursor:`pointer`,fontWeight:600},children:`↻ Refresh`}),(0,x.jsx)(`button`,{onClick:()=>g(e),style:{padding:`5px 9px`,fontSize:`11px`,background:_.cardBg,color:_.textPrimary,border:`1px solid ${_.border}`,borderRadius:`6px`,cursor:`pointer`,fontWeight:500},children:`Export`}),(0,x.jsxs)(`label`,{style:{padding:`5px 9px`,fontSize:`11px`,background:_.cardBg,color:_.textPrimary,border:`1px solid ${_.border}`,borderRadius:`6px`,cursor:`pointer`,fontWeight:500},children:[`Import`,(0,x.jsx)(`input`,{type:`file`,accept:`.json`,onChange:t=>{let n=t.target.files?.[0];if(!n)return;let r=new FileReader;r.onload=t=>{try{let n=JSON.parse(t.target?.result);n&&n.data&&(Object.entries(n.data).forEach(([t,n])=>{let r=typeof n==`string`?n:JSON.stringify(n);e===`localStorage`&&localStorage.setItem(t,r),e===`sessionStorage`&&sessionStorage.setItem(t,r),e===`cookie`&&m(t,r)}),l())}catch(e){console.error(`[DevCompanion] Failed to import JSON:`,e)}},r.readAsText(n)},style:{display:`none`}})]})]})]}),(0,x.jsx)(`div`,{className:`dev-companion-scroll`,style:{flex:1,overflowY:`auto`,background:_.cardBg,borderRadius:`6px`,border:`1px solid ${_.border}`},children:r.length===0?(0,x.jsxs)(`p`,{style:{color:_.textSecondary,fontSize:`12px`,textAlign:`center`,padding:`24px 0`},children:[`No items found in `,e,`.`]}):(0,x.jsxs)(`table`,{style:{width:`100%`,borderCollapse:`collapse`,fontSize:`11px`,color:_.textPrimary},children:[(0,x.jsx)(`thead`,{children:(0,x.jsxs)(`tr`,{style:{borderBottom:`1px solid ${_.border}`,textAlign:`left`,background:_.bg,color:_.textSecondary},children:[(0,x.jsx)(`th`,{style:{padding:`8px`,width:`35%`},children:`Key`}),(0,x.jsx)(`th`,{style:{padding:`8px`},children:`Value`}),(0,x.jsx)(`th`,{style:{padding:`8px`,width:`80px`,textAlign:`right`},children:`Actions`})]})}),(0,x.jsx)(`tbody`,{children:r.map(e=>(0,x.jsxs)(`tr`,{style:{borderBottom:`1px solid ${_.borderSubtle}`},children:[(0,x.jsx)(`td`,{style:{padding:`8px`,fontWeight:600,color:_.methodGet,fontFamily:`monospace`,wordBreak:`break-all`},children:e.key}),(0,x.jsx)(`td`,{style:{padding:`8px`},children:a===e.key?(0,x.jsx)(`input`,{value:s,onChange:e=>c(e.target.value),style:{width:`100%`,background:_.bg,color:_.textPrimary,border:`1px solid ${_.accent}`,borderRadius:`4px`,padding:`3px 6px`,fontSize:`11px`,outline:`none`}}):(0,x.jsx)(`span`,{style:{wordBreak:`break-all`,fontFamily:`monospace`,color:_.textSecondary},children:e.value})}),(0,x.jsxs)(`td`,{style:{padding:`8px`,textAlign:`right`},children:[a===e.key?(0,x.jsx)(`button`,{onClick:()=>u(e.key),style:{color:_.success,background:`none`,border:`none`,cursor:`pointer`,fontWeight:600,marginRight:`6px`},children:`Save`}):(0,x.jsx)(`button`,{onClick:()=>{o(e.key),c(e.value)},style:{color:_.warning,background:`none`,border:`none`,cursor:`pointer`,marginRight:`6px`},children:`Edit`}),(0,x.jsx)(`button`,{onClick:()=>d(e.key),style:{color:_.danger,background:`none`,border:`none`,cursor:`pointer`},children:`Del`})]})]},e.key))})]})})]})},C=({logs:e=[],onClear:n})=>{let[r,i]=(0,t.useState)(``),[a,o]=(0,t.useState)(`ALL`),[s,c]=(0,t.useState)(d.isOffline),[l,u]=(0,t.useState)(d.delayMs),[f,p]=(0,t.useState)(null);(0,t.useEffect)(()=>{v()},[]);let m=()=>{let e=!s;c(e),d.isOffline=e},h=e=>{u(e),d.delayMs=e},g=e.filter(e=>{if(!e||!e.url)return!1;let t=e.url.toLowerCase().includes((r||``).toLowerCase()),n=a===`ALL`||e.method===a;return t&&n}),y=e=>{let t=`curl -X ${e.method} "${e.url}"`;navigator.clipboard.writeText(t),p(e.id),setTimeout(()=>p(null),1500)},b=e=>{switch(e?.toUpperCase()){case`GET`:return _.methodGet;case`POST`:return _.methodPost;case`PUT`:return _.methodPut;case`DELETE`:return _.methodDelete;default:return _.textPrimary}};return(0,x.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`10px`,height:`100%`},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,background:_.cardBg,padding:`8px 10px`,borderRadius:`6px`,fontSize:`11px`,border:`1px solid ${_.borderSubtle}`,flexShrink:0},children:[(0,x.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,cursor:`pointer`,color:s?_.danger:_.textSecondary,fontWeight:500},children:[(0,x.jsx)(`input`,{type:`checkbox`,checked:s,onChange:m,style:{accentColor:_.danger}}),`Offline Mode`]}),(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`6px`},children:[(0,x.jsx)(`span`,{style:{color:_.textSecondary},children:`Delay:`}),(0,x.jsxs)(`select`,{value:l,onChange:e=>h(Number(e.target.value)),style:{background:_.bg,color:_.textPrimary,border:`1px solid ${_.border}`,borderRadius:`4px`,padding:`2px 6px`,fontSize:`11px`,outline:`none`,cursor:`pointer`},children:[(0,x.jsx)(`option`,{value:0,children:`None (0ms)`}),(0,x.jsx)(`option`,{value:500,children:`Fast 3G (500ms)`}),(0,x.jsx)(`option`,{value:2e3,children:`Slow 3G (2s)`})]})]})]}),(0,x.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,flexShrink:0,alignItems:`center`},children:[(0,x.jsx)(`input`,{type:`text`,placeholder:`Filter URL...`,value:r,onChange:e=>i(e.target.value),style:{flex:1,background:_.cardBg,color:_.textPrimary,border:`1px solid ${_.border}`,borderRadius:`6px`,padding:`6px 10px`,fontSize:`12px`,outline:`none`}}),(0,x.jsxs)(`select`,{value:a,onChange:e=>o(e.target.value),style:{background:_.cardBg,color:_.textPrimary,border:`1px solid ${_.border}`,borderRadius:`6px`,padding:`6px 8px`,fontSize:`12px`,outline:`none`,cursor:`pointer`},children:[(0,x.jsx)(`option`,{value:`ALL`,children:`ALL`}),(0,x.jsx)(`option`,{value:`GET`,children:`GET`}),(0,x.jsx)(`option`,{value:`POST`,children:`POST`}),(0,x.jsx)(`option`,{value:`PUT`,children:`PUT`}),(0,x.jsx)(`option`,{value:`DELETE`,children:`DELETE`})]}),n&&(0,x.jsx)(`button`,{onClick:n,title:`Clear request history`,style:{padding:`6px 10px`,fontSize:`11px`,background:_.cardBg,color:_.textSecondary,border:`1px solid ${_.border}`,borderRadius:`6px`,cursor:`pointer`,fontWeight:600},children:`Clear`})]}),(0,x.jsx)(`div`,{className:`dev-companion-scroll`,style:{flex:1,overflowY:`auto`,display:`flex`,flexDirection:`column`,gap:`4px`,paddingRight:`2px`},children:g.length===0?(0,x.jsx)(`p`,{style:{color:_.textSecondary,fontSize:`12px`,textAlign:`center`,marginTop:`24px`},children:`No requests captured.`}):g.map(e=>{let t=!e.status||e.status>=400?_.danger:_.success;return(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`8px 10px`,background:_.cardBg,borderRadius:`6px`,border:`1px solid ${_.borderSubtle}`,fontSize:`12px`,flexShrink:0},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,overflow:`hidden`},children:[(0,x.jsx)(`span`,{style:{fontWeight:700,color:b(e.method),fontSize:`11px`,background:_.bg,padding:`2px 6px`,borderRadius:`4px`,border:`1px solid ${_.border}`,minWidth:`45px`,textAlign:`center`},children:e.method}),(0,x.jsx)(`span`,{title:e.url,style:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,maxWidth:`170px`,color:_.textPrimary,fontFamily:`monospace`,fontSize:`11px`},children:e.url})]}),(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,flexShrink:0},children:[e.duration!==void 0&&(0,x.jsxs)(`span`,{style:{color:_.textSecondary,fontSize:`10px`,fontFamily:`monospace`},children:[e.duration,`ms`]}),(0,x.jsx)(`span`,{style:{color:t,fontWeight:700,fontSize:`11px`,background:`${t}15`,padding:`2px 6px`,borderRadius:`4px`},children:e.status||`ERR`}),(0,x.jsx)(`button`,{onClick:()=>y(e),title:`Copy cURL`,style:{background:f===e.id?_.success:_.hoverBg,color:f===e.id?`#000`:_.textPrimary,border:`none`,borderRadius:`4px`,padding:`3px 8px`,fontSize:`10px`,fontWeight:600,cursor:`pointer`,transition:`all 0.15s ease`},children:f===e.id?`Copied!`:`cURL`})]})]},e.id)})})]})},w=(e,n)=>{(0,t.useEffect)(()=>{let t=t=>{let r=!e.ctrlOrCmd||t.metaKey||t.ctrlKey,i=!e.shift||t.shiftKey,a=t.key.toLowerCase()===e.key.toLowerCase();r&&i&&a&&(t.preventDefault(),n())};return window.addEventListener(`keydown`,t),()=>window.removeEventListener(`keydown`,t)},[e,n])};e.DevCompanion=({position:e=`bottom-right`})=>{let[n,r]=(0,t.useState)(!1),[i,a]=(0,t.useState)(`network`),[o,s]=(0,t.useState)([]);(0,t.useEffect)(()=>{v()},[]),w({key:`d`,ctrlOrCmd:!0,shift:!0},()=>{r(e=>!e)}),(0,t.useEffect)(()=>{f(e=>{s(t=>[e,...t])})},[]);let c=(()=>{switch(e){case`bottom-left`:return{bottom:16,left:16};case`top-right`:return{top:16,right:16};case`top-left`:return{top:16,left:16};default:return{bottom:16,right:16}}})();return(0,x.jsxs)(`div`,{style:{position:`fixed`,...c,zIndex:99999,fontFamily:`system-ui, -apple-system, sans-serif`},children:[(0,x.jsxs)(`button`,{onClick:()=>r(!n),title:`Shortcut: Ctrl + Shift + D`,style:{background:_.bg,color:_.textPrimary,border:`1px solid ${_.border}`,padding:`8px 14px`,borderRadius:`20px`,cursor:`pointer`,fontWeight:600,fontSize:`12px`,display:`flex`,alignItems:`center`,gap:`8px`,boxShadow:`0 4px 20px rgba(0,0,0,0.35)`,transition:`transform 0.15s ease`},children:[(0,x.jsx)(`span`,{style:{color:_.accent},children:`⚡`}),` DevCompanion`,o.length>0&&(0,x.jsx)(`span`,{style:{background:_.accent,color:`#fff`,fontSize:`10px`,padding:`2px 6px`,borderRadius:`10px`,fontWeight:700},children:o.length})]}),n&&(0,x.jsxs)(`div`,{className:`dev-companion-panel-animate`,style:{position:`absolute`,...c.bottom===void 0?{top:50}:{bottom:50},...c.right===void 0?{left:0}:{right:0},width:440,height:400,background:_.bg,color:_.textPrimary,borderRadius:`10px`,padding:`12px`,border:`1px solid ${_.border}`,boxShadow:`0 12px 32px rgba(0,0,0,0.5)`,display:`flex`,flexDirection:`column`},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,borderBottom:`1px solid ${_.border}`,paddingBottom:`8px`,marginBottom:`10px`},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,gap:`6px`},children:[(0,x.jsx)(`button`,{onClick:()=>a(`network`),style:{background:i===`network`?_.accent:`transparent`,color:i===`network`?`#fff`:_.textSecondary,border:`none`,padding:`5px 12px`,borderRadius:`6px`,fontSize:`12px`,fontWeight:600,cursor:`pointer`,transition:`all 0.15s ease`},children:`Network`}),(0,x.jsx)(`button`,{onClick:()=>a(`storage`),style:{background:i===`storage`?_.accent:`transparent`,color:i===`storage`?`#fff`:_.textSecondary,border:`none`,padding:`5px 12px`,borderRadius:`6px`,fontSize:`12px`,fontWeight:600,cursor:`pointer`,transition:`all 0.15s ease`},children:`Storage`})]}),(0,x.jsx)(`span`,{style:{fontSize:`10px`,color:_.textSecondary,fontFamily:`monospace`},children:`Ctrl+Shift+D`})]}),(0,x.jsx)(`div`,{style:{flex:1,overflow:`hidden`},children:i===`network`?(0,x.jsx)(C,{logs:o,onClear:()=>s([])}):(0,x.jsx)(S,{})})]})]})}});

package/dist/index.js

@@ -3,56 +3,95 @@ import { useEffect as e, useState as t } from "react";
 var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t, t.exports), e = null), t.exports), r = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), i = (e) => {
+}), i = !1, a = {
+	isOffline: !1,
+	delayMs: 0
+}, o = (e) => {
+	if (i || typeof window > "u") return;
+	i = !0;
 	let t = window.fetch;
 	window.fetch = async (...n) => {
-		let [r, i] = n, a = typeof r == "string" ? r : r instanceof Request ? r.url : String(r), o = i?.method || "GET", s = {
-			id: Math.random().toString(36).substring(2, 9),
-			url: a,
-			method: o.toUpperCase(),
-			timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString()
-		};
+		let r = performance.now(), i = Math.random().toString(36).substring(2, 9), o = "", s = "GET";
+		if (typeof n[0] == "string" ? o = n[0] : n[0] instanceof URL ? o = n[0].toString() : n[0] instanceof Request && (o = n[0].url, s = n[0].method || "GET"), n[1] && n[1].method && (s = n[1].method.toUpperCase()), a.delayMs > 0 && await new Promise((e) => setTimeout(e, a.delayMs)), a.isOffline) {
+			let t = performance.now();
+			throw e({
+				id: i,
+				url: o,
+				method: s,
+				status: 0,
+				duration: Math.round(t - r),
+				timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString()
+			}), TypeError("Failed to fetch (Simulated Offline Mode)");
+		}
 		try {
-			let r = await t(...n);
-			return s.status = r.status, e(s), r;
+			let a = await t(...n), c = performance.now();
+			return e({
+				id: i,
+				url: o,
+				method: s,
+				status: a.status,
+				duration: Math.round(c - r),
+				timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString()
+			}), a;
 		} catch (t) {
-			throw s.status = 0, e(s), t;
+			let n = performance.now();
+			throw e({
+				id: i,
+				url: o,
+				method: s,
+				status: 0,
+				duration: Math.round(n - r),
+				timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString()
+			}), t;
 		}
 	};
-}, a = () => {
-	let e = [];
-	for (let t = 0; t < localStorage.length; t++) {
-		let n = localStorage.key(t);
-		n && e.push({
-			key: n,
-			value: localStorage.getItem(n) || "",
-			type: "local"
-		});
-	}
-	return e;
-}, o = () => {
-	let e = [];
-	for (let t = 0; t < sessionStorage.length; t++) {
-		let n = sessionStorage.key(t);
-		n && e.push({
-			key: n,
-			value: sessionStorage.getItem(n) || "",
-			type: "session"
-		});
-	}
-	return e;
-}, s = () => document.cookie ? document.cookie.split("; ").map((e) => {
+}, s = () => typeof document > "u" || !document.cookie ? [] : document.cookie.split("; ").map((e) => {
 	let [t, ...n] = e.split("=");
 	return {
-		key: t.trim(),
-		value: decodeURIComponent(n.join("=")),
-		type: "cookie"
+		key: t,
+		value: decodeURIComponent(n.join("="))
 	};
-}) : [], c = (e, t) => {
-	t === "local" ? localStorage.removeItem(e) : t === "session" ? sessionStorage.removeItem(e) : t === "cookie" && (document.cookie = `${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`);
-}, l = (e, t, n) => {
-	n === "local" ? localStorage.setItem(e, t) : n === "session" ? sessionStorage.setItem(e, t) : n === "cookie" && (document.cookie = `${e}=${encodeURIComponent(t)}; path=/;`);
-}, u = /* @__PURE__ */ n(((e) => {
+}), c = (e, t, n = 7) => {
+	if (typeof document > "u") return;
+	let r = new Date(Date.now() + n * 864e5).toUTCString();
+	document.cookie = `${encodeURIComponent(e)}=${encodeURIComponent(t)}; expires=${r}; path=/`;
+}, l = (e) => {
+	typeof document < "u" && (document.cookie = `${encodeURIComponent(e)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`);
+}, u = (e) => {
+	let t = {};
+	e === "localStorage" ? t = { ...localStorage } : e === "sessionStorage" ? t = { ...sessionStorage } : e === "cookie" && s().forEach((e) => {
+		t[e.key] = e.value;
+	});
+	let n = {
+		type: e,
+		timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+		data: t
+	}, r = new Blob([JSON.stringify(n, null, 2)], { type: "application/json" }), i = URL.createObjectURL(r), a = document.createElement("a");
+	a.href = i, a.download = `dev-companion-${e}-${Date.now()}.json`, a.click(), URL.revokeObjectURL(i);
+}, d = {
+	bg: "#0f172a",
+	cardBg: "#1e293b",
+	hoverBg: "#334155",
+	border: "#334155",
+	borderSubtle: "#1e293b",
+	textPrimary: "#f8fafc",
+	textSecondary: "#94a3b8",
+	accent: "#0284c7",
+	accentHover: "#0369a1",
+	success: "#4ade80",
+	warning: "#facc15",
+	danger: "#f87171",
+	methodGet: "#38bdf8",
+	methodPost: "#4ade80",
+	methodPut: "#facc15",
+	methodDelete: "#f87171"
+}, f = () => {
+	if (typeof document > "u") return;
+	let e = "dev-companion-custom-styles";
+	if (document.getElementById(e)) return;
+	let t = document.createElement("style");
+	t.id = e, t.innerHTML = "\n    .dev-companion-scroll::-webkit-scrollbar {\n      width: 5px;\n      height: 5px;\n    }\n    .dev-companion-scroll::-webkit-scrollbar-track {\n      background: #0f172a;\n    }\n    .dev-companion-scroll::-webkit-scrollbar-thumb {\n      background: #334155;\n      border-radius: 4px;\n    }\n    .dev-companion-scroll::-webkit-scrollbar-thumb:hover {\n      background: #475569;\n    }\n    @keyframes devCompanionSlideUp {\n      from {\n        opacity: 0;\n        transform: translateY(8px) scale(0.98);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n    .dev-companion-panel-animate {\n      animation: devCompanionSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n  ", document.head.appendChild(t);
+}, p = /* @__PURE__ */ n(((e) => {
 	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
 	function r(e, n, r) {
 		var i = null;
@@ -67,7 +106,7 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t, t.exports), e
 		};
 	}
 	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), d = /* @__PURE__ */ n(((e) => {
+})), m = /* @__PURE__ */ n(((e) => {
 	process.env.NODE_ENV !== "production" && (function() {
 		function t(e) {
 			if (e == null) return null;
@@ -241,283 +280,747 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t, t.exports), e
 			return f(e, t, n, !0, o, r ? P(a(e)) : R);
 		};
 	})();
-})), f = (/* @__PURE__ */ n(((e, t) => {
-	t.exports = process.env.NODE_ENV === "production" ? u() : d();
-})))(), p = () => {
-	let [n, r] = t("local"), [i, u] = t([]), [d, p] = t(""), [m, h] = t(""), g = () => {
-		n === "local" ? u(a()) : n === "session" ? u(o()) : n === "cookie" && u(s());
+})), h = (/* @__PURE__ */ n(((e, t) => {
+	t.exports = process.env.NODE_ENV === "production" ? p() : m();
+})))(), g = () => {
+	let [n, r] = t("localStorage"), [i, a] = t([]), [o, p] = t(null), [m, g] = t("");
+	e(() => {
+		f();
+	}, []);
+	let _ = () => {
+		if (typeof window > "u") return;
+		let e = [];
+		if (n === "localStorage") for (let t = 0; t < localStorage.length; t++) {
+			let n = localStorage.key(t);
+			n && e.push({
+				key: n,
+				value: localStorage.getItem(n) || ""
+			});
+		}
+		else if (n === "sessionStorage") for (let t = 0; t < sessionStorage.length; t++) {
+			let n = sessionStorage.key(t);
+			n && e.push({
+				key: n,
+				value: sessionStorage.getItem(n) || ""
+			});
+		}
+		else n === "cookie" && e.push(...s());
+		a(e);
 	};
 	e(() => {
-		g();
+		_();
 	}, [n]);
-	let _ = (e) => {
-		c(e, n), g();
+	let v = (e) => {
+		n === "localStorage" ? localStorage.setItem(e, m) : n === "sessionStorage" ? sessionStorage.setItem(e, m) : n === "cookie" && c(e, m), p(null), _();
+	}, y = (e) => {
+		n === "localStorage" ? localStorage.removeItem(e) : n === "sessionStorage" ? sessionStorage.removeItem(e) : n === "cookie" && l(e), _();
 	};
-	return /* @__PURE__ */ (0, f.jsxs)("div", {
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column",
-			gap: "10px"
+			gap: "10px",
+			height: "100%"
 		},
-		children: [
-			/* @__PURE__ */ (0, f.jsx)("div", {
+		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ (0, h.jsx)("div", {
 				style: {
 					display: "flex",
-					gap: "6px",
-					borderBottom: "1px solid #334155",
-					paddingBottom: "6px"
+					gap: "4px",
+					background: d.cardBg,
+					padding: "3px",
+					borderRadius: "6px",
+					border: `1px solid ${d.border}`
 				},
 				children: [
-					"local",
-					"session",
+					"localStorage",
+					"sessionStorage",
 					"cookie"
-				].map((e) => /* @__PURE__ */ (0, f.jsx)("button", {
+				].map((e) => /* @__PURE__ */ (0, h.jsx)("button", {
 					onClick: () => r(e),
 					style: {
-						background: n === e ? "#3b82f6" : "#1e293b",
-						color: "#fff",
-						border: "none",
 						padding: "4px 8px",
 						borderRadius: "4px",
+						border: "none",
+						background: n === e ? d.accent : "transparent",
+						color: n === e ? "#fff" : d.textSecondary,
+						cursor: "pointer",
 						fontSize: "11px",
-						cursor: "pointer"
+						fontWeight: 600,
+						transition: "all 0.15s ease"
 					},
-					children: e.toUpperCase()
+					children: e === "localStorage" ? "Local" : e === "sessionStorage" ? "Session" : "Cookies"
 				}, e))
-			}),
-			/* @__PURE__ */ (0, f.jsxs)("form", {
-				onSubmit: (e) => {
-					e.preventDefault(), d.trim() && (l(d.trim(), m.trim(), n), p(""), h(""), g());
-				},
+			}), /* @__PURE__ */ (0, h.jsxs)("div", {
 				style: {
 					display: "flex",
-					gap: "4px"
+					gap: "6px",
+					alignItems: "center"
 				},
 				children: [
-					/* @__PURE__ */ (0, f.jsx)("input", {
-						placeholder: "Key",
-						value: d,
-						onChange: (e) => p(e.target.value),
+					/* @__PURE__ */ (0, h.jsx)("button", {
+						onClick: _,
+						title: "Refresh storage data",
 						style: {
-							flex: 1,
-							padding: "4px",
+							padding: "5px 8px",
 							fontSize: "11px",
-							background: "#1e293b",
-							color: "#fff",
-							border: "1px solid #334155",
-							borderRadius: "4px"
-						}
+							background: d.cardBg,
+							color: d.accent,
+							border: `1px solid ${d.border}`,
+							borderRadius: "6px",
+							cursor: "pointer",
+							fontWeight: 600
+						},
+						children: "↻ Refresh"
 					}),
-					/* @__PURE__ */ (0, f.jsx)("input", {
-						placeholder: "Value",
-						value: m,
-						onChange: (e) => h(e.target.value),
+					/* @__PURE__ */ (0, h.jsx)("button", {
+						onClick: () => u(n),
 						style: {
-							flex: 1,
-							padding: "4px",
+							padding: "5px 9px",
 							fontSize: "11px",
-							background: "#1e293b",
-							color: "#fff",
-							border: "1px solid #334155",
-							borderRadius: "4px"
-						}
+							background: d.cardBg,
+							color: d.textPrimary,
+							border: `1px solid ${d.border}`,
+							borderRadius: "6px",
+							cursor: "pointer",
+							fontWeight: 500
+						},
+						children: "Export"
 					}),
-					/* @__PURE__ */ (0, f.jsx)("button", {
-						type: "submit",
+					/* @__PURE__ */ (0, h.jsxs)("label", {
 						style: {
-							background: "#22c55e",
-							color: "#fff",
-							border: "none",
-							padding: "4px 8px",
-							borderRadius: "4px",
+							padding: "5px 9px",
 							fontSize: "11px",
-							cursor: "pointer"
+							background: d.cardBg,
+							color: d.textPrimary,
+							border: `1px solid ${d.border}`,
+							borderRadius: "6px",
+							cursor: "pointer",
+							fontWeight: 500
 						},
-						children: "Add"
+						children: ["Import", /* @__PURE__ */ (0, h.jsx)("input", {
+							type: "file",
+							accept: ".json",
+							onChange: (e) => {
+								let t = e.target.files?.[0];
+								if (!t) return;
+								let r = new FileReader();
+								r.onload = (e) => {
+									try {
+										let t = JSON.parse(e.target?.result);
+										t && t.data && (Object.entries(t.data).forEach(([e, t]) => {
+											let r = typeof t == "string" ? t : JSON.stringify(t);
+											n === "localStorage" && localStorage.setItem(e, r), n === "sessionStorage" && sessionStorage.setItem(e, r), n === "cookie" && c(e, r);
+										}), _());
+									} catch (e) {
+										console.error("[DevCompanion] Failed to import JSON:", e);
+									}
+								}, r.readAsText(t);
+							},
+							style: { display: "none" }
+						})]
 					})
 				]
-			}),
-			/* @__PURE__ */ (0, f.jsx)("div", {
+			})]
+		}), /* @__PURE__ */ (0, h.jsx)("div", {
+			className: "dev-companion-scroll",
+			style: {
+				flex: 1,
+				overflowY: "auto",
+				background: d.cardBg,
+				borderRadius: "6px",
+				border: `1px solid ${d.border}`
+			},
+			children: i.length === 0 ? /* @__PURE__ */ (0, h.jsxs)("p", {
+				style: {
+					color: d.textSecondary,
+					fontSize: "12px",
+					textAlign: "center",
+					padding: "24px 0"
+				},
+				children: [
+					"No items found in ",
+					n,
+					"."
+				]
+			}) : /* @__PURE__ */ (0, h.jsxs)("table", {
+				style: {
+					width: "100%",
+					borderCollapse: "collapse",
+					fontSize: "11px",
+					color: d.textPrimary
+				},
+				children: [/* @__PURE__ */ (0, h.jsx)("thead", { children: /* @__PURE__ */ (0, h.jsxs)("tr", {
+					style: {
+						borderBottom: `1px solid ${d.border}`,
+						textAlign: "left",
+						background: d.bg,
+						color: d.textSecondary
+					},
+					children: [
+						/* @__PURE__ */ (0, h.jsx)("th", {
+							style: {
+								padding: "8px",
+								width: "35%"
+							},
+							children: "Key"
+						}),
+						/* @__PURE__ */ (0, h.jsx)("th", {
+							style: { padding: "8px" },
+							children: "Value"
+						}),
+						/* @__PURE__ */ (0, h.jsx)("th", {
+							style: {
+								padding: "8px",
+								width: "80px",
+								textAlign: "right"
+							},
+							children: "Actions"
+						})
+					]
+				}) }), /* @__PURE__ */ (0, h.jsx)("tbody", { children: i.map((e) => /* @__PURE__ */ (0, h.jsxs)("tr", {
+					style: { borderBottom: `1px solid ${d.borderSubtle}` },
+					children: [
+						/* @__PURE__ */ (0, h.jsx)("td", {
+							style: {
+								padding: "8px",
+								fontWeight: 600,
+								color: d.methodGet,
+								fontFamily: "monospace",
+								wordBreak: "break-all"
+							},
+							children: e.key
+						}),
+						/* @__PURE__ */ (0, h.jsx)("td", {
+							style: { padding: "8px" },
+							children: o === e.key ? /* @__PURE__ */ (0, h.jsx)("input", {
+								value: m,
+								onChange: (e) => g(e.target.value),
+								style: {
+									width: "100%",
+									background: d.bg,
+									color: d.textPrimary,
+									border: `1px solid ${d.accent}`,
+									borderRadius: "4px",
+									padding: "3px 6px",
+									fontSize: "11px",
+									outline: "none"
+								}
+							}) : /* @__PURE__ */ (0, h.jsx)("span", {
+								style: {
+									wordBreak: "break-all",
+									fontFamily: "monospace",
+									color: d.textSecondary
+								},
+								children: e.value
+							})
+						}),
+						/* @__PURE__ */ (0, h.jsxs)("td", {
+							style: {
+								padding: "8px",
+								textAlign: "right"
+							},
+							children: [o === e.key ? /* @__PURE__ */ (0, h.jsx)("button", {
+								onClick: () => v(e.key),
+								style: {
+									color: d.success,
+									background: "none",
+									border: "none",
+									cursor: "pointer",
+									fontWeight: 600,
+									marginRight: "6px"
+								},
+								children: "Save"
+							}) : /* @__PURE__ */ (0, h.jsx)("button", {
+								onClick: () => {
+									p(e.key), g(e.value);
+								},
+								style: {
+									color: d.warning,
+									background: "none",
+									border: "none",
+									cursor: "pointer",
+									marginRight: "6px"
+								},
+								children: "Edit"
+							}), /* @__PURE__ */ (0, h.jsx)("button", {
+								onClick: () => y(e.key),
+								style: {
+									color: d.danger,
+									background: "none",
+									border: "none",
+									cursor: "pointer"
+								},
+								children: "Del"
+							})]
+						})
+					]
+				}, e.key)) })]
+			})
+		})]
+	});
+}, _ = ({ logs: n = [], onClear: r }) => {
+	let [i, o] = t(""), [s, c] = t("ALL"), [l, u] = t(a.isOffline), [p, m] = t(a.delayMs), [g, _] = t(null);
+	e(() => {
+		f();
+	}, []);
+	let v = () => {
+		let e = !l;
+		u(e), a.isOffline = e;
+	}, y = (e) => {
+		m(e), a.delayMs = e;
+	}, b = n.filter((e) => {
+		if (!e || !e.url) return !1;
+		let t = e.url.toLowerCase().includes((i || "").toLowerCase()), n = s === "ALL" || e.method === s;
+		return t && n;
+	}), x = (e) => {
+		let t = `curl -X ${e.method} "${e.url}"`;
+		navigator.clipboard.writeText(t), _(e.id), setTimeout(() => _(null), 1500);
+	}, S = (e) => {
+		switch (e?.toUpperCase()) {
+			case "GET": return d.methodGet;
+			case "POST": return d.methodPost;
+			case "PUT": return d.methodPut;
+			case "DELETE": return d.methodDelete;
+			default: return d.textPrimary;
+		}
+	};
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "10px",
+			height: "100%"
+		},
+		children: [
+			/* @__PURE__ */ (0, h.jsxs)("div", {
 				style: {
-					maxHeight: "180px",
-					overflowY: "auto"
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					background: d.cardBg,
+					padding: "8px 10px",
+					borderRadius: "6px",
+					fontSize: "11px",
+					border: `1px solid ${d.borderSubtle}`,
+					flexShrink: 0
 				},
-				children: i.length === 0 ? /* @__PURE__ */ (0, f.jsx)("p", {
+				children: [/* @__PURE__ */ (0, h.jsxs)("label", {
 					style: {
-						color: "#94a3b8",
-						fontSize: "12px"
+						display: "flex",
+						alignItems: "center",
+						gap: "6px",
+						cursor: "pointer",
+						color: l ? d.danger : d.textSecondary,
+						fontWeight: 500
 					},
-					children: "No items found."
-				}) : i.map((e) => /* @__PURE__ */ (0, f.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, h.jsx)("input", {
+						type: "checkbox",
+						checked: l,
+						onChange: v,
+						style: { accentColor: d.danger }
+					}), "Offline Mode"]
+				}), /* @__PURE__ */ (0, h.jsxs)("div", {
 					style: {
 						display: "flex",
-						justifyContent: "space-between",
 						alignItems: "center",
-						padding: "4px 0",
-						borderBottom: "1px solid #1e293b",
-						fontSize: "11px"
+						gap: "6px"
 					},
-					children: [/* @__PURE__ */ (0, f.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, h.jsx)("span", {
+						style: { color: d.textSecondary },
+						children: "Delay:"
+					}), /* @__PURE__ */ (0, h.jsxs)("select", {
+						value: p,
+						onChange: (e) => y(Number(e.target.value)),
 						style: {
-							overflow: "hidden",
-							textOverflow: "ellipsis",
-							whiteSpace: "nowrap",
-							maxWidth: "220px"
+							background: d.bg,
+							color: d.textPrimary,
+							border: `1px solid ${d.border}`,
+							borderRadius: "4px",
+							padding: "2px 6px",
+							fontSize: "11px",
+							outline: "none",
+							cursor: "pointer"
 						},
 						children: [
-							/* @__PURE__ */ (0, f.jsxs)("strong", {
-								style: { color: "#38bdf8" },
-								children: [e.key, ":"]
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: 0,
+								children: "None (0ms)"
+							}),
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: 500,
+								children: "Fast 3G (500ms)"
 							}),
-							" ",
-							e.value
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: 2e3,
+								children: "Slow 3G (2s)"
+							})
 						]
-					}), /* @__PURE__ */ (0, f.jsx)("button", {
-						onClick: () => _(e.key),
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, h.jsxs)("div", {
+				style: {
+					display: "flex",
+					gap: "8px",
+					flexShrink: 0,
+					alignItems: "center"
+				},
+				children: [
+					/* @__PURE__ */ (0, h.jsx)("input", {
+						type: "text",
+						placeholder: "Filter URL...",
+						value: i,
+						onChange: (e) => o(e.target.value),
 						style: {
-							background: "#ef4444",
-							color: "#fff",
-							border: "none",
-							padding: "2px 6px",
-							borderRadius: "4px",
-							fontSize: "10px",
+							flex: 1,
+							background: d.cardBg,
+							color: d.textPrimary,
+							border: `1px solid ${d.border}`,
+							borderRadius: "6px",
+							padding: "6px 10px",
+							fontSize: "12px",
+							outline: "none"
+						}
+					}),
+					/* @__PURE__ */ (0, h.jsxs)("select", {
+						value: s,
+						onChange: (e) => c(e.target.value),
+						style: {
+							background: d.cardBg,
+							color: d.textPrimary,
+							border: `1px solid ${d.border}`,
+							borderRadius: "6px",
+							padding: "6px 8px",
+							fontSize: "12px",
+							outline: "none",
 							cursor: "pointer"
 						},
-						children: "Del"
-					})]
-				}, e.key))
+						children: [
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: "ALL",
+								children: "ALL"
+							}),
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: "GET",
+								children: "GET"
+							}),
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: "POST",
+								children: "POST"
+							}),
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: "PUT",
+								children: "PUT"
+							}),
+							/* @__PURE__ */ (0, h.jsx)("option", {
+								value: "DELETE",
+								children: "DELETE"
+							})
+						]
+					}),
+					r && /* @__PURE__ */ (0, h.jsx)("button", {
+						onClick: r,
+						title: "Clear request history",
+						style: {
+							padding: "6px 10px",
+							fontSize: "11px",
+							background: d.cardBg,
+							color: d.textSecondary,
+							border: `1px solid ${d.border}`,
+							borderRadius: "6px",
+							cursor: "pointer",
+							fontWeight: 600
+						},
+						children: "Clear"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, h.jsx)("div", {
+				className: "dev-companion-scroll",
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					display: "flex",
+					flexDirection: "column",
+					gap: "4px",
+					paddingRight: "2px"
+				},
+				children: b.length === 0 ? /* @__PURE__ */ (0, h.jsx)("p", {
+					style: {
+						color: d.textSecondary,
+						fontSize: "12px",
+						textAlign: "center",
+						marginTop: "24px"
+					},
+					children: "No requests captured."
+				}) : b.map((e) => {
+					let t = !e.status || e.status >= 400 ? d.danger : d.success;
+					return /* @__PURE__ */ (0, h.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "8px 10px",
+							background: d.cardBg,
+							borderRadius: "6px",
+							border: `1px solid ${d.borderSubtle}`,
+							fontSize: "12px",
+							flexShrink: 0
+						},
+						children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "8px",
+								overflow: "hidden"
+							},
+							children: [/* @__PURE__ */ (0, h.jsx)("span", {
+								style: {
+									fontWeight: 700,
+									color: S(e.method),
+									fontSize: "11px",
+									background: d.bg,
+									padding: "2px 6px",
+									borderRadius: "4px",
+									border: `1px solid ${d.border}`,
+									minWidth: "45px",
+									textAlign: "center"
+								},
+								children: e.method
+							}), /* @__PURE__ */ (0, h.jsx)("span", {
+								title: e.url,
+								style: {
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+									maxWidth: "170px",
+									color: d.textPrimary,
+									fontFamily: "monospace",
+									fontSize: "11px"
+								},
+								children: e.url
+							})]
+						}), /* @__PURE__ */ (0, h.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "8px",
+								flexShrink: 0
+							},
+							children: [
+								e.duration !== void 0 && /* @__PURE__ */ (0, h.jsxs)("span", {
+									style: {
+										color: d.textSecondary,
+										fontSize: "10px",
+										fontFamily: "monospace"
+									},
+									children: [e.duration, "ms"]
+								}),
+								/* @__PURE__ */ (0, h.jsx)("span", {
+									style: {
+										color: t,
+										fontWeight: 700,
+										fontSize: "11px",
+										background: `${t}15`,
+										padding: "2px 6px",
+										borderRadius: "4px"
+									},
+									children: e.status || "ERR"
+								}),
+								/* @__PURE__ */ (0, h.jsx)("button", {
+									onClick: () => x(e),
+									title: "Copy cURL",
+									style: {
+										background: g === e.id ? d.success : d.hoverBg,
+										color: g === e.id ? "#000" : d.textPrimary,
+										border: "none",
+										borderRadius: "4px",
+										padding: "3px 8px",
+										fontSize: "10px",
+										fontWeight: 600,
+										cursor: "pointer",
+										transition: "all 0.15s ease"
+									},
+									children: g === e.id ? "Copied!" : "cURL"
+								})
+							]
+						})]
+					}, e.id);
+				})
 			})
 		]
 	});
-}, m = () => {
-	let [n, r] = t(!1), [a, o] = t("network"), [s, c] = t([]);
-	return e(() => {
-		i((e) => {
-			c((t) => [e, ...t]);
+}, v = (t, n) => {
+	e(() => {
+		let e = (e) => {
+			let r = !t.ctrlOrCmd || e.metaKey || e.ctrlKey, i = !t.shift || e.shiftKey, a = e.key.toLowerCase() === t.key.toLowerCase();
+			r && i && a && (e.preventDefault(), n());
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [t, n]);
+}, y = ({ position: n = "bottom-right" }) => {
+	let [r, i] = t(!1), [a, s] = t("network"), [c, l] = t([]);
+	e(() => {
+		f();
+	}, []), v({
+		key: "d",
+		ctrlOrCmd: !0,
+		shift: !0
+	}, () => {
+		i((e) => !e);
+	}), e(() => {
+		o((e) => {
+			l((t) => [e, ...t]);
 		});
-	}, []), /* @__PURE__ */ (0, f.jsxs)("div", {
+	}, []);
+	let u = (() => {
+		switch (n) {
+			case "bottom-left": return {
+				bottom: 16,
+				left: 16
+			};
+			case "top-right": return {
+				top: 16,
+				right: 16
+			};
+			case "top-left": return {
+				top: 16,
+				left: 16
+			};
+			default: return {
+				bottom: 16,
+				right: 16
+			};
+		}
+	})();
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
 		style: {
 			position: "fixed",
-			bottom: 16,
-			right: 16,
+			...u,
 			zIndex: 99999,
-			fontFamily: "sans-serif"
+			fontFamily: "system-ui, -apple-system, sans-serif"
 		},
-		children: [/* @__PURE__ */ (0, f.jsxs)("button", {
-			onClick: () => r(!n),
+		children: [/* @__PURE__ */ (0, h.jsxs)("button", {
+			onClick: () => i(!r),
+			title: "Shortcut: Ctrl + Shift + D",
 			style: {
-				background: "#1e293b",
-				color: "#fff",
-				border: "none",
-				padding: "10px 14px",
-				borderRadius: "8px",
+				background: d.bg,
+				color: d.textPrimary,
+				border: `1px solid ${d.border}`,
+				padding: "8px 14px",
+				borderRadius: "20px",
 				cursor: "pointer",
-				fontWeight: "bold",
-				boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
+				fontWeight: 600,
+				fontSize: "12px",
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				boxShadow: "0 4px 20px rgba(0,0,0,0.35)",
+				transition: "transform 0.15s ease"
 			},
 			children: [
-				"Dev Companion (",
-				s.length,
-				")"
+				/* @__PURE__ */ (0, h.jsx)("span", {
+					style: { color: d.accent },
+					children: "⚡"
+				}),
+				" DevCompanion",
+				c.length > 0 && /* @__PURE__ */ (0, h.jsx)("span", {
+					style: {
+						background: d.accent,
+						color: "#fff",
+						fontSize: "10px",
+						padding: "2px 6px",
+						borderRadius: "10px",
+						fontWeight: 700
+					},
+					children: c.length
+				})
 			]
-		}), n && /* @__PURE__ */ (0, f.jsxs)("div", {
+		}), r && /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: "dev-companion-panel-animate",
 			style: {
 				position: "absolute",
-				bottom: 50,
-				right: 0,
-				width: 380,
-				height: 340,
-				background: "#0f172a",
-				color: "#f8fafc",
-				borderRadius: "8px",
+				...u.bottom === void 0 ? { top: 50 } : { bottom: 50 },
+				...u.right === void 0 ? { left: 0 } : { right: 0 },
+				width: 440,
+				height: 400,
+				background: d.bg,
+				color: d.textPrimary,
+				borderRadius: "10px",
 				padding: "12px",
-				boxShadow: "0 8px 24px rgba(0,0,0,0.3)",
+				border: `1px solid ${d.border}`,
+				boxShadow: "0 12px 32px rgba(0,0,0,0.5)",
 				display: "flex",
 				flexDirection: "column"
 			},
-			children: [/* @__PURE__ */ (0, f.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, h.jsxs)("div", {
 				style: {
 					display: "flex",
-					gap: "8px",
-					borderBottom: "1px solid #334155",
+					justifyContent: "space-between",
+					alignItems: "center",
+					borderBottom: `1px solid ${d.border}`,
 					paddingBottom: "8px",
-					marginBottom: "8px"
+					marginBottom: "10px"
 				},
-				children: [/* @__PURE__ */ (0, f.jsx)("button", {
-					onClick: () => o("network"),
+				children: [/* @__PURE__ */ (0, h.jsxs)("div", {
 					style: {
-						background: a === "network" ? "#0284c7" : "#1e293b",
-						color: "#fff",
-						border: "none",
-						padding: "6px 12px",
-						borderRadius: "4px",
-						fontSize: "12px",
-						fontWeight: "bold",
-						cursor: "pointer"
+						display: "flex",
+						gap: "6px"
 					},
-					children: "Network"
-				}), /* @__PURE__ */ (0, f.jsx)("button", {
-					onClick: () => o("storage"),
+					children: [/* @__PURE__ */ (0, h.jsx)("button", {
+						onClick: () => s("network"),
+						style: {
+							background: a === "network" ? d.accent : "transparent",
+							color: a === "network" ? "#fff" : d.textSecondary,
+							border: "none",
+							padding: "5px 12px",
+							borderRadius: "6px",
+							fontSize: "12px",
+							fontWeight: 600,
+							cursor: "pointer",
+							transition: "all 0.15s ease"
+						},
+						children: "Network"
+					}), /* @__PURE__ */ (0, h.jsx)("button", {
+						onClick: () => s("storage"),
+						style: {
+							background: a === "storage" ? d.accent : "transparent",
+							color: a === "storage" ? "#fff" : d.textSecondary,
+							border: "none",
+							padding: "5px 12px",
+							borderRadius: "6px",
+							fontSize: "12px",
+							fontWeight: 600,
+							cursor: "pointer",
+							transition: "all 0.15s ease"
+						},
+						children: "Storage"
+					})]
+				}), /* @__PURE__ */ (0, h.jsx)("span", {
 					style: {
-						background: a === "storage" ? "#0284c7" : "#1e293b",
-						color: "#fff",
-						border: "none",
-						padding: "6px 12px",
-						borderRadius: "4px",
-						fontSize: "12px",
-						fontWeight: "bold",
-						cursor: "pointer"
+						fontSize: "10px",
+						color: d.textSecondary,
+						fontFamily: "monospace"
 					},
-					children: "Storage"
+					children: "Ctrl+Shift+D"
 				})]
-			}), a === "network" ? /* @__PURE__ */ (0, f.jsx)("div", {
+			}), /* @__PURE__ */ (0, h.jsx)("div", {
 				style: {
 					flex: 1,
-					overflowY: "auto"
+					overflow: "hidden"
 				},
-				children: s.length === 0 ? /* @__PURE__ */ (0, f.jsx)("p", {
-					style: {
-						color: "#94a3b8",
-						fontSize: "13px"
-					},
-					children: "No requests captured yet."
-				}) : s.map((e) => /* @__PURE__ */ (0, f.jsxs)("div", {
-					style: {
-						display: "flex",
-						justifyContent: "space-between",
-						padding: "6px 0",
-						borderBottom: "1px solid #1e293b",
-						fontSize: "12px"
-					},
-					children: [
-						/* @__PURE__ */ (0, f.jsxs)("span", {
-							style: {
-								fontWeight: "bold",
-								color: e.method === "GET" ? "#38bdf8" : "#4ade80"
-							},
-							children: [
-								"[",
-								e.method,
-								"]"
-							]
-						}),
-						/* @__PURE__ */ (0, f.jsx)("span", {
-							style: {
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-								whiteSpace: "nowrap",
-								maxWidth: "180px"
-							},
-							children: e.url
-						}),
-						/* @__PURE__ */ (0, f.jsx)("span", {
-							style: { color: e.status && e.status >= 400 ? "#f87171" : "#facc15" },
-							children: e.status || "PENDING"
-						})
-					]
-				}, e.id))
-			}) : /* @__PURE__ */ (0, f.jsx)(p, {})]
+				children: a === "network" ? /* @__PURE__ */ (0, h.jsx)(_, {
+					logs: c,
+					onClear: () => l([])
+				}) : /* @__PURE__ */ (0, h.jsx)(g, {})
+			})]
 		})]
 	});
 };
-export { m as DevCompanion };
+export { y as DevCompanion };

package/dist/src/components/DevCompanion.d.ts

@@ -1,2 +1,5 @@
 import { default as React } from 'react';
-export declare const DevCompanion: React.FC;
+export interface DevCompanionProps {
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+export declare const DevCompanion: React.FC<DevCompanionProps>;

package/dist/src/components/NetworkTab.d.ts

@@ -0,0 +1,7 @@
+import { NetworkLog } from '../core/fetchInterceptor';
+interface NetworkTabProps {
+    logs: NetworkLog[];
+    onClear?: () => void;
+}
+export declare const NetworkTab: ({ logs, onClear }: NetworkTabProps) => import('react').JSX.Element;
+export {};

package/dist/src/components/StorageTab.d.ts

@@ -0,0 +1 @@
+export declare const StorageTab: () => import('react').JSX.Element;

package/dist/src/components/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const theme: {
+    bg: string;
+    cardBg: string;
+    hoverBg: string;
+    border: string;
+    borderSubtle: string;
+    textPrimary: string;
+    textSecondary: string;
+    accent: string;
+    accentHover: string;
+    success: string;
+    warning: string;
+    danger: string;
+    methodGet: string;
+    methodPost: string;
+    methodPut: string;
+    methodDelete: string;
+};
+export declare const injectDevCompanionStyles: () => void;

package/dist/src/core/fetchInterceptor.d.ts

@@ -3,8 +3,13 @@ export interface NetworkLog {
     url: string;
     method: string;
     status?: number;
+    duration?: number;
     timestamp: string;
 }
 type LogCallback = (log: NetworkLog) => void;
+export declare const networkConfig: {
+    isOffline: boolean;
+    delayMs: number;
+};
 export declare const initFetchInterceptor: (onLog: LogCallback) => void;
 export {};

package/dist/src/hooks/useKeyboardShortcut.d.ts

@@ -0,0 +1,5 @@
+export declare const useKeyboardShortcut: (keyCombo: {
+    key: string;
+    ctrlOrCmd?: boolean;
+    shift?: boolean;
+}, callback: () => void) => void;

package/dist/src/types/storage.d.ts

@@ -0,0 +1,10 @@
+export type StorageType = 'localStorage' | 'sessionStorage' | 'cookie';
+export interface StorageItem {
+    key: string;
+    value: string;
+}
+export interface StorageExportData {
+    type: StorageType;
+    data: Record<string, string>;
+    timestamp: string;
+}

package/dist/src/utils/storage.d.ts

@@ -0,0 +1,5 @@
+import { StorageItem, StorageType } from '../types/storage';
+export declare const getCookies: () => StorageItem[];
+export declare const setCookie: (key: string, value: string, days?: number) => void;
+export declare const deleteCookie: (key: string) => void;
+export declare const exportStorageJSON: (type: StorageType) => void;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@kickd0wn/react-dev-companion",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "A zero-dependency DevTools overlay for React and Next.js applications.",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
@@ -19,6 +19,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "playground": "npm --prefix playground run dev",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -50,4 +51,4 @@
     "vite": "^8.3.6",
     "vite-plugin-dts": "^5.1.2"
   }
-}
+}